Rewrote toolbox toggle visibility button:

Due to logic implementation the old version had an ugly effect at the point where the toolbar scrolled up and the button background appeared.
Now it scales back up to the button position and has a softer background fade effect.
Moved all the layout control into the ardublockly_design.js file as it all deals with the front end design.
Logic code still in main ardublockly.js file, but much simple implementation.
If there were any error loading the page the visibility icon would awkwardly stand in the workspace corner, now it is only displayed together with the Blockly workspace.

ardublockly/ardublockly.css

@@ -96,7 +96,7 @@ ul.side-nav li.side-menu-end {
 }
 
 /************************************/
-/*  Blocks, arduino, and xml areas  */
+/*  Blocks, Arduino, and XML areas  */
 /************************************/
 .content {
   margin: 0;
@@ -160,7 +160,6 @@ ul.side-nav li.side-menu-end {
   height: calc(100vh - 486px);          /* Standard */
 }
 
-
 /* The materialize framework changes height of the div to show or hide */
 /* the collapsible elements. */
 #content_arduino {
@@ -327,6 +326,9 @@ ul.side-nav li.side-menu-end {
   background-color: #00979C;  /* Arduino teal */
   visibility: hidden;
   opacity: 0;
+  -moz-transition: visibility 0.3s linear, opacity 0.3s linear;
+  -webkit-transition: visibility 0.3s linear, opacity 0.3s linear;
+  -o-transition: visibility 0.3s linear, opacity 0.3s linear;
   transition: visibility 0.3s linear, opacity 0.3s linear;
 }
 #button_verify:hover {
@@ -340,6 +342,9 @@ ul.side-nav li.side-menu-end {
   background-color: rgba(255, 204, 51, 1);  /* Arduino yellow */
   visibility: hidden;
   opacity: 0;
+  -moz-transition: visibility 0.3s linear, opacity 0.3s linear;
+  -webkit-transition: visibility 0.3s linear, opacity 0.3s linear;
+  -o-transition: visibility 0.3s linear, opacity 0.3s linear;
   transition: visibility 0.3s linear, opacity 0.3s linear;
 }
 #button_open_ide:hover {
@@ -372,6 +377,7 @@ ul.side-nav li.side-menu-end {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
+/* Toggle the toolbox on and off button */
 .button_toggle_toolbox_on {
   position: absolute;
   margin: 0 !important;
@@ -389,6 +395,10 @@ ul.side-nav li.side-menu-end {
   -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
+  transition: background 0.3s linear, box-shadow 0.3s linear, border-width 0.3s linear;
+  -ms-transition: background 0.3s linear, box-shadow 0.3s linear, border-width 0.3s linear;
+  -moz-transition: background 0.3s linear, -moz-box-shadow 0.3s linear, border-width 0.3s linear;
+  -webkit-transition: background 0.3s linear, -webkit-box-shadow 0.3s linear, border-width 0.3s linear;
 }
 .button_toggle_toolbox_off {
   position: absolute;
@@ -400,6 +410,7 @@ ul.side-nav li.side-menu-end {
   z-index: 5;
 }
 
+
 /*************************/
 /*  New spinner colours  */
 /*************************/
@@ -629,6 +640,7 @@ ul.side-nav li.side-menu-end {
   -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  overflow: hidden !important;
 }
 .blocklyTreeRoot {
   background: none !important;

ardublockly/ardublockly.js

@@ -23,9 +23,9 @@ window.addEventListener('load', function load(event) {
 
   ArduinoMaterial.designJsInit();
 
-  ArduinoMaterial.bindDesignEventListeners_();
+  ArduinoMaterial.bindDesignEventListeners();
   ArduinoMaterial.bindActionFunctions_();
-  ArduinoMaterial.bindBlocklyEventListeners_();
+  ArduinoMaterial.bindBlocklyEventListeners();
 
   // Check if not running locally (including developer's local network IP)
   if (document.location.hostname != 'localhost' &&
@@ -49,7 +49,7 @@ ArduinoMaterial.bindActionFunctions_ = function() {
   // Navigation buttons
   ArduinoMaterial.bindClick_('button_load', ArduinoMaterial.loadUserXmlFile);
   ArduinoMaterial.bindClick_('button_save', ArduinoMaterial.saveXmlFileAs);
-  ArduinoMaterial.bindClick_('button_delete', ArduinoMaterial.discard);
+  ArduinoMaterial.bindClick_('button_delete', ArduinoMaterial.discardAllBlocks);
 
   // Side menu buttons, they also close the side menu
   ArduinoMaterial.bindClick_('menu_load', function() {
@@ -61,7 +61,7 @@ ArduinoMaterial.bindActionFunctions_ = function() {
       $('.button-collapse').sideNav('hide');
     });
   ArduinoMaterial.bindClick_('menu_delete',  function() {
-      ArduinoMaterial.discard();
+      ArduinoMaterial.discardAllBlocks();
       $('.button-collapse').sideNav('hide');
     });
   ArduinoMaterial.bindClick_('menu_settings', function() {
@@ -100,20 +100,6 @@ ArduinoMaterial.bindActionFunctions_ = function() {
   });
 };
 
-/**
- * Binds the event listeners relevant to Blockly.
- * @private
- */
-ArduinoMaterial.bindBlocklyEventListeners_ = function() {
-  // Renders the code and XML for every Blockly workspace event
-  // As the toolbox inject is asynchronous we need to wait
-  if (ArduinoMaterial.BLOCKLY_INJECTED == false) {
-    setTimeout(ArduinoMaterial.bindBlocklyEventListeners_, 50);
-  } else {
-    ArduinoMaterial.workspace.addChangeListener(ArduinoMaterial.renderContent);
-  }
-};
-
 /**
  * Loads an XML file from the server and adds the blocks into the Blockly
  * workspace.
@@ -487,17 +473,15 @@ ArduinoMaterial.renderContent = function() {
 ArduinoMaterial.TOOLBAR_SHOWING_ = true;
 
 /**
- * Toggles the toolbox and respective button On and Off
+ * Toggles the blockly toolbox and the Ardublockly toolbox button On and Off.
+ * Uses namespace member variable TOOLBAR_SHOWING_ to toggle state.
  */
 ArduinoMaterial.toogleToolbox = function() {
-  if (ArduinoMaterial.TOOLBAR_SHOWING_ == true ) {
-    // showToolbox() takes a callback function as its second argument
-    ArduinoMaterial.showToolbox(false, 
-        function() { ArduinoMaterial.showToolboxButtonState(false); });
-    ArduinoMaterial.workspace.toolbox_.flyout_.hide();
+  if (ArduinoMaterial.TOOLBAR_SHOWING_) {
+    ArduinoMaterial.blocklyCloseToolbox();
+    ArduinoMaterial.displayToolbox(false);
   } else {
-    ArduinoMaterial.showToolboxButtonState(true);
-    ArduinoMaterial.showToolbox(true);
+    ArduinoMaterial.displayToolbox(true);
   }
   ArduinoMaterial.TOOLBAR_SHOWING_ = !ArduinoMaterial.TOOLBAR_SHOWING_;
 };

ardublockly/ardublockly_blockly.js

@@ -64,9 +64,28 @@ ArduinoMaterial.injectBlockly = function(blocklyEl, toolboxPath) {
   }
 };
 
+/**
+ * Binds the event listeners relevant to Blockly.
+ */
+ArduinoMaterial.bindBlocklyEventListeners = function() {
+  // As the toolbox inject is asynchronous we need to wait until done
+  if (ArduinoMaterial.BLOCKLY_INJECTED == false) {
+    setTimeout(ArduinoMaterial.bindBlocklyEventListeners, 50);
+  } else {
+    // All event listener should be bind in this else statement
+    // Renders the code and XML for every Blockly workspace event
+    ArduinoMaterial.workspace.addChangeListener(ArduinoMaterial.renderContent);
+  }
+};
+
 /**
  * Loads an XML file from the server and adds the blocks into the Blockly
  * workspace.
+ * @param {!string} xmlFile XML file path in a reachable server (no local path).
+ * @param {!function} callbackFileLoaded Function to be called once the file is
+ *                                       loaded.
+ * @param {!function} callbackConectonError Function to be called if there is a
+ *                                          connection error to the XML server.
  */
 ArduinoMaterial.loadXmlBlockFile = function(xmlFile, callbackFileLoaded, 
     callbackConectonError) {
@@ -97,7 +116,7 @@ ArduinoMaterial.loadXmlBlockFile = function(xmlFile, callbackFileLoaded,
 };
 
 /**
- * Renders the Arduino color highlighted code code into an element.
+ * Generates the Arduino code from the Blockly workspace.
  * @return {!string} Arduino code string.
  */
 ArduinoMaterial.generateArduino = function() {
@@ -105,7 +124,7 @@ ArduinoMaterial.generateArduino = function() {
 };
 
 /**
- * Renders the XML code into a given text area.
+ * Generates the XML DOM and returns it as a string.
  * @return {!string} XML code string.
  */
 ArduinoMaterial.generateXml = function() {
@@ -115,8 +134,8 @@ ArduinoMaterial.generateXml = function() {
 };
 
 /**
- * Parses the XML from its input to generate and replace the blocks in the
- * Blockly workspace.
+ * Parses the XML from its argument input to generate and replace the blocks
+ * in the Blockly workspace.
  * @param {!string} blocksXml String of XML code for the blocks.
  * @return {!boolean} Indicates if the XML into blocks parse was successful.
  */
@@ -136,7 +155,8 @@ ArduinoMaterial.replaceBlocksfromXml = function(blocksXml) {
 };
 
 /**
- * Parses the XML from its input to generate and add blocks to the workspace.
+ * Parses the XML from its argument input to generate and add blocks to the
+ * Blockly workspace.
  * @param {!string} blocksXmlDom String of XML DOM code for the blocks.
  * @return {!boolean} Indicates if the XML into blocks parse was successful.
  */
@@ -150,32 +170,29 @@ ArduinoMaterial.loadBlocksfromXmlDom = function(blocksXmlDom) {
 };
 
 /**
- * Scrolls In or Out the toolbox from the Blockly workspace.
- * As the jQuery animation takes some time a callback is used to continue
- * operation.
+ * Displays or hides the toolbox from the Blockly workspace with a slide
+ * animation.
  * @param {!boolean} show Indicates to show or hide the toolbox.
- * @param {function=} callback Function to be called once the animation is
- *                             finished.
  */
-ArduinoMaterial.showToolbox = function(show, callback) {
-  var resizeWorkspaceAndCallback = function() {
-    ArduinoMaterial.workspace.render(); 
-    if (callback && ((typeof callback) === (typeof Function))) {
-      callback();
-    }
-  };
-
-  if (show == false) {
-    $('.blocklyToolboxDiv').slideUp(300, resizeWorkspaceAndCallback);
+ArduinoMaterial.showToolbox = function(show) {
+  if (show) {
+    //var contentBlocks = document.getElementById('content_blocks');
+    //$('.blocklyToolboxDiv')[0].style.height = contentBlocks.style.height;
+    //$('.blocklyToolboxDiv')[0].style.overflowY = 'auto';
+    $('.blocklyToolboxDiv').slideDown(300);
+    //resizeWorkspaceAndCallback();
   } else {
-    $('.blocklyToolboxDiv').slideDown(300, resizeWorkspaceAndCallback);
+    //$('.blocklyToolboxDiv')[0].style.overflowY = 'hidden';
+    //$('.blocklyToolboxDiv')[0].style.height = "38px";
+    $('.blocklyToolboxDiv').slideUp(300);
+    //resizeWorkspaceAndCallback();
   }
 };
 
 /**
  * Discard all blocks from the workspace.
  */
-ArduinoMaterial.discard = function() {
+ArduinoMaterial.discardAllBlocks = function() {
   var blockCount = ArduinoMaterial.workspace.getAllBlocks().length;
   if (blockCount == 1) {
     ArduinoMaterial.workspace.clear();
@@ -193,6 +210,13 @@ ArduinoMaterial.discard = function() {
   }
 };
 
+/**
+ * Closes the toolbox block container sub-menu.
+ */
+ArduinoMaterial.blocklyCloseToolbox = function() {
+  ArduinoMaterial.workspace.toolbox_.flyout_.hide();
+};
+
 /**
  * Checks if Blockly is currently dragging a block.
  */

ardublockly/ardublockly_design.js

@@ -2,8 +2,7 @@
  * @license Licensed under the Apache License, Version 2.0 (the "License"):
  *          http://www.apache.org/licenses/LICENSE-2.0
  *
- * @fileoverview JavaScript to configure front end design for the Arduino app
- *               with material design.
+ * @fileoverview JavaScript to configure front end design for Ardublockly app.
  */
 'use strict';
 
@@ -23,47 +22,52 @@ ArduinoMaterial.designJsInit = function() {
 };
 
 /**
- * Initialises the js/jQuery required for the materialize framework.
+ * Initialises all required components from materialize framework.
+ * The be executed on document ready.
  */
 ArduinoMaterial.materializeJsInit = function() {
-  $(document).ready(function() {
-    // Navigation bar
-    $('.button-collapse').sideNav({
-        menuWidth: 240,
-        activationWidth: 70,
-        edge: 'left'});
-    // Drop down menus
-    $('.dropdown-button').dropdown({hover: false});
-    // Overlay content panels using modals (android dialogs)
-    $('.modal-trigger').leanModal({
-        dismissible: true,
-        opacity: .5,
-        in_duration: 200,
-        out_duration: 250
-     });
-    // Pop-up tool tips
-    $('.tooltipped').tooltip({'delay': 50});
-    // Select menus
-    $('select').material_select();
-  });
+  // Navigation bar
+  $('.button-collapse').sideNav({
+      menuWidth: 240,
+      activationWidth: 70,
+      edge: 'left'});
+
+  // Drop down menus
+  $('.dropdown-button').dropdown({hover: false});
+
+  // Overlay content panels using modals (android dialogs)
+  $('.modal-trigger').leanModal({
+      dismissible: true,
+      opacity: .5,
+      in_duration: 200,
+      out_duration: 250
+   });
+
+  // Pop-up tool tips
+  $('.tooltipped').tooltip({'delay': 50});
+
+  // Select menus
+  $('select').material_select();
 };
 
 /**
  * Binds the event listeners relevant to the page design.
- * @private
  */
-ArduinoMaterial.bindDesignEventListeners_ = function() {
+ArduinoMaterial.bindDesignEventListeners = function() {
   // Resize blockly workspace on window resize
   window.addEventListener(
       'resize', ArduinoMaterial.resizeBlocklyWorkspace, false);
+
   // Display/hide the XML load button when the XML collapsible header is clicked
   document.getElementById('xml_collapsible_header').addEventListener(
       'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
+
   // Toggle the content height on click to the IDE output collapsible header
   document.getElementById('ide_output_collapsible_header').addEventListener(
       'click', function() {
         ArduinoMaterial.contentHeightToggle();
       });
+
   // Display/hide the additional IDE buttons when mouse over/out of play button
   $("#button_run").mouseenter(function () {
       ArduinoMaterial.showExtraIdeButtons(true);
@@ -74,7 +78,7 @@ ArduinoMaterial.bindDesignEventListeners_ = function() {
 };
 
 /**
- * Sets the spinner around the play button ON or OFF.
+ * Shows or hides the spinner around the play button.
  * @param {!boolean} active True turns ON the spinner, false OFF.
  */
 ArduinoMaterial.runButtonSpinner = function(active) {
@@ -95,19 +99,19 @@ ArduinoMaterial.runButtonSpinner = function(active) {
  * collapsible 'xml_collapsible_body'.
  */
 ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
-  var xmlButtonBody = document.getElementById('xml_collapsible_body');
-  // Waiting to check status due to the animation delay
+  var xmlCollapsibleBody = document.getElementById('xml_collapsible_body');
+  // Waiting 400 ms to check status due to the animation delay (300 ms)
   setTimeout(function() {
-    if (xmlButtonBody.style.display == 'none') {
+    if (xmlCollapsibleBody.style.display == 'none') {
       $('#button_load_xml').hide();
     } else {
       $('#button_load_xml').fadeIn('slow');
     } 
-  }, 500); 
+  }, 400);
 };
 
 /**
- * Displays or hides the addition Arduino IDE action buttons.
+ * Displays or hides the additional Arduino IDE action buttons.
  * Hide/display effects done with CCS3 transitions on visibility and opacity.
  * @param {!boolean} show Indicates if the extra buttons are to be shown.
  */
@@ -140,49 +144,80 @@ ArduinoMaterial.showExtraIdeButtons = function(show) {
 };
 
 /**
- * Sets the class and content of the toolbox View and Hide button.
- * @param {!boolean} toolboxVisible Indicates if the toolbox visibility.
+ * Sets the toolbox HTML element to be display or not and change the visibility
+ * button to reflect the new state.
+ * When the toolbox is visible it should display the "visibility-off" icon with
+ * no background, and the opposite when toolbox is hidden.
+ * @param {!boolean} show Indicates if the toolbox should be set visible.
  */
-ArduinoMaterial.showToolboxButtonState = function(toolboxVisible) {
-  var toolboxButton = document.getElementById('button_toggle_toolbox');
-  var toolboxButtonIcon = document.getElementById('button_toggle_toolbox_icon');
-  // Element contains several classes, use replace to maintain the rest
-  if (toolboxVisible == true) {
-    toolboxButton.className = toolboxButton.className.replace(
-        'button_toggle_toolbox_on', 'button_toggle_toolbox_off'); 
-    toolboxButtonIcon.className = toolboxButtonIcon.className.replace(
-       'mdi-action-visibility', 'mdi-action-visibility-off');
+ArduinoMaterial.displayToolbox = function(show) {
+  var toolbox = $('.blocklyToolboxDiv');
+  var button = document.getElementById('button_toggle_toolbox');
+  var buttonIcon = document.getElementById('button_toggle_toolbox_icon');
+
+  // Because firing multiple clicks can confuse the animation, create an overlay
+  // element to stop clicks (due to materialize framework this is better than to
+  // mess with the button event listeners).
+  var elLocation = $('#button_toggle_toolbox').offset();
+  jQuery('<div/>', {
+      id: 'toolboxButtonScreen',
+      css: {
+          position: 'fixed',
+          top: elLocation.top,
+          left: elLocation.left,
+          height: $('#button_toggle_toolbox').height(),
+          width: $('#button_toggle_toolbox').width(),
+          cursor: 'pointer',
+          zIndex: 12
+      },
+  }).appendTo('body');
+
+  var classOn = 'button_toggle_toolbox_on';
+  var classOff = 'button_toggle_toolbox_off';
+  var visOn = 'mdi-action-visibility';
+  var visOff = 'mdi-action-visibility-off';
+  if (show) {
+    toolbox.show();
+    button.className = button.className.replace(classOn, classOff);
+    buttonIcon.className = buttonIcon.className.replace(visOn, visOff);
+    toolbox.animate(
+        {height: document.getElementById('content_blocks').style.height}, 300,
+        function() { $('#toolboxButtonScreen').remove(); });
   } else {
-    toolboxButton.className = toolboxButton.className.replace(
-        'button_toggle_toolbox_off', 'button_toggle_toolbox_on'); 
-    toolboxButtonIcon.className = toolboxButtonIcon.className.replace(
-        'mdi-action-visibility-off', 'mdi-action-visibility');
+    buttonIcon.className = buttonIcon.className.replace(visOff, visOn);
+    toolbox.animate({height: 38}, 300, function() {
+      button.className = button.className.replace(classOff, classOn);
+      toolbox.fadeOut(350, 'linear', function() {
+        $('#toolboxButtonScreen').remove();
+      });
+    });
   }
 };
 
 /**
- * Resizes the toolbox button to toggle its visibility to the width of the
+ * Resizes the button to toggle the toolbox visibility to the width of the
  * toolbox.
  * The toolbox width does not change with workspace width, so safe to do once,
  * but it needs to be done after blockly has been injected.
- * @private
  */
 ArduinoMaterial.resizeToggleToolboxBotton = function() {
   // As the toolbox inject is asynchronous we need to wait
   if (ArduinoMaterial.BLOCKLY_INJECTED == false) {
     setTimeout(ArduinoMaterial.resizeToggleToolboxBotton, 50);
   } else {
+    var button = $('#button_toggle_toolbox');
     // Sets the toolbox toggle button width to that of the toolbox
     if ( ArduinoMaterial.isToolboxVisible() &&
          ArduinoMaterial.workspace.toolbox_.width ) {
       // For some reason normal set style and getElementById didn't work
-      $('#button_toggle_toolbox').width(ArduinoMaterial.workspace.toolbox_.width);
+      button.width(ArduinoMaterial.workspace.toolbox_.width);
+      button[0].style.display = '';
     }
   }
 };
 
 /**
- * Resizes the container for Blockly. 
+ * Resizes the container for Blockly.
  */
 ArduinoMaterial.resizeBlocklyWorkspace = function() {
   var contentBlocks = document.getElementById('content_blocks');
@@ -229,8 +264,8 @@ ArduinoMaterial.materialAlert = function(title, body, confirm, callback) {
 };
 
 /**
- * Populates the Arduino IDE output content area and visually highlights it
- * to call for the user attention.
+ * Populates the Arduino IDE output content area and triggers the visual
+ * highlight to call for the user attention.
  * @param {!element} bodyEl HTML to include into IDE output content area.
  */
 ArduinoMaterial.arduinoIdeOutput = function(bodyEl) {
@@ -264,8 +299,7 @@ ArduinoMaterial.containerFullWidth = function() {
  */
 ArduinoMaterial.sketchNameSizeEffect = function() {
   var resizeInput = function() {
-    var inputSize = ($(this).val().length > 1) ? ($(this).val().length - 1) : 1;
-    $(this).attr('size', inputSize);
+    $(this).attr('size', $(this).val().length);
   };
 
   var correctInput = function() {

ardublockly/index.html

@@ -105,7 +105,7 @@
     <div class="row">
       <div class="col s12 m12 l8" style="position:relative">
         <!-- Toolbox visibility button -->
-        <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
+        <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off" style="display: none"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
         <!-- Arduino IDE action buttons -->
         <div id="ide_buttons_wrapper">
           <a id="button_open_ide" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half"><i class="mdi-action-open-in-browser"></i></a>