From 4bf2b42a28be95fdb22f79beeb7e2ec2c128aef7 Mon Sep 17 00:00:00 2001 From: Guillermo Sandoval Date: Wed, 9 Jul 2014 13:05:33 -0500 Subject: [PATCH 1/2] Adds 'connect', 'direction' and 'orientation' Adds the connect, direction and orientation options to the list of parameters that can be passed to the directive. These are documented here: http://refreshless.com/nouislider/slider-options --- app/scripts/app.coffee | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index 9f913ca..ec3ff7b 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -9,6 +9,9 @@ angular.module('nouislider', []) end: "@" callback: "@" margin: "@" + connect: "@" + orientation: "@" + direction: "@" ngModel: "=" ngFrom: "=" ngTo: "=" @@ -27,6 +30,8 @@ angular.module('nouislider', []) step: parseFloat(scope.step or 1) connect: true margin: parseFloat(scope.margin or 0) + orientation: scope.orientation or "horizontal" + direction: scope.direction or "ltr" range: min: [parseFloat scope.start] max: [parseFloat scope.end] @@ -58,6 +63,9 @@ angular.module('nouislider', []) slider.noUiSlider start: [scope.ngModel or scope.start], step: parseFloat(scope.step or 1) + connect: scope.connect or false + orientation: scope.orientation or "horizontal" + direction: scope.direction or "ltr" range: min: [parseFloat scope.start] max: [parseFloat scope.end] From 4e67ed45955114b7b47198adab59b6a241d59ba8 Mon Sep 17 00:00:00 2001 From: Guillermo Sandoval Date: Thu, 10 Jul 2014 10:11:52 -0500 Subject: [PATCH 2/2] Adds serialization API to directive --- app/scripts/app.coffee | 36 +++++++++++++++++++++++++-- src/nouislider.js | 56 +++++++++++++++++++++++++++++++++++++----- src/nouislider.min.js | 2 +- 3 files changed, 85 insertions(+), 9 deletions(-) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index ec3ff7b..b968291 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -11,6 +11,12 @@ angular.module('nouislider', []) margin: "@" connect: "@" orientation: "@" + lowerTooltipTarget: '=' + lowerTooltipMethod: '&' + lowerTooltipFormat: '=' + upperTooltipTarget: '=' + upperTooltipMethod: '&' + upperTooltipFormat: '=' direction: "@" ngModel: "=" ngFrom: "=" @@ -21,11 +27,28 @@ angular.module('nouislider', []) callback = if scope.callback then scope.callback else 'slide' + setupTooltip = (target, method, format, config, handle) -> + linkConfig = {} + atLeastOne = false + if target + linkConfig.target = target + atLeastOne = true + if method and method() + linkConfig.method = method() + atLeastOne = true + if format + linkConfig.format = format + atLeastOne = true + if atLeastOne + if !config.serialization + config.serialization = {} + config.serialization[handle or 'lower'] = [$.Link(linkConfig)] + if scope.ngFrom? and scope.ngTo? fromParsed = null toParsed = null - slider.noUiSlider + config = { start: [scope.ngFrom or scope.start, scope.ngTo or scope.end] step: parseFloat(scope.step or 1) connect: true @@ -35,7 +58,11 @@ angular.module('nouislider', []) range: min: [parseFloat scope.start] max: [parseFloat scope.end] + } + setupTooltip(scope.lowerTooltipTarget, scope.lowerTooltipMethod, scope.lowerTooltipFormat, config) + setupTooltip(scope.upperTooltipTarget, scope.upperTooltipMethod, scope.upperTooltipFormat, config, 'upper') + slider.noUiSlider config slider.on callback, -> [from, to] = slider.val() @@ -60,7 +87,7 @@ angular.module('nouislider', []) else parsedValue = null - slider.noUiSlider + config = { start: [scope.ngModel or scope.start], step: parseFloat(scope.step or 1) connect: scope.connect or false @@ -69,6 +96,11 @@ angular.module('nouislider', []) range: min: [parseFloat scope.start] max: [parseFloat scope.end] + } + + setupTooltip(scope.lowerTooltipTarget, scope.lowerTooltipMethod, scope.lowerTooltipFormat, config) + + slider.noUiSlider config slider.on callback, -> parsedValue = parseFloat slider.val() diff --git a/src/nouislider.js b/src/nouislider.js index d9afa6c..599b881 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -8,18 +8,50 @@ angular.module('nouislider', []).directive('slider', function () { end: '@', callback: '@', margin: '@', + connect: '@', + orientation: '@', + lowerTooltipTarget: '=', + lowerTooltipMethod: '&', + lowerTooltipFormat: '=', + upperTooltipTarget: '=', + upperTooltipMethod: '&', + upperTooltipFormat: '=', + direction: '@', ngModel: '=', ngFrom: '=', ngTo: '=' }, link: function (scope, element, attrs) { - var callback, fromParsed, parsedValue, slider, toParsed; + var callback, config, fromParsed, parsedValue, setupTooltip, slider, toParsed; slider = $(element); callback = scope.callback ? scope.callback : 'slide'; + setupTooltip = function (target, method, format, config, handle) { + var atLeastOne, linkConfig; + linkConfig = {}; + atLeastOne = false; + if (target) { + linkConfig.target = target; + atLeastOne = true; + } + if (method && method()) { + linkConfig.method = method(); + atLeastOne = true; + } + if (format) { + linkConfig.format = format; + atLeastOne = true; + } + if (atLeastOne) { + if (!config.serialization) { + config.serialization = {}; + } + return config.serialization[handle || 'lower'] = [$.Link(linkConfig)]; + } + }; if (scope.ngFrom != null && scope.ngTo != null) { fromParsed = null; toParsed = null; - slider.noUiSlider({ + config = { start: [ scope.ngFrom || scope.start, scope.ngTo || scope.end @@ -27,11 +59,16 @@ angular.module('nouislider', []).directive('slider', function () { step: parseFloat(scope.step || 1), connect: true, margin: parseFloat(scope.margin || 0), + orientation: scope.orientation || 'horizontal', + direction: scope.direction || 'ltr', range: { min: [parseFloat(scope.start)], max: [parseFloat(scope.end)] } - }); + }; + setupTooltip(scope.lowerTooltipTarget, scope.lowerTooltipMethod, scope.lowerTooltipFormat, config); + setupTooltip(scope.upperTooltipTarget, scope.upperTooltipMethod, scope.upperTooltipFormat, config, 'upper'); + slider.noUiSlider(config); slider.on(callback, function () { var from, to, _ref; _ref = slider.val(), from = _ref[0], to = _ref[1]; @@ -60,14 +97,19 @@ angular.module('nouislider', []).directive('slider', function () { }); } else { parsedValue = null; - slider.noUiSlider({ + config = { start: [scope.ngModel || scope.start], step: parseFloat(scope.step || 1), + connect: scope.connect || false, + orientation: scope.orientation || 'horizontal', + direction: scope.direction || 'ltr', range: { min: [parseFloat(scope.start)], max: [parseFloat(scope.end)] } - }); + }; + setupTooltip(scope.lowerTooltipTarget, scope.lowerTooltipMethod, scope.lowerTooltipFormat, config); + slider.noUiSlider(config); slider.on(callback, function () { parsedValue = parseFloat(slider.val()); return scope.$apply(function () { @@ -82,4 +124,6 @@ angular.module('nouislider', []).directive('slider', function () { } } }; -}); \ No newline at end of file +}); /* +//@ sourceMappingURL=app.js.map +*/ \ No newline at end of file diff --git a/src/nouislider.min.js b/src/nouislider.min.js index 19db5ca..0c9954a 100644 --- a/src/nouislider.min.js +++ b/src/nouislider.min.js @@ -1 +1 @@ -"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{start:"@",step:"@",end:"@",callback:"@",margin:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g;return f=$(b),c=a.callback?a.callback:"slide",null!=a.ngFrom&&null!=a.ngTo?(d=null,g=null,f.noUiSlider({start:[a.ngFrom||a.start,a.ngTo||a.end],step:parseFloat(a.step||1),connect:!0,margin:parseFloat(a.margin||0),range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}}),f.on(c,function(){var b,c,e;return e=f.val(),b=e[0],c=e[1],d=parseFloat(b),g=parseFloat(c),a.$apply(function(){return a.ngFrom=d,a.ngTo=g})}),a.$watch("ngFrom",function(a){return a!==d?f.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==g?f.val([null,a]):void 0})):(e=null,f.noUiSlider({start:[a.ngModel||a.start],step:parseFloat(a.step||1),range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}}),f.on(c,function(){return e=parseFloat(f.val()),a.$apply(function(){return a.ngModel=e})}),a.$watch("ngModel",function(a){return a!==e?f.val(a):void 0}))}}}); \ No newline at end of file +"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{start:"@",step:"@",end:"@",callback:"@",margin:"@",connect:"@",orientation:"@",lowerTooltipTarget:"=",lowerTooltipMethod:"&",lowerTooltipFormat:"=",upperTooltipTarget:"=",upperTooltipMethod:"&",upperTooltipFormat:"=",direction:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g,h,i;return h=$(b),c=a.callback?a.callback:"slide",g=function(a,b,c,d,e){var f,g;return g={},f=!1,a&&(g.target=a,f=!0),b&&b()&&(g.method=b(),f=!0),c&&(g.format=c,f=!0),f?(d.serialization||(d.serialization={}),d.serialization[e||"lower"]=[$.Link(g)]):void 0},null!=a.ngFrom&&null!=a.ngTo?(e=null,i=null,d={start:[a.ngFrom||a.start,a.ngTo||a.end],step:parseFloat(a.step||1),connect:!0,margin:parseFloat(a.margin||0),orientation:a.orientation||"horizontal",direction:a.direction||"ltr",range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}},g(a.lowerTooltipTarget,a.lowerTooltipMethod,a.lowerTooltipFormat,d),g(a.upperTooltipTarget,a.upperTooltipMethod,a.upperTooltipFormat,d,"upper"),h.noUiSlider(d),h.on(c,function(){var b,c,d;return d=h.val(),b=d[0],c=d[1],e=parseFloat(b),i=parseFloat(c),a.$apply(function(){return a.ngFrom=e,a.ngTo=i})}),a.$watch("ngFrom",function(a){return a!==e?h.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==i?h.val([null,a]):void 0})):(f=null,d={start:[a.ngModel||a.start],step:parseFloat(a.step||1),connect:a.connect||!1,orientation:a.orientation||"horizontal",direction:a.direction||"ltr",range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}},g(a.lowerTooltipTarget,a.lowerTooltipMethod,a.lowerTooltipFormat,d),h.noUiSlider(d),h.on(c,function(){return f=parseFloat(h.val()),a.$apply(function(){return a.ngModel=f})}),a.$watch("ngModel",function(a){return a!==f?h.val(a):void 0}))}}}); \ No newline at end of file