help modal added

A-S-T-U-C-E · Jun 24, 2020 · 32daa30 · 32daa30
1 parent 75c3f40
commit 32daa30
Show file tree

Hide file tree

Showing 13 changed files with 172 additions and 5 deletions.
diff --git a/S4E/css/S4E.css b/S4E/css/S4E.css
@@ -60,6 +60,7 @@
     background: #FFCC00;
     color: #03234B;
     font-size: x-large;
+    width: 32px;
 }
 .CLI {
     margin: 5px;

diff --git a/css/UI.css b/css/UI.css
@@ -154,6 +154,25 @@ td.tabMiddle {
     font-size: x-large;
     color: #FFFFFF;
 }
+/* Help modal */
+#helpModal {
+    background-color: #ebebeb;
+    border: 1px solid black;
+    padding: 1em;
+    position: absolute;
+    z-index: 9;
+    text-align: center;
+    width: 500px;
+    height: auto;
+}
+#helpModal_header {
+    padding: 5px;
+    cursor: move;
+    z-index: 10;
+    background-color: #2196F3;
+    color: #fff;
+}
+
 
 /* Content blocks */
 .content_wrapper {

diff --git a/css/keyboard_nav.css b/css/keyboard_nav.css
@@ -10,7 +10,7 @@
  */
 
 #keyboard_nav {
-    background-color: #ededed;
+    background-color: #ebebeb;
     border: 1px solid black;
     padding: 1em;
     position: absolute;

diff --git a/index.html b/index.html
@@ -90,7 +90,7 @@
                                 <i class="fas fa-power-off"></i>
                             </span>
                         </button>
-                        <button id="helpButton" class="iconButtons" onclick="window.location.href = 'https://github.com/SebCanet/Studio4Education'">
+                        <button id="helpButton" class="iconButtons" onclick="toggleDisplayHelpModal()">
                             <span id="helpButton_span">
                                 <i class="fas fa-question"></i>
                             </span>
@@ -129,6 +129,14 @@
                 </tr>
             </table>
         </div>
+        <div id="helpModal">
+            <div id="helpModal_header">
+                <span id="helpModalSpan_title"></span>
+            </div>
+            <div id="helpModal_text">
+                <span id="helpModalSpan_text"></span>
+            </div>
+        </div>
         <div id="keyboard_nav">
             <div id="keyboard_nav_header">
                 <span id="keyMappingModalSpan"></span>

diff --git a/js/buttons_functions.js b/js/buttons_functions.js
@@ -312,4 +312,25 @@ Code.changeRenderingConstant = function (value) {
     }
     // Refresh theme.
     Blockly.getMainWorkspace().setTheme(Blockly.getMainWorkspace().getTheme());
-};
+};
+
+
+/**
+ * Hide/show the help modal.
+ * @param {boolean} state The state of the checkbox. True if checked, false
+ *     otherwise.
+ */
+ var HelpModalDisplay_ = false;
+
+function toggleDisplayHelpModal() {
+    if (!HelpModalDisplay_) {
+        document.getElementById('helpModal').style.display = 'block';
+        document.getElementById('helpModal').style.left = (top.innerWidth - document.getElementById('helpModal').offsetWidth) / 2 + "px";
+        document.getElementById('helpModal').style.top = (top.innerHeight - document.getElementById('helpModal').offsetHeight) / 2 + "px";
+        helpButton.className = 'iconButtonsClicked';
+    } else {
+        document.getElementById('helpModal').style.display = 'none';
+        helpButton.className = 'iconButtons';
+    }
+    HelpModalDisplay_ = !HelpModalDisplay_;
+}
diff --git a/js/dialog.js b/js/dialog.js
@@ -10,9 +10,11 @@
  */
 
 /*
- * Make the DIV element draggable-keyboard-dialog draggable
+ * Make the DIV element draggable
  */
 dragElement(document.getElementById("keyboard_nav"));
