Updates example app #25
Conversation
|
|
||
| ## Quickstart | ||
|
|
||
| 1. Run `npm intall` or `yarn` within this folder. |
| ## Quickstart | ||
|
|
||
| 1. Run `npm intall` or `yarn` within this folder. | ||
| 2. Run `gulp serve` to start the demo server. |
There was a problem hiding this comment.
You should set this in package.json:
"scripts": {
"start": "$( yarn bin )/gulp serve"
}so end users can just yarn run start. (It's a convention in the JS community.)
You might be able to omit the $( yarn bin ). I'm not sure if local dependencies are put on $PATH for the purposes of scripts evaluation.
| document.getElementById("box").style.display = variable.selectedValue ? "block" : "none"; | ||
| }); | ||
| // Add a range variable to generate a slider in the overlay. | ||
| remixer.addRangeVariable("Box opacity", 1, 0, 1, 0.1, function(variable) { |
There was a problem hiding this comment.
A convention we've been following in Material Motion is to always use named parameters, to make the code easier to read:
remixer.addRangeVariable({
label: "Box opacity",
defaultValue: 1,
from: 0,
to: 1,
incrementSize: .1,
onChange(nextValue) {
box.style.opacity = nextValue;
}
});I had to guess at those labels, because 1, 0, 1, 0.1 isn't inherently understandable in the current addRangeVariable API. Would you be amenable to moving towards named args?
There was a problem hiding this comment.
Yeah this is most likely something we will do. We are still deciding some macros to be consistent across all platforms and shortcut APIs. Will definitely look into using named args as part of that effort. For now I've added an issue we can track for the feature here: #28
| remixer.addRangeVariable("Box opacity", 1, 0, 1, 0.1, function(variable) { | ||
| document.getElementById("box").style.opacity = variable.selectedValue; | ||
| }); | ||
| // Add a string variable with 3+ possible values to generate a dropdown selector in the overlay. |
There was a problem hiding this comment.
Can enumerated values be other types, like number? What if I wanted [250, 300, 469, 500] to be displayed in a dropdown; would I have to coerce to/from strings?
There was a problem hiding this comment.
There is actually an addNumberVariable method that does just that (with equivalent signature to this string variable). However, the exact controls we display for given metadata provided is still a bit in flux and being thought about again across all platforms. Once settled, we'll implement the proper controls and provide more safeguards to help make sure data gets added correctly.
| @@ -0,0 +1,15 @@ | |||
| { | |||
There was a problem hiding this comment.
How many package.jsons do you expect to have in this repo? Especially if it's more than src and examples, you may want to move to a Lerna-style monorepo:
/packages/api(material-remixer-api)/packages/demos(material-remixer-demos)/packages/ui(material-remixer-ui)
There was a problem hiding this comment.
Will definitely consider this. I didn't add that just yet because I am thinking that our demo will consist of a web app made of various pages to displaying examples. However this might change as it continues to grow, and lerna would be a good solution here.
|
|
||
| ## Quickstart | ||
|
|
||
| 1. Run `npm intall` or `yarn` within this folder. |
| ## Quickstart | ||
|
|
||
| 1. Run `npm intall` or `yarn` within this folder. | ||
| 2. Run `gulp serve` to start the demo server. |
| document.getElementById("box").style.display = variable.selectedValue ? "block" : "none"; | ||
| }); | ||
| // Add a range variable to generate a slider in the overlay. | ||
| remixer.addRangeVariable("Box opacity", 1, 0, 1, 0.1, function(variable) { |
There was a problem hiding this comment.
Yeah this is most likely something we will do. We are still deciding some macros to be consistent across all platforms and shortcut APIs. Will definitely look into using named args as part of that effort. For now I've added an issue we can track for the feature here: #28
| remixer.addRangeVariable("Box opacity", 1, 0, 1, 0.1, function(variable) { | ||
| document.getElementById("box").style.opacity = variable.selectedValue; | ||
| }); | ||
| // Add a string variable with 3+ possible values to generate a dropdown selector in the overlay. |
There was a problem hiding this comment.
There is actually an addNumberVariable method that does just that (with equivalent signature to this string variable). However, the exact controls we display for given metadata provided is still a bit in flux and being thought about again across all platforms. Once settled, we'll implement the proper controls and provide more safeguards to help make sure data gets added correctly.
| @@ -0,0 +1,15 @@ | |||
| { | |||
There was a problem hiding this comment.
Will definitely consider this. I didn't add that just yet because I am thinking that our demo will consist of a web app made of various pages to displaying examples. However this might change as it continues to grow, and lerna would be a good solution here.
|
I don't see the new commit. 😃 |
|
Oops... here ya go. |
No description provided.