From 3e8326b91291e7a8c987624f15cc1d42ba56607a Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 23 Apr 2014 19:11:33 -0400 Subject: [PATCH] Adds animation support to search, adds less variables to search, fixes some issues with sticky on reposition --- src/definitions/modules/popup.js | 9 +- src/definitions/modules/search.js | 42 ++- src/definitions/modules/search.less | 276 +++++++++--------- src/definitions/modules/sticky.js | 58 +++- src/definitions/modules/sticky.less | 48 ++- .../packages/default/modules/search.overrides | 0 .../packages/default/modules/search.variables | 10 +- 7 files changed, 266 insertions(+), 177 deletions(-) mode change 100644 => 100755 src/themes/packages/default/modules/search.overrides mode change 100644 => 100755 src/themes/packages/default/modules/search.variables diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index da7405212..29a32269d 100755 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -87,6 +87,9 @@ $.fn.popup = function(parameters) { $window .on('resize' + eventNamespace, module.event.resize) ; + if( !module.exists() ) { + module.create(); + } module.instantiate(); }, @@ -192,7 +195,7 @@ $.fn.popup = function(parameters) { $.proxy(settings.onCreate, $popup)(); } else { - module.error(error.content); + module.error(error.content, element); } }, @@ -823,13 +826,13 @@ $.fn.popup.settings = { context : 'body', position : 'top center', delay : { - show : 300, + show : 50, hide : 150 }, inline : false, preserve : false, - duration : 250, + duration : 200, easing : 'easeOutQuint', transition : 'scale', diff --git a/src/definitions/modules/search.js b/src/definitions/modules/search.js index adb3191c8..ac182f774 100755 --- a/src/definitions/modules/search.js +++ b/src/definitions/modules/search.js @@ -347,14 +347,12 @@ $.fn.search = function(parameters) { 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(error.noTemplate, false); } - } } else { html = module.message(error.noResults, 'empty'); @@ -372,19 +370,37 @@ $.fn.search = function(parameters) { }, show: function() { if( ($results.filter(':visible').size() === 0) && ($prompt.filter(':focus').size() > 0) && $results.html() !== '') { - $results - .stop() - .fadeIn(200) - ; + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.debug('Showing results with css animations'); + $results + .transition(settings.transition + ' in', settings.duration) + ; + } + else { + module.debug('Showing results with javascript'); + $results + .stop() + .fadeIn(settings.duration, settings.easing) + ; + } $.proxy(settings.onResultsOpen, $results)(); } }, hide: function() { if($results.filter(':visible').size() > 0) { - $results - .stop() - .fadeOut(200) - ; + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.debug('Hiding results with css animations'); + $results + .transition(settings.transition + ' out', settings.duration) + ; + } + else { + module.debug('Hiding results with javascript'); + $results + .stop() + .fadeIn(settings.duration, settings.easing) + ; + } $.proxy(settings.onResultsClose, $results)(); } }, @@ -622,7 +638,7 @@ $.fn.search.settings = { automatic : 'true', type : 'simple', - hideDelay : 600, + hideDelay : 300, minCharacters : 3, searchThrottle : 300, maxResults : 7, @@ -633,6 +649,10 @@ $.fn.search.settings = { 'description' ], + transition : 'scale', + duration : 300, + easing : 'easeOutExpo', + // api config apiSettings: false, diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index d4b249512..0513f73eb 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -9,6 +9,15 @@ * */ +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'search'; + +@import '../../semantic.config'; + /******************************* Search *******************************/ @@ -22,27 +31,15 @@ } .ui.search input { - -webkit-border-radius: 500rem; - -moz-border-radius: 500rem; - border-radius: 500rem; + border-radius: @promptBorderRadius; } /*-------------- - Button + Icon ---------------*/ -.ui.search > .button { - position: relative; - z-index: 2; - float: right; - margin: 0px 0px 0px -15px; - padding: 6px 15px 7px; - -webkit-border-radius: 0px 15px 15px 0px; - -moz-border-radius: 0px 15px 15px 0px; - border-radius: 0px 15px 15px 0px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.ui.search .prompt ~ .search.icon { + cursor: pointer; } /*-------------- @@ -53,78 +50,71 @@ display: none; position: absolute; - z-index: 999; + z-index: 998; top: 100%; - left: 0px; + left: 0%; overflow: hidden; - background-color: #FFFFFF; - - margin-top: 0.5em; - width: 380px; - font-size: 0.875em; - line-height: 1.2; - color: #555555; - - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - - -webkit-box-shadow: - 0px 0px 1px 1px rgba(0, 0, 0, 0.1), - 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset - ; - -moz-box-shadow: - 0px 0px 1px 1px rgba(0, 0, 0, 0.1), - 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset - ; - box-shadow: - 0px 0px 1px 1px rgba(0, 0, 0, 0.1), - 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset - ; + background: @resultsBackground; + + margin-top: @resultsDistance; + width: @resultsWidth; + + border-radius: @resultsBorderRadius; + box-shadow: @resultsBoxShadow; } + +/*-------------- + Result +---------------*/ + .ui.search .result { + font-family: @pageFont; cursor: pointer; overflow: hidden; - padding: 0.5em 1em; + font-size: @resultFontSize; + padding: @resultVerticalPadding @resultHorizontalPadding; + color: @resultTextColor; + line-height: @resultLineHeight; } .ui.search .result:first-child { border-top: none; } + +/* Image */ .ui.search .result .image { - background: #F0F0F0; - margin-right: 10px; - float: left; + float: @resultImageFloat; overflow: hidden; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - height: 30px; + background: @resultImageBackground; + width: @resultImageWidth; + height: @resultImageHeight; + border-radius: @resultImageBorderRadius; } .ui.search .result .image img { display: block; - width: 73px; - height: 30px; -} -.ui.search .result .image ~ .info { - float: none; - margin-left: 80px; + width: auto; + height: 100%; } -.ui.search .result .info { - float: left; +/*-------------- + Info +---------------*/ + +.ui.search .result .image + .content { + margin: @resultImageMargin; } + .ui.search .result .title { - font-weight: bold; - color: rgba(0, 0, 0, 0.8); + font-family: @resultTitleFont; + font-weight: @resultTitleFontWeight; + color: @resultTitleColor; } .ui.search .result .description { - color: rgba(0, 0, 0, 0.6); + color: @resultDescriptionColor; } .ui.search .result .price { - float: right; - color: #5BBD72; - font-weight: bold; + float: @resultPriceFloat; + color: @resultPriceColor; } /*-------------- @@ -132,70 +122,34 @@ ---------------*/ .ui.search .message { - padding: 1em; -} -.ui.search .message .text .title { - margin: 0em 0em 0.5rem; - - font-size: 1.25rem; - font-weight: bold; - color: rgba(0, 0, 0, 0.8); -} -.ui.search .message .text .description { - margin: 0em; - font-size: 1rem; - color: rgba(0, 0, 0, 0.5); -} - - -/*-------------- - Categories ----------------*/ - -.ui.search .results .category { - background-color: #FAFAFA; - - border-top: 1px solid rgba(0, 0, 0, 0.1); - - -webkit-transition: background 0.2s ease-in; - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; - -ms-transition: background 0.2s ease-in; - transition: background 0.2s ease-in; -} -.ui.search .results .category:first-child { - border-top: none; + padding: @messageVerticalPadding @messageHorizontalPadding; } - -.ui.search .results .category > .name { - float: left; - padding: 12px 0px 0px 8px; - font-weight: bold; - color: #777777; - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); +.ui.search .message .header { + font-family: @headerFont; + font-size: @messageHeaderFontSize; + font-weight: @messageHeaderFontWeight; + color: @messageHeaderColor; } -.ui.search .results .category .result { - background-color: #FFFFFF; - margin-left: 80px; - border-left: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid rgba(0, 0, 0, 0.1); +.ui.search .message .description { + margin-top: @messageDescriptionDistance; + font-size: @messageDescriptionFontSize; + color: @messageDescriptionColor; } /* View All Results */ .ui.search .all { display: block; - - border-top: 1px solid rgba(0, 0, 0, 0.1); - background-color: #FAFAFA; - height: 2em; - line-height: 2em; - color: rgba(0, 0, 0, 0.6); - - font-weight: bold; - text-align: center; + border-top: @allResultsBorder; + background-color: @allResultsBackground; + height: @allResultsHeight; + line-height: @allResultsHeight; + color: @allResultsColor; + font-weight: @allResultsFontWeight; + text-align: @allResultsAlign; } + /******************************* States *******************************/ @@ -205,11 +159,11 @@ ---------------*/ .ui.search .result:hover, -.ui.search .category .result:hover { - background-color: #F8F8F8; +.ui.search .results .category .result:hover { + background: @resultHoverBackground; } .ui.search .all:hover { - background-color: #F0F0F0; + background: @allResultsHoverBackground; } /*-------------- @@ -217,7 +171,7 @@ ---------------*/ .ui.search.loading .input .icon { - background: url(../../themes/packages/default/assets/images/loader-mini.gif) no-repeat 50% 50%; + background: url(@loaderPath) no-repeat 50% 50%; } .ui.search.loading .input .icon:before, .ui.search.loading .input .icon:after { @@ -230,44 +184,82 @@ ---------------*/ .ui.search .results .category.active { - background-color: #F1F1F1; + background-color: @categoryActiveBackground; } .ui.search .results .category.active > .name { - color: #333333; + color: @categoryNameActiveColor; } .ui.search .result.active, -.ui.search .category .result.active { - background-color: #FBFBFB; +.ui.search .results .category .result.active { + border-left-color: @resultActiveBorderLeft; + background-color: @resultActiveBackground; + box-shadow: @resultActiveBoxShadow; } .ui.search .result.active .title { - color: #000000; + color: @resultActiveTitleColor; } .ui.search .result.active .description { - color: #555555; + color: @resultActiveDescriptionColor; } - - /******************************* - Variations + Types *******************************/ +/*------------------- + Left / Right +--------------------*/ -/* Large */ -.ui.search .large.result .image, -.ui.search .large.result .image img { - width: 50px; - height: 50px; +.ui.right.aligned.search .results { + right: 0%; + left: auto; } -.ui.search .large.results .indented.info { - margin-left: 65px; + +/*-------------- + Categories +---------------*/ + +.ui.search .results .category { + background: @categoryBackground; + box-shadow: @categoryBoxShadow; } -.ui.search .large.results .info .title { - font-size: 16px; +.ui.search .results .category, +.ui.search .results .category .result { + position: relative; + transition: @categoryResultTransition; } -.ui.search .large.results .info .description { - font-size: 11px; +.ui.search .results .category:first-child { + box-shadow: none; +} + +.ui.search .results .category > .name { + font-family: @categoryNameFont; + 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 +*******************************/ + +.ui.search { + font-size: @medium; +} + +.ui.large.search { + font-size: @large; } +.loadUIOverrides(); \ No newline at end of file diff --git a/src/definitions/modules/sticky.js b/src/definitions/modules/sticky.js index 081452af3..4dc297b9d 100755 --- a/src/definitions/modules/sticky.js +++ b/src/definitions/modules/sticky.js @@ -71,13 +71,17 @@ $.fn.sticky = function(parameters) { return; } - module.verbose('Initializing sticky', settings, $container); + if(module.supports.sticky()) { + // needs to enable native ios support + } $window .on('resize' + eventNamespace, module.event.resize) .on('scroll' + eventNamespace, module.event.scroll) ; + module.verbose('Initializing sticky', settings, $container); + module.save.positions(); module.instantiate(); @@ -117,11 +121,24 @@ $.fn.sticky = function(parameters) { refresh: function(hardRefresh) { module.reset(); - module.save.positions(); - $.proxy(settings.onReposition, element)(); if(hardRefresh) { $container = $module.offsetParent(); } + module.save.positions(); + $.proxy(settings.onReposition, element)(); + }, + + supports: { + sticky: function() { + var + $element = $('
'), + element = $element.get() + ; + $element + .addClass(className.supported) + ; + return($element.css('position').match('sticky')); + } }, save: { @@ -213,9 +230,13 @@ $.fn.sticky = function(parameters) { set: { containerSize: function() { - if($container.get(0).tagName === 'HTML') { + var + tagName = $container.get(0).tagName + ; + if(tagName === 'HTML' || tagName == 'body') { if($module.is(':visible')) { - module.error(error.container, $container.get(0).tagName, $module); + module.error(error.container, tagName, $module); + $container = $module.offsetParent(); } } else { @@ -264,21 +285,24 @@ $.fn.sticky = function(parameters) { currentOffset = module.get.currentOffset(), newOffset = module.get.newOffset(scrollTop), elementPassed = (screen.bottom > element.top + element.height), - bottomEdge = (cache.element.height + screen.top) + fixedBottom = (cache.element.height + screen.top) ; + module.save.scroll(scrollTop); + if( module.is.fixed() ) { if(fits) { - // exit top of container + // if module is fixed top if(module.is.top()) { if( screen.top < element.top ) { module.unfix(); } - else if( bottomEdge > context.bottom ) { + else if( fixedBottom > context.bottom ) { module.debug('Top attached rail has reached bottom of container'); module.bindBottom(); } } + // if module is fixed bottom if(module.is.bottom() ) { // top edge if( (screen.bottom - element.height) < element.top) { @@ -290,7 +314,7 @@ $.fn.sticky = function(parameters) { module.bindBottom(); } } - if( bottomEdge > context.bottom ) { + if( fixedBottom > context.bottom ) { module.bindBottom(); } } @@ -334,6 +358,10 @@ $.fn.sticky = function(parameters) { } } else { + // determine if needs to be bound + if(screen.top + element.height > context.bottom) { + module.bindBottom(); + } if(fits) { // fix to bottom of screen on way back up if(module.is.bottom() ) { @@ -348,7 +376,7 @@ $.fn.sticky = function(parameters) { } } } - else if(screen.top > element.top && screen.top < context.bottom - element.height) { + else if(screen.top >= element.top && screen.top < context.bottom - element.height) { module.stickTop(); } } @@ -357,7 +385,6 @@ $.fn.sticky = function(parameters) { module.stickBottom(); } } - } }, @@ -642,10 +669,11 @@ $.fn.sticky.settings = { }, className : { - bound : 'bound', - fixed : 'fixed', - top : 'top', - bottom : 'bottom' + bound : 'bound', + fixed : 'fixed', + supported : 'native', + top : 'top', + bottom : 'bottom' } }; diff --git a/src/definitions/modules/sticky.less b/src/definitions/modules/sticky.less index ffd31ec37..1816f2cf2 100755 --- a/src/definitions/modules/sticky.less +++ b/src/definitions/modules/sticky.less @@ -1,17 +1,50 @@ + /* + * # Semantic - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'sticky'; + +@import '../../semantic.config'; + +/******************************* + Sticky +*******************************/ + .ui.sticky { position: static; } +/******************************* + States +*******************************/ + +/* Bound */ .ui.sticky.bound { position: absolute; left: auto; right: auto; } + +/* Fixed */ .ui.sticky.fixed { position: fixed; left: auto; right: auto; } + +/* Bound/Fixed Position */ .ui.sticky.bound.top, .ui.sticky.fixed.top { top: 0px; @@ -21,4 +54,17 @@ .ui.sticky.fixed.bottom { top: auto; bottom: 0px; -} \ No newline at end of file +} + + +/******************************* + Types +*******************************/ + +.ui.native.sticky { + position: -webkit-sticky; + position: -moz-sticky; + position: -ms-sticky; + position: -o-sticky; + position: sticky; +} diff --git a/src/themes/packages/default/modules/search.overrides b/src/themes/packages/default/modules/search.overrides old mode 100644 new mode 100755 diff --git a/src/themes/packages/default/modules/search.variables b/src/themes/packages/default/modules/search.variables old mode 100644 new mode 100755 index ec7c448c8..a0cf5ac2b --- a/src/themes/packages/default/modules/search.variables +++ b/src/themes/packages/default/modules/search.variables @@ -37,10 +37,10 @@ /* Special Message */ @messageVerticalPadding: 1em; @messageHorizontalPadding: 1em; -@messageTitleFontSize: 1.25em; -@messageTitleFontWeight: bold; -@messageTitleColor: @textColor; -@messageDescriptionDistance: 0.5rem; +@messageHeaderFontSize: 1.2em; +@messageHeaderFontWeight: bold; +@messageHeaderColor: @textColor; +@messageDescriptionDistance: 0.25rem; @messageDescriptionFontSize: 1rem; @messageDescriptionColor: @textColor; @@ -88,7 +88,7 @@ @categoryNameFont: @pageFont; @categoryNameFontSize: 0.9em; @categoryNameFloat: left; -@categoryNamePadding: 0.5em 0em 0em 1em; +@categoryNamePadding: 0.4em 0em 0em 1em; @categoryNameFontWeight: bold; @categoryNameColor: @lightTextColor;