diff options
Diffstat (limited to 'www/lib/angular-awesome-slider/src')
65 files changed, 4778 insertions, 0 deletions
diff --git a/www/lib/angular-awesome-slider/src/core/config/constants.js b/www/lib/angular-awesome-slider/src/core/config/constants.js new file mode 100644 index 00000000..ed032d4d --- /dev/null +++ b/www/lib/angular-awesome-slider/src/core/config/constants.js @@ -0,0 +1,32 @@ +(function(angular){ + 'use strict'; + angular.module('angularAwesomeSlider').constant('sliderConstants', { + SLIDER: { + settings: { + from: 1, + to: 40, + step: 1, + smooth: true, + limits: false, + round: false, + value: "3", + dimension: "", + vertical: false, + calculate: false, + onstatechange: false, + callback: false, + realtime: false + }, + className: "jslider", + selector: ".jslider-", + css: { + visible : { visibility: "visible" }, + hidden : { visibility: "hidden" } + } + }, + EVENTS: { + + } + }); + +}(angular)); diff --git a/www/lib/angular-awesome-slider/src/core/index.js b/www/lib/angular-awesome-slider/src/core/index.js new file mode 100644 index 00000000..75ca7888 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/core/index.js @@ -0,0 +1,184 @@ +(function (angular) { + 'use strict'; + + angular.module('angularAwesomeSlider', []) + // DIRECTIVE + .directive('slider', [ + '$compile', '$templateCache','$timeout', '$window', 'slider', + function(compile, templateCache, timeout, win, Slider) { + return { + restrict : 'AE', + require: '?ngModel', + scope: { options:'=', ngDisabled: '='}, + priority: 1, + link : function(scope, element, attrs, ngModel) { + + if(!ngModel) return; + + if (!scope.options) + throw new Error('You must provide a value for "options" attribute.'); + + var injector = angular.injector(); + + // options as inline variable + if (angular.isString(scope.options)) { + scope.options = angular.toJson(scope.options); + } + + scope.mainSliderClass = 'jslider'; + scope.mainSliderClass += scope.options.skin ? ' jslider_' + scope.options.skin : ' '; + scope.mainSliderClass += scope.options.vertical ? ' vertical ' : ''; + scope.mainSliderClass += scope.options.css ? ' sliderCSS' : ''; + scope.mainSliderClass += scope.options.className ? ' ' + scope.options.className : ''; + + // handle limit labels visibility + scope.options.limits = angular.isDefined(scope.options.limits) ? scope.options.limits : true; + + // compile template + element.after(compile(templateCache.get('ng-slider/slider-bar.tmpl.html'))(scope, function(clonedElement, scope) { + scope.tmplElt = clonedElement; + })); + + // init + + var initialized = false; + + var init = function() { + scope.from = ''+scope.options.from; + scope.to = ''+scope.options.to; + if (scope.options.calculate && typeof scope.options.calculate === 'function') { + scope.from = scope.options.calculate(scope.from); + scope.to = scope.options.calculate(scope.to); + } + + var OPTIONS = { + from: !scope.options.round ? parseInt(scope.options.from, 10) : parseFloat(scope.options.from), + to: !scope.options.round ? parseInt(scope.options.to, 10) : parseFloat(scope.options.to), + step: scope.options.step, + smooth: scope.options.smooth, + limits: scope.options.limits, + round: scope.options.round || false, + value: ngModel.$viewValue, + dimension: "", + scale: scope.options.scale, + modelLabels: scope.options.modelLabels, + vertical: scope.options.vertical, + css: scope.options.css, + className: scope.options.className, + realtime: scope.options.realtime, + cb: forceApply, + threshold: scope.options.threshold, + heterogeneity: scope.options.heterogeneity + }; + + OPTIONS.calculate = scope.options.calculate || undefined; + OPTIONS.onstatechange = scope.options.onstatechange || undefined; + + // slider + scope.slider = !scope.slider ? slidering(element, scope.tmplElt, OPTIONS) : scope.slider.init(element, scope.tmplElt, OPTIONS); + + if (!initialized) { + initListener(); + } + + // scale + var scaleDiv = scope.tmplElt.find('div')[7]; + angular.element(scaleDiv).html(scope.slider.generateScale()); + scope.slider.drawScale(scaleDiv); + + if (scope.ngDisabled) { + disabler(scope.ngDisabled); + } + + initialized = true; + }; + + function initListener() { + // window resize listener + angular.element(win).bind('resize', function(event) { + scope.slider.onresize(); + }); + } + + // model -> view + ngModel.$render = function () { + //elm.html(ctrl.$viewValue); + var singleValue = false; + + if (!ngModel.$viewValue && ngModel.$viewValue !== 0) { + return; + } + + if (typeof(ngModel.$viewValue) === 'number') { + ngModel.$viewValue = ''+ngModel.$viewValue; + } + + if( !ngModel.$viewValue.split(";")[1]) { + scope.mainSliderClass += ' jslider-single'; + } + + if (scope.slider) { + var firstPtr = scope.slider.getPointers()[0]; + // reset to lowest value + firstPtr.set(scope.from, true); + if (ngModel.$viewValue.split(';')[1]) { + var secondPtr = scope.slider.getPointers()[1]; + // reset to biggest value + firstPtr.set(scope.to, true); + secondPtr.set(ngModel.$viewValue.split(';')[1], true); + } + firstPtr.set(ngModel.$viewValue.split(';')[0], true); + } + }; + + // view -> model + var forceApply = function(value, released) { + if (scope.disabled) + return; + scope.$apply(function() { + ngModel.$setViewValue(value); + }); + if (scope.options.callback){ + scope.options.callback(value, released); + } + }; + + // watch options + scope.$watch('options', function(value) { + timeout(function(){ + init(); + }); + }, scope.watchOptions || true); + + // disabling + var disabler = function(value) { + scope.disabled = value; + if (scope.slider) { + scope.tmplElt.toggleClass('disabled'); + scope.slider.disable(value); + } + }; + + scope.$watch('ngDisabled', function(value) { + disabler(value); + }); + + scope.limitValue = function(value) { + if (scope.options.modelLabels) { + if (angular.isFunction(scope.options.modelLabels)) { + return scope.options.modelLabels(value); + } + return scope.options.modelLabels[value] !== undefined ? scope.options.modelLabels[value] : value; + } + return value; + }; + + var slidering = function( inputElement, element, settings) { + return new Slider( inputElement, element, settings ); + }; + } + }; + }]) +.config(function() {}) +.run(function() {}); +})(angular); diff --git a/www/lib/angular-awesome-slider/src/core/model/draggable.factory.js b/www/lib/angular-awesome-slider/src/core/model/draggable.factory.js new file mode 100644 index 00000000..892b13a8 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/core/model/draggable.factory.js @@ -0,0 +1,183 @@ +(function(angular){ + 'use strict'; + + angular.module('angularAwesomeSlider').factory('sliderDraggable', ['sliderUtils', function(utils) { + + function Draggable(){ + this._init.apply( this, arguments ); + } + + Draggable.prototype.oninit = function(){ + }; + + Draggable.prototype.events = function(){ + }; + + Draggable.prototype.onmousedown = function(){ + this.ptr.css({ position: 'absolute' }); + }; + + Draggable.prototype.onmousemove = function( evt, x, y ){ + this.ptr.css({ left: x, top: y }); + }; + + Draggable.prototype.onmouseup = function(){}; + + Draggable.prototype.isDefault = { + drag: false, + clicked: false, + toclick: true, + mouseup: false + }; + + Draggable.prototype._init = function() { + if( arguments.length > 0 ){ + this.ptr = arguments[0]; + this.parent = arguments[2]; + + if (!this.ptr) + return; + //this.outer = $(".draggable-outer"); + + this.is = {}; + angular.extend( this.is, this.isDefault ); + var offset = utils.offset(this.ptr); + + this.d = { + left: offset.left, + top: offset.top, + width: this.ptr[0].clientWidth, + height: this.ptr[0].clientHeight + }; + + this.oninit.apply( this, arguments ); + + this._events(); + } + }; + + Draggable.prototype._getPageCoords = function( event ){ + if( event.targetTouches && event.targetTouches[0] ){ + return { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY }; + } else + return { x: event.pageX, y: event.pageY }; + }; + + Draggable.prototype._bindEvent = function( ptr, eventType, handler ){ + var self = this; + + // PS need to bind to touch and non-touch events for devices which support both + if( this.supportTouches_ ){ + ptr[0].addEventListener( this.events_[ eventType ].touch, handler, false ); + } + + ptr.bind( this.events_[ eventType ].nonTouch, handler ); + }; + + Draggable.prototype._events = function(){ + var self = this; + + this.supportTouches_ = 'ontouchend' in document; + this.events_ = { + 'click': { touch : 'touchstart', nonTouch : 'click' }, + 'down': { touch : 'touchstart', nonTouch : 'mousedown' }, + 'move': { touch : 'touchmove', nonTouch : 'mousemove' }, + 'up' : { touch : 'touchend', nonTouch: 'mouseup'}, + 'mousedown' : { touch : 'mousedown', nonTouch : 'mousedown' } + }; + + var documentElt = angular.element(window.document); + + this._bindEvent(documentElt, 'move', function(event) { + if(self.is.drag) { + event.stopPropagation(); + event.preventDefault(); + if (!self.parent.disabled) { + self._mousemove(event); + } + } + }); + this._bindEvent(documentElt, 'down', function(event) { + if(self.is.drag) { + event.stopPropagation(); + event.preventDefault(); + } + }); + this._bindEvent(documentElt, 'up', function(event) { + self._mouseup(event); + }); + + this._bindEvent( this.ptr, 'down', function(event) { + self._mousedown( event ); + return false; + }); + this._bindEvent( this.ptr, 'up', function(event) { + self._mouseup( event ); + }); + + // TODO see if needed + this.events(); + }; + + Draggable.prototype._mousedown = function( evt ){ + this.is.drag = true; + this.is.clicked = false; + this.is.mouseup = false; + + var coords = this._getPageCoords( evt ); + this.cx = coords.x - this.ptr[0].offsetLeft; + this.cy = coords.y - this.ptr[0].offsetTop; + + angular.extend(this.d, { + left: coords.x, + top: coords.y, + width: this.ptr[0].clientWidth, + height: this.ptr[0].clientHeight + }); + + if( this.outer && this.outer.get(0) ){ + this.outer.css({ height: Math.max(this.outer.height(), $(document.body).height()), overflow: 'hidden' }); + } + + this.onmousedown( evt ); + }; + + Draggable.prototype._mousemove = function( evt ){ + this.is.toclick = false; + var coords = this._getPageCoords( evt ); + this.onmousemove( evt, coords.x - this.cx, coords.y - this.cy ); + }; + + Draggable.prototype._mouseup = function( evt ){ + var oThis = this; + + if( this.is.drag ){ + this.is.drag = false; + + var browser = utils.browser(); + + if( this.outer && this.outer.get(0) ) { + + if( browser === 'mozilla' ){ + this.outer.css({ overflow: "hidden" }); + } else { + this.outer.css({ overflow: "visible" }); + } + + // TODO finish browser detection and this case, remove following line + this.outer.css({ height: "auto" }); + // if( browser === 'ie' && $.browser.version == '6.0' ){ + // this.outer.css({ height: "100%" }); + // } else { + // this.outer.css({ height: "auto" }); + // } + + } + + this.onmouseup( evt ); + } + }; + + return Draggable; + }]); +}(angular)); diff --git a/www/lib/angular-awesome-slider/src/core/model/pointer.factory.js b/www/lib/angular-awesome-slider/src/core/model/pointer.factory.js new file mode 100644 index 00000000..6b23c5f7 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/core/model/pointer.factory.js @@ -0,0 +1,100 @@ +(function(angular){ + 'use strict'; + + angular.module('angularAwesomeSlider').factory('sliderPointer', ['sliderDraggable', 'sliderUtils', function(Draggable, utils) { + + function SliderPointer() { + Draggable.apply(this, arguments); + } + + SliderPointer.prototype = new Draggable(); + + SliderPointer.prototype.oninit = function( ptr, id, vertical, _constructor ) { + this.uid = id; + this.parent = _constructor; + this.value = {}; + this.vertical = vertical; + this.settings = angular.copy(_constructor.settings); + this.threshold = this.settings.threshold; + }; + + SliderPointer.prototype.onmousedown = function( evt ) { + var off = utils.offset(this.parent.domNode); + + var offset = { + left: off.left, + top: off.top, + width: this.parent.domNode[0].clientWidth, + height: this.parent.domNode[0].clientHeight + }; + + this._parent = { + offset: offset, + width: offset.width, + height: offset.height + }; + + this.ptr.addClass('jslider-pointer-hover'); + }; + + SliderPointer.prototype.onmousemove = function( evt, x, y ){ + var coords = this._getPageCoords( evt ); + this._set(!this.vertical ? this.calc( coords.x ) : this.calc( coords.y )); + if( this.settings.realtime && this.settings.cb && angular.isFunction(this.settings.cb) ) + this.settings.cb.call( this.parent, this.parent.getValue(), !this.is.drag ); + }; + + SliderPointer.prototype.onmouseup = function(evt){ + if( this.settings.cb && angular.isFunction(this.settings.cb)) + this.settings.cb.call( this.parent, this.parent.getValue(), !this.is.drag ); + + if (!this.is.drag) + this.ptr.removeClass('jslider-pointer-hover'); + }; + + SliderPointer.prototype.limits = function( x ){ + return this.parent.limits(x, this); + }; + + SliderPointer.prototype.calc = function( coords ){ + return !this.vertical ? + this.limits(((coords-this._parent.offset.left)*100)/this._parent.width) + : + this.limits(((coords-this._parent.offset.top)*100)/this._parent.height); + }; + + SliderPointer.prototype.set = function( value, opt_origin ){ + this.value.origin = this.parent.round(value); + this._set(this.parent.valueToPrc(value,this), opt_origin); + }; + + SliderPointer.prototype._set = function( prc, opt_origin ){ + this.allowed = true; + + var oldOrigin = this.value.origin; + var oldPerc = this.value.prc; + + this.value.origin = this.parent.prcToValue(prc); + this.value.prc = prc; + + // check threshold + if (this.threshold && this.parent.o.pointers[1]) { + var v1 = this.value.origin, + v2 = this.parent.o.pointers[this.uid === 0 ? 1:0].value.origin; + this.allowed = Math.abs(v2 - v1) >= this.threshold; + if (!this.allowed && oldOrigin !== undefined && oldPerc !== undefined){ + this.value.origin = oldOrigin; + this.value.prc = oldPerc; + } + } + + if (!this.vertical) + this.ptr.css({left:this.value.prc+'%'}); + else + this.ptr.css({top:this.value.prc+'%', marginTop: -5}); + this.parent.redraw(this); + }; + + return SliderPointer; + }]); +}(angular)); diff --git a/www/lib/angular-awesome-slider/src/core/model/slider.factory.js b/www/lib/angular-awesome-slider/src/core/model/slider.factory.js new file mode 100644 index 00000000..4a905e4e --- /dev/null +++ b/www/lib/angular-awesome-slider/src/core/model/slider.factory.js @@ -0,0 +1,679 @@ +(function(angular){ + 'use strict'; + + angular.module('angularAwesomeSlider').factory('slider', ['sliderPointer', 'sliderConstants', 'sliderUtils', function(SliderPointer, sliderConstants, utils) { + + function Slider(){ + return this.init.apply(this, arguments); + } + + Slider.prototype.init = function( inputNode, templateNode, settings ){ + this.settings = settings; + this.inputNode = inputNode; + this.inputNode.addClass("ng-hide"); + + this.settings.interval = this.settings.to-this.settings.from; + + if(this.settings.calculate && angular.isFunction(this.settings.calculate)) + this.nice = this.settings.calculate; + + if(this.settings.onstatechange && angular.isFunction(this.settings.onstatechange)) + this.onstatechange = this.settings.onstatechange; + + this.css = sliderConstants.SLIDER.css; + this.is = {init: false}; + this.o = {}; + this.initValue = {}; + this.isAsc = settings.from < settings.to; + + this.create(templateNode); + + return this; + }; + + Slider.prototype.create = function( templateNode ){ + // set skin class + // if( this.settings.skin && this.settings.skin.length > 0 ) + // this.setSkin( this.settings.skin ); + + var self = this; + + this.domNode = templateNode; + + var divs = this.domNode.find('div'), + is = this.domNode.find('i'), + angElt = angular.element, + angExt = angular.extend, + angForEach = angular.forEach, + pointer1 = angElt(divs[1]), + pointer2 = angElt(divs[2]), + pointerLabel1 = angElt(divs[5]), + pointerLabel2 = angElt(divs[6]), + indicatorLeft = angElt(is[0]), + indicatorRight = angElt(is[1]), + range = angElt(is[2]), + indicator1 = angElt(is[3]), + indicator2 = angElt(is[4]), + indicator3 = angElt(is[5]), + indicator4 = angElt(is[6]), + pointers = [pointer1, pointer2], + off = utils.offset(this.domNode), + offset = { + left: off.left, + top: off.top, + width: this.domNode[0].clientWidth, + height: this.domNode[0].clientHeight + }, + values = self.settings.value.split(';'); + + this.sizes = { + domWidth: this.domNode[0].clientWidth, + domHeight: this.domNode[0].clientHeight, + domOffset: offset + }; + + // find some objects + angExt(this.o, { + pointers: {}, + labels: { 0: { o : pointerLabel1 }, 1: { o : pointerLabel2 } }, + limits: { 0: angular.element(divs[3]), 1: angular.element(divs[4]) }, + indicators: { 0: indicator1, 1: indicator2, 2: indicator3, 3: indicator4 } + }); + + angExt(this.o.labels[0], { + value: this.o.labels[0].o.find("span") + }); + + angExt(this.o.labels[1], { + value: this.o.labels[1].o.find("span") + }); + + // single pointer + this.settings.single = !self.settings.value.split(";")[1]; + + if (this.settings.single) { + range.addClass('ng-hide'); + } + + angForEach(pointers, function(pointer, key) { + self.settings = angular.copy(self.settings); + + var value = values[key], + prev, + prevValue, + test, + value1, + offset; + + if(value) { + self.o.pointers[key] = new SliderPointer(pointer, key, self.settings.vertical, self); + + prev = values[key-1]; + prevValue = prev ? parseInt(prev, 10 ) : undefined; + + value = self.settings.round ? parseFloat(value) : parseInt(value, 10); + + if( prev && self.isAsc ? value < prevValue : value > prevValue ) { + value = prev; + } + + // limit threshold adjust +/* test = self.isAsc ? value < self.settings.from : value > self.settings.from, + value1 = test ? self.settings.from : value; */ + + test = self.isAsc ? value > self.settings.to : value < self.settings.to; + value1 = test ? self.settings.to : value; + + self.o.pointers[key].set( value1, true ); + + // reinit position d + offset = utils.offset(self.o.pointers[key].ptr); + + self.o.pointers[key].d = { + left: offset.left, + top: offset.top + }; + } + }); + + self.domNode.bind('mousedown', self.clickHandler.apply(self)); + + this.o.value = angElt(this.domNode.find("i")[2]); + this.is.init = true; + + // CSS SKIN + if (this.settings.css) { + indicatorLeft.css(this.settings.css.background ? this.settings.css.background : {}); + indicatorRight.css(this.settings.css.background ? this.settings.css.background : {}); + if (!this.o.pointers[1]) { + indicator1.css(this.settings.css.before ? this.settings.css.before : {}); + indicator4.css(this.settings.css.after ? this.settings.css.after : {}); + } + + indicator2.css(this.settings.css.default ? this.settings.css.default : {}); + indicator3.css(this.settings.css.default ? this.settings.css.default : {}); + + range.css(this.settings.css.range ? this.settings.css.range : {}); + pointer1.css(this.settings.css.pointer ? this.settings.css.pointer : {}); + pointer2.css(this.settings.css.pointer ? this.settings.css.pointer : {}); + } + + angForEach(this.o.pointers, function(pointer, key){ + self.redraw(pointer); + }); + + }; + + Slider.prototype.clickHandler = function() { + var self = this; + + // in case of showing/hiding + var resetPtrSize = function( ptr ) { + var ptr1 = self.o.pointers[0].ptr, + ptr2 = self.o.pointers[1].ptr, + offset1 = utils.offset(ptr1), + offset2 = utils.offset(ptr2); + + self.o.pointers[0].d = { + left: offset1.left, + top: offset1.top, + width: ptr1[0].clientWidth, + height: ptr1[0].clientHeight + }; + + self.o.pointers[1].d = { + left: offset2.left, + top: offset2.top, + width: ptr2[0].clientWidth, + height: ptr2[0].clientHeight + }; + }; + + return function(evt) { + if (self.disabled) + return; + var vertical = self.settings.vertical, + targetIdx = 0, + _off = utils.offset(self.domNode), + firstPtr = self.o.pointers[0], + secondPtr = self.o.pointers[1] ? self.o.pointers[1] : null, + tmpPtr, + evtPosition = evt.originalEvent ? evt.originalEvent: evt, + mouse = vertical ? evtPosition.pageY : evtPosition.pageX, + css = vertical ? 'top' : 'left', + offset = { left: _off.left, top: _off.top, width: self.domNode[0].clientWidth, height: self.domNode[0].clientHeight }, + targetPtr = self.o.pointers[targetIdx]; + + if (secondPtr) { + if (!secondPtr.d.width) { + resetPtrSize(); + } + var firstPtrPosition = utils.offset(firstPtr.ptr)[css]; + var secondPtrPosition = utils.offset(secondPtr.ptr)[css]; + var middleGap = Math.abs((secondPtrPosition - firstPtrPosition) / 2); + var testSecondPtrToMove = mouse >= secondPtrPosition || mouse >= (secondPtrPosition - middleGap); + if (testSecondPtrToMove) { + targetPtr = secondPtr; + } + } + targetPtr._parent = {offset: offset, width: offset.width, height: offset.height}; + var coords = firstPtr._getPageCoords( evt ); + targetPtr.cx = coords.x - targetPtr.d.left; + targetPtr.cy = coords.y - targetPtr.d.top; + targetPtr.onmousemove( evt, coords.x, coords.y); + targetPtr.onmouseup(); + angular.extend(targetPtr.d, { + left: coords.x, + top: coords.y + }); + + self.redraw(targetPtr); + return false; + }; + }; + + + Slider.prototype.disable = function( bool ) { + this.disabled = bool; + }; + + Slider.prototype.nice = function( value ){ + return value; + }; + + Slider.prototype.onstatechange = function(){}; + + Slider.prototype.limits = function( x, pointer ){ + // smooth + if(!this.settings.smooth){ + var step = this.settings.step*100 / ( this.settings.interval ); + x = Math.round( x/step ) * step; + } + + if (pointer) { + var another = this.o.pointers[1-pointer.uid]; + if(another && pointer.uid && x < another.value.prc) x = another.value.prc; + if(another && !pointer.uid && x > another.value.prc) x = another.value.prc; + } + // base limit + if(x < 0) x = 0; + if(x > 100) x = 100; + + return Math.round(x*10) / 10; + }; + + Slider.prototype.getPointers = function(){ + return this.o.pointers; + }; + + Slider.prototype.generateScale = function(){ + if (this.settings.scale && this.settings.scale.length > 0){ + var str = '', + s = this.settings.scale, + // FIX Big Scale Failure #34 + // var prc = Math.round((100/(s.length-1))*10)/10; + prc, + label, + duplicate = {}, + position = this.settings.vertical ? 'top' : 'left', + i=0; + for(; i < s.length; i++) { + if (!s[i].val) { + prc = (100/(s.length-1)).toFixed(2); + str += '<span style="'+ position + ': ' + i*prc + '%">' + ( s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '' ) + '</span>'; + } + + if (s[i].val <= this.settings.to && s[i].val >= this.settings.from && ! duplicate[s[i].val]) { + duplicate[s[i].val] = true; + prc = this.valueToPrc(s[i].val); + label = s[i].label ? s[i].label : s[i].val; + str += '<span style="'+ position + ': ' + prc + '%">' + '<ins>' + label + '</ins>' + '</span>'; + } + } + return str; + } + + return ''; + }; + + Slider.prototype.onresize = function(){ + var self = this; + + this.sizes = { + domWidth: this.domNode[0].clientWidth, + domHeight: this.domNode[0].clientHeight, + domOffset: { + left: this.domNode[0].offsetLeft, + top: this.domNode[0].offsetTop, + width: this.domNode[0].clientWidth, + height: this.domNode[0].clientHeight + } + }; + + angular.forEach(this.o.pointers, function(ptr, key) { + self.redraw(ptr); + }); + }; + + Slider.prototype.update = function(){ + this.onresize(); + this.drawScale(); + }; + + Slider.prototype.drawScale = function( scaleDiv ){ + angular.forEach(angular.element(scaleDiv).find('ins'), function(scaleLabel, key) { + scaleLabel.style.marginLeft = - scaleLabel.clientWidth / 2; + }); + }; + + Slider.prototype.redraw = function( pointer ){ + if(!this.is.init) { + // this.settings.single + if(this.o.pointers[0] && !this.o.pointers[1]) { + this.originValue = this.o.pointers[0].value.prc; + this.o.indicators[0].css(!this.settings.vertical ? {left:0, width:this.o.pointers[0].value.prc + "%"} : {top:0, height:this.o.pointers[0].value.prc + "%"}); + this.o.indicators[1].css(!this.settings.vertical ? {left:this.o.pointers[0].value.prc + "%"} : {top:this.o.pointers[0].value.prc + "%"}); + this.o.indicators[3].css(!this.settings.vertical ? {left:this.o.pointers[0].value.prc + "%"} : {top:this.o.pointers[0].value.prc + "%"}); + } else { + this.o.indicators[2].css(!this.settings.vertical ? {left:this.o.pointers[1].value.prc + "%"} : {top:this.o.pointers[1].value.prc + "%"}); + this.o.indicators[0].css(!this.settings.vertical ? {left:0, width:"0"} : {top:0, height:"0"}); + this.o.indicators[3].css(!this.settings.vertical ? {left:"0", width:"0"} : {top:"0", height:"0"}); + } + + return false; + } + + this.setValue(); + + var newPos, + newWidth; + + // redraw range line + if(this.o.pointers[0] && this.o.pointers[1]) { + newPos = !this.settings.vertical ? + { left: this.o.pointers[0].value.prc + "%", width: ( this.o.pointers[1].value.prc - this.o.pointers[0].value.prc ) + "%" } + : + { top: this.o.pointers[0].value.prc + "%", height: ( this.o.pointers[1].value.prc - this.o.pointers[0].value.prc ) + "%" }; + + this.o.value.css(newPos); + + // both pointer overlap on limits + if (this.o.pointers[0].value.prc === this.o.pointers[1].value.prc) { + this.o.pointers[1].ptr.css("z-index", this.o.pointers[0].value.prc === 0 ? '3' : '1'); + } + + } + + if(this.o.pointers[0] && !this.o.pointers[1]) { + newWidth = this.o.pointers[0].value.prc - this.originValue; + if (newWidth >= 0) { + this.o.indicators[3].css(!this.settings.vertical ? {width: newWidth + "%"} : {height: newWidth + "%"}); + } + else { + this.o.indicators[3].css(!this.settings.vertical ? {width: 0} : {height: 0}); + } + + if (this.o.pointers[0].value.prc < this.originValue) { + this.o.indicators[0].css(!this.settings.vertical ? {width: this.o.pointers[0].value.prc + "%"} : {height: this.o.pointers[0].value.prc + "%"}); + } + else { + this.o.indicators[0].css(!this.settings.vertical ? {width: this.originValue + "%"} : {height: this.originValue + "%"}); + } + + } + + var value = this.nice(pointer.value.origin); + if (this.settings.modelLabels) { + if (angular.isFunction(this.settings.modelLabels)) { + value = this.settings.modelLabels(value); + } + else { + value = this.settings.modelLabels[value] !== undefined ? this.settings.modelLabels[value] : value; + } + } + + this.o.labels[pointer.uid].value.html(value); + + // redraw position of labels + this.redrawLabels( pointer ); + }; + + Slider.prototype.redrawLabels = function( pointer ) { + + function setPosition( label, sizes, prc ) { + sizes.margin = -sizes.label/2; + var domSize = !self.settings.vertical ? self.sizes.domWidth : self.sizes.domHeight; + + if (self.sizes.domWidth) { + // left limit + var label_left = sizes.border + sizes.margin; + if(label_left < 0) + sizes.margin -= label_left; + + // right limit + if(self.sizes.domWidth > 0 && sizes.border+sizes.label / 2 > domSize){ + sizes.margin = 0; + sizes.right = true; + } else + sizes.right = false; + } + + if (!self.settings.vertical) + label.o.css({ left: prc + "%", marginLeft: sizes.margin+"px", right: "auto" }); + else + label.o.css({ top: prc + "%", marginLeft: "20px", marginTop: sizes.margin, bottom: "auto" }); + if(sizes.right && self.sizes.domWidth > 0) { + if (!self.settings.vertical) + label.o.css({ left: "auto", right: 0 }); + else + label.o.css({ top: "auto", bottom: 0 }); + } + return sizes; + } + + var self = this, + label = this.o.labels[pointer.uid], + prc = pointer.value.prc, + // case hidden + labelWidthSize = label.o[0].offsetWidth === 0 ? (label.o[0].textContent.length)*7 : label.o[0].offsetWidth; + + this.sizes.domWidth = this.domNode[0].clientWidth; + this.sizes.domHeight = this.domNode[0].clientHeight; + + var sizes = { + label: !self.settings.vertical ? labelWidthSize : label.o[0].offsetHeight, + right: false, + border: (prc * (!self.settings.vertical ? this.sizes.domWidth: this.sizes.domHeight)) / 100 + }; + + var anotherIdx = pointer.uid === 0 ? 1:0, + anotherLabel, + anotherPtr; + + if (!this.settings.single && !this.settings.vertical){ + // glue if near; + anotherLabel = this.o.labels[anotherIdx]; + anotherPtr = this.o.pointers[anotherIdx]; + var label1 = this.o.labels[0], + label2 = this.o.labels[1], + ptr1 = this.o.pointers[0], + ptr2 = this.o.pointers[1], + gapBetweenLabel = ptr2.ptr[0].offsetLeft - ptr1.ptr[0].offsetLeft, + value = this.nice(anotherPtr.value.origin); + + label1.o.css(this.css.visible); + label2.o.css(this.css.visible); + + value = this.getLabelValue(value); + + if (gapBetweenLabel + 10 < label1.o[0].offsetWidth+label2.o[0].offsetWidth) { + anotherLabel.o.css(this.css.hidden); + + anotherLabel.value.html(value); + prc = (anotherPtr.value.prc - prc) / 2 + prc; + if(anotherPtr.value.prc != pointer.value.prc){ + value = this.nice(this.o.pointers[0].value.origin); + var value1 = this.nice(this.o.pointers[1].value.origin); + value = this.getLabelValue(value); + value1 = this.getLabelValue(value1); + + label.value.html(value + " – " + value1); + sizes.label = label.o[0].offsetWidth; + sizes.border = (prc * domSize) / 100; + } + } + else { + anotherLabel.value.html(value); + anotherLabel.o.css(this.css.visible); + } + } + + sizes = setPosition(label, sizes, prc); + + var domSize = !self.settings.vertical ? self.sizes.domWidth : self.sizes.domHeight; + + /* draw second label */ + if(anotherLabel){ + // case hidden + var labelWidthSize2 = label.o[0].offsetWidth === 0 ? (label.o[0].textContent.length/2)*7 : label.o[0].offsetWidth, + sizes2 = { + label: !self.settings.vertical ? labelWidthSize2: anotherLabel.o[0].offsetHeight, + right: false, + border: (anotherPtr.value.prc * this.sizes.domWidth) / 100 + }; + sizes = setPosition(anotherLabel, sizes2, anotherPtr.value.prc); + } + + this.redrawLimits(); + }; + + Slider.prototype.redrawLimits = function() { + if (this.settings.limits) { + + var limits = [true, true], + i = 0; + + for(var key in this.o.pointers){ + + if(!this.settings.single || key === 0){ + + var pointer = this.o.pointers[key], + label = this.o.labels[pointer.uid], + label_left = label.o[0].offsetLeft - this.sizes.domOffset.left, + limit = this.o.limits[0]; + + if(label_left < limit[0].clientWidth) { + limits[0] = false; + } + + limit = this.o.limits[1]; + if(label_left + label.o[0].clientWidth > this.sizes.domWidth - limit[0].clientWidth){ + limits[1] = false; + } + + } + } + + for(; i < limits.length; i++){ + if(limits[i]){ // TODO animate + angular.element(this.o.limits[i]).addClass("animate-show"); + } + else{ + angular.element(this.o.limits[i]).addClass("animate-hidde"); + } + } + } + }; + + Slider.prototype.setValue = function(){ + var value = this.getValue(); + this.inputNode.attr("value", value); + this.onstatechange.call(this, value, this.inputNode); + }; + + Slider.prototype.getValue = function(){ + if(!this.is.init) return false; + var $this = this; + + var value = ""; + angular.forEach(this.o.pointers, function(pointer, key){ + if(pointer.value.prc !== undefined && !isNaN(pointer.value.prc)) + value += (key > 0 ? ";" : "") + $this.prcToValue(pointer.value.prc); + }); + return value; + }; + + Slider.prototype.getLabelValue = function(value){ + if (this.settings.modelLabels) { + if (angular.isFunction(this.settings.modelLabels)) { + return this.settings.modelLabels(value); + } + else { + return this.settings.modelLabels[value] !== undefined ? this.settings.modelLabels[value] : value; + } + } + + return value; + }; + + Slider.prototype.getPrcValue = function(){ + if(!this.is.init) return false; + var $this = this; + + var value = ""; + // TODO remove jquery and see if % value is nice feature + /*$.each(this.o.pointers, function(i){ + if(this.value.prc !== undefined && !isNaN(this.value.prc)) value += (i > 0 ? ";" : "") + this.value.prc; + });*/ + return value; + }; + + Slider.prototype.prcToValue = function( prc ){ + var value; + if (this.settings.heterogeneity && this.settings.heterogeneity.length > 0){ + var h = this.settings.heterogeneity, + _start = 0, + _from = this.settings.round ? parseFloat(this.settings.from) : parseInt(this.settings.from, 10), + _to = this.settings.round ? parseFloat(this.settings.to) : parseInt(this.settings.to, 10), + i = 0; + + for (; i <= h.length; i++){ + var v; + if(h[i]) + v = h[i].split('/'); + else + v = [100, _to]; + + var v1 = this.settings.round ? parseFloat(v[0]) : parseInt(v[0], 10); + var v2 = this.settings.round ? parseFloat(v[1]) : parseInt(v[1], 10); + + if (prc >= _start && prc <= v1) { + value = _from + ((prc-_start) * (v2-_from)) / (v1-_start); + } + + _start = v1; + _from = v2; + } + } + else { + value = this.settings.from + (prc * this.settings.interval) / 100; + } + + return this.round(value); + }; + + Slider.prototype.valueToPrc = function( value, pointer ){ + var prc, + _from = this.settings.round ? parseFloat(this.settings.from) : parseInt(this.settings.from, 10); + + if (this.settings.heterogeneity && this.settings.heterogeneity.length > 0){ + var h = this.settings.heterogeneity, + _start = 0, + i = 0; + + for (; i <= h.length; i++) { + var v; + if(h[i]) + v = h[i].split('/'); + else + v = [100, this.settings.to]; + + var v1 = this.settings.round ? parseFloat(v[0]) : parseInt(v[0], 10); + var v2 = this.settings.round ? parseFloat(v[1]) : parseInt(v[1], 10); + + if(value >= _from && value <= v2){ + if (pointer) { + prc = pointer.limits(_start + (value-_from)*(v1-_start)/(v2-_from)); + } else { + prc = this.limits(_start + (value-_from)*(v1-_start)/(v2-_from)); + } + } + + _start = v1; _from = v2; + } + + } else { + if (pointer) { + prc = pointer.limits((value-_from)*100/this.settings.interval); + } else { + prc = this.limits((value-_from)*100/this.settings.interval); + } + } + + return prc; + }; + + Slider.prototype.round = function( value ){ + value = Math.round(value / this.settings.step) * this.settings.step; + + if(this.settings.round) + value = Math.round(value * Math.pow(10, this.settings.round)) / Math.pow(10, this.settings.round); + else + value = Math.round(value); + return value; + }; + + return Slider; + + }]); +}(angular)); diff --git a/www/lib/angular-awesome-slider/src/core/template/slider.tmpl.js b/www/lib/angular-awesome-slider/src/core/template/slider.tmpl.js new file mode 100644 index 00000000..9529f46d --- /dev/null +++ b/www/lib/angular-awesome-slider/src/core/template/slider.tmpl.js @@ -0,0 +1,29 @@ +(function(angular, undefined) { +'use strict'; + + angular.module('angularAwesomeSlider') + .run(['$templateCache', function ($templateCache) { + $templateCache.put('ng-slider/slider-bar.tmpl.html', + '<span ng-class="mainSliderClass" id="{{sliderTmplId}}">' + + '<table><tr><td>' + + '<div class="jslider-bg">' + + '<i class="left"></i>'+ + '<i class="right"></i>'+ + '<i class="range"></i>'+ + '<i class="before"></i>'+ + '<i class="default"></i>'+ + '<i class="default"></i>'+ + '<i class="after"></i>'+ + '</div>' + + '<div class="jslider-pointer"></div>' + + '<div class="jslider-pointer jslider-pointer-to"></div>' + + '<div class="jslider-label" ng-show="options.limits"><span ng-bind="limitValue(options.from)"></span>{{options.dimension}}</div>' + + '<div class="jslider-label jslider-label-to" ng-show="options.limits"><span ng-bind="limitValue(options.to)"></span>{{options.dimension}}</div>' + + '<div class="jslider-value"><span></span>{{options.dimension}}</div>' + + '<div class="jslider-value jslider-value-to"><span></span>{{options.dimension}}</div>' + + '<div class="jslider-scale" id="{{sliderScaleDivTmplId}}"></div>' + + '</td></tr></table>' + + '</span>'); + }]); + +})(window.angular); diff --git a/www/lib/angular-awesome-slider/src/core/utils/utils.factory.js b/www/lib/angular-awesome-slider/src/core/utils/utils.factory.js new file mode 100644 index 00000000..180d1071 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/core/utils/utils.factory.js @@ -0,0 +1,34 @@ +(function(angular){ + 'use strict'; + + angular.module('angularAwesomeSlider').factory('sliderUtils', ['$window', function(win) { + return { + offset: function(elm) { + // try {return elm.offset();} catch(e) {} + var rawDom = elm[0]; + var _x = 0; + var _y = 0; + var body = document.documentElement || document.body; + var scrollX = window.pageXOffset || body.scrollLeft; + var scrollY = window.pageYOffset || body.scrollTop; + _x = rawDom.getBoundingClientRect().left + scrollX; + _y = rawDom.getBoundingClientRect().top + scrollY; + return { left: _x, top:_y }; + }, + browser: function() { + // TODO finish browser detection and this case + var userAgent = win.navigator.userAgent; + var browsers = {mozilla: /mozilla/i, chrome: /chrome/i, safari: /safari/i, firefox: /firefox/i, ie: /internet explorer/i}; + for(var key in browsers) { + if (browsers[key].test(userAgent)) { + return key; + } + } + return 'unknown'; + } + }; + }]); +})(angular); + + + diff --git a/www/lib/angular-awesome-slider/src/css/angular-awesome-slider.css b/www/lib/angular-awesome-slider/src/css/angular-awesome-slider.css new file mode 100644 index 00000000..6f363d30 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/angular-awesome-slider.css @@ -0,0 +1,531 @@ +/*http://codeguide.co/#css-syntax*/ +.jslider { + /* Positioning */ + + position: relative; + top: 0.6em; + /* Box-model */ + + cursor: pointer; + display: block; + width: 100%; + height: 1em; + /* Typography */ + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.jslider.disabled { + opacity: 0.5; +} +.jslider table { + border-collapse: collapse; + border: 0; + width: 100%; +} +.jslider table td, +.jslider table th { + width: 100%; + border: 0; + padding: 0; + text-align: left; + vertical-align: top; +} +.jslider div.jslider-bg i, +.jslider div.jslider-pointer { + background: url(../img/jslider.png) no-repeat 0 0; +} +.jslider div.jslider-bg { + position: relative; +} +.jslider div.jslider-bg i { + position: absolute; + top: 0; + height: 5px; +} +.jslider div.jslider-bg i.left { + left: 0; + width: 50%; + background-position: 0 0; +} +.jslider div.jslider-bg i.right { + left: 50%; + width: 50%; + background-position: right 0; +} +.jslider div.jslider-bg i.range { + position: absolute; + top: 0; + left: 20%; + width: 60%; + height: 5px; + z-index: 1; + background-repeat: repeat-x; + background-position: 0 -40px; +} +.jslider div.jslider-bg i.default { + left: 0; + width: 1px; + z-index: 1; + background-color: #185f83; +} +.jslider.jslider-single div.jslider-pointer-to, +.jslider.jslider-single div.jslider-value-to, +.jslider.jslider-single div.jslider-bg .v, +.jslider.jslider-single .jslider-limitless .jslider-label { + display: none; +} +.jslider div.jslider-pointer { + position: absolute; + top: -4px; + left: 20%; + z-index: 2; + width: 15px; + height: 15px; + background-position: 2px -60px; + margin-left: -8px; + cursor: pointer; + cursor: hand; +} +.jslider div.jslider-pointer.jslider-pointer-to { + left: 80%; +} +.jslider div.jslider-pointer.jslider-pointer-hover { + background-position: -18px -60px; +} +.jslider div.jslider-label small, +.jslider div.jslider-value small { + position: relative; + top: -0.4em; +} +.jslider div.jslider-label { + position: absolute; + top: -18px; + left: 0px; + padding: 0px 2px; + opacity: 0.4; + color: #000000; + font-size: 9px; + line-height: 12px; + white-space: nowrap; +} +.jslider div.jslider-label.jslider-label-to { + left: auto; + right: 0; +} +.jslider div.jslider-value { + position: absolute; + top: -19px; + left: 0; + padding: 1px 2px 0; + background: white; + font-size: 9px; + line-height: 12px; + white-space: nowrap; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -o-border-radius: 2px; + border-radius: 2px; +} +.jslider div.jslider-value.jslider-value-to { + left: 80%; +} +.jslider div.jslider-scale { + position: relative; + top: 9px; +} +.jslider div.jslider-scale span { + position: absolute; + height: 5px; + border-left: 1px solid #999; + font-size: 0; +} +.jslider div.jslider-scale ins { + position: absolute; + top: 5px; + left: 0px; + font-size: 9px; + text-decoration: none; + color: #999; +} +.jslider.vertical { + display: block; + width: 17px; + height: 100%; + position: relative; + top: 0.6em; + font-family: Arial, sans-serif; +} +.jslider.vertical table { + height: 100%; +} +.jslider.vertical.sliderCSS .jslider-bg i, +.jslider.vertical.jslider-pointer { + background-color: silver; + background-image: none; +} +.jslider.vertical div.jslider-bg i, +.jslider.vertical .jslider-pointer { + background: url(../img/jslider.vertical.png) no-repeat 0 0; +} +.jslider.vertical div.jslider-bg { + position: relative; + height: 100%; +} +.jslider.vertical div.jslider-bg i { + position: absolute; + top: 0; + width: 5px; + font-size: 0; +} +.jslider.vertical div.jslider-bg i.before { + left: 50%; + background: none; +} +.jslider.vertical div.jslider-bg i.left { + top: 0; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y; +} +.jslider.vertical div.jslider-bg i.right { + top: 50%; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y; +} +.jslider.vertical div.jslider-bg i.range { + position: absolute; + top: 0; + left: 50%; + width: 60%; + height: 100%; + z-index: 1; + background-repeat: repeat-y; + background-position: -36px 0px; +} +.jslider.vertical div.jslider-bg i.default { + left: 50%; + width: 5px; + height: 1px; + z-index: 1; + background-color: #185f83; +} +.jslider.vertical div.jslider-pointer { + left: 62%; + background-position: -7px -1px; +} +.jslider.vertical div.jslider-pointer.jslider-pointer-hover { + background-position: -7px -21px; +} +.jslider.vertical div.jslider-pointer.jslider-pointer-to { + left: 62%; +} +.jslider.vertical div.jslider-pointer.jslider-pointer-to.jslider-pointer-hover { + background-position: -7px -21px; +} +.jslider.vertical div.jslider-label { + top: -5px; + margin-left: 22px; +} +.jslider.vertical div.jslider-label.jslider-label-to { + top: 100%; + left: inherit; + right: inherit; + margin-top: -5px; +} +.jslider.vertical div.jslider-value { + top: 0; + left: 0; +} +.jslider.vertical div.jslider-value-to { + top: 80%; + left: 0; +} +.jslider.vertical div.jslider-scale { + position: inherit; +} +.jslider.vertical div.jslider-scale span { + position: absolute; + width: 5px; + height: 1px; + border-left: none; + font-size: 0; + border-top: 1px solid #999; +} +.jslider.vertical div.jslider-scale ins { + position: absolute; + left: 0px; + top: 5px; + font-size: 9px; + text-decoration: none; + color: #999999; +} +.jslider.sliderCSS div.jslider-bg i.left { + left: 0; + width: 50%; + background-color: #c0c0c0; + background-image: none; +} +.jslider.sliderCSS div.jslider-bg i.right { + width: 50%; + left: 50%; + background-color: #c0c0c0; + background-image: none; +} +.jslider.sliderCSS div.jslider-bg i.before { + left: 0; + width: 1px; + background-color: rgba(92, 98, 203, 0.89); + background-image: none; +} +.jslider.sliderCSS div.jslider-bg i.default { + left: 0; + width: 1px; + z-index: 1; + background-color: #ffffff; + background-image: none; +} +.jslider.sliderCSS div.jslider-bg i.after { + left: 0; + background-color: #0e1773; + background-image: none; +} +.jslider.sliderCSS div.jslider-bg i.range { + position: absolute; + top: 0; + left: 20%; + width: 60%; + height: 5px; + z-index: 1; + background-image: none; + background-color: #777575; +} +.jslider.sliderCSS div.jslider-pointer { + top: -3px; + left: 15px; + width: 10px; + height: 10px; + margin-left: -5px; + background-color: silver; + background-color: #615959; + border-radius: 50%; +} +.jslider.sliderCSS div.jslider-bg i, +.jslider.sliderCSS div.jslider-pointer { + background: none; +} +.jslider.sliderCSS.vertical td { + height: 100%; +} +.jslider.sliderCSS.vertical div.jslider-bg i { + left: 50%; + width: 5px; +} +.jslider.sliderCSS.vertical div.jslider-bg i.left { + top: 0; + height: 50%; + background-color: #c0c0c0; + background-image: none; +} +.jslider.sliderCSS.vertical div.jslider-bg i.right { + height: 50%; + top: 50%; + background-color: #c0c0c0; + background-image: none; +} +.jslider.sliderCSS.vertical div.jslider-bg i.range { + height: 100%; + z-index: 1; + background-color: #777575; + background-image: none; +} +.jslider.sliderCSS.vertical div.jslider-bg i.before { + background-color: rgba(92, 98, 203, 0.89); + background-image: none; +} +.jslider.sliderCSS.vertical div.jslider-bg i.default { + height: 1px; + background-color: #ffffff; + background-image: none; + z-index: 2; +} +.jslider.sliderCSS.vertical div.jslider-bg i.after { + background-color: #0e1773; + background-image: none; +} +.jslider.sliderCSS.vertical div.jslider-bg i, +.jslider.sliderCSS.vertical div.jslider-pointer { + background: none; +} +.jslider.sliderCSS.vertical div.jslider-pointer { + left: 50%; + width: 10px; + height: 10px; + background-color: #615959; + border-radius: 50%; + margin-left: -3px; +} +.jslider.sliderCSS.vertical div.jslider-pointer.jslider-pointer-to { + left: 50%; +} +.jslider.jslider_round div.jslider-bg i, +.jslider.jslider_round div.jslider-pointer { + background: url(../img/jslider.round.png) no-repeat 0 0; +} +.jslider.jslider_round div.jslider-bg i { + background-position: 0 -20px; +} +.jslider.jslider_round div.jslider-bg i.default { + background-color: #C2C7CA; +} +.jslider.jslider_round div.jslider-bg i.range { + z-index: 1; + background-position: 0 -40px; +} +.jslider.jslider_round div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: 0 -60px; + z-index: 2; +} +.jslider.jslider_round div.jslider-pointer.jslider-pointer-hover { + background-position: -20px -60px; +} +.jslider.jslider_round.vertical div.jslider-bg i, +.jslider.jslider_round.vertical div.jslider-pointer { + background: url(../img/jslider.round.vertical.png) no-repeat 0 0; +} +.jslider.jslider_round.vertical div.jslider-bg i { + background-position: right 0; +} +.jslider.jslider_round.vertical div.jslider-bg i.range { + background-position: -37px 0; +} +.jslider.jslider_round.vertical div.jslider-bg i.before, +.jslider.jslider_round.vertical div.jslider-bg i.after { + background: none; +} +.jslider.jslider_round.vertical div.jslider-bg i.default { + background-color: #c2c7ca; +} +.jslider.jslider_round.vertical div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: -4px -3px; +} +.jslider.jslider_round.vertical div.jslider-pointer.jslider-pointer-hover { + background-position: -4px -23px; +} +.jslider.jslider_round.vertical div.jslider-pointer.jslider-value-to { + left: 80%; +} +.jslider.jslider_round.vertical div.jslider-value { + left: 0; +} +.jslider.jslider_blue .jslider-bg i, +.jslider.jslider_blue .jslider-pointer { + background: url(../img/jslider.blue.png) no-repeat 0 0; +} +.jslider.jslider_blue .jslider-bg i { + background-position: 2px -20px; +} +.jslider.jslider_blue .jslider-bg i.default { + background-color: #c2c7ca; +} +.jslider.jslider_blue .jslider-bg i.range { + z-index: 1; + background-position: 0 -40px; +} +.jslider.jslider_blue div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: 2px -60px; + z-index: 2; +} +.jslider.jslider_blue div.jslider-pointer.jslider-pointer-hover { + background-position: -20px -60px; +} +.jslider.jslider_blue.vertical div.jslider-bg i, +.jslider.jslider_blue.vertical div.jslider-pointer { + background: url(../img/jslider.blue.vertical.png) no-repeat 0 0; +} +.jslider.jslider_blue.vertical div.jslider-bg i { + background-position: right 0; +} +.jslider.jslider_blue.vertical div.jslider-bg i.range { + background-position: -37px 0; +} +.jslider.jslider_blue.vertical div.jslider-bg i.before, +.jslider.jslider_blue.vertical div.jslider-bg i.after { + background: none; +} +.jslider.jslider_blue.vertical div.jslider-bg i.default { + background-color: #c2c7ca; +} +.jslider.jslider_blue.vertical div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: -7px 0; +} +.jslider.jslider_blue.vertical div.jslider-pointer.jslider-pointer-hover { + background-position: -7px -20px; +} +.jslider.jslider_blue.vertical div.jslider-value { + left: 0; +} +.jslider.jslider_plastic .jslider-bg i, +.jslider.jslider_plastic .jslider-pointer { + background: url(../img/jslider.plastic.png) no-repeat 0 0; +} +.jslider.jslider_plastic .jslider-bg i { + background-position: 2px -20px; +} +.jslider.jslider_plastic .jslider-bg i.default { + background-color: #c2c7ca; +} +.jslider.jslider_plastic .jslider-bg i.range { + z-index: 1; + background-position: 0 -40px; +} +.jslider.jslider_plastic .jslider-pointer { + z-index: 2; + width: 20px; + height: 17px; + top: -4px; + background-position: 2px -60px; +} +.jslider.jslider_plastic .jslider-pointer.jslider-pointer-hover { + background-position: -18px -60px; +} +.jslider.jslider_plastic.vertical div.jslider-bg i, +.jslider.jslider_plastic.vertical div.jslider-pointer { + background: url(../img/jslider.plastic.vertical.png) no-repeat 0 0; +} +.jslider.jslider_plastic.vertical div.jslider-bg i { + background-position: right 0; +} +.jslider.jslider_plastic.vertical div.jslider-bg i.range { + background-position: -35px 0; +} +.jslider.jslider_plastic.vertical div.jslider-bg i.before, +.jslider.jslider_plastic.vertical div.jslider-bg i.after { + background: none; +} +.jslider.jslider_plastic.vertical div.jslider-bg i.default { + background-color: #c2c7ca; +} +.jslider.jslider_plastic.vertical div.jslider-pointer { + top: -6px; + margin-left: -6px; + width: 20px; + height: 17px; + background-position: -7px -1px; +} +.jslider.jslider_plastic.vertical div.jslider-pointer.jslider-pointer-hover { + background-position: -7px -21px; +} diff --git a/www/lib/angular-awesome-slider/src/css/less/main.less b/www/lib/angular-awesome-slider/src/css/less/main.less new file mode 100644 index 00000000..5182d4af --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/less/main.less @@ -0,0 +1,339 @@ +// +// Main slider css rules +// -------------------------------------------------- + +@import "variables.less"; + +/*http://codeguide.co/#css-syntax*/ + +.jslider { + + /* Positioning */ + position: relative; + top: 0.6em; + + /* Box-model */ + cursor: pointer; + display: block; + width: 100%; + height: 1em; + + /* Typography */ + font-family: @font-family-base; + + // disabled + &.disabled { opacity: 0.5; } + + table { + border-collapse: collapse; + border: 0; + width: 100%; + td, th { + width: 100%; + vertical-align: top; + border: 0; + padding: 0; + text-align: left; + vertical-align: top; + } + } + + // RANGES + div.jslider-bg i, div.jslider-pointer { + background: url(../img/jslider.png) no-repeat 0 0; + } + + div.jslider-bg { + position: relative; + i { + position: absolute; + top: 0; + height: 5px; + + &.left { + left: 0; + width: 50%; + background-position: 0 0; + } + + &.right { + left: 50%; + width: 50%; + background-position: right 0; + } + + &.range { + position: absolute; + top: 0; + left: 20%; + width: 60%; + height: 5px; + z-index: 1; + background-repeat: repeat-x; + background-position: 0 -40px; + } + + &.default { + left: 0; + width: 1px; + z-index: 1; + background-color: @color-pointers-default-value; + } + + } + } + // END RANGES + + // POINTERS + // single value hide to + &.jslider-single { + div.jslider-pointer-to, + div.jslider-value-to, + div.jslider-bg .v, + .jslider-limitless .jslider-label { + display: none; + } + } + + div.jslider-pointer { + position: absolute; + top: -4px; + left: 20%; + z-index: 2; + width: 15px; + height: 15px; + background-position: 2px -60px; + margin-left: -8px; + cursor: pointer; + cursor: hand; + + &.jslider-pointer-to { + left: 80%; + } + + &.jslider-pointer-hover { + background-position: -18px -60px; + } + } + // END POINTERS + + // LABELS + div.jslider-label small, + div.jslider-value small { + position: relative; + top: -0.4em; + } + + // limits + div.jslider-label { + position: absolute; + top: -18px; + left: 0px; + padding: 0px 2px; + opacity: 0.4; + color: @color-pointers-label; + font-size: @font-size-pointers-label; + line-height: @line-height-pointers-label; + white-space: nowrap; + + &.jslider-label-to { + left: auto; + right: 0; + } + } + // END LABELS + + // POINTERS VALUE + div.jslider-value { + position: absolute; + top: -19px; + left: 0; + padding: 1px 2px 0; + background: white; + font-size: @font-size-pointers-value; + line-height: @line-height-pointers-value; + white-space: nowrap; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -o-border-radius: 2px; + border-radius: 2px; + &.jslider-value-to { + left: 80%; + } + } + // END POINTERS VALUE + + // SCALE + div.jslider-scale { + position: relative; + top: 9px; + span { + position: absolute; + height: 5px; + border-left: 1px solid #999; + font-size: 0; + } + ins { + position: absolute; + top: 5px; + left: 0px; + font-size: 9px; + text-decoration: none; + color: #999; } + } + // END SCALE + + // VERTICAL + &.vertical { + display: block; + width: 17px; + height: 100%; + position: relative; + top: 0.6em; + font-family: Arial, sans-serif; + table { + height: 100%; + } + + &.sliderCSS .jslider-bg i, &.jslider-pointer { + background-color: silver; + background-image: none; + } + + // RANGES + div.jslider-bg i,.jslider-pointer { + background: url(../img/jslider.vertical.png) no-repeat 0 0; + } + + div.jslider-bg { + position: relative; + height:100%; + + i { + position: absolute; + top: 0; + width: 5px; + font-size: 0; + + &.before { + left: 50%; + background: none + } + + &.left { + top: 0; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y + } + + &.right { + top: 50%; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y + } + + &.range { + position: absolute; + top: 0; + left: 50%; + width: 60%; + height: 100%; + z-index: 1; + background-repeat: repeat-y; + background-position: -36px 0px; + } + + &.default { + left: 50%; + width: 5px; + height:1px; + z-index: 1; + background-color: @color-pointers-default-value; + } + + } + } + // END RANGES + + // POINTERS + div.jslider-pointer { + left: 62%; + background-position: -7px -1px; + + &.jslider-pointer-hover { + background-position: -7px -21px; + } + + &.jslider-pointer-to { + left: 62%; + } + + &.jslider-pointer-to.jslider-pointer-hover { + background-position: -7px -21px; + } + } + // END POINTERS + + // LABELS + div.jslider-label { + top: -5px; + margin-left: 22px; + + &.jslider-label-to { + top:100%; + left: inherit; + right: inherit; + margin-top: -5px; + } + } + // END LABELS + + + // POINTERS VALUE + div.jslider-value { + top: 0; + left: 0; + } + + div.jslider-value-to { + top: 80%; + left: 0; + } + // END POINTERS VALUE + + // SCALES + div.jslider-scale { + position: inherit; + span { + position: absolute; + width: 5px; + height: 1px; + border-left: none; + font-size: 0; + border-top: 1px solid #999; + } + ins { + position: absolute; + left: 0px; + top: 5px; + font-size: 9px; + text-decoration: none; + color: @color-scale; + } + } + + } + // END VERTICAL + + + // SKINS + @import "skin-css.less"; + @import "skin-round.less"; + @import "skin-blue.less"; + @import "skin-plastic.less"; +} + diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-blue.less b/www/lib/angular-awesome-slider/src/css/less/skin-blue.less new file mode 100644 index 00000000..931c6afb --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/less/skin-blue.less @@ -0,0 +1,79 @@ +// +// Blue skin +// -------------------------------------------------- + +&.jslider_blue { + .jslider-bg i, + .jslider-pointer { + background: url(../img/jslider.blue.png) no-repeat 0 0; + } + + .jslider-bg { + i { + background-position: 2px -20px; + &.default { + background-color: @color-skin-pointers-default-value; + } + + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: 2px -60px; + z-index: 2; + + &.jslider-pointer-hover { + background-position: -20px -60px; + } + } + + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url(../img/jslider.blue.vertical.png) no-repeat 0 0; + } + + div.jslider-bg { + i { + background-position: right 0; + + &.range { + background-position: -37px 0; + } + + &.before, + &.after { + background: none; + } + + &.default { + background-color: @color-skin-pointers-default-value; + } + } + } + + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: -7px 0; + + &.jslider-pointer-hover { + background-position: -7px -20px; + } + + } + + div.jslider-value { + left: 0; + } + + } +} diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-css.less b/www/lib/angular-awesome-slider/src/css/less/skin-css.less new file mode 100644 index 00000000..43b45901 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/less/skin-css.less @@ -0,0 +1,139 @@ +// +// Main slider custom overrided js css rules +// -------------------------------------------------- +&.sliderCSS { + + div.jslider-bg { + + i { + &.left { + left: 0; + width: 50%; + background-color: @color-skin-background; + background-image: none; + } + &.right { + width: 50%; + left: 50%; + background-color: @color-skin-background; + background-image: none; + } + &.before { + left: 0; + width: 1px; + background-color: @color-skin-css-pointers-before-value; + background-image: none; + } + &.default { + left: 0; + width: 1px; + z-index: 1; + background-color: @color-skin-css-pointers-default-value; + background-image: none; + } + &.after { + left: 0; + background-color: @color-skin-css-pointers-after-value; + background-image: none; + } + &.range { + position: absolute; + top: 0; + left: 20%; + width: 60%; + height: 5px; + z-index: 1; + background-image: none; + background-color: #777575 + } + } + } + + div.jslider-pointer { + top: -3px; + left: 15px; + width: 10px; + height: 10px; + margin-left: -5px; + background-color: silver; + background-color: #615959; + border-radius: 50%; + } + + div.jslider-bg i,div.jslider-pointer { + background: none; + } + + // vertical + &.vertical { + + td { + height: 100%; + } + + div.jslider-bg { + + i { + left: 50%; + width: 5px; + + &.left { + top: 0; + height: 50%; + background-color: @color-skin-background; + background-image: none; + } + + &.right { + height: 50%; + top: 50%; + background-color: @color-skin-background; + background-image: none; + } + + &.range { + height: 100%; + z-index: 1; + background-color: #777575; + background-image: none; + } + + &.before { + background-color: @color-skin-css-pointers-before-value; + background-image: none; + } + + &.default { + height: 1px; + background-color: @color-skin-css-pointers-default-value; + background-image: none; + z-index: 2; + } + + &.after { + background-color: @color-skin-css-pointers-after-value; + background-image: none; + } + + } + + } + + div.jslider-bg i,div.jslider-pointer { + background: none; + } + + div.jslider-pointer { + left: 50%; + width: 10px; + height: 10px; + background-color: #615959; + border-radius: 50%; + margin-left: -3px; + + &.jslider-pointer-to { + left: 50%; + } + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-plastic.less b/www/lib/angular-awesome-slider/src/css/less/skin-plastic.less new file mode 100644 index 00000000..31ebf55d --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/less/skin-plastic.less @@ -0,0 +1,78 @@ +// +// Plastic skin +// -------------------------------------------------- + +&.jslider_plastic { + .jslider-bg i, + .jslider-pointer { + background: url(../img/jslider.plastic.png) no-repeat 0 0; + } + + .jslider-bg { + i { + background-position: 2px -20px; + &.default { + background-color: @color-skin-pointers-default-value; + } + + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + + .jslider-pointer { + z-index: 2; + width: 20px; + height: 17px; + top: -4px; + background-position: 2px -60px; + + &.jslider-pointer-hover { + background-position: -18px -60px; + } + } + + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url(../img/jslider.plastic.vertical.png) no-repeat 0 0; + } + + div.jslider-bg { + + i { + background-position: right 0; + + &.range { + background-position: -35px 0; + } + + &.before, + &.after { + background: none; + } + + &.default { + background-color: @color-skin-pointers-default-value; + } + } + } + + div.jslider-pointer { + top: -6px; + margin-left: -6px; + width: 20px; + height: 17px; + background-position: -7px -1px; + + &.jslider-pointer-hover { + background-position: -7px -21px; + } + + } + + } +} + diff --git a/www/lib/angular-awesome-slider/src/css/less/skin-round.less b/www/lib/angular-awesome-slider/src/css/less/skin-round.less new file mode 100644 index 00000000..b0247d7b --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/less/skin-round.less @@ -0,0 +1,81 @@ +// +// Round skin +// -------------------------------------------------- + +&.jslider_round { + div.jslider-bg i, + div.jslider-pointer { + background: url(../img/jslider.round.png) no-repeat 0 0; + } + + div.jslider-bg { + i { + background-position: 0 -20px; + &.default { + background-color: #C2C7CA; + } + + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: 0 -60px; + z-index: 2; + + &.jslider-pointer-hover { + background-position: -20px -60px; + } + } + + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url(../img/jslider.round.vertical.png) no-repeat 0 0; + } + + div.jslider-bg { + i { + background-position: right 0; + &.range { + background-position: -37px 0; + } + + &.before, + &.after { + background: none; + } + + &.default { + background-color: @color-skin-pointers-default-value; + } + } + } + + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: -4px -3px; + + &.jslider-pointer-hover { + background-position: -4px -23px; + } + + &.jslider-value-to { + left: 80%; + } + } + + div.jslider-value { + left: 0; + } + + } +} diff --git a/www/lib/angular-awesome-slider/src/css/less/variables.less b/www/lib/angular-awesome-slider/src/css/less/variables.less new file mode 100644 index 00000000..4e667771 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/less/variables.less @@ -0,0 +1,42 @@ +// +// Variables +// -------------------------------------------------- + + +//== Colors +// + +@black: #000; +@white: #fff; +@gray: #999; +@gray2: #C2C7CA; +@blue: #185F83; + +//== Typography +// + +@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-base: @font-family-sans-serif; + +@font-size-pointers-label: 9px; +@line-height-pointers-label: 12px; +@font-size-pointers-value: @font-size-pointers-label; +@line-height-pointers-value: @line-height-pointers-label; + +@color-pointers-label: @black; +@color-pointers-value: @color-pointers-label; +@color-scale: @gray; + +@color-pointers-default-value: @blue; + +//== Skin CSS +// + +@color-skin-pointers-default-value: @gray2; + +@color-skin-background: silver; +@color-skin-css-pointers-default-value: @white; +@color-skin-css-pointers-before-value: rgba(92, 98, 203, 0.89); +@color-skin-css-pointers-after-value: rgb(14, 23, 115); + + diff --git a/www/lib/angular-awesome-slider/src/css/sass/core/_variables.sass b/www/lib/angular-awesome-slider/src/css/sass/core/_variables.sass new file mode 100644 index 00000000..a548321e --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/core/_variables.sass @@ -0,0 +1,28 @@ +// Colors + +$black: #000000 +$white: #ffffff +$gray: #999999 +$gray2: #c2c7Ca +$blue: #185f83 + +// Typography + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif +$font-family-base: $font-family-sans-serif +$font-size-pointers-label: 9px +$line-height-pointers-label: 12px +$font-size-pointers-value: $font-size-pointers-label +$line-height-pointers-value: $line-height-pointers-label +$color-pointers-label: $black +$color-pointers-value: $color-pointers-label +$color-scale: $gray +$color-pointers-default-value: $blue + +// Skin CSS + +$color-skin-pointers-default-value: $gray2 +$color-skin-background: silver +$color-skin-css-pointers-default-value: $white +$color-skin-css-pointers-before-value: rgba(92, 98, 203, 0.89) +$color-skin-css-pointers-after-value: rgb(14, 23, 115) diff --git a/www/lib/angular-awesome-slider/src/css/sass/horizontal/_horizontal.sass b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_horizontal.sass new file mode 100644 index 00000000..067fc92b --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_horizontal.sass @@ -0,0 +1,23 @@ +// Horizontal Styles + +.jslider + +position(relative, 0.6em null null null) + cursor: pointer + display: block + +size(100% 1em) + font-family: $font-family-base + + &.disabled + opacity: 0.5 + + table + border-collapse: collapse + border: 0 + width: 100% + + td, th + width: 100% + border: 0 + padding: 0 + text-align: left + vertical-align: top diff --git a/www/lib/angular-awesome-slider/src/css/sass/horizontal/_labels.sass b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_labels.sass new file mode 100644 index 00000000..5150adef --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_labels.sass @@ -0,0 +1,17 @@ +div.jslider-label small, +div.jslider-value small + +position(relative, -0.4em null null null) + +// limits +div.jslider-label + +position(absolute, -18px null 0 null) + padding: 0px 2px + opacity: 0.4 + color: $color-pointers-label + font-size: $font-size-pointers-label + line-height: $line-height-pointers-label + white-space: nowrap + + &.jslider-label-to + left: auto + right: 0 diff --git a/www/lib/angular-awesome-slider/src/css/sass/horizontal/_main.sass b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_main.sass new file mode 100644 index 00000000..d6a774ac --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_main.sass @@ -0,0 +1,8 @@ +// Horizontal Styles + +@import horizontal +@import ranges +@import pointers +@import labels +@import pointers-value +@import scale diff --git a/www/lib/angular-awesome-slider/src/css/sass/horizontal/_pointers-value.sass b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_pointers-value.sass new file mode 100644 index 00000000..f5233608 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_pointers-value.sass @@ -0,0 +1,11 @@ +div.jslider-value + +position(absolute, -19px null 0 null) + padding: 1px 2px 0 + // background: white + font-size: $font-size-pointers-value + line-height: $line-height-pointers-value + white-space: nowrap + border-radius: 2px + + &.jslider-value-to + left: 80% diff --git a/www/lib/angular-awesome-slider/src/css/sass/horizontal/_pointers.sass b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_pointers.sass new file mode 100644 index 00000000..bee15943 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_pointers.sass @@ -0,0 +1,21 @@ +// single value hide to +.jslider-single + div.jslider-pointer-to, + div.jslider-value-to, + div.jslider-bg .v, + .jslider-limitless .jslider-label + display: none + +div.jslider-pointer + +position(absolute, -4px null 20% null) + +size(15px) + background-position: 2px -60px + margin-left: -8px + cursor: hand + z-index: 2 + + &.jslider-pointer-to + left: 80% + + &.jslider-pointer-hover + background-position: -19px -60px diff --git a/www/lib/angular-awesome-slider/src/css/sass/horizontal/_ranges.sass b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_ranges.sass new file mode 100644 index 00000000..b47dfa41 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_ranges.sass @@ -0,0 +1,31 @@ +div.jslider-bg i, div.jslider-pointer + background: url("../img/jslider.png") no-repeat 0 0 + +div.jslider-bg + position: relative + i + +position(absolute, 0 null null null) + height: 5px + + &.left + left: 0 + width: 50% + background-position: 0 0 + + &.right + left: 50% + width: 50% + background-position: right 0 + + &.range + +position(absolute, 0 null null 20%) + +size(60% 5px) + background-repeat: repeat-x + background-position: 0 -40px + z-index: 1 + + &.default + left: 0 + width: 1px + z-index: 1 + background-color: $color-pointers-default-value diff --git a/www/lib/angular-awesome-slider/src/css/sass/horizontal/_scale.sass b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_scale.sass new file mode 100644 index 00000000..59f4828c --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/horizontal/_scale.sass @@ -0,0 +1,15 @@ +div.jslider-scale + position: relative + top: 9px + + span + position: absolute + height: 5px + border-left: 1px solid $gray + font-size: 0 + + ins + +position(absolute, 5px null 0 null) + font-size: 9px + text-decoration: none + color: $gray diff --git a/www/lib/angular-awesome-slider/src/css/sass/main.sass b/www/lib/angular-awesome-slider/src/css/sass/main.sass new file mode 100644 index 00000000..5752ee62 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/main.sass @@ -0,0 +1,17 @@ +// Import Bourbon Mixins +@import ../../../bower_components/bourbon/app/assets/stylesheets/bourbon + +// Main slider css rules +@import core/variables + +// Horizontal Slider +@import horizontal/main + +// Vertical Slider +@import vertical/main + +// Skins +@import skins/skin-css +@import skins/skin-round +@import skins/skin-blue +@import skins/skin-plastic diff --git a/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-blue.sass b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-blue.sass new file mode 100644 index 00000000..f6dcb51d --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-blue.sass @@ -0,0 +1,55 @@ +// Blue Skin + +.jslider_blue + .jslider-bg i, + .jslider-pointer + background: url("../img/jslider.blue.png") no-repeat 0 0 + + .jslider-bg + i + background-position: 2px -20px + + &.default + background-color: $color-skin-pointers-default-value + + &.range + z-index: 1 + background-position: 0 -40px + + div.jslider-pointer + top: -6px + width: 20px + height: 17px + background-position: 2px -60px + z-index: 2 + + &.vertical + div.jslider-bg i, + div.jslider-pointer + background: url("../img/jslider.blue.vertical.png") no-repeat 0 0 + + div.jslider-bg + i + background-position: right 0 + + &.range + background-position: -37px 0 + + &.before, + &.after + background: none + + &.default + background-color: $color-skin-pointers-default-value + + div.jslider-pointer + top: -6px + width: 20px + height: 17px + background-position: -7px 0 + + &.jslider-pointer-hover + background-position: -7px -20px + + div.jslider-value + left: 0 diff --git a/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-css.sass b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-css.sass new file mode 100644 index 00000000..887d1f99 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-css.sass @@ -0,0 +1,110 @@ +$skin-gray: #777575 +$skin-gray-2: #615959 + +// Main slider custom overrided js css rules + +.sliderCSS + div.jslider-bg + i + &.left + left: 0 + width: 50% + background-color: $color-skin-background + background-image: none + + &.right + width: 50% + left: 50% + background-color: $color-skin-background + background-image: none + + &.before + left: 0 + width: 1px + background-color: $color-skin-css-pointers-before-value + background-image: none + + &.default + left: 0 + width: 1px + z-index: 1 + background-color: $color-skin-css-pointers-default-value + background-image: none + + &.after + left: 0 + background-color: $color-skin-css-pointers-after-value + background-image: none + + &.range + +position(absolute, 0 null 20% null) + +size(60% 5px) + background-image: none + background-color: $skin-gray + z-index: 1 + + div.jslider-pointer + top: -3px + left: 15px + +size(10px) + background-color: silver + background-color: $skin-gray-2 + border-radius: 50% + + div.jslider-bg i, div.jslider-pointer + background: none + + // vertical + &.vertical + td { + height: 100%; + } + div.jslider-bg + i + left: 50% + width: 5px + + &.left + top: 0 + height: 50% + background-color: $color-skin-background + background-image: none + + &.right + height: 50% + top: 50% + background-color: $color-skin-background + background-image: none + + &.range + height: 100% + z-index: 1 + background-color: $skin-gray + background-image: none + + &.before + background-color: $color-skin-css-pointers-before-value + background-image: none + + &.default + height: 1px + background-color: $color-skin-css-pointers-default-value + background-image: none + z-index: 2 + + &.after + background-color: $color-skin-css-pointers-after-value + background-image: none + + div.jslider-bg i, div.jslider-pointer + background: none + + div.jslider-pointer + left: 50% + +size(10px) + background-color: $skin-gray-2 + border-radius: 50% + margin-left: -3px + + &.jslider-pointer-to + left: 50% diff --git a/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-plastic.sass b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-plastic.sass new file mode 100644 index 00000000..5b5b5408 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-plastic.sass @@ -0,0 +1,51 @@ +// Plastic Skin + +.jslider_plastic + .jslider-bg i, + .jslider-pointer + background: url("../img/jslider.plastic.png") no-repeat 0 0 + + .jslider-bg + i + background-position: 2px -20px + + &.default + background-color: $color-skin-pointers-default-value + + &.range + z-index: 1 + background-position: 0 -40px + + .jslider-pointer + z-index: 2 + +size(20px 17px) + top: -6px + background-position: 2px -60px + + &.vertical + div.jslider-bg i, + div.jslider-pointer + background: url("../img/jslider.plastic.vertical.png") no-repeat 0 0 + + div.jslider-bg + i + background-position: right 0 + + &.range + background-position: -35px 0 + + &.before, + &.after + background: none + + &.default + background-color: $color-skin-pointers-default-value + + div.jslider-pointer + top: -6px + margin-left: -6px + +size(20px 17px) + background-position: -7px -1px + + &.jslider-pointer-hover + background-position: -7px -21px diff --git a/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-round.sass b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-round.sass new file mode 100644 index 00000000..48e7cdb2 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/skins/_skin-round.sass @@ -0,0 +1,56 @@ +// Round Skin + +.jslider_round + div.jslider-bg i, + div.jslider-pointer + background: url("../img/jslider.round.png") no-repeat 0 0 + + div.jslider-bg + i + background-position: 0 -20px + + &.default + background-color: $gray2 + + &.range + z-index: 1 + background-position: 0 -40px + + div.jslider-pointer + top: -6px + +size(20px 17px) + background-position: 0 -60px + z-index: 2 + + &.vertical + div.jslider-bg i, + div.jslider-pointer + background: url("../img/jslider.round.vertical.png") no-repeat 0 0 + + div.jslider-bg + i + background-position: right 0 + + &.range + background-position: -37px 0 + + &.before, + &.after + background: none + + &.default + background-color: $color-skin-pointers-default-value + + div.jslider-pointer + top: -6px + +size(20px 17px) + background-position: -4px -3px + + &.jslider-pointer-hover + background-position: -4px -23px + + &.jslider-value-to + left: 80% + + div.jslider-value + left: 0 diff --git a/www/lib/angular-awesome-slider/src/css/sass/vertical/_labels.sass b/www/lib/angular-awesome-slider/src/css/sass/vertical/_labels.sass new file mode 100644 index 00000000..0ced5eef --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/vertical/_labels.sass @@ -0,0 +1,11 @@ +.vertical + div.jslider-label + top: -5px + margin-left: 22px + + &.jslider-label-to + top: 100% + left: inherit + right: inherit + margin-top: -5px + diff --git a/www/lib/angular-awesome-slider/src/css/sass/vertical/_main.sass b/www/lib/angular-awesome-slider/src/css/sass/vertical/_main.sass new file mode 100644 index 00000000..64ba478f --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/vertical/_main.sass @@ -0,0 +1,8 @@ +// Vertical Styles + +@import vertical +@import ranges +@import pointers +@import labels +@import pointers-value +@import scales diff --git a/www/lib/angular-awesome-slider/src/css/sass/vertical/_pointers-value.sass b/www/lib/angular-awesome-slider/src/css/sass/vertical/_pointers-value.sass new file mode 100644 index 00000000..22a22259 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/vertical/_pointers-value.sass @@ -0,0 +1,9 @@ +.vertical + div.jslider-value + top: 0 + left: 0 + + div.jslider-value-to + top: 80% + left: 0 + diff --git a/www/lib/angular-awesome-slider/src/css/sass/vertical/_pointers.sass b/www/lib/angular-awesome-slider/src/css/sass/vertical/_pointers.sass new file mode 100644 index 00000000..11eb9984 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/vertical/_pointers.sass @@ -0,0 +1,13 @@ +.vertical + div.jslider-pointer + left: 62% + background-position: -7px -1px + + &.jslider-pointer-hover + background-position: -7px -21px + + &.jslider-pointer-to + left: 62% + + &.jslider-pointer-to.jslider-pointer-hover + background-position: -7px -21px diff --git a/www/lib/angular-awesome-slider/src/css/sass/vertical/_ranges.sass b/www/lib/angular-awesome-slider/src/css/sass/vertical/_ranges.sass new file mode 100644 index 00000000..f6913499 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/vertical/_ranges.sass @@ -0,0 +1,46 @@ +.vertical + div.jslider-bg i, + .jslider-pointer + background: url("../img/jslider.vertical.png") no-repeat 0 0 + + div.jslider-bg + position: relative + height: 100% + + i + +position(absolute, 0 null null null) + width: 5px + font-size: 0 + + &.before + left: 50% + background: none + + &.left + top: 0 + left: 50% + height: 50% + background-position: right 0 + background-repeat: repeat-y + + &.right + top: 50% + left: 50% + height: 50% + background-position: right 0 + background-repeat: repeat-y + + &.range + position: absolute + top: 0 + left: 50% + +size(60% 100%) + z-index: 1 + background-repeat: repeat-y + background-position: -36px 0px + + &.default + left: 50% + +size(5px 1px) + z-index: 1 + background-color: $color-pointers-default-value diff --git a/www/lib/angular-awesome-slider/src/css/sass/vertical/_scales.sass b/www/lib/angular-awesome-slider/src/css/sass/vertical/_scales.sass new file mode 100644 index 00000000..f0bf764e --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/vertical/_scales.sass @@ -0,0 +1,16 @@ +.vertical + div.jslider-scale + position: inherit + + span + position: absolute + +size(5px 1px) + border-left: none + font-size: 0 + border-top: 1px solid #999 + + ins + +position(absolute, 5px null 0 null) + font-size: 9px + text-decoration: none + color: $color-scale diff --git a/www/lib/angular-awesome-slider/src/css/sass/vertical/_vertical.sass b/www/lib/angular-awesome-slider/src/css/sass/vertical/_vertical.sass new file mode 100644 index 00000000..b2e510cf --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/sass/vertical/_vertical.sass @@ -0,0 +1,13 @@ +.vertical + +position(relative, 0.6em null null null) + display: block + +size(17px 100%) + font-family: Arial, sans-serif + + table + height: 100% + + &.sliderCSS .jslider-bg i, + &.jslider-pointer + background-color: silver + background-image: none diff --git a/www/lib/angular-awesome-slider/src/css/scss/core/_variables.scss b/www/lib/angular-awesome-slider/src/css/scss/core/_variables.scss new file mode 100644 index 00000000..bb28b9dd --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/core/_variables.scss @@ -0,0 +1,28 @@ +// Colors + +$black: #000000; +$white: #ffffff; +$gray: #999999; +$gray2: #c2c7Ca; +$blue: #185f83; + +// Typography + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-base: $font-family-sans-serif; +$font-size-pointers-label: 9px; +$line-height-pointers-label: 12px; +$font-size-pointers-value: $font-size-pointers-label; +$line-height-pointers-value: $line-height-pointers-label; +$color-pointers-label: $black; +$color-pointers-value: $color-pointers-label; +$color-scale: $gray; +$color-pointers-default-value: $blue; + +// Skin CSS + +$color-skin-pointers-default-value: $gray2; +$color-skin-background: silver; +$color-skin-css-pointers-default-value: $white; +$color-skin-css-pointers-before-value: rgba(92, 98, 203, 0.89); +$color-skin-css-pointers-after-value: rgb(14, 23, 115); diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_horizontal.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_horizontal.scss new file mode 100644 index 00000000..31a36ac7 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_horizontal.scss @@ -0,0 +1,24 @@ +// Horizontal Styles + +.jslider { + @include position(relative, 0.6em null null null); + cursor: pointer; + display: block; + @include size(100% 1em); + font-family: $font-family-base; + &.disabled { + opacity: 0.5; + } + table { + border-collapse: collapse; + border: 0; + width: 100%; + td, th { + width: 100%; + border: 0; + padding: 0; + text-align: left; + vertical-align: top; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_labels.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_labels.scss new file mode 100644 index 00000000..4dfae6ae --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_labels.scss @@ -0,0 +1,19 @@ +div.jslider-label small, +div.jslider-value small { + @include position(relative, -0.4em null null null); +} + +// limits +div.jslider-label { + @include position(absolute, -18px null 0 null); + padding: 0px 2px; + opacity: 0.4; + color: $color-pointers-label; + font-size: $font-size-pointers-label; + line-height: $line-height-pointers-label; + white-space: nowrap; + &.jslider-label-to { + left: auto; + right: 0; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_main.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_main.scss new file mode 100644 index 00000000..d18ae442 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_main.scss @@ -0,0 +1,8 @@ +// Horizontal Styles + +@import "horizontal"; +@import "ranges"; +@import "pointers"; +@import "labels"; +@import "pointers-value"; +@import "scale"; diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers-value.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers-value.scss new file mode 100644 index 00000000..b829c6d1 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers-value.scss @@ -0,0 +1,12 @@ +div.jslider-value { + @include position(absolute, -19px null 0 null); + padding: 1px 2px 0; + // background: white + font-size: $font-size-pointers-value; + line-height: $line-height-pointers-value; + white-space: nowrap; + border-radius: 2px; + &.jslider-value-to { + left: 80%; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers.scss new file mode 100644 index 00000000..0799afa8 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers.scss @@ -0,0 +1,24 @@ +// single value hide to +.jslider-single { + div.jslider-pointer-to, + div.jslider-value-to, + div.jslider-bg .v, + .jslider-limitless .jslider-label { + display: none; + } +} + +div.jslider-pointer { + @include position(absolute, -4px null 20% null); + @include size(15px); + background-position: 2px -60px; + margin-left: -8px; + cursor: hand; + z-index: 2; + &.jslider-pointer-to { + left: 80%; + } + &.jslider-pointer-hover { + background-position: (-19px) -60px; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_ranges.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_ranges.scss new file mode 100644 index 00000000..26fb01f8 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_ranges.scss @@ -0,0 +1,34 @@ +div.jslider-bg i, div.jslider-pointer { + background: url("../img/jslider.png") no-repeat 0 0; +} + +div.jslider-bg { + position: relative; + i { + @include position(absolute, 0 null null null); + height: 5px; + &.left { + left: 0; + width: 50%; + background-position: 0 0; + } + &.right { + left: 50%; + width: 50%; + background-position: right 0; + } + &.range { + @include position(absolute, 0 null null 20%); + @include size(60% 5px); + background-repeat: repeat-x; + background-position: 0 -40px; + z-index: 1; + } + &.default { + left: 0; + width: 1px; + z-index: 1; + background-color: $color-pointers-default-value; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_scale.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_scale.scss new file mode 100644 index 00000000..ca4be2cf --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_scale.scss @@ -0,0 +1,16 @@ +div.jslider-scale { + position: relative; + top: 9px; + span { + position: absolute; + height: 5px; + border-left: 1px solid $gray; + font-size: 0; + } + ins { + @include position(absolute, 5px null 0 null); + font-size: 9px; + text-decoration: none; + color: $gray; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/main.scss b/www/lib/angular-awesome-slider/src/css/scss/main.scss new file mode 100644 index 00000000..d00379b2 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/main.scss @@ -0,0 +1,17 @@ +// Import Bourbon Mixins +@import "../../../bower_components/bourbon/app/assets/stylesheets/bourbon"; + +// Main slider css rules +@import "core/variables"; + +// Horizontal Slider +@import "horizontal/main"; + +// Vertical Slider +@import "vertical/main"; + +// Skins +@import "skins/skin-css"; +@import "skins/skin-round"; +@import "skins/skin-blue"; +@import "skins/skin-plastic"; diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-blue.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-blue.scss new file mode 100644 index 00000000..57011bea --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-blue.scss @@ -0,0 +1,60 @@ +// Blue Skin + +.jslider_blue { + .jslider-bg i, + .jslider-pointer { + background: url("../img/jslider.blue.png") no-repeat 0 0; + } + .jslider-bg { + i { + background-position: 2px -20px; + &.default { + background-color: $color-skin-pointers-default-value; + } + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: 2px -60px; + z-index: 2; + } + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.blue.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: right 0; + &.range { + background-position: (-37px) 0; + } + &.before, + &.after { + background: none; + } + &.default { + background-color: $color-skin-pointers-default-value; + } + } + } + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: (-7px) 0; + &.jslider-pointer-hover { + background-position: (-7px) -20px; + } + } + div.jslider-value { + left: 0; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-css.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-css.scss new file mode 100644 index 00000000..dc0c68d4 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-css.scss @@ -0,0 +1,116 @@ +$skin-gray: #777575; +$skin-gray-2: #615959; + +// Main slider custom overrided js css rules + +.sliderCSS { + div.jslider-bg { + i { + &.left { + left: 0; + width: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.right { + width: 50%; + left: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.before { + left: 0; + width: 1px; + background-color: $color-skin-css-pointers-before-value; + background-image: none; + } + &.default { + left: 0; + width: 1px; + z-index: 1; + background-color: $color-skin-css-pointers-default-value; + background-image: none; + } + &.after { + left: 0; + background-color: $color-skin-css-pointers-after-value; + background-image: none; + } + &.range { + @include position(absolute, 0 null 20% null); + @include size(60% 5px); + background-image: none; + background-color: $skin-gray; + z-index: 1; + } + } + } + div.jslider-pointer { + top: -3px; + left: 15px; + @include size(10px); + background-color: silver; + background-color: $skin-gray-2; + border-radius: 50%; + } + div.jslider-bg i, div.jslider-pointer { + background: none; + } + // vertical + &.vertical { + td { + height: 100%; + } + div.jslider-bg { + i { + left: 50%; + width: 5px; + &.left { + top: 0; + height: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.right { + height: 50%; + top: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.range { + height: 100%; + z-index: 1; + background-color: $skin-gray; + background-image: none; + } + &.before { + background-color: $color-skin-css-pointers-before-value; + background-image: none; + } + &.default { + height: 1px; + background-color: $color-skin-css-pointers-default-value; + background-image: none; + z-index: 2; + } + &.after { + background-color: $color-skin-css-pointers-after-value; + background-image: none; + } + } + } + div.jslider-bg i, div.jslider-pointer { + background: none; + } + div.jslider-pointer { + left: 50%; + @include size(10px); + background-color: $skin-gray-2; + border-radius: 50%; + margin-left: -3px; + &.jslider-pointer-to { + left: 50%; + } + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-plastic.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-plastic.scss new file mode 100644 index 00000000..04a18bf2 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-plastic.scss @@ -0,0 +1,56 @@ +// Plastic Skin + +.jslider_plastic { + .jslider-bg i, + .jslider-pointer { + background: url("../img/jslider.plastic.png") no-repeat 0 0; + } + .jslider-bg { + i { + background-position: 2px -20px; + &.default { + background-color: $color-skin-pointers-default-value; + } + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + .jslider-pointer { + z-index: 2; + @include size(20px 17px); + top: -6px; + background-position: 2px -60px; + } + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.plastic.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: right 0; + &.range { + background-position: (-35px) 0; + } + &.before, + &.after { + background: none; + } + &.default { + background-color: $color-skin-pointers-default-value; + } + } + } + div.jslider-pointer { + top: -6px; + margin-left: -6px; + @include size(20px 17px); + background-position: (-7px) -1px; + &.jslider-pointer-hover { + background-position: (-7px) -21px; + } + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-round.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-round.scss new file mode 100644 index 00000000..10ce3395 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-round.scss @@ -0,0 +1,61 @@ +// Round Skin + +.jslider_round { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.round.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: 0 -20px; + &.default { + background-color: $gray2; + } + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + div.jslider-pointer { + top: -6px; + @include size(20px 17px); + background-position: 0 -60px; + z-index: 2; + } + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.round.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: right 0; + &.range { + background-position: (-37px) 0; + } + &.before, + &.after { + background: none; + } + &.default { + background-color: $color-skin-pointers-default-value; + } + } + } + div.jslider-pointer { + top: -6px; + @include size(20px 17px); + background-position: (-4px) -3px; + &.jslider-pointer-hover { + background-position: (-4px) -23px; + } + &.jslider-value-to { + left: 80%; + } + } + div.jslider-value { + left: 0; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_labels.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_labels.scss new file mode 100644 index 00000000..9feca95a --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_labels.scss @@ -0,0 +1,12 @@ +.vertical { + div.jslider-label { + top: -5px; + margin-left: 22px; + &.jslider-label-to { + top: 100%; + left: inherit; + right: inherit; + margin-top: -5px; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_main.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_main.scss new file mode 100644 index 00000000..0267be94 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_main.scss @@ -0,0 +1,8 @@ +// Vertical Styles + +@import "vertical"; +@import "ranges"; +@import "pointers"; +@import "labels"; +@import "pointers-value"; +@import "scales"; diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers-value.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers-value.scss new file mode 100644 index 00000000..3cea3a72 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers-value.scss @@ -0,0 +1,10 @@ +.vertical { + div.jslider-value { + top: 0; + left: 0; + } + div.jslider-value-to { + top: 80%; + left: 0; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers.scss new file mode 100644 index 00000000..d5d7ed9c --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers.scss @@ -0,0 +1,15 @@ +.vertical { + div.jslider-pointer { + left: 62%; + background-position: (-7px) -1px; + &.jslider-pointer-hover { + background-position: (-7px) -21px; + } + &.jslider-pointer-to { + left: 62%; + } + &.jslider-pointer-to.jslider-pointer-hover { + background-position: (-7px) -21px; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_ranges.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_ranges.scss new file mode 100644 index 00000000..7578ae77 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_ranges.scss @@ -0,0 +1,48 @@ +.vertical { + div.jslider-bg i, + .jslider-pointer { + background: url("../img/jslider.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + position: relative; + height: 100%; + i { + @include position(absolute, 0 null null null); + width: 5px; + font-size: 0; + &.before { + left: 50%; + background: none; + } + &.left { + top: 0; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y; + } + &.right { + top: 50%; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y; + } + &.range { + position: absolute; + top: 0; + left: 50%; + @include size(60% 100%); + z-index: 1; + background-repeat: repeat-y; + background-position: (-36px) 0px; + } + &.default { + left: 50%; + @include size(5px 1px); + z-index: 1; + background-color: $color-pointers-default-value; + } + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_scales.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_scales.scss new file mode 100644 index 00000000..c89e60bb --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_scales.scss @@ -0,0 +1,18 @@ +.vertical { + div.jslider-scale { + position: inherit; + span { + position: absolute; + @include size(5px 1px); + border-left: none; + font-size: 0; + border-top: 1px solid #999; + } + ins { + @include position(absolute, 5px null 0 null); + font-size: 9px; + text-decoration: none; + color: $color-scale; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_vertical.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_vertical.scss new file mode 100644 index 00000000..64b67040 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_vertical.scss @@ -0,0 +1,14 @@ +.vertical { + @include position(relative, 0.6em null null null); + display: block; + @include size(17px 100%); + font-family: Arial, sans-serif; + table { + height: 100%; + } + &.sliderCSS .jslider-bg i, + &.jslider-pointer { + background-color: silver; + background-image: none; + } +} diff --git a/www/lib/angular-awesome-slider/src/img/jslider.blue.png b/www/lib/angular-awesome-slider/src/img/jslider.blue.png Binary files differnew file mode 100644 index 00000000..454d727e --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.blue.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.blue.vertical.png b/www/lib/angular-awesome-slider/src/img/jslider.blue.vertical.png Binary files differnew file mode 100644 index 00000000..dceeffc8 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.blue.vertical.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.plastic.png b/www/lib/angular-awesome-slider/src/img/jslider.plastic.png Binary files differnew file mode 100644 index 00000000..cbb23263 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.plastic.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.plastic.vertical.png b/www/lib/angular-awesome-slider/src/img/jslider.plastic.vertical.png Binary files differnew file mode 100644 index 00000000..00d6dfa7 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.plastic.vertical.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.png b/www/lib/angular-awesome-slider/src/img/jslider.png Binary files differnew file mode 100644 index 00000000..08a1b450 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.round.plastic.png b/www/lib/angular-awesome-slider/src/img/jslider.round.plastic.png Binary files differnew file mode 100644 index 00000000..de166b47 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.round.plastic.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.round.png b/www/lib/angular-awesome-slider/src/img/jslider.round.png Binary files differnew file mode 100644 index 00000000..071a5dba --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.round.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.round.vertical.png b/www/lib/angular-awesome-slider/src/img/jslider.round.vertical.png Binary files differnew file mode 100644 index 00000000..186d1924 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.round.vertical.png diff --git a/www/lib/angular-awesome-slider/src/img/jslider.vertical.png b/www/lib/angular-awesome-slider/src/img/jslider.vertical.png Binary files differnew file mode 100644 index 00000000..5df3c1a0 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/img/jslider.vertical.png diff --git a/www/lib/angular-awesome-slider/src/index.html b/www/lib/angular-awesome-slider/src/index.html new file mode 100644 index 00000000..06b3eb90 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/index.html @@ -0,0 +1,389 @@ +<head> + +<!-- + <link rel="stylesheet" type="text/css" href="../dist/css/angular-awesome-slider.min.css"> +--> + + <link rel="stylesheet" type="text/css" href="css/angular-awesome-slider.css"> + + <script type="text/javascript" src="../bower_components/angular/angular.js"></script> + + <script type="text/javascript" src="core/index.js"></script> + <script type="text/javascript" src="core/config/constants.js"></script> + <script type="text/javascript" src="core/model/draggable.factory.js"></script> + <script type="text/javascript" src="core/model/pointer.factory.js"></script> + <script type="text/javascript" src="core/model/slider.factory.js"></script> + <script type="text/javascript" src="core/utils/utils.factory.js"></script> + <script type="text/javascript" src="core/template/slider.tmpl.js"></script> + + +<!-- + <script type="text/javascript" src="../dist/angular-awesome-slider.min.js"></script> + --> + + + +</head> +<body> + + <div ng-app="myApp" ng-controller="ctrl" style="width:700px;"> + + <div> + <div id="slider-range-container" slider-range-filter ng-if="true"></div> + </div> + <button ng-click='changeValueAndProperty()'>CHANGE VALUE</button> + </br> + </br> + <div> + <input ng-model="value3bis" type="text" id="coucou" slider ng-disabled="disabled" options="{ + from: 1, + to: 100, + step: 1, + dimension: ' km', + vertical: false, + limits: false, + css: { + range: {'background': 'transparent'}, + background: {'background-color': 'yellow'}, + before: {'background-color': 'purple'}, + default: {'background-color': 'white'}, + after: {'background-color': 'green'}, + pointer: {'background-color': 'red'} + }, + className: 'customClass' + }"/> + </div> + <div> + Current value is: {{value3bis}} + </div> + </br> + <div> + sdsdqsdsqd<input ng-model="value" type="text" id="{{id2}}" slider options="options" ng-disabled="disabled" /> + </div> + <div> + Current value is: {{value}} + </div> + <div> + <input ng-model="valueDate" type="text" slider options="optionsDate" ng-disabled="disabled" /> + </div> --> + <div> + Current value is: {{valueDate}} + </div> + <div> + sdsdqsdsqd<input ng-model="value" type="text" id="coucou" slider options="optionsCss" ng-disabled="disabled" /> + </div> + <div> + Current value is: {{value}} + </div> + <div ng-show="show"> + <input ng-model="valueVisibility" type="text" id="vvvv" slider options="optionsVisibility" ng-disabled="disabled" /> + </div> + <div> + Current value is: {{valueVisibility}} + </div> + + </br> + </br> + <div> + <input ng-model="data.quote.coverages.coverageA" type="text" id="{{id}}" slider options="coverageASliderOptions" ng-disabled="disabled" /> + </br> + </br> + <div> + Current value is: {{data.quote.coverages.coverageA}} + </div> + </br> + </br> + <div> + <input ng-model="value2" type="text" id="mySlider3" slider options="options" ng-disabled="disabled"/> + </div> + <div> + Current value is: {{value2}} + </div> + <div > + <input ng-model="value4" type="text" id="mySlider4" slider options="options3" ng-disabled="disabled"/> + </div> + <div> + Current value is: {{value4}} + </div> + <div style="display: inline-flex;position:relative;left:200px;height:300px;"> + <input ng-model="value5" type="text" id="mySlider5" slider options="optionsV" ng-disabled="disabledtoto" /> + <input ng-model="value6" type="text" id="mySlider6" slider options="options2V" ng-disabled="disabled"/> + <input ng-model="value6" type="text" id="mySlider7" slider options="options2VCSS" ng-disabled="disabled"/> + </div> + <div> + <button ng-click='changeOptions()'>CHANGE OPTIONS</button> + <button ng-click='changeValue()'>CHANGE VALUE</button> + <button ng-click='disable()'>DISABLE</button> + <button ng-click="toggleVisibility()">VISIBILITY</button> + </div> + + </div> + + <script type="text/javascript"> + + "use strict"; + + function ctrl($scope, $filter, $timeout) { + $scope.show = false; + $timeout(function() { + $scope.show = true; + }, 1000); + $scope.id = "bob"; + $scope.id2 = "bob"; + $scope.value = "10;20"; + $scope.value2 = "12;15"; + $scope.value3 = "7;20"; + $scope.value3bis = "8"; + $scope.value4 = "999;1700"; + $scope.value5 = "10;20"; + $scope.value6 = "10;53"; + $scope.valueVisibility = "40;70"; + $scope.disa = true; + $scope.disabledtoto = false; + $scope.data = { + quote: { + coverages: { + coverageA: 200000 + } + } + }; + $scope.defaultAmount=190000; + + $scope.coverageASliderOptions = { + from: $scope.defaultAmount, + to: $scope.defaultAmount+ ($scope.defaultAmount* 0.20), + step: 500, + calculate: function(value) { + return $filter('currency')(value, '$', 0); + } + }; + + $scope.disable = function() { + $scope.disabledtoto = !$scope.disabledtoto; + }; + $scope.toggleVisibility = function () { + $scope.show = !$scope.show; + }; + + var calculate = function( value ) { + var hours = Math.floor( value / 60 ); + var mins = ( value - hours*60 ); + return (hours < 10 ? "0"+hours : hours) + ":" + ( mins == 0 ? "00" : mins ); + }; + + $scope.options = { + from: 1, + to: 100, + floor: true, + step: 1, + dimension: " km", + vertical: false, + threshold: 5, + callback: function(value, elt) { + console.log(value); + } + }; + + $scope.valueDate = 1429864200; + + var modelLabelsFn = function(value) { + var d = new Date(value); + return d.toLocaleDateString() + ' - ' + d.toLocaleTimeString(); + } + + $scope.optionsDate = { + from: 1429798600, + to: 1429877200, + step: 60 * 60, + vertical: false, + skin: 'plastic', + limits: true, + modelLabels: modelLabelsFn, + callback: function(value, released) { + console.log(value + " " + released); + } + }; + + $scope.optionsVisibility = { + from: 10, + to: 100, + step: 1, + dimension: ' min', + callback: function(value, elt) { + console.log(value); + } + }; + + $scope.optionsCss = { + from: 0, + to: 40, + step: 0.5, + dimension: " $", + vertical: false, + round: 1, + css: { + background: {'background-color': 'yellow'}, + before: {'background-color': 'purple'}, + default: {'background-color': 'white'}, + after: {'background-color': 'green'}, + pointer: {'background-color': 'red'} + }, + callback: function(value, elt) { + console.log(value); + } + }; + + $scope.optionsV = { + from: 0, + to: 40, + step: 0.5, + dimension: " $", + round: 1, + skin: 'jslider_blue', + scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40], + vertical: true, + /*css: { + background: {"background-color": "yellow"}, + before: {"background-color": "purple"}, + default: {"background-color": "blue"}, + after: {"background-color": "green"}, + pointer: {"background-color": "red"} + },*/ + callback: function(value, elt) { + console.log(value); + console.log(elt); + } + // calculate: calculate + }; + + $scope.options2 = { + from: 0, + to: 100, + floor: true, + step: 10, + dimension: " km", + css: { + background: {"background-color": "yellow"}, + before: {"background-color": "purple"}, + default: {"background-color": "white"}, + after: {"background-color": "green"}, + pointer: {"background-color": "red"} + }, + callback: function(value, elt) { + console.log(value); + } + }; + + $scope.options2V = { + from: 1, + to: 100, + floor: true, + step: 10, + dimension: " km", + vertical: true, + skin: 'round', + callback: function(value, elt) { + console.log(value); + } + }; + + $scope.options2VCSS = { + from: 1, + to: 100, + floor: true, + step: 10, + dimension: " km", + vertical: true, + css: { + background: {"background-color": "yellow"}, + before: {"background-color": "purple"}, + default: {"background-color": "blue"}, + after: {"background-color": "green"}, + pointer: {"background-color": "red"} + }, + callback: function(value, elt) { + console.log(value); + } + }; + + $scope.options3 = { + from: 700, + to: 2100, + step: 1, + smooth: false, + dimension: " mb", + callback: function(value, elt) { + console.log(value); + } + }; + + $scope.changeOptions = function() { + + $scope.options = { + from: 0, + to: 80, + step: 1, + threshold: 10, + dimension: " $", + scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40, '|', 50, '|', 60, '|', 70, '|', 80] + }; + + $scope.optionsCss = { + from: 1, + to: 100, + step: 1, + dimension: " km", + vertical: false, + threshold: 10, + css: { + background: {'background-color': 'yellow'}, + before: {'background-color': 'purple'}, + default: {'background-color': 'white'}, + after: {'background-color': 'green'}, + pointer: {'background-color': 'red'} + }, + callback: function(value, elt) { + console.log(value); + } + }; + + }; + + + $scope.changeValue = function() { + + $scope.value = "11;15"; + $scope.value2 = "13;15"; + $scope.value3 = 20; + $scope.value4 = "700;1000"; + + }; + + $scope.changeValueAndProperty = function() { + $scope.options = { + from: 1, + to: 60, + step: 1, + dimension: "" + }; + //$scope.value3 = "10;50"; + }; + + + } + + var app = angular.module('myApp', ['angularAwesomeSlider']).controller('ctrl', ctrl); + + app.directive('sliderRangeFilter', [function() { + return { + restrict: 'A', + template: '<div id="searchBySliderFilter" class="filter-slider"><input ng-model="value3" type="text" id="mySlider1" slider options="options" /></div><div>Current value is: {{value3}}</div>', + link: function($scope, element, attrs) { + } + + }; + }]); + + </script> + +</body> diff --git a/www/lib/angular-awesome-slider/src/jquery.slider.js b/www/lib/angular-awesome-slider/src/jquery.slider.js new file mode 100644 index 00000000..6c373fcc --- /dev/null +++ b/www/lib/angular-awesome-slider/src/jquery.slider.js @@ -0,0 +1,700 @@ +/** + * jquery.slider - Slider ui control in jQuery + * + * Written by + * Egor Khmelev (hmelyoff@gmail.com) + * + * Licensed under the MIT (MIT-LICENSE.txt). + * + * @author Egor Khmelev + * @version 1.1.0-RELEASE ($Id$) + * + * Dependencies + * + * jQuery (http://jquery.com) + * jquery.numberformatter (http://code.google.com/p/jquery-numberformatter/) + * tmpl (http://ejohn.org/blog/javascript-micro-templating/) + * jquery.dependClass + * draggable + * + **/ + +(function( $ ) { + + function isArray( value ){ + if( typeof value == "undefined" ) return false; + + if (value instanceof Array || (!(value instanceof Object) && + (Object.prototype.toString.call((value)) == '[object Array]') || + typeof value.length == 'number' && + typeof value.splice != 'undefined' && + typeof value.propertyIsEnumerable != 'undefined' && + !value.propertyIsEnumerable('splice') + )) { + return true; + } + + return false; + } + + $.slider = function( node, settings ){ + var jNode = $(node); + if( !jNode.data( "jslider" ) ) + jNode.data( "jslider", new jSlider( node, settings ) ); + + return jNode.data( "jslider" ); + }; + + $.fn.slider = function( action, opt_value ){ + var returnValue, args = arguments; + + function isDef( val ){ + return val !== undefined; + }; + + function isDefAndNotNull( val ){ + return val != null; + }; + + this.each(function(){ + var self = $.slider( this, action ); + + // do actions + if( typeof action == "string" ){ + switch( action ){ + case "value": + if( isDef( args[ 1 ] ) && isDef( args[ 2 ] ) ){ + var pointers = self.getPointers(); + if( isDefAndNotNull( pointers[0] ) && isDefAndNotNull( args[1] ) ){ + pointers[0].set( args[ 1 ] ); + pointers[0].setIndexOver(); + } + + if( isDefAndNotNull( pointers[1] ) && isDefAndNotNull( args[2] ) ){ + pointers[1].set( args[ 2 ] ); + pointers[1].setIndexOver(); + } + } + + else if( isDef( args[ 1 ] ) ){ + var pointers = self.getPointers(); + if( isDefAndNotNull( pointers[0] ) && isDefAndNotNull( args[1] ) ){ + pointers[0].set( args[ 1 ] ); + pointers[0].setIndexOver(); + } + } + + else + returnValue = self.getValue(); + + break; + + case "prc": + if( isDef( args[ 1 ] ) && isDef( args[ 2 ] ) ){ + var pointers = self.getPointers(); + if( isDefAndNotNull( pointers[0] ) && isDefAndNotNull( args[1] ) ){ + pointers[0]._set( args[ 1 ] ); + pointers[0].setIndexOver(); + } + + if( isDefAndNotNull( pointers[1] ) && isDefAndNotNull( args[2] ) ){ + pointers[1]._set( args[ 2 ] ); + pointers[1].setIndexOver(); + } + } + + else if( isDef( args[ 1 ] ) ){ + var pointers = self.getPointers(); + if( isDefAndNotNull( pointers[0] ) && isDefAndNotNull( args[1] ) ){ + pointers[0]._set( args[ 1 ] ); + pointers[0].setIndexOver(); + } + } + + else + returnValue = self.getPrcValue(); + + break; + + case "calculatedValue": + var value = self.getValue().split(";"); + returnValue = ""; + for (var i=0; i < value.length; i++) { + returnValue += (i > 0 ? ";" : "") + self.nice( value[i] ); + }; + + break; + + case "skin": + self.setSkin( args[1] ); + + break; + }; + + } + + // return actual object + else if( !action && !opt_value ){ + if( !isArray( returnValue ) ) + returnValue = []; + + returnValue.push( self ); + } + }); + + // flatten array just with one slider + if( isArray( returnValue ) && returnValue.length == 1 ) + returnValue = returnValue[ 0 ]; + + return returnValue || this; + }; + + var OPTIONS = { + + settings: { + from: 1, + to: 10, + step: 1, + smooth: true, + limits: true, + round: 0, + format: { format: "#,##0.##" }, + value: "5;7", + dimension: "" + }, + + className: "jslider", + selector: ".jslider-", + + template: tmpl( + '<span class="<%=className%>">' + + '<table><tr><td>' + + '<div class="<%=className%>-bg">' + + '<i class="l"></i><i class="f"></i><i class="r"></i>' + + '<i class="v"></i>' + + '</div>' + + + '<div class="<%=className%>-pointer"></div>' + + '<div class="<%=className%>-pointer <%=className%>-pointer-to"></div>' + + + '<div class="<%=className%>-label"><span><%=settings.from%></span></div>' + + '<div class="<%=className%>-label <%=className%>-label-to"><span><%=settings.to%></span><%=settings.dimension%></div>' + + + '<div class="<%=className%>-value"><span></span><%=settings.dimension%></div>' + + '<div class="<%=className%>-value <%=className%>-value-to"><span></span><%=settings.dimension%></div>' + + + '<div class="<%=className%>-scale"><%=scale%></div>'+ + + '</td></tr></table>' + + '</span>' + ) + + }; + + function jSlider(){ + return this.init.apply( this, arguments ); + }; + + jSlider.prototype.init = function( node, settings ){ + this.settings = $.extend(true, {}, OPTIONS.settings, settings ? settings : {}); + + // obj.sliderHandler = this; + this.inputNode = $( node ).hide(); + + this.settings.interval = this.settings.to-this.settings.from; + this.settings.value = this.inputNode.attr("value"); + + if( this.settings.calculate && $.isFunction( this.settings.calculate ) ) + this.nice = this.settings.calculate; + + if( this.settings.onstatechange && $.isFunction( this.settings.onstatechange ) ) + this.onstatechange = this.settings.onstatechange; + + this.is = { + init: false + }; + this.o = {}; + + this.create(); + }; + + jSlider.prototype.onstatechange = function(){ + + }; + + jSlider.prototype.create = function(){ + var $this = this; + + this.domNode = $( OPTIONS.template({ + className: OPTIONS.className, + settings: { + from: this.nice( this.settings.from ), + to: this.nice( this.settings.to ), + dimension: this.settings.dimension + }, + scale: this.generateScale() + }) ); + + this.inputNode.after( this.domNode ); + this.drawScale(); + + // set skin class + if( this.settings.skin && this.settings.skin.length > 0 ) + this.setSkin( this.settings.skin ); + + this.sizes = { + domWidth: this.domNode.width(), + domOffset: this.domNode.offset() + }; + + // find some objects + $.extend(this.o, { + pointers: {}, + labels: { + 0: { + o: this.domNode.find(OPTIONS.selector + "value").not(OPTIONS.selector + "value-to") + }, + 1: { + o: this.domNode.find(OPTIONS.selector + "value").filter(OPTIONS.selector + "value-to") + } + }, + limits: { + 0: this.domNode.find(OPTIONS.selector + "label").not(OPTIONS.selector + "label-to"), + 1: this.domNode.find(OPTIONS.selector + "label").filter(OPTIONS.selector + "label-to") + } + }); + + $.extend(this.o.labels[0], { + value: this.o.labels[0].o.find("span") + }); + + $.extend(this.o.labels[1], { + value: this.o.labels[1].o.find("span") + }); + + + if( !$this.settings.value.split(";")[1] ){ + this.settings.single = true; + this.domNode.addDependClass("single"); + } + + if( !$this.settings.limits ) + this.domNode.addDependClass("limitless"); + + this.domNode.find(OPTIONS.selector + "pointer").each(function( i ){ + var value = $this.settings.value.split(";")[i]; + if( value ){ + $this.o.pointers[i] = new jSliderPointer( this, i, $this ); + + var prev = $this.settings.value.split(";")[i-1]; + if( prev && new Number(value) < new Number(prev) ) value = prev; + + value = value < $this.settings.from ? $this.settings.from : value; + value = value > $this.settings.to ? $this.settings.to : value; + + $this.o.pointers[i].set( value, true ); + } + }); + + this.o.value = this.domNode.find(".v"); + this.is.init = true; + + $.each(this.o.pointers, function(i){ + $this.redraw(this); + }); + + (function(self){ + $(window).resize(function(){ + self.onresize(); + }); + })(this); + + }; + + jSlider.prototype.setSkin = function( skin ){ + if( this.skin_ ) + this.domNode.removeDependClass( this.skin_, "_" ); + + this.domNode.addDependClass( this.skin_ = skin, "_" ); + }; + + jSlider.prototype.setPointersIndex = function( i ){ + $.each(this.getPointers(), function(i){ + this.index( i ); + }); + }; + + jSlider.prototype.getPointers = function(){ + return this.o.pointers; + }; + + jSlider.prototype.generateScale = function(){ + if( this.settings.scale && this.settings.scale.length > 0 ){ + var str = ""; + var s = this.settings.scale; + var prc = Math.round((100/(s.length-1))*10)/10; + for( var i=0; i < s.length; i++ ){ + str += '<span style="left: ' + i*prc + '%">' + ( s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '' ) + '</span>'; + }; + return str; + } else return ""; + + return ""; + }; + + jSlider.prototype.drawScale = function(){ + this.domNode.find(OPTIONS.selector + "scale span ins").each(function(){ + $(this).css({ marginLeft: -$(this).outerWidth()/2 }); + }); + }; + + jSlider.prototype.onresize = function(){ + var self = this; + this.sizes = { + domWidth: this.domNode.width(), + domOffset: this.domNode.offset() + }; + + $.each(this.o.pointers, function(i){ + self.redraw(this); + }); + }; + + jSlider.prototype.update = function(){ + this.onresize(); + this.drawScale(); + }; + + jSlider.prototype.limits = function( x, pointer ){ + // smooth + if( !this.settings.smooth ){ + var step = this.settings.step*100 / ( this.settings.interval ); + x = Math.round( x/step ) * step; + } + + var another = this.o.pointers[1-pointer.uid]; + if( another && pointer.uid && x < another.value.prc ) x = another.value.prc; + if( another && !pointer.uid && x > another.value.prc ) x = another.value.prc; + + // base limit + if( x < 0 ) x = 0; + if( x > 100 ) x = 100; + + return Math.round( x*10 ) / 10; + }; + + jSlider.prototype.redraw = function( pointer ){ + if( !this.is.init ) return false; + + this.setValue(); + + // redraw range line + if( this.o.pointers[0] && this.o.pointers[1] ) + this.o.value.css({ left: this.o.pointers[0].value.prc + "%", width: ( this.o.pointers[1].value.prc - this.o.pointers[0].value.prc ) + "%" }); + + this.o.labels[pointer.uid].value.html( + this.nice( + pointer.value.origin + ) + ); + + // redraw position of labels + this.redrawLabels( pointer ); + + }; + + jSlider.prototype.redrawLabels = function( pointer ){ + + function setPosition( label, sizes, prc ){ + sizes.margin = -sizes.label/2; + + // left limit + label_left = sizes.border + sizes.margin; + if( label_left < 0 ) + sizes.margin -= label_left; + + // right limit + if( sizes.border+sizes.label / 2 > self.sizes.domWidth ){ + sizes.margin = 0; + sizes.right = true; + } else + sizes.right = false; + + label.o.css({ left: prc + "%", marginLeft: sizes.margin, right: "auto" }); + if( sizes.right ) label.o.css({ left: "auto", right: 0 }); + return sizes; + } + + var self = this; + var label = this.o.labels[pointer.uid]; + var prc = pointer.value.prc; + + var sizes = { + label: label.o.outerWidth(), + right: false, + border: ( prc * this.sizes.domWidth ) / 100 + }; + + if( !this.settings.single ){ + // glue if near; + var another = this.o.pointers[1-pointer.uid]; + var another_label = this.o.labels[another.uid]; + + switch( pointer.uid ){ + case 0: + if( sizes.border+sizes.label / 2 > another_label.o.offset().left-this.sizes.domOffset.left ){ + another_label.o.css({ visibility: "hidden" }); + another_label.value.html( this.nice( another.value.origin ) ); + + label.o.css({ visibility: "visible" }); + + prc = ( another.value.prc - prc ) / 2 + prc; + if( another.value.prc != pointer.value.prc ){ + label.value.html( this.nice(pointer.value.origin) + " – " + this.nice(another.value.origin) ); + sizes.label = label.o.outerWidth(); + sizes.border = ( prc * this.sizes.domWidth ) / 100; + } + } else { + another_label.o.css({ visibility: "visible" }); + } + break; + + case 1: + if( sizes.border - sizes.label / 2 < another_label.o.offset().left - this.sizes.domOffset.left + another_label.o.outerWidth() ){ + another_label.o.css({ visibility: "hidden" }); + another_label.value.html( this.nice(another.value.origin) ); + + label.o.css({ visibility: "visible" }); + + prc = ( prc - another.value.prc ) / 2 + another.value.prc; + if( another.value.prc != pointer.value.prc ){ + label.value.html( this.nice(another.value.origin) + " – " + this.nice(pointer.value.origin) ); + sizes.label = label.o.outerWidth(); + sizes.border = ( prc * this.sizes.domWidth ) / 100; + } + } else { + another_label.o.css({ visibility: "visible" }); + } + break; + } + } + + sizes = setPosition( label, sizes, prc ); + + /* draw second label */ + if( another_label ){ + var sizes = { + label: another_label.o.outerWidth(), + right: false, + border: ( another.value.prc * this.sizes.domWidth ) / 100 + }; + sizes = setPosition( another_label, sizes, another.value.prc ); + } + + this.redrawLimits(); + }; + + jSlider.prototype.redrawLimits = function(){ + if( this.settings.limits ){ + + var limits = [ true, true ]; + + for( key in this.o.pointers ){ + + if( !this.settings.single || key == 0 ){ + + var pointer = this.o.pointers[key]; + var label = this.o.labels[pointer.uid]; + var label_left = label.o.offset().left - this.sizes.domOffset.left; + + var limit = this.o.limits[0]; + if( label_left < limit.outerWidth() ) + limits[0] = false; + + var limit = this.o.limits[1]; + if( label_left + label.o.outerWidth() > this.sizes.domWidth - limit.outerWidth() ) + limits[1] = false; + } + + }; + + for( var i=0; i < limits.length; i++ ){ + if( limits[i] ) + this.o.limits[i].fadeIn("fast"); + else + this.o.limits[i].fadeOut("fast"); + }; + + } + }; + + jSlider.prototype.setValue = function(){ + var value = this.getValue(); + this.inputNode.attr( "value", value ); + this.onstatechange.call( this, value ); + }; + + jSlider.prototype.getValue = function(){ + if(!this.is.init) return false; + var $this = this; + + var value = ""; + $.each( this.o.pointers, function(i){ + if( this.value.prc != undefined && !isNaN(this.value.prc) ) value += (i > 0 ? ";" : "") + $this.prcToValue( this.value.prc ); + }); + return value; + }; + + jSlider.prototype.getPrcValue = function(){ + if(!this.is.init) return false; + var $this = this; + + var value = ""; + $.each( this.o.pointers, function(i){ + if( this.value.prc != undefined && !isNaN(this.value.prc) ) value += (i > 0 ? ";" : "") + this.value.prc; + }); + return value; + }; + + jSlider.prototype.prcToValue = function( prc ){ + + if( this.settings.heterogeneity && this.settings.heterogeneity.length > 0 ){ + var h = this.settings.heterogeneity; + + var _start = 0; + var _from = this.settings.from; + + for( var i=0; i <= h.length; i++ ){ + if( h[i] ) var v = h[i].split("/"); + else var v = [100, this.settings.to]; + + v[0] = new Number(v[0]); + v[1] = new Number(v[1]); + + if( prc >= _start && prc <= v[0] ) { + var value = _from + ( (prc-_start) * (v[1]-_from) ) / (v[0]-_start); + } + + _start = v[0]; + _from = v[1]; + }; + + } else { + var value = this.settings.from + ( prc * this.settings.interval ) / 100; + } + + return this.round( value ); + }; + + jSlider.prototype.valueToPrc = function( value, pointer ){ + if( this.settings.heterogeneity && this.settings.heterogeneity.length > 0 ){ + var h = this.settings.heterogeneity; + + var _start = 0; + var _from = this.settings.from; + + for (var i=0; i <= h.length; i++) { + if(h[i]) var v = h[i].split("/"); + else var v = [100, this.settings.to]; + v[0] = new Number(v[0]); v[1] = new Number(v[1]); + + if(value >= _from && value <= v[1]){ + var prc = pointer.limits(_start + (value-_from)*(v[0]-_start)/(v[1]-_from)); + } + + _start = v[0]; _from = v[1]; + }; + + } else { + var prc = pointer.limits((value-this.settings.from)*100/this.settings.interval); + } + + return prc; + }; + + jSlider.prototype.round = function( value ){ + value = Math.round( value / this.settings.step ) * this.settings.step; + if( this.settings.round ) value = Math.round( value * Math.pow(10, this.settings.round) ) / Math.pow(10, this.settings.round); + else value = Math.round( value ); + return value; + }; + + jSlider.prototype.nice = function( value ){ + value = value.toString().replace(/,/gi, ".").replace(/ /gi, "");; + + if( $.formatNumber ){ + return $.formatNumber( new Number(value), this.settings.format || {} ).replace( /-/gi, "−" ); + } + + else { + return new Number(value); + } + }; + + + function jSliderPointer(){ + Draggable.apply( this, arguments ); + } + jSliderPointer.prototype = new Draggable(); + + jSliderPointer.prototype.oninit = function( ptr, id, _constructor ){ + this.uid = id; + this.parent = _constructor; + this.value = {}; + this.settings = this.parent.settings; + }; + + jSliderPointer.prototype.onmousedown = function(evt){ + this._parent = { + offset: this.parent.domNode.offset(), + width: this.parent.domNode.width() + }; + this.ptr.addDependClass("hover"); + this.setIndexOver(); + }; + + jSliderPointer.prototype.onmousemove = function( evt, x ){ + var coords = this._getPageCoords( evt ); + this._set( this.calc( coords.x ) ); + }; + + jSliderPointer.prototype.onmouseup = function( evt ){ + if( this.parent.settings.callback && $.isFunction(this.parent.settings.callback) ) + this.parent.settings.callback.call( this.parent, this.parent.getValue() ); + + this.ptr.removeDependClass("hover"); + }; + + jSliderPointer.prototype.setIndexOver = function(){ + this.parent.setPointersIndex( 1 ); + this.index( 2 ); + }; + + jSliderPointer.prototype.index = function( i ){ + this.ptr.css({ zIndex: i }); + }; + + jSliderPointer.prototype.limits = function( x ){ + return this.parent.limits( x, this ); + }; + + jSliderPointer.prototype.calc = function(coords){ + var x = this.limits(((coords-this._parent.offset.left)*100)/this._parent.width); + return x; + }; + + jSliderPointer.prototype.set = function( value, opt_origin ){ + this.value.origin = this.parent.round(value); + this._set( this.parent.valueToPrc( value, this ), opt_origin ); + }; + + jSliderPointer.prototype._set = function( prc, opt_origin ){ + if( !opt_origin ) + this.value.origin = this.parent.prcToValue(prc); + + this.value.prc = prc; + this.ptr.css({ left: prc + "%" }); + this.parent.redraw(this); + }; + +})(jQuery); |
