Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js') (more/less context) (ignore whitespace changes)
| -rw-r--r-- | frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js | 282 |
1 files changed, 282 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js new file mode 100644 index 0000000..6b8ce9e --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js @@ -0,0 +1,282 @@ +/**
+ * @class YAHOO.ext.SplitLayoutRegion
+ * @extends YAHOO.ext.LayoutRegion
+ * Adds a splitbar and other (private) useful functionality to a LayoutRegion
+ */
+YAHOO.ext.SplitLayoutRegion = function(mgr, config, pos, cursor){
+ this.cursor = cursor;
+ YAHOO.ext.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+ if(config.split){
+ this.hide();
+ }
+};
+
+YAHOO.extendX(YAHOO.ext.SplitLayoutRegion, YAHOO.ext.LayoutRegion, {
+ applyConfig : function(config){
+ YAHOO.ext.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+ if(config.split){
+ if(!this.split){
+ var splitEl = YAHOO.ext.DomHelper.append(this.mgr.el.dom,
+ {tag: 'div', id: this.el.id + '-split', cls: 'ylayout-split ylayout-split-'+this.position, html: ' '});
+ /** The SplitBar for this region @type YAHOO.ext.SplitBar */
+ this.split = new YAHOO.ext.SplitBar(splitEl, this.el);
+ this.split.onMoved.subscribe(this.onSplitMove, this, true);
+ this.split.useShim = config.useShim === true;
+ YAHOO.util.Dom.setStyle([this.split.el.dom, this.split.proxy], 'cursor', this.cursor);
+ this.split.getMaximumSize = this.getMaxSize.createDelegate(this);
+ }
+ if(typeof config.minSize != 'undefined'){
+ this.split.minSize = config.minSize;
+ }
+ if(typeof config.maxSize != 'undefined'){
+ this.split.maxSize = config.maxSize;
+ }
+ }
+ },
+
+ getMaxSize : function(){
+ var cmax = this.config.maxSize || 10000;
+ var center = this.mgr.getRegion('center');
+ return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+ },
+
+ onSplitMove : function(split, newSize){
+ this.fireEvent('resized', this, newSize);
+ },
+
+ /**
+ * Returns the SplitBar for this region.
+ * @return {YAHOO.ext.SplitBar}
+ */
+ getSplitBar : function(){
+ return this.split;
+ },
+
+ hide : function(){
+ if(this.split){
+ this.split.el.setLocation(-2000,-2000);
+ this.split.el.hide();
+ }
+ YAHOO.ext.SplitLayoutRegion.superclass.hide.call(this);
+ },
+
+ show : function(){
+ if(this.split){
+ this.split.el.show();
+ }
+ YAHOO.ext.SplitLayoutRegion.superclass.show.call(this);
+ },
+
+ beforeSlide: function(){
+ if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.clip();
+ if(this.tabs) this.tabs.bodyEl.clip();
+ if(this.activePanel){
+ this.activePanel.getEl().clip();
+
+ if(this.activePanel.beforeSlide){
+ this.activePanel.beforeSlide();
+ }
+ }
+ }
+ },
+
+ afterSlide : function(){
+ if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
+ this.bodyEl.unclip();
+ if(this.tabs) this.tabs.bodyEl.unclip();
+ if(this.activePanel){
+ this.activePanel.getEl().unclip();
+ if(this.activePanel.afterSlide){
+ this.activePanel.afterSlide();
+ }
+ }
+ }
+ },
+
+ slideOut : function(){
+ if(!this.slideEl){
+ this.slideEl = new YAHOO.ext.Actor(
+ YAHOO.ext.DomHelper.append(this.mgr.el.dom, {tag: 'div', cls:'ylayout-slider'}));
+ if(this.config.autoHide !== false){
+ var slideInTask = new YAHOO.ext.util.DelayedTask(this.slideIn, this);
+ this.slideEl.mon('mouseout', function(e){
+ var to = e.getRelatedTarget();
+ if(to && to != this.slideEl.dom && !YAHOO.util.Dom.isAncestor(this.slideEl.dom, to)){
+ slideInTask.delay(500);
+ }
+ }, this, true);
+ this.slideEl.mon('mouseover', function(e){
+ slideInTask.cancel();
+ }, this, true);
+ }
+ }
+ var sl = this.slideEl, c = this.collapsedEl, cm = this.cmargins;
+ this.isSlid = true;
+ this.snapshot = {
+ 'left': this.el.getLeft(true),
+ 'top': this.el.getTop(true),
+ 'colbtn': this.collapseBtn.isVisible(),
+ 'closebtn': this.closeBtn.isVisible()
+ };
+ this.collapseBtn.hide();
+ this.closeBtn.hide();
+ this.el.show();
+ this.el.setLeftTop(0,0);
+ sl.startCapture(true);
+ var size;
+ switch(this.position){
+ case 'west':
+ sl.setLeft(c.getRight(true));
+ sl.setTop(c.getTop(true));
+ size = this.el.getWidth();
+ break;
+ case 'east':
+ sl.setRight(this.mgr.getViewSize().width-c.getLeft(true));
+ sl.setTop(c.getTop(true));
+ size = this.el.getWidth();
+ break;
+ case 'north':
+ sl.setLeft(c.getLeft(true));
+ sl.setTop(c.getBottom(true));
+ size = this.el.getHeight();
+ break;
+ case 'south':
+ sl.setLeft(c.getLeft(true));
+ sl.setBottom(this.mgr.getViewSize().height-c.getTop(true));
+ size = this.el.getHeight();
+ break;
+ }
+ sl.dom.appendChild(this.el.dom);
+ YAHOO.util.Event.on(document.body, 'click', this.slideInIf, this, true);
+ sl.setSize(this.el.getWidth(), this.el.getHeight());
+ this.beforeSlide();
+ if(this.activePanel){
+ this.activePanel.setSize(this.bodyEl.getWidth(), this.bodyEl.getHeight());
+ }
+ sl.slideShow(this.getAnchor(), size, this.slideDuration, null, false);
+ sl.play(function(){
+ this.afterSlide();
+ }.createDelegate(this));
+ },
+
+ slideInIf : function(e){
+ var t = YAHOO.util.Event.getTarget(e);
+ if(!YAHOO.util.Dom.isAncestor(this.el.dom, t)){
+ this.slideIn();
+ }
+ },
+
+ slideIn : function(callback){
+ if(this.isSlid && !this.slideEl.playlist.isPlaying()){
+ YAHOO.util.Event.removeListener(document.body, 'click', this.slideInIf, this, true);
+ this.slideEl.startCapture(true);
+ this.slideEl.slideHide(this.getAnchor(), this.slideDuration, null);
+ this.beforeSlide();
+ this.slideEl.play(function(){
+ this.isSlid = false;
+ this.el.setPositioning(this.snapshot);
+ this.collapseBtn.setVisible(this.snapshot.colbtn);
+ this.closeBtn.setVisible(this.snapshot.closebtn);
+ this.afterSlide();
+ this.mgr.el.dom.appendChild(this.el.dom);
+ if(typeof callback == 'function'){
+ callback();
+ }
+ }.createDelegate(this));
+ }
+ },
+
+ animateExpand : function(){
+ var em = this.margins, cm = this.cmargins;
+ var c = this.collapsedEl, el = this.el;
+ var direction, distance;
+ switch(this.position){
+ case 'west':
+ direction = 'right';
+ el.setLeft(-(el.getWidth() + (em.right+em.left)));
+ el.setTop(c.getTop(true)-cm.top+em.top);
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'east':
+ direction = 'left';
+ el.setLeft(this.mgr.getViewSize().width + em.left);
+ el.setTop(c.getTop(true)-cm.top+em.top);
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'north':
+ direction = 'down';
+ el.setLeft(em.left);
+ el.setTop(-(el.getHeight() + (em.top+em.bottom)));
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ case 'south':
+ direction = 'up';
+ el.setLeft(em.left);
+ el.setTop(this.mgr.getViewSize().height + em.top);
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ }
+ this.beforeSlide();
+ el.setStyle('z-index', '100');
+ el.show();
+ c.setLocation(-2000,-2000);
+ c.hide();
+ el.move(direction, distance, true, this.duration, function(){
+ this.afterSlide();
+ el.setStyle('z-index', '');
+ if(this.split){
+ this.split.el.show();
+ }
+ this.fireEvent('invalidated', this);
+ this.fireEvent('expanded', this);
+ }.createDelegate(this), this.config.easing || YAHOO.util.Easing.easeOut);
+ },
+
+ animateCollapse : function(){
+ var em = this.margins, cm = this.cmargins;
+ var c = this.collapsedEl, el = this.el;
+ var direction, distance;
+ switch(this.position){
+ case 'west':
+ direction = 'left';
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'east':
+ direction = 'right';
+ distance = el.getWidth() + (em.right+em.left);
+ break;
+ case 'north':
+ direction = 'up';
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ case 'south':
+ direction = 'down';
+ distance = el.getHeight() + (em.top+em.bottom);
+ break;
+ }
+ this.el.setStyle('z-index', '100');
+ this.beforeSlide();
+ this.el.move(direction, distance, true, this.duration, function(){
+ this.afterSlide();
+ this.el.setStyle('z-index', '');
+ this.el.setLocation(-20000,-20000);
+ this.el.hide();
+ this.collapsedEl.show();
+ this.fireEvent('collapsed', this);
+ }.createDelegate(this), YAHOO.util.Easing.easeIn);
+ },
+
+ getAnchor : function(){
+ switch(this.position){
+ case 'west':
+ return 'left';
+ case 'east':
+ return 'right';
+ case 'north':
+ return 'top';
+ case 'south':
+ return 'bottom';
+ }
+ }
+}); |