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