      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:      26.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  * M.SearchBarView defines a prototype of a search bar that can be used inside of a list
     15  * view or independently as a plain input field with a search styling.
     16  *
     17  * @extends M.View
     18  */
     19 M.SearchBarView = M.View.extend(
     20 /** @scope M.SearchBarView.prototype */ {
     21
     22     /**
     23      * The type of this object.
     24      *
     25      * @type String
     26      */
     27     type: 'M.SearchBarView',
     28
     29     /**
     30      * Determines whether the search bar is part of a list view.
     31      *
     32      * @type Boolean
     33      */
     34     isListViewSearchBar: NO,
     35
     36     /**
     37      * If the search bar belongs to a list view, this property contains this
     38      * list view.
     39      *
     40      * @type M.ListView
     41      */
     42     listView: null,
     43
     44     /**
     45      * Renders a search bar.
     46      *
     47      * @private
     48      * @returns {String} The search bar view's html representation.
     49      */
     50     render: function() {
     51         this.html += '<form role="search"' + this.style() + '>';
     52
     53         this.html += '<input id="' + this.id + '" data-type="search" />';
     54
     55         this.html += '</form>';
     56
     57         return this.html;
     58     },
     59
     60     /**
     61      * This method sets its value to the value it has in its DOM representation
     62      * and then delegates these changes to a controller property if the
     63      * contentBindingReverse property is set.
     64      *
     65      * Additionally call target / action if set.
     66      *
     67      * @param {Object} evt The event triggered this method.
     68      */
     69     setValueFromDOM: function(evt) {
     70         this.value = this.secure($('#' + this.id).val());
     71         this.delegateValueUpdate();
     72
     73         if((evt === 'change' && this.triggerActionOnChange || evt === 'keyup' && this.triggerActionOnKeyUp) && this.target && this.action) {
     74             this.target[this.action](this.value);
     75         }
     76     },
     77
     78     /**
     79      * Applies some style-attributes to the button.
     80      *
     81      * @private
     82      * @returns {String} The search bar's styling as html representation.
     83      */
     84     style: function() {
     85         var html = '';
     86         if(this.isListViewSearchBar) {
     87             html += ' class="ui-listview-filter"';
     88         }
     89         return html;
     90     }
     91
     92 });