opendaylight/web/root/src/main/resources/js/fuelux/search.js

   1 /*
   2  * Fuel UX Search
   3  * https://github.com/ExactTarget/fuelux
   4  *
   5  * Copyright (c) 2012 ExactTarget
   6  * Licensed under the MIT license.
   7  */
   8
   9 define(['require','jquery'],function(require) {
  10
  11         var $ = require('jquery');
  12
  13
  14         // SEARCH CONSTRUCTOR AND PROTOTYPE
  15
  16         var Search = function (element, options) {
  17                 this.$element = $(element);
  18                 this.options = $.extend({}, $.fn.search.defaults, options);
  19
  20                 this.$button = this.$element.find('button')
  21                         .on('click', $.proxy(this.buttonclicked, this));
  22
  23                 this.$input = this.$element.find('input')
  24                         .on('keydown', $.proxy(this.keypress, this))
  25                         .on('keyup', $.proxy(this.keypressed, this));
  26
  27                 this.$icon = this.$element.find('i');
  28                 this.activeSearch = '';
  29         };
  30
  31         Search.prototype = {
  32
  33                 constructor: Search,
  34
  35                 search: function (searchText) {
  36                         this.$icon.attr('class', 'icon-remove');
  37                         this.activeSearch = searchText;
  38                         this.$element.trigger('searched', searchText);
  39                 },
  40
  41                 clear: function () {
  42                         this.$icon.attr('class', 'icon-search');
  43                         this.activeSearch = '';
  44                         this.$input.val('');
  45                         this.$element.trigger('cleared');
  46                 },
  47
  48                 action: function () {
  49                         var val = this.$input.val();
  50                         var inputEmptyOrUnchanged = val === '' || val === this.activeSearch;
  51
  52                         if (this.activeSearch && inputEmptyOrUnchanged) {
  53                                 this.clear();
  54                         } else if (val) {
  55                                 this.search(val);
  56                         }
  57                 },
  58
  59                 buttonclicked: function (e) {
  60                         e.preventDefault();
  61                         if ($(e.currentTarget).is('.disabled, :disabled')) return;
  62                         this.action();
  63                 },
  64
  65                 keypress: function (e) {
  66                         if (e.which === 13) {
  67                                 e.preventDefault();
  68                         }
  69                 },
  70
  71                 keypressed: function (e) {
  72                         var val, inputPresentAndUnchanged;
  73
  74                         if (e.which === 13) {
  75                                 e.preventDefault();
  76                                 this.action();
  77                         } else {
  78                                 val = this.$input.val();
  79                                 inputPresentAndUnchanged = val && (val === this.activeSearch);
  80                                 this.$icon.attr('class', inputPresentAndUnchanged ? 'icon-remove' : 'icon-search');
  81                         }
  82                 },
  83
  84                 disable: function () {
  85                         this.$input.attr('disabled', 'disabled');
  86                         this.$button.addClass('disabled');
  87                 },
  88
  89                 enable: function () {
  90                         this.$input.removeAttr('disabled');
  91                         this.$button.removeClass('disabled');
  92                 }
  93
  94         };
  95
  96
  97         // SEARCH PLUGIN DEFINITION
  98
  99         $.fn.search = function (option) {
 100                 return this.each(function () {
 101                         var $this = $(this);
 102                         var data = $this.data('search');
 103                         var options = typeof option === 'object' && option;
 104
 105                         if (!data) $this.data('search', (data = new Search(this, options)));
 106                         if (typeof option === 'string') data[option]();
 107                 });
 108         };
 109
 110         $.fn.search.defaults = {};
 111
 112         $.fn.search.Constructor = Search;
 113
 114
 115         // SEARCH DATA-API
 116
 117         $(function () {
 118                 $('body').on('mousedown.search.data-api', '.search', function () {
 119                         var $this = $(this);
 120                         if ($this.data('search')) return;
 121                         $this.search($this.data());
 122                 });
 123         });
 124
 125 });