Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add drag.js dependency

  • Loading branch information...
commit d028a7cfab43b73c46ff5157e263991c0904e1a3 1 parent 9e51d7f
@bebraw authored
Showing with 195 additions and 115 deletions.
  1. +2 −1  index.html
  2. +26 −114 src/colorjoe.js
  3. +167 −0 src/drag.js
View
3  index.html
@@ -5,9 +5,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta charset=utf-8 />
-
+
<link rel="stylesheet" type="text/css" href="css/demo.css" />
+ <script src="src/drag.js"></script>
<script src="src/colorutils.js"></script>
<script src="src/color.js"></script>
<script src="src/colorjoe.js"></script>
View
140 src/colorjoe.js
@@ -1,18 +1,19 @@
(function(root, factory) {
- if(typeof define === 'function' && define.amd) define(['./color'], factory);
- else root.colorjoe = factory(root.color);
-}(this, function(color) {
+ if(typeof define === 'function' && define.amd)
+ define(['./color', './drag'], factory);
+ else root.colorjoe = factory(root.color, root.drag);
+}(this, function(color, drag) {
var ret = function(element, initialColor) {
var picker = element;
if(isString(element)) picker = document.getElementById(element);
-
+
if(picker) return setup(picker, initialColor);
function setup(picker, col) {
var hsv = color.hsva(col);
-
+
picker.className = 'colorPicker';
-
+
var div = partial(e, 'div');
var twod = div('twod', picker);
var p1 = div('pointer', twod);
@@ -20,24 +21,30 @@ var ret = function(element, initialColor) {
div('shape shape2', p1);
div('bg bg1', twod);
div('bg bg2', twod);
-
+
var oned = div('oned', picker);
var p2 = div('pointer', oned);
div('shape', p2);
div('bg', oned);
- drag(oned, function(p) {
- hsv.h(p.y);
- H(p.y);
- changed(hsv);
- }, done);
-
- drag(twod, function(p) {
- hsv.s(p.x);
- hsv.v(1 - p.y);
- SV(p.x, p.y);
- changed(hsv);
- }, done);
+ drag(oned, {
+ change: function(p) {
+ hsv.h(p.y);
+ H(p.y);
+ changed(hsv);
+ },
+ end: done
+ });
+
+ drag(twod, {
+ change: function(p) {
+ hsv.s(p.x);
+ hsv.v(1 - p.y);
+ SV(p.x, p.y);
+ changed(hsv);
+ },
+ end: done
+ });
H(hsv.h());
SV(hsv.s(), hsv.v());
@@ -124,99 +131,4 @@ function partial(fn) {
return fn.apply(null, args.concat(slice.apply(arguments)));
};
}
-
-function drag(elem, changeCb, doneCb) {
- var dragging = false;
-
- // http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript
- var isTouch = typeof(window.ontouchstart) != 'undefined';
-
- if(isTouch) {
- elem.ontouchstart = function(e) {
- e.preventDefault();
- dragging = true;
-
- document.ontouchend = function() {
- dragging = false;
-
- document.ontouchend = '';
- document.ontouchmove = '';
-
- callCb(doneCb, e);
- };
-
- document.ontouchmove = partial(callCb, changeCb);
- };
- elem.ontouchend = function(e) {
- e.preventDefault();
- dragging = false;
-
- callCb(doneCb, e);
- };
- }
- else {
- elem.onmousedown = function(e) {
- e.preventDefault();
- dragging = true;
-
- document.onmouseup = function() {
- dragging = false;
-
- document.onmouseup = '';
- document.onmousemove = '';
-
- callCb(doneCb, e);
- };
-
- document.onmousemove = partial(callCb, changeCb);
- };
- elem.onmouseup = function(e) {
- e.preventDefault();
- dragging = false;
-
- callCb(doneCb, e);
- };
- }
-
- function callCb(cb, e) {
- e.preventDefault();
-
- var offset = findPos(elem);
- var width = elem.clientWidth;
- var height = elem.clientHeight;
-
- cb({x: (mouseX(e) - offset.x) / width, y: (mouseY(e) - offset.y) / height});
- }
-}
-
-// http://www.quirksmode.org/js/findpos.html
-function findPos(e) {
- var x = 0;
- var y = 0;
-
- if(e.offsetParent) {
- do {
- x += e.offsetLeft;
- y += e.offsetTop;
- } while (e = e.offsetParent);
- }
-
- return {x: x, y: y};
-}
-
-// http://javascript.about.com/library/blmousepos.htm
-function mouseX(evt) {
- if(evt.pageX) return evt.pageX;
- else if(evt.clientX)
- return evt.clientX + (document.documentElement.scrollLeft ?
- document.documentElement.scrollLeft :
- document.body.scrollLeft);
-}
-function mouseY(evt) {
- if(evt.pageY) return evt.pageY;
- else if(evt.clientY)
- return evt.clientY + (document.documentElement.scrollTop ?
- document.documentElement.scrollTop :
- document.body.scrollTop);
-}
}));
View
167 src/drag.js
@@ -0,0 +1,167 @@
+/*
+ * References:
+ * * http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
+ * * http://stackoverflow.com/questions/1291325/drag-drop-problem-draggable-in-positionrelative-parent
+ *
+ * Note that default drag does not work with position: relative by default!
+ * */
+(function(root, factory) {
+ if(typeof define === 'function' && define.amd) define(factory);
+ else root.drag = factory();
+}(this, function() {
+
+function drag(elem, cbs) {
+ if(!elem) {
+ console.warn('drag is missing elem!');
+ return;
+ }
+
+ if(isTouch()) dragTemplate(elem, cbs, 'touchstart', 'touchmove', 'touchend');
+ else dragTemplate(elem, cbs, 'mousedown', 'mousemove', 'mouseup');
+}
+return drag;
+
+// http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript
+function isTouch() {
+ return typeof(window.ontouchstart) != 'undefined';
+}
+
+function dragTemplate(elem, cbs, down, move, up) {
+ var dragging = false;
+
+ cbs = getCbs(cbs);
+
+ var beginCb = cbs.begin;
+ var changeCb = cbs.change;
+ var endCb = cbs.end;
+
+ on(elem, down, function(e) {
+ dragging = true;
+
+ var moveHandler = partial(callCb, changeCb, elem);
+ function upHandler() {
+ dragging = false;
+
+ off(document, move, moveHandler);
+ off(document, up, upHandler);
+
+ callCb(endCb, elem, e);
+ }
+
+ on(document, move, moveHandler);
+ on(document, up, upHandler);
+
+ callCb(beginCb, elem, e);
+ });
+ on(elem, up, function(e) {
+ dragging = false;
+
+ callCb(endCb, elem, e);
+ });
+}
+
+function on(elem, evt, handler) {
+ elem.addEventListener(evt, handler, false);
+}
+
+function off(elem, evt, handler) {
+ elem.removeEventListener(evt, handler, false);
+}
+
+function getCbs(cbs) {
+ if(!cbs) {
+ var initialOffset;
+ var initialPos;
+
+ return {
+ begin: function(c) {
+ initialOffset = {x: c.elem.offsetLeft, y: c.elem.offsetTop};
+ initialPos = c.cursor;
+ },
+ change: function(c) {
+ style(c.elem, 'left', (initialOffset.x + c.cursor.x - initialPos.x) + 'px');
+ style(c.elem, 'top', (initialOffset.y + c.cursor.y - initialPos.y) + 'px');
+ },
+ end: empty
+ };
+ }
+ else {
+ return {
+ begin: cbs.begin || empty,
+ change: cbs.change || empty,
+ end: cbs.end || empty
+ };
+ }
+}
+
+// TODO: set draggable class (handy for fx)
+
+function style(e, prop, value) {
+ e.style[prop] = value;
+}
+
+function empty() {}
+
+function callCb(cb, elem, e) {
+ e.preventDefault();
+
+ var offset = findPos(elem);
+ var width = elem.clientWidth;
+ var height = elem.clientHeight;
+ var cursor = {
+ x: cursorX(e),
+ y: cursorY(e)
+ };
+ var x = (cursor.x - offset.x) / width;
+ var y = (cursor.y - offset.y) / height;
+
+ cb({
+ x: isNaN(x)? 0: x,
+ y: isNaN(y)? 0: y,
+ cursor: cursor,
+ elem: elem,
+ e: e
+ });
+}
+
+// http://stackoverflow.com/questions/4394747/javascript-curry-function
+function partial(fn) {
+ var slice = Array.prototype.slice;
+ var args = slice.apply(arguments, [1]);
+
+ return function() {
+ return fn.apply(null, args.concat(slice.apply(arguments)));
+ };
+}
+
+// http://www.quirksmode.org/js/findpos.html
+function findPos(e) {
+ var x = 0;
+ var y = 0;
+
+ if(e.offsetParent) {
+ do {
+ x += e.offsetLeft;
+ y += e.offsetTop;
+ } while (e = e.offsetParent);
+ }
+
+ return {x: x, y: y};
+}
+
+// http://javascript.about.com/library/blmousepos.htm
+function cursorX(evt) {
+ if(evt.pageX) return evt.pageX;
+ else if(evt.clientX)
+ return evt.clientX + (document.documentElement.scrollLeft ?
+ document.documentElement.scrollLeft :
+ document.body.scrollLeft);
+}
+function cursorY(evt) {
+ if(evt.pageY) return evt.pageY;
+ else if(evt.clientY)
+ return evt.clientY + (document.documentElement.scrollTop ?
+ document.documentElement.scrollTop :
+ document.body.scrollTop);
+}
+}));
Please sign in to comment.
Something went wrong with that request. Please try again.