analytics/webcontent/bi/js/admin/common/ui/input/SearchInput.js

"use strict";

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Cognos Analytics
 * Copyright IBM Corp. 2015, 2016
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['jquery', 'bi/admin/common/ui/WidgetView', 'bi/commons/utils/BidiUtil', 'bi/admin/nls/StringResource'], function ($, WidgetView, BidiUtil, StringResource) {
  'use strict'; //NOSONAR: meant to be strict

  var SearchInput = WidgetView.extend({
    widgetName: 'searchinput',
    options: {
      value: '',
      hint: 'Search'
    },
    init: function init(options) {
      SearchInput.inherited('init', this, arguments);

      if (this.element.is("input[type='search']")) {
        this._create();

        this.options.value = this.element.val() || "";
        this.options.hint = this.element.attr('placeholder') || "";
      }
    },
    clear: function clear() {
      this.element.val("");
      var clearButton = this.element.parent().find(".bi-admin-search-cancel");
      clearButton.css("display", "none");
    },
    _create: function _create() {
      this.element.wrap('<div class="bi-admin-input-wrapper search-security"></div>');
      this.element.addClass('bi-admin-input bi-admin-input-search');
      var htmlIcon = '<button tabindex="-1" disable class="bi-admin-search-button"><svg class="svgIcon bi-admin-searchClear"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#common-search"></use></svg></button><button style="display: none" class="bi-admin-search-cancel"><svg class="svgIcon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#common-close-cancel-error"></use></svg></button>';
      this.element.after(htmlIcon);
      var clearButton = this.element.parent().find(".bi-admin-search-cancel");
      var searchButton = this.element.parent().find(".bi-admin-search-button");
      searchButton.attr("title", StringResource.get('search'));
      clearButton.attr("title", StringResource.get('clear'));
      clearButton.attr("aria-label", StringResource.get('clear'));
      clearButton.on('click', function () {
        this.clear();
        this.trigger('changed', {
          text: ""
        });
        searchButton.css("display", "inline-flex");
      }.bind(this));

      var searchHandler = function searchHandler() {
        searchButton.css("display", "inline-flex");

        if (this.element.val() !== "") {
          clearButton.css("display", "inline-flex");
          searchButton.css("display", "none");
        } else {
          searchButton.css("display", "inline-flex");
          clearButton.css("display", "none");
        }

        this.trigger('changed', {
          text: this.element.val()
        });
      };

      searchButton.on('click', searchHandler.bind(this));
      this.element.on("keydown", function (event) {
        if (event.which === 13) {
          searchHandler.apply(this);
        }
      }.bind(this));
      BidiUtil.initElementForBidi(this.element[0]);
    },
    _setOption: function _setOption(key, value) {
      var self = this;

      switch (key) {
        case "value":
          this.element.val(value);
          break;

        case "hint":
          this.element.attr('placeholder', value);
          this.element.attr('aria-label', value);
          break;

        default:
          break;
      }

      WidgetView.prototype._setOption.apply(self, arguments);
    }
  });
  return SearchInput;
});