formstone

Version:

Library of modular front end components.

1 lines • 7.66 kB

JSON

{"main":["asap.js"],"options":[{"name":"cache","type":"boolean","default":"true","description":"Flag to cache AJAX responses"},{"name":"ignoreTypes","type":"regex","default":"","description":"File types to ignore"},{"name":"render","type":"function","default":"$.noop","description":"Custom render function"},{"name":"requestKey","type":"string","default":"'fs-asap'","description":"GET variable for requests"},{"name":"selector","type":"string","default":"'a'","description":"Target DOM Selector"},{"name":"transitionOut","type":"function","default":"$.noop","description":"Transition timing callback; should return user defined $.Deferred object, which must eventually resolve"}],"events":[{"name":"requested.asap","description":"Before request is made; triggered on window; Second parameter 'true' if pop event"},{"name":"progress.asap","description":"As request is loaded; triggered on window; Second parameter contains percentage complete"},{"name":"loaded.asap","description":"After request is loaded; triggered on window"},{"name":"rendered.asap","description":"After state is rendered; triggered on window"},{"name":"failed.asap","description":"After load error; triggered on window"}],"methods":[{"name":"load","description":"Loads new page","params":[{"name":"opts","type":"url","default":"''","description":"URL to load"}],"examples":["$.asap(\"load\", \"http://example.com/page/\");"]},{"name":"replace","description":"Updates current url in history","params":[{"name":"url","type":"string","default":"''","description":"New URL"}],"examples":["$.asap(\"replace\", \"http://example.com/page/\");"]}],"name":"ASAP","type":"utility","description":"A jQuery plugin for asynchronous page loads.","dependencies":["jQuery","core.js","analytics.js"],"use":"### Basic\n\nASAP can progressively enhance a site to request page content via AJAX, reducing overall page load time. The site must be tuned to return a properly formed JSON object containing key-value pairs. Keys should be valid selectors as they will be used to match DOM nodes. The value should contain the new content to render. This allows the developer to only update the parts of the page that change while leaving global elements, such as headers and footers, in place.\n\n```php\n<?php\n\nob_start();\n\n$page_title = \"Page Title\";\n\nif ($_GET[\"fs-asap\"]) {\n define(\"IS_ASAP\", true);\n}\n\nif (!IS_ASAP) {\n // Draw Header\n?>\n<html>\n <head>\n ...\n </head>\n <body>\n <div id=\"page_content\">\n<?\n}\n\n// Always Draw Content\n?>\n<h1>Page Title</h1>\n<?\n\nif (!IS_ASAP) {\n // Draw footer\n?>\n </div>\n </body>\n</html>\n<?\n}\n\n$page_content = ob_get_clean();\n\nif (IS_ASAP) {\n echo json_encode(array(\n \"title\" => $page_title,\n \"#page_content\" => $page_content,\n ));\n die();\n} else {\n echo $content;\n}\n\n?>\n```\n\n### Events\n\nOnly updating parts of a page also means static resources, like CSS and JavaScript, are only loaded and executed once. Developers can hook into the ASAP events to ensure the page is rendered and destroyed properly:\n\n```javascript\n$(window).on(\"requested.asap\", function(e) {\n // Before request is made.\n}).on(\"progress.asap\", function (e) {\n // As request is loaded. \n}).on(\"loaded.asap\", function (e) {\n // After request is loaded. Tear down any existing plugins.\n}).on(\"loaded.asap\", function (e) {\n // After state is rendered. Initialize any new plugins.\n}).on(\"failed.asap\", function (e) {\n // After load error.\n});\n```\n\n","demo":"<p>Redirecting to demo...</p>\r\n<script>\r\n window.location.href = \"https://formstone.it/demo/_extra/asap/index.php\";\r\n</script>","document":"# ASAP\n\nA jQuery plugin for asynchronous page loads.\n\n\n\n\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n\n\n\n\n\n<a name=\"use\"></a>\n\n## Using ASAP\n\n\n#### Main\n\n```markup\nasap.js\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nanalytics.js\n```\n\n### Basic\n\nASAP can progressively enhance a site to request page content via AJAX, reducing overall page load time. The site must be tuned to return a properly formed JSON object containing key-value pairs. Keys should be valid selectors as they will be used to match DOM nodes. The value should contain the new content to render. This allows the developer to only update the parts of the page that change while leaving global elements, such as headers and footers, in place.\n\n```php\n<?php\n\nob_start();\n\n$page_title = \"Page Title\";\n\nif ($_GET[\"fs-asap\"]) {\n define(\"IS_ASAP\", true);\n}\n\nif (!IS_ASAP) {\n // Draw Header\n?>\n<html>\n <head>\n ...\n </head>\n <body>\n <div id=\"page_content\">\n<?\n}\n\n// Always Draw Content\n?>\n<h1>Page Title</h1>\n<?\n\nif (!IS_ASAP) {\n // Draw footer\n?>\n </div>\n </body>\n</html>\n<?\n}\n\n$page_content = ob_get_clean();\n\nif (IS_ASAP) {\n echo json_encode(array(\n \"title\" => $page_title,\n \"#page_content\" => $page_content,\n ));\n die();\n} else {\n echo $content;\n}\n\n?>\n```\n\n### Events\n\nOnly updating parts of a page also means static resources, like CSS and JavaScript, are only loaded and executed once. Developers can hook into the ASAP events to ensure the page is rendered and destroyed properly:\n\n```javascript\n$(window).on(\"requested.asap\", function(e) {\n // Before request is made.\n}).on(\"progress.asap\", function (e) {\n // As request is loaded. \n}).on(\"loaded.asap\", function (e) {\n // After request is loaded. Tear down any existing plugins.\n}).on(\"loaded.asap\", function (e) {\n // After state is rendered. Initialize any new plugins.\n}).on(\"failed.asap\", function (e) {\n // After load error.\n});\n```\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.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `cache` | `boolean` | `true` | Flag to cache AJAX responses |\n| `ignoreTypes` | `regex` |   | File types to ignore |\n| `render` | `function` | `$.noop` | Custom render function |\n| `requestKey` | `string` | `'fs-asap'` | GET variable for requests |\n| `selector` | `string` | `'a'` | Target DOM Selector |\n| `transitionOut` | `function` | `$.noop` | Transition timing callback; should return user defined $.Deferred object, which must eventually resolve |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the `window`, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `requested.asap` | Before request is made; triggered on window; Second parameter 'true' if pop event |\n| `progress.asap` | As request is loaded; triggered on window; Second parameter contains percentage complete |\n| `loaded.asap` | After request is loaded; triggered on window |\n| `rendered.asap` | After state is rendered; triggered on window |\n| `failed.asap` | After load error; triggered on window |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available, unless otherwise stated.\n\n### load\n\nLoads new page\n\n```javascript\n$.asap(\"load\", \"http://example.com/page/\");\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `opts` | `url` | `''` | URL to load |\n\n### replace\n\nUpdates current url in history\n\n```javascript\n$.asap(\"replace\", \"http://example.com/page/\");\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `url` | `string` | `''` | New URL |\n\n"}