Commit ab0057a6 authored by Jussi Saarivirta's avatar Jussi Saarivirta Committed by Jussi Saarivirta

Full jQuery compatibility for the touch events.

parent 613bc500
......@@ -2,6 +2,9 @@
Slider directive implementation for AngularJS, without any dependencies.
** This fork adds jQuery compatibility for touch events **
- Mobile friendly
- Fast
- Well documented
......@@ -140,19 +143,13 @@ You can also force redraw with **rzSliderForceRender** event.
## Changelog
**v0.0.1**
Original rewrite to JavaScript
**v0.1.3**
Forked from this version.
**v0.1.0**
**v0.1.4**
Bug fixes
Performance improvements
Reduce number of angular bindings
Reduce number of function calls in event handlers
Avoid recalculate style
Hit 60fps
LESS variables for easier slider color customization
Touch events were broken if jQuery was used with Angular instead of jQuery lite. This version fixes them.
## Disclaimer
......
{
"name": "angularjs-slider",
"version": "0.1.3",
"version": "0.1.4",
"homepage": "https://github.com/rzajac/angularjs-slider",
"authors": [
"Rafal Zajac <rzajac@gmail.com>"
"Rafal Zajac <rzajac@gmail.com>",
"Jussi Saarivirta <jusasi@gmail.com>"
],
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!",
"main": "rzslider.js",
......
/*! angularjs-slider - v0.1.3 - (c) Rafal Zajac <rzajac@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2014-03-08 */
/*! jusas-angularjs-slider - v0.1.4 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/Jusas/angularjs-slider.git - 2014-04-29 */
rzslider{position:relative;display:inline-block;width:100%;height:2px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.base{width:100%;height:100%;padding:0}rzslider span.bar{z-index:0;width:100%;height:100%;background:#fff}rzslider span.bar.selection{z-index:1;width:0;background:#67b700}rzslider span.pointer{top:-15px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#fff;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#71818e;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.pointer:hover:after{background-color:#67b700}rzslider span.pointer.active:after{background-color:#67b700}rzslider span.bubble{top:-32px;padding:1px 3px 1px 3px;color:#67b700;cursor:default}rzslider span.bubble.selection{top:15px}rzslider span.bubble.limit{color:#67b700}
\ No newline at end of file
This diff is collapsed.
{
"name": "angularjs-slider",
"version": "0.1.3",
"name": "jusas-angularjs-slider",
"version": "0.1.4",
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
"main": "rzslider.js",
"repository": {
"type": "git",
"url": "https://github.com/rzajac/angularjs-slider.git"
"url": "https://github.com/Jusas/angularjs-slider.git"
},
"keywords": [
"angular",
......@@ -18,7 +18,7 @@
"grunt-recess": "~0.4.0",
"recess": "~1.1.9"
},
"author": "Rafal Zajac <rzajac@gmail.com>",
"author": "Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>",
"license": "MIT",
"readmeFilename": "README.md"
}
......@@ -782,7 +782,7 @@ function throttle(func, wait, options) {
pointer.addClass('active');
if(event.touches)
if(event.touches || (typeof(event.originalEvent) != 'undefined' && event.originalEvent.touches))
{
$document.on('touchmove', angular.bind(this, this.onMove, pointer));
$document.on('touchend', angular.bind(this, this.onEnd));
......@@ -803,7 +803,7 @@ function throttle(func, wait, options) {
*/
onMove: function (pointer, event)
{
var eventX = event.clientX || event.touches[0].clientX,
var eventX = event.clientX || (typeof(event.originalEvent) != 'undefined' ? event.originalEvent.touches[0].clientX : event.touches[0].clientX),
sliderLO = this.sliderElem.rzsl,
newOffset = eventX - sliderLO - this.handleHalfWidth,
newValue;
......@@ -874,7 +874,7 @@ function throttle(func, wait, options) {
this.minH.removeClass('active');
this.maxH.removeClass('active');
if(event.touches)
if(event.touches || (typeof(event.originalEvent) != 'undefined' && event.originalEvent.touches))
{
$document.unbind('touchmove');
$document.unbind('touchend');
......
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