Skip to content

Instantly share code, notes, and snippets.

@steveruizok
Last active November 29, 2019 15:16
Show Gist options
  • Save steveruizok/729888735aacc5d7bdfb6243efce9b54 to your computer and use it in GitHub Desktop.
Save steveruizok/729888735aacc5d7bdfb6243efce9b54 to your computer and use it in GitHub Desktop.
Button*
Button*
unlocked*
default*
mouseEnter -> hovered
hovered
mouseLeave -> default
mouseDown -> pressed
pressed
mouseUp -> locked_hovered
mouseLeave -> default
locked
locked_default*
mouseEnter -> locked_hovered
locked_hovered
mouseLeave -> locked
mouseDown -> locked_pressed
locked_pressed
mouseUp -> hovered
mouseLeave -> locked
function render(model){
let current_state_name = model.active_states[0].name;
// Button Attributes
let attrs = {
position: "relative",
width: "80px",
height: "80px",
backgroundImage: "linear-gradient(-180deg, #7D7D7D 0%, #4C4C4C 100%)",
border: "1px solid #7D7D7D",
borderRadius: "8px",
margin: "0px auto",
transition: "box-shadow .15s",
"-webkit-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.3)",
"-moz-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.3)",
"box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.3)"
};
// Button States
let states = {
default: {
backgroundImage: "linear-gradient(-180deg, #7D7D7D 0%, #4C4C4C 100%)",
},
pressed: {
backgroundImage: "linear-gradient(0deg, #5D5D5D 0%, #4D4D4D 100%)",
"-webkit-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.0)",
"-moz-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.0)",
"box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.0)"
},
hovered: {
backgroundImage: "linear-gradient(-180deg, #858585 0%, #4E4E4E 100%)",
}
}
// Icon Attributes
let iconAttrs = {
position: "absolute",
left: "16px",
top: "16px",
height: "40px",
width: "40px",
borderRadius: "50%",
border: "4px solid #000",
transition: "border .3s"
}
// Icon States
let iconStates = {
default: {
borderColor: "#9bf990",
borderColor: "#000",
},
locked: {
borderColor: "#000",
borderColor: "#9bf990"
},
hovered: {
filter: "brightness(110%)",
}
}
// Glow Attributes
let glowAttrs = {
position: "absolute",
height: "80px",
width: "80px",
background: "radial-gradient(100% 100%, rgba(155,249,144,0.20) 30%, rgba(155,249,144,0.00) 80%)",
opacity: 0,
transition: "opacity .3s"
}
// Glow States
let glowStates = {
default: {
opacity: 1,
opacity: 0
},
locked: {
opacity: 0,
opacity: 1
},
}
// Is the component hovered?
if (current_state_name === "hovered" || current_state_name === "locked_hovered") {
Object.assign(attrs, states.hovered)
Object.assign(iconAttrs, iconStates.hovered)
}
// Is the component pressed?
if (current_state_name === "pressed" || current_state_name === "locked_pressed") {
Object.assign(attrs, states.pressed)
}
// Is the component unlocked? (or else locked)
if (model.states.unlocked.is_active === true) {
Object.assign(iconAttrs, iconStates.default)
} else {
Object.assign(iconAttrs, iconStates.locked)
Object.assign(glowAttrs, glowStates.locked)
}
return(
$("div",
{style: { width: "100%" } },
$("div",
{
style: attrs,
onMouseEnter: () => {model.emit("mouseEnter")},
onMouseLeave: () => {model.emit("mouseLeave")},
onMouseDown: () => {model.emit("mouseDown")},
onMouseUp: () => {model.emit("mouseUp")},
},
$("div",
{ style: glowAttrs }
),
$("div",
{ style: iconAttrs }
)
),
$("p",
{style: {
margin: "12px auto",
textAlign: "center",
color: "#555",
fontFamily: "Helvetica, Arial, Sans-serif",
fontWeight: 700,
fontSize: ".7em",
letterSpacing: "1.5",
textTransform: "uppercase"
}},
current_state_name
)
)
)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment