diff --git a/src/definitions/globals/site.js b/src/definitions/globals/site.js index 00bb4943f..0475e6fa8 100644 --- a/src/definitions/globals/site.js +++ b/src/definitions/globals/site.js @@ -448,6 +448,7 @@ $.site.settings = { 'modal', 'nag', 'popup', + 'range', 'rating', 'shape', 'sidebar', diff --git a/src/definitions/modules/range.js b/src/definitions/modules/range.js new file mode 100644 index 000000000..f5e372c41 --- /dev/null +++ b/src/definitions/modules/range.js @@ -0,0 +1,233 @@ +/*! + * # Range slider for Semantic UI. + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.range = function(parameters) { + + var + $allModules = $(this), + + offset = 10, + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1) + ; + + $allModules + .each(function() { + + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.range.settings, parameters) + : $.extend({}, $.fn.range.settings), + + namespace = settings.namespace, + min = settings.min, + max = settings.max, + step = settings.step, + start = settings.start, + input = settings.input, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + + element = this, + instance = $module.data(moduleNamespace), + + inner, + thumb, + trackLeft, + precision, + + module + ; + + module = { + + initialize: function() { + module.instantiate(); + }, + + instantiate: function() { + instance = module; + $module + .data(moduleNamespace, module) + ; + $(element).html("
"); + inner = $(element).children('.inner')[0]; + thumb = $(element).find('.thumb')[0]; + trackLeft = $(element).find('.track-fill')[0]; + // find precision of step, used in calculating the value + module.determinePrecision(); + // set start location + module.setValuePosition(settings.start); + // event listeners + $(element).find('.track, .thumb, .inner').on('mousedown', function(event) { + event.stopImmediatePropagation(); + event.preventDefault(); + $(this).closest(".range").trigger('mousedown', event); + }); + $(element).find('.track, .thumb, .inner').on('touchstart', function(event) { + event.stopImmediatePropagation(); + event.preventDefault(); + $(this).closest(".range").trigger('touchstart', event); + }); + $(element).on('mousedown', function(event, originalEvent) { + module.rangeMousedown(event, false, originalEvent); + }); + $(element).on('touchstart', function(event, originalEvent) { + module.rangeMousedown(event, true, originalEvent); + }); + }, + + determinePrecision: function() { + var split = String(settings.step).split('.'); + var decimalPlaces; + if(split.length == 2) { + decimalPlaces = split[1].length; + } else { + decimalPlaces = 0; + } + precision = Math.pow(10, decimalPlaces); + }, + + determineValue: function(startPos, endPos, currentPos) { + var ratio = (currentPos - startPos) / (endPos - startPos); + var range = settings.max - settings.min; + var difference = Math.round(ratio * range / step) * step; + // Use precision to avoid ugly Javascript floating point rounding issues + // (like 35 * .01 = 0.35000000000000003) + difference = Math.round(difference * precision) / precision; + return difference + settings.min; + }, + + determinePosition: function(value) { + var ratio = (value - settings.min) / (settings.max - settings.min); + return Math.round(ratio * $(inner).width()) + $(trackLeft).position().left - offset; + }, + + setValue: function(newValue) { + if(settings.input) { + $(settings.input).val(newValue); + } + if(settings.onChange) { + settings.onChange(newValue); + } + }, + + setPosition: function(value) { + $(thumb).css({left: String(value) + 'px'}); + $(trackLeft).css({width: String(value + offset) + 'px'}); + }, + + rangeMousedown: function(mdEvent, isTouch, originalEvent) { + if( !$(element).hasClass('disabled') ) { + mdEvent.preventDefault(); + var left = $(inner).offset().left; + var right = left + $(inner).width(); + var pageX; + if(isTouch) { + pageX = originalEvent.originalEvent.touches[0].pageX; + } else { + pageX = (typeof mdEvent.pageX != 'undefined') ? mdEvent.pageX : originalEvent.pageX; + } + var value = module.determineValue(left, right, pageX); + if(pageX >= left && pageX <= right) { + module.setPosition(pageX - left - offset); + module.setValue(value); + } + var rangeMousemove = function(mmEvent) { + mmEvent.preventDefault(); + if(isTouch) { + pageX = mmEvent.originalEvent.touches[0].pageX; + } else { + pageX = mmEvent.pageX; + } + value = module.determineValue(left, right, pageX); + if(pageX >= left && pageX <= right) { + if(value >= settings.min && value <= settings.max) { + module.setPosition(pageX - left - offset); + module.setValue(value); + } + } + } + var rangeMouseup = function(muEvent) { + if(isTouch) { + $(document).off('touchmove', rangeMousemove); + $(document).off('touchend', rangeMouseup); + } else { + $(document).off('mousemove', rangeMousemove); + $(document).off('mouseup', rangeMouseup); + } + } + if(isTouch) { + $(document).on('touchmove', rangeMousemove); + $(document).on('touchend', rangeMouseup); + } + else { + $(document).on('mousemove', rangeMousemove); + $(document).on('mouseup', rangeMouseup); + } + } + }, + + setValuePosition: function(val) { + var position = module.determinePosition(val); + module.setPosition(position); + module.setValue(val); + }, + + invoke: function(query) { + switch(query) { + case 'set value': + if(queryArguments.length > 0) { + instance.setValuePosition(queryArguments[0]); + } + break; + } + }, + + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + module.initialize(); + } + + }) + ; + + return this; + +}; + +$.fn.range.settings = { + + name : 'Range', + namespace : 'range', + + min : 0, + max : false, + step : 1, + start : 0, + input : false, + + onChange : function(value){}, + +}; + + +})( jQuery, window, document ); diff --git a/src/definitions/modules/range.less b/src/definitions/modules/range.less new file mode 100644 index 000000000..89291b0f2 --- /dev/null +++ b/src/definitions/modules/range.less @@ -0,0 +1,256 @@ + /******************************* + Theme + *******************************/ + + @type : 'module'; + @element : 'range'; + + @import (multiple) '../../theme.config'; + +.ui.range { + width: 100%; + height: @height; +} + +.ui.range .inner { + margin: 0 10px 0 10px; + height: @height; + position: relative; +} + +.ui.range .inner:hover { + cursor: @hoverPointer; +} + +.ui.range .inner .track { + position: absolute; + width: 100%; + height: @trackHeight; + border-radius: @trackBorderRadius; + top: @trackPositionTop; + left: 0; + background-color: @trackColor; +} + +.ui.range .inner .track-fill { + position: absolute; + width: 0; + height: @trackFillHeight; + border-radius: @trackFillBorderRadius; + top: @trackPositionTop; + left: 0; + background-color: @trackFillColor; +} + +.ui.range .inner .thumb { + position: absolute; + top: 0; + left: 0; + height: @thumbHeight; + width: @thumbHeight; + background: @thumbBackground; + border-radius: @thumbBorderRadius; + box-shadow: @thumbShadow; + transition: @thumbTransition; +} + +.ui.range .inner .thumb:hover { + pointer: @thumbHoverPointer; + background: @thumbHoverBackground; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Disabled +---------------*/ + +.ui.range.disabled { + opacity: @disabledOpactiy; +} + +.ui.range.disabled .inner:hover { + cursor: auto; +} + +.ui.range.disabled .inner .track-fill { + background: @disabledTrackFillColor; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.range .inner .track-fill { + background-color: @lightBlack; +} + +.ui.inverted.range .inner .track { + background-color: @transparentWhite; +} + +/*-------------- + Colors +---------------*/ + +/* Red */ +.ui.red.range .inner .track-fill { + background-color: @red; +} +.ui.red.inverted.range .inner .track-fill { + background-color: @lightRed; +} + +/* Orange */ +.ui.orange.range .inner .track-fill { + background-color: @orange; +} +.ui.orange.inverted.range .inner .track-fill { + background-color: @lightOrange; +} + +/* Yellow */ +.ui.yellow.range .inner .track-fill { + background-color: @yellow; +} +.ui.yellow.inverted.range .inner .track-fill { + background-color: @lightYellow; +} + +/* Olive */ +.ui.olive.range .inner .track-fill { + background-color: @olive; +} +.ui.olive.inverted.range .inner .track-fill { + background-color: @lightOlive; +} + +/* Green */ +.ui.green.range .inner .track-fill { + background-color: @green; +} +.ui.green.inverted.range .inner .track-fill { + background-color: @lightGreen; +} + +/* Teal */ +.ui.teal.range .inner .track-fill { + background-color: @teal; +} +.ui.teal.inverted.range .inner .track-fill { + background-color: @lightTeal; +} + +/* Blue */ +.ui.blue.range .inner .track-fill { + background-color: @blue; +} +.ui.blue.inverted.range .inner .track-fill { + background-color: @lightBlue; +} + +/* Violet */ +.ui.violet.range .inner .track-fill { + background-color: @violet; +} +.ui.violet.inverted.range .inner .track-fill { + background-color: @lightViolet; +} + +/* Purple */ +.ui.purple.range .inner .track-fill { + background-color: @purple; +} +.ui.purple.inverted.range .inner .track-fill { + background-color: @lightPurple; +} + +/* Pink */ +.ui.pink.range .inner .track-fill { + background-color: @pink; +} +.ui.pink.inverted.range .inner .track-fill { + background-color: @lightPink; +} + +/* Brown */ +.ui.brown.range .inner .track-fill { + background-color: @brown; +} +.ui.brown.inverted.range .inner .track-fill { + background-color: @lightBrown; +} + +/* Grey */ +.ui.grey.range .inner .track-fill { + background-color: @grey; +} +.ui.grey.inverted.range .inner .track-fill { + background-color: @lightGrey; +} + +/* Black */ +.ui.black.range .inner .track-fill { + background-color: @black; +} +.ui.black.inverted.range .inner .track-fill { + background-color: @lightBlack; +} + +/*-------------- + Sizing +---------------*/ + +/* Small */ +.ui.range.small { + height: @smallHeight; +} +.ui.range.small .inner .thumb { + height: @smallHeight; + width: @smallHeight; +} +.ui.range.small .inner .track, +.ui.range.small .inner .track-fill { + height: @smallTrackHeight; + top: @trackPositionTopSmall; +} + +/* Large */ +.ui.range.large { + height: @largeHeight; +} +.ui.range.large .inner .thumb { + height: @largeHeight; + width: @largeHeight; +} +.ui.range.large .inner .track, +.ui.range.large .inner .track-fill { + height: @largeTrackHeight; + top: @trackPositionTopLarge; +} + +/* Big */ +.ui.range.big { + height: @bigHeight; +} +.ui.range.big .inner .thumb { + height: @bigHeight; + width: @bigHeight; +} +.ui.range.big .inner .track, +.ui.range.big .inner .track-fill { + height: @bigTrackHeight; + top: @trackPositionTopBig; +} + +.loadUIOverrides(); diff --git a/src/semantic.less b/src/semantic.less index c64647442..64e85817e 100644 --- a/src/semantic.less +++ b/src/semantic.less @@ -57,6 +57,7 @@ & { @import "definitions/modules/nag"; } & { @import "definitions/modules/popup"; } & { @import "definitions/modules/progress"; } +& { @import "definitions/modules/range"; } & { @import "definitions/modules/rating"; } & { @import "definitions/modules/search"; } & { @import "definitions/modules/shape"; } diff --git a/src/theme.config.example b/src/theme.config.example index dfd75efee..d61d31894 100644 --- a/src/theme.config.example +++ b/src/theme.config.example @@ -56,6 +56,7 @@ @nag : 'default'; @popup : 'default'; @progress : 'default'; +@range : 'default'; @rating : 'default'; @search : 'default'; @shape : 'default'; @@ -89,4 +90,4 @@ @import "theme.less"; -/* End Config */ \ No newline at end of file +/* End Config */ diff --git a/src/themes/default/modules/range.overrides b/src/themes/default/modules/range.overrides new file mode 100644 index 000000000..294658ec6 --- /dev/null +++ b/src/themes/default/modules/range.overrides @@ -0,0 +1,3 @@ +/******************************* + Range Overrides +*******************************/ diff --git a/src/themes/default/modules/range.variables b/src/themes/default/modules/range.variables new file mode 100644 index 000000000..2bb49a43f --- /dev/null +++ b/src/themes/default/modules/range.variables @@ -0,0 +1,59 @@ +/******************************* + Range Variables +*******************************/ + +/*------------------- + Element +--------------------*/ + +@height : 1.5em; +@hoverPointer : auto; + +/* Track */ +@trackHeight : .4em; +@trackPositionTop : (@height / 2) - (@trackHeight / 2); +@background : #ccc; +@trackBorderRadius : 4px; +@trackColor : @transparentBlack; + +/* Track Fill */ +@trackFillHeight : @trackHeight; +@trackFillColor : @black; +@trackFillBorderRadius : @trackBorderRadius; + +/* Thumb */ +@thumbHeight : @height; +@thumbBorderRadius : 100%; +@thumbBackground : @white @subtleGradient; +@thumbShadow : @subtleShadow, 0 0 0 1px @borderColor inset; +@thumbTransitionDuration : 0.3s; +@thumbTransition : background @thumbTransitionDuration @defaultEasing; + +/* Thumb Hover */ +@thumbHoverPointer : pointer; +@thumbHoverBackground : @whiteHover @subtleGradient; + +/*------------------- + States +--------------------*/ + +/* Disabled */ +@disabledOpactiy : .5; +@disabledTrackFillColor : @background; + +/*------------------- + Variations +--------------------*/ + +/* Sizing */ +@smallHeight : 1em; +@smallTrackHeight : 0.3em; +@trackPositionTopSmall : (@smallHeight / 2) - (@smallTrackHeight / 2); + +@largeHeight : 2em; +@largeTrackHeight : 0.5em; +@trackPositionTopLarge : (@largeHeight / 2) - (@largeTrackHeight / 2); + +@bigHeight : 2.5em; +@bigTrackHeight : 0.6em; +@trackPositionTopBig : (@bigHeight / 2) - (@bigTrackHeight / 2); diff --git a/tasks/config/admin/release.js b/tasks/config/admin/release.js index 94ee73611..79240138a 100644 --- a/tasks/config/admin/release.js +++ b/tasks/config/admin/release.js @@ -91,6 +91,7 @@ module.exports = { 'nag', 'popup', 'progress', + 'range', 'rail', 'rating', 'reset', diff --git a/tasks/config/defaults.js b/tasks/config/defaults.js index 2c0e9ebfb..115009c8c 100644 --- a/tasks/config/defaults.js +++ b/tasks/config/defaults.js @@ -90,6 +90,7 @@ module.exports = { 'nag', 'popup', 'progress', + 'range', 'rating', 'search', 'shape', diff --git a/tasks/config/project/install.js b/tasks/config/project/install.js index 205536518..4e8635b6a 100644 --- a/tasks/config/project/install.js +++ b/tasks/config/project/install.js @@ -397,6 +397,7 @@ module.exports = { { name: "nag", checked: true }, { name: "popup", checked: true }, { name: "progress", checked: true }, + { name: "range", checked: true }, { name: "rating", checked: true }, { name: "search", checked: true }, { name: "shape", checked: true },