formstone
Version:
Library of modular front end components.
1 lines • 15.3 kB
JSON
{"main":["touch.js"],"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"}],"events":[{"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":["jQuery","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: `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### Pan\n\nPan can be used for building touch-friendly draggable interfaces:\n\n```javascript\n$(\".target\").touch({\n pan: true\n}).on(\"panstart\", function(e) {\n console.log(\"Started panning\");\n}).on(\"pan\", function(e) {\n console.log(\"Panning\");\n}).on(\"panend\", function(e) {\n console.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 swipe: true\n}).on(\"swipe\", function(e) {\n console.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 scale: true\n}).on(\"scalestart\", function(e) {\n console.log(\"Started scaling\");\n}).on(\"scale\", function(e) {\n console.log(\"Scaling\");\n}).on(\"scaleend\", function(e) {\n console.log(\"Stopped scaling\");\n});\n```\n\nNote: `pan`, `swipe` and `scale` can also be used together to create a rich interface.","demo":"<h4>Manipulate</h4>\r\n\r\n<!-- START: FIRSTDEMO -->\r\n\r\n<style>\r\n .box { background: #00bcd4; color: #fff; text-align: center; }\r\n\r\n .container { background: #fff; border: 1px solid #455a64; height: 400px; margin: 20px 0; overflow: hidden; position: relative; width: 100%; }\r\n\r\n .register { height: 1px; left: 50%; position: absolute; top: 50%; width: 1px; }\r\n .box { height: 150px; line-height: 150px; left: -75px; position: absolute; top: -75px; width: 150px; }\r\n\r\n .swipe { background: gray; height: 100px; width: 100%; }\r\n</style>\r\n\r\n<script>\r\n Formstone.Ready(function() {\r\n var $targets = $(\".touch\"),\r\n _minX = 0,\r\n _minY = 0;\r\n\r\n/*\r\n $(\".swipe\").touch({\r\n swipe: true,\r\n axis: x\r\n }).on(\"swipe\", function(e) {\r\n $(this).html(e.directionX);\r\n });\r\n*/\r\n\r\n $targets.each(function() {\r\n var $target = $(this),\r\n data = {\r\n $container: $target.parents(\".container\"),\r\n $register: $target.parents(\".register\")\r\n };\r\n\r\n $target.data(\"demo\", data);\r\n });\r\n\r\n // Pan\r\n $(\".pan\").touch({\r\n pan: true\r\n }).on(\"panstart\", function(e) {\r\n var $target = $(this),\r\n data = $target.data(\"demo\"),\r\n offset = data.$register.position();\r\n\r\n data.origX = offset.left;\r\n data.origY = offset.top;\r\n\r\n data.diffWidth = $target.outerWidth() / 2;\r\n data.diffHeight = $target.outerHeight() / 2;\r\n })\r\n .on(\"panend\", function(e) {\r\n // ...\r\n });\r\n\r\n // Bubbling\r\n\r\n $(document).on(\"pan\", \".pan\", function(e) {\r\n var $target = $(this),\r\n data = $target.data(\"demo\"),\r\n x = data.origX + e.deltaX,\r\n y = data.origY + e.deltaY,\r\n minX = _minX + data.diffWidth,\r\n minY = _minY + data.diffHeight,\r\n maxX = data.$container.outerWidth() - minX - 2,\r\n maxY = data.$container.outerHeight() - minY - 2;\r\n\r\n if (x < minX) {\r\n x = minX;\r\n }\r\n if (x > maxX) {\r\n x = maxX;\r\n }\r\n if (y < minY) {\r\n y = minY;\r\n }\r\n if (y > maxY) {\r\n y = maxY;\r\n }\r\n\r\n data.$register.css({\r\n left: x,\r\n top: y\r\n });\r\n });\r\n\r\n // Scale\r\n $(\".scale\").touch({\r\n scale: true\r\n }).on(\"scalestart\", function(e) {\r\n var $target = $(this),\r\n data = $target.data(\"demo\"),\r\n offset = $target.position();\r\n\r\n data.origWidth = $target.outerWidth();\r\n data.origHeight = $target.outerHeight();\r\n })\r\n .on(\"scaleend\", function(e) {\r\n // ...\r\n })\r\n .on(\"scale\", function(e) {\r\n var $target = $(this),\r\n data = $target.data(\"demo\")\r\n width = data.origWidth * e.scale,\r\n height = data.origHeight * e.scale,\r\n minWidth = 150,\r\n minHeight = 150,\r\n maxH = data.$container.outerHeight(),\r\n maxW = data.$container.outerWidth(),\r\n maxWidth = (maxH > maxW) ? maxW : maxH,\r\n maxHeight = (maxH > maxW) ? maxW : maxH;\r\n\r\n if (width < minWidth) {\r\n width = minWidth;\r\n }\r\n if (width > maxWidth) {\r\n width = maxWidth;\r\n }\r\n\r\n if (height < minHeight) {\r\n height = minHeight;\r\n }\r\n if (height > maxHeight) {\r\n height = maxHeight;\r\n }\r\n\r\n $target.css({\r\n width: width,\r\n height: height,\r\n lineHeight: height + \"px\",\r\n left: -(width / 2),\r\n top: -(height / 2)\r\n });\r\n });\r\n\r\n // Manipulate\r\n $(\".manipulate\").touch({\r\n pan: true,\r\n scale: true\r\n }).on(\"scalestart\", function(e) {\r\n var $target = $(this),\r\n data = $target.data(\"demo\"),\r\n offset = data.$register.position();\r\n\r\n data.origX = offset.left;\r\n data.origY = offset.top;\r\n\r\n data.origWidth = $target.outerWidth();\r\n data.origHeight = $target.outerHeight();\r\n })\r\n .on(\"scaleend\", function(e) {\r\n // ...\r\n })\r\n .on(\"scale\", function(e) {\r\n var $target = $(this),\r\n data = $target.data(\"demo\")\r\n width = data.origWidth * e.scale,\r\n height = data.origHeight * e.scale,\r\n // pan\r\n x = data.origX + e.deltaX,\r\n y = data.origY + e.deltaY,\r\n minX = _minX,\r\n minY = _minY,\r\n maxX = data.$container.outerWidth() - minX,\r\n maxY = data.$container.outerHeight() - minY,\r\n // scale\r\n minWidth = 150,\r\n minHeight = 150,\r\n maxWidth = 600,\r\n maxHeight = 600;\r\n\r\n if (x < minX) {\r\n x = minX;\r\n }\r\n if (x > maxX) {\r\n x = maxX;\r\n }\r\n if (y < minY) {\r\n y = minY;\r\n }\r\n if (y > maxY) {\r\n y = maxY;\r\n }\r\n\r\n data.$register.css({\r\n left: x,\r\n top: y\r\n });\r\n\r\n if (width < minWidth) {\r\n width = minWidth;\r\n }\r\n if (width > maxWidth) {\r\n width = maxWidth;\r\n }\r\n\r\n if (height < minHeight) {\r\n height = minHeight;\r\n }\r\n if (height > maxHeight) {\r\n height = maxHeight;\r\n }\r\n\r\n $target.css({\r\n width: width,\r\n height: height,\r\n lineHeight: height + \"px\",\r\n left: -(width / 2),\r\n top: -(height / 2)\r\n });\r\n });\r\n });\r\n</script>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"container\">\r\n <div class=\"register\">\r\n <div class=\"box touch manipulate\">Scale & Pan</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="touch_container">\r\n	<div class="touch_target">Touch</div>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".touch_target\").touch({\r\n pan: true,\r\n scale: true\r\n}).on(\"panstart\", function(e) {\r\n // Handle pan start\r\n // Cache positions, etc...\r\n}).on(\"panend\", function(e) {\r\n // Handle pan end\r\n // Clean up data...\r\n}).on(\"pan\", function(e) {\r\n var deltaX = e.deltaX,\r\n deltaY = e.deltaY;\r\n\r\n // React to pan...\r\n}).on(\"scalestart\", function(e) {\r\n // Handle scale start\r\n // Cache positions, etc...\r\n}).on(\"scaleend\", function(e) {\r\n // Handle touch end\r\n // Clean up data...\r\n}).on(\"scale\", function(e) {\r\n var scale = e.scale,\r\n deltaX = e.deltaX,\r\n deltaY = e.deltaY;\r\n\r\n // React to scale and pan...\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<!-- END: FIRSTDEMO -->\r\n\r\n<h4>Pan</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"container\">\r\n <div class=\"register\">\r\n <div class=\"box touch pan\">Pan</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="touch_container">\r\n	<div class="touch_target">Touch</div>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".touch_target\").touch({\r\n pan: true\r\n}).on(\"panstart\", function(e) {\r\n // Handle pan start\r\n // Cache positions, etc...\r\n}).on(\"panend\", function(e) {\r\n // Handle pan end\r\n // Clean up data...\r\n}).on(\"pan\", function(e) {\r\n var deltaX = e.deltaX,\r\n deltaY = e.deltaY;\r\n\r\n // React to pan...\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Scale</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"container\">\r\n <div class=\"register\">\r\n <div class=\"box touch scale\">Scale</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="touch_container">\r\n	<div class="touch_target">Touch</div>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".touch_target\").touch({\r\n scale: true\r\n}).on(\"scalestart\", function(e) {\r\n // Handle scale start\r\n // Cache positions, etc...\r\n}).on(\"scaleend\", function(e) {\r\n // Handle touch end\r\n // Clean up data...\r\n}).on(\"scale\", function(e) {\r\n var scale = e.scale;\r\n\r\n // React to scale...\r\n});</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Touch\n\nA jQuery plugin for multi-touch events.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Touch\n\n\n#### Main\n\n```markup\ntouch.js\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\n```\n\n### Basic\n\nTouch normalizes mouse and touch events in the context of a few basic gestures: `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### Pan\n\nPan can be used for building touch-friendly draggable interfaces:\n\n```javascript\n$(\".target\").touch({\n pan: true\n}).on(\"panstart\", function(e) {\n console.log(\"Started panning\");\n}).on(\"pan\", function(e) {\n console.log(\"Panning\");\n}).on(\"panend\", function(e) {\n console.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 swipe: true\n}).on(\"swipe\", function(e) {\n console.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 scale: true\n}).on(\"scalestart\", function(e) {\n console.log(\"Started scaling\");\n}).on(\"scale\", function(e) {\n console.log(\"Scaling\");\n}).on(\"scaleend\", function(e) {\n console.log(\"Stopped scaling\");\n});\n```\n\nNote: `pan`, `swipe` and `scale` can also be used together to create a rich interface.\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-touch-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `axis` | `string` | `null` | Limit axis for pan and swipe; 'x' or 'y' |\n| `pan` | `boolean` | `false` | Pan events |\n| `scale` | `boolean` | `false` | Scale events |\n| `swipe` | `boolean` | `false` | Swipe events |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `panstart` | Panning started |\n| `pan` | Panning |\n| `panend` | Panning ended |\n| `scalestart` | Scaling started |\n| `scale` | Scaling |\n| `scaleend` | Scaling ended |\n| `swipe` | Swipe |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.touch(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").touch(\"destroy\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-touch-element` | `element` | Target Element |\n\n"}