Skip to content

Instantly share code, notes, and snippets.

@Gozala
Forked from ZER0/gist:5548355
Last active December 17, 2015 09:08
Show Gist options
  • Save Gozala/5584873 to your computer and use it in GitHub Desktop.
Save Gozala/5584873 to your computer and use it in GitHub Desktop.
// 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);
});
@Mossop
Copy link

Mossop commented May 16, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment