mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
MINOR Moved layout javascript logic from CMSMain.js to LeftAndMain.js, so other subclasses of LeftAndMain can use it as well
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92706 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer
parent
e30f92a2f8
commit
05d1f6e038
@ -6,119 +6,6 @@ var ss_MainLayout;
|
|||||||
|
|
||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
/**
|
|
||||||
* @class Layout handling for the main CMS interface,
|
|
||||||
* with tree on left and main edit form on the right.
|
|
||||||
* @name ss.CMSMain
|
|
||||||
*/
|
|
||||||
$('body.CMSMain').concrete('ss', function($){
|
|
||||||
return/** @lends ss.CMSMain */{
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reference to jQuery.layout element
|
|
||||||
* @type Object
|
|
||||||
*/
|
|
||||||
MainLayout: null,
|
|
||||||
|
|
||||||
onmatch: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
// Layout
|
|
||||||
ss_MainLayout = this._setupLayout();
|
|
||||||
this.setMainLayout(ss_MainLayout);
|
|
||||||
layoutState.options.keys = "west.size,west.isClosed";
|
|
||||||
$(window).unload(function(){ layoutState.save('ss_MainLayout');});
|
|
||||||
|
|
||||||
// artificially delay the resize event 200ms
|
|
||||||
// to avoid overlapping height changes in different onresize() methods
|
|
||||||
$(window).resize(function () {
|
|
||||||
var timerID = "timerCMSMainResize";
|
|
||||||
if (window[timerID]) clearTimeout(window[timerID]);
|
|
||||||
window[timerID] = setTimeout(function() {self._resizeChildren();}, 200);
|
|
||||||
});
|
|
||||||
|
|
||||||
// If tab has no nested tabs, set overflow to auto
|
|
||||||
$(this).find('.tab').not(':has(.tab)').css('overflow', 'auto');
|
|
||||||
|
|
||||||
this._resizeChildren();
|
|
||||||
|
|
||||||
this._super();
|
|
||||||
},
|
|
||||||
|
|
||||||
_resizeChildren: function() {
|
|
||||||
$("#treepanes", this).accordion("resize");
|
|
||||||
$('#sitetree_and_tools', this).fitHeightToParent();
|
|
||||||
$('#contentPanel form', this).fitHeightToParent();
|
|
||||||
$('#contentPanel form fieldset', this).fitHeightToParent();
|
|
||||||
$('#contentPanel form fieldset .content', this).fitHeightToParent();
|
|
||||||
|
|
||||||
this._super();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize jQuery layout manager with the following panes:
|
|
||||||
* - east: Tree, Page Version History, Site Reports
|
|
||||||
* - center: Form
|
|
||||||
* - west: "Insert Image", "Insert Link", "Insert Flash" panes
|
|
||||||
* - north: CMS area menu bar
|
|
||||||
* - south: "Page view", "profile" and "logout" links
|
|
||||||
*/
|
|
||||||
_setupLayout: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
// layout containing the tree, CMS menu, the main form etc.
|
|
||||||
var savedLayoutSettings = layoutState.load('ss_MainLayout');
|
|
||||||
var layoutSettings = jQuery.extend({
|
|
||||||
defaults: {
|
|
||||||
// TODO Reactivate once we have localized values
|
|
||||||
togglerTip_open: '',
|
|
||||||
togglerTip_closed: '',
|
|
||||||
resizerTip: '',
|
|
||||||
sliderTip: '',
|
|
||||||
onresize: function() {self._resizeChildren();},
|
|
||||||
onopen: function() {self._resizeChildren();}
|
|
||||||
},
|
|
||||||
north: {
|
|
||||||
slidable: false,
|
|
||||||
resizable: false,
|
|
||||||
size: 35,
|
|
||||||
togglerLength_open: 0
|
|
||||||
},
|
|
||||||
south: {
|
|
||||||
slidable: false,
|
|
||||||
resizable: false,
|
|
||||||
size: 23,
|
|
||||||
togglerLength_open: 0
|
|
||||||
},
|
|
||||||
west: {
|
|
||||||
size: 225,
|
|
||||||
fxName: "none"
|
|
||||||
},
|
|
||||||
east: {
|
|
||||||
initClosed: true,
|
|
||||||
// multiple panels which are triggered through tinymce buttons,
|
|
||||||
// so a user shouldn't be able to toggle this panel manually
|
|
||||||
initHidden: true,
|
|
||||||
spacing_closed: 0,
|
|
||||||
fxName: "none",
|
|
||||||
size: 250
|
|
||||||
},
|
|
||||||
center: {}
|
|
||||||
}, savedLayoutSettings);
|
|
||||||
var layout = $('body').layout(layoutSettings);
|
|
||||||
|
|
||||||
// Adjust tree accordion etc. in left panel to work correctly
|
|
||||||
// with jQuery.layout (see http://layout.jquery-dev.net/tips.html#Widget_Accordion)
|
|
||||||
this.find("#treepanes").accordion({
|
|
||||||
fillSpace: true,
|
|
||||||
animated: false
|
|
||||||
});
|
|
||||||
|
|
||||||
return layout;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class CMS-specific form behaviour
|
* @class CMS-specific form behaviour
|
||||||
* @name ss.EditForm
|
* @name ss.EditForm
|
||||||
|
|||||||
@ -13,6 +13,13 @@
|
|||||||
*/
|
*/
|
||||||
$('.LeftAndMain').concrete('ss', function($){
|
$('.LeftAndMain').concrete('ss', function($){
|
||||||
return/** @lends ss.EditMemberProfile */ {
|
return/** @lends ss.EditMemberProfile */ {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reference to jQuery.layout element
|
||||||
|
* @type Object
|
||||||
|
*/
|
||||||
|
MainLayout: null,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @type Number Interval in which /Security/ping will be checked for a valid login session.
|
* @type Number Interval in which /Security/ping will be checked for a valid login session.
|
||||||
*/
|
*/
|
||||||
@ -25,6 +32,12 @@
|
|||||||
$('.ss-loading-screen').hide();
|
$('.ss-loading-screen').hide();
|
||||||
$(document).removeClass('stillLoading');
|
$(document).removeClass('stillLoading');
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
ss_MainLayout = this._setupLayout();
|
||||||
|
this.setMainLayout(ss_MainLayout);
|
||||||
|
layoutState.options.keys = "west.size,west.isClosed";
|
||||||
|
$(window).unload(function(){ layoutState.save('ss_MainLayout');});
|
||||||
|
|
||||||
this._setupPinging();
|
this._setupPinging();
|
||||||
this._setupButtons();
|
this._setupButtons();
|
||||||
this._resizeChildren();
|
this._resizeChildren();
|
||||||
@ -37,6 +50,9 @@
|
|||||||
window[timerID] = setTimeout(function() {self._resizeChildren();}, 200);
|
window[timerID] = setTimeout(function() {self._resizeChildren();}, 200);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// If tab has no nested tabs, set overflow to auto
|
||||||
|
$(this).find('.tab').not(':has(.tab)').css('overflow', 'auto');
|
||||||
|
|
||||||
// trigger resize whenever new tabs are shown
|
// trigger resize whenever new tabs are shown
|
||||||
// @todo This is called multiple times when tabs are loaded
|
// @todo This is called multiple times when tabs are loaded
|
||||||
this.find('.ss-tabset').bind('tabsshow', function() {self._resizeChildren();});
|
this.find('.ss-tabset').bind('tabsshow', function() {self._resizeChildren();});
|
||||||
@ -46,6 +62,68 @@
|
|||||||
this._super();
|
this._super();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize jQuery layout manager with the following panes:
|
||||||
|
* - east: Tree, Page Version History, Site Reports
|
||||||
|
* - center: Form
|
||||||
|
* - west: "Insert Image", "Insert Link", "Insert Flash" panes
|
||||||
|
* - north: CMS area menu bar
|
||||||
|
* - south: "Page view", "profile" and "logout" links
|
||||||
|
*/
|
||||||
|
_setupLayout: function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
// layout containing the tree, CMS menu, the main form etc.
|
||||||
|
var savedLayoutSettings = layoutState.load('ss_MainLayout');
|
||||||
|
var layoutSettings = jQuery.extend({
|
||||||
|
defaults: {
|
||||||
|
// TODO Reactivate once we have localized values
|
||||||
|
togglerTip_open: '',
|
||||||
|
togglerTip_closed: '',
|
||||||
|
resizerTip: '',
|
||||||
|
sliderTip: '',
|
||||||
|
onresize: function() {self._resizeChildren();},
|
||||||
|
onopen: function() {self._resizeChildren();}
|
||||||
|
},
|
||||||
|
north: {
|
||||||
|
slidable: false,
|
||||||
|
resizable: false,
|
||||||
|
size: 35,
|
||||||
|
togglerLength_open: 0
|
||||||
|
},
|
||||||
|
south: {
|
||||||
|
slidable: false,
|
||||||
|
resizable: false,
|
||||||
|
size: 23,
|
||||||
|
togglerLength_open: 0
|
||||||
|
},
|
||||||
|
west: {
|
||||||
|
size: 225,
|
||||||
|
fxName: "none"
|
||||||
|
},
|
||||||
|
east: {
|
||||||
|
initClosed: true,
|
||||||
|
// multiple panels which are triggered through tinymce buttons,
|
||||||
|
// so a user shouldn't be able to toggle this panel manually
|
||||||
|
initHidden: true,
|
||||||
|
spacing_closed: 0,
|
||||||
|
fxName: "none",
|
||||||
|
size: 250
|
||||||
|
},
|
||||||
|
center: {}
|
||||||
|
}, savedLayoutSettings);
|
||||||
|
var layout = $('body').layout(layoutSettings);
|
||||||
|
|
||||||
|
// Adjust tree accordion etc. in left panel to work correctly
|
||||||
|
// with jQuery.layout (see http://layout.jquery-dev.net/tips.html#Widget_Accordion)
|
||||||
|
this.find("#treepanes").accordion({
|
||||||
|
fillSpace: true,
|
||||||
|
animated: false
|
||||||
|
});
|
||||||
|
|
||||||
|
return layout;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This function is called by prototype when it receives notification that the user was logged out.
|
* This function is called by prototype when it receives notification that the user was logged out.
|
||||||
* It uses /Security/ping for this purpose, which should return '1' if a valid user session exists.
|
* It uses /Security/ping for this purpose, which should return '1' if a valid user session exists.
|
||||||
@ -105,6 +183,11 @@
|
|||||||
* to fit the boundary box provided by the layout manager
|
* to fit the boundary box provided by the layout manager
|
||||||
*/
|
*/
|
||||||
_resizeChildren: function() {
|
_resizeChildren: function() {
|
||||||
|
$("#treepanes", this).accordion("resize");
|
||||||
|
$('#sitetree_and_tools', this).fitHeightToParent();
|
||||||
|
$('#contentPanel form', this).fitHeightToParent();
|
||||||
|
$('#contentPanel form fieldset', this).fitHeightToParent();
|
||||||
|
$('#contentPanel form fieldset .content', this).fitHeightToParent();
|
||||||
$('#Form_EditForm').fitHeightToParent();
|
$('#Form_EditForm').fitHeightToParent();
|
||||||
$('#Form_EditForm fieldset', this).fitHeightToParent();
|
$('#Form_EditForm fieldset', this).fitHeightToParent();
|
||||||
// Order of resizing is important: Outer to inner
|
// Order of resizing is important: Outer to inner
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user