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:      02.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  * This defines the prototype for any button view. A button is a view element that is
 15  * typically used for triggering an action, e.g. switching to another page, firing a
 16  * request or opening a dialog.
 17  *
 18  * @extends M.View
 19  */
 20 M.ButtonView = M.View.extend(
 21 /** @scope M.ButtonView.prototype */ {
 22 
 23     /**
 24      * The type of this object.
 25      *
 26      * @type String
 27      */
 28     type: 'M.ButtonView',
 29 
 30     /**
 31      * Determines whether this button is active or not.
 32      *
 33      * Note: This property is only used if the button is part of a button group (M.ButtonGroupView).
 34      *
 35      * @type Boolean
 36      */
 37     isActive: NO,
 38 
 39     /**
 40      * Renders a button as an input tag. Input is automatically converted by jQuery mobile.
 41      *
 42      * @private
 43      * @returns {String} The button view's html representation.
 44      */
 45     render: function() {
 46         this.html += '<a data-role="button" href="#" id="' + this.id + '"' + this.style() + '>' + this.value + '</a>';
 47         
 48         return this.html;
 49     },
 50 
 51     /**
 52      * Updates the value of the button with DOM access by jQuery.
 53      *
 54      * @private
 55      */
 56     renderUpdate: function() {
 57         $('#' + this.id).parent().find('.ui-btn-text').text(this.value);
 58         this.theme();
 59     },
 60 
 61     /**
 62      * Sets the button's value and calls renderUpdate() to make the value update visible.
 63      *
 64      * @param {String} value The button's new value.
 65      */
 66     setValue: function(value) {
 67         this.value = value;
 68         this.renderUpdate();
 69     },
 70 
 71     /**
 72      * Triggers the rendering engine, jQuery mobile, to style the button.
 73      *
 74      * @private
 75      */
 76     theme: function() {
 77         $('#' + this.id).button();
 78     },
 79 
 80     /**
 81      * Applies some style-attributes to the button.
 82      *
 83      * @private
 84      * @returns {String} The button's styling as html representation.
 85      */
 86     style: function() {
 87         var html = '';
 88         if(this.isInline) {
 89             html += ' data-inline="true"';
 90         }
 91         if(this.icon) {
 92             html += ' data-icon="' + this.icon + '"';
 93         }
 94         if(this.cssClass) {
 95             html += ' data-theme="' + this.cssClass + '"';
 96         }
 97         if(this.cssStyle) {
 98             html += 'style="' + this.cssStyle + '"';
 99         }
100         return html;
101     }
102 
103 });