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