mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
f4b080ee06
Introduces a preview window that appears when the screen is wide enough, removes old preview button, adds a draft-public switch, adds variety of preview options which are not hooked up yet. Goes along with cms commit fa3738a9f4c5181eabf18a77ca89792d31592250
200 lines
5.9 KiB
JavaScript
200 lines
5.9 KiB
JavaScript
/**
|
|
* @preserve jLayout JQuery Plugin v0.17
|
|
*
|
|
* Licensed under the new BSD License.
|
|
* Copyright 2008-2009 Bram Stein
|
|
* All rights reserved.
|
|
*/
|
|
/*global jQuery jLayout*/
|
|
if (jQuery && jLayout) {
|
|
(function ($) {
|
|
/**
|
|
* This wraps jQuery objects in another object that supplies
|
|
* the methods required for the layout algorithms.
|
|
*/
|
|
// CUSTOM hfriedlander 2012-10-26 for side-by-side editing.
|
|
// function wrap(item, resize) {
|
|
var wrap = $.jLayoutWrap = function(item, resize) {
|
|
// CUSTOM END
|
|
var that = {};
|
|
// CUSTOM hfriedlander 2012-10-26 for side-by-side editing.
|
|
that.item = item;
|
|
// CUSTOM END
|
|
|
|
$.each(['min', 'max'], function (i, name) {
|
|
that[name + 'imumSize'] = function (value) {
|
|
var l = item.data('jlayout');
|
|
|
|
if (l) {
|
|
return l[name + 'imum'](that);
|
|
} else {
|
|
return item[name + 'Size'](value);
|
|
}
|
|
};
|
|
});
|
|
|
|
$.extend(that, {
|
|
doLayout: function () {
|
|
// CUSTOM hfriedlander 2012-10-26 for side-by-side editing.
|
|
//var l = item.data('jlayout');
|
|
//
|
|
//if (l) {
|
|
// l.layout(that);
|
|
//}
|
|
//
|
|
var l = item.data('jlayout');
|
|
if (l) l.layout(that);
|
|
else if (item.is('[data-layout-type]')) {
|
|
item.layout({resize: false});
|
|
}
|
|
// CUSTOM END
|
|
|
|
item.css({position: 'absolute'});
|
|
},
|
|
isVisible: function () {
|
|
return item.isVisible();
|
|
},
|
|
insets: function () {
|
|
var p = item.padding(),
|
|
b = item.border();
|
|
|
|
return {
|
|
'top': p.top,
|
|
'bottom': p.bottom + b.bottom + b.top,
|
|
'left': p.left,
|
|
'right': p.right + b.right + b.left
|
|
};
|
|
},
|
|
bounds: function (value) {
|
|
var tmp = {};
|
|
|
|
if (value) {
|
|
if (typeof value.x === 'number') {
|
|
tmp.left = value.x;
|
|
}
|
|
if (typeof value.y === 'number') {
|
|
tmp.top = value.y;
|
|
}
|
|
if (typeof value.width === 'number') {
|
|
tmp.width = (value.width - (item.outerWidth(true) - item.width()));
|
|
tmp.width = (tmp.width >= 0) ? tmp.width : 0;
|
|
}
|
|
if (typeof value.height === 'number') {
|
|
tmp.height = value.height - (item.outerHeight(true) - item.height());
|
|
tmp.height = (tmp.height >= 0) ? tmp.height : 0;
|
|
}
|
|
item.css(tmp);
|
|
return item;
|
|
} else {
|
|
tmp = item.position();
|
|
return {
|
|
'x': tmp.left,
|
|
'y': tmp.top,
|
|
'width': item.outerWidth(false),
|
|
'height': item.outerHeight(false)
|
|
};
|
|
}
|
|
},
|
|
preferredSize: function () {
|
|
var minSize,
|
|
maxSize,
|
|
margin = item.margin(),
|
|
size = {width: 0, height: 0},
|
|
l = item.data('jlayout');
|
|
|
|
if (l && resize) {
|
|
size = l.preferred(that);
|
|
|
|
minSize = that.minimumSize();
|
|
maxSize = that.maximumSize();
|
|
|
|
size.width += margin.left + margin.right;
|
|
size.height += margin.top + margin.bottom;
|
|
|
|
if (size.width < minSize.width || size.height < minSize.height) {
|
|
size.width = Math.max(size.width, minSize.width);
|
|
size.height = Math.max(size.height, minSize.height);
|
|
} else if (size.width > maxSize.width || size.height > maxSize.height) {
|
|
size.width = Math.min(size.width, maxSize.width);
|
|
size.height = Math.min(size.height, maxSize.height);
|
|
}
|
|
} else {
|
|
size = that.bounds();
|
|
size.width += margin.left + margin.right;
|
|
size.height += margin.top + margin.bottom;
|
|
}
|
|
return size;
|
|
}
|
|
});
|
|
return that;
|
|
}
|
|
|
|
$.fn.layout = function (options) {
|
|
var opts = $.extend({}, $.fn.layout.defaults, options);
|
|
return $.each(this, function () {
|
|
var element = $(this),
|
|
o = $.metadata && element.metadata().layout ? $.extend(opts, element.metadata().layout) : opts,
|
|
// CUSTOM ischommer 2012-16-02 Allow type setting throgh built-in jQuery HTML5 data getters, to avoid including jQuery.metadata.js
|
|
o = element.data('layoutType') ? $.extend(o, {type: element.data('layoutType')}) : o,
|
|
// CUSTOM END
|
|
elementWrapper = wrap(element, o.resize);
|
|
if (o.type === 'border' && typeof jLayout.border !== 'undefined') {
|
|
$.each(['north', 'south', 'west', 'east', 'center'], function (i, name) {
|
|
if (element.children().hasClass(name)) {
|
|
o[name] = wrap(element.children('.' + name + ':first'));
|
|
}
|
|
});
|
|
element.data('jlayout', jLayout.border(o));
|
|
} else if (o.type === 'grid' && typeof jLayout.grid !== 'undefined') {
|
|
o.items = [];
|
|
element.children().each(function (i) {
|
|
if (!$(this).hasClass('ui-resizable-handle')) {
|
|
o.items[i] = wrap($(this));
|
|
}
|
|
});
|
|
element.data('jlayout', jLayout.grid(o));
|
|
} else if (o.type === 'flexGrid' && typeof jLayout.flexGrid !== 'undefined') {
|
|
o.items = [];
|
|
element.children().each(function (i) {
|
|
if (!$(this).hasClass('ui-resizable-handle')) {
|
|
o.items[i] = wrap($(this));
|
|
}
|
|
});
|
|
element.data('jlayout', jLayout.flexGrid(o));
|
|
} else if (o.type === 'column' && typeof jLayout.column !== 'undefined') {
|
|
o.items = [];
|
|
element.children().each(function (i) {
|
|
if (!$(this).hasClass('ui-resizable-handle')) {
|
|
o.items[i] = wrap($(this));
|
|
}
|
|
});
|
|
element.data('jlayout', jLayout.column(o));
|
|
} else if (o.type === 'flow' && typeof jLayout.flow !== 'undefined') {
|
|
o.items = [];
|
|
element.children().each(function (i) {
|
|
if (!$(this).hasClass('ui-resizable-handle')) {
|
|
o.items[i] = wrap($(this));
|
|
}
|
|
});
|
|
element.data('jlayout', jLayout.flow(o));
|
|
}
|
|
|
|
if (o.resize) {
|
|
elementWrapper.bounds(elementWrapper.preferredSize());
|
|
}
|
|
|
|
elementWrapper.doLayout();
|
|
element.css({position: 'relative'});
|
|
if ($.ui !== undefined) {
|
|
element.addClass('ui-widget');
|
|
}
|
|
});
|
|
};
|
|
|
|
$.fn.layout.defaults = {
|
|
resize: true,
|
|
type: 'grid'
|
|
};
|
|
}(jQuery));
|
|
}
|