@blackpixel/framer-controlpanellayer
v1.0.3
Published
Produce a developer panel for controlling aspects of your prototype within the prototype itself.
Downloads
9
Readme
ControlPanelLayer Framer Module
The ControlPanelLayer module makes it easy to construct a developer panel for controlling aspects of your prototype within the prototype itself.
Installation
NPM Installation
$ cd /your/framer/project
$ npm i @blackpixel/framer-controlpanellayer
Manual installation
Copy or save the ControlPanelLayer.coffee
file into your project's modules
folder.
Adding It to Your Project
In your Framer project, add the following:
ControlPanelLayer = require "ControlPanelLayer"
API
new ControlPanelLayer
Instantiates a new instance of ControlPanelLayer.
Available options
myControlPanel = new ControlPanelLayer
scaleFactor: <number>
specs: <object>
draggable: <boolean>
textColor: <string> (hex or rgba)
backgroundColor: <string> (hex or rgba)
inputTextColor: <string> (hex or rgba)
inputBackgroundColor: <string> (hex or rgba)
buttonTextColor: <string> (hex or rgba)
buttonColor: <string> (hex or rgba)
commitAction: -> <action>
closeAction: -> <action>
The specs object
The 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.
Specs object values can include strings, numbers, and booleans.
exampleSpecs =
defaultText:
label: "Default text"
value: "hello"
tip: "Initial text to display."
animationTime:
label: "Animation time"
value: 5
tip: "How long the animation will run."
autoplay:
label: "Should autoplay"
value: false
Referring 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
.
The commit action
The 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.
myControlPanel = new ControlPanelLayer
specs: exampleSpecs
commitAction: -> exampleSpecs = this.specs
The close action
The panel close button works to hide the panel, but you may supply it with additional functionality.
myControlPanel = new ControlPanelLayer
specs: exampleSpecs
closeAction: -> print "panel closed"
Example of integration with QueryInterface
Using 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.
{QueryInterface} = require 'QueryInterface'
querySpecs = new QueryInterface
key: "specs"
default: exampleSpecs
myControlPanel = new ControlPanelLayer
specs: querySpecs.value
commitAction: -> querySpecs.value = this.specs; window.location.reload(false)
myControlPanel.show()
Show the ControlPanelLayer instance.
myControlPanel.hide()
Hide the ControlPanelLayer instance.
myControlPanel.hidden
readonly
Returns
(Boolean): Whether or not the ControlPanelLayer is currently hidden.
Website: blackpixel.com · GitHub: @bpxl-labs · Twitter: @blackpixel · Medium: @bpxl-craft