isomorphic-search/build/agent/presentation.js

A configurable search interface.

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports);
    global.presentation = mod.exports;
  }
})(this, function (exports) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  /**
   * Client-side
   */

  var presentation = {
    insertAt: function insertAt($container, action, index, content) {
      var siblings = $container.children();

      if (siblings.length) {
        return siblings.eq(index).after(content);
      }

      return $container[action](content);
    },
    render: function render($container, content, _ref) {
      var _ref$action = _ref.action,
          action = _ref$action === undefined ? 'append' : _ref$action,
          _ref$index = _ref.index,
          index = _ref$index === undefined ? false : _ref$index;

      if (!index && index !== 0) {
        $container[action](content);
      } else {
        this.insertAt($container, content, { action: action, index: index });
      }

      return;
    },
    renderSearchResults: function renderSearchResults(results, abstraction) {
      // Reset view.
      abstraction.$el.noResults.remove();

      // Get elements.
      var $el = abstraction.$el,
          el = abstraction.el,
          attr = abstraction.attr,
          identifier = abstraction.identifier,
          template = abstraction.template,
          hiddenClass = attr.hidden,
          $results = $el.results,
          $resultsList = $el.resultsList,
          $li = $el.result,
          li = el.result;


      // Empty view before rendering results only.
      $li.addClass(hiddenClass);

      if (!results || !results.length) {
        $resultsList.prepend(template.noResults(abstraction));
        return results;
      }

      results.forEach(function (result) {
        // Display matching search result.
        $results.find(li + '[data-' + identifier + '="' + result[identifier] + '"]').removeClass(hiddenClass);
      });

      return results;
    },


    search: {
      // Cancel search.
      cancel: function cancel(event, _ref2) {
        var attr = _ref2.attr,
            $el = _ref2.$el,
            icon = _ref2.icon,
            metadata = _ref2.metadata;
        var cancelClass = icon.cancel,
            hiddenClass = attr.hidden,
            iconClasses = cancelClass + ' ' + icon.search,
            input = metadata.input,
            search = $el.input.val();

        // Reset value of search field.
        $el.input.val('');
        // Remove no results view.
        $el.noResults.remove();
        // Hide results from view.
        $el.results.addClass(hiddenClass);
        // Reveal individual results so they'll be exposed with container.
        $el.result.removeClass(hiddenClass);
        // Toggle from cancel button to search button.
        $el.container.find('.' + cancelClass).toggleClass(iconClasses);

        // Execute callback.
        if (input && input.cancel && input.cancel.callback) {
          input.cancel.callback(event, search);
        }
      },

      // Update input.
      // @TODO Review change method.
      change: function change(event, abstraction, data, engine, searchCallback) {
        var input = abstraction.metadata.input;


        // Execute search.
        var search = searchCallback(abstraction, data, engine);

        // Execute callback on change.
        if (input && input.change && input.change.callback) {
          input.change.callback(event, search);
        }
      },

      // Focus on input.
      focus: function focus(event, abstraction) {
        var $el = abstraction.$el,
            attr = abstraction.attr,
            icon = abstraction.icon,
            template = abstraction.template,
            metadata = abstraction.metadata,
            input = metadata.input,
            hiddenClass = attr.hidden,
            search = $el.input.val();


        // Replace the search icon with the cancel icon.
        $el.submit.removeClass(icon.search).addClass(icon.cancel);

        // Display all potential results.
        $el.results.removeClass(hiddenClass);

        // Execute callback.
        if (input && input.focus && input.focus.callback) {
          input.focus.callback(event, search);
        }

        return true;
      }
    },

    bind: function bind(abstraction, data, engine, onChangeCallback) {
      var _this = this;

      var attr = abstraction.attr,
          $el = abstraction.$el,
          icon = abstraction.icon;


      // Set events on search input.
      $el.input.off().on('focus', function (event) {
        _this.search.focus(event, abstraction);
      }).on('keyup, paste, input', function (event) {
        _this.search.change(event, abstraction, data, engine, onChangeCallback);
      });

      $el.menu.off().
      // Set events on search icon.
      on('click', '.' + icon.search, function (event) {
        _this.search.focus(event, abstraction);
      }).
      // Set events on cancel icon.
      on('click', '.' + icon.cancel, function (event) {
        _this.search.cancel(event, abstraction);
      });
    }
  };

  exports.default = presentation;
});