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