+dragElement(document.getElementById("helpModal"));
+
 function dragElement(elmnt) {
     var pos1 = 0,
             pos2 = 0,

diff --git a/js/init.js b/js/init.js
@@ -304,6 +304,8 @@ Code.initLanguage = function () {
     document.getElementById('resetButton').title = MSG['resetButton_span'];
     document.getElementById('lateral-panel-setup-label').title = MSG['setup_sideButton_span'];
     document.getElementById('helpButton').title = MSG['helpButton_span'];
+    document.getElementById('helpModalSpan_title').innerHTML = MSG['helpModalSpan_title'];
+    document.getElementById('helpModalSpan_text').innerHTML = MSG['helpModalSpan_text'];
     document.getElementById('copyCodeButton').title = MSG['copyCodeButton_span'];
     document.getElementById('keyMappingModalSpan').textContent = MSG['keyMappingModalSpan'];
     document.getElementById('detailedCompilation_span').textContent = MSG['detailedCompilation_span'];

diff --git a/msg/UI_ca.js b/msg/UI_ca.js
@@ -45,6 +45,25 @@ var MSG = {
     loadXML_error_span: "Error parsing XML:\n",
     resetButton_span: "Restableix BlocklyDuino",
     helpButton_span: "ajuda",
+    helpModalSpan_title: "Help - About",
+    helpModalSpan_text:
+        '<table>' +
+        '<tbody>' +
+        '<tr>' +
+        '<td style="width: 142px;"><img src="https://raw.githubusercontent.com/A-S-T-U-C-E/STudio4Education/master/S4E/media/logo_only.png" alt="" width="129" height="144" /></td>' +
+        '<td>' +
+        '<p style="text-align: left;"><strong>STudio4Education</strong></p>' +
+        '<p style="text-align: left;">Designed for <strong>Arrowhead</strong> Tools Project (<a href="https://www.arrowhead.eu/arrowheadtools" rel="nofollow">https://www.arrowhead.eu/arrowheadtools</a>), STudio4Education is a <strong>web-based visual programming editor for <a href="https://www.st.com" rel="nofollow">ST microelectronics</a></strong> boards, thanks to <a href="https://developers.google.com/blockly/" rel="nofollow">Blockly</a>, the web-based, graphical programming editor.</p>' +
+        '<p style="text-align: left;">STudio4Education provides static type language blocks and code generators for simple C programming.</p>' +
+        '</td>' +
+        '</tr>' +
+        '</tbody>' +
+        '</table>' +
+        '<p style="text-align: left;">Accessibility: <a href="https://github.com/A-S-T-U-C-E/STudio4Education#accessibility">online documentation</a>.</p>' +
+        '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
+        '<p style="text-align: left;">Wiki : <a href="https://github.com/A-S-T-U-C-E/STudio4Education/wiki">on Github</a>.</p>' +
+        '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/A-S-T-U-C-E/STudio4Education/issues">on Github</a>.</p>' +
+        '<p style="text-aligne left;">v0.8.0',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "Copia codi a  porta-retalls",
     accessibilitySpan: "habilita mode accessibilitat (Shift + Ctrl + K):",

diff --git a/msg/UI_de.js b/msg/UI_de.js
@@ -45,6 +45,25 @@ var MSG = {
     loadXML_error_span: "Error parsing XML:\n",
     resetButton_span: "Reset BlocklyDuino",
     helpButton_span: "About",
+    helpModalSpan_title: "Help - About",
+    helpModalSpan_text:
+        '<table>' +
+        '<tbody>' +
+        '<tr>' +
+        '<td style="width: 142px;"><img src="https://raw.githubusercontent.com/A-S-T-U-C-E/STudio4Education/master/S4E/media/logo_only.png" alt="" width="129" height="144" /></td>' +
+        '<td>' +
+        '<p style="text-align: left;"><strong>STudio4Education</strong></p>' +
+        '<p style="text-align: left;">Designed for <strong>Arrowhead</strong> Tools Project (<a href="https://www.arrowhead.eu/arrowheadtools" rel="nofollow">https://www.arrowhead.eu/arrowheadtools</a>), STudio4Education is a <strong>web-based visual programming editor for <a href="https://www.st.com" rel="nofollow">ST microelectronics</a></strong> boards, thanks to <a href="https://developers.google.com/blockly/" rel="nofollow">Blockly</a>, the web-based, graphical programming editor.</p>' +
+        '<p style="text-align: left;">STudio4Education provides static type language blocks and code generators for simple C programming.</p>' +
+        '</td>' +
+        '</tr>' +
+        '</tbody>' +
+        '</table>' +
+        '<p style="text-align: left;">Accessibility: <a href="https://github.com/A-S-T-U-C-E/STudio4Education#accessibility">online documentation</a>.</p>' +
+        '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
+        '<p style="text-align: left;">Wiki : <a href="https://github.com/A-S-T-U-C-E/STudio4Education/wiki">on Github</a>.</p>' +
+        '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/A-S-T-U-C-E/STudio4Education/issues">on Github</a>.</p>' +
+        '<p style="text-aligne left;">v0.8.0',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "copy code to clipboard",
     accessibilitySpan: "Enable Accessibility Mode (Shift + Ctrl + K):",

diff --git a/msg/UI_en.js b/msg/UI_en.js
@@ -45,6 +45,25 @@ var MSG = {
     loadXML_error_span: "Error parsing XML:\n",
     resetButton_span: "Reset BlocklyDuino",
     helpButton_span: "help",
+    helpModalSpan_title: "Help - About",
+    helpModalSpan_text:
+        '<table>' +
+        '<tbody>' +
+        '<tr>' +
+        '<td style="width: 142px;"><img src="https://raw.githubusercontent.com/A-S-T-U-C-E/STudio4Education/master/S4E/media/logo_only.png" alt="" width="129" height="144" /></td>' +
+        '<td>' +
+        '<p style="text-align: left;"><strong>STudio4Education</strong></p>' +
+        '<p style="text-align: left;">Designed for <strong>Arrowhead</strong> Tools Project (<a href="https://www.arrowhead.eu/arrowheadtools" rel="nofollow">https://www.arrowhead.eu/arrowheadtools</a>), STudio4Education is a <strong>web-based visual programming editor for <a href="https://www.st.com" rel="nofollow">ST microelectronics</a></strong> boards, thanks to <a href="https://developers.google.com/blockly/" rel="nofollow">Blockly</a>, the web-based, graphical programming editor.</p>' +
+        '<p style="text-align: left;">STudio4Education provides static type language blocks and code generators for simple C programming.</p>' +
+        '</td>' +
+        '</tr>' +
+        '</tbody>' +
+        '</table>' +
+        '<p style="text-align: left;">Accessibility: <a href="https://github.com/A-S-T-U-C-E/STudio4Education#accessibility">online documentation</a>.</p>' +
+        '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
+        '<p style="text-align: left;">Wiki : <a href="https://github.com/A-S-T-U-C-E/STudio4Education/wiki">on Github</a>.</p>' +
+        '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/A-S-T-U-C-E/STudio4Education/issues">on Github</a>.</p>' +
+        '<p style="text-aligne left;">v0.8.0',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "copy code to clipboard",
     accessibilitySpan: "enable Accessibility Mode (Shift + Ctrl + K):",
@@ -86,7 +105,7 @@ var MSG = {
     optionFontSizeBlocks: "Blocks Font Size",
     optionFontSizePage: "Page Font Size",
     optionFontSpacingPage: "Page Font Spacing",
-    keyMappingExplanationSpan: "accessibility: <a href='https://github.com/BlocklyDuino/BlocklyDuino-v2' target='_blank'>online documentation</a>",
+    keyMappingExplanationSpan: "accessibility: <a href='https://github.com/A-S-T-U-C-E/STudio4Education#accessibility' target='_blank'>online documentation</a>",
     //CLI_functions.js
     config_sideButton_span: "Arduino CLI control",
     CLI_githubLinkButton_span: "documentation",

diff --git a/msg/UI_es.js b/msg/UI_es.js
@@ -45,6 +45,25 @@ var MSG = {
     loadXML_error_span: "Error parsing XML:\n",
     resetButton_span: "Restablece BlocklyDuino",
     helpButton_span: "ayuda",
+    helpModalSpan_title: "Help - About",
+    helpModalSpan_text:
+        '<table>' +
+        '<tbody>' +
+        '<tr>' +
+        '<td style="width: 142px;"><img src="https://raw.githubusercontent.com/A-S-T-U-C-E/STudio4Education/master/S4E/media/logo_only.png" alt="" width="129" height="144" /></td>' +
+        '<td>' +
+        '<p style="text-align: left;"><strong>STudio4Education</strong></p>' +
+        '<p style="text-align: left;">Designed for <strong>Arrowhead</strong> Tools Project (<a href="https://www.arrowhead.eu/arrowheadtools" rel="nofollow">https://www.arrowhead.eu/arrowheadtools</a>), STudio4Education is a <strong>web-based visual programming editor for <a href="https://www.st.com" rel="nofollow">ST microelectronics</a></strong> boards, thanks to <a href="https://developers.google.com/blockly/" rel="nofollow">Blockly</a>, the web-based, graphical programming editor.</p>' +
+        '<p style="text-align: left;">STudio4Education provides static type language blocks and code generators for simple C programming.</p>' +
+        '</td>' +
+        '</tr>' +
+        '</tbody>' +
+        '</table>' +
+        '<p style="text-align: left;">Accessibility: <a href="https://github.com/A-S-T-U-C-E/STudio4Education#accessibility">online documentation</a>.</p>' +
+        '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
+        '<p style="text-align: left;">Wiki : <a href="https://github.com/A-S-T-U-C-E/STudio4Education/wiki">on Github</a>.</p>' +
+        '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/A-S-T-U-C-E/STudio4Education/issues">on Github</a>.</p>' +
+        '<p style="text-aligne left;">v0.8.0',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "Copia código a  portapapeles",
     accessibilitySpan: "habilita modo accesibilidad (Shift + Ctrl + K):",

diff --git a/msg/UI_fr.js b/msg/UI_fr.js
@@ -45,6 +45,25 @@ var MSG = {
     loadXML_error_span: "Erreur dans le fichier Blockly :\n",
     resetButton_span: "réinitialiser BlocklyDuino",
     helpButton_span: "aide",
+    helpModalSpan_title: "Aide",
+    helpModalSpan_text:
+        '<table>' +
+        '<tbody>' +
+        '<tr>' +
+        '<td style="width: 142px;"><img src="https://raw.githubusercontent.com/A-S-T-U-C-E/STudio4Education/master/S4E/media/logo_only.png" alt="" width="129" height="144" /></td>' +
+        '<td>' +
+        '<p style="text-align: left;"><strong>STudio4Education</strong></p>' +
+        '<p style="text-align: left;">Créé pour le projet <strong>Arrowhead</strong> (<a href="https://www.arrowhead.eu/arrowheadtools" rel="nofollow">https://www.arrowhead.eu/arrowheadtools</a>), STudio4Education est un <strong>programme web d\'édition et de programmation visuelle par blocs pour les cartes <a href="https://www.st.com" rel="nofollow">ST microelectronics</a></strong>, il est basé sur <a href="https://developers.google.com/blockly/" rel="nofollow">Blockly</a>, l\'éditeur graphique de programmation en ligne.</p>' +
+        '<p style="text-align: left;">STudio4Education fournit un environnement de programmation par blocs et leurs traductions en code C.</p>' +
+        '</td>' +
+        '</tr>' +
+        '</tbody>' +
+        '</table>' +
+        '<p style="text-align: left;">Accessibilité : <a href="https://github.com/A-S-T-U-C-E/STudio4Education#accessibility">documentation en ligne</a>.</p>' +
+        '<p style="text-align: left;">Documentation officielle : <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">développeurs Blockly</a>.</p>' +
+        '<p style="text-align: left;">Wiki : <a href="https://github.com/A-S-T-U-C-E/STudio4Education/wiki">on Github</a>.</p>' +
+        '<p style="text-align: left;">Un bug ? Merci d\'écrire ici : <a href="https://github.com/A-S-T-U-C-E/STudio4Education/issues">sur Github</a>.</p>' +
+        '<p style="text-aligne left;">v0.8.0',
     editorReadOnlyToggle_span: "éditeur de code en lecture seule ou non",
     copyCodeButton_span: "copier le code dans le presse papiers",
     accessibilitySpan: "activer le contrôle clavier (Shift + Ctrl + K) :",

diff --git a/msg/UI_ja.js b/msg/UI_ja.js
@@ -45,6 +45,25 @@ var MSG = {
     loadXML_error_span: "Error parsing XML:\n",
     resetButton_span: "Reset BlocklyDuino",
     helpButton_span: "About",
+    helpModalSpan_title: "Help - About",
+    helpModalSpan_text:
+        '<table>' +
+        '<tbody>' +
+        '<tr>' +
+        '<td style="width: 142px;"><img src="https://raw.githubusercontent.com/A-S-T-U-C-E/STudio4Education/master/S4E/media/logo_only.png" alt="" width="129" height="144" /></td>' +
+        '<td>' +
+        '<p style="text-align: left;"><strong>STudio4Education</strong></p>' +
+        '<p style="text-align: left;">Designed for <strong>Arrowhead</strong> Tools Project (<a href="https://www.arrowhead.eu/arrowheadtools" rel="nofollow">https://www.arrowhead.eu/arrowheadtools</a>), STudio4Education is a <strong>web-based visual programming editor for <a href="https://www.st.com" rel="nofollow">ST microelectronics</a></strong> boards, thanks to <a href="https://developers.google.com/blockly/" rel="nofollow">Blockly</a>, the web-based, graphical programming editor.</p>' +
+        '<p style="text-align: left;">STudio4Education provides static type language blocks and code generators for simple C programming.</p>' +
+        '</td>' +
+        '</tr>' +
+        '</tbody>' +
+        '</table>' +
+        '<p style="text-align: left;">Accessibility: <a href="https://github.com/A-S-T-U-C-E/STudio4Education#accessibility">online documentation</a>.</p>' +
+        '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
+        '<p style="text-align: left;">Wiki : <a href="https://github.com/A-S-T-U-C-E/STudio4Education/wiki">on Github</a>.</p>' +
+        '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/A-S-T-U-C-E/STudio4Education/issues">on Github</a>.</p>' +
+        '<p style="text-aligne left;">v0.8.0',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "copy code to clipboard",
     accessibilitySpan: "Enable Accessibility Mode (Shift + Ctrl + K):",