Browse Source
added in range component from https://github.com/tyleryasaka/semantic-ui-range. Also added size varient.
pull/4212/head
added in range component from https://github.com/tyleryasaka/semantic-ui-range. Also added size varient.
pull/4212/head
Gareth Daunton
8 years ago
10 changed files with 558 additions and 1 deletions
Split View
Diff Options
-
1src/definitions/globals/site.js
-
233src/definitions/modules/range.js
-
256src/definitions/modules/range.less
-
1src/semantic.less
-
3src/theme.config.example
-
3src/themes/default/modules/range.overrides
-
59src/themes/default/modules/range.variables
-
1tasks/config/admin/release.js
-
1tasks/config/defaults.js
-
1tasks/config/project/install.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("<div class='inner'><div class='track'></div><div class='track-fill'></div><div class='thumb'></div></div>"); |
|||
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 ); |
|||
@ -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(); |
|||
@ -0,0 +1,3 @@ |
|||
/******************************* |
|||
Range Overrides |
|||
*******************************/ |
|||
@ -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); |
|||
Write
Preview
Loading…
Cancel
Save