From 202df1e87fd1940174ade2f10ab198925c28a447 Mon Sep 17 00:00:00 2001 From: James Tease Date: Wed, 22 Jan 2014 12:57:40 +0000 Subject: [PATCH 1/2] Adding touch support to drag lib --- src/rangeinput/rangeinput.js | 123 ++++++++++++++++++++--------------- 1 file changed, 70 insertions(+), 53 deletions(-) diff --git a/src/rangeinput/rangeinput.js b/src/rangeinput/rangeinput.js index 518502b..d2c0ef9 100644 --- a/src/rangeinput/rangeinput.js +++ b/src/rangeinput/rangeinput.js @@ -60,60 +60,77 @@ var doc, draggable; $.fn.drag = function(conf) { - - // disable IE specialities - document.ondragstart = function () { return false; }; - - conf = $.extend({x: true, y: true, drag: true}, conf); - - doc = doc || $(document).on("mousedown mouseup", function(e) { - - var el = $(e.target); - - // start - if (e.type == "mousedown" && el.data("drag")) { - - var offset = el.position(), - x0 = e.pageX - offset.left, - y0 = e.pageY - offset.top, - start = true; - - doc.on("mousemove.drag", function(e) { - var x = e.pageX -x0, - y = e.pageY -y0, - props = {}; - - if (conf.x) { props.left = x; } - if (conf.y) { props.top = y; } - - if (start) { - el.trigger("dragStart"); - start = false; - } - if (conf.drag) { el.css(props); } - el.trigger("drag", [y, x]); - draggable = el; - }); - - e.preventDefault(); - - } else { - - try { - if (draggable) { - draggable.trigger("dragEnd"); - } - } finally { - doc.off("mousemove.drag"); - draggable = null; - } - } - - }); - - return this.data("drag", true); - }; + + // disable IE specialities + document.ondragstart = function () { return false; }; + + conf = $.extend({x: true, y: true, drag: true}, conf); + + doc = doc || $(document).on("mousedown mouseup touchstart touchend", function(e) { + var el = $(e.target); + + // start + if ((e.type == "mousedown" || e.type == "touchstart") && el.data("drag")) { + var offset = el.position(); + var x0; + var y0; + if(e.type === 'touchstart') { + if(e.originalEvent) { + x0 = e.originalEvent.changedTouches[0].pageX - offset.left; + y0 = e.originalEvent.changedTouches[0].pageY - offset.top; + } + } else { + x0 = e.pageX - offset.left; + y0 = e.pageY - offset.top; + var start = true; + } + + doc.on("mousemove.drag touchmove", function(e) { + var x; + var y; + if(e.type === 'touchmove') { + if(e.originalEvent) { + x = e.originalEvent.changedTouches[0].pageX - x0; + y = e.originalEvent.changedTouches[0].pageY - y0; + } + } else { + x = e.pageX -x0; + y = e.pageY -y0; + } + + var props = {}; + + if (conf.x) { props.left = x; } + if (conf.y) { props.top = y; } + + if (start) { + el.trigger("dragStart"); + start = false; + } + if (conf.drag) { el.css(props); } + el.trigger("drag", [y, x]); + draggable = el; + }); + + e.preventDefault(); + + } else { + + try { + if (draggable) { + draggable.trigger("dragEnd"); + } + } finally { + doc.off("mousemove.drag touchmove"); + draggable = null; + } + } + + }); + + return this.data("drag", true); + }; //}}} From e236781edd9d8c496baa9f3689bc071ea713c61d Mon Sep 17 00:00:00 2001 From: James Tease Date: Wed, 22 Jan 2014 13:01:33 +0000 Subject: [PATCH 2/2] Spacing --- src/rangeinput/rangeinput.js | 146 ++++++++++++++++++----------------- 1 file changed, 74 insertions(+), 72 deletions(-) diff --git a/src/rangeinput/rangeinput.js b/src/rangeinput/rangeinput.js index d2c0ef9..2b7deec 100644 --- a/src/rangeinput/rangeinput.js +++ b/src/rangeinput/rangeinput.js @@ -16,7 +16,7 @@ var tool; tool = $.tools.rangeinput = { - + conf: { min: 0, max: 100, // as defined in the standard @@ -60,77 +60,79 @@ var doc, draggable; $.fn.drag = function(conf) { - - // disable IE specialities - document.ondragstart = function () { return false; }; - - conf = $.extend({x: true, y: true, drag: true}, conf); - - doc = doc || $(document).on("mousedown mouseup touchstart touchend", function(e) { - var el = $(e.target); - - // start - if ((e.type == "mousedown" || e.type == "touchstart") && el.data("drag")) { - var offset = el.position(); - var x0; - var y0; + + // disable IE specialities + document.ondragstart = function () { return false; }; + + conf = $.extend({x: true, y: true, drag: true}, conf); + + doc = doc || $(document).on("mousedown mouseup touchstart touchend", function(e) { + + var el = $(e.target); + + // start + if ((e.type == "mousedown" || e.type == "touchstart") && el.data("drag")) { + + var offset = el.position(); + var x0; + var y0; - if(e.type === 'touchstart') { - if(e.originalEvent) { - x0 = e.originalEvent.changedTouches[0].pageX - offset.left; - y0 = e.originalEvent.changedTouches[0].pageY - offset.top; - } - } else { - x0 = e.pageX - offset.left; - y0 = e.pageY - offset.top; - var start = true; - } - - doc.on("mousemove.drag touchmove", function(e) { - var x; - var y; - if(e.type === 'touchmove') { - if(e.originalEvent) { - x = e.originalEvent.changedTouches[0].pageX - x0; - y = e.originalEvent.changedTouches[0].pageY - y0; - } - } else { - x = e.pageX -x0; - y = e.pageY -y0; - } + if(e.type === 'touchstart') { + if(e.originalEvent) { + x0 = e.originalEvent.changedTouches[0].pageX - offset.left; + y0 = e.originalEvent.changedTouches[0].pageY - offset.top; + } + } else { + x0 = e.pageX - offset.left; + y0 = e.pageY - offset.top; + var start = true; + } + + doc.on("mousemove.drag touchmove", function(e) { + var x; + var y; + if(e.type === 'touchmove') { + if(e.originalEvent) { + x = e.originalEvent.changedTouches[0].pageX - x0; + y = e.originalEvent.changedTouches[0].pageY - y0; + } + } else { + x = e.pageX -x0; + y = e.pageY -y0; + } + var props = {}; + + if (conf.x) { props.left = x; } + if (conf.y) { props.top = y; } + + if (start) { + el.trigger("dragStart"); + start = false; + } + if (conf.drag) { el.css(props); } + el.trigger("drag", [y, x]); + draggable = el; + }); + + e.preventDefault(); + + } else { + + try { + if (draggable) { + draggable.trigger("dragEnd"); + } + } finally { + doc.off("mousemove.drag touchmove"); + draggable = null; + } + } + + }); + + return this.data("drag", true); + }; - var props = {}; - - if (conf.x) { props.left = x; } - if (conf.y) { props.top = y; } - - if (start) { - el.trigger("dragStart"); - start = false; - } - if (conf.drag) { el.css(props); } - el.trigger("drag", [y, x]); - draggable = el; - }); - - e.preventDefault(); - - } else { - - try { - if (draggable) { - draggable.trigger("dragEnd"); - } - } finally { - doc.off("mousemove.drag touchmove"); - draggable = null; - } - } - - }); - - return this.data("drag", true); - }; //}}} @@ -204,7 +206,7 @@ /** - The flesh and bone of this tool. All sliding is routed trough this. + The flesh and bone of this tool. All sliding is routed trough this. @param evt types include: click, keydown, blur and api (setValue call) @param isSetValue when called trough setValue() call (keydown, blur, api) @@ -430,7 +432,7 @@ // calculate all dimension related stuff function init() { - vertical = conf.vertical || dim(root, "height") > dim(root, "width"); + vertical = conf.vertical || dim(root, "height") > dim(root, "width"); if (vertical) { len = dim(root, "height") - dim(handle, "height");