      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:      04.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  * A constant value for a two column layout of a grid view.
     13  *
     14  * @type String
     15  */
     16 M.TWO_COLUMNS = {
     17     cssClass: 'ui-grid-a',
     18     columns: {
     19         0: 'ui-block-a',
     20         1: 'ui-block-b'
     21     }
     22 };
     23
     24 /**
     25  * A constant value for a three column layout of a grid view.
     26  *
     27  * @type String
     28  */
     29 M.THREE_COLUMNS = {
     30     cssClass: 'ui-grid-b',
     31     columns: {
     32         0: 'ui-block-a',
     33         1: 'ui-block-b',
     34         2: 'ui-block-c'
     35     }
     36 };
     37
     38 /**
     39  * @class
     40  *
     41  * M.GridView defines a prototype of a grid view, that allows you to display several
     42  * views horizontally aligned. Therefore you can either use a predefined layout or you
     43  * can provide a custom layout.
     44  *
     45  * @extends M.View
     46  */
     47 M.GridView = M.View.extend(
     48 /** @scope M.GridView.prototype */ {
     49
     50     /**
     51      * The type of this object.
     52      *
     53      * @type String
     54      */
     55     type: 'M.GridView',
     56
     57     /**
     58      * The layout for the grid view. There are two predefined layouts available:
     59      *
     60      * - M.TWO_COLUMNS: a two column layout, width: 50% / 50%
     61      * - M.THREE_COLUMNS: a three column layout, width: 33% / 33% / 33%
     62      *
     63      * To specify your own layout, you will have to implement some css classes and
     64      * then define your layout like:
     65      *
     66      *     cssClass: 'cssClassForWholeGrid',
     67      *     columns: {
     68      *         0: 'cssClassForColumn1',
     69      *         1: 'cssClassForColumn2',
     70      *         2: 'cssClassForColumn3',
     71      *         3: 'cssClassForColumn4',
     72      *         //........
     73      *     }
     74      *
     75      * @type Object
     76      */
     77     layout: null,
     78
     79     /**
     80      * Renders a grid view based on the specified layout.
     81      *
     82      * @private
     83      * @returns {String} The grid view's html representation.
     84      */
     85     render: function() {
     86         this.html += '<div id="' + this.id + '" ' + this.style() + '>';
     87
     88         this.renderChildViews();
     89
     90         this.html += '</div>';
     91
     92         return this.html;
     93     },
     94
     95     /**
     96      * Triggers render() on all children and includes some special grid view logic
     97      * concerning the rendering of these child views.
     98      *
     99      * @private
    100      */
    101     renderChildViews: function() {
    102         if(this.childViews) {
    103             if(this.layout) {
    104                 var arr = this.childViews.split(' ');
    105                 for(var i in this.layout.columns) {
    106                     if(this[arr[i]]) {
    107                         this.html += '<div class="' + this.layout.columns[i] + '">';
    108
    109                         this.html += this[arr[i]].render();
    110
    111                         this.html += '</div>';
    112                     }
    113                 }
    114             } else {
    115                 M.Logger.log('No layout specified for GridView', M.ERROR);
    116             }
    117         }
    118     },
    119
    120     /**
    121      * This method themes the grid view, respectively its child views.
    122      *
    123      * @private
    124      */
    125     theme: function() {
    126         this.themeChildViews();
    127     },
    128
    129     /**
    130      * Applies some style-attributes to the grid view.
    131      *
    132      * @private
    133      * @returns {String} The grid view's styling as html representation.
    134      */
    135     style: function() {
    136         if(this.layout) {
    137             var html = 'class="' + this.layout.cssClass + '"';
    138             return html;
    139         }
    140     }
    141
    142 });