semantic-ui-sass 1.7.3.0 → 1.8.0.0

data/app/assets/javascripts/semantic-ui/search.js

@@ -32,6 +32,8 @@ $.fn.search = function(parameters) {
         settings        = $.extend(true, {}, $.fn.search.settings, parameters),
 
         className       = settings.className,
+        metadata        = settings.metadata,
+        regExp          = settings.regExp,
         selector        = settings.selector,
         error           = settings.error,
         namespace       = settings.namespace,
@@ -107,9 +109,7 @@ $.fn.search = function(parameters) {
         },
         event: {
           focus: function() {
-            $module
-              .addClass(className.focus)
-            ;
+            module.set.focus();
             clearTimeout(module.timer);
             module.throttle();
             if( module.has.minimumCharacters() ) {
@@ -117,11 +117,12 @@ $.fn.search = function(parameters) {
             }
           },
           blur: function(event) {
-            module.cancel();
-            $module
-              .removeClass(className.focus)
+            var
+              pageLostFocus = (document.activeElement === this)
             ;
-            if(!module.resultsClicked) {
+            if(!pageLostFocus && !module.resultsClicked) {
+              module.cancel.query();
+              module.remove.focus();
               module.timer = setTimeout(module.hideResults, settings.hideDelay);
             }
           },
@@ -136,30 +137,35 @@ $.fn.search = function(parameters) {
               module.debug('Search result selected');
               var
                 $result = $(this),
-                $title  = $result.find('.title'),
-                title   = $title.html()
+                $title  = $result.find(selector.title).eq(0),
+                $link   = $result.find('a[href]').eq(0),
+                href    = $link.attr('href')   || false,
+                target  = $link.attr('target') || false,
+                title   = $title.html(),
+                name    = ($title.length > 0)
+                  ? $title.text()
+                  : false,
+                results = module.get.results(),
+                result  = module.get.result(name, results),
+                returnedValue
               ;
-              if(settings.onSelect == 'default' || settings.onSelect.call(this, event) == 'default') {
-                var
-                  $link  = $result.find('a[href]').eq(0),
-                  $title = $result.find(selector.title).eq(0),
-                  href   = $link.attr('href') || false,
-                  target = $link.attr('target') || false,
-                  name   = ($title.length > 0)
-                    ? $title.text()
-                    : false
-                ;
-                module.hideResults();
-                if(name) {
-                  $prompt.val(name);
+              if( $.isFunction(settings.onSelect) ) {
+                if(settings.onSelect.call(element, result, results) === false) {
+                  module.debug('Custom onSelect callback cancelled default select action');
+                  return;
                 }
-                if(href) {
-                  if(target == '_blank' || event.ctrlKey) {
-                    window.open(href);
-                  }
-                  else {
-                    window.location.href = (href);
-                  }
+              }
+              module.hideResults();
+              if(name) {
+                module.set.value(name);
+              }
+              if(href) {
+                module.verbose('Opening search link found in result', $link);
+                if(target == '_blank' || event.ctrlKey) {
+                  window.open(href);
+                }
+                else {
+                  window.location.href = (href);
                 }
               }
             }
@@ -167,20 +173,20 @@ $.fn.search = function(parameters) {
         },
         handleKeyboard: function(event) {
           var
-            // force latest jq dom
-            $result       = $module.find(selector.result),
-            $category     = $module.find(selector.category),
-            keyCode       = event.which,
-            keys          = {
+            // force selector refresh
+            $result      = $module.find(selector.result),
+            $category    = $module.find(selector.category),
+            currentIndex = $result.index( $result.filter('.' + className.active) ),
+            resultSize   = $result.length,
+
+            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.length,
             newIndex
           ;
           // search shortcuts
@@ -190,12 +196,11 @@ $.fn.search = function(parameters) {
               .trigger('blur')
             ;
           }
-          // result shortcuts
-          if($results.filter(':visible').length > 0) {
+          if( module.is.visible() ) {
             if(keyCode == keys.enter) {
               module.verbose('Enter key pressed, selecting active result');
-              if( $result.filter('.' + activeClass).length > 0 ) {
-                module.event.result.click.call($result.filter('.' + activeClass), event);
+              if( $result.filter('.' + className.active).length > 0 ) {
+                module.event.result.click.call($result.filter('.' + className.active), event);
                 event.preventDefault();
                 return false;
               }
@@ -207,14 +212,14 @@ $.fn.search = function(parameters) {
                 : currentIndex - 1
               ;
               $category
-                .removeClass(activeClass)
+                .removeClass(className.active)
               ;
               $result
-                .removeClass(activeClass)
+                .removeClass(className.active)
                 .eq(newIndex)
-                  .addClass(activeClass)
+                  .addClass(className.active)
                   .closest($category)
-                    .addClass(activeClass)
+                    .addClass(className.active)
               ;
               event.preventDefault();
             }
@@ -225,14 +230,14 @@ $.fn.search = function(parameters) {
                 : currentIndex + 1
               ;
               $category
-                .removeClass(activeClass)
+                .removeClass(className.active)
               ;
               $result
-                .removeClass(activeClass)
+                .removeClass(className.active)
                 .eq(newIndex)
-                  .addClass(activeClass)
+                  .addClass(className.active)
                   .closest($category)
-                    .addClass(activeClass)
+                    .addClass(className.active)
               ;
               event.preventDefault();
             }
@@ -242,24 +247,115 @@ $.fn.search = function(parameters) {
             if(keyCode == keys.enter) {
               module.verbose('Enter key pressed, executing query');
               module.query();
-              $searchButton
-                .addClass(className.down)
-              ;
-              $prompt
-                .one('keyup', function(){
-                  $searchButton
-                    .removeClass(className.down)
-                  ;
-                })
-              ;
+              module.set.buttonPressed();
+              $prompt.one('keyup', module.remove.buttonFocus);
+            }
+          }
+        },
+
+        setup: {
+          api: function() {
+            var
+              apiSettings = {
+                on        : false,
+                action    : 'search',
+                onFailure : module.error
+              },
+              searchHTML
+            ;
+            module.verbose('First request, initializing API');
+            $module.api(apiSettings);
+          }
+        },
+
+        can: {
+          useAPI: function() {
+            return $.fn.api !== undefined;
+          },
+          transition: function() {
+            return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
+          }
+        },
+
+        is: {
+          empty: function() {
+            return ($results.html() === '');
+          },
+          visible: function() {
+            return ($results.filter(':visible').length > 0);
+          },
+          focused: function() {
+            return ($prompt.filter(':focus').length > 0);
+          }
+        },
+
+        get: {
+          value: function() {
+            return $prompt.val();
+          },
+          results: function() {
+            var
+              results = $module.data(metadata.results)
+            ;
+            return results;
+          },
+          result: function(value, results) {
+            var
+              result = false
+            ;
+            value = value || module.get.value();
+            results = results || module.get.results();
+            if(settings.type === 'category') {
+              module.debug('Finding result from category results', value);
+              $.each(results, function(index, category) {
+                if(category.results !== undefined) {
+                  result = module.search.object(value, category.results)[0];
+                  if(result.length > 0) {
+                    return true;
+                  }
+                }
+              });
             }
+            else {
+              module.debug('Finding result in results object', value);
+              result = module.search.object(value, results)[0];
+            }
+            return result;
+          },
+        },
+
+        set: {
+          focus: function() {
+            $module.addClass(className.focus);
+          },
+          loading: function() {
+            $module.addClass(className.loading);
+          },
+          value: function(value) {
+            module.verbose('Setting search input value', value);
+            $prompt.val(value);
+          },
+          buttonPressed: function() {
+            $searchButton.addClass(className.pressed);
+          }
+        },
+
+        remove: {
+          loading: function() {
+            $module.removeClass(className.loading);
+          },
+          focus: function() {
+            $module.removeClass(className.focus);
+          },
+          buttonPressed: function() {
+            $searchButton.removeClass(className.pressed);
           }
         },
 
         query: function() {
           var
-            searchTerm = $prompt.val(),
-            cachedHTML = module.read.cache(searchTerm)
+            searchTerm = module.get.value(),
+            cachedHTML = module.read.cachedHTML(searchTerm)
           ;
           if(cachedHTML) {
             module.debug('Reading result for ' + searchTerm + ' from cache');
@@ -270,15 +366,15 @@ $.fn.search = function(parameters) {
             if($.isPlainObject(settings.source) || $.isArray(settings.source)) {
               module.search.local(searchTerm);
             }
-            else if(settings.apiSettings) {
-              module.search.remote(searchTerm);
-            }
-            else if($.fn.api !== undefined && $.api.settings.api.search !== undefined) {
-              module.debug('Searching with default search API endpoint');
-              settings.apiSettings = {
-                action: 'search'
-              };
-              module.search.remote(searchTerm);
+            else if( module.can.useAPI() ) {
+              if(settings.apiSettings) {
+                module.debug('Searching with specified API settings', settings.apiSettings);
+                module.search.remote(searchTerm);
+              }
+              else if($.api.settings.api.search !== undefined) {
+                module.debug('Searching with default search API endpoint');
+                module.search.remote(searchTerm);
+              }
             }
             else {
               module.error(error.source);
@@ -290,21 +386,64 @@ $.fn.search = function(parameters) {
         search: {
           local: function(searchTerm) {
             var
-              results   = [],
+              searchResults = module.search.object(searchTerm, settings.content),
+              searchHTML
+            ;
+            module.set.loading();
+            module.save.results(searchResults);
+            module.debug('Returned local search results', searchResults);
+
+            searchHTML = module.generateResults({
+              results: searchResults
+            });
+            module.remove.loading();
+            module.write.cachedHTML(searchTerm, searchHTML);
+            module.addResults(searchHTML);
+          },
+          remote: function(searchTerm) {
+            var
+              apiSettings = {
+                onSuccess : function(response) {
+                  module.parse.response.call(element, response, searchTerm);
+                },
+                urlData: {
+                  query: searchTerm
+                }
+              }
+            ;
+            if( !$module.api('get request') ) {
+              module.setup.api();
+            }
+            $.extend(true, apiSettings, settings.apiSettings);
+            module.debug('Executing search', apiSettings);
+            module.cancel.query();
+            $module
+              .api('setting', apiSettings)
+              .api('query')
+            ;
+          },
+          object: function(searchTerm, source) {
+            var
+              results         = [],
               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)
+              searchRegExp    = new RegExp(regExp.exact + searchTerm, 'i'),
+              fullTextRegExp  = new RegExp(searchTerm, 'i')
             ;
+
+            source = source || settings.source;
+
+            // exit conditions on no source
+            if(source === undefined) {
+              module.error(error.source);
+              return [];
+            }
+
             // iterate through search fields in array order
             $.each(searchFields, function(index, field) {
-              $.each(settings.source, function(label, content) {
+              $.each(source, function(label, content) {
                 var
                   fieldExists = (typeof content[field] == 'string'),
                   notAlreadyResult = ($.inArray(content, results) == -1 && $.inArray(content, fullTextResults) == -1)
@@ -319,37 +458,26 @@ $.fn.search = function(parameters) {
                 }
               });
             });
-            searchHTML = module.generateResults({
-              results: $.merge(results, fullTextResults)
-            });
-            $module
-              .removeClass(className.loading)
-            ;
-            module.write.cache(searchTerm, searchHTML);
-            module.addResults(searchHTML);
-          },
-          remote: function(searchTerm) {
+            return $.merge(results, fullTextResults);
+          }
+        },
+
+        parse: {
+          response: function(response, searchTerm) {
             var
-              apiSettings = {
-                stateContext : $module,
-                urlData      : {
-                  query: searchTerm
-                },
-                onSuccess : function(response) {
-                  searchHTML = module.generateResults(response);
-                  module.write.cache(searchTerm, searchHTML);
-                  module.addResults(searchHTML);
-                },
-                onFailure : module.error
-              },
-              searchHTML
+              searchHTML = module.generateResults(response)
             ;
-            module.cancel();
-            module.debug('Executing search');
-            $.extend(true, apiSettings, settings.apiSettings);
-            $.api(apiSettings);
+            module.verbose('Parsing server response', response);
+            if(response !== undefined) {
+              if(searchTerm) {
+                module.write.cachedHTML(searchTerm, searchHTML);
+                if(response.results !== undefined) {
+                  module.save.results(response.results);
+                }
+              }
+              module.addResults(searchHTML);
+            }
           }
-
         },
 
         throttle: function() {
@@ -362,20 +490,18 @@ $.fn.search = function(parameters) {
           }
         },
 
-        cancel: function() {
-          var
-            xhr = $module.data('xhr') || false
-          ;
-          if( xhr && xhr.state() != 'resolved') {
-            module.debug('Cancelling last search');
-            xhr.abort();
+        cancel: {
+          query: function() {
+            if( module.can.useAPI() ) {
+              $module.api('abort');
+            }
           }
         },
 
         has: {
           minimumCharacters: function() {
             var
-              searchTerm    = $prompt.val(),
+              searchTerm    = module.get.value(),
               numCharacters = searchTerm.length
             ;
             return (numCharacters >= settings.minCharacters);
@@ -383,43 +509,61 @@ $.fn.search = function(parameters) {
         },
 
         read: {
-          cache: function(name) {
+          cachedHTML: function(name) {
             var
-              cache = $module.data('cache')
-            ;
-            return (settings.cache && (typeof cache == 'object') && (cache[name] !== undefined) )
-              ? cache[name]
-              : false
+              cache = $module.data(metadata.cache)
             ;
+            if(settings.cache) {
+              module.verbose('Checking cache for generated html for query', name);
+              return (typeof cache == 'object') && (cache[name] !== undefined)
+                ? cache[name]
+                : false
+              ;
+            }
+            return false;
+          }
+        },
+
+        save: {
+          results: function(results) {
+            module.verbose('Saving current search results to metadata', results);
+            $module.data(metadata.results, results);
           }
         },
 
         write: {
-          cache: function(name, value) {
+          cachedHTML: function(name, value) {
             var
-              cache = ($module.data('cache') !== undefined)
-                ? $module.data('cache')
+              cache = ($module.data(metadata.cache) !== undefined)
+                ? $module.data(metadata.cache)
                 : {}
             ;
-            cache[name] = value;
-            $module
-              .data('cache', cache)
-            ;
+            if(settings.cache) {
+              module.verbose('Writing generated html to cache', name, value);
+              cache[name] = value;
+              $module
+                .data(metadata.cache, cache)
+              ;
+            }
           }
         },
 
         addResults: function(html) {
-          if(settings.onResultsAdd == 'default' || settings.onResultsAdd.call($results, html) == 'default') {
-            $results
-              .html(html)
-            ;
+          if( $.isFunction(settings.onResultsAdd) ) {
+            if( settings.onResultsAdd.call($results, html) === false ) {
+              module.debug('onResultsAdd callback cancelled default action');
+              return false;
+            }
           }
+          $results
+            .html(html)
+          ;
           module.showResults();
         },
 
         showResults: function() {
-          if( ($results.filter(':visible').length === 0) && ($prompt.filter(':focus').length > 0) && $results.html() !== '') {
-            if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported') && !$results.transition('is inward')) {
+          if( !module.is.visible() && module.is.focused() && !module.is.empty() ) {
+            if( module.can.transition() ) {
               module.debug('Showing results with css animations');
               $results
                 .transition({
@@ -440,8 +584,8 @@ $.fn.search = function(parameters) {
           }
         },
         hideResults: function() {
-          if($results.filter(':visible').length > 0) {
-            if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported') && !$results.transition('is outward')) {
+          if( module.is.visible() ) {
+            if( module.can.transition() ) {
               module.debug('Hiding results with css animations');
               $results
                 .transition({
@@ -455,7 +599,7 @@ $.fn.search = function(parameters) {
               module.debug('Hiding results with javascript');
               $results
                 .stop()
-                .fadeIn(settings.duration, settings.easing)
+                .fadeOut(settings.duration, settings.easing)
               ;
             }
             settings.onResultsClose.call($results);
@@ -465,15 +609,19 @@ $.fn.search = function(parameters) {
         generateResults: function(response) {
           module.debug('Generating html from response', response);
           var
-            template = settings.templates[settings.type],
-            html     = ''
+            template       = settings.templates[settings.type],
+            isProperObject = ($.isPlainObject(response.results) && !$.isEmptyObject(response.results)),
+            isProperArray  = ($.isArray(response.results) && response.results.length > 0),
+            html           = ''
           ;
-          if(($.isPlainObject(response.results) && !$.isEmptyObject(response.results)) || ($.isArray(response.results) && response.results.length > 0) ) {
+          if(isProperObject || isProperArray ) {
             if(settings.maxResults > 0) {
-              response.results = $.isArray(response.results)
-                ? response.results.slice(0, settings.maxResults)
-                : response.results
-              ;
+              if(isProperObject) {
+                module.error(error.maxResults);
+              }
+              else {
+                response.results = response.results.slice(0, settings.maxResults);
+              }
             }
             if($.isFunction(template)) {
               html = template(response);
@@ -683,11 +831,12 @@ $.fn.search.settings = {
   verbose        : true,
   performance    : true,
 
-  // api config
-  apiSettings    : false,
   type           : 'standard',
   minCharacters  : 1,
 
+  // api config
+  apiSettings    : false,
+
   source         : false,
   searchFields   : [
     'title',
@@ -697,7 +846,7 @@ $.fn.search.settings = {
 
   automatic      : 'true',
   hideDelay      : 0,
-  searchDelay    : 300,
+  searchDelay    : 100,
   maxResults     : 7,
   cache          : true,
 
@@ -705,9 +854,8 @@ $.fn.search.settings = {
   duration       : 300,
   easing         : 'easeOutExpo',
 
-  // onSelect default action is defined in module
-  onSelect       : 'default',
-  onResultsAdd   : 'default',
+  onSelect       : false,
+  onResultsAdd   : false,
 
   onSearchQuery  : function(){},
   onResults      : function(response){},
@@ -717,10 +865,10 @@ $.fn.search.settings = {
 
   className: {
     active  : 'active',
-    down    : 'down',
-    focus   : 'focus',
     empty   : 'empty',
-    loading : 'loading'
+    focus   : 'focus',
+    loading : 'loading',
+    pressed : 'down'
   },
 
   error : {
@@ -729,9 +877,19 @@ $.fn.search.settings = {
     logging     : 'Error in debug logging, exiting.',
     noTemplate  : 'A valid template name was not specified.',
     serverError : 'There was an issue with querying the server.',
+    maxResults  : 'Results must be an array to use maxResults setting',
     method      : 'The method you called is not defined.'
   },
 
+  metadata: {
+    cache   : 'cache',
+    results : 'results'
+  },
+
+  regExp: {
+    exact: '(?:\s|^)'
+  },
+
   selector : {
     prompt       : '.prompt',
     searchButton : '.search.button',