diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index 9f913ca..b968291 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -9,6 +9,15 @@ angular.module('nouislider', []) end: "@" callback: "@" margin: "@" + connect: "@" + orientation: "@" + lowerTooltipTarget: '=' + lowerTooltipMethod: '&' + lowerTooltipFormat: '=' + upperTooltipTarget: '=' + upperTooltipMethod: '&' + upperTooltipFormat: '=' + direction: "@" ngModel: "=" ngFrom: "=" ngTo: "=" @@ -18,19 +27,42 @@ 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 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] + } + 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() @@ -55,12 +87,20 @@ 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 + orientation: scope.orientation or "horizontal" + direction: scope.direction or "ltr" 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