SemanSemantic-UItic-UI/build/uncompressed/modules/search.js

/*  ******************************
  Search Prompt
  Author: Jack Lukic
  Notes: First Commit July 19, 2012

  Designed to be used as an autocomplete
  or to deliver quick inline search results
******************************  */

;(function ($, window, document, undefined) {

$.fn.searchPrompt = function(source, parameters) {
  var
    settings = $.extend(true, {}, $.fn.searchPrompt.settings, parameters),
    // make arguments available
    query           = arguments[0],
    passedArguments = [].slice.call(arguments, 1),
    invokedResponse
  ;
  $(this)
    .each(function() {
      var
        $module        = $(this),
        $searchPrompt  = $module.find(settings.selector.searchPrompt),
        $searchButton  = $module.find(settings.selector.searchButton),
        $searchResults = $module.find(settings.selector.searchResults),
        $result        = $module.find(settings.selector.result),
        $category      = $module.find(settings.selector.category),
        $emptyResult   = $module.find(settings.selector.emptyResult),
        $resultPage    = $module.find(settings.selector.resultPage),

        element        = this,
        selector       = $module.selector || '',
        instance       = $module.data('module-' + settings.namespace),
        methodInvoked  = (instance !== undefined && typeof query == 'string'),

        className      = settings.className,
        namespace      = settings.namespace,
        errors         = settings.errors,
        module
      ;
      module = {

        initialize: function() {
          var
            searchPrompt = $searchPrompt[0],
            inputEvent   = (searchPrompt.oninput !== undefined)
              ? 'input'
              : (searchPrompt.onpropertychange !== undefined)
                ? 'propertychange'
                : 'keyup'
          ;
          // attach events
          $searchPrompt
            .on('focus.' + namespace, module.event.focus)
            .on('blur.' + namespace, module.event.blur)
            .on('keydown.' + namespace, module.handleKeyboard)
          ;
          if(settings.automatic) {
            $searchPrompt
              .on(inputEvent + '.' + namespace, module.search.throttle)
            ;
          }
          $searchButton
            .on('click.' + namespace, module.search.query)
          ;
          $searchResults
            .on('click.' + namespace, settings.selector.result, module.results.select)
          ;
          $module
            .data('module-' + namespace, module)
          ;
        },
        event: {
          focus: function() {
            $module
              .addClass(className.focus)
            ;
            module.results.show();
          },
          blur: function() {
            module.search.cancel();
            $module
              .removeClass(className.focus)
            ;
            module.results.hide();
          }
        },
        handleKeyboard: function(event) {
          var
            // force latest jq dom
            $result       = $module.find(settings.selector.result),
            $category     = $module.find(settings.selector.category),
            keyCode       = event.which,
            keys          = {
              backspace : 8,
              enter     : 13,
              escape    : 27,
              upArrow   : 38,
              downArrow : 40
            },
            activeClass  = className.active,
            currentIndex = $result.index( $result.filter('.' + activeClass) ),
            resultSize   = $result.size(),
            newIndex
          ;
          // search shortcuts
          if(keyCode == keys.escape) {
            $searchPrompt
              .trigger('blur')
            ;
          }
          // result shortcuts
          if($searchResults.filter(':visible').size() > 0) {
            if(keyCode == keys.enter) {
              if( $result.filter('.' + activeClass).exists() ) {
                $.proxy(module.results.select, $result.filter('.' + activeClass) )();
                event.preventDefault();
                return false;
              }
            }
            else if(keyCode == keys.upArrow) {
              newIndex = (currentIndex - 1 < 0)
                ? currentIndex
                : currentIndex - 1
              ;
              $category
                .removeClass(activeClass)
              ;
              $result
                .removeClass(activeClass)
                .eq(newIndex)
                  .addClass(activeClass)
                  .closest($category)
                    .addClass(activeClass)
              ;
              event.preventDefault();
            }
            else if(keyCode == keys.downArrow) {
              newIndex = (currentIndex + 1 >= resultSize)
                ? currentIndex
                : currentIndex + 1
              ;
              $category
                .removeClass(activeClass)
              ;
              $result
                .removeClass(activeClass)
                .eq(newIndex)
                  .addClass(activeClass)
                  .closest($category)
                    .addClass(activeClass)
              ;
              event.preventDefault();
            }
          }
          else {
            // query shortcuts
            if(keyCode == keys.enter) {
              module.search.query();
              $searchButton
                .addClass(className.down)
              ;
              $searchPrompt
                .one('keyup', function(){
                  $searchButton
                    .removeClass(className.down)
                  ;
                })
              ;
            }
          }
        },
        search: {
          cancel: function() {
            var
              xhr = $module.data('xhr') || false
            ;
            if( xhr && xhr.state() != 'resolved') {
              xhr.abort();
            }
          },
          throttle: function(event) {
            var
              searchTerm    = $searchPrompt.val(),
              numCharacters = searchTerm.length,
              timer
            ;
            clearTimeout($module.data('timer'));
            if(numCharacters >= settings.minCharacters)  {
              timer = setTimeout(module.search.query, settings.searchThrottle);
              $module
                .data('timer', timer)
              ;
            }
            else {
              module.results.hide();
            }
          },
          query: function() {
            var
              searchTerm = $searchPrompt.val(),
              cachedHTML = module.search.cache.read(searchTerm)
            ;
            if(cachedHTML) {
              module.debug("Reading result for '" + searchTerm + "' from cache");
              module.results.add(cachedHTML);
            }
            else {
              module.debug("Querying for '" + searchTerm + "'");
              if(typeof source == 'object') {
                module.search.local(searchTerm);
              }
              else {
                module.search.remote(searchTerm);
              }
              $.proxy(settings.onSearchQuery, $module)(searchTerm);
            }
          },
          local: function(searchTerm) {
            var
              searchResults   = [],
              fullTextResults = [],
              searchFields    = $.isArray(settings.searchFields)
                ? settings.searchFields
                : [settings.searchFields],

              searchRegExp   = new RegExp('(?:\s|^)' + searchTerm, 'i'),
              fullTextRegExp = new RegExp(searchTerm, 'i'),
              searchHTML
            ;
            $module
              .addClass(className.loading)
            ;
            // iterate through search fields in array order
            $.each(searchFields, function(index, field) {
              $.each(source, function(label, thing) {
                if(typeof thing[field] == 'string' && ($.inArray(thing, searchResults) == -1) && ($.inArray(thing, fullTextResults) == -1) ) {
                  if( searchRegExp.test( thing[field] ) ) {
                    searchResults.push(thing);
                  }
                  else if( fullTextRegExp.test( thing[field] ) ) {
                    fullTextResults.push(thing);
                  }
                }
              });
            });
            searchHTML = module.results.generate({
              results: $.merge(searchResults, fullTextResults)
            });
            $module
              .removeClass(className.loading)
            ;
            module.search.cache.write(searchTerm, searchHTML);
            module.results.add(searchHTML);
          },
          remote: function(searchTerm) {
            var
              xhr     = ($module.data('xhr') !== undefined)
                ? $module.data('xhr')
                : false,
              apiSettings = {
                stateContext  : $module,
                url           : source,
                urlData: { query: searchTerm },
                success       : function(response) {
                  searchHTML = module.results.generate(response);
                  module.search.cache.write(searchTerm, searchHTML);
                  module.results.add(searchHTML);
                },
                failure      : module.error
              },
              searchHTML
            ;
            // api attaches xhr event to context, use this to prevent overlapping queries
            if( xhr && xhr.state() != 'resolved') {
              xhr.abort();
            }
            $.extend(true, apiSettings, settings.apiSettings);
            $.api(apiSettings);
          },

          cache: {
            read: function(name) {
              var
                cache = $module.data('cache')
              ;
              return (settings.cache && (typeof cache == 'object') && (cache[name] !== undefined) )
                ? cache[name]
                : false
              ;
            },
            write: function(name, value) {
              var
                cache = ($module.data('cache') !== undefined)
                  ? $module.data('cache')
                  : {}
              ;
              cache[name] = value;
              $module
                .data('cache', cache)
              ;
            }
          }
        },

        results: {
          generate: function(response) {
            module.debug('Generating html from response', response);
            var
              template = settings.templates[settings.type],
              html     = ''
            ;
            if(($.isPlainObject(response.results) && !$.isEmptyObject(response.results)) || ($.isArray(response.results) && response.results.length > 0) ) {
              if(settings.maxResults > 0) {
                response.results = $.makeArray(response.results).slice(0, settings.maxResults);
              }
              if(response.results.length > 0) {
                if($.isFunction(template)) {
                  html = template(response);
                }
                else {
                  module.error(errors.noTemplate, false);
                }
              }
            }
            else {
              html = module.message(errors.noResults, 'empty');
            }
            $.proxy(settings.onSearchResults, $module)(response);
            return html;
          },
          add: function(html) {
            if(settings.onResultsAdd == 'default' || $.proxy(settings.onResultsAdd, $searchResults)(html) == 'default') {
              $searchResults
                .html(html)
              ;
            }
            module.results.show();
          },
          show: function() {
            if( ($searchResults.filter(':visible').size() === 0) && ($searchPrompt.filter(':focus').size() > 0) && $searchResults.html() !== '') {
              $searchResults
                .stop()
                .fadeIn(200)
              ;
              $.proxy(settings.onResultsOpen, $searchResults)();
            }
          },
          hide: function() {
            if($searchResults.filter(':visible').size() > 0) {
              $searchResults
                .stop()
                .fadeOut(200)
              ;
              $.proxy(settings.onResultsClose, $searchResults)();
            }
          },
          followLink: function() {

          },
          select: function(event) {
            module.debug('Search result selected');
            var
              $result = $(this),
              $title  = $result.find('.title'),
              title   = $title.html()
            ;
            if(settings.onSelect == 'default' || $.proxy(settings.onSelect, this)(event) == 'default') {
              var
                $link  = $result.find('a[href]').eq(0),
                href   = $link.attr('href'),
                target = $link.attr('target')
              ;
              try {
                module.results.hide();
                $searchPrompt
                  .val(title)
                ;
                if(target == '_blank' || event.ctrlKey) {
                  window.open(href);
                }
                else {
                  window.location.href = (href);
                }
              }
              catch(error) {}
            }
          }
        },

        /* standard module */
        setting: function(name, value) {
          if(value === undefined) {
            return settings[name];
          }
          settings[name] = value;
        },
        debug: function() {
          var
            output    = [],
            message   = settings.moduleName + ': ' + arguments[0],
            variables = [].slice.call( arguments, 1 ),
            log       = console.info || console.log || function(){}
          ;
          log = Function.prototype.bind.call(log, console);
          if(settings.debug) {
            output.push(message);
            log.apply(console, output.concat(variables) );
          }
        },
        // displays mesage visibly in search results
        message: function(text, type) {
          type = type || 'standard';
          module.results.add( settings.templates.message(text, type) );
          return settings.templates.message(text, type);
        },
        // update view with error message
        error: function(errorMessage, escalate) {
          // show user error message
          escalate = (escalate !== undefined)
            ? escalate
            : true
          ;
          console.warn(settings.moduleName + ': ' + errorMessage);
          if(escalate && errorMessage !== undefined) {
            module.message(errorMessage, 'error');
          }
        },
        invoke: function(query, context, passedArguments) {
          var
            maxDepth,
            found
          ;
          passedArguments = passedArguments || [].slice.call( arguments, 2 );
          if(typeof query == 'string' && instance !== undefined) {
            query    = query.split('.');
            maxDepth = query.length - 1;
            $.each(query, function(depth, value) {
              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
                instance = instance[value];
                return true;
              }
              else if( instance[value] !== undefined ) {
                found = instance[value];
                return true;
              }
              module.error(errors.method);
              return false;
            });
          }
          if ( $.isFunction( found ) ) {
            return found.apply(context, passedArguments);
          }
          // return retrieved variable or chain
          return found;
        }
      };

      // check for invoking internal method
      if(methodInvoked) {
        invokedResponse = module.invoke(query, element, passedArguments);
      }
      // otherwise initialize
      else {
        module.initialize();
      }
    })
  ;
  // chain or return queried method
  return (invokedResponse !== undefined)
    ? invokedResponse
    : this
  ;
};

  $.fn.searchPrompt.settings = {

    moduleName      : 'Search Module',
    debug           : true,
    namespace       : 'search',

    // onSelect default action is defined in module
    onSelect        : 'default',
    onResultsAdd    : 'default',

    onSearchQuery   : function(){},
    onSearchResults : function(response){},

    onResultsOpen   : function(){},
    onResultsClose  : function(){},

    automatic       : 'true',
    type            : 'simple',
    minCharacters   : 3,
    searchThrottle  : 300,
    maxResults      : 7,
    cache           : true,

    searchFields    : [
      'title', 
      'description'
    ],

    // api config
    apiSettings: {

    },

    className: {
      active  : 'active',
      down    : 'down',
      focus   : 'focus',
      empty   : 'empty',
      loading : 'loading'
    },

    errors : {
      noResults   : 'Your search returned no results',
      logging     : 'Error in debug logging, exiting.',
      noTemplate  : 'A valid template name was not specified.',
      serverError : 'There was an issue with querying the server.',
      method      : 'The method you called is not defined.'
    },

    selector : {
      searchPrompt  : '.prompt',
      searchButton  : '.search.button',
      searchResults : '.results',

      category      : '.category',
      result        : '.result',

      emptyResult   : '.results .message',
      resultPage    : '.results .page'
    },

    templates: {
      message: function(message, type) {
        var
          html = ''
        ;
        if(message !== undefined && type !== undefined) {
          html +=  ''
            + '<div class="message ' + type +'">'
          ;
          // message type
          if(type == 'empty') {
            html += ''
              + '<div class="header">No Results</div class="header">'
              + '<div class="description">' + message + '</div class="description">'
            ;
          }
          else {
            html += ' <div class="description">' + message + '</div>';
          }
          html += '</div>';
        }
        return html;
      },
      categories: function(response) {
        var
          html = ''
        ;
        if(response.results !== undefined) {
          // each category
          $.each(response.results, function(index, category) {
            if(category.results !== undefined && category.results.length > 0) {
              html  += ''
                + '<div class="category">'
                + '<div class="name">' + category.name + '</div>'
              ;
              // each item inside category
              $.each(category.results, function(index, result) {
                html  += '<div class="result">';
                html  += '<a href="' + result.url + '"></a>';
                if(result.image !== undefined) {
                  html+= ''
                    + '<div class="image">'
                    + ' <img src="' + result.image + '">'
                    + '</div>'
                  ;
                }
                html += '<div class="info">';
                if(result.price !== undefined) {
                  html+= '<div class="price">' + result.price + '</div>';
                }
                if(result.title !== undefined) {
                  html+= '<div class="title">' + result.title + '</div>';
                }
                if(result.description !== undefined) {
                  html+= '<div class="description">' + result.description + '</div>';
                }
                html  += ''
                  + '</div>'
                  + '</div>'
                ;
              });
              html  += ''
                + '</div>'
              ;
            }
          });
          if(response.resultPage) {
            html += ''
            + '<a href="' + response.resultPage.url + '" class="all">'
            +   response.resultPage.text
            + '</a>';
          }
          return html;
        }
        return false;
      },
      simple: function(response) {
        var
          html = ''
        ;
        if(response.results !== undefined) {
          
          // each result
          $.each(response.results, function(index, result) {
            html  += '<a class="result" href="' + result.url + '">';
            if(result.image !== undefined) {
              html+= ''
                + '<div class="image">'
                + ' <img src="' + result.image + '">'
                + '</div>'
              ;
            }
            html += '<div class="info">';
            if(result.price !== undefined) {
              html+= '<div class="price">' + result.price + '</div>';
            }
            if(result.title !== undefined) {
              html+= '<div class="title">' + result.title + '</div>';
            }
            if(result.description !== undefined) {
              html+= '<div class="description">' + result.description + '</div>';
            }
            html  += ''
              + '</div>'
              + '</a>'
            ;
          });

          if(response.resultPage) {
            html += ''
            + '<a href="' + response.resultPage.url + '" class="all">'
            +   response.resultPage.text
            + '</a>';
          }
          return html;
        }
        return false;
      }
    }
  };

})( jQuery, window , document );