Add Layout js back in as it contains preview JS

admin/client/dist/styles/bundle.css

@@ -12543,10 +12543,6 @@ li.class-ErrorPage>a .jstree-pageicon{
   border-left:1px solid #ced3d9;
 }
 
-.cms-preview.blocked{
-  display:none;
-}
-
 .cms-preview .cms-preview-overlay{
   width:100%;
   height:100%;

admin/client/src/bundles/bundle.js

@@ -27,6 +27,7 @@ require('expose?Router!lib/Router');
 require('i18n.js');
 require('../legacy/sspath.js');
 require('../legacy/ssui.core.js');
+// require('../legacy/LeftAndMain.Layout.js');
 require('../legacy/LeftAndMain.js');
 require('../legacy/LeftAndMain.ActionTabSet.js');
 require('../legacy/LeftAndMain.Panel.js');

admin/client/src/legacy/LeftAndMain.Layout.js

@@ -0,0 +1,178 @@
+/**
+ * File: LeftAndMain.Layout.js
+ */
+
+import $ from 'jQuery';
+
+$.fn.layout.defaults.resize = false;
+
+/**
+ * Acccess the global variable in the same way the plugin does it.
+ */
+jLayout = (typeof jLayout === 'undefined') ? {} : jLayout;
+
+/**
+ * Factory function for generating new type of algorithm for our CMS.
+ *
+ * Spec requires a definition of three column elements:
+ * - `menu` on the left
+ * - `content` area in the middle (includes the EditForm, side tool panel, actions, breadcrumbs and tabs)
+ * - `preview` on the right (will be shown if there is enough space)
+ *
+ * Required options:
+ * - `minContentWidth`: minimum size for the content display as long as the preview is visible
+ * - `minPreviewWidth`: preview will not be displayed below this size
+ * - `mode`: one of "split", "content" or "preview"
+ *
+ * The algorithm first checks which columns are to be visible and which hidden.
+ *
+ * In the case where both preview and content should be shown it first tries to assign half of non-menu space to
+ * preview and the other half to content. Then if there is not enough space for either content or preview, it tries
+ * to allocate the minimum acceptable space to that column, and the rest to the other one. If the minimum
+ * requirements are still not met, it falls back to showing content only.
+ *
+ * @param spec A structure defining columns and parameters as per above.
+ */
+jLayout.threeColumnCompressor = function (spec, options) {
+  // Spec sanity checks.
+  if (typeof spec.menu==='undefined' ||
+    typeof spec.content==='undefined' ||
+    typeof spec.preview==='undefined') {
+    throw 'Spec is invalid. Please provide "menu", "content" and "preview" elements.';
+  }
+  if (typeof options.minContentWidth==='undefined' ||
+    typeof options.minPreviewWidth==='undefined' ||
+    typeof options.mode==='undefined') {
+    throw 'Spec is invalid. Please provide "minContentWidth", "minPreviewWidth", "mode"';
+  }
+  if (options.mode!=='split' && options.mode!=='content' && options.mode!=='preview') {
+    throw 'Spec is invalid. "mode" should be either "split", "content" or "preview"';
+  }
+
+  // Instance of the algorithm being produced.
+  var obj = {
+    options: options
+  };
+
+  // Internal column handles, also implementing layout.
+  var menu = $.jLayoutWrap(spec.menu),
+    content = $.jLayoutWrap(spec.content),
+    preview = $.jLayoutWrap(spec.preview);
+
+  /**
+   * Required interface implementations follow.
+   * Refer to https://github.com/bramstein/jlayout#layout-algorithms for the interface spec.
+   */
+  obj.layout = function (container) {
+    var size = container.bounds(),
+      insets = container.insets(),
+      top = insets.top,
+      bottom = size.height - insets.bottom,
+      left = insets.left,
+      right = size.width - insets.right;
+
+    var menuWidth = spec.menu.width(),
+      contentWidth = 0,
+      previewWidth = 0;
+
+    if (this.options.mode==='preview') {
+      // All non-menu space allocated to preview.
+      contentWidth = 0;
+      previewWidth = right - left - menuWidth;
+    } else if (this.options.mode==='content') {
+      // All non-menu space allocated to content.
+      contentWidth = right - left - menuWidth;
+      previewWidth = 0;
+    } else { // ==='split'
+      // Split view - first try 50-50 distribution.
+      contentWidth = (right - left - menuWidth) / 2;
+      previewWidth = right - left - (menuWidth + contentWidth);
+
+      // If violating one of the minima, try to readjust towards satisfying it.
+      if (contentWidth < this.options.minContentWidth) {
+        contentWidth = this.options.minContentWidth;
+        previewWidth = right - left - (menuWidth + contentWidth);
+      } else if (previewWidth < this.options.minPreviewWidth) {
+        previewWidth = this.options.minPreviewWidth;
+        contentWidth = right - left - (menuWidth + previewWidth);
+      }
+
+      // If still violating one of the (other) minima, remove the preview and allocate everything to content.
+      if (contentWidth < this.options.minContentWidth || previewWidth < this.options.minPreviewWidth) {
+        contentWidth = right - left - menuWidth;
+        previewWidth = 0;
+      }
+    }
+
+    // Calculate what columns are already hidden pre-layout
+    var prehidden = {
+      content: spec.content.hasClass('column-hidden'),
+      preview: spec.preview.hasClass('column-hidden')
+    };
+
+    // Calculate what columns will be hidden (zero width) post-layout
+    var posthidden = {
+      content: contentWidth === 0,
+      preview: previewWidth === 0
+    };
+
+    // Apply classes for elements that might not be visible at all.
+    spec.content.toggleClass('column-hidden', posthidden.content);
+    spec.preview.toggleClass('column-hidden', posthidden.preview);
+
+    // Apply the widths to columns, and call subordinate layouts to arrange the children.
+    menu.bounds({'x': left, 'y': top, 'height': bottom - top, 'width': menuWidth});
+    menu.doLayout();
+
+    left += menuWidth;
+
+    content.bounds({'x': left, 'y': top, 'height': bottom - top, 'width': contentWidth});
+    if (!posthidden.content) content.doLayout();
+
+    left += contentWidth;
+
+    preview.bounds({'x': left, 'y': top, 'height': bottom - top, 'width': previewWidth});
+    if (!posthidden.preview) preview.doLayout();
+
+    if (posthidden.content !== prehidden.content) spec.content.trigger('columnvisibilitychanged');
+    if (posthidden.preview !== prehidden.preview) spec.preview.trigger('columnvisibilitychanged');
+
+    // Calculate whether preview is possible in split mode
+    if (contentWidth + previewWidth < options.minContentWidth + options.minPreviewWidth) {
+      spec.preview.trigger('disable');
+    } else {
+      spec.preview.trigger('enable');
+    }
+
+    return container;
+  };
+
+  /**
+   * Helper to generate the required `preferred`, `minimum` and `maximum` interface functions.
+   */
+  function typeLayout(type) {
+    var func = type + 'Size';
+
+    return function (container) {
+      var menuSize = menu[func](),
+        contentSize = content[func](),
+        previewSize = preview[func](),
+        insets = container.insets();
+
+      width = menuSize.width + contentSize.width + previewSize.width;
+      height = Math.max(menuSize.height, contentSize.height, previewSize.height);
+
+      return {
+        'width': insets.left + insets.right + width,
+        'height': insets.top + insets.bottom + height
+      };
+    };
+  }
+
+  // Generate interface functions.
+  obj.preferred = typeLayout('preferred');
+  obj.minimum = typeLayout('minimum');
+  obj.maximum = typeLayout('maximum');
+
+  return obj;
+};

admin/client/src/styles/legacy/_preview.scss

@@ -234,10 +234,6 @@
 	background-color: $tab-panel-texture-color;
 	border-left: 1px solid $border-color-dark;
 
-	&.blocked {
-		display: none;
-	}
-
 	.cms-preview-overlay {
 		width: 100%;
 		height: 100%;