diff --git a/js/palette.js b/js/palette.js
index 463ca60740..9a11fe5fe7 100644
--- a/js/palette.js
+++ b/js/palette.js
@@ -34,62 +34,64 @@ function paletteBlockButtonPush(blocks, name, arg) {
// loadPaletteMenuItemHandler is the event handler for the palette menu.
const NPALETTES = 3;
-function Palettes() {
- this.blocks = null;
- this.cellSize = null;
- this.paletteWidth = 55 * PALETTE_WIDTH_FACTOR;
- this.scrollDiff = 0;
- this.originalSize = 55; // this is the original svg size
- this.firstTime = true;
- this.background = null;
- this.mouseOver = false;
- this.activePalette = null;
- this.paletteObject = null;
- this.paletteVisible = false;
- this.pluginsDeleteStatus = false;
- this.visible = true;
- this.scale = 1.0;
- this.mobile = false;
- // Top of the palette
- this.top = 55 + 20 + LEADING;
- this.current = DEFAULTPALETTE;
- this.x = []; // We track x and y for each of the multipalettes
- this.y = [];
- this.showSearchWidget = null;
- this.hideSearchWidget = null;
-
- this.pluginMacros = {}; // some macros are defined in plugins
-
- if (sugarizerCompatibility.isInsideSugarizer()) {
- storage = sugarizerCompatibility.data;
- } else {
- storage = localStorage;
- }
+class Palettes {
+ constructor() {
+ this.blocks = null;
+ this.cellSize = null;
+ this.paletteWidth = 55 * PALETTE_WIDTH_FACTOR;
+ this.scrollDiff = 0;
+ this.originalSize = 55; // this is the original svg size
+ this.firstTime = true;
+ this.background = null;
+ this.mouseOver = false;
+ this.activePalette = null;
+ this.paletteObject = null;
+ this.paletteVisible = false;
+ this.pluginsDeleteStatus = false;
+ this.visible = true;
+ this.scale = 1.0;
+ this.mobile = false;
+ // Top of the palette
+ this.top = 55 + 20 + LEADING;
+ this.current = DEFAULTPALETTE;
+ this.x = []; // We track x and y for each of the multipalettes
+ this.y = [];
+ this.showSearchWidget = null;
+ this.hideSearchWidget = null;
+
+ this.pluginMacros = {}; // some macros are defined in plugins
+
+ if (sugarizerCompatibility.isInsideSugarizer()) {
+ storage = sugarizerCompatibility.data;
+ } else {
+ storage = localStorage;
+ }
- // The collection of palettes.
- this.dict = {};
- this.selectorButtonsOff = []; // Select between palettes
- this.selectorButtonsOn = []; // Select between palettes in their on state
- this.buttons = {}; // The toolbar button for each palette.
- this.labels = {}; // The label for each button.
- this.pluginPalettes = []; // List of palettes not in multipalette list
+ // The collection of palettes.
+ this.dict = {};
+ this.selectorButtonsOff = []; // Select between palettes
+ this.selectorButtonsOn = []; // Select between palettes in their on state
+ this.buttons = {}; // The toolbar button for each palette.
+ this.labels = {}; // The label for each button.
+ this.pluginPalettes = []; // List of palettes not in multipalette list
+ }
- this.init = function() {
+ init() {
this.halfCellSize = Math.floor(this.cellSize / 2);
- };
+ }
- this.init_selectors = function() {
+ init_selectors() {
for (let i = 0; i < MULTIPALETTES.length; i++) {
this._makeSelectorButton(i);
}
- };
+ }
- this.deltaY = function(dy) {
+ deltaY(dy) {
let curr = parseInt(document.getElementById("palette").style.top);
document.getElementById("palette").style.top = curr + dy +"px"
- };
+ }
- this._makeSelectorButton = function(i) {
+ _makeSelectorButton(i) {
console.debug("makeSelectorButton " + i);
if (!document.getElementById("palette")){
@@ -97,30 +99,30 @@ function Palettes() {
element.setAttribute("id","palette");
element.setAttribute("class","disable_highlighting");
element.setAttribute("style",'position: fixed; display: none ; left :0px; top:'+this.top+'px');
- element.innerHTML =''
+ element.innerHTML ='';
document.body.appendChild(element);
}
- let palette = document.getElementById("palette");
- let tr = palette.children[0].children[0].children[0].children[0];
- let td = tr.insertCell();
- td.width=1.5*this.cellSize;
- td.height=1.5*this.cellSize;
- td.appendChild(makePaletteIcons(PALETTEICONS[MULTIPALETTEICONS[i]]
- .replace(
- "background_fill_color",
- platformColor.selectorBackground
- )
- .replace(/stroke_color/g, platformColor.ruleColor)
- .replace(/fill_color/g, platformColor.background)
- ,1.5*this.cellSize
- ,1.5*this.cellSize))
- td.onmouseover = (evt) =>{
- this.showSelection(i,tr);
- this.makePalettes(i);
- }
- };
+ let palette = document.getElementById("palette");
+ let tr = palette.children[0].children[0].children[0].children[0];
+ let td = tr.insertCell();
+ td.width=1.5*this.cellSize;
+ td.height=1.5*this.cellSize;
+ td.appendChild(makePaletteIcons(PALETTEICONS[MULTIPALETTEICONS[i]]
+ .replace(
+ "background_fill_color",
+ platformColor.selectorBackground
+ )
+ .replace(/stroke_color/g, platformColor.ruleColor)
+ .replace(/fill_color/g, platformColor.background),
+ 1.5*this.cellSize,
+ 1.5*this.cellSize));
+ td.onmouseover = (evt) =>{
+ this.showSelection(i,tr);
+ this.makePalettes(i);
+ }
+ }
- this.showSelection = (i,tr) => {
+ showSelection(i,tr) {
//selector menu design.
for (let j = 0; j < MULTIPALETTES.length ; j++) {
let img;
@@ -149,42 +151,42 @@ function Palettes() {
}
}
- this.setSize = function(size) {
+ setSize(size) {
this.cellSize = Math.floor(size * PALETTE_SCALE_FACTOR + 0.5);
return this;
- };
+ }
- this.setMobile = function(mobile) {
+ setMobile(mobile) {
this.mobile = mobile;
if (mobile) {
this._hideMenus();
}
return this;
- };
+ }
- this.setBlocksContainer= function(bloc) {
+ setBlocksContainer(bloc) {
this.blocksContainer = bloc ;
return this;
- };
-
+ }
+
// We need access to the macro dictionary because we load them.
- this.setMacroDictionary = function(obj) {
+ setMacroDictionary(obj) {
this.macroDict = obj;
return this;
- };
+ }
- this.setSearch = function(show, hide) {
+ setSearch(show, hide) {
this.showSearchWidget = show;
this.hideSearchWidget = hide;
return this;
- };
+ }
- this.getSearchPos = function() {
+ getSearchPos() {
return [this.cellSize, this.top + this.cellSize * 1.75];
- };
+ }
- this.getPluginMacroExpansion = function(blkname, x, y) {
+ getPluginMacroExpansion(blkname, x, y) {
console.debug(this.pluginMacros[blkname]);
let obj = this.pluginMacros[blkname];
if (obj != null) {
@@ -193,9 +195,9 @@ function Palettes() {
}
return obj;
- };
+ }
- this.countProtoBlocks = function(name) {
+ countProtoBlocks(name) {
// How many protoblocks are in palette name?
let n = 0;
for (let b in this.blocks.protoBlockDict) {
@@ -206,9 +208,9 @@ function Palettes() {
}
return n;
- };
+ }
- this.getProtoNameAndPalette = function(name) {
+ getProtoNameAndPalette(name) {
for (let b in this.blocks.protoBlockDict) {
// Don't return deprecated blocks.
if (name === this.blocks.protoBlockDict[b].name &&
@@ -222,9 +224,9 @@ function Palettes() {
}
return [null, null, null];
- };
+ }
- this.makePalettes = function(i) {
+ makePalettes(i) {
let palette = docById("palette");
let listBody = palette.children[0].children[1].children[1];
listBody.parentNode.removeChild(listBody);
@@ -232,8 +234,8 @@ function Palettes() {
document.createElement("tbody"));
// Make an icon/button for each palette
this.makeButton("search",
- makePaletteIcons(PALETTEICONS["search"], this.cellSize,
- this.cellSize), listBody);
+ makePaletteIcons(PALETTEICONS["search"], this.cellSize,
+ this.cellSize), listBody);
for (let name of MULTIPALETTES[i]) {
if (beginnerMode && SKIPPALETTES.indexOf(name) !== -1) {
continue;
@@ -245,12 +247,12 @@ function Palettes() {
}
}
this.makeButton(name,
- makePaletteIcons(PALETTEICONS[name], this.cellSize,
- this.cellSize), listBody);
+ makePaletteIcons(PALETTEICONS[name], this.cellSize,
+ this.cellSize), listBody);
}
- };
+ }
- this.makeButton = function (name,icon,listBody){
+ makeButton (name,icon,listBody){
let row = listBody.insertRow(-1);
let img = row.insertCell(-1);
let label = row.insertCell(-1);
@@ -268,37 +270,37 @@ function Palettes() {
}
this._loadPaletteButtonHandler(name,row);
- };
+ }
- this.showPalette = function(name) {
+ showPalette(name) {
if (this.mobile) {
return;
}
this.hideSearchWidget(true);
this.dict[name].showMenu(true);
- };
+ }
- this._showMenus = function() {
- };
+ _showMenus() {
+ }
- this._hideMenus = function() {
+ _hideMenus() {
// Hide the menu buttons and the palettes themselves.
this.hideSearchWidget(true);
- if (docById("PaletteBody"))
+ if (docById("PaletteBody"))
docById("PaletteBody").parentNode.removeChild(docById("PaletteBody"));
-
- };
- this.getInfo = function() {
+ }
+
+ getInfo() {
for (let key in this.dict) {
console.debug(this.dict[key].getInfo());
}
- };
+ }
- this.updatePalettes = function(showPalette) {
+ updatePalettes(showPalette) {
if (showPalette != null) {
// Show the action palette after adding/deleting new
// nameddo blocks.
@@ -318,28 +320,28 @@ function Palettes() {
if (this.mobile) {
this.hide();
}
- };
+ }
- this.hide = function() {
+ hide() {
docById("palette").style.visibility = "hidden";
- };
+ }
- this.show = function() {
+ show() {
docById("palette").style.visibility = "visible";
- };
+ }
- this.setBlocks = function(blocks) {
+ setBlocks(blocks) {
this.blocks = blocks;
return this;
- };
+ }
- this.add = function(name) {
+ add(name) {
this.dict[name] = new Palette(this, name);
return this;
- };
+ }
// Palette Button event handlers
- this._loadPaletteButtonHandler = function(name,row) {
+ _loadPaletteButtonHandler(name, row) {
row.onmouseover = (evt) => {
document.body.style.cursor = "pointer";
}
@@ -357,9 +359,9 @@ function Palettes() {
document.body.style.cursor = "default";
}
- };
+ }
- this.removeActionPrototype = function(actionName) {
+ removeActionPrototype(actionName) {
let blockRemoved = false;
for (let blk = 0; blk < this.dict["action"].protoList.length; blk++) {
let actionBlock = this.dict["action"].protoList[blk];
@@ -391,19 +393,20 @@ function Palettes() {
if (blockRemoved) {
this.updatePalettes("action");
}
- };
+ }
- return this;
}
// Kind of a model, but it only keeps a list of SVGs
-function PaletteModel(palette, palettes, name) {
- this.palette = palette;
- this.palettes = palettes;
- this.name = name;
- this.blocks = [];
+class PaletteModel {
+ constructor(palette, palettes, name) {
+ this.palette = palette;
+ this.palettes = palettes;
+ this.name = name;
+ this.blocks = [];
+ }
- this.update = function() {
+ update() {
this.blocks = [];
for (let blk in this.palette.protoList) {
let block = this.palette.protoList[blk];
@@ -415,80 +418,80 @@ function PaletteModel(palette, palettes, name) {
// Create a proto block for each palette entry.
this.blocks.push(this.makeBlockInfo(blk, block, block.name,
- block.name));
+ block.name));
}
- };
-
- this.makeBlockInfo = function(blk, block, blkname, modname) {
+ }
+
+ makeBlockInfo(blk, block, blkname, modname) {
let arg;
switch (blkname) {
// Use the name of the action in the label
- case "storein":
- modname = "store in " + block.defaults[0];
- arg = block.defaults[0];
- break;
- case "storein2":
- modname = "store in2 " + block.staticLabels[0];
- arg = block.staticLabels[0];
- break;
- case "box":
- modname = block.defaults[0];
- arg = block.defaults[0];
- break;
- case "namedbox":
- if (block.defaults[0] === undefined) {
- modname = "namedbox";
- arg = _("box");
- } else {
- modname = block.defaults[0];
- arg = block.defaults[0];
- }
- break;
- case "namedarg":
- if (block.defaults[0] === undefined) {
- modname = "namedarg";
- arg = "1";
- } else {
- modname = block.defaults[0];
- arg = block.defaults[0];
- }
- break;
- case "nameddo":
- if (block.defaults[0] === undefined) {
- modname = "nameddo";
- arg = _("action");
- } else {
- modname = block.defaults[0];
- arg = block.defaults[0];
- }
- break;
- case "nameddoArg":
- if (block.defaults[0] === undefined) {
- modname = "nameddoArg";
- arg = _("action");
- } else {
- modname = block.defaults[0];
+ case "storein":
+ modname = "store in " + block.defaults[0];
arg = block.defaults[0];
- }
- break;
- case "namedcalc":
- if (block.defaults[0] === undefined) {
- modname = "namedcalc";
- arg = _("action");
- } else {
- modname = block.defaults[0];
- arg = block.defaults[0];
- }
- break;
- case "namedcalcArg":
- if (block.defaults[0] === undefined) {
- modname = "namedcalcArg";
- arg = _("action");
- } else {
+ break;
+ case "storein2":
+ modname = "store in2 " + block.staticLabels[0];
+ arg = block.staticLabels[0];
+ break;
+ case "box":
modname = block.defaults[0];
arg = block.defaults[0];
- }
- break;
+ break;
+ case "namedbox":
+ if (block.defaults[0] === undefined) {
+ modname = "namedbox";
+ arg = _("box");
+ } else {
+ modname = block.defaults[0];
+ arg = block.defaults[0];
+ }
+ break;
+ case "namedarg":
+ if (block.defaults[0] === undefined) {
+ modname = "namedarg";
+ arg = "1";
+ } else {
+ modname = block.defaults[0];
+ arg = block.defaults[0];
+ }
+ break;
+ case "nameddo":
+ if (block.defaults[0] === undefined) {
+ modname = "nameddo";
+ arg = _("action");
+ } else {
+ modname = block.defaults[0];
+ arg = block.defaults[0];
+ }
+ break;
+ case "nameddoArg":
+ if (block.defaults[0] === undefined) {
+ modname = "nameddoArg";
+ arg = _("action");
+ } else {
+ modname = block.defaults[0];
+ arg = block.defaults[0];
+ }
+ break;
+ case "namedcalc":
+ if (block.defaults[0] === undefined) {
+ modname = "namedcalc";
+ arg = _("action");
+ } else {
+ modname = block.defaults[0];
+ arg = block.defaults[0];
+ }
+ break;
+ case "namedcalcArg":
+ if (block.defaults[0] === undefined) {
+ modname = "namedcalcArg";
+ arg = _("action");
+ } else {
+ modname = block.defaults[0];
+ arg = block.defaults[0];
+ }
+ break;
}
let protoBlock = this.palettes.blocks.protoBlockDict[blkname];
@@ -498,107 +501,107 @@ function PaletteModel(palette, palettes, name) {
let label = "";
switch (protoBlock.name) {
- case "grid":
- label = _("grid");
- break;
- case "text":
- label = _("text");
- break;
- case "drumname":
- label = _("drum");
- break;
- case "effectsname":
- label = _("effect");
- break;
- case "solfege":
- label = i18nSolfege("sol");
- break;
- case "eastindiansolfege":
- label = _("sargam");
- break;
- case "scaledegree2":
- label = _("scale degree");
- break;
- case "modename":
- label = _("mode name");
- break;
- case "invertmode":
- label = _("invert mode");
- break;
- case "voicename":
- label = _("voice name");
- break;
- case "customNote":
- label = _("custom pitch");
- break;
- case "temperamentname":
- //TRANS: https://en.wikipedia.org/wiki/Musical_temperament
- label = _("temperament");
- break;
- case "accidentalname":
- //TRANS: accidental refers to sharps, flats, etc.
- label = _("accidental");
- break;
- case "notename":
- label = "G";
- break;
- case "intervalname":
- label = _("interval name");
- break;
- case "boolean":
- label = _("true");
- break;
- case "number":
- label = NUMBERBLOCKDEFAULT.toString();
- break;
- case "less":
- case "greater":
- case "equal":
- // Label should be inside _() when defined.
- label = protoBlock.staticLabels[0];
- break;
- case "namedarg":
- label = "arg " + arg;
- break;
- case "outputtools":
- label = _("pitch converter");
- break;
- default:
- if (blkname != modname) {
- // Override label for do, storein, box, and namedarg
- if (blkname === "storein" && block.defaults[0] === _("box")) {
- label = _("store in");
- } else if (blkname === "storein2") {
- if (block.staticLabels[0] === _("store in box")) {
- label = _("store in box");
- } else {
- label = _("store in") + " " + block.staticLabels[0];
- }
- } else {
- label = block.defaults[0];
- }
- } else if (protoBlock.staticLabels.length > 0) {
+ case "grid":
+ label = _("grid");
+ break;
+ case "text":
+ label = _("text");
+ break;
+ case "drumname":
+ label = _("drum");
+ break;
+ case "effectsname":
+ label = _("effect");
+ break;
+ case "solfege":
+ label = i18nSolfege("sol");
+ break;
+ case "eastindiansolfege":
+ label = _("sargam");
+ break;
+ case "scaledegree2":
+ label = _("scale degree");
+ break;
+ case "modename":
+ label = _("mode name");
+ break;
+ case "invertmode":
+ label = _("invert mode");
+ break;
+ case "voicename":
+ label = _("voice name");
+ break;
+ case "customNote":
+ label = _("custom pitch");
+ break;
+ case "temperamentname":
+ //TRANS: https://en.wikipedia.org/wiki/Musical_temperament
+ label = _("temperament");
+ break;
+ case "accidentalname":
+ //TRANS: accidental refers to sharps, flats, etc.
+ label = _("accidental");
+ break;
+ case "notename":
+ label = "G";
+ break;
+ case "intervalname":
+ label = _("interval name");
+ break;
+ case "boolean":
+ label = _("true");
+ break;
+ case "number":
+ label = NUMBERBLOCKDEFAULT.toString();
+ break;
+ case "less":
+ case "greater":
+ case "equal":
+ // Label should be inside _() when defined.
label = protoBlock.staticLabels[0];
- if (label === "") {
- if (blkname === "loadFile") {
- label = _("open file");
+ break;
+ case "namedarg":
+ label = "arg " + arg;
+ break;
+ case "outputtools":
+ label = _("pitch converter");
+ break;
+ default:
+ if (blkname != modname) {
+ // Override label for do, storein, box, and namedarg
+ if (blkname === "storein" && block.defaults[0] === _("box")) {
+ label = _("store in");
+ } else if (blkname === "storein2") {
+ if (block.staticLabels[0] === _("store in box")) {
+ label = _("store in box");
+ } else {
+ label = _("store in") + " " + block.staticLabels[0];
+ }
} else {
- label = blkname;
+ label = block.defaults[0];
}
+ } else if (protoBlock.staticLabels.length > 0) {
+ label = protoBlock.staticLabels[0];
+ if (label === "") {
+ if (blkname === "loadFile") {
+ label = _("open file");
+ } else {
+ label = blkname;
+ }
+ }
+ } else {
+ label = blkname;
}
- } else {
- label = blkname;
- }
}
if (["do",
- "nameddo",
- "namedbox",
- "namedcalc",
- "doArg",
- "calcArg",
- "nameddoArg",
- "namedcalcArg"].indexOf(protoBlock.name) != -1 && label != null) {
+ "nameddo",
+ "namedbox",
+ "namedcalc",
+ "doArg",
+ "calcArg",
+ "nameddoArg",
+ "namedcalcArg"].indexOf(protoBlock.name) != -1 && label != null) {
if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
label = label.substr(0, STRINGLEN) + "...";
}
@@ -618,7 +621,7 @@ function PaletteModel(palette, palettes, name) {
let docks;
let height;
switch (protoBlock.name) {
- case "namedbox":
+ case "namedbox":
case "namedarg":
// so the label will fit
svg = new SVG();
@@ -656,15 +659,15 @@ function PaletteModel(palette, palettes, name) {
} else {
artwork = artwork
.replace(/fill_color/g,
- PALETTEFILLCOLORS[protoBlock.palette.name])
+ PALETTEFILLCOLORS[protoBlock.palette.name])
.replace(/stroke_color/g,
- PALETTESTROKECOLORS[protoBlock.palette.name])
+ PALETTESTROKECOLORS[protoBlock.palette.name])
.replace("block_label", safeSVG(label));
}
for (let i = 0; i <= protoBlock.args; i++) {
artwork = artwork.replace("arg_label_" + i,
- protoBlock.staticLabels[i] || "");
+ protoBlock.staticLabels[i] || "");
}
return {
@@ -687,49 +690,51 @@ function PaletteModel(palette, palettes, name) {
}
// Define objects for individual palettes.
-function Palette(palettes, name) {
- this.palettes = palettes;
- this.name = name;
- this.model = new PaletteModel(this, palettes, name);
- this.visible = false;
- this.menuContainer = null;
- this.protoList = [];
- this.protoContainers = {};
- this.protoHeights = {};
- this.background = null;
- this.size = 0;
- this.columns = 0;
- this.draggingProtoBlock = false;
- this.mouseHandled = false;
- this.upButton = null;
- this.downButton = null;
- this.fadedUpButton = null;
- this.fadedDownButton = null;
- this.count = 0;
-
- this.hide = function() {
+class Palette {
+ constructor(palettes, name) {
+ this.palettes = palettes;
+ this.name = name;
+ this.model = new PaletteModel(this, palettes, name);
+ this.visible = false;
+ this.menuContainer = null;
+ this.protoList = [];
+ this.protoContainers = {};
+ this.protoHeights = {};
+ this.background = null;
+ this.size = 0;
+ this.columns = 0;
+ this.draggingProtoBlock = false;
+ this.mouseHandled = false;
+ this.upButton = null;
+ this.downButton = null;
+ this.fadedUpButton = null;
+ this.fadedDownButton = null;
+ this.count = 0;
+ }
+
+ hide() {
this.hideMenu();
- };
+ }
- this.show = function() {
+ show() {
this.showMenu(true);
- };
+ }
- this.hideMenu = function() {
+ hideMenu() {
this._hideMenuItems();
- };
+ }
+
+ showMenu(createHeader) {
- this.showMenu = function(createHeader) {
-
let palDiv = docById("palette");
if (docById("PaletteBody"))
palDiv.removeChild(docById("PaletteBody"));
let x = document.createElement("table");
- x.setAttribute("id","PaletteBody")
+ x.setAttribute("id","PaletteBody");
x.setAttribute("bgcolor","white");
x.setAttribute("style","float: left");
- x.innerHTML= ''
- palDiv.appendChild(x)
+ x.innerHTML = '';
+ palDiv.appendChild(x);
let buttonContainers = document.createDocumentFragment();
let down = makePaletteIcons(DOWNICON,15,15);
@@ -788,17 +793,17 @@ function Palette(palettes, name) {
}
this._showMenuItems();
- };
+ }
- this._hideMenuItems = function() {
+ _hideMenuItems() {
if (this.name === "search" && this.palettes.hideSearchWidget !== null) {
this.palettes.hideSearchWidget(true);
}
if (docById("PaletteBody"))
- docById("palette").removeChild(docById("PaletteBody"));
- };
+ docById("palette").removeChild(docById("PaletteBody"));
+ }
- this._showMenuItems = function() {
+ _showMenuItems() {
this.model.update();
let paletteList = docById("PaletteBody_items");
@@ -820,9 +825,8 @@ function Palette(palettes, name) {
}
let itemRow = paletteList.insertRow();
let itemCell = itemRow.insertCell();
- let right = itemRow.insertCell()
- right.innerHTML =" "
- let that = this ;
+ let right = itemRow.insertCell();
+ right.innerHTML =" ";
let img = makePaletteIcons(
b.artwork
);
@@ -843,28 +847,28 @@ function Palette(palettes, name) {
// Image Drag initiates a browser defined drag,
// which needs to be stoped.
- img.ondragstart = function() {
+ img.ondragstart = () => {
return false;
};
- let down = function(event){
+ const down = (event) => {
// (1) prepare to moving: make absolute and on top by z-index
- let posit = img.style.position ;
- let zInd = img.style.zIndex ;
+ let posit = img.style.position ;
+ let zInd = img.style.zIndex ;
img.style.position = 'absolute';
img.style.zIndex = 1000;
// move it out of any current parents directly into body
// to make it positioned relative to the body
document.body.appendChild(img);
-
+
// centers the img at (pageX, pageY) coordinates
- moveAt = (pageX, pageY) => {
+ const moveAt = (pageX, pageY) => {
img.style.left = pageX - img.offsetWidth / 2 + 'px';
img.style.top = pageY - img.offsetHeight / 2 + 'px';
}
-
- let onMouseMove = (e) => {
+
+ const onMouseMove = (e) => {
let x, y;
if (e.type === "touchmove"){
x = e.touches[0].clientX;
@@ -875,12 +879,12 @@ function Palette(palettes, name) {
}
moveAt(x, y);
}
- onMouseMove(event)
-
+ onMouseMove(event);
+
document.addEventListener('touchmove', onMouseMove);
document.addEventListener('mousemove', onMouseMove);
-
- let up = function (event) {
+
+ const up = (event) => {
document.body.style.cursor = "default";
document.removeEventListener('mousemove', onMouseMove);
img.onmouseup = null;
@@ -888,55 +892,55 @@ function Palette(palettes, name) {
let x, y;
x = parseInt (img.style.left);
y = parseInt (img.style.top);
-
+
img.style.position = posit;
img.style.zIndex = zInd;
document.body.removeChild(img);
itemCell.appendChild(img);
-
+
if (!x || !y) return;
- that._makeBlockFromProtoblock(
+ this._makeBlockFromProtoblock(
protoListScope[blk],
true,
b.modname,
event,
- x - that.palettes.blocksContainer.x,
- y - that.palettes.blocksContainer.y
+ x - this.palettes.blocksContainer.x,
+ y - this.palettes.blocksContainer.y
);
};
- img.ontouchend = up;
+ img.ontouchend = up;
img.onmouseup = up;
};
img.ontouchstart = down;
img.onmousedown = down;
-
+
itemCell.setAttribute("style","width: "+img.width+"px ");
- itemCell.appendChild(img)
+ itemCell.appendChild(img);
}
if (this.palettes.mobile) {
this.hide();
}
- };
+ }
- this.setupGrabScroll = (paletteList) => {
+ setupGrabScroll(paletteList) {
let posY,top;
-
- let mouseUpGrab = (evt) => {
+
+ const mouseUpGrab = (evt) => {
paletteList.onmousemove= null ;
document.body.style.cursor = "default";
};
- let mouseMoveGrab = (evt) => {
+ const mouseMoveGrab = (evt) => {
let dy = evt.clientY - posY;
paletteList.scrollTop = top - dy;
document.body.style.cursor = "grabbing";
};
- let mouseDownGrab = (evt) => {
- posY = evt.clientY
+ const mouseDownGrab = (evt) => {
+ posY = evt.clientY;
top = paletteList.scrollTop;
paletteList.onmousemove = mouseMoveGrab;
@@ -946,15 +950,15 @@ function Palette(palettes, name) {
paletteList.onmousedown = mouseDownGrab;
}
- this.getInfo = function() {
+ getInfo() {
let returnString = this.name + " palette:";
for (let thisBlock in this.protoList) {
returnString += " " + this.protoList[thisBlock].name;
}
return returnString;
- };
+ }
- this.remove = function(protoblock, name) {
+ remove(protoblock, name) {
// Remove the protoblock and its associated artwork container.
let i = this.protoList.indexOf(protoblock);
if (i !== -1) {
@@ -963,7 +967,7 @@ function Palette(palettes, name) {
for (let i = 0; i < this.model.blocks.length; i++) {
if (["nameddo", "nameddoArg", "namedcalc", "namedcalcArg"].indexOf(
- this.model.blocks[i].blkname) !== -1 &&
+ this.model.blocks[i].blkname) !== -1 &&
this.model.blocks[i].modname === name) {
this.model.blocks.splice(i, 1);
break;
@@ -975,9 +979,9 @@ function Palette(palettes, name) {
}
}
- };
+ }
- this.add = function(protoblock, top) {
+ add(protoblock, top) {
// Add a new palette entry to the end of the list (default) or
// to the top.
if (this.protoList.indexOf(protoblock) === -1) {
@@ -985,14 +989,14 @@ function Palette(palettes, name) {
else this.protoList.push(protoblock);
}
return this;
- };
+ }
- this.makeBlockFromSearch = function(protoblk, blkname, callback) {
+ makeBlockFromSearch(protoblk, blkname, callback) {
this._makeBlockFromPalette(protoblk, blkname, callback);
this.palettes.hideSearchWidget();
- };
+ }
- this._makeBlockFromPalette = function(protoblk, blkname, callback) {
+ _makeBlockFromPalette(protoblk, blkname, callback) {
if (protoblk === null) {
console.debug("null protoblk?");
return;
@@ -1001,126 +1005,126 @@ function Palette(palettes, name) {
let newBlk;
let arg;
switch (protoblk.name) {
- case "do":
- blkname = "do " + protoblk.defaults[0];
- newBlk = protoblk.name;
- arg = protoblk.defaults[0];
- break;
- case "storein":
- // Use the name of the box in the label
- blkname = "store in " + protoblk.defaults[0];
- newBlk = protoblk.name;
- arg = protoblk.defaults[0];
- break;
- case "storein2":
- // Use the name of the box in the label
- console.debug("storein2" + " " + protoblk.defaults[0] + " " +
- protoblk.staticLabels[0]);
- blkname = "store in2 " + protoblk.defaults[0];
- newBlk = protoblk.name;
- arg = protoblk.staticLabels[0];
- break;
- case "box":
- // Use the name of the box in the label
- blkname = protoblk.defaults[0];
- newBlk = protoblk.name;
- arg = protoblk.defaults[0];
- break;
- case "namedbox":
- // Use the name of the box in the label
- if (protoblk.defaults[0] === undefined) {
- blkname = "namedbox";
- arg = _("box");
- } else {
- console.debug(protoblk.defaults[0]);
- blkname = protoblk.defaults[0];
+ case "do":
+ blkname = "do " + protoblk.defaults[0];
+ newBlk = protoblk.name;
arg = protoblk.defaults[0];
- }
- newBlk = protoblk.name;
- break;
- case "namedarg":
- // Use the name of the arg in the label
- if (protoblk.defaults[0] === undefined) {
- blkname = "namedarg";
- arg = "1";
- } else {
- blkname = protoblk.defaults[0];
- arg = protoblk.defaults[0];
- }
- newBlk = protoblk.name;
- break;
- case "nameddo":
- // Use the name of the action in the label
- if (protoblk.defaults[0] === undefined) {
- blkname = "nameddo";
- arg = _("action");
- } else {
- blkname = protoblk.defaults[0];
- arg = protoblk.defaults[0];
- }
- newBlk = protoblk.name;
- break;
- case "nameddoArg":
- // Use the name of the action in the label
- if (protoblk.defaults[0] === undefined) {
- blkname = "nameddoArg";
- arg = _("action");
- } else {
- blkname = protoblk.defaults[0];
- arg = protoblk.defaults[0];
- }
- newBlk = protoblk.name;
- break;
- case "namedcalc":
- // Use the name of the action in the label
- if (protoblk.defaults[0] === undefined) {
- blkname = "namedcalc";
- arg = _("action");
- } else {
- blkname = protoblk.defaults[0];
- arg = protoblk.defaults[0];
- }
- newBlk = protoblk.name;
- break;
- case "namedcalcArg":
- // Use the name of the action in the label
- if (protoblk.defaults[0] === undefined) {
- blkname = "namedcalcArg";
- arg = _("action");
- } else {
- blkname = protoblk.defaults[0];
+ break;
+ case "storein":
+ // Use the name of the box in the label
+ blkname = "store in " + protoblk.defaults[0];
+ newBlk = protoblk.name;
arg = protoblk.defaults[0];
- }
- newBlk = protoblk.name;
- break;
- case "outputtools":
- if (protoblk.defaults[0] === undefined) {
- blkname = "outputtools";
- arg = "letter class";
- } else {
+ break;
+ case "storein2":
+ // Use the name of the box in the label
+ console.debug("storein2" + " " + protoblk.defaults[0] + " " +
+ protoblk.staticLabels[0]);
+ blkname = "store in2 " + protoblk.defaults[0];
+ newBlk = protoblk.name;
+ arg = protoblk.staticLabels[0];
+ break;
+ case "box":
+ // Use the name of the box in the label
blkname = protoblk.defaults[0];
+ newBlk = protoblk.name;
arg = protoblk.defaults[0];
- }
- newBlk = protoblk.name;
- break;
- default:
- if (blkname === "nameddo") {
- arg = _("action");
- } else {
- arg = "__NOARG__";
- }
+ break;
+ case "namedbox":
+ // Use the name of the box in the label
+ if (protoblk.defaults[0] === undefined) {
+ blkname = "namedbox";
+ arg = _("box");
+ } else {
+ console.debug(protoblk.defaults[0]);
+ blkname = protoblk.defaults[0];
+ arg = protoblk.defaults[0];
+ }
+ newBlk = protoblk.name;
+ break;
+ case "namedarg":
+ // Use the name of the arg in the label
+ if (protoblk.defaults[0] === undefined) {
+ blkname = "namedarg";
+ arg = "1";
+ } else {
+ blkname = protoblk.defaults[0];
+ arg = protoblk.defaults[0];
+ }
+ newBlk = protoblk.name;
+ break;
+ case "nameddo":
+ // Use the name of the action in the label
+ if (protoblk.defaults[0] === undefined) {
+ blkname = "nameddo";
+ arg = _("action");
+ } else {
+ blkname = protoblk.defaults[0];
+ arg = protoblk.defaults[0];
+ }
+ newBlk = protoblk.name;
+ break;
+ case "nameddoArg":
+ // Use the name of the action in the label
+ if (protoblk.defaults[0] === undefined) {
+ blkname = "nameddoArg";
+ arg = _("action");
+ } else {
+ blkname = protoblk.defaults[0];
+ arg = protoblk.defaults[0];
+ }
+ newBlk = protoblk.name;
+ break;
+ case "namedcalc":
+ // Use the name of the action in the label
+ if (protoblk.defaults[0] === undefined) {
+ blkname = "namedcalc";
+ arg = _("action");
+ } else {
+ blkname = protoblk.defaults[0];
+ arg = protoblk.defaults[0];
+ }
+ newBlk = protoblk.name;
+ break;
+ case "namedcalcArg":
+ // Use the name of the action in the label
+ if (protoblk.defaults[0] === undefined) {
+ blkname = "namedcalcArg";
+ arg = _("action");
+ } else {
+ blkname = protoblk.defaults[0];
+ arg = protoblk.defaults[0];
+ }
+ newBlk = protoblk.name;
+ break;
+ case "outputtools":
+ if (protoblk.defaults[0] === undefined) {
+ blkname = "outputtools";
+ arg = "letter class";
+ } else {
+ blkname = protoblk.defaults[0];
+ arg = protoblk.defaults[0];
+ }
+ newBlk = protoblk.name;
+ break;
+ default:
+ if (blkname === "nameddo") {
+ arg = _("action");
+ } else {
+ arg = "__NOARG__";
+ }
- newBlk = blkname;
- break;
+ newBlk = blkname;
+ break;
}
let lastBlock = this.palettes.blocks.blockList.length;
if (["namedbox",
- "nameddo",
- "namedcalc",
- "nameddoArg",
- "namedcalcArg"].indexOf(protoblk.name) === -1 &&
+ "nameddo",
+ "namedcalc",
+ "nameddoArg",
+ "namedcalcArg"].indexOf(protoblk.name) === -1 &&
blockIsMacro(blkname)) {
this._makeBlockFromProtoblock(
protoblk,
@@ -1132,11 +1136,11 @@ function Palette(palettes, name) {
);
callback(lastBlock);
} else if (["namedbox",
- "nameddo",
- "namedcalc",
- "nameddoArg",
- "namedcalcArg"].indexOf(protoblk.name) === -1 &&
- blkname in this.palettes.pluginMacros) {
+ "nameddo",
+ "namedcalc",
+ "nameddoArg",
+ "namedcalcArg"].indexOf(protoblk.name) === -1 &&
+ blkname in this.palettes.pluginMacros) {
this._makeBlockFromProtoblock(
protoblk,
true,
@@ -1154,23 +1158,22 @@ function Palette(palettes, name) {
);
callback(newBlock);
}
- };
+ }
- this._makeBlockFromProtoblock = function(
+ _makeBlockFromProtoblock(
protoblk, moved, blkname, event, saveX, saveY) {
- let that = this;
let newBlock;
- function __myCallback(newBlock) {
+ const __myCallback = (newBlock) => {
// Move the drag group under the cursor.
- that.palettes.blocks.findDragGroup(newBlock);
- for (let i in that.palettes.blocks.dragGroup) {
- that.palettes.blocks.moveBlockRelative(
- that.palettes.blocks.dragGroup[i], saveX, saveY);
+ this.palettes.blocks.findDragGroup(newBlock);
+ for (let i in this.palettes.blocks.dragGroup) {
+ this.palettes.blocks.moveBlockRelative(
+ this.palettes.blocks.dragGroup[i], saveX, saveY);
}
// Dock with other blocks if needed
- that.palettes.blocks.blockMoved(newBlock);
- that.palettes.blocks.checkBounds();
+ this.palettes.blocks.blockMoved(newBlock);
+ this.palettes.blocks.checkBounds();
}
if (moved) {
@@ -1179,10 +1182,10 @@ function Palette(palettes, name) {
let macroExpansion = null;
if (["namedbox",
- "nameddo",
- "namedcalc",
- "nameddoArg",
- "namedcalcArg"].indexOf(protoblk.name) === -1) {
+ "nameddo",
+ "namedcalc",
+ "nameddoArg",
+ "namedcalcArg"].indexOf(protoblk.name) === -1) {
macroExpansion = getMacroExpansion(blkname, saveX, saveY);
if (macroExpansion === null) {
// Maybe it is a plugin macro?
@@ -1204,7 +1207,7 @@ function Palette(palettes, name) {
// We need to copy the macro data so it is not overwritten.
let obj = [];
for (let b = 0; b < this.palettes.macroDict[macroName].length;
- b++) {
+ b++) {
let valueEntry = this.palettes.macroDict[macroName][b][1];
let newValue = [];
if (typeof valueEntry === "string") {
@@ -1220,15 +1223,15 @@ function Palette(palettes, name) {
newValue = [valueEntry[0], valueEntry[1]];
} else {
newValue = [valueEntry[0],
- valueEntry[1].toString()];
+ valueEntry[1].toString()];
}
} else {
if (valueEntry[0] === "number") {
newValue = [valueEntry[0],
- Number(valueEntry[1]["value"])];
+ Number(valueEntry[1]["value"])];
} else {
newValue = [valueEntry[0],
- {value: valueEntry[1]["value"]}];
+ {value: valueEntry[1]["value"]}];
}
}
@@ -1251,7 +1254,7 @@ function Palette(palettes, name) {
// Ensure collapse state of new stack is set properly.
let thisBlock = this.palettes.blocks.blockList.length - 1;
let topBlk = this.palettes.blocks.findTopBlock(thisBlock);
- setTimeout(function() {
+ setTimeout(() => {
this.palettes.blocks.blockList[topBlk].collapseToggle();
}, 500);
} else {
@@ -1261,7 +1264,6 @@ function Palette(palettes, name) {
}
};
- return this;
}
async function initPalettes(palettes) {
@@ -1282,7 +1284,7 @@ const MODEDRAG = 1;
const MODESCROLL = 2;
const DECIDEDISTANCE = 20;
-function makePaletteIcons(data,width,height) {
+function makePaletteIcons(data,width,height) {
let img = new Image();
img.src =
"data:image/svg+xml;base64," +