File: app/widgets/charm-search.js
'use strict';
/**
* The widget used across Browser view to manage the search box and the
* controls for selecting which view you're in.
*
* @module widgets
* @submodule browser
*
*/
YUI.add('browser-search-widget', function(Y) {
var ns = Y.namespace('juju.widgets.browser'),
templates = Y.namespace('juju.views').Templates;
/**
* Search widget present in the Charm browser across both fullscreen and
* sidebar views.
*
* @class Search
* @extends {Y.Widget}
*
*/
ns.Search = Y.Base.create('search-widget', Y.Widget, [
Y.Event.EventTracker
], {
EVT_CLEAR_SEARCH: 'clear_search',
EVT_TOGGLE_VIEWABLE: 'toggle_viewable',
EVT_TOGGLE_FULLSCREEN: 'toggle_fullscreen',
EVT_UPDATE_SEARCH: 'update_search',
EVT_SEARCH_CHANGED: 'search_changed',
TEMPLATE: templates['browser-search'],
/**
* Expose to the outside world that we've got a request to go fullscreen.
*
* @method _toggleFullScreen
* @param {Event} ev the click event from the control.
* @private
*
*/
_toggleFullScreen: function(ev) {
this.fire(this.EVT_TOGGLE_FULLSCREEN);
},
/**
* Expose to the outside world that we've got a request to hide from
* sight.
*
* @method _toggleViewable
* @param {Event} ev the click event from the control.
* @private
*
*/
_toggleViewable: function(ev) {
ev.halt();
this.fire(this.EVT_TOGGLE_VIEWABLE);
},
/**
* bind the UI events to the DOM making up the widget control.
*
* @method bindUI
*
*/
bindUI: function() {
var container = this.get('boundingBox');
this.addEvent(
container.one('.bws-icon').on(
'click', this._toggleViewable, this)
);
this.addEvent(
container.one('.toggle-fullscreen').on(
'click', this._toggleFullScreen, this)
);
// Note that the search could be updated either from our internal input
// control, or it could come from someone outside of the widget asking
// it to update to a specific value. This is how things like clicking
// categories can work.
var input = container.one('input');
this.addEvent(
input.on('valueChange', function(ev) {
this.fire(this.EVT_SEARCH_CHANGED);
}, this)
);
},
/**
* Clear the search input control in order to reset it.
*
* @method clearSearch
*
*/
clearSearch: function() {
var input = this.get('contentBox').one('input');
input.focus();
input.set('value', '');
},
/**
* Generic initializer for the widget. Publish events we expose for
* outside use.
*
* @method initializer
* @param {Object} cfg configuration override object.
*
*/
initializer: function(cfg) {
/**
* Fires when the "Charm Browser" link is checked. Needs to communicate
* with the parent view so that it can handle filters and the like. This
* widget only needs to clear the search input box.
*
*/
this.publish(this.EVT_TOGGLE_VIEWABLE);
this.publish(this.EVT_TOGGLE_FULLSCREEN);
this.publish(this.EVT_SEARCH_CHANGED);
},
/**
* Render all the things!
*
* @method renderUI
*
*/
renderUI: function() {
this.get('contentBox').setHTML(
this.TEMPLATE(this.getAttrs())
);
},
/**
* Update the search input to contain the string passed. This is meant to
* be used by outside links that want to perform a pre-canned search and
* display results.
*
* @method update_search
* @param {String} newval the sting to update the input to.
*
*/
updateSearch: function(newval) {
var input = this.get('contentBox').one('input');
input.focus();
input.set('value', newval);
}
}, {
ATTRS: {
fullscreenTarget: {
required: true
},
/**
* @attribute term
* @default undefined
* @type {String}
*
*/
term: {}
}
});
}, '0.1.0', {
requires: [
'base',
'event',
'event-tracker',
'event-valuechange',
'juju-templates',
'juju-views',
'widget'
]
});