Fullscreen preview mode

sanariaz154 · Nov 20, 2015 · d5f1011 · d5f1011
1 parent 8bdbfc1
commit d5f1011
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -336,6 +336,8 @@ to be notified when the action completes:
 * `refreshPreview([callback])` - reloads the preview with the latest content in the editor and filesystem
 * `useMobilePreview([callback])` - uses a Mobile view in the preview, as it would look on a smartphone
 * `useDesktopPreview([callback])` - uses a Desktop view in the preview, as it would look on a desktop computer (default)
+* `enableFullscreenPreview([callback])` - shows a fullscreen preview of the current file
+* `disableFullscreenPreview([callback])` - turns off the fullscreen preview of the curent file
 * `enableJavaScript([callback])` - turns on JavaScript execution for the preview (default)
 * `disableJavaScript([callback])` - turns off JavaScript execution for the preview
 * `enableWordWrap([callback])` - turns on word wrap for the editor (default)

diff --git a/src/bramble/client/main.js b/src/bramble/client/main.js
@@ -806,6 +806,14 @@ define([
         this._executeRemoteCommand({commandCategory: "bramble", command: "BRAMBLE_DESKTOP_PREVIEW"}, callback);
     };
 
+    BrambleProxy.prototype.enableFullscreenPreview = function(callback) {
+        this._executeRemoteCommand({commandCategory: "bramble", command: "BRAMBLE_ENABLE_FULLSCREEN_PREVIEW"}, callback);
+    };
+
+    BrambleProxy.prototype.disableFullscreenPreview = function(callback) {
+        this._executeRemoteCommand({commandCategory: "bramble", command: "BRAMBLE_DISABLE_FULLSCREEN_PREVIEW"}, callback);
+    };
+
     BrambleProxy.prototype.enableJavaScript = function(callback) {
         this._executeRemoteCommand({commandCategory: "bramble", command: "BRAMBLE_ENABLE_SCRIPTS"}, callback);
     };

diff --git a/src/extensions/default/bramble/lib/RemoteCommandHandler.js b/src/extensions/default/bramble/lib/RemoteCommandHandler.js
@@ -76,6 +76,12 @@ define(function (require, exports, module) {
         case "BRAMBLE_DESKTOP_PREVIEW":
             UI.showDesktopView();
             break;
+        case "BRAMBLE_ENABLE_FULLSCREEN_PREVIEW":
+            UI.enableFullscreenPreview();
+            break;
+        case "BRAMBLE_DISABLE_FULLSCREEN_PREVIEW":
+            UI.disableFullscreenPreview();
+            break;
         case "BRAMBLE_ENABLE_SCRIPTS":
             HTMLRewriter.enableScripts();
             PostMessageTransport.reload();

diff --git a/src/extensions/default/bramble/lib/UI.js b/src/extensions/default/bramble/lib/UI.js
@@ -195,6 +195,14 @@ define(function (require, exports, module) {
         MainViewManager.setActivePaneId("first-pane");
     }
 
+    function enableFullscreenPreview() {
+        $("#main-view").addClass("fullscreen-preview");
+    }
+
+    function disableFullscreenPreview() {
+        $("#main-view").removeClass("fullscreen-preview");
+    }
+
     function showDesktopView(preventReload) {
         if(!isMobileViewOpen) {
             return;
@@ -323,6 +331,8 @@ define(function (require, exports, module) {
     exports.initUI                 = initUI;
     exports.showMobileView         = showMobileView;
     exports.showDesktopView        = showDesktopView;
+    exports.enableFullscreenPreview = enableFullscreenPreview;
+    exports.disableFullscreenPreview = disableFullscreenPreview;
     exports.getPreviewMode         = getPreviewMode;
     exports.removeLeftSideToolBar  = removeLeftSideToolBar;
     exports.removeMainToolBar      = removeMainToolBar;

diff --git a/src/styles/bramble_overrides.css b/src/styles/bramble_overrides.css
@@ -63,3 +63,11 @@ li.jstree-leaf > a {
 .image-header {
     height: auto !important;
 }
+
+.fullscreen-preview  #first-pane {
+    display: none;
+}
+
+.fullscreen-preview  .main-view .content {
+  left: 0 !important;
+}