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