diff --git a/js/widgets/help.js b/js/widgets/help.js
index c532757055..3aa84accf9 100644
--- a/js/widgets/help.js
+++ b/js/widgets/help.js
@@ -21,23 +21,25 @@ function HelpWidget() {
this.isOpen = true;
let widgetWindow = window.widgetWindows.windowFor(this, "help", "help");
+ widgetWindow.getWidgetBody().style.overflowY = "auto";
+ const canvasHeight = docById("myCanvas").getBoundingClientRect().height;
+ widgetWindow.getWidgetBody().style.maxHeight = `${0.75 * canvasHeight}px`;
this.widgetWindow = widgetWindow;
widgetWindow.clear();
- widgetWindow.show();
+ widgetWindow.show();
widgetWindow.onClose = () => {
this.isOpen = false;
this.destroy();
};
-
// Position the widget and make it visible.
this._helpDiv = document.createElement("div");
// Give the DOM time to create the div.
-
- setTimeout(() => {
- this._setup(blocks);
- }, 100);
+ setTimeout(() => this._setup(blocks), 0);
+
+ // Position center
+ setTimeout(this.widgetWindow.sendToCenter, 50);
};
this._setup = (blocks) => {
@@ -47,18 +49,15 @@ function HelpWidget() {
this._helpDiv.style.width = iconSize * 2 + 425 + "px";
this._helpDiv.style.backgroundColor = "#e8e8e8";
+ // this._helpDiv.style.maxHeight = "100%";
+ // this._helpDiv.style.overflowY = "auto";
this._helpDiv.innerHTML =
'';
this.widgetWindow.getWidgetBody().append(this._helpDiv);
- // Make help div appear in center of screen
- this.widgetWindow.sendToCenter();
-
let leftArrow, rightArrow;
if (blocks === null) {
-
-
this.widgetWindow.updateTitle(_("Take a tour"));
rightArrow = document.getElementById("right-arrow");
rightArrow.style.display = "block";
@@ -91,9 +90,7 @@ function HelpWidget() {
};
} else {
if (blocks.activeBlock.name !== null) {
- let label =
- blocks.blockList[blocks.activeBlock].protoblock
- .staticLabels[0];
+ let label = blocks.blockList[blocks.activeBlock].protoblock.staticLabels[0];
this.widgetWindow.updateTitle(_(label));
}
@@ -116,7 +113,8 @@ function HelpWidget() {
if (blocks.activeBlock.name !== null) {
let name = blocks.blockList[blocks.activeBlock].name;
- let advIcon = '';
- let findIcon = '';
- let showPaletteParamater = blocks.blockList[blocks.activeBlock].protoblock.palette.name;
+ let showPaletteParamater =
+ blocks.blockList[blocks.activeBlock].protoblock.palette.name;
// Each block's help entry contains a help string, the
// path of the help svg, an override name for the help
// svg file, and an optional macro name for generating
// the help output.
- let message =
- blocks.blockList[blocks.activeBlock].protoblock.helpString;
-
+ let message = blocks.blockList[blocks.activeBlock].protoblock.helpString;
+
if (message) {
let helpBody = docById("helpBodyDiv");
helpBody.style.height = "";
@@ -182,18 +181,13 @@ function HelpWidget() {
break;
}
- body =
- body +
- '
';
+ body = body + '
';
}
body = body + "" + message[0] + "
";
- body += 'get_app';
+ body +=
+ 'get_app';
helpBody.innerHTML = body;
helpBody.innerHTML += findIcon;
@@ -202,48 +196,33 @@ function HelpWidget() {
helpBody.innerHTML += advIcon;
}
- let object = blocks.palettes.getProtoNameAndPalette(
- name
- );
+ let object = blocks.palettes.getProtoNameAndPalette(name);
let loadButton = docById("loadButton");
if (loadButton !== null) {
loadButton.onclick = () => {
if (message.length < 4) {
- // If there is nothing specified, just
- // load the block.
+ // If there is nothing specified, just load the block.
console.debug("CLICK: " + name);
let protoblk = object[0];
let paletteName = object[1];
let protoName = object[2];
- let protoResult = blocks.protoBlockDict.hasOwnProperty(
- protoName
- );
+ let protoResult = blocks.protoBlockDict.hasOwnProperty(protoName);
if (protoResult) {
- blocks.palettes.dict[
- paletteName
- ].makeBlockFromSearch(
+ blocks.palettes.dict[paletteName].makeBlockFromSearch(
protoblk,
protoName,
(newBlock) => {
- blocks.moveBlock(
- newBlock,
- 100,
- 100
- );
+ blocks.moveBlock(newBlock, 100, 100);
}
);
}
} else if (typeof message[3] === "string") {
// If it is a string, load the macro
// assocuated with this block
- let blocksToLoad = getMacroExpansion(
- message[3],
- 100,
- 100
- );
+ let blocksToLoad = getMacroExpansion(message[3], 100, 100);
console.debug("CLICK: " + blocksToLoad);
blocks.loadNewBlocks(blocksToLoad);
} else {
@@ -258,8 +237,7 @@ function HelpWidget() {
findIconMethod.onclick = () => {
blocks.palettes.showPalette(object[1]);
-
- }
+ };
}
}
}
@@ -279,8 +257,7 @@ function HelpWidget() {
_("Congratulations.")
].indexOf(HELPCONTENT[page][0]) !== -1
) {
- body =
- body + ' 
';
+ body = body + '
';
} else {
body =
body +
@@ -303,16 +280,12 @@ function HelpWidget() {
"";
}
- if (
- [
- _("Congratulations.")
- ].indexOf(HELPCONTENT[page][0]) !== -1
- ) {
+ if ([_("Congratulations.")].indexOf(HELPCONTENT[page][0]) !== -1) {
let cell = docById("right-arrow");
-
+
cell.onclick = () => {
this._prepareBlockList(blocks);
- }
+ };
}
helpBody.style.color = "#505050";
@@ -324,78 +297,84 @@ function HelpWidget() {
// Prepare a list of beginner and advanced blocks and cycle through their help
this._prepareBlockList = (blocks) => {
- for (let key in blocks.protoBlockDict){
- if(blocks.protoBlockDict[key].beginnerModeBlock === true && blocks.protoBlockDict[key].helpString !== undefined && blocks.protoBlockDict[key].helpString.length !== 0) {
+ for (let key in blocks.protoBlockDict) {
+ if (
+ blocks.protoBlockDict[key].beginnerModeBlock === true &&
+ blocks.protoBlockDict[key].helpString !== undefined &&
+ blocks.protoBlockDict[key].helpString.length !== 0
+ ) {
beginnerBlocks.push(key);
}
}
- for(let key in blocks.protoBlockDict) {
- if(blocks.protoBlockDict[key].beginnerModeBlock === false && blocks.protoBlockDict[key].helpString !== undefined && blocks.protoBlockDict[key].helpString.length !== 0) {
+ for (let key in blocks.protoBlockDict) {
+ if (
+ blocks.protoBlockDict[key].beginnerModeBlock === false &&
+ blocks.protoBlockDict[key].helpString !== undefined &&
+ blocks.protoBlockDict[key].helpString.length !== 0
+ ) {
advancedBlocks.push(key);
+ }
}
- }
// Array containing list of all blocks (Beginner blocks first)
-
+
appendedBlockList.push(...beginnerBlocks);
appendedBlockList.push(...advancedBlocks);
- this._blockHelp(blocks.protoBlockDict[appendedBlockList[0]], blocks)
-
- }
+ this._blockHelp(blocks.protoBlockDict[appendedBlockList[0]], blocks);
+ };
// Function to display help related to a single block
// called recursively to cycle through help string of all blocks (Beginner Blocks First)
this._blockHelp = (block, blocks) => {
let iconSize = ICONSIZE;
-
+
let widgetWindow = window.widgetWindows.windowFor(this, "help", "help");
this.widgetWindow = widgetWindow;
widgetWindow.clear();
this._helpDiv = document.createElement("div");
-
+
this._helpDiv.style.width = "500px";
this._helpDiv.style.height = "500px";
this._helpDiv.style.backgroundColor = "#e8e8e8";
this._helpDiv.innerHTML =
'';
-
+
this.widgetWindow.getWidgetBody().append(this._helpDiv);
this.widgetWindow.sendToCenter();
let cell = docById("right-arrow");
cell.onclick = () => {
- if(index !== appendedBlockList.length - 1) {
+ if (index !== appendedBlockList.length - 1) {
index += 1;
- }
- this._blockHelp(blocks.protoBlockDict[appendedBlockList[index]], blocks)
- }
+ }
+ this._blockHelp(blocks.protoBlockDict[appendedBlockList[index]], blocks);
+ };
cell = docById("left-arrow");
-
+
cell.onclick = () => {
- if(index !== 0){
+ if (index !== 0) {
index -= 1;
}
-
+
this._blockHelp(blocks.protoBlockDict[appendedBlockList[index]], blocks);
- }
+ };
if (block.name !== null) {
- let label =
- block
- .staticLabels[0];
- this.widgetWindow.updateTitle(_(label));
- }
-
+ let label = block.staticLabels[0];
+ this.widgetWindow.updateTitle(_(label));
+ }
+
// display help menu
// docById("helpBodyDiv").style.height = "325px";
// docById("helpBodyDiv").style.width = "400px";
// this._showPage(0);
-
+
if (block.name !== null) {
let name = block.name;
- let advIcon = '';
- let findIcon = '';
- let message =
- block.helpString;
+ let message = block.helpString;
let helpBody = docById("helpBodyDiv");
- helpBody.style.height = "500px";
- helpBody.style.backgroundColor = "#e8e8e8";
+ helpBody.style.height = "500px";
+ helpBody.style.backgroundColor = "#e8e8e8";
if (message) {
-
let body = "";
if (message.length > 1) {
let path = message[1];
@@ -438,7 +416,7 @@ function HelpWidget() {
if (language === undefined) {
language = navigator.language;
}
-
+
switch (language) {
case "ja":
if (localStorage.kanaPreference == "kana") {
@@ -456,21 +434,15 @@ function HelpWidget() {
default:
break;
}
-
- body =
- body +
- '
';
+
+ body = body + '
';
}
-
+
body = body + "" + message[0] + "
";
-
+
body +=
'get_app';
-
+
helpBody.innerHTML = body;
helpBody.innerHTML += findIcon;
@@ -482,7 +454,7 @@ function HelpWidget() {
findIconMethod.onclick = () => {
block.palette.palettes.showPalette(block.palette.name);
- }
+ };
let loadButton = docById("loadButton");
if (loadButton !== null) {
@@ -491,39 +463,25 @@ function HelpWidget() {
// If there is nothing specified, just
// load the block.
console.debug("CLICK: " + name);
- let obj = blocks.palettes.getProtoNameAndPalette(
- name
- );
+ let obj = blocks.palettes.getProtoNameAndPalette(name);
let protoblk = obj[0];
let paletteName = obj[1];
let protoName = obj[2];
-
- let protoResult = blocks.protoBlockDict.hasOwnProperty(
- protoName
- );
+
+ let protoResult = blocks.protoBlockDict.hasOwnProperty(protoName);
if (protoResult) {
- blocks.palettes.dict[
- paletteName
- ].makeBlockFromSearch(
+ blocks.palettes.dict[paletteName].makeBlockFromSearch(
protoblk,
protoName,
(newBlock) => {
- blocks.moveBlock(
- newBlock,
- 100,
- 100
- );
+ blocks.moveBlock(newBlock, 100, 100);
}
);
}
} else if (typeof message[3] === "string") {
// If it is a string, load the macro
// assocuated with this block
- let blocksToLoad = getMacroExpansion(
- message[3],
- 100,
- 100
- );
+ let blocksToLoad = getMacroExpansion(message[3], 100, 100);
console.debug("CLICK: " + blocksToLoad);
blocks.loadNewBlocks(blocksToLoad);
} else {
@@ -536,10 +494,9 @@ function HelpWidget() {
}
}
}
-
- this.widgetWindow.takeFocus();
- }
-
+
+ this.widgetWindow.takeFocus();
+ };
this.showPageByName = (pageName) => {
for (let i = 0; i < HELPCONTENT.length; i++) {
diff --git a/js/widgets/widgetWindows.js b/js/widgets/widgetWindows.js
index 610007fc98..47798cbd0f 100644
--- a/js/widgets/widgetWindows.js
+++ b/js/widgets/widgetWindows.js
@@ -305,16 +305,14 @@ function WidgetWindow(key, title) {
if (cRect.width === 0 || cRect.height === 0) {
// The canvas isn't shown so we set some approximate numbers
- this.setPosition(
- 200,
- 140
- )
+ this.setPosition(200, 140);
return this;
}
+ const navHeight = document.querySelector("nav").offsetHeight;
this.setPosition(
(cRect.width - fRect.width) / 2,
- (cRect.height - fRect.height) / 2
+ (cRect.height - fRect.height + navHeight) / 2
);
return this;