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