-
-
Save Gozala/5584873 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Button is a high level construct that can be used | |
// to define button types with a specific behaviors | |
let { Button } = require("sdk/ui"); | |
// Button with specicic behavior can be defined by passing a function | |
// defining a behaivor of a button on the specific state changes. | |
var button = Button(function behavior(state, {owner}) { | |
// First argument represents current `state` snapshot for the button | |
// in the context of the given `options.owner` window. | |
// Button behavior may cause other state changes as a recation | |
// to specific state chnage. For example whenever button is | |
// pressed it's image and checked status changes: | |
var checked = state.pressed ? !state.checked : state.checked | |
return { | |
checked: checked, | |
image: checked ? "./coffee.png" : "./beer.png" | |
}; | |
}); | |
// Buttons can be added to the UI by writing inital state into them: | |
button({ image: "./beer.png", label: "My Button", checked: false }); | |
// Button state can be updated in the individual contexts, by passing | |
// a second context argument. This will also let you instantiate buttons | |
// only on the spicific windows if you want to. | |
button({ checked: true }, activeWindow); // you could pass tab instead we'll figure window | |
// Buttons can be removed from the UI by writing a `null` state: | |
button(null); | |
// Making buttons with shared state is also non brainer: | |
let sharedButton = Button(function sharedBehavior(state) { | |
var checked = state.checked; | |
var image = state.checked ? "./coffee.png" : "./beer.png "; | |
sharedButton({ checked: checked, image: image }) | |
}) | |
// Add shared button to the UI | |
sharedButton({ image: "./beer.png", label: "My Shared Button", checked: false }) | |
// State computation is buisness of the behavior, but any arbitare state | |
// changes could be feed into it to do that: | |
const tabs = require("sdk/tabs"); | |
var myButton = Button(function(state) { | |
// .... | |
return { image: state.isImageType && state.checked ? "./on.png" : "./off.png" } | |
}) | |
tabs.on("activate", function (tab) { | |
let isImageType = tab.contentType.indexOf("image/") === 0; | |
myButton(isImageType, tab); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ok I guess I get it but I think it's just so different to our existing APIs that we're just going to confuse our developers by going this approach. I think we should stick with @ZER0's approaches.