diff --git a/src/definitions/behaviors/api.js b/src/definitions/behaviors/api.js index 732c2ba46..5ccc7043b 100644 --- a/src/definitions/behaviors/api.js +++ b/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; } } diff --git a/src/definitions/modules/search.js b/src/definitions/modules/search.js index 2ff4b33f9..e0b23f35a 100644 --- a/src/definitions/modules/search.js +++ b/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 += '
'; - html += ''; + if(result.url) { + html += ''; + } if(result.image !== undefined) { result.image = escape(result.image); html += '' @@ -787,10 +814,10 @@ $.fn.search.settings = { ; } }); - if(response.resultPage) { + if(response.action) { html += '' - + '' - + response.resultPage.text + + '' + + response.action.text + ''; } return html; @@ -805,7 +832,9 @@ $.fn.search.settings = { // each result $.each(response.results, function(index, result) { - html += ''; + if(result.url) { + html += ''; + } if(result.image !== undefined) { html += '' + '
' @@ -825,8 +854,10 @@ $.fn.search.settings = { } html += '' + '
' - + '' ; + if(results.url) { + html += ''; + } }); if(response.resultPage) { diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index e6f52b6dc..7faf0a924 100755 --- a/src/definitions/modules/search.less +++ b/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 diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables index f116a20f7..6dec3b2fd 100644 --- a/src/themes/default/modules/search.variables +++ b/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;