Adds several fixes for theming for search

src/definitions/behaviors/api.js

@@ -466,17 +466,17 @@ $.api = $.fn.api = function(parameters) {
             if(runSettings) {
               if(runSettings.success !== undefined) {
                 module.debug('Legacy success callback detected', runSettings);
-                module.error(error.legacyParameters);
+                module.error(error.legacyParameters, runSettings.success);
                 runSettings.onSuccess = runSettings.success;
               }
               if(runSettings.failure !== undefined) {
                 module.debug('Legacy failure callback detected', runSettings);
-                module.error(error.legacyParameters);
+                module.error(error.legacyParameters, runSettings.failure);
                 runSettings.onFailure = runSettings.failure;
               }
               if(runSettings.complete !== undefined) {
                 module.debug('Legacy complete callback detected', runSettings);
-                module.error(error.legacyParameters);
+                module.error(error.legacyParameters, runSettings.complete);
                 runSettings.onComplete = runSettings.complete;
               }
             }

src/definitions/modules/search.js

@@ -70,7 +70,6 @@ $.fn.search = function(parameters) {
             .on('keydown' + eventNamespace, module.handleKeyboard)
           ;
           if(settings.automatic) {
-            console.log($prompt);
             $prompt
               .on(inputEvent + eventNamespace, module.search.throttle)
             ;
@@ -112,7 +111,9 @@ $.fn.search = function(parameters) {
             ;
             clearTimeout(module.timer);
             module.search.throttle();
-            module.results.show();
+            if(module.has.minimum())  {
+              module.results.show();
+            }
           },
           blur: function() {
             module.search.cancel();
@@ -212,6 +213,15 @@ $.fn.search = function(parameters) {
             }
           }
         },
+        has: {
+          minimum: function() {
+            var
+              searchTerm    = $prompt.val(),
+              numCharacters = searchTerm.length
+            ;
+            return (numCharacters >= settings.minCharacters);
+          }
+        },
         search: {
           cancel: function() {
             var
@@ -223,12 +233,8 @@ $.fn.search = function(parameters) {
             }
           },
           throttle: function() {
-            var
-              searchTerm    = $prompt.val(),
-              numCharacters = searchTerm.length
-            ;
             clearTimeout(module.timer);
-            if(numCharacters >= settings.minCharacters)  {
+            if(module.has.minimum())  {
               module.timer = setTimeout(module.search.query, settings.searchDelay);
             }
             else {
@@ -308,8 +314,8 @@ $.fn.search = function(parameters) {
           remote: function(searchTerm) {
             var
               apiSettings = {
-                stateContext  : $module,
-                urlData: {
+                stateContext : $module,
+                urlData      : {
                   query: searchTerm
                 },
                 onSuccess : function(response) {
@@ -317,7 +323,7 @@ $.fn.search = function(parameters) {
                   module.search.cache.write(searchTerm, searchHTML);
                   module.results.add(searchHTML);
                 },
-                failure      : module.error
+                onFailure : module.error
               },
               searchHTML
             ;
@@ -360,7 +366,10 @@ $.fn.search = function(parameters) {
             ;
             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);
+                response.results = $.isArray(response.results)
+                  ? response.results.slice(0, settings.maxResults)
+                  : response.results
+                ;
               }
               if($.isFunction(template)) {
                 html = template(response);
@@ -385,10 +394,14 @@ $.fn.search = function(parameters) {
           },
           show: function() {
             if( ($results.filter(':visible').size() === 0) && ($prompt.filter(':focus').size() > 0) && $results.html() !== '') {
-              if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+              if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported') && !$results.transition('is inward')) {
                 module.debug('Showing results with css animations');
                 $results
-                  .transition(settings.transition + ' in', settings.duration)
+                  .transition({
+                    animation  : settings.transition + ' in',
+                    duration   : settings.duration,
+                    queue      : true
+                  })
                 ;
               }
               else {
@@ -403,10 +416,14 @@ $.fn.search = function(parameters) {
           },
           hide: function() {
             if($results.filter(':visible').size() > 0) {
-              if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+              if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported') && !$results.transition('is outward')) {
                 module.debug('Hiding results with css animations');
                 $results
-                  .transition(settings.transition + ' out', settings.duration)
+                  .transition({
+                    animation  : settings.transition + ' out',
+                    duration   : settings.duration,
+                    queue      : true
+                  })
                 ;
               }
               else {
@@ -429,10 +446,17 @@ $.fn.search = function(parameters) {
             if(settings.onSelect == 'default' || $.proxy(settings.onSelect, 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
+                target = $link.attr('target') || false,
+                name   = ($title.size() > 0)
+                  ? $title.text()
+                  : false
               ;
               module.results.hide();
+              if(name) {
+                $prompt.val(name);
+              }
               if(href) {
                 if(target == '_blank' || event.ctrlKey) {
                   window.open(href);
@@ -642,7 +666,7 @@ $.fn.search.settings = {
   // api config
   apiSettings    : false,
   type           : 'simple',
-  minCharacters  : 2,
+  minCharacters  : 1,
 
   source         : false,
   searchFields   : [
@@ -651,7 +675,7 @@ $.fn.search.settings = {
   ],
 
   automatic      : 'true',
-  hideDelay      : 300,
+  hideDelay      : 0,
   searchDelay    : 300,
   maxResults     : 7,
   cache          : true,
@@ -693,7 +717,8 @@ $.fn.search.settings = {
     searchButton : '.search.button',
     results      : '.results',
     category     : '.category',
-    result       : '.result'
+    result       : '.result',
+    title        : '.title, .name'
   },
 
   templates: {
@@ -756,7 +781,9 @@ $.fn.search.settings = {
             // each item inside category
             $.each(category.results, function(index, result) {
               html  += '<div class="result">';
-              html  += '<a href="' + result.url + '"></a>';
+              if(result.url) {
+                html  += '<a href="' + result.url + '"></a>';
+              }
               if(result.image !== undefined) {
                 result.image = escape(result.image);
                 html += ''
@@ -787,10 +814,10 @@ $.fn.search.settings = {
             ;
           }
         });
-        if(response.resultPage) {
+        if(response.action) {
           html += ''
-          + '<a href="' + response.resultPage.url + '" class="all">'
-          +   response.resultPage.text
+          + '<a href="' + response.action.url + '" class="action">'
+          +   response.action.text
           + '</a>';
         }
         return html;
@@ -805,7 +832,9 @@ $.fn.search.settings = {
 
         // each result
         $.each(response.results, function(index, result) {
-          html  += '<a class="result" href="' + result.url + '">';
+          if(result.url) {
+            html  += '<a class="result" href="' + result.url + '">';
+          }
           if(result.image !== undefined) {
             html += ''
               + '<div class="image">'
@@ -825,8 +854,10 @@ $.fn.search.settings = {
           }
           html  += ''
             + '</div>'
-            + '</a>'
           ;
+          if(results.url) {
+            html += '</a>';
+          }
         });
 
         if(response.resultPage) {

src/definitions/modules/search.less

@@ -44,7 +44,6 @@
   border: @promptBorder;
   color: @promptColor;
   box-shadow: @promptBoxShadow;
-  box-sizing: border-box;
   transition: @promptTransition;
 }
 
@@ -65,7 +64,7 @@
     Results
 ---------------*/
 
-.ui.search .results {
+.ui.search > .results {
   display: none;
 
   position: absolute;
@@ -87,7 +86,7 @@
     Result
 ---------------*/
 
-.ui.search .result {
+.ui.search > .results .result {
   font-family: @pageFont;
   cursor: pointer;
   overflow: hidden;
@@ -96,12 +95,12 @@
   color: @resultTextColor;
   line-height: @resultLineHeight;
 }
-.ui.search .result:first-child {
+.ui.search > .results .result:first-child {
   border-top: none;
 }
 
 /* Image */
-.ui.search .result .image {
+.ui.search > .results .result .image {
   float: @resultImageFloat;
   overflow: hidden;
   background: @resultImageBackground;
@@ -109,7 +108,7 @@
   height: @resultImageHeight;
   border-radius: @resultImageBorderRadius;
 }
-.ui.search .result .image img {
+.ui.search > .results .result .image img {
   display: block;
   width: auto;
   height: 100%;
@@ -119,19 +118,21 @@
       Info
 ---------------*/
 
-.ui.search .result .image + .content {
+.ui.search > .results .result .image + .content {
   margin: @resultImageMargin;
 }
 
-.ui.search .result .title {
+.ui.search > .results .result .title {
   font-family: @resultTitleFont;
   font-weight: @resultTitleFontWeight;
+  font-size: @resultTitleFontSize;
   color: @resultTitleColor;
 }
-.ui.search .result .description {
+.ui.search > .results .result .description {
+  margin-top: @resultDescriptionDistance;
   color: @resultDescriptionColor;
 }
-.ui.search .result .price {
+.ui.search > .results .result .price {
   float: @resultPriceFloat;
   color: @resultPriceColor;
 }
@@ -140,31 +141,31 @@
     Message
 ---------------*/
 
-.ui.search .message {
+.ui.search > .results > .message {
   padding: @messageVerticalPadding @messageHorizontalPadding;
 }
-.ui.search .message .header {
+.ui.search > .results > .message .header {
   font-family: @headerFont;
   font-size: @messageHeaderFontSize;
   font-weight: @messageHeaderFontWeight;
   color: @messageHeaderColor;
 }
-.ui.search .message .description {
+.ui.search > .results > .message .description {
   margin-top: @messageDescriptionDistance;
   font-size: @messageDescriptionFontSize;
   color: @messageDescriptionColor;
 }
 
 /* View All Results */
-.ui.search .all {
+.ui.search > .results > .action {
   display: block;
-  border-top: @allResultsBorder;
-  background-color: @allResultsBackground;
-  height: @allResultsHeight;
-  line-height: @allResultsHeight;
-  color: @allResultsColor;
-  font-weight: @allResultsFontWeight;
-  text-align: @allResultsAlign;
+  border-top: @actionBorder;
+  background: @actionBackground;
+  height: @actionHeight;
+  line-height: @actionHeight;
+  color: @actionColor;
+  font-weight: @actionFontWeight;
+  text-align: @actionAlign;
 }
 
 
@@ -173,39 +174,80 @@
             States
 *******************************/
 
+/*--------------------
+       Loading
+---------------------*/
+
+.ui.loading.search .input > .icon:before {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  border-radius: @circularRadius;
+  border: @loaderLineWidth solid @loaderFillColor;
+}
+.ui.loading.search .input > .icon:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  animation: button-spin @loaderSpeed linear;
+  animation-iteration-count: infinite;
+
+  border-radius: @circularRadius;
+
+  border-color: @loaderLineColor transparent transparent;
+  border-style: solid;
+  border-width: @loaderLineWidth;
+
+  box-shadow: 0px 0px 0px 1px transparent;
+}
+
+
 /*--------------
       Hover
 ---------------*/
 
-.ui.search .result:hover,
-.ui.search .results .category .result:hover {
+.ui.search > .results .result:hover,
+.ui.search > .results .category .result:hover {
   background: @resultHoverBackground;
 }
 .ui.search .all:hover {
-  background: @allResultsHoverBackground;
+  background: @actionHoverBackground;
 }
 
 /*--------------
       Active
 ---------------*/
 
-.ui.search .results .category.active {
-  background-color: @categoryActiveBackground;
+.ui.search > .results .category.active {
+  background: @categoryActiveBackground;
 }
-.ui.search .results .category.active > .name {
+.ui.search > .results .category.active > .name {
   color: @categoryNameActiveColor;
 }
 
-.ui.search .result.active,
-.ui.search .results .category .result.active {
+.ui.search > .results .result.active,
+.ui.search > .results .category .result.active {
+  position: relative;
   border-left-color: @resultActiveBorderLeft;
-  background-color: @resultActiveBackground;
+  background: @resultActiveBackground;
   box-shadow: @resultActiveBoxShadow;
 }
-.ui.search .result.active .title {
+.ui.search > .results .result.active .title {
   color: @resultActiveTitleColor;
 }
-.ui.search .result.active .description {
+.ui.search > .results .result.active .description {
   color: @resultActiveDescriptionColor;
 }
 
@@ -218,7 +260,11 @@
      Left / Right
 --------------------*/
 
-.ui.right.aligned.search .results {
+.ui[class*="left aligned"].search > .results {
+  right: auto;
+  left: 0%;
+}
+.ui[class*="right aligned"].search > .results {
   right: 0%;
   left: auto;
 }
@@ -227,34 +273,40 @@
     Categories
 ---------------*/
 
-.ui.search .results .category {
+/* Category */
+.ui.search > .results .category {
   background: @categoryBackground;
   box-shadow: @categoryBoxShadow;
+  border-bottom: @categoryDivider;
+  transition: @categoryTransition;
 }
-.ui.search .results .category,
-.ui.search .results .category .result {
-  position: relative;
+.ui.search > .results .category:last-child {
+  border-bottom: none;
+}
+
+/* Category Result */
+.ui.search > .results .category .result {
+  background: @categoryResultBackground;
+  margin-left: @categoryNameWidth;
+  border-left: @categoryResultLeftBorder;
+  border-bottom: @categoryResultDivider;
   transition: @categoryResultTransition;
 }
-.ui.search .results .category:first-child {
-  box-shadow: none;
+.ui.search > .results .category .result:last-child {
+  border-bottom: @categoryResultLastDivider;
 }
 
-.ui.search .results .category > .name {
+/* Category Result Name */
+.ui.search > .results .category > .name {
+  background: @categoryNameBackground;
   font-family: @categoryNameFont;
+  width: @categoryNameWidth;
   float: @categoryNameFontSize;
   float: @categoryNameFloat;
   padding: @categoryNamePadding;
   font-weight: @categoryNameFontWeight;
   color: @categoryNameColor;
 }
-.ui.search .results .category .result {
-  background-color: @categoryResultBackground;
-  margin-left: @categoryNameWidth;
-  border-left: @categoryResultLeftBorder;
-  border-bottom: @categoryResultTopBorder;
-}
-
 
 /*******************************
            Variations

src/themes/default/modules/search.variables

@@ -28,7 +28,7 @@
 @resultsBoxShadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
 
 /* Result */
-@resultFontSize: 0.9em;
+@resultFontSize: 0.9285em;
 @resultVerticalPadding: 0.5em;
 @resultHorizontalPadding: 1em;
 @resultTextColor: @textColor;
@@ -44,9 +44,15 @@
 
 /* Result Content */
 @resultTitleFont: @headerFont;
-@resultTitleFontWeight: normal;
+@resultTitleFontWeight: bold;
+@resultTitleFontSize: 1.1em;
 @resultTitleColor: @darkTextColor;
-@resultDescriptionColor: @textColor;
+
+/* Description */
+@resultDescriptionDistance: 0.25em;
+@resultDescriptionColor: @lightTextColor;
+
+/* Price */
 @resultPriceFloat: right;
 @resultPriceColor: @green;
 
@@ -61,12 +67,12 @@
 @messageDescriptionColor: @textColor;
 
 /* All Results Link */
-@allResultsBorder: 1px solid rgba(0, 0, 0, 0.1);
-@allResultsBackground: #F0F0F0;
-@allResultsHeight: 2em;
-@allResultsColor: @textColor;
-@allResultsFontWeight: bold;
-@allResultsAlign: center;
+@actionBorder: 1px solid @borderColor;
+@actionBackground: #F0F0F0;
+@actionHeight: 2em;
+@actionColor: @textColor;
+@actionFontWeight: bold;
+@actionAlign: center;
 
 
 /*******************************
@@ -74,20 +80,23 @@
 *******************************/
 
 /* Hover */
-@resultHoverBackground: #FAFAFA;
-@allResultsHoverBackground: #FAFAFA;
+@resultHoverBackground: @offWhite;
+@actionHoverBackground: @offWhite;
 
 /* Loading */
-@loaderPath: "@{imagePath}/loader-mini.gif";
+@loaderSize: 1.2857em;
+@loaderOffset: -(@loaderSize / 2);
+@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
+@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
 
 /* Active Category */
-@categoryActiveBackground: #F1F1F1;
+@categoryActiveBackground: @darkWhite;
 @categoryNameActiveColor: @textColor;
 
 /* Active Result */
 @resultActiveBorderLeft: transparent;
-@resultActiveBackground: #F0F0F0;
-@resultActiveBoxShadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
+@resultActiveBackground: @darkWhite;
+@resultActiveBoxShadow: 3px 0px 3px 0px @borderColor;
 @resultActiveTitleColor: @darkTextColor;
 @resultActiveDescriptionColor: @darkTextColor;
 
@@ -97,21 +106,28 @@
 *******************************/
 
 /* Category */
-@categoryBackground: #F0F0F0;
-@categoryBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
-@categoryResultTransition: background 0.2s ease, border-color 0.2s ease;
+@categoryBackground: @darkWhite;
+@categoryBoxShadow: none;
+@categoryDivider: 1px solid @borderColor;
+@categoryTransition:
+  background 0.2s ease,
+  border-color 0.2s ease
+;
+
+@categoryResultBackground: @white;
+@categoryResultLeftBorder: 1px solid @borderColor;
+@categoryResultDivider: 1px solid @borderColor;
+@categoryResultLastDivider: none;
+@categoryResultTransition: @categoryTransition;
 
+@categoryNameBackground: @darkWhite;
 @categoryNameFont: @pageFont;
 @categoryNameFontSize: 0.9em;
 @categoryNameFloat: left;
-@categoryNamePadding: 0.4em 0em 0em 1em;
+@categoryNamePadding: 0.4em 1em;
 @categoryNameFontWeight: bold;
 @categoryNameColor: @lightTextColor;
-
-@categoryResultBackground: #FFFFFF;
 @categoryNameWidth: 100px;
-@categoryResultLeftBorder: 1px solid rgba(0, 0, 0, 0.1);
-@categoryResultTopBorder: 1px solid rgba(0, 0, 0, 0.1);
 
 /* Sizes */
 @medium: 1em;