diff options
Diffstat (limited to 'www/lib')
87 files changed, 5619 insertions, 0 deletions
diff --git a/www/lib/angular-awesome-slider/.bower.json b/www/lib/angular-awesome-slider/.bower.json new file mode 100644 index 00000000..2c894ea6 --- /dev/null +++ b/www/lib/angular-awesome-slider/.bower.json @@ -0,0 +1,52 @@ +{ + "name": "angular-awesome-slider", + "version": "2.4.0", + "author": { + "name": "Julien Valéry", + "email": "darul75@gmail.com" + }, + "homepage": "https://github.com/darul75/angular-awesome-slider", + "repository": { + "type": "git", + "url": "https://github.com/darul75/angular-awesome-slider.git" + }, + "keywords": [ + "angular", + "slider", + "control", + "ui" + ], + "main": [ + "./dist/angular-awesome-slider.min.js", + "./dist/css/angular-awesome-slider.min.css" + ], + "dependencies": { + "angular": "1.3.x" + }, + "devDependencies": { + "angular-mocks": "1.3.x", + "bourbon": "~4.2.2" + }, + "authors": [ + "darul <darul75@gmail.com>" + ], + "description": "AngularJS directive slider control.", + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "_release": "2.4.0", + "_resolution": { + "type": "version", + "tag": "2.4.0", + "commit": "d9370b59cfda83c58f349dd9a6666bf1ef33c300" + }, + "_source": "git://github.com/darul75/angular-awesome-slider.git", + "_target": "~2.4.0", + "_originalSource": "angular-awesome-slider", + "_direct": true +} diff --git a/www/lib/angular-awesome-slider/Gruntfile.js b/www/lib/angular-awesome-slider/Gruntfile.js new file mode 100644 index 00000000..4674e812 --- /dev/null +++ b/www/lib/angular-awesome-slider/Gruntfile.js @@ -0,0 +1,125 @@ +module.exports = function(grunt) { + 'use strict'; + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + jshint: { + files: ['src/core/**/*.js', 'test/**/*.js'] + }, + // BOWER + bower: { + install: { + options: { + targetDir: './bower_components' + } + } + }, + // KARMA TASK CONFIG + karma: { + options: { + basePath: './', + frameworks: ['jasmine'], + files: [ + 'bower_components/angular/angular.js', + 'bower_components/angular-mocks/angular-mocks.js', + 'dist/angular-awesome-slider.min.js', + /*'src/core/ng-slider.js', + 'src/core/config/constants.js', + 'src/core/model/draggable.factory.js', + 'src/core/model/pointer.factory.js', + 'src/core/model/slider.factory.js', + 'src/core/utils/utils.factory.js', + 'src/core/template/slider.tmpl.js',*/ + 'dist/css/angular-awesome-slider.min.css', + 'test/**/*Spec.js' + ], + autoWatch: true, + singleRun: true + }, + unit: { + options: { + browsers: ['PhantomJS'] + } + }, + captureTimeout: 20000, + continuous: { + options: { + browsers: ['PhantomJS'] + } + } + }, + // LESS CSS TASKS + less: { + development: { + options: { + paths: ['src/css/less/'] + }, + files: { + 'src/css/angular-awesome-slider.css': 'src/css/less/main.less' + } + } + }, + // UGLIFY TASK + uglify: { + task1: { + options: { + preserveComments: 'some', + report: 'min', + banner: '/** \n* @license <%= pkg.name %> - v<%= pkg.version %>\n' + + '* (c) 2013 Julien VALERY https://github.com/darul75/angular-awesome-slider\n' + + '* License: MIT \n**/\n' + }, + files: { + 'dist/angular-awesome-slider.min.js': [ + 'src/core/index.js', + 'src/core/config/constants.js', + 'src/core/utils/utils.factory.js', + 'src/core/model/draggable.factory.js', + 'src/core/model/pointer.factory.js', + 'src/core/model/slider.factory.js', + 'src/core/template/slider.tmpl.js' + ] + /*'dist/ng-slider.tmpl.min.js': ['src/ng-slider.tmpl.js']*/ + } + } + }, + // MINIFY CSS + cssmin: { + options: { + keepSpecialComments: false, + banner: '/** \n* @license <%= pkg.name %> - v<%= pkg.version %>\n' + + '* (c) 2013 Julien VALERY https://github.com/darul75/angular-awesome-slider\n' + + '* License: MIT \n**/\n' + }, + compress: { + files: { + 'dist/css/angular-awesome-slider.min.css': ['src/css/angular-awesome-slider.css'] + } + } + }, + // COPY CONTENT + copy: { + main: { + files: [ + // slider + {expand: true, flatten: true, src: ['src/img/*'], dest: 'dist/img/'}, + ] + } + }, +}); + + // LOAD PLUGINS + grunt.loadNpmTasks('grunt-bower-task'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-karma'); + + // TASK REGISTER + //grunt.registerTask('default', ['jshint', 'cssmin', 'uglify:task1', 'karma']); + grunt.registerTask('default', ['bower', 'copy', 'less', 'cssmin', 'jshint', 'uglify:task1']); + grunt.registerTask('test-continuous', ['jshint', 'bower', 'karma:unit']); +}; diff --git a/www/lib/angular-awesome-slider/MIT-LICENSE.txt b/www/lib/angular-awesome-slider/MIT-LICENSE.txt new file mode 100644 index 00000000..c9b4ae36 --- /dev/null +++ b/www/lib/angular-awesome-slider/MIT-LICENSE.txt @@ -0,0 +1,20 @@ +The MIT License (MIT) +Copyright (c) 2013 Julien Valéry + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE.
\ No newline at end of file diff --git a/www/lib/angular-awesome-slider/README.md b/www/lib/angular-awesome-slider/README.md new file mode 100644 index 00000000..ff9ffd92 --- /dev/null +++ b/www/lib/angular-awesome-slider/README.md @@ -0,0 +1,255 @@ +angular-awesome-slider [](http://badge.fury.io/js/angular-awesome-slider) [](https://travis-ci.org/darul75/angular-awesome-slider) [](https://sourcegraph.com/github.com/darul75/angular-awesome-slider) [](https://gitter.im/darul75/angular-awesome-slider?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +===================== + +Angular directive slider control. + +**No JQUERY dependency needed anymore** + +**Skins available** + +Why +------------- + +Original implementation provides very nice features but too much for my needs, this one just simplified. + +Source files were divided in several files, and not angular integrated. + +Screenshot +------------- + + + +Demo +------------- +http://darul75.github.io/angular-awesome-slider/ + +http://jsfiddle.net/darul75/g9e9n8xc/ + +How to use it +------------- + +You should already have script required for Angular. + +```html +<script type="text/javascript" src="angular.min.js"></script> +``` + +to the list above, you should add: + +```html +<link rel="stylesheet" type="text/css" href="angular-awesome-slider.min.css"> +``` + +```html +<script type="text/javascript" src="angular-awesome-slider.min.js"></script> +``` +in case you want to use your own template, omit the last line and instead add some template code +to your project: +```html +<script type="text/ng-template" id="aw-select.tmpl.html"> + .... +</script> +``` + +Then, inject `angularAwesomeSlider` in your application module: + +```javascript +angular.module('myApp', ['angularAwesomeSlider']); +``` + +and then just add an `input` with `slider` directive name attribute, `value` and `options` scope variable attribute. + +```html +<input ng-model="value" type="text" id="mySlider1" slider options="options" /> +``` + +'value' your slider scope end value, as string. +'options' slider scope options value as json. +'ng-disabled' angular common attribute. + +```javascript +$scope.value = "10"; +// $scope.value = "10;15"; FOR DOUBLE VIEW +``` + +### Options + +Options for your slider in json format {from:.....} + +* `from`: start value +* `to`: end value +* `step`: step value +* `dimension`: string, example " $" +* `scale`: array for scale +* `round`: how many numbers allowed after comma +* `smooth`: true/false; false snaps the button to value +* `vertical`: true/false; vertical slider, default false +* `skin`: empty or 'blue' 'plastic' 'round' +* `css`: hash object, do not mix with 'skin' ! +* `className`: custom class added to root slider DOM +* `realtime`: triggers changes and model update on every moves +* `threshold`: minimum distance allowed between 2 pointers, default both pointers overlap +* `limits`: true/false; toggles bounds labels visibility +* `modelLabels`: custom model for pointers labels based on pointer value +* `watchOptions`: default is 'true', watch this options changes by [equals](https://docs.angularjs.org/api/ng/function/angular.equals) +* `heterogeneity: array [percentage of point on slider]/[value in that point] + + +``` +css: { + background: {"background-color": "silver"}, + before: {"background-color": "purple"},// zone before default value + default: {"background-color": "white"}, // default value: 1px + after: {"background-color": "green"}, // zone after default value + pointer: {"background-color": "red"} // circle pointer + range: {"background-color": "red"} // use it if double value +} +```` +* `callback` : function triggering current value, can be useful + +```javascript +// example +callback: function(value, released) { + // useful when combined with 'realtime' option + // released it triggered when mouse up + console.log(value + " " + released); +} +``` + +* `scale` : model for slide scale + +```javascript +// divide slider into parts +scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40] + +// or with some custom labels +scale: [{val:10, label:'low'}, {val:25, label:'middle'}, {val:30, label:'high'}] +``` + +* `modelLabels` : model for pointers labels by object or function + +```javascript +// overrides default value label displayed combined with 'dimension' by an arbitrary label model +modelLabels: {1: 'top', 2: 'middle', 3: 'bottom'}; + +// or dynamicaly based +modelLabels: function(value) { + return 'my value is' + value; // momentjs external library call... +} +``` + +* `heterogeneity` : repartition of possible values +```javascript +// example here, first value is percentage of slider length, second is value +heterogeneity: ['50/100', '75/250'] // 50% value is 100, 75% value must be 250 +``` + +Installation +------------ + +Using npm: + +``` +npm install angular-awesome-slider +``` + +Using bower: + +``` +bower install angular-awesome-slider +``` + +RELEASE +------------- + +* 2.4.0: fix while updating both range values from code +* 2.3.9: callback not fired in case slider is on threshold values +* 2.3.8: bind to touch AND non touch events +* 2.3.7: heterogeneity option +* 2.3.6: watch options, fix threshold and click handler + date display testing. +* 2.3.5: do not remember +* 2.3.4: fix css regressions + modelLabels with function +* 2.3.3: details for modelLabels options + merge showLabels option +* 2.3.2: fix css pointer position + hover sking pointers background positions +* 2.3.1: fix from and to in floating values +* 2.3.0: new module name, no more ng-sorry-prefix, classname option, sass/scss support, scale object option +* 2.2.6: refactoring classnames +* 2.2.5: skin availables + less all css +* 2.2.4: fix when 2 pointers overlap on limits +* 2.2.3: mouse up event indicator in callback +* 2.2.2: default indicator display + visibility and move events +* 2.2.1: fix disable+default position css+decimal value on init value +* 2.2.0: handle from greater than to + gap pointer threshold option +* 2.1.9: fix labels positions while gluing, gap was too big + options changed watch by value +* 2.1.8: fix labels positions while gluing + realtime model changes option + ngDisable option fix +* 2.1.7: fix pointer position on click for double value +* 2.1.6: starting mocha tests +* 2.1.5: directive refactoring +* 2.1.4: fix overlap on labels +* 2.1.3: bug fixes, refactoring, inline options param +* 2.1.2: bug fixes, changes in z-index via CSS and not js +* 2.1.1: override css, colors... +* 2.1.0: bug fixes +* 2.0.0: no JQuery + +### Build + +You can run the tests by running + +``` +npm install +``` +or +``` +npm test +``` + +assuming you already have `grunt` installed, otherwise you also need to do: + +``` +npm install -g grunt-cli +``` + +### Issue + +To help me on reproducing any issues, please feel free to modify/fork this fiddle: http://jsfiddle.net/darul75/b09m7183/ + +## Metrics + +[](https://nodei.co/npm/ng-slider/) + +## who's who + +Who use it ? feel free add issue or edit readme with PR, to see how you use it and give some ideas, thx + +[openenergygroup](https://www.openenergygroup.com/) + +[google?](https://www.google.com) + +## License + +The MIT License (MIT) + +Copyright (c) 2013 Julien Valéry + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. + + + + diff --git a/www/lib/angular-awesome-slider/bower.json b/www/lib/angular-awesome-slider/bower.json new file mode 100644 index 00000000..264f5ba4 --- /dev/null +++ b/www/lib/angular-awesome-slider/bower.json @@ -0,0 +1,42 @@ +{ + "name": "angular-awesome-slider", + "version": "2.4.0", + "author": { + "name": "Julien Valéry", + "email": "darul75@gmail.com" + }, + "homepage": "https://github.com/darul75/angular-awesome-slider", + "repository": { + "type": "git", + "url": "https://github.com/darul75/angular-awesome-slider.git" + }, + "keywords": [ + "angular", + "slider", + "control", + "ui" + ], + "main": [ + "./dist/angular-awesome-slider.min.js", + "./dist/css/angular-awesome-slider.min.css" + ], + "dependencies": { + "angular": "1.3.x" + }, + "devDependencies": { + "angular-mocks": "1.3.x", + "bourbon": "~4.2.2" + }, + "authors": [ + "darul <darul75@gmail.com>" + ], + "description": "AngularJS directive slider control.", + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/www/lib/angular-awesome-slider/dist/angular-awesome-slider.min.js b/www/lib/angular-awesome-slider/dist/angular-awesome-slider.min.js new file mode 100644 index 00000000..c2c43b84 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/angular-awesome-slider.min.js @@ -0,0 +1,6 @@ +/** +* @license angular-awesome-slider - v2.4.0 +* (c) 2013 Julien VALERY https://github.com/darul75/angular-awesome-slider +* License: MIT +**/ +!function(a){"use strict";a.module("angularAwesomeSlider",[]).directive("slider",["$compile","$templateCache","$timeout","$window","slider",function(b,c,d,e,f){return{restrict:"AE",require:"?ngModel",scope:{options:"=",ngDisabled:"="},priority:1,link:function(g,h,i,j){function k(){a.element(e).bind("resize",function(a){g.slider.onresize()})}if(j){if(!g.options)throw new Error('You must provide a value for "options" attribute.');a.injector();a.isString(g.options)&&(g.options=a.toJson(g.options)),g.mainSliderClass="jslider",g.mainSliderClass+=g.options.skin?" jslider_"+g.options.skin:" ",g.mainSliderClass+=g.options.vertical?" vertical ":"",g.mainSliderClass+=g.options.css?" sliderCSS":"",g.mainSliderClass+=g.options.className?" "+g.options.className:"",g.options.limits=a.isDefined(g.options.limits)?g.options.limits:!0,h.after(b(c.get("ng-slider/slider-bar.tmpl.html"))(g,function(a,b){b.tmplElt=a}));var l=!1,m=function(){g.from=""+g.options.from,g.to=""+g.options.to,g.options.calculate&&"function"==typeof g.options.calculate&&(g.from=g.options.calculate(g.from),g.to=g.options.calculate(g.to));var b={from:g.options.round?parseFloat(g.options.from):parseInt(g.options.from,10),to:g.options.round?parseFloat(g.options.to):parseInt(g.options.to,10),step:g.options.step,smooth:g.options.smooth,limits:g.options.limits,round:g.options.round||!1,value:j.$viewValue,dimension:"",scale:g.options.scale,modelLabels:g.options.modelLabels,vertical:g.options.vertical,css:g.options.css,className:g.options.className,realtime:g.options.realtime,cb:n,threshold:g.options.threshold,heterogeneity:g.options.heterogeneity};b.calculate=g.options.calculate||void 0,b.onstatechange=g.options.onstatechange||void 0,g.slider=g.slider?g.slider.init(h,g.tmplElt,b):p(h,g.tmplElt,b),l||k();var c=g.tmplElt.find("div")[7];a.element(c).html(g.slider.generateScale()),g.slider.drawScale(c),g.ngDisabled&&o(g.ngDisabled),l=!0};j.$render=function(){if((j.$viewValue||0===j.$viewValue)&&("number"==typeof j.$viewValue&&(j.$viewValue=""+j.$viewValue),j.$viewValue.split(";")[1]||(g.mainSliderClass+=" jslider-single"),g.slider)){var a=g.slider.getPointers()[0];if(a.set(g.from,!0),j.$viewValue.split(";")[1]){var b=g.slider.getPointers()[1];a.set(g.to,!0),b.set(j.$viewValue.split(";")[1],!0)}a.set(j.$viewValue.split(";")[0],!0)}};var n=function(a,b){g.disabled||(g.$apply(function(){j.$setViewValue(a)}),g.options.callback&&g.options.callback(a,b))};g.$watch("options",function(a){d(function(){m()})},g.watchOptions||!0);var o=function(a){g.disabled=a,g.slider&&(g.tmplElt.toggleClass("disabled"),g.slider.disable(a))};g.$watch("ngDisabled",function(a){o(a)}),g.limitValue=function(b){return g.options.modelLabels?a.isFunction(g.options.modelLabels)?g.options.modelLabels(b):void 0!==g.options.modelLabels[b]?g.options.modelLabels[b]:b:b};var p=function(a,b,c){return new f(a,b,c)}}}}}]).config(function(){}).run(function(){})}(angular),function(a){"use strict";a.module("angularAwesomeSlider").constant("sliderConstants",{SLIDER:{settings:{from:1,to:40,step:1,smooth:!0,limits:!1,round:!1,value:"3",dimension:"",vertical:!1,calculate:!1,onstatechange:!1,callback:!1,realtime:!1},className:"jslider",selector:".jslider-",css:{visible:{visibility:"visible"},hidden:{visibility:"hidden"}}},EVENTS:{}})}(angular),function(a){"use strict";a.module("angularAwesomeSlider").factory("sliderUtils",["$window",function(a){return{offset:function(a){var b=a[0],c=0,d=0,e=document.documentElement||document.body,f=window.pageXOffset||e.scrollLeft,g=window.pageYOffset||e.scrollTop;return c=b.getBoundingClientRect().left+f,d=b.getBoundingClientRect().top+g,{left:c,top:d}},browser:function(){var b=a.navigator.userAgent,c={mozilla:/mozilla/i,chrome:/chrome/i,safari:/safari/i,firefox:/firefox/i,ie:/internet explorer/i};for(var d in c)if(c[d].test(b))return d;return"unknown"}}}])}(angular),function(a){"use strict";a.module("angularAwesomeSlider").factory("sliderDraggable",["sliderUtils",function(b){function c(){this._init.apply(this,arguments)}return c.prototype.oninit=function(){},c.prototype.events=function(){},c.prototype.onmousedown=function(){this.ptr.css({position:"absolute"})},c.prototype.onmousemove=function(a,b,c){this.ptr.css({left:b,top:c})},c.prototype.onmouseup=function(){},c.prototype.isDefault={drag:!1,clicked:!1,toclick:!0,mouseup:!1},c.prototype._init=function(){if(arguments.length>0){if(this.ptr=arguments[0],this.parent=arguments[2],!this.ptr)return;this.is={},a.extend(this.is,this.isDefault);var c=b.offset(this.ptr);this.d={left:c.left,top:c.top,width:this.ptr[0].clientWidth,height:this.ptr[0].clientHeight},this.oninit.apply(this,arguments),this._events()}},c.prototype._getPageCoords=function(a){return a.targetTouches&&a.targetTouches[0]?{x:a.targetTouches[0].pageX,y:a.targetTouches[0].pageY}:{x:a.pageX,y:a.pageY}},c.prototype._bindEvent=function(a,b,c){this.supportTouches_&&a[0].addEventListener(this.events_[b].touch,c,!1),a.bind(this.events_[b].nonTouch,c)},c.prototype._events=function(){var b=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 c=a.element(window.document);this._bindEvent(c,"move",function(a){b.is.drag&&(a.stopPropagation(),a.preventDefault(),b.parent.disabled||b._mousemove(a))}),this._bindEvent(c,"down",function(a){b.is.drag&&(a.stopPropagation(),a.preventDefault())}),this._bindEvent(c,"up",function(a){b._mouseup(a)}),this._bindEvent(this.ptr,"down",function(a){return b._mousedown(a),!1}),this._bindEvent(this.ptr,"up",function(a){b._mouseup(a)}),this.events()},c.prototype._mousedown=function(b){this.is.drag=!0,this.is.clicked=!1,this.is.mouseup=!1;var c=this._getPageCoords(b);this.cx=c.x-this.ptr[0].offsetLeft,this.cy=c.y-this.ptr[0].offsetTop,a.extend(this.d,{left:c.x,top:c.y,width:this.ptr[0].clientWidth,height:this.ptr[0].clientHeight}),this.outer&&this.outer.get(0)&&this.outer.css({height:Math.max(this.outer.height(),$(document.body).height()),overflow:"hidden"}),this.onmousedown(b)},c.prototype._mousemove=function(a){this.is.toclick=!1;var b=this._getPageCoords(a);this.onmousemove(a,b.x-this.cx,b.y-this.cy)},c.prototype._mouseup=function(a){if(this.is.drag){this.is.drag=!1;var c=b.browser();this.outer&&this.outer.get(0)&&("mozilla"===c?this.outer.css({overflow:"hidden"}):this.outer.css({overflow:"visible"}),this.outer.css({height:"auto"})),this.onmouseup(a)}},c}])}(angular),function(a){"use strict";a.module("angularAwesomeSlider").factory("sliderPointer",["sliderDraggable","sliderUtils",function(b,c){function d(){b.apply(this,arguments)}return d.prototype=new b,d.prototype.oninit=function(b,c,d,e){this.uid=c,this.parent=e,this.value={},this.vertical=d,this.settings=a.copy(e.settings),this.threshold=this.settings.threshold},d.prototype.onmousedown=function(a){var b=c.offset(this.parent.domNode),d={left:b.left,top:b.top,width:this.parent.domNode[0].clientWidth,height:this.parent.domNode[0].clientHeight};this._parent={offset:d,width:d.width,height:d.height},this.ptr.addClass("jslider-pointer-hover")},d.prototype.onmousemove=function(b,c,d){var e=this._getPageCoords(b);this._set(this.vertical?this.calc(e.y):this.calc(e.x)),this.settings.realtime&&this.settings.cb&&a.isFunction(this.settings.cb)&&this.settings.cb.call(this.parent,this.parent.getValue(),!this.is.drag)},d.prototype.onmouseup=function(b){this.settings.cb&&a.isFunction(this.settings.cb)&&this.settings.cb.call(this.parent,this.parent.getValue(),!this.is.drag),this.is.drag||this.ptr.removeClass("jslider-pointer-hover")},d.prototype.limits=function(a){return this.parent.limits(a,this)},d.prototype.calc=function(a){return this.vertical?this.limits(100*(a-this._parent.offset.top)/this._parent.height):this.limits(100*(a-this._parent.offset.left)/this._parent.width)},d.prototype.set=function(a,b){this.value.origin=this.parent.round(a),this._set(this.parent.valueToPrc(a,this),b)},d.prototype._set=function(a,b){this.allowed=!0;var c=this.value.origin,d=this.value.prc;if(this.value.origin=this.parent.prcToValue(a),this.value.prc=a,this.threshold&&this.parent.o.pointers[1]){var e=this.value.origin,f=this.parent.o.pointers[0===this.uid?1:0].value.origin;this.allowed=Math.abs(f-e)>=this.threshold,this.allowed||void 0===c||void 0===d||(this.value.origin=c,this.value.prc=d)}this.vertical?this.ptr.css({top:this.value.prc+"%",marginTop:-5}):this.ptr.css({left:this.value.prc+"%"}),this.parent.redraw(this)},d}])}(angular),function(a){"use strict";a.module("angularAwesomeSlider").factory("slider",["sliderPointer","sliderConstants","sliderUtils",function(b,c,d){function e(){return this.init.apply(this,arguments)}return e.prototype.init=function(b,d,e){return this.settings=e,this.inputNode=b,this.inputNode.addClass("ng-hide"),this.settings.interval=this.settings.to-this.settings.from,this.settings.calculate&&a.isFunction(this.settings.calculate)&&(this.nice=this.settings.calculate),this.settings.onstatechange&&a.isFunction(this.settings.onstatechange)&&(this.onstatechange=this.settings.onstatechange),this.css=c.SLIDER.css,this.is={init:!1},this.o={},this.initValue={},this.isAsc=e.from<e.to,this.create(d),this},e.prototype.create=function(c){var e=this;this.domNode=c;var f=this.domNode.find("div"),g=this.domNode.find("i"),h=a.element,i=a.extend,j=a.forEach,k=h(f[1]),l=h(f[2]),m=h(f[5]),n=h(f[6]),o=h(g[0]),p=h(g[1]),q=h(g[2]),r=h(g[3]),s=h(g[4]),t=h(g[5]),u=h(g[6]),v=[k,l],w=d.offset(this.domNode),x={left:w.left,top:w.top,width:this.domNode[0].clientWidth,height:this.domNode[0].clientHeight},y=e.settings.value.split(";");this.sizes={domWidth:this.domNode[0].clientWidth,domHeight:this.domNode[0].clientHeight,domOffset:x},i(this.o,{pointers:{},labels:{0:{o:m},1:{o:n}},limits:{0:a.element(f[3]),1:a.element(f[4])},indicators:{0:r,1:s,2:t,3:u}}),i(this.o.labels[0],{value:this.o.labels[0].o.find("span")}),i(this.o.labels[1],{value:this.o.labels[1].o.find("span")}),this.settings.single=!e.settings.value.split(";")[1],this.settings.single&&q.addClass("ng-hide"),j(v,function(c,f){e.settings=a.copy(e.settings);var g,h,i,j,k,l=y[f];l&&(e.o.pointers[f]=new b(c,f,e.settings.vertical,e),g=y[f-1],h=g?parseInt(g,10):void 0,l=e.settings.round?parseFloat(l):parseInt(l,10),(g&&e.isAsc?h>l:l>h)&&(l=g),i=e.isAsc?l>e.settings.to:l<e.settings.to,j=i?e.settings.to:l,e.o.pointers[f].set(j,!0),k=d.offset(e.o.pointers[f].ptr),e.o.pointers[f].d={left:k.left,top:k.top})}),e.domNode.bind("mousedown",e.clickHandler.apply(e)),this.o.value=h(this.domNode.find("i")[2]),this.is.init=!0,this.settings.css&&(o.css(this.settings.css.background?this.settings.css.background:{}),p.css(this.settings.css.background?this.settings.css.background:{}),this.o.pointers[1]||(r.css(this.settings.css.before?this.settings.css.before:{}),u.css(this.settings.css.after?this.settings.css.after:{})),s.css(this.settings.css["default"]?this.settings.css["default"]:{}),t.css(this.settings.css["default"]?this.settings.css["default"]:{}),q.css(this.settings.css.range?this.settings.css.range:{}),k.css(this.settings.css.pointer?this.settings.css.pointer:{}),l.css(this.settings.css.pointer?this.settings.css.pointer:{})),j(this.o.pointers,function(a,b){e.redraw(a)})},e.prototype.clickHandler=function(){var b=this,c=function(a){var c=b.o.pointers[0].ptr,e=b.o.pointers[1].ptr,f=d.offset(c),g=d.offset(e);b.o.pointers[0].d={left:f.left,top:f.top,width:c[0].clientWidth,height:c[0].clientHeight},b.o.pointers[1].d={left:g.left,top:g.top,width:e[0].clientWidth,height:e[0].clientHeight}};return function(e){if(!b.disabled){var f=b.settings.vertical,g=0,h=d.offset(b.domNode),i=b.o.pointers[0],j=b.o.pointers[1]?b.o.pointers[1]:null,k=e.originalEvent?e.originalEvent:e,l=f?k.pageY:k.pageX,m=f?"top":"left",n={left:h.left,top:h.top,width:b.domNode[0].clientWidth,height:b.domNode[0].clientHeight},o=b.o.pointers[g];if(j){j.d.width||c();var p=d.offset(i.ptr)[m],q=d.offset(j.ptr)[m],r=Math.abs((q-p)/2),s=l>=q||l>=q-r;s&&(o=j)}o._parent={offset:n,width:n.width,height:n.height};var t=i._getPageCoords(e);return o.cx=t.x-o.d.left,o.cy=t.y-o.d.top,o.onmousemove(e,t.x,t.y),o.onmouseup(),a.extend(o.d,{left:t.x,top:t.y}),b.redraw(o),!1}}},e.prototype.disable=function(a){this.disabled=a},e.prototype.nice=function(a){return a},e.prototype.onstatechange=function(){},e.prototype.limits=function(a,b){if(!this.settings.smooth){var c=100*this.settings.step/this.settings.interval;a=Math.round(a/c)*c}if(b){var d=this.o.pointers[1-b.uid];d&&b.uid&&a<d.value.prc&&(a=d.value.prc),d&&!b.uid&&a>d.value.prc&&(a=d.value.prc)}return 0>a&&(a=0),a>100&&(a=100),Math.round(10*a)/10},e.prototype.getPointers=function(){return this.o.pointers},e.prototype.generateScale=function(){if(this.settings.scale&&this.settings.scale.length>0){for(var a,b,c="",d=this.settings.scale,e={},f=this.settings.vertical?"top":"left",g=0;g<d.length;g++)d[g].val||(a=(100/(d.length-1)).toFixed(2),c+='<span style="'+f+": "+g*a+'%">'+("|"!=d[g]?"<ins>"+d[g]+"</ins>":"")+"</span>"),d[g].val<=this.settings.to&&d[g].val>=this.settings.from&&!e[d[g].val]&&(e[d[g].val]=!0,a=this.valueToPrc(d[g].val),b=d[g].label?d[g].label:d[g].val,c+='<span style="'+f+": "+a+'%"><ins>'+b+"</ins></span>");return c}return""},e.prototype.onresize=function(){var b=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}},a.forEach(this.o.pointers,function(a,c){b.redraw(a)})},e.prototype.update=function(){this.onresize(),this.drawScale()},e.prototype.drawScale=function(b){a.forEach(a.element(b).find("ins"),function(a,b){a.style.marginLeft=-a.clientWidth/2})},e.prototype.redraw=function(b){if(!this.is.init)return this.o.pointers[0]&&!this.o.pointers[1]?(this.originValue=this.o.pointers[0].value.prc,this.o.indicators[0].css(this.settings.vertical?{top:0,height:this.o.pointers[0].value.prc+"%"}:{left:0,width:this.o.pointers[0].value.prc+"%"}),this.o.indicators[1].css(this.settings.vertical?{top:this.o.pointers[0].value.prc+"%"}:{left:this.o.pointers[0].value.prc+"%"}),this.o.indicators[3].css(this.settings.vertical?{top:this.o.pointers[0].value.prc+"%"}:{left:this.o.pointers[0].value.prc+"%"})):(this.o.indicators[2].css(this.settings.vertical?{top:this.o.pointers[1].value.prc+"%"}:{left:this.o.pointers[1].value.prc+"%"}),this.o.indicators[0].css(this.settings.vertical?{top:0,height:"0"}:{left:0,width:"0"}),this.o.indicators[3].css(this.settings.vertical?{top:"0",height:"0"}:{left:"0",width:"0"})),!1;this.setValue();var c,d;this.o.pointers[0]&&this.o.pointers[1]&&(c=this.settings.vertical?{top:this.o.pointers[0].value.prc+"%",height:this.o.pointers[1].value.prc-this.o.pointers[0].value.prc+"%"}:{left:this.o.pointers[0].value.prc+"%",width:this.o.pointers[1].value.prc-this.o.pointers[0].value.prc+"%"},this.o.value.css(c),this.o.pointers[0].value.prc===this.o.pointers[1].value.prc&&this.o.pointers[1].ptr.css("z-index",0===this.o.pointers[0].value.prc?"3":"1")),this.o.pointers[0]&&!this.o.pointers[1]&&(d=this.o.pointers[0].value.prc-this.originValue,d>=0?this.o.indicators[3].css(this.settings.vertical?{height:d+"%"}:{width:d+"%"}):this.o.indicators[3].css(this.settings.vertical?{height:0}:{width:0}),this.o.pointers[0].value.prc<this.originValue?this.o.indicators[0].css(this.settings.vertical?{height:this.o.pointers[0].value.prc+"%"}:{width:this.o.pointers[0].value.prc+"%"}):this.o.indicators[0].css(this.settings.vertical?{height:this.originValue+"%"}:{width:this.originValue+"%"}));var e=this.nice(b.value.origin);this.settings.modelLabels&&(e=a.isFunction(this.settings.modelLabels)?this.settings.modelLabels(e):void 0!==this.settings.modelLabels[e]?this.settings.modelLabels[e]:e),this.o.labels[b.uid].value.html(e),this.redrawLabels(b)},e.prototype.redrawLabels=function(a){function b(a,b,d){b.margin=-b.label/2;var e=c.settings.vertical?c.sizes.domHeight:c.sizes.domWidth;if(c.sizes.domWidth){var f=b.border+b.margin;0>f&&(b.margin-=f),c.sizes.domWidth>0&&b.border+b.label/2>e?(b.margin=0,b.right=!0):b.right=!1}return c.settings.vertical?a.o.css({top:d+"%",marginLeft:"20px",marginTop:b.margin,bottom:"auto"}):a.o.css({left:d+"%",marginLeft:b.margin+"px",right:"auto"}),b.right&&c.sizes.domWidth>0&&(c.settings.vertical?a.o.css({top:"auto",bottom:0}):a.o.css({left:"auto",right:0})),b}var c=this,d=this.o.labels[a.uid],e=a.value.prc,f=0===d.o[0].offsetWidth?7*d.o[0].textContent.length:d.o[0].offsetWidth;this.sizes.domWidth=this.domNode[0].clientWidth,this.sizes.domHeight=this.domNode[0].clientHeight;var g,h,i={label:c.settings.vertical?d.o[0].offsetHeight:f,right:!1,border:e*(c.settings.vertical?this.sizes.domHeight:this.sizes.domWidth)/100},j=0===a.uid?1:0;if(!this.settings.single&&!this.settings.vertical){g=this.o.labels[j],h=this.o.pointers[j];var k=this.o.labels[0],l=this.o.labels[1],m=this.o.pointers[0],n=this.o.pointers[1],o=n.ptr[0].offsetLeft-m.ptr[0].offsetLeft,p=this.nice(h.value.origin);if(k.o.css(this.css.visible),l.o.css(this.css.visible),p=this.getLabelValue(p),o+10<k.o[0].offsetWidth+l.o[0].offsetWidth){if(g.o.css(this.css.hidden),g.value.html(p),e=(h.value.prc-e)/2+e,h.value.prc!=a.value.prc){p=this.nice(this.o.pointers[0].value.origin);var q=this.nice(this.o.pointers[1].value.origin);p=this.getLabelValue(p),q=this.getLabelValue(q),d.value.html(p+" – "+q),i.label=d.o[0].offsetWidth,i.border=e*r/100}}else g.value.html(p),g.o.css(this.css.visible)}i=b(d,i,e);var r=c.settings.vertical?c.sizes.domHeight:c.sizes.domWidth;if(g){var s=0===d.o[0].offsetWidth?d.o[0].textContent.length/2*7:d.o[0].offsetWidth,t={label:c.settings.vertical?g.o[0].offsetHeight:s,right:!1,border:h.value.prc*this.sizes.domWidth/100};i=b(g,t,h.value.prc)}this.redrawLimits()},e.prototype.redrawLimits=function(){if(this.settings.limits){var b=[!0,!0],c=0;for(var d in this.o.pointers)if(!this.settings.single||0===d){var e=this.o.pointers[d],f=this.o.labels[e.uid],g=f.o[0].offsetLeft-this.sizes.domOffset.left,h=this.o.limits[0];g<h[0].clientWidth&&(b[0]=!1),h=this.o.limits[1],g+f.o[0].clientWidth>this.sizes.domWidth-h[0].clientWidth&&(b[1]=!1)}for(;c<b.length;c++)b[c]?a.element(this.o.limits[c]).addClass("animate-show"):a.element(this.o.limits[c]).addClass("animate-hidde")}},e.prototype.setValue=function(){var a=this.getValue();this.inputNode.attr("value",a),this.onstatechange.call(this,a,this.inputNode)},e.prototype.getValue=function(){if(!this.is.init)return!1;var b=this,c="";return a.forEach(this.o.pointers,function(a,d){void 0===a.value.prc||isNaN(a.value.prc)||(c+=(d>0?";":"")+b.prcToValue(a.value.prc))}),c},e.prototype.getLabelValue=function(b){return this.settings.modelLabels?a.isFunction(this.settings.modelLabels)?this.settings.modelLabels(b):void 0!==this.settings.modelLabels[b]?this.settings.modelLabels[b]:b:b},e.prototype.getPrcValue=function(){if(!this.is.init)return!1;var a="";return a},e.prototype.prcToValue=function(a){var b;if(this.settings.heterogeneity&&this.settings.heterogeneity.length>0)for(var c=this.settings.heterogeneity,d=0,e=this.settings.round?parseFloat(this.settings.from):parseInt(this.settings.from,10),f=this.settings.round?parseFloat(this.settings.to):parseInt(this.settings.to,10),g=0;g<=c.length;g++){var h;h=c[g]?c[g].split("/"):[100,f];var i=this.settings.round?parseFloat(h[0]):parseInt(h[0],10),j=this.settings.round?parseFloat(h[1]):parseInt(h[1],10);a>=d&&i>=a&&(b=e+(a-d)*(j-e)/(i-d)),d=i,e=j}else b=this.settings.from+a*this.settings.interval/100;return this.round(b)},e.prototype.valueToPrc=function(a,b){var c,d=this.settings.round?parseFloat(this.settings.from):parseInt(this.settings.from,10);if(this.settings.heterogeneity&&this.settings.heterogeneity.length>0)for(var e=this.settings.heterogeneity,f=0,g=0;g<=e.length;g++){var h;h=e[g]?e[g].split("/"):[100,this.settings.to];var i=this.settings.round?parseFloat(h[0]):parseInt(h[0],10),j=this.settings.round?parseFloat(h[1]):parseInt(h[1],10);a>=d&&j>=a&&(c=b?b.limits(f+(a-d)*(i-f)/(j-d)):this.limits(f+(a-d)*(i-f)/(j-d))),f=i,d=j}else c=b?b.limits(100*(a-d)/this.settings.interval):this.limits(100*(a-d)/this.settings.interval);return c},e.prototype.round=function(a){return a=Math.round(a/this.settings.step)*this.settings.step,a=this.settings.round?Math.round(a*Math.pow(10,this.settings.round))/Math.pow(10,this.settings.round):Math.round(a)},e}])}(angular),function(a,b){"use strict";a.module("angularAwesomeSlider").run(["$templateCache",function(a){a.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/dist/css/angular-awesome-slider.min.css b/www/lib/angular-awesome-slider/dist/css/angular-awesome-slider.min.css new file mode 100644 index 00000000..d5dd3f0b --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/css/angular-awesome-slider.min.css @@ -0,0 +1,7 @@ +/** +* @license angular-awesome-slider - v2.4.0 +* (c) 2013 Julien VALERY https://github.com/darul75/angular-awesome-slider +* License: MIT +**/ + +.jslider{position:relative;top:.6em;cursor:pointer;display:block;width:100%;height:1em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.jslider.disabled{opacity:.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:-.4em}.jslider div.jslider-label{position:absolute;top:-18px;left:0;padding:0 2px;opacity:.4;color:#000;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:#fff;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:0;font-size:9px;text-decoration:none;color:#999}.jslider.vertical{display:block;width:17px;height:100%;position:relative;top:.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:0 0}.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 0}.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:0;font-size:0;border-top:1px solid #999}.jslider.vertical div.jslider-scale ins{position:absolute;left:0;top:5px;font-size:9px;text-decoration:none;color:#999}.jslider.sliderCSS div.jslider-bg i.left{left:0;width:50%;background-color:silver;background-image:none}.jslider.sliderCSS div.jslider-bg i.right{width:50%;left:50%;background-color:silver;background-image:none}.jslider.sliderCSS div.jslider-bg i.before{left:0;width:1px;background-color:rgba(92,98,203,.89);background-image:none}.jslider.sliderCSS div.jslider-bg i.default{left:0;width:1px;z-index:1;background-color:#fff;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:-6px;left:15px;width:20px;height:20px;margin-left:-5px;background-color:silver;background-color:#615959;border-radius:50%}.jslider.sliderCSS div.jslider-bg i,.jslider.sliderCSS div.jslider-pointer{background:0 0}.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:silver;background-image:none}.jslider.sliderCSS.vertical div.jslider-bg i.right{height:50%;top:50%;background-color:silver;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,.89);background-image:none}.jslider.sliderCSS.vertical div.jslider-bg i.default{height:1px;background-color:#fff;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:0 0}.jslider.sliderCSS.vertical div.jslider-pointer{left:50%;width:40px;height:40px;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:0 0}.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:0 0}.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:0 0}.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/dist/img/jslider.blue.png b/www/lib/angular-awesome-slider/dist/img/jslider.blue.png Binary files differnew file mode 100644 index 00000000..454d727e --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.blue.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.blue.vertical.png b/www/lib/angular-awesome-slider/dist/img/jslider.blue.vertical.png Binary files differnew file mode 100644 index 00000000..dceeffc8 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.blue.vertical.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.plastic.png b/www/lib/angular-awesome-slider/dist/img/jslider.plastic.png Binary files differnew file mode 100644 index 00000000..cbb23263 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.plastic.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.plastic.vertical.png b/www/lib/angular-awesome-slider/dist/img/jslider.plastic.vertical.png Binary files differnew file mode 100644 index 00000000..00d6dfa7 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.plastic.vertical.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.png b/www/lib/angular-awesome-slider/dist/img/jslider.png Binary files differnew file mode 100644 index 00000000..08a1b450 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.round.plastic.png b/www/lib/angular-awesome-slider/dist/img/jslider.round.plastic.png Binary files differnew file mode 100644 index 00000000..de166b47 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.round.plastic.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.round.png b/www/lib/angular-awesome-slider/dist/img/jslider.round.png Binary files differnew file mode 100644 index 00000000..071a5dba --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.round.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.round.vertical.png b/www/lib/angular-awesome-slider/dist/img/jslider.round.vertical.png Binary files differnew file mode 100644 index 00000000..186d1924 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.round.vertical.png diff --git a/www/lib/angular-awesome-slider/dist/img/jslider.vertical.png b/www/lib/angular-awesome-slider/dist/img/jslider.vertical.png Binary files differnew file mode 100644 index 00000000..5df3c1a0 --- /dev/null +++ b/www/lib/angular-awesome-slider/dist/img/jslider.vertical.png diff --git a/www/lib/angular-awesome-slider/package.json b/www/lib/angular-awesome-slider/package.json new file mode 100644 index 00000000..b11253a9 --- /dev/null +++ b/www/lib/angular-awesome-slider/package.json @@ -0,0 +1,45 @@ +{ + "name": "angular-awesome-slider", + "description": "AngularJS directive slider control.", + "version": "2.4.0", + "license": "MIT", + "author": { + "name": "Julien Valéry", + "email": "darul75@gmail.com" + }, + "filename": "./src/ng-slider.js", + "homepage": "https://github.com/darul75/angular-awesome-slider", + "repository": { + "type": "git", + "url": "https://github.com/darul75/angular-awesome-slider.git" + }, + "keywords": [ + "angular", + "slider", + "control", + "ui" + ], + "bugs": { + "url": "https://github.com/darul75/angular-awesome-slider/issues" + }, + "scripts": { + "test": "grunt test-continuous" + }, + "dependencies": { + }, + "devDependencies": { + "grunt-contrib-copy": "~0.4.1", + "grunt-contrib-jshint": "latest", + "grunt-contrib-uglify": "latest", + "grunt-bower-task": "0.4.0", + "grunt-contrib-cssmin": "~0.6.0", + "grunt-contrib-less": "~0.6.4", + "grunt-karma": "~0.8.2", + "karma": "0.12.31", + "grunt-bower-task": "0.4.0", + "karma-chrome-launcher": "^0.1.3", + "karma-jasmine": "^0.1.5", + "karma-phantomjs-launcher": "^0.1.4", + "karma-firefox-launcher": "~0.1.3" + } +} 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); diff --git a/www/lib/ion-image-lazy-load/.bower.json b/www/lib/ion-image-lazy-load/.bower.json new file mode 100644 index 00000000..c7fbe652 --- /dev/null +++ b/www/lib/ion-image-lazy-load/.bower.json @@ -0,0 +1,36 @@ +{ + "name": "ionic-image-lazy-load", + "main": "ionic-image-lazy-load.js", + "homepage": "https://github.com/paveisistemas/ionic-image-lazy-load", + "authors": [ + "Vincius Zilli Pavei <vinicius@paveisistemas.com.br>", + "Michel Vidailhet <mvidailhet@mncc.fr>" + ], + "description": "Directive to Ionic Framework that only loads an image when it is seen by the user.", + "moduleType": [ + "amd" + ], + "keywords": [ + "ionic", + "lazy", + "load", + "image" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "_release": "fd1812ec1c", + "_resolution": { + "type": "branch", + "branch": "master", + "commit": "fd1812ec1cec3d3e44ef2e9f823104ceed0b196b" + }, + "_source": "git://github.com/paveisistemas/ionic-image-lazy-load.git", + "_target": "*", + "_originalSource": "ion-image-lazy-load" +} diff --git a/www/lib/ion-image-lazy-load/LICENSE b/www/lib/ion-image-lazy-load/LICENSE new file mode 100644 index 00000000..b4d5a95e --- /dev/null +++ b/www/lib/ion-image-lazy-load/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Pavei Sistemas + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/www/lib/ion-image-lazy-load/README.md b/www/lib/ion-image-lazy-load/README.md new file mode 100644 index 00000000..f3d823f9 --- /dev/null +++ b/www/lib/ion-image-lazy-load/README.md @@ -0,0 +1,80 @@ +ionic-image-lazy-load +===================== + + +## Demo +http://codepen.io/mvidailhet/pen/yNOGzY +http://codepen.io/pavei/pen/oFpCy + +## Quick Start + +Install using bower + +```sh +bower install ion-image-lazy-load --save +``` + +or + + +Download the file JS *ionic-image-lazy-load.js*, save on your project and load it on your *index.html*. + + +```html +<script src="path/to/ionic-image-lazy-load.js"></script> +``` + +Load into your module: + +```javascript +angular.module('yourapp', + ['ionic', 'ionicLazyLoad']) +``` + +Set the `lazy-scroll` directive on your `<ion-content>` tag, that will listen to the scroll event: + +``` javascript +<ion-content lazy-scroll> +``` + +And set the `img-lazy-src` directive on the image attribute instead of `src`: + +```javascript + <img image-lazy-src="{{item.thumbnail}}"> +``` + +You can also use it as a background-image for an element by setting the `image-lazy-background-image` paramameter to true: +``` javascript +<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true"></div> +``` + +You can also set an option to auto call `$ionicScrollDelegate.resize()` when the image `load` (default value is `false`): + +```javascript + <img image-lazy-src="{{item.thumbnail}}" lazy-scroll-resize="true"> +``` + +To show a ionic spinner while the image is loading, just specify a ionic spinner type (list is here: http://ionicframework.com/docs/api/directive/ionSpinner/): + +```javascript + <img image-lazy-src="{{item.thumbnail}}" image-lazy-loader="lines"> +``` +Note: the styling of the loader position is up to you. The directive adds this html: + +```html +<div class="image-loader-container"> + <ion-spinner class="image-loader" icon="#spinnerStyle#"></ion-spinner> +</div> +``` + +You can set a distance from the bottom or right side of the screen where the image will start loading. +This will allow to start loading the image 100px below the bottom of the screen: + +``` javascript + <img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-bottom-to-load="100"> +``` + +This will allow to start loading the image 100px before the right side of the screen: +```javascript + <img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-right-to-load="100"> +``` diff --git a/www/lib/ion-image-lazy-load/bower.json b/www/lib/ion-image-lazy-load/bower.json new file mode 100644 index 00000000..f30b1128 --- /dev/null +++ b/www/lib/ion-image-lazy-load/bower.json @@ -0,0 +1,28 @@ +{ + "name": "ionic-image-lazy-load", + "main": "ionic-image-lazy-load.js", + "version": "1.0.0", + "homepage": "https://github.com/paveisistemas/ionic-image-lazy-load", + "authors": [ + "Vincius Zilli Pavei <vinicius@paveisistemas.com.br>", + "Michel Vidailhet <mvidailhet@mncc.fr>" + ], + "description": "Directive to Ionic Framework that only loads an image when it is seen by the user.", + "moduleType": [ + "amd" + ], + "keywords": [ + "ionic", + "lazy", + "load", + "image" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js b/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js new file mode 100644 index 00000000..da9ff94d --- /dev/null +++ b/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js @@ -0,0 +1,124 @@ +/** + * Created by PAVEI on 30/09/2014. + * Updated by Ross Martin on 12/05/2014 + * Updated by Davide Pastore on 04/14/2015 + * Updated by Michel Vidailhet on 05/12/2015 + */ + +angular.module('ionicLazyLoad', []); + +angular.module('ionicLazyLoad') + +.directive('lazyScroll', ['$rootScope', '$timeout', + function($rootScope, $timeout) { + return { + restrict: 'A', + link: function ($scope, $element) { + + var scrollTimeoutId = 0; + + $scope.invoke = function () { + $rootScope.$broadcast('lazyScrollEvent'); + }; + + $element.bind('scroll', function () { + + $timeout.cancel(scrollTimeoutId); + + // wait and then invoke listeners (simulates stop event) + scrollTimeoutId = $timeout($scope.invoke, 0); + + }); + + + } + }; +}]) + +.directive('imageLazySrc', ['$document', '$timeout', '$ionicScrollDelegate', '$compile', + function ($document, $timeout, $ionicScrollDelegate, $compile) { + return { + restrict: 'A', + scope: { + lazyScrollResize: "@lazyScrollResize", + imageLazyBackgroundImage: "@imageLazyBackgroundImage" + }, + link: function ($scope, $element, $attributes) { + if (!$attributes.imageLazyDistanceFromBottomToLoad) { + $attributes.imageLazyDistanceFromBottomToLoad = 0; + } + if (!$attributes.imageLazyDistanceFromRightToLoad) { + $attributes.imageLazyDistanceFromRightToLoad = 0; + } + + if ($attributes.imageLazyLoader) { + var loader = $compile('<div class="image-loader-container"><ion-spinner class="image-loader" icon="' + $attributes.imageLazyLoader + '"></ion-spinner></div>')($scope); + $element.after(loader); + } + + var deregistration = $scope.$on('lazyScrollEvent', function () { + //console.log('scroll'); + if (isInView()) { + loadImage(); + deregistration(); + } + } + ); + + function loadImage() { + //Bind "load" event + $element.bind("load", function (e) { + if ($attributes.imageLazyLoader) { + loader.remove(); + } + if ($scope.lazyScrollResize == "true") { + //Call the resize to recalculate the size of the screen + $ionicScrollDelegate.resize(); + } + }); + + if ($scope.imageLazyBackgroundImage == "true") { + var bgImg = new Image(); + bgImg.onload = function () { + if ($attributes.imageLazyLoader) { + loader.remove(); + } + $element[0].style.backgroundImage = 'url(' + $attributes.imageLazySrc + ')'; // set style attribute on element (it will load image) + if ($scope.lazyScrollResize == "true") { + //Call the resize to recalculate the size of the screen + $ionicScrollDelegate.resize(); + } + }; + bgImg.src = $attributes.imageLazySrc; + } else { + $element[0].src = $attributes.imageLazySrc; // set src attribute on element (it will load image) + } + } + + function isInView() { + var clientHeight = $document[0].documentElement.clientHeight; + var clientWidth = $document[0].documentElement.clientWidth; + var imageRect = $element[0].getBoundingClientRect(); + return (imageRect.top >= 0 && imageRect.top <= clientHeight + parseInt($attributes.imageLazyDistanceFromBottomToLoad)) + && (imageRect.left >= 0 && imageRect.left <= clientWidth + parseInt($attributes.imageLazyDistanceFromRightToLoad)); + } + + // bind listener + // listenerRemover = scrollAndResizeListener.bindListener(isInView); + + // unbind event listeners if element was destroyed + // it happens when you change view, etc + $element.on('$destroy', function () { + deregistration(); + }); + + // explicitly call scroll listener (because, some images are in viewport already and we haven't scrolled yet) + $timeout(function () { + if (isInView()) { + loadImage(); + deregistration(); + } + }, 500); + } + }; + }]); |
