Skip to content

I
i20rzslider
Commit 2c3ca884 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Merge pull request #158 from rzajac/2.0.0 

Refactor to add an rzSliderOptions attribute
parents d26c0eaf 51cd1bfb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3179 additions and 3080 deletions
CHANGELOG.md
View file @ 2c3ca884
# 2.0.0 (2015-11-XX)
## Breaking changes
- All attributes except `rzSliderModel` and `rzSliderHigh` are moved to `rzSliderOptions`. (See the new documentation in ReadMe)
## Features
- Add a `rzSliderOptions` attribute to pass options to the slider.
- Add a `RzSliderOptions.options()` method to set global options.
- Add a `scale` option to fix sliders displayed in an element that uses `transform: scale(0.5)`.
- Add a `stepsArray` option (#163)
- Add an `id` option that is passed to the translate function as second arg (#161)
- Add a `ticksValuesTooltip` option that is used to display a tooltip on the ticks values (requires angular-ui bootstrap).
# 1.1.0 (2015-11-07) # 1.1.0 (2015-11-07)
## Features ## Features
- Configurable update interval (#153) - Configurable update interval (#153)
......
Gruntfile.js
View file @ 2c3ca884
module.exports = function(grunt) { module.exports = function(grunt) {
// Project configuration. // Project configuration.
grunt.initConfig({ grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), pkg: grunt.file.readJSON('package.json'),
minBanner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + minBanner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'(c) <%= pkg.author %>, <%= pkg.repository.url %> - ' + '(c) <%= pkg.author %>, <%= pkg.repository.url %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */\n', '<%= grunt.template.today("yyyy-mm-dd") %> */\n',
recess: { recess: {
options: { options: {
compile: true compile: true
}, },
slider: { slider: {
src: ['src/rzslider.less'], src: ['src/rzslider.less'],
dest: 'dist/rzslider.css' dest: 'dist/rzslider.css'
}, },
min: { min: {
options: { options: {
compress: true, compress: true,
banner: '<%= minBanner %>' banner: '<%= minBanner %>'
},
src: ['dist/rzslider.css'],
dest: 'dist/rzslider.min.css'
}
}, },
src: ['dist/rzslider.css'],
dest: 'dist/rzslider.min.css'
}
},
uglify: { uglify: {
options: { options: {
report: 'min', report: 'min',
banner: '<%= minBanner %>' banner: '<%= minBanner %>'
}, },
rzslider: { rzslider: {
files: { files: {
'dist/rzslider.min.js': [ 'dist/rzslider.min.js': [
'dist/rzslider.js' 'dist/rzslider.js'
] ]
} }
} }
}, },
ngtemplates: { ngtemplates: {
app: { app: {
src: 'src/**.html', src: 'src/**.html',
dest: 'temp/templates.js', dest: 'temp/templates.js',
options: { options: {
htmlmin: { htmlmin: {
collapseBooleanAttributes: true, collapseBooleanAttributes: true,
collapseWhitespace: true, collapseWhitespace: true,
removeAttributeQuotes: true, removeAttributeQuotes: true,
removeComments: true, // Only if you don't use comment directives! removeComments: true, // Only if you don't use comment directives!
removeEmptyAttributes: true, removeEmptyAttributes: true,
removeRedundantAttributes: true, removeRedundantAttributes: true,
removeScriptTypeAttributes: true, removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true removeStyleLinkTypeAttributes: true
}, },
module: 'rzModule', module: 'rzModule',
url: function(url) { url: function(url) {
return url.replace('src/', ''); return url.replace('src/', '');
}, },
bootstrap: function(module, script) { bootstrap: function(module, script) {
return 'module.run(function($templateCache) {\n' + script + '\n});'; return 'module.run(function($templateCache) {\n' + script + '\n});';
} }
} }
} }
}, },
replace: { replace: {
dist: { dist: {
options: { options: {
patterns: [ patterns: [{
{ match: /\/\*templateReplacement\*\//,
match: /\/\*templateReplacement\*\//, replacement: '<%= grunt.file.read("temp/templates.js") %>'
replacement: '<%= grunt.file.read("temp/templates.js") %>' }]
}
]
},
files: [
{expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
]
}
}, },
files: [{
expand: true,
flatten: true,
src: ['src/rzslider.js'],
dest: 'dist/'
}]
}
},
ngAnnotate: { ngAnnotate: {
options: { options: {
singleQuotes: true, singleQuotes: true,
}, },
rzslider: { rzslider: {
files: [{ files: [{
'dist/rzslider.js': 'dist/rzslider.js' 'dist/rzslider.js': 'dist/rzslider.js'
}, { }, {
expand: true, expand: true,
src: ['dist/rzslider.js'] src: ['dist/rzslider.js']
} }]
] }
} },
}, watch: {
watch: { all: {
all: { files: ['dist/*', 'demo/*'],
files: ['dist/*', 'demo/*'], options: {
options: { livereload: true
livereload: true
}
},
js: {
files: ['src/*js', 'src/*.html'],
tasks: ['js']
},
less: {
files: ['src/*.less'],
tasks: ['css']
}
},
serve: {
options: {
port: 9000
}
} }
},
js: {
files: ['src/*js', 'src/*.html'],
tasks: ['js']
},
less: {
files: ['src/*.less'],
tasks: ['css']
}
},
serve: {
options: {
port: 9000
}
}
}); });
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-recess'); grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-angular-templates'); grunt.loadNpmTasks('grunt-angular-templates');
grunt.loadNpmTasks('grunt-replace'); grunt.loadNpmTasks('grunt-replace');
grunt.loadNpmTasks('grunt-ng-annotate'); grunt.loadNpmTasks('grunt-ng-annotate');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-serve'); grunt.loadNpmTasks('grunt-serve');
grunt.registerTask('default', ['css', 'js']); grunt.registerTask('default', ['css', 'js']);
grunt.registerTask('css', ['recess']); grunt.registerTask('css', ['recess']);
grunt.registerTask('js', ['ngtemplates', 'replace', 'ngAnnotate', 'uglify']); grunt.registerTask('js', ['ngtemplates', 'replace', 'ngAnnotate', 'uglify']);
}; };
README.md
View file @ 2c3ca884
This diff is collapsed.
bower.json
View file @ 2c3ca884
{ {
"name": "angularjs-slider", "name": "angularjs-slider",
"version": "1.1.0", "version": "2.0.0",
"homepage": "https://github.com/rzajac/angularjs-slider", "homepage": "https://github.com/rzajac/angularjs-slider",
"authors": [ "authors": [
"Rafal Zajac <rzajac@gmail.com>", "Rafal Zajac <rzajac@gmail.com>",
......
demo/demo.css
View file @ 2c3ca884
* { margin: 0; padding: 0; } * { margin: 0; padding: 0; }
body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; } body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; padding-bottom: 40px; }
header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; text-align: center; padding: 40px 0; } header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; text-align: center; padding: 40px 0; }
h1 { font-weight: 300; } h1 { font-weight: 300; }
h2 {margin-bottom:10px;}
.wrapper { background: #fff; padding: 40px; } .wrapper { background: #fff; padding: 40px; }
article { margin-bottom: 40px; } article { margin-bottom: 10px; }
.tab-pane{
padding-top: 10px;
}
.field-title {
width: 100px;
}
demo/demo.js 0 → 100644
View file @ 2c3ca884
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
//Minimal slider config
$scope.minSlider = {
value: 10
};
//Slider with selection bar
$scope.slider_visible_bar = {
value: 10,
options: {
showSelectionBar: true
}
};
//Range slider config
$scope.minRangeSlider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
//Slider config with floor, ceil and step
$scope.slider_floor_ceil = {
value: 12,
options: {
floor: 10,
ceil: 100,
step: 5
}
};
//Slider config with callbacks
$scope.slider_callbacks = {
value: 100,
options: {
onStart: function() {
$scope.otherData.start = $scope.slider_callbacks.value * 10;
},
onChange: function() {
$scope.otherData.change = $scope.slider_callbacks.value * 10;
},
onEnd: function() {
$scope.otherData.end = $scope.slider_callbacks.value * 10;
}
}
};
$scope.otherData = {start: 0, change: 0, end: 0};
//Slider config with custom display function
$scope.slider_translate = {
minValue: 100,
maxValue: 400,
options: {
ceil: 500,
floor: 0,
translate: function(value) {
return '$' + value;
}
}
};
//Slider config with steps array of letters
$scope.slider_alphabet = {
value: 0,
options: {
stepsArray:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
}
};
//Slider with ticks
$scope.slider_ticks = {
value: 5,
options: {
ceil: 10,
floor: 0,
showTicks: true
}
};
//Slider with ticks and values
$scope.slider_ticks_values = {
value: 5,
options: {
ceil: 10,
floor: 0,
showTicksValues: true,
ticksValuesTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
//Range slider with ticks and values
$scope.range_slider_ticks_values = {
minValue: 1,
maxValue: 8,
options: {
ceil: 10,
floor: 0,
showTicksValues: true
}
};
//Slider with draggable range
$scope.slider_draggable_range = {
minValue: 1,
maxValue: 8,
options: {
ceil: 10,
floor: 0,
draggableRange: true
}
};
//Read-only slider
$scope.read_only_slider = {
value: 50,
options: {
ceil: 100,
floor: 0,
readOnly: true
}
};
//Disabled slider
$scope.disabled_slider = {
value: 50,
options: {
ceil: 100,
floor: 0,
disabled: true
}
};
// Slider inside ng-show
$scope.visible = false;
$scope.slider_toggle = {
value: 5,
options: {
ceil: 10,
floor: 0
}
};
$scope.toggle = function() {
$scope.visible = !$scope.visible;
$timeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
};
//Slider inside modal
$scope.percentages = {
normal: {
low: 15
},
range: {
low: 10,
high: 50
}
};
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'sliderModal.html',
controller: function($scope, $modalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
var formatToPercentage = function(value) {
return value + '%';
};
$scope.percentages.normal.options = {
floor: 0,
ceil: 100,
translate: formatToPercentage,
showSelectionBar: true
};
$scope.percentages.range.options = {
floor: 0,
ceil: 100,
translate: formatToPercentage
};
$scope.ok = function() {
$modalInstance.close($scope.percentages);
};
$scope.cancel = function() {
$modalInstance.dismiss();
};
},
resolve: {
values: function() {
return $scope.percentages;
}
}
});
modalInstance.result.then(function(percentages) {
$scope.percentages = percentages;
});
modalInstance.rendered.then(function() {
$rootScope.$broadcast('rzSliderForceRender');//Force refresh sliders on render. Otherwise bullets are aligned at left side.
});
};
//Slider inside tabs
$scope.tabSliders = {
slider1: {
value: 100
},
slider2: {
value: 200
}
};
$scope.refreshSlider = function() {
$timeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
};
//Slider with draggable range
$scope.slider_all_options = {
minValue: 2,
options: {
floor: 0,
ceil: 10,
step: 1,
precision: 0,
draggableRange: false,
showSelectionBar: false,
hideLimitLabels: false,
readOnly: false,
disabled: false,
showTicks: false,
showTicksValues: false
}
};
$scope.toggleHighValue = function() {
if($scope.slider_all_options.maxValue != null) {
$scope.slider_all_options.maxValue = undefined;
}
else {
$scope.slider_all_options.maxValue = 8;
}
}
});
demo/index.html
View file @ 2c3ca884
This diff is collapsed.
demo/sliderModal.html 0 → 100644
View file @ 2c3ca884
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-12">
<label class="control-label">Normal slider into modal</label>
<rzslider
rz-slider-model="percentages.normal.low"
rz-slider-options="percentages.normal.options">
</rzslider>
</div>
</div>
<div class="row">
<div class=" col-md-12 col-lg-12">
<label class="control-label">Range slider into modal</label>
<rzslider
rz-slider-model="percentages.range.low"
rz-slider-high="percentages.range.high"
rz-slider-options="percentages.range.options">
</rzslider>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="button" ng-click="ok()" class="btn btn-primary">Save</button>
<button type="button" ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
</div>
</div>
</div>
dist/rzslider.css
View file @ 2c3ca884
...@@ -16,7 +16,7 @@ rzslider { ...@@ -16,7 +16,7 @@ rzslider {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 4px; height: 4px;
margin: 30px 0 15px 0; margin: 35px 0 15px 0;
vertical-align: middle; vertical-align: middle;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
...@@ -55,6 +55,10 @@ rzslider .rz-bar-wrapper { ...@@ -55,6 +55,10 @@ rzslider .rz-bar-wrapper {
box-sizing: border-box; box-sizing: border-box;
} }
rzslider .rz-bar-wrapper.rz-draggable {
cursor: move;
}
rzslider .rz-bar { rzslider .rz-bar {
left: 0; left: 0;
z-index: 1; z-index: 1;
......
dist/rzslider.js
View file @ 2c3ca884
This diff is collapsed.
dist/rzslider.min.css
View file @ 2c3ca884
/*! angularjs-slider - v1.1.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/rzajac/angularjs-slider.git - 2015-11-07 */ /*! angularjs-slider - v2.0.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/rzajac/angularjs-slider.git - 2015-11-12 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}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{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: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:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)} 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[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: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:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file \ No newline at end of file
dist/rzslider.min.js
View file @ 2c3ca884
This diff is collapsed.
package.json
View file @ 2c3ca884
{ {
"name": "angularjs-slider", "name": "angularjs-slider",
"version": "1.1.0", "version": "2.0.0",
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!.", "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
"main": "dist/rzslider.js", "main": "dist/rzslider.js",
"repository": { "repository": {
......
src/rzslider.js
View file @ 2c3ca884
This diff is collapsed.
src/rzslider.less
View file @ 2c3ca884
...@@ -14,7 +14,7 @@ rzslider { ...@@ -14,7 +14,7 @@ rzslider {
position: relative; position: relative;
height: @barHeight; height: @barHeight;
width: 100%; width: 100%;
margin: 30px 0 15px 0; margin: 35px 0 15px 0;
vertical-align: middle; vertical-align: middle;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
...@@ -49,6 +49,9 @@ rzslider { ...@@ -49,6 +49,9 @@ rzslider {
width: 100%; width: 100%;
height: @handleSize; height: @handleSize;
z-index: 1; z-index: 1;
&.rz-draggable {
cursor: move;
}
} }
.rz-bar { .rz-bar {
...@@ -140,4 +143,4 @@ rzslider { ...@@ -140,4 +143,4 @@ rzslider {
} }
} }
} }
} }
\ No newline at end of file
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