{
  "name": "routestate",
  "description": "Routing for Prototypes...serialized object for hash and class injection for body class",
  "author": {
    "name": "srouse"
  },
  "version": "0.3.19",
  "dependencies": {
    "jquery": "1.11.3"
  },
  "devDependencies": {},
  "main": "RouteState.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://srouse@github.com/srouse/RouteState.git"
  },
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/srouse/RouteState/issues"
  },
  "homepage": "https://github.com/srouse/RouteState",
  "readme": "\n# RouteState\n\n## Synopsis\n\nRouteState is a flexible path router (designed for prototyping) that serializes it's state into the path as well as into the class of the body. It has an event listening system as well as a way to tolerantly configure the path (it's optional and can easily be added at any time). This results in a very flexible state management system that enables you to layout and animate your UI almost entirely\nvia CSS.\n\n## Installation\n\n\n1. add routestate to your package.json and install via script tag\n2. initiate RouteState with \"listenToHash\"\n3. (add configuration when you have a solid idea of your path)\n\n\n### Examples\n```JAVASCRIPT\n// init\nRouteState.listenToHash();\n\n// Add a listener ( name of value, closure call back, and cluster id)\nRouteState.addDiffListener(\n    \"page\",\n    function( route , prev_route ){\n        // do something\n    },\n    \"myPageName\"\n);\n```\n\n```HTML\n// In your code call:\n<div onclick=\"RouteState.merge({page:'home'})\">\n    Go Home\n</div>\n<div onclick=\"RouteState.toggle({page:'home'},{last:''})\">\n    Toggle Page\n</div>\n```\n\n```JAVASCRIPT\n// Your hash will look like this:\n#!/home/(page)\n```\n\n```HTML\n<!-- ...and your body's class will look like this: -->\n<body class=\"s_page s_page_home\">\n\n<!-- if you had a previous page: -->\n<body class=\"s_page s_page_home sp_home sp_page_search\">\n\n```\n\n\n\n```CSS\n/* Now construct your layout entirely in CSS */\n/* (implies using LESS) */\n\n.myHomePage {\n    display: none;\n\n    body.s_page_home & {\n        display: block;\n    }\n}\n\n/* ...or something with some animation */\n.myHomePage {\n    width: 0px;\n    transition: width .3s;\n\n    body.s_page_home & {\n        width: 50%;\n    }\n}\n\n/* ...or something more fancy */\n.myHomePage {\n    width: 0px;\n\n    body.s_page_home & {\n        width: 50%;\n    }\n    body.sp_page_search.s_page_home & {\n        /* only animate when coming from search page... */\n        transition: width .3s;\n    }\n}\n\n```\n\n```JAVASCRIPT\n\n// clean up when done...\nRouteState.removeDiffListenersViaClusterId(\"myPageName\");\n\n```\n\n```JAVASCRIPT\n\n// if you want to configure later...\nvar route_config = {\n    page:{\n        weight:10, // sort based on weight\n        values:[ // have some idea of variations (doesn't restrict)\n            \"home\",\n            \"search\"\n        ],\n        show_in_hash:true, // show in the hash...keeps out of history\n        show_in_body:true // show in the body\n    },\n    last:{\n        weight:20,\n        values:[],\n        show_in_body:true,\n        show_in_hash:false,\n        dependency:\"page\"\n    },\n};\nRouteState.config( route_config );\n\n```\n\n```JAVASCRIPT\n// for React...\n\ncomponentWillMount: function(){\n    var me = this;\n    RouteState.addDiffListeners(\n\t\t[\"page\",\"project\"],\n\t\tfunction ( route , prev_route ) {\n            me.forceUpdate();\n\t\t},\n        \"myPageName\"\n\t);\n},\n\ncomponentWillUnmount: function(){\n    RouteState.removeDiffListenersViaClusterId( \"myPageName\" );\n},\n\n```\n",
  "readmeFilename": "README.md",
  "gitHead": "b499febb802b2c36a0bcbcb77393f2d7e8751f71",
  "_id": "routestate@0.3.19",
  "_shasum": "d197b7746f43f09a0e965cfef4fcefdcf538fa7a",
  "_from": "routestate@0.3.19"
}