6import * as FeatureSets from "../../featureSets";
7
8var createSlider = function(min, max, step, start, id) {
9 var div = document.createElement("div"); 10 var p = document.createElement("p");
11 p.setAttribute("style", "min-width: 240px");
12 var slider = document.createElement("input");
7
8var createSlider = function(min, max, step, start, id) {
9 var div = document.createElement("div");
10 var p = document.createElement("p"); 11 p.setAttribute("style", "min-width: 240px");
12 var slider = document.createElement("input");
13 slider.className = "mdl-slider mdl-js-slider";
9 var div = document.createElement("div");
10 var p = document.createElement("p");
11 p.setAttribute("style", "min-width: 240px");
12 var slider = document.createElement("input"); 13 slider.className = "mdl-slider mdl-js-slider";
14 slider.setAttribute("type", "range");
15 slider.setAttribute("id", id);
5import { FloatValue, BooleanValue, StringValue } from "../../core/parameters";
6import * as FeatureSets from "../../featureSets";
7
8var createSlider = function(min, max, step, start, id) { 9 var div = document.createElement("div"); 10 var p = document.createElement("p"); 11 p.setAttribute("style", "min-width: 240px"); 12 var slider = document.createElement("input"); 13 slider.className = "mdl-slider mdl-js-slider"; 14 slider.setAttribute("type", "range"); 15 slider.setAttribute("id", id); 16 slider.setAttribute("min", min); 17 slider.setAttribute("max", max); 18 slider.setAttribute("value", start); 19 slider.setAttribute("step", step); 20 p.appendChild(slider); 21 componentHandler.upgradeElement(slider, "MaterialSlider"); 22 div.appendChild(p); 23 return div; 24}; 25
26var createButton = function(iconString) {
27 var button = document.createElement("button");
81 return div;
82};
83
84var createSpan = function(value, id) { 85 var div = document.createElement("div"); 86 var span = document.createElement("span"); 87 span.innerHTML = value; 88 span.setAttribute("id", id); 89 span.setAttribute("style", "font-size: 16px;"); 90 div.setAttribute("style", "margin-left: none; margin-right: auto; display: block;width:24px;"); 91 div.appendChild(span); 92 return div; 93}; 94
95var createTableRow = function(one, two, three) {
96 var tr = document.createElement("tr");
24};
25
26var createButton = function(iconString) {
27 var button = document.createElement("button"); 28 button.className = "mdl-button mdl-js-button mdl-button--icon";
29 var icon = document.createElement("i");
30 icon.className = "material-icons";
26var createButton = function(iconString) {
27 var button = document.createElement("button");
28 button.className = "mdl-button mdl-js-button mdl-button--icon";
29 var icon = document.createElement("i"); 30 icon.className = "material-icons";
31 icon.innerHTML = iconString;
32 button.appendChild(icon);
23 return div;
24};
25
26var createButton = function(iconString) { 27 var button = document.createElement("button"); 28 button.className = "mdl-button mdl-js-button mdl-button--icon"; 29 var icon = document.createElement("i"); 30 icon.className = "material-icons"; 31 icon.innerHTML = iconString; 32 button.appendChild(icon); 33 componentHandler.upgradeElement(button, "MaterialButton"); 34 return button; 35}; 36
37var createValueField = function(start, id, unittext = "") {
38 var div = document.createElement("div");
35};
36
37var createValueField = function(start, id, unittext = "") {
38 var div = document.createElement("div"); 39 var error = document.createElement("span");
40 var span = document.createElement("span");
41 span.innerHTML = unittext;
36
37var createValueField = function(start, id, unittext = "") {
38 var div = document.createElement("div");
39 var error = document.createElement("span"); 40 var span = document.createElement("span");
41 span.innerHTML = unittext;
42 span.style.fontSize = "14px";
37var createValueField = function(start, id, unittext = "") {
38 var div = document.createElement("div");
39 var error = document.createElement("span");
40 var span = document.createElement("span"); 41 span.innerHTML = unittext;
42 span.style.fontSize = "14px";
43 error.className = "mdl-textfield__error";
43 error.className = "mdl-textfield__error";
44 error.innerHTML = "Digits only";
45 div.className = "mdl-textfield mdl-js-textfield";
46 var field = document.createElement("input"); 47 field.className = "mdl-textfield__input";
48 field.setAttribute("type", "text");
49 field.setAttribute("id", id);
34 return button;
35};
36
37var createValueField = function(start, id, unittext = "") { 38 var div = document.createElement("div"); 39 var error = document.createElement("span"); 40 var span = document.createElement("span"); 41 span.innerHTML = unittext; 42 span.style.fontSize = "14px"; 43 error.className = "mdl-textfield__error"; 44 error.innerHTML = "Digits only"; 45 div.className = "mdl-textfield mdl-js-textfield"; 46 var field = document.createElement("input"); 47 field.className = "mdl-textfield__input"; 48 field.setAttribute("type", "text"); 49 field.setAttribute("id", id); 50 field.setAttribute("value", start); 51 field.setAttribute("pattern", "[0-9]*"); 52 field.style.paddingTop = "0px"; 53 div.appendChild(field); 54 div.appendChild(span); 55 div.appendChild(error); 56 div.setAttribute("style", "margin-left: auto; margin-right: auto; display: block;width:65px;padding-top:0px;padding-bottom:5px;"); 57 componentHandler.upgradeElement(div, "MaterialTextfield"); 58 return div; 59}; 60
61var createTableElement = function(child) {
62 var td = document.createElement("td");
59};
60
61var createTableElement = function(child) {
62 var td = document.createElement("td"); 63 td.appendChild(child);
64 return td;
65};
58 return div;
59};
60
61var createTableElement = function(child) { 62 var td = document.createElement("td"); 63 td.appendChild(child); 64 return td; 65}; 66
67var createCheckbox = function(checked, id) {
68 var div = document.createElement("div");
65};
66
67var createCheckbox = function(checked, id) {
68 var div = document.createElement("div"); 69 var label = document.createElement("label");
70 label.className = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect";
71 label.setAttribute("for", id);
66
67var createCheckbox = function(checked, id) {
68 var div = document.createElement("div");
69 var label = document.createElement("label"); 70 label.className = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect";
71 label.setAttribute("for", id);
72 var input = document.createElement("input");
69 var label = document.createElement("label");
70 label.className = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect";
71 label.setAttribute("for", id);
72 var input = document.createElement("input"); 73 input.setAttribute("type", "checkbox");
74 input.setAttribute("id", id);
75 if (checked) input.checked = true;
64 return td;
65};
66
67var createCheckbox = function(checked, id) { 68 var div = document.createElement("div"); 69 var label = document.createElement("label"); 70 label.className = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"; 71 label.setAttribute("for", id); 72 var input = document.createElement("input"); 73 input.setAttribute("type", "checkbox"); 74 input.setAttribute("id", id); 75 if (checked) input.checked = true; 76 input.className = "mdl-checkbox__input"; 77 label.appendChild(input); 78 componentHandler.upgradeElement(label, "MaterialCheckbox"); 79 div.setAttribute("style", "margin-left: auto; margin-right: auto; display: block;width:12px;position:relative;"); 80 div.appendChild(label); 81 return div; 82}; 83
84var createSpan = function(value, id) {
85 var div = document.createElement("div");
82};
83
84var createSpan = function(value, id) {
85 var div = document.createElement("div"); 86 var span = document.createElement("span");
87 span.innerHTML = value;
88 span.setAttribute("id", id);
83
84var createSpan = function(value, id) {
85 var div = document.createElement("div");
86 var span = document.createElement("span"); 87 span.innerHTML = value;
88 span.setAttribute("id", id);
89 span.setAttribute("style", "font-size: 16px;");
93};
94
95var createTableRow = function(one, two, three) {
96 var tr = document.createElement("tr"); 97 one.style.borderBottom = "none";
98 tr.appendChild(one);
99 tr.appendChild(two);
345
346export function generateTableFunction(tableID, typeString, setString, isTranslucent) {
347 return function(event) {
348 var table = document.getElementById(tableID);349 if (table) {
350 table.parentElement.removeChild(table);
351 } else {
337 return table;
338}
339
340var createCloseButton = function() {341 var button = createButton("close");342 button.style.color = "#313131";343 return button;344};345
346export function generateTableFunction(tableID, typeString, setString, isTranslucent) {
347 return function(event) {
338}
339
340var createCloseButton = function() {
341 var button = createButton("close");342 button.style.color = "#313131";
343 return button;
344};
It is recommended to use let
or const
over var
.
This will help prevent re-declaration of variables that are in the global scope when using var
.
ES6 allows programmers to create variables with block scope instead of function scope using the let
and const
keywords.
Block scope is common in many other programming languages and helps programmers avoid mistakes such as this one:
var count = people.length;
var enoughFood = count > sandwiches.length;
if (enoughFood) {
var count = sandwiches.length; // accidentally overriding the count variable
console.log("We have " + count + " sandwiches for everyone. Plenty for all!");
}
// our count variable is no longer accurate
console.log("We have " + count + " people and " + sandwiches.length + " sandwiches!");
Block scoped variables shadow outer declarations instead of writing to them.
NOTE: There are certain edge cases where users might want to consider var. Consider this example:
var lib = lib || { run: () => {} }
Here, lib
might be a library that is exposed to an HTML file using a <script>
tag.
The var
keyword helps avoid re-writing lib
if it has already been declared via an injected script that was executed before this one.
Ideally, you should let bundlers worry about cases like this.
But if you want to use var
anyway, consider using a skipcq comment, or disabling the issue altogether.
Bad Practice
var x = "y";
var CONFIG = {};
Recommended
let x = "y";
const CONFIG = {};