1 // ========================================================================== 2 // Project: The M-Project - Mobile HTML5 Application Framework 3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved. 4 // Creator: Dominik 5 // Date: 09.11.2010 6 // License: Dual licensed under the MIT or GPL Version 2 licenses. 7 // http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE 8 // http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE 9 // ========================================================================== 10 11 /** 12 * @class 13 * 14 * M.ToggleView defines the prototype of any toggle view. A toggle view accepts exactly 15 * two child views and provides an easy mechanism to toggle between these two views. An 16 * easy example would be to define two different button views that can be toggled, a more 17 * complex scenario would be to define two content views (M.ScrollView) with own child views 18 * and toggle between them. 19 * 20 * @extends M.View 21 */ 22 M.ToggleView = M.View.extend( 23 /** @scope M.ToggleView.prototype */ { 24 25 /** 26 * The type of this object. 27 * 28 * @type String 29 */ 30 type: 'M.ToggleView', 31 32 /** 33 * States whether the toggle view currently displays its first child view or its second 34 * child view. 35 * 36 * @type Boolean 37 */ 38 isInFirstState: YES, 39 40 /** 41 * Determines whether to toggle the view on click. This might be useful if the child views 42 * are e.g. buttons. 43 * 44 * @type Boolean 45 */ 46 toggleOnClick: NO, 47 48 /** 49 * Renders a ToggleView and its child views. 50 * 51 * @private 52 * @returns {String} The toggle view's html representation. 53 */ 54 render: function() { 55 this.html += '<div id="' + this.id + '">'; 56 57 this.renderChildViews(); 58 59 this.html += '</div>'; 60 61 return this.html; 62 }, 63 64 /** 65 * This method renders one child view of the toggle view, based on the isInFirstState 66 * property: YES = first child view, NO = second child view. 67 */ 68 renderChildViews: function() { 69 if(this.childViews) { 70 var childViews = $.trim(this.childViews).split(' '); 71 var childViewIndex = this.isInFirstState ? 0 : 1; 72 73 if(this[childViews[childViewIndex]]) { 74 if(this.toggleOnClick) { 75 this[childViews[childViewIndex]].internalTarget = this; 76 this[childViews[childViewIndex]].internalAction = 'toggleView'; 77 } 78 this.html += this[childViews[childViewIndex]].render(); 79 } else { 80 M.Logger.log('Please make sure that there are two child views defined for the toggle view!', M.WARN); 81 } 82 } 83 }, 84 85 /** 86 * This method is called out of the toggleView method. It basically empties the html 87 * representation of the toggle view and then renders the proper child view based on 88 * the isInFirstState property: YES = first child view, NO = second child view. 89 */ 90 renderUpdateChildViews: function() { 91 if(this.childViews) { 92 var childViews = $.trim(this.childViews).split(' '); 93 var childViewIndex = this.isInFirstState ? 0 : 1; 94 95 if(this[childViews[childViewIndex]]) { 96 if(this.toggleOnClick) { 97 this[childViews[childViewIndex]].internalTarget = this; 98 this[childViews[childViewIndex]].internalAction = 'toggleView'; 99 } 100 this[childViews[childViewIndex]].clearHtml(); 101 return this[childViews[childViewIndex]].render(); 102 } else { 103 M.Logger.log('Please make sure that there are two child views defined for the toggle view!', M.WARN); 104 } 105 } 106 }, 107 108 /** 109 * This method toggles the child views by first emptying the toggle view's content 110 * and then rendering the next child view by calling renderUpdateChildViews(). 111 */ 112 toggleView: function() { 113 this.isInFirstState = !this.isInFirstState; 114 $('#' + this.id).empty(); 115 $('#' + this.id).html(this.renderUpdateChildViews()); 116 this.theme(); 117 }, 118 119 /** 120 * Triggers the rendering engine, jQuery mobile, to style the toggle view respectively 121 * its child views. 122 * 123 * @private 124 */ 125 theme: function() { 126 this.themeChildViews(); 127 } 128 129 });