1 /**
  2  * @author Gillis Haasnoot <gillis.haasnoot@gmail.com>
  3  * @package Banana.Controls
  4  * @summary Loader control
  5  */
  6 
  7 goog.provide('Banana.Controls.Loader');
  8 
  9 /** @namespace Banana.Loader */
 10 namespace('Banana.Controls').Loader = Banana.Control.extend(
 11 /** @lends Banana.Loader.prototype */
 12 {
 13 	/**
 14 	 * Creates a loader. It displays itself on top of all other visible components with
 15 	 * a dark shade underneath it.
 16 	 * To use it. Add it to your control and call show(text);
 17 	 * @constructs
 18 	 * @extends Banana.Control
 19 	 */
 20 	init : function()
 21 	{
 22 		this._super();
 23 		
 24 		this.text = new Banana.Controls.Label()
 25 		.addCssClass('BLoaderTextLabel');
 26 		
 27 		this.loader = new Banana.Controls.Panel()
 28 		.addCssClass('BLoader')
 29 		.addCssClass('BLoaderContainer')
 30 		.setVisible(false);
 31 		
 32 		this.loaderTrans = new Banana.Controls.Panel()
 33 		.addCssClass('BLoader')
 34 		.addCssClass('BLoaderTransparantContainer')
 35 		.setVisible(false);
 36 		
 37 		this.cover = new Banana.Controls.Panel()
 38 		.addCssClass('BLoaderCover')
 39 		.setVisible(false);
 40 	},
 41 
 42 	/**
 43 	 * @override
 44 	 */
 45 	createComponents : function()
 46 	{	
 47 		var iconLoader = new Banana.Controls.Panel()
 48 		.addCssClass("BLoaderImage");
 49 
 50 		this.addControl(this.loaderTrans);
 51 		this.addControl(this.loader);
 52 		this.loader.addControl(iconLoader);
 53 		this.loader.addControl(this.text);
 54 		this.addControl(this.cover);
 55 	},
 56 
 57 	/**
 58 	 * @override
 59 	 */
 60 	updateDisplay : function()
 61 	{
 62 		//vertical center align in css sucks bigg ass. we do it in javascript
 63 		
 64 		var dem = this.getFirstUiControl().getDimensions();
 65 		
 66 		var docHeight = jQuery(document).height();
 67 		
 68 		var loaderHeight = this.loader.getDimensions().height;
 69 		
 70 		var offset = docHeight/3 - loaderHeight;
 71 		
 72 		this.loaderTrans.setCss({'margin-top':offset});
 73 		this.loader.setCss({'margin-top':offset});
 74 
 75 		if (this.setVisibleLater)
 76 		{
 77 			this.setVisibleControls();		
 78 		}
 79 	},
 80 	
 81 	/**
 82 	 * Makes loader visible
 83 	 * @ignore
 84 	 */
 85 	setVisibleControls : function()
 86 	{
 87 		//hack our loader is often used during page transitions
 88 		//sometimes situation occurs when loader is removed from dom 
 89 		if (!this.cover) return;
 90 		
 91 		this.cover.setVisible(true);
 92 		
 93 		this.loaderTrans.setVisible(true);
 94 		
 95 		this.loader.setVisible(true);			
 96 	},
 97 	
 98 	/**
 99 	 * Makes the loader visible with given text.
100 	 * if we call this method before rendered we only set the data.
101 	 * We want to align the loader exactly in the center of the screen. For this we need
102 	 * to know dimensions. Thats why we set data first and later on apply correct positions.
103 	 * 
104 	 * @param {String} text
105 	 * @param {int} px of horizontal offset
106 	 * @return {this}
107 	 */
108 	show : function(text,hoffset)
109 	{
110 		this.text.setData(text);
111 		
112 		if (this.isRendered)
113 		{
114 			this.setVisibleControls();	
115 	
116 		}
117 		else
118 		{
119 			this.setVisibleLater = true;
120 		}
121 		
122 		return this;
123 	},
124 	
125 	/**
126 	 * hides loader
127 	 */
128 	hide : function()
129 	{
130 		//hack our loader is often used during page transitions
131 		//sometimes situation occurs when loader is removed from dom 
132 		if (!this.cover) return;
133 		
134 		this.setVisibleLater = false;
135 		this.cover.setVisible(false);
136 		this.loaderTrans.setVisible(false);
137 		this.loader.setVisible(false);
138 		
139 		return this;
140 	}
141 	
142 });
143