tonyair/silverstripe-cms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-cms synced 2024-10-22 08:05:56 +02:00
Code Issues Projects Releases Wiki Activity

API CHANGE Removed DraggableSeparator, SideTabs, SideTabItem javascript classeAPI CHANGE Removed DraggableSeparator, SideTabs, SideTabItem javascript classess

Browse Source 
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92582 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2009-11-21 02:35:22 +00:00
parent ae56eba853
commit d08450575f
1 changed files with 2 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
javascript/SideTabs.js
View File

@ -1,183 +1,3 @@
// script.aculo.us EffectResize.js
// Copyright(c) 2007 - Frost Innovation AS, http://ajaxwidgets.com
//
// EffectResize.js is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/
//
// From: http://wiki.script.aculo.us/scriptaculous/show/Effect+Resize+Extension
// Modified to work with Prototype 1.4.0_rc3
/* Helper Effect for resizing elements...
*/
Effect.ReSize = Class.create();
Object.extend(Object.extend(Effect.ReSize.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = element;
if(!this.element) throw(Effect._elementDoesNotExistError);
var options = Object.extend({ amount: 100, direction: 'vert', toSize:null }, arguments[1] || {});
if( options.direction == 'vert' )
this.originalSize = options.originalSize || parseInt(this.element.style.height);
else
this.originalSize = options.originalSize || parseInt(this.element.style.width);
if( options.toSize != null ) {
options.amount = options.toSize - this.originalSize;
}
this.start(options);
},
setup: function() {
// Prevent executing on elements not in the layout flow
if(this.element.style.display == 'none') { this.cancel(); return; }
},
update: function(position) {
if( this.options.direction == 'vert' ) {
this.element.style.height = this.originalSize+(this.options.amount*position)+'px';
} else {
this.element.style.width = this.originalSize+(this.options.amount*position)+'px';
}
},
finish: function() {
if( this.options.direction == 'vert' ) {
this.element.style.height = this.originalSize+this.options.amount+'px';
// Modification to make 'Page Version History' resize correctly:
if(this.element.onresize) this.element.onresize();
} else {
this.element.style.width = this.originalSize+this.options.amount+'px';
}
}
});
// End: script.aculo.us EffectResize.js
SideTabs = Class.create();
SideTabs.prototype = {
/**
* Set up the SideTab set. Note that tabs themselves are automatically constructed
* from the HTML.
*/
initialize: function() {
this.tabs = this.getElementsByTagName('h2');
this.resize();
$('Form_EditForm').observeMethod('PageLoaded',this.onpagechanged.bind(this));
},
destroy: function() {
this.tabs = null;
},
/**
* Fix all the panes' sizes in response to one being opened or closed
*
* @param useEffect boolean Use smooth resizing effect
*/
resize: function(useEffect) {
var i,numOpenPanes=0,otherPanes = [];
for(i=0;i<this.tabs.length;i++) {
if(this.tabs[i].selected) {
numOpenPanes++;
}
otherPanes[otherPanes.length] = this.tabs[i].linkedPane;
}
if(numOpenPanes > 0) {
// We no longer hide the left frame
// $('left').show();
var totalHeight = getFittingHeight(this.tabs[0].linkedPane, 0, otherPanes);
var eachHeight = totalHeight / numOpenPanes;
for(i=0;i<this.tabs.length;i++) {
if(this.tabs[i].selected) {
if (useEffect == true) {
new Effect.ReSize(this.tabs[i].linkedPane, {direction:'vert', toSize:eachHeight, duration:.4});
} else {
this.tabs[i].linkedPane.style.height = eachHeight + 'px';
}
if(this.tabs[i].linkedPane.onresize) this.tabs[i].linkedPane.onresize();
}
}
// All panes closed, hide the whole left-hand panel
} else {
// Don't collapse it when all are closed. Can be resized manually
// $('left').hide();
}
},
/**
* Refresh all the panes after we change to a new page
*/
onpagechanged: function() {
var item,i;
for(i=0;item=this.tabs[i];i++) {
if(this.tabs[i].selected && this.tabs[i].linkedPane.onpagechanged) this.tabs[i].linkedPane.onpagechanged();
}
}
}
SideTabItem = Class.create();
SideTabItem.prototype = {
/**
* Set up one of the side tabs
*/
initialize: function() {
var holderID = this.id.replace('heading_','') + '_holder';
this.linkedPane = $(holderID);
if(!this.linkedPane) throw("Can't find item: " + holderID);
this.selected = (this.className && this.className.indexOf('selected') > -10);
this.holder = $('treepanes');
this.linkedPane.style.display = this.selected ? '' : 'none';
},
destroy: function() {
this.holder = null;
this.linkedPane = null;
this.onclick = null;
},
/**
* Handler for <h2> click
*/
onclick: function(event) {
Event.stop(event);
var toggleID = this.id.replace('heading_','') + '_toggle';
Element.toggle(toggleID + '_closed');
Element.toggle(toggleID + '_open');
this.toggle();
},
toggle: function() {
if(this.selected) this.close();
else this.open();
},
open: function() {
if(!this.selected) {
this.selected = true;
Element.addClassName(this,'selected');
this.linkedPane.style.display = '';
this.linkedPane.style.height = '0px';
this.holder.resize(true);
if(this.linkedPane.onshow) {
this.linkedPane.onshow();
}
}
},
close: function() {
if(this.selected) {
this.selected = false;
Element.removeClassName(this,'selected');
new Effect.ReSize(this.linkedPane, {direction:'vert', toSize:0, duration:.4});
this.holder.resize(true);
if(this.holder.onhide) this.holder.onhide();
if(this.linkedPane.onclose) this.linkedPane.onclose();
}
}
}
// Application order is important - the Items must be created before the SideTabs object.
SideTabItem.applyTo('#treepanes h2');
SideTabs.applyTo('#treepanes');
/** /**
* Generic base class for all side panels * Generic base class for all side panels
*/ */
@ -194,11 +14,7 @@ SidePanel.prototype = {
this.body.innerHTML = '<p>loading...</p>'; this.body.innerHTML = '<p>loading...</p>';
this.ajaxGetPanel(this.afterPanelLoaded); this.ajaxGetPanel(this.afterPanelLoaded);
}, },
onresize : function() {
fitToParent(this.body);
},
ajaxGetPanel : function(onComplete) { ajaxGetPanel : function(onComplete) {
fitToParent(this.body);
new Ajax.Updater(this.body, this.ajaxURL(), { new Ajax.Updater(this.body, this.ajaxURL(), {
onComplete : onComplete ? onComplete.bind(this) : null, onComplete : onComplete ? onComplete.bind(this) : null,
onFailure : this.ajaxPanelError onFailure : this.ajaxPanelError
@ -241,44 +57,7 @@ SidePanelRecord.prototype = {
} }
/**
* Class that will add an 'over' class when the mouse is over the object
*/
Highlighter = Class.create();
Highlighter.prototype = {
onmouseover: function() {
Element.addClassName(this,'over');
},
onmouseout: function() {
Element.removeClassName(this,'over');
},
destroy: function() {
this.onmouseover = null;
this.onmouseout = null;
},
select: function(dontHide) {
if(dontHide) {
Element.addClassName(this,'current');
this.parentNode.lastSelected = null;
} else {
if(this.parentNode.lastSelected) {
Element.removeClassName(this.parentNode.lastSelected,'current');
Element.addClassName(this,'current');
} else {
var i,item;
for(i=0;item=this.parentNode.childNodes[i];i++) {
if(item.tagName) {
if(item == this) Element.addClassName(item,'current');
else Element.removeClassName(item,'current');
}
}
}
this.parentNode.lastSelected = this;
}
}
}
/** /**
@ -346,7 +125,7 @@ VersionList.prototype = {
} }
} }
VersionItem = Class.extend('Highlighter'); VersionItem = Class.create();
VersionItem.prototype = { VersionItem.prototype = {
initialize : function() { initialize : function() {
this.holder = $('versions_holder'); this.holder = $('versions_holder');