formstone

Version:

Library of modular front end components.

1 lines • 13.7 kB

JSON

{"main":["swap.js"],"options":[{"name":"collapse","type":"boolean","default":"true","description":"Allow swap to collapse it's target"},{"name":"maxWidth","type":"string","default":"Infinity","description":"Width at which to auto-disable plugin"}],"events":[{"name":"activate.swap","description":"Swap activated"},{"name":"deactivate.swap","description":"Swap deactivated"},{"name":"enable.swap","description":"Swap enabled"},{"name":"disable.swap","description":"Swap diabled"}],"methods":[{"name":"activate","description":"Activate instance.","examples":["$(\".target\").swap(\"activate\");"]},{"name":"deactivate","description":"Deactivates instance.","examples":["$(\".target\").swap(\"deactivate\");"]},{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.swap(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").swap(\"destroy\");"]},{"name":"disable","description":"Disables instance.","examples":["$(\".target\").swap(\"disable\");"]},{"name":"enable","description":"Enables instance.","examples":["$(\".target\").swap(\"enable\");"]}],"name":"Swap","type":"widget","description":"A jQuery plugin for toggling states.","dependencies":["jQuery","core.js","mediaquery.js"],"css":[{"name":".fs-swap-element","type":"element","description":"Target Element"},{"name":".fs-swap-target","type":"element","description":"Toggled element"},{"name":".fs-swap-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-swap-active","type":"modifier","description":"Indicates active state"}],"use":"### Basic\n\nSwap toggles classes on groups of elements based on configuration options and user interaction. It is up to the developer to utilize the classes. \n\n```javascript\n$(\".target\").swap();\n```\n\n```markup\n<div class=\"target\" data-swap-target=\".toggle\">Toggle</div>\n<div class=\"toggle\">Target</div>\n```\n\n### Groups\n\nSwaps can be grouped together for a simple accordions or tabs using the `data-swap-group` attribute.\n\n```markup\n<h4>Grouped</h4>\n<div class=\"target\" data-swap-target=\".toggle_1\" data-swap-group=\"group_1\">Toggle - 1</div>\n<div class=\"target\" data-swap-target=\".toggle_2\" data-swap-group=\"group_1\">Toggle - 2</div>\n\n<div class=\"toggle_1\">Target - 1</div>\n<div class=\"toggle_2\">Target - 2</div>\n```\n\n### Linked\n\nSwaps can be linked together for multiple handles using the `data-swap-linked` attribute.\n\n```markup\n<h4>Grouped</h4>\n<div class=\"target\" data-swap-target=\".toggle_1\" data-swap-linked=\"linked_1\">Handle - 1</div>\n\n<div class=\"toggle_1\">Target - 1</div>\n\n<div class=\"target\" data-swap-target=\".toggle_1\" data-swap-linked=\"linked_1\">Handle - 2</div>\n```\n\n### Max Width\n\nSwaps will auto-enable and disable themselves if the `maxWidth` property is set.\n\n```javascript\n$(\".target\").swap({\n maxWidth: \"740px\"\n});\n```\n\n```markup\n<div class=\"target\" data-swap-target=\".toggle\">Toggle</div>\n<div class=\"toggle\">Target</div>\n```\n","demo":"<h4>Basic</h4>\r\n\r\n\r\n\r\n<style>\r\n .demo_content .toggle { cursor: pointer; display: none; margin: 10px 0; }\r\n .demo_content .toggle.fs-swap-enabled { display: block; }\r\n .toggle,\r\n .no-touch .toggle:hover { background: #B0BEC5; }\r\n .toggle.fs-swap-active,\r\n .no-touch .toggle.fs-swap-active:hover { background: #00bcd4; }\r\n\r\n .toggle_target { background: #00bcd4; border-radius: 3px; color: #fff; height: 75px; line-height: 75px; margin: 10px 0; text-align: center; width: 100%; }\r\n .toggle_target.fs-swap-enabled.fs-swap-target { display: none; }\r\n .toggle_target.fs-swap-enabled.fs-swap-active { display: block; }\r\n</style>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"button toggle js-swap\" data-swap-target=\".toggle_target_0\">Handle</div>\r\n <div class=\"toggle_target toggle_target_0\">Content</div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><h2 class="swap" data-swap-target=".swap_target">Handle</h2>\r\n<div class="swap_target">Content</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".swap\").swap();</code></pre>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<h4>Grouped</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"button toggle js-swap\" data-swap-target=\".toggle_target_1\" data-swap-group=\"toggle_group_1\">Handle 1</div>\r\n <div class=\"toggle_target toggle_target_1\">Content 1</div>\r\n\r\n <div class=\"button toggle js-swap\" data-swap-target=\".toggle_target_2\" data-swap-group=\"toggle_group_1\">Handle 2</div>\r\n <div class=\"toggle_target toggle_target_2\">Content 2</div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><h2 class="swap" data-swap-target=".swap_target_1" data-swap-group="swap_group">Handle 1</h2>\r\n<div class="swap_target_1">Content 1</div>\r\n\r\n<h2 class="swap" data-swap-target=".toggle_target_2" data-swap-group="swap_group">Handle 2</h2>\r\n<div class="swap_target_2">Content 2</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".swap\").swap();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Grouped (no collapse)</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"button toggle js-swap\" data-swap-options='{\"collapse\":false}' data-swap-target=\".toggle_target_3\" data-swap-group=\"toggle_group_2\">Handle 1</div>\r\n <div class=\"toggle_target toggle_target_3\">Content 1</div>\r\n\r\n <div class=\"button toggle js-swap\" data-swap-options='{\"collapse\":false}' data-swap-target=\".toggle_target_4\" data-swap-group=\"toggle_group_2\" data-swap-active=\"true\">Handle 2</div>\r\n <div class=\"toggle_target toggle_target_4\">Content 2</div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><h2 class="swap" data-swap-target=".swap_target_1" data-swap-group="swap_group">Handle 1</h2>\r\n<div class="swap_target_1">Content 1</div>\r\n\r\n<h2 class="swap" data-swap-target=".swap_target_2" data-swap-group="swap_group" data-swap-active="true">Handle 2</h2>\r\n<div class="swap_target_2">Content 2</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".swap\").swap({\r\n collapse: false\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Max Width</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"button toggle js-swap\" data-swap-options='{\"maxWidth\":\"740px\"}' data-swap-target=\".toggle_target_5\">Handle</div>\r\n <div class=\"toggle_target toggle_target_5\">Content</div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><h2 class="swap" data-swap-target=".swap_target">Handle</h2>\r\n<div class="swap_target">Content</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".swap\").swap({\r\n maxWidth: \"740px\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Linked Handles</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"button toggle js-swap\" data-swap-target=\".toggle_target_6\" data-swap-linked=\"toggle_linked\" data-swap-group=\"toggle_group_3\">Handle 1 - Group 1</div>\r\n <div class=\"toggle_target toggle_target_6\">Content</div>\r\n <div class=\"button toggle js-swap\" data-swap-target=\".toggle_target_6\" data-swap-linked=\"toggle_linked\" data-swap-group=\"toggle_group_3\">Handle 2 - Group 1</div>\r\n\r\n <div class=\"button toggle js-swap\" data-swap-target=\".toggle_target_7\" data-swap-linked=\"toggle_linked_2\" data-swap-group=\"toggle_group_3\">Handle 1 - Group 2</div>\r\n <div class=\"toggle_target toggle_target_7\">Content 2</div>\r\n <div class=\"button toggle js-swap\" data-swap-target=\".toggle_target_7\" data-swap-linked=\"toggle_linked_2\" data-swap-group=\"toggle_group_3\">Handle 2 - Group 2</div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><h2 class="swap" data-swap-target=".swap_target_1" data-swap-linked="swap_linked_1" data-swap-group="swap_group">Handle 1 - Group 1</h2>\r\n<div class="swap_target_1">Content</div>\r\n<span class="swap" data-swap-target=".swap_target_1" data-swap-linked="swap_linked_1" data-swap-group="swap_group">Handle 2 - Group 1</span>\r\n\r\n<h2 class="swap" data-swap-target=".swap_target_2" data-swap-linked="swap_linked_2" data-swap-group="swap_group">Handle 1 - Group 2</h2>\r\n<div class="swap_target_2">Content 2</div>\r\n<span class="swap" data-swap-target=".swap_target_2" data-swap-linked="swap_linked_2" data-swap-group="swap_group">Handle 2 - Group 2</span></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".swap\").swap();</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Swap\n\nA jQuery plugin for toggling states.\n\n\n\n\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n\n\n\n\n<a name=\"use\"></a>\n\n## Using Swap\n\n\n#### Main\n\n```markup\nswap.js\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nmediaquery.js\n```\n\n### Basic\n\nSwap toggles classes on groups of elements based on configuration options and user interaction. It is up to the developer to utilize the classes. \n\n```javascript\n$(\".target\").swap();\n```\n\n```markup\n<div class=\"target\" data-swap-target=\".toggle\">Toggle</div>\n<div class=\"toggle\">Target</div>\n```\n\n### Groups\n\nSwaps can be grouped together for a simple accordions or tabs using the `data-swap-group` attribute.\n\n```markup\n<h4>Grouped</h4>\n<div class=\"target\" data-swap-target=\".toggle_1\" data-swap-group=\"group_1\">Toggle - 1</div>\n<div class=\"target\" data-swap-target=\".toggle_2\" data-swap-group=\"group_1\">Toggle - 2</div>\n\n<div class=\"toggle_1\">Target - 1</div>\n<div class=\"toggle_2\">Target - 2</div>\n```\n\n### Linked\n\nSwaps can be linked together for multiple handles using the `data-swap-linked` attribute.\n\n```markup\n<h4>Grouped</h4>\n<div class=\"target\" data-swap-target=\".toggle_1\" data-swap-linked=\"linked_1\">Handle - 1</div>\n\n<div class=\"toggle_1\">Target - 1</div>\n\n<div class=\"target\" data-swap-target=\".toggle_1\" data-swap-linked=\"linked_1\">Handle - 2</div>\n```\n\n### Max Width\n\nSwaps will auto-enable and disable themselves if the `maxWidth` property is set.\n\n```javascript\n$(\".target\").swap({\n maxWidth: \"740px\"\n});\n```\n\n```markup\n<div class=\"target\" data-swap-target=\".toggle\">Toggle</div>\n<div class=\"toggle\">Target</div>\n```\n\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-swap-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| `collapse` | `boolean` | `true` | Allow swap to collapse it's target |\n| `maxWidth` | `string` | `Infinity` | Width at which to auto-disable plugin |\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| `activate.swap` | Swap activated |\n| `deactivate.swap` | Swap deactivated |\n| `enable.swap` | Swap enabled |\n| `disable.swap` | Swap diabled |\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### activate\n\nActivate instance.\n\n```javascript\n$(\".target\").swap(\"activate\");\n```\n\n### deactivate\n\nDeactivates instance.\n\n```javascript\n$(\".target\").swap(\"deactivate\");\n```\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.swap(\"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\").swap(\"destroy\");\n```\n\n### disable\n\nDisables instance.\n\n```javascript\n$(\".target\").swap(\"disable\");\n```\n\n### enable\n\nEnables instance.\n\n```javascript\n$(\".target\").swap(\"enable\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-swap-element` | `element` | Target Element |\n| `.fs-swap-target` | `element` | Toggled element |\n| `.fs-swap-enabled` | `modifier` | Indicates enabled state |\n| `.fs-swap-active` | `modifier` | Indicates active state |\n\n"}