mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-27 21:15:40 +02:00
Updating the iframe src when the iframe isnt visible in IE8 causes a view disconcerting font glitch (and it slows down navigation anyway), so if the iframe isnt visible, delay setting the src until it is
174 lines
6.0 KiB
JavaScript
174 lines
6.0 KiB
JavaScript
/**
|
|
* File: LeftAndMain.Layout.js
|
|
*/
|
|
|
|
(function($) {
|
|
|
|
$.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');
|
|
|
|
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;
|
|
};
|
|
|
|
}(jQuery));
|