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 });