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