Skip to content

I
i20rzslider
Commit dbf7725b authored by Ryo Yamada's avatar Ryo Yamada Committed by Valentin Hervieu
Browse files
Options

expose label texts on scope vairable (#358)

parent 9a9db3e5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 11 deletions
README.md
View file @ dbf7725b
......@@ -173,7 +173,18 @@ $scope.slider = {
**rz-slider-tpl-url**
> If for some reason you need to use a custom template, you can do so by providing a template URL to the `rz-slider-tpl-url` attribute. The default template is [this one](https://github.com/angular-slider/angularjs-slider/blob/master/src/rzSliderTpl.html).
> If you need to use a custom template, you can do so by providing a template URL to the `rz-slider-tpl-url` attribute. The default template is [this one](https://github.com/angular-slider/angularjs-slider/blob/master/src/rzSliderTpl.html).
The following variables are available in the template as scope variables.
- `floorLabel`: The value set to `floor` in `rz-slider-options`
- `ceilLabel`: The value set to `ceil` in `rz-slider-options`
- `modelLabel`: The value set to `rz-slider-model`
- `highLabel`: The value set to `rz-slider-high`
- `cmbLabel`: The text shown when the two handlers are close to each other. (e.g. "30-40")
The library replaces the HTML contents of label elements in the template by default, if you want to stop this behaviour and tweak label HTML on your own, you need to set `no-label-injection` class on the elements you're customizing.
See the [Custom template to use angular directive for label](./demo/directiveInCustomTemplate.html) for an example.
**rz-slider-options**
......
demo/demo.js
View file @ dbf7725b
......@@ -207,6 +207,15 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
}
};
//Slider config with angular directive inside custom template
$scope.slider_custom_directive_inside_template = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100
}
};
//Slider config with steps array of letters
$scope.slider_alphabet = {
......@@ -515,3 +524,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
}
});
app.directive('clickableLabel', function() {
return {
restrict: 'E',
scope: {label: '='},
replace: true,
template: "<button ng-click='onclick(label)' style='cursor: pointer;'>click me - {{label}}</button>",
link: function(scope, elem, attrs){
scope.onclick = function(label){
alert("I'm " + label);
};
}
};
});
demo/directiveInCustomTemplate.html 0 → 100644
View file @ dbf7725b
<div class="rzslider">
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
<span class="rz-bar-wrapper">
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
</span>
<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span>
<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span>
<span class="rz-bubble rz-limit rz-floor no-label-injection">{{floorLabel}}</span>
<span class="rz-bubble rz-limit rz-ceil no-label-injection">{{ceilLabel}}</span>
<span class="rz-bubble no-label-injection"><clickable-label label="modelLabel" /></span>
<span class="rz-bubble no-label-injection"><clickable-label label="highLabel" /></span>
<span class="rz-bubble no-label-injection">
<clickable-label label="modelLabel"/>
-
<clickable-label label="highLabel"/>
</span>
<ul ng-show="showTicks" class="rz-ticks">
<li ng-repeat="t in ticks track by $index" class="rz-tick" ng-class="{'rz-selected': t.selected}" ng-style="t.style" ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement="{{t.tooltipPlacement}}" ng-attr-tooltip-append-to-body="{{ t.tooltip ? true : undefined}}">
<span ng-if="t.value != null" class="rz-tick-value" ng-attr-uib-tooltip="{{ t.valueTooltip }}" ng-attr-tooltip-placement="{{t.valueTooltipPlacement}}">{{ t.value }}</span>
<span ng-if="t.legend != null" class="rz-tick-legend">{{ t.legend }}</span>
</li>
</ul>
</div>
demo/index.html
View file @ dbf7725b
......@@ -157,6 +157,16 @@
></rzslider>
</article>
<article>
<h2>Slider with angular directive inside custom template</h2>
<rzslider
rz-slider-model="slider_custom_directive_inside_template.minValue"
rz-slider-high="slider_custom_directive_inside_template.maxValue"
rz-slider-options="slider_custom_directive_inside_template.options"
rz-slider-tpl-url="directiveInCustomTemplate.html"
></rzslider>
</article>
<article>
<h2>Slider with Alphabet</h2>
Current letter: {{ slider_alphabet.value }}
......
dist/rzslider.css
View file @ dbf7725b
/*! angularjs-slider - v5.2.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-07-07 */
2016-07-09 */
.rzslider {
position: relative;
display: inline-block;
......
dist/rzslider.js
View file @ dbf7725b
/*! angularjs-slider - v5.2.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-07-07 */
2016-07-09 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -774,7 +774,8 @@
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = '',
getDimension = false;
getDimension = false,
noLabelInjection = label.hasClass('no-label-injection');
if (useCustomTr) {
if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
......@@ -790,7 +791,9 @@
label.rzsv = valStr;
}
label.html(valStr);
if(!noLabelInjection){ label.html(valStr); };
this.scope[which + 'Label'] = valStr;
// Update width only when length of the label have changed
if (getDimension) {
......
dist/rzslider.min.css
View file @ dbf7725b
/*! angularjs-slider - v5.2.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-07-07 */
/*! angularjs-slider - v5.2.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-07-09 */
.rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rzslider.with-legend{margin-bottom:40px}.rzslider[disabled]{cursor:not-allowed}.rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}.rzslider span{position:absolute;display:inline-block;white-space:nowrap}.rzslider .rz-base{width:100%;height:100%;padding:0}.rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}.rzslider .rz-bar-wrapper.rz-draggable{cursor:move}.rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}.rzslider .rz-pointer:hover:after{background-color:#fff}.rzslider .rz-pointer.rz-active{z-index:4}.rzslider .rz-pointer.rz-active:after{background-color:#451aff}.rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}.rzslider .rz-bubble.rz-selection{top:16px}.rzslider .rz-bubble.rz-limit{color:#55637d}.rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}.rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}.rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}.rzslider .rz-ticks .rz-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-40px}.rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}.rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}.rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}.rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}.rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}.rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}.rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}.rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:22px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:12px;bottom:initial;left:initial}
\ No newline at end of file
dist/rzslider.min.js
View file @ dbf7725b
This diff is collapsed.
karma.conf.js
View file @ dbf7725b
......@@ -17,6 +17,7 @@ module.exports = function (config) {
'src/*.js',
'tests/specs/helper.js',
'tests/specs/**/*-test.js',
'tests/specs/*.html',
'dist/rzslider.css',
'src/*.html'
],
......@@ -27,7 +28,8 @@ module.exports = function (config) {
// preprocess matching files before serving them to the browser
preprocessors: {
"src/*.js": ['coverage'],
"src/*Tpl.html": 'ng-html2js'
"src/*Tpl.html": 'ng-html2js',
"tests/specs/*-tpl.html": 'ng-html2js'
},
ngHtml2JsPreprocessor: {
......
src/rzslider.js
View file @ dbf7725b
......@@ -778,7 +778,8 @@
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = '',
getDimension = false;
getDimension = false,
noLabelInjection = label.hasClass('no-label-injection');
if (useCustomTr) {
if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
......@@ -794,7 +795,9 @@
label.rzsv = valStr;
}
label.html(valStr);
if(!noLabelInjection){ label.html(valStr); };
this.scope[which + 'Label'] = valStr;
// Update width only when length of the label have changed
if (getDimension) {
......
tests/specs/custom-template-test.js 0 → 100644
View file @ dbf7725b
(function() {
"use strict";
describe('Custom templates - ', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
var url = 'tests/specs/custom-tpl.html';
it('should render ceil/floor labels', function() {
var sliderConf = {
min: 10,
max: 50,
options: {
floor: 0,
ceil: 100,
step: 10
}
};
helper.createRangeSliderWithCustomTemplate(sliderConf, url);
expect(helper.slider.flrLab.text()).to.equal('test- 0');
expect(helper.slider.ceilLab.text()).to.equal('test- 100');
});
it('should render min/max labels', function() {
var sliderConf = {
min: 10,
max: 50,
options: {
floor: 0,
ceil: 100,
step: 10
}
};
helper.createRangeSliderWithCustomTemplate(sliderConf, url);
expect(helper.slider.minLab.text()).to.equal('test- 10');
expect(helper.slider.maxLab.text()).to.equal('test- 50');
});
it('should render min/max labels', function() {
var sliderConf = {
min: 50,
max: 50,
options: {
floor: 0,
ceil: 100,
step: 10
}
};
helper.createRangeSliderWithCustomTemplate(sliderConf, url);
expect(helper.slider.cmbLab.text()).to.equal('test- 50 - 50');
});
});
}());
tests/specs/custom-tpl.html 0 → 100644
View file @ dbf7725b
<div class="rzslider">
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
<span class="rz-bar-wrapper">
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
</span>
<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span>
<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span>
<span class="rz-bubble rz-limit rz-floor no-label-injection">test- {{floorLabel}}</span>
<span class="rz-bubble rz-limit rz-ceil no-label-injection">test- {{ceilLabel}}</span>
<span class="rz-bubble no-label-injection">test- {{modelLabel}}</span>
<span class="rz-bubble no-label-injection">test- {{highLabel}}</span>
<span class="rz-bubble no-label-injection">test- {{cmbLabel}}</span>
<ul ng-show="showTicks" class="rz-ticks">
<li ng-repeat="t in ticks track by $index" class="rz-tick" ng-class="{'rz-selected': t.selected}" ng-style="t.style" ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement="{{t.tooltipPlacement}}" ng-attr-tooltip-append-to-body="{{ t.tooltip ? true : undefined}}">
<span ng-if="t.value != null" class="rz-tick-value" ng-attr-uib-tooltip="{{ t.valueTooltip }}" ng-attr-tooltip-placement="{{t.valueTooltipPlacement}}">{{ t.value }}</span>
<span ng-if="t.legend != null" class="rz-tick-legend">{{ t.legend }}</span>
</li>
</ul>
</div>
tests/specs/helper.js
View file @ dbf7725b
......@@ -31,6 +31,20 @@
h.initSlider(sliderObj, template);
};
h.createRangeSliderWithCustomTemplate = function(sliderObj, templateUrl) {
var template = '';
var optionsExpression = sliderObj.optionsExpression || 'slider.options';
if (sliderObj.options || sliderObj.optionsExpression)
template = '<rzslider rz-slider-model="slider.min"' +
' rz-slider-high="slider.max"' +
' rz-slider-options="' + optionsExpression +
'" rz-slider-tpl-url="' + templateUrl +
'"></rzslider>';
else
template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"></rzslider>';
h.initSlider(sliderObj, template);
};
h.initSlider = function(sliderObj, template) {
h.scope = $rootScope.$new();
h.scope.slider = sliderObj;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment