1 // ==========================================================================
  2 // Project:   The M-Project - Mobile HTML5 Application Framework
  3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved.
  4 //            (c) 2011 panacoda GmbH. All rights reserved.
  5 // Creator:   Dominik
  6 // Date:      04.11.2010
  7 // License:   Dual licensed under the MIT or GPL Version 2 licenses.
  8 //            http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE
  9 //            http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE
 10 // ==========================================================================
 11 
 12 /**
 13  * A constant value for a two column layout of a grid view.
 14  *
 15  * @type String
 16  */
 17 M.TWO_COLUMNS = {
 18     cssClass: 'ui-grid-a',
 19     columns: {
 20         0: 'ui-block-a',
 21         1: 'ui-block-b'
 22     }
 23 };
 24 
 25 /**
 26  * A constant value for a three column layout of a grid view.
 27  *
 28  * @type String
 29  */
 30 M.THREE_COLUMNS = {
 31     cssClass: 'ui-grid-b',
 32     columns: {
 33         0: 'ui-block-a',
 34         1: 'ui-block-b',
 35         2: 'ui-block-c'
 36     }
 37 };
 38 
 39 /**
 40  * A constant value for a four column layout of a grid view.
 41  *
 42  * @type String
 43  */
 44 M.FOUR_COLUMNS = {
 45     cssClass: 'ui-grid-c',
 46     columns: {
 47         0: 'ui-block-a',
 48         1: 'ui-block-b',
 49         2: 'ui-block-c',
 50         3: 'ui-block-d'
 51     }
 52 };
 53 
 54 /**
 55  * @class
 56  *
 57  * M.GridView defines a prototype of a grid view, that allows you to display several
 58  * views horizontally aligned. Therefore you can either use a predefined layout or you
 59  * can provide a custom layout.
 60  * 
 61  * @extends M.View
 62  */
 63 M.GridView = M.View.extend(
 64 /** @scope M.GridView.prototype */ {
 65 
 66     /**
 67      * The type of this object.
 68      *
 69      * @type String
 70      */
 71     type: 'M.GridView',
 72 
 73     /**
 74      * The layout for the grid view. There are two predefined layouts available:
 75      * 
 76      * - M.TWO_COLUMNS: a two column layout, width: 50% / 50%
 77      * - M.THREE_COLUMNS: a three column layout, width: 33% / 33% / 33%
 78      * - M.FOUR_COLUMNS: a four column layout, width: 25% / 25% / 25%
 79      *
 80      * To specify your own layout, you will have to implement some css classes and
 81      * then define your layout like:
 82      *
 83      *     cssClass: 'cssClassForWholeGrid',
 84      *     columns: {
 85      *         0: 'cssClassForColumn1',
 86      *         1: 'cssClassForColumn2',
 87      *         2: 'cssClassForColumn3',
 88      *         3: 'cssClassForColumn4',
 89      *         //........
 90      *     }
 91      *
 92      * @type Object
 93      */
 94     layout: null,
 95 
 96     /**
 97      * Renders a grid view based on the specified layout.
 98      *
 99      * @private
100      * @returns {String} The grid view's html representation.
101      */
102     render: function() {
103         this.html += '<div id="' + this.id + '" ' + this.style() + '>';
104 
105         this.renderChildViews();
106 
107         this.html += '</div>';
108 
109         return this.html;
110     },
111 
112     /**
113      * Triggers render() on all children and includes some special grid view logic
114      * concerning the rendering of these child views.
115      *
116      * @private
117      */
118     renderChildViews: function() {
119         if(this.childViews) {
120             if(this.layout) {
121                 var arr = this.childViews.split(' ');
122                 for(var i in this.layout.columns) {
123                     if(this[arr[i]]) {
124                         this.html += '<div class="' + this.layout.columns[i] + '">';
125 
126                         this[arr[i]]._name = arr[i];
127                         this.html += this[arr[i]].render();
128 
129                         this.html += '</div>';
130                     }
131                 }
132             } else {
133                 M.Logger.log('No layout specified for GridView (' + this.id + ')!', M.WARN);
134             }
135         }
136     },
137 
138     /**
139      * This method themes the grid view, respectively its child views.
140      *
141      * @private
142      */
143     theme: function() {
144         this.themeChildViews();
145     },
146 
147     /**
148      * Applies some style-attributes to the grid view.
149      *
150      * @private
151      * @returns {String} The grid view's styling as html representation.
152      */
153     style: function() {
154         if(this.layout) {
155             var html = 'class="' + this.layout.cssClass + '"';
156             return html;
157         }
158     }
159 
160 });