{"_id":"@blackpixel/framer-controlpanellayer","_rev":"7-110c5d6cc34283317a348470c86f37d4","name":"@blackpixel/framer-controlpanellayer","description":"Produce a developer panel for controlling aspects of your prototype within the prototype itself.","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@blackpixel/framer-controlpanellayer","version":"1.0.1","description":"Produce a developer panel for controlling aspects of your prototype within the prototype itself.","homepage":"https://github.com/bpxl-labs/ControlPanelLayer","repository":{"type":"git","url":"git://github.com/bpxl-labs/ControlPanelLayer.git"},"bugs":{"url":"https://github.com/bpxl-labs/ControlPanelLayer/issues"},"main":"ControlPanelLayer.coffee","author":{"name":"Black Pixel"},"license":"MIT","keywords":["framerjs","framer","coffeescript","settings"],"publishConfig":{"access":"public"},"dependencies":{"coffeeify":"^2.1.0"},"browserify":{"transform":["coffeeify"]},"gitHead":"80f3a3c0d1ad1f0287217a63134c82c0b0dd6b46","_id":"@blackpixel/framer-controlpanellayer@1.0.1","scripts":{},"_shasum":"be3d8d95e92cda0a58a325d77c3672c008ee6637","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.8.0","_npmUser":{"name":"iconmaster","email":"john@blackpixel.com"},"dist":{"shasum":"be3d8d95e92cda0a58a325d77c3672c008ee6637","tarball":"https://registry.npmjs.org/@blackpixel/framer-controlpanellayer/-/framer-controlpanellayer-1.0.1.tgz","integrity":"sha512-DReKR+Ypq9NADse4JQdmuLfevA7I+bqONR54Mgu6eifdwybcWbtBGbnF7SVQ8VkeWZ4t5uDWLEGBXj7PjEHVqw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAT7jLAyK2aGbccUQfBsPJehqkpkthR4fhmmvWXaCXOxAiAfB5avzPBw3G+eKusIIMQtNFhEjAt5AfL37CpTL6ow1Q=="}]},"maintainers":[{"name":"iconmaster","email":"john@blackpixel.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/framer-controlpanellayer-1.0.1.tgz_1496420249059_0.9304006397724152"}},"1.0.2":{"name":"@blackpixel/framer-controlpanellayer","version":"1.0.2","description":"Produce a developer panel for controlling aspects of your prototype within the prototype itself.","homepage":"https://github.com/bpxl-labs/ControlPanelLayer","repository":{"type":"git","url":"git://github.com/bpxl-labs/ControlPanelLayer.git"},"bugs":{"url":"https://github.com/bpxl-labs/ControlPanelLayer/issues"},"main":"ControlPanelLayer.coffee","author":{"name":"Black Pixel"},"license":"MIT","keywords":["framerjs","framer","coffeescript","settings"],"publishConfig":{"access":"public"},"dependencies":{"coffeeify":"^2.1.0"},"browserify":{"transform":["coffeeify"]},"gitHead":"62c00483ca70540961af95d71a5cde83ccbd1747","_id":"@blackpixel/framer-controlpanellayer@1.0.2","scripts":{},"_shasum":"b948704655bfb36bcef9bcdc39374417cfb65584","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.8.0","_npmUser":{"name":"iconmaster","email":"john@blackpixel.com"},"dist":{"shasum":"b948704655bfb36bcef9bcdc39374417cfb65584","tarball":"https://registry.npmjs.org/@blackpixel/framer-controlpanellayer/-/framer-controlpanellayer-1.0.2.tgz","integrity":"sha512-SfkHigW3f708WFM9imL1NKvOMjfr4FEgqNbl272fWY58WwajkMDQjguMf6ZvR3M5g+EklSiaPC56seFDc4Hs7w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClHIb2FR8IBMfJ9IdQLNrmpx7iKjw1PD47tBgFgREcCgIhAJkxfiCXBj/GSaTDr+R/32wAfECqv/ReK3JCIFSNlmhv"}]},"maintainers":[{"email":"john@blackpixel.com","name":"iconmaster"},{"email":"machineghost@gmail.com","name":"machineghost"},{"email":"hello@jaden.io","name":"jadnco"},{"email":"hernancalabrese@gmail.com","name":"hernanc"},{"email":"brandonpierce91@gmail.com","name":"brandonjpierce"},{"email":"brad@blackpixel.com","name":"bpxl-labs"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/framer-controlpanellayer-1.0.2.tgz_1500044616589_0.611194436205551"}},"1.0.3":{"name":"@blackpixel/framer-controlpanellayer","version":"1.0.3","description":"Produce a developer panel for controlling aspects of your prototype within the prototype itself.","homepage":"https://github.com/bpxl-labs/ControlPanelLayer","repository":{"type":"git","url":"git://github.com/bpxl-labs/ControlPanelLayer.git"},"bugs":{"url":"https://github.com/bpxl-labs/ControlPanelLayer/issues"},"main":"ControlPanelLayer.coffee","author":{"name":"Black Pixel"},"license":"MIT","keywords":["framerjs","framer","coffeescript","settings"],"publishConfig":{"access":"public"},"dependencies":{"coffeeify":"^2.1.0"},"browserify":{"transform":["coffeeify"]},"gitHead":"441e33a6aa56f5b72e2055d512df82ffaf5752b6","_id":"@blackpixel/framer-controlpanellayer@1.0.3","_npmVersion":"5.3.0","_nodeVersion":"7.8.0","_npmUser":{"name":"iconmaster","email":"john@blackpixel.com"},"dist":{"integrity":"sha512-8slxHajhjbyTLBGNyhdroTs97rzQjwl4rYS6gg1gSVo/3ap62TfrsHczE5D8M7ik11ebybYWuQvzxLF68JRi5Q==","shasum":"e86b6b3bb733ba4643a422d8e1069c9d55a49e00","tarball":"https://registry.npmjs.org/@blackpixel/framer-controlpanellayer/-/framer-controlpanellayer-1.0.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFklU8ZD/vzP8I/uNVHAgxoSlr4ivAyogPcyvtJkJmBmAiEAkYMGMvmJhjjbBos/DvM08VtkRFZkg4Oxc+pQkuc6TWE="}]},"maintainers":[{"email":"john@blackpixel.com","name":"iconmaster"},{"email":"machineghost@gmail.com","name":"machineghost"},{"email":"hello@jaden.io","name":"jadnco"},{"email":"hernancalabrese@gmail.com","name":"hernanc"},{"email":"brandonpierce91@gmail.com","name":"brandonjpierce"},{"email":"brad@blackpixel.com","name":"bpxl-labs"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/framer-controlpanellayer-1.0.3.tgz_1501194312059_0.5885192090645432"}}},"readme":"# ControlPanelLayer Framer Module\n\n[![license](https://img.shields.io/github/license/bpxl-labs/RemoteLayer.svg)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](.github/CONTRIBUTING.md)\n[![Maintenance](https://img.shields.io/maintenance/yes/2017.svg)]()\n\nThe ControlPanelLayer module makes it easy to construct a developer panel for controlling aspects of your prototype within the prototype itself.\n\t\n<img src=\"https://cloud.githubusercontent.com/assets/935/25053522/5e1b0ad2-211d-11e7-8a43-b91558fa2d63.png\" width=\"497\" style=\"display: block; margin: auto\" alt=\"ControlPanelLayer preview\" />\t\n\n### Installation\n\n#### NPM Installation\n\n```bash\n$ cd /your/framer/project\n$ npm i @blackpixel/framer-controlpanellayer\n```\n\n#### Manual installation\n\nCopy or save the `ControlPanelLayer.coffee` file into your project's `modules` folder.\n\n### Adding It to Your Project\n\nIn your Framer project, add the following:\n\n```coffeescript\nControlPanelLayer = require \"ControlPanelLayer\"\n```\n\n### API\n\n#### `new ControlPanelLayer`\n\nInstantiates a new instance of ControlPanelLayer.\n\n#### Available options\n\n```coffeescript\nmyControlPanel = new ControlPanelLayer\n\tscaleFactor: <number>\n\tspecs: <object>\n\tdraggable: <boolean>\n\ttextColor: <string> (hex or rgba)\n\tbackgroundColor: <string> (hex or rgba)\n\tinputTextColor: <string> (hex or rgba)\n\tinputBackgroundColor: <string> (hex or rgba)\n\tbuttonTextColor: <string> (hex or rgba)\n\tbuttonColor: <string> (hex or rgba)\n\tcommitAction: -> <action>\n\tcloseAction: -> <action>\n```\n\n#### The specs object\n\nThe ControlPanelLayer requires your behavior specifications to be organized in key-value object form. Each item must include a `label` and `value`. Optionally, you may include an explanatory `tip`. Additional keys will be ignored.\n\nSpecs object values can include strings, numbers, and booleans.\n\n```coffeescript\nexampleSpecs =\n\tdefaultText:\n\t\tlabel: \"Default text\"\n\t\tvalue: \"hello\"\n\t\ttip: \"Initial text to display.\"\n\tanimationTime:\n\t\tlabel: \"Animation time\"\n\t\tvalue: 5\n\t\ttip: \"How long the animation will run.\"\n\tautoplay:\n\t\tlabel: \"Should autoplay\"\n\t\tvalue: false\n```\n\nReferring to a particular spec is done with the usual dot or bracket notation, e.g., `exampleSpecs.animationTime.value` or `exampleSpecs[\"animationTime\"][\"value\"]` or `exampleSpecs[\"animationTime\"].value`.\n\n#### The commit action\n\nThe ControlPanelLayer features a Commit button that can be customized to perform any action. You will want to at least overwrite your specs object with any changes that resulted from using the ControlPanelLayer.\n\n```coffeescript\nmyControlPanel = new ControlPanelLayer\n\tspecs: exampleSpecs\n\tcommitAction: -> exampleSpecs = this.specs\n```\n\n#### \tThe close action\n\t\nThe panel close button works to hide the panel, but you may supply it with additional functionality.\n\n```coffeescript\nmyControlPanel = new ControlPanelLayer\n\tspecs: exampleSpecs\n\tcloseAction: -> print \"panel closed\"\n```\n\n#### Example of integration with [QueryInterface](https://github.com/marckrenn/framer-QueryInterface/)\n\nUsing ControlPanelLayer in conjunction with QueryInterface provides a way to maintain settings across a reload or link to your prototype with custom settings included in the URL.\n\n```coffeescript\n{QueryInterface} = require 'QueryInterface'\n\nquerySpecs = new QueryInterface\n\tkey: \"specs\"\n\tdefault: exampleSpecs\n\t\nmyControlPanel = new ControlPanelLayer\n\tspecs: querySpecs.value\n\tcommitAction: -> querySpecs.value = this.specs; window.location.reload(false)\n```\n\n#### `myControlPanel.show()`\n\nShow the ControlPanelLayer instance.\n\n#### `myControlPanel.hide()`\n\nHide the ControlPanelLayer instance.\n\n#### `myControlPanel.hidden`\n\n> readonly\n\n**Returns**\n\n_(Boolean)_: Whether or not the ControlPanelLayer is currently hidden.\n\n---\n\nWebsite: [blackpixel.com](https://blackpixel.com) &nbsp;&middot;&nbsp;\nGitHub: [@bpxl-labs](https://github.com/bpxl-labs/) &nbsp;&middot;&nbsp;\nTwitter: [@blackpixel](https://twitter.com/blackpixel) &nbsp;&middot;&nbsp;\nMedium: [@bpxl-craft](https://medium.com/bpxl-craft)\n","maintainers":[{"email":"john@blackpixel.com","name":"iconmaster"},{"email":"hello@jaden.io","name":"jadnco"},{"email":"hernancalabrese@gmail.com","name":"hernanc"},{"email":"brandonpierce91@gmail.com","name":"brandonjpierce"},{"email":"brad@blackpixel.com","name":"bpxl-labs"}],"time":{"modified":"2022-06-12T15:20:47.382Z","created":"2017-06-02T16:17:29.992Z","1.0.1":"2017-06-02T16:17:29.992Z","1.0.2":"2017-07-14T15:03:37.608Z","1.0.3":"2017-07-27T22:25:13.021Z"},"homepage":"https://github.com/bpxl-labs/ControlPanelLayer","keywords":["framerjs","framer","coffeescript","settings"],"repository":{"type":"git","url":"git://github.com/bpxl-labs/ControlPanelLayer.git"},"author":{"name":"Black Pixel"},"bugs":{"url":"https://github.com/bpxl-labs/ControlPanelLayer/issues"},"license":"MIT","readmeFilename":"README.md"}