Handle view commands

Gruntfile.js

@@ -32,7 +32,7 @@ module.exports = function(grunt) {
                     // Upload
                     'resources/assets/bower_components/dropzone/dist/dropzone.js',
                     // Image crop
-                    'resources/assets/bower_components/imgareaselect/jquery.imgareaselect.dev.js',
+                    //'resources/assets/bower_components/imgareaselect/jquery.imgareaselect.dev.js',
                     // Sharp
                     'resources/assets/js/sharp.form.js',
                     'resources/assets/js/sharp.date.js',

resources/assets/js/sharp.commands.js

@@ -100,6 +100,48 @@ function handleCommandReturn_ALERT(data) {
     sweetAlert(data.title, data.message, data.level);
 }
 
+function handleCommandReturn_VIEW(data) {
+    showPageOverlay();
+
+    var $body = $("body");
+
+    var $cmdViewPanel = $("#command_view_panel");
+    if(!$cmdViewPanel.length) {
+        $cmdViewPanel = $('<div id="command_view_panel"/>');
+        $body.append($cmdViewPanel);
+    }
+
+    $cmdViewPanel.html(data.html);
+
+    $cmdViewPanel.animate({
+        left:'2vw'
+    });
+
+    var $overlay = $(".sharp-page-overlay");
+
+    var handler = function(event) {
+
+        // If keydown event, only handle ESC
+        if(event.type == "keydown" && event.which != 27) {
+            return true;
+        }
+
+        // Hide panel
+        $cmdViewPanel.animate({
+            left:'110vw'
+        }, 'fast');
+
+        // Unbind event
+        $overlay.unbind("click", handler);
+        $body.unbind("keydown", handler);
+
+        hidePageOverlay();
+    };
+
+    $overlay.bind("click", handler);
+    $body.bind("keydown", handler);
+}
+
 function handleCommandReturn_RELOAD() {
     window.location.reload();
 }

resources/assets/js/sharp.ui.js

@@ -133,16 +133,19 @@ function deactivate($source, jsonData) {
 }
 
 var $pageOverlay = null;
+var $body = $("body");
 function showPageOverlay() {
     if(!$pageOverlay) {
         $pageOverlay = $("<div>").addClass("sharp-page-overlay hidden");
-        $("body").append($pageOverlay);
+        $body.append($pageOverlay);
     }
     $pageOverlay.removeClass("hidden");
+    $body.css("overflow", "hidden");
 }
 
 function hidePageOverlay() {
     if($pageOverlay) {
         $pageOverlay.addClass("hidden");
     }
+    $body.css("overflow", "auto");
 }

resources/assets/less/listview.less

@@ -126,4 +126,16 @@ body.sharp-list {
     opacity: 1;
     background-color: lighten(@sharp-contexbar-bg, 35%) !important;
   }
+}
+
+#command_view_panel {
+  background: #fff;
+  height:100vh;
+  width:98vw;
+  position: fixed;
+  left:110vw;
+  top:0;
+  z-index:9999;
+  box-shadow: 0 0 10px #333;
+  overflow: auto;
 }

resources/assets/less/main.less

@@ -56,7 +56,7 @@ body.sharp-auth {
   right: 0;
   top: 0;
   bottom: 0;
-  z-index: 9999;
+  z-index: 9998;
   position: fixed;
 }