{"main":["touch.js","touch.css"],"options":[{"name":"axis","type":"string","default":"null","description":"Limit axis for pan and swipe; 'x' or 'y'"},{"name":"pan","type":"boolean","default":"false","description":"Pan events"},{"name":"scale","type":"boolean","default":"false","description":"Scale events"},{"name":"swipe","type":"boolean","default":"false","description":"Swipe events"},{"name":"tap","type":"boolean","default":"false","description":"'Fastclick' event"}],"events":[{"name":"tap","description":"'Fastclick' event; Prevents ghost clicks on mobile"},{"name":"panstart","description":"Panning started"},{"name":"pan","description":"Panning"},{"name":"panend","description":"Panning ended"},{"name":"scalestart","description":"Scaling started"},{"name":"scale","description":"Scaling"},{"name":"scaleend","description":"Scaling ended"},{"name":"swipe","description":"Swipe"}],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.touch(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").touch(\"destroy\");"]}],"name":"Touch","type":"widget","description":"A jQuery plugin for multi-touch events.","dependencies":["core.js"],"css":[{"name":".fs-touch-element","type":"element","description":"Target Element"}],"use":"### Basic\n\nTouch normalizes mouse and touch events in the context of a few basic gestures: `tap`, `pan`, `swipe` and `scale`. It is up to the developer to utilize the events. Events emitted by Touch will contain the following extra properties:\n\n| Key | Description |\n| --- | --- |\n| `pageX` | Current X position |\n| `pageY` | Current Y position |\n| `deltaX` | Change in X position |\n| `deltaY` | Change in Y position |\n| `scale` | Current scale value |\n| `directionX` | Current X movement |\n| `directionY` | Current Y movement |\n\n### Tap\n\nTap creates a basic 'fast click' event. This synthesizes the touch and click events allowing fast mobile UIs without interupting the user's scroll:\n\n```javascript\n$(\".target\").touch({\n\ttap: true\n}).on(\"tap\", function(e) {\n\tconsole.log(\"Tapped\");\n});\n```\n\nNote: `tap` can not be used in conjunction with `pan` or `scale`.\n\n### Pan\n\nPan can be used for building touch-friendly draggable interfaces:\n\n```javascript\n$(\".target\").touch({\n\tpan: true\n}).on(\"panstart\", function(e) {\n\tconsole.log(\"Started panning\");\n}).on(\"pan\", function(e) {\n\tconsole.log(\"Panning\");\n}).on(\"panend\", function(e) {\n\tconsole.log(\"Stopped panning\");\n});\n```\n\n### Swipe\n\nSwipe can be used for building touch-friendly swipable interfaces:\n\n```javascript\n$(\".target\").touch({\n\tswipe: true\n}).on(\"swipe\", function(e) {\n\tconsole.log(\"Swiped\");\n});\n```\n\n### Scale\n\nScale can be used for building touch-friendly scalable interfaces:\n\n```javascript\n$(\".target\").touch({\n\tscale: true\n}).on(\"scalestart\", function(e) {\n\tconsole.log(\"Started scaling\");\n}).on(\"scale\", function(e) {\n\tconsole.log(\"Scaling\");\n}).on(\"scaleend\", function(e) {\n\tconsole.log(\"Stopped scaling\");\n});\n```\n\nNote: `pan`, `swipe` and `scale` can also be used together to create a rich interface.","demo":"<style>\r\n\t.tap,\r\n\t.box { background: #393b3f; border-radius: 3px; color: #fff; text-align: center; }\r\n\r\n\t.tap.active,\r\n\t.box.active { background: #c65032; }\r\n\r\n\t.tap { height: 50px; line-height: 50px; margin: 10px 0; width: 100%; }\r\n\r\n\t.container { border: 1px solid #ccc; border-radius: 3px; height: 400px; margin: 20px 0; overflow: hidden; position: relative; width: 100%; }\r\n\r\n\t.register { height: 1px; left: 50%; position: absolute; top: 50%; width: 1px; }\r\n\t.box { height: 150px; line-height: 150px; left: -75px; position: absolute; top: -75px; width: 150px; }\r\n</style>\r\n\r\n<script>\r\n\t$(function() {\r\n\t\tvar $targets = $(\".touch\"),\r\n\t\t\t_minX = 10,\r\n\t\t\t_minY = 10;\r\n\r\n\t\t$targets.each(function() {\r\n\t\t\tvar $target = $(this),\r\n\t\t\t\tdata = {\r\n\t\t\t\t\t$container: $target.parents(\".container\"),\r\n\t\t\t\t\t$register:  $target.parents(\".register\")\r\n\t\t\t\t};\r\n\r\n\t\t\t$target.data(\"demo\", data);\r\n\t\t});\r\n\r\n\t\t// Tap\r\n\r\n\t\t$(\".tap\").touch({\r\n\t\t\ttap: true\r\n\t\t}).on(\"tap\", function(e) {\r\n\t\t\t$(this).toggleClass(\"active\");\r\n\t\t});\r\n\r\n\t\t// Pan\r\n\t\t$(\".pan\").touch({\r\n\t\t\tpan: true\r\n\t\t}).on(\"panstart\", function(e) {\r\n\t\t\tvar $target = $(this),\r\n\t\t\t\tdata = $target.data(\"demo\"),\r\n\t\t\t\toffset = data.$register.position();\r\n\r\n\t\t\tdata.origX = offset.left;\r\n\t\t\tdata.origY = offset.top;\r\n\r\n\t\t\tdata.diffWidth  = $target.outerWidth() / 2;\r\n\t\t\tdata.diffHeight = $target.outerHeight() / 2;\r\n\t\t})\r\n\t\t.on(\"panend\", function(e) {\r\n\t\t\t// ...\r\n\t\t});\r\n\r\n\t\t// Bubbling\r\n\r\n\t\t$(document).on(\"pan\", \".pan\", function(e) {\r\n\t\t\tvar $target = $(this),\r\n\t\t\t\tdata = $target.data(\"demo\"),\r\n\t\t\t\tx = data.origX + e.deltaX,\r\n\t\t\t\ty = data.origY + e.deltaY,\r\n\t\t\t\tminX = _minX + data.diffWidth,\r\n\t\t\t\tminY = _minY + data.diffHeight,\r\n\t\t\t\tmaxX = data.$container.outerWidth()  - minX,\r\n\t\t\t\tmaxY = data.$container.outerHeight() - minY;\r\n\r\n\t\t\tif (x < minX) {\r\n\t\t\t\tx = minX;\r\n\t\t\t}\r\n\t\t\tif (x > maxX) {\r\n\t\t\t\tx = maxX;\r\n\t\t\t}\r\n\t\t\tif (y < minY) {\r\n\t\t\t\ty = minY;\r\n\t\t\t}\r\n\t\t\tif (y > maxY) {\r\n\t\t\t\ty = maxY;\r\n\t\t\t}\r\n\r\n\t\t\tdata.$register.css({\r\n\t\t\t\tleft: x,\r\n\t\t\t\ttop:  y\r\n\t\t\t});\r\n\t\t});\r\n\r\n\t\t// Scale\r\n\t\t$(\".scale\").touch({\r\n\t\t\tscale: true\r\n\t\t}).on(\"scalestart\", function(e) {\r\n\t\t\tvar $target = $(this),\r\n\t\t\t\tdata = $target.data(\"demo\"),\r\n\t\t\t\toffset = $target.position();\r\n\r\n\t\t\tdata.origWidth  = $target.outerWidth();\r\n\t\t\tdata.origHeight = $target.outerHeight();\r\n\t\t})\r\n\t\t.on(\"scaleend\", function(e) {\r\n\t\t\t// ...\r\n\t\t})\r\n\t\t.on(\"scale\", function(e) {\r\n\t\t\tvar $target = $(this),\r\n\t\t\t\tdata = $target.data(\"demo\")\r\n\t\t\t\twidth  = data.origWidth  * e.scale,\r\n\t\t\t\theight = data.origHeight * e.scale,\r\n\t\t\t\tminWidth  = 150,\r\n\t\t\t\tminHeight = 150,\r\n\t\t\t\tmaxH = data.$container.outerHeight() - 20,\r\n\t\t\t\tmaxW = data.$container.outerWidth()  - 20,\r\n\t\t\t\tmaxWidth  = (maxH > maxW) ? maxW : maxH,\r\n\t\t\t\tmaxHeight = (maxH > maxW) ? maxW : maxH;\r\n\r\n\t\t\tif (width < minWidth) {\r\n\t\t\t\twidth = minWidth;\r\n\t\t\t}\r\n\t\t\tif (width > maxWidth) {\r\n\t\t\t\twidth = maxWidth;\r\n\t\t\t}\r\n\r\n\t\t\tif (height < minHeight) {\r\n\t\t\t\theight = minHeight;\r\n\t\t\t}\r\n\t\t\tif (height > maxHeight) {\r\n\t\t\t\theight = maxHeight;\r\n\t\t\t}\r\n\r\n\t\t\t$target.css({\r\n\t\t\t\twidth:  width,\r\n\t\t\t\theight: height,\r\n\t\t\t\tlineHeight: height + \"px\",\r\n\t\t\t\tleft: -(width / 2),\r\n\t\t\t\ttop:  -(height / 2)\r\n\t\t\t});\r\n\t\t});\r\n\r\n\t\t// Manipulate\r\n\t\t$(\".manipulate\").touch({\r\n\t\t\tpan: true,\r\n\t\t\tscale: true\r\n\t\t}).on(\"scalestart\", function(e) {\r\n\t\t\tvar $target = $(this),\r\n\t\t\t\tdata = $target.data(\"demo\"),\r\n\t\t\t\toffset = data.$register.position();\r\n\r\n\t\t\tdata.origX = offset.left;\r\n\t\t\tdata.origY = offset.top;\r\n\r\n\t\t\tdata.origWidth  = $target.outerWidth();\r\n\t\t\tdata.origHeight = $target.outerHeight();\r\n\t\t})\r\n\t\t.on(\"scaleend\", function(e) {\r\n\t\t\t// ...\r\n\t\t})\r\n\t\t.on(\"scale\", function(e) {\r\n\t\t\tvar $target = $(this),\r\n\t\t\t\tdata = $target.data(\"demo\")\r\n\t\t\t\twidth  = data.origWidth  * e.scale,\r\n\t\t\t\theight = data.origHeight * e.scale,\r\n\t\t\t\t// pan\r\n\t\t\t\tx = data.origX + e.deltaX,\r\n\t\t\t\ty = data.origY + e.deltaY,\r\n\t\t\t\tminX = _minX,\r\n\t\t\t\tminY = _minY,\r\n\t\t\t\tmaxX = data.$container.outerWidth()  - minX,\r\n\t\t\t\tmaxY = data.$container.outerHeight() - minY,\r\n\t\t\t\t// scale\r\n\t\t\t\tminWidth  = 150,\r\n\t\t\t\tminHeight = 150,\r\n\t\t\t\tmaxWidth = 600,\r\n\t\t\t\tmaxHeight = 600;\r\n\r\n\t\t\tif (x < minX) {\r\n\t\t\t\tx = minX;\r\n\t\t\t}\r\n\t\t\tif (x > maxX) {\r\n\t\t\t\tx = maxX;\r\n\t\t\t}\r\n\t\t\tif (y < minY) {\r\n\t\t\t\ty = minY;\r\n\t\t\t}\r\n\t\t\tif (y > maxY) {\r\n\t\t\t\ty = maxY;\r\n\t\t\t}\r\n\r\n\t\t\tdata.$register.css({\r\n\t\t\t\tleft: x,\r\n\t\t\t\ttop:  y\r\n\t\t\t});\r\n\r\n\t\t\tif (width < minWidth) {\r\n\t\t\t\twidth = minWidth;\r\n\t\t\t}\r\n\t\t\tif (width > maxWidth) {\r\n\t\t\t\twidth = maxWidth;\r\n\t\t\t}\r\n\r\n\t\t\tif (height < minHeight) {\r\n\t\t\t\theight = minHeight;\r\n\t\t\t}\r\n\t\t\tif (height > maxHeight) {\r\n\t\t\t\theight = maxHeight;\r\n\t\t\t}\r\n\r\n\t\t\t$target.css({\r\n\t\t\t\twidth:  width,\r\n\t\t\t\theight: height,\r\n\t\t\t\tlineHeight: height + \"px\",\r\n\t\t\t\tleft: -(width / 2),\r\n\t\t\t\ttop:  -(height / 2)\r\n\t\t\t});\r\n\t\t});\r\n\t});\r\n</script>\r\n\r\n<h4>Tap</h4>\r\n<div class=\"touch tap\">Tap</div>\r\n\r\n<h4>Pan</h4>\r\n<div class=\"container\">\r\n\t<div class=\"register\">\r\n\t\t<div class=\"box touch pan\">Pan</div>\r\n\t</div>\r\n</div>\r\n\r\n<h4>Scale</h4>\r\n<div class=\"container\">\r\n\t<div class=\"register\">\r\n\t\t<div class=\"box touch scale\">Scale</div>\r\n\t</div>\r\n</div>\r\n\r\n<h4>Manipulate</h4>\r\n<div class=\"container\">\r\n\t<div class=\"register\">\r\n\t\t<div class=\"box touch manipulate\">Scale &amp; Pan</div>\r\n\t</div>\r\n</div>"}