Update front end desktop environment to use modals instead of window.prompt.

ardublockly/ardublockly.css

@@ -513,9 +513,12 @@ ul.side-nav li.side-menu-end {
 
 /* Small modal responsive design */
 .modal_small {
-  height: 30% !important;
+  height: auto !important;
   min-height: 200px;
 }
+.modal_small input {
+  width: 100%;
+}
 @media only screen and (min-width: 0) {
   .modal_small {
     max-width: 75% !important;

ardublockly/ardublockly_desktop.js

@@ -52,6 +52,27 @@ Ardublockly.hideSideMenuButton = function() {
   sideMenuButton.style.display = 'none';
 };
 
+/**
+ * Launches a materialize modal as a text prompt 
+ * @param {string} message Main text message for the window prompt.
+ * @param {string=} defaultValue Input string to be displayed by default.
+ * @param {function} callback To process the user input.
+ */
+Ardublockly.htmlPrompt = function(message, defaultValue, callback) {
+  $('#gen_prompt_message').text('');
+  $('#gen_prompt_message').append(message);
+  $('#gen_prompt_input').val(defaultValue);
+  // Bind callback events to buttons
+  $('#gen_prompt_ok_link').bind('click', function() {
+    callback($('#gen_prompt_input').val());
+  });
+  $('#gen_prompt_cancel_link').bind('click', function() {
+    callback(null);
+  });
+  $('#gen_prompt').openModal();
+  window.location.hash = '';
+};
+
 /** Initialize Ardublockly code required for Electron on page load. */
 window.addEventListener('load', function load(event) {
   window.removeEventListener('load', load, false);
@@ -63,5 +84,9 @@ window.addEventListener('load', function load(event) {
     // Prevent browser zoom changes like pinch-to-zoom
     var webFrame = require('web-frame');
     webFrame.setZoomLevelLimits(1, 1);
+
+    // Electron does not offer a prompt, so replace Blocks version with modal
+    // Original signature: function(message, opt_defaultInput, opt_callback)
+    Blockly.prompt = Ardublockly.htmlPrompt;
   }
 });

ardublockly/index.html

@@ -253,6 +253,18 @@
     </div>
   </div>
 
+  <!-- Prompt: Content is loaded using JavaScript to display alerts -->
+  <div id="gen_prompt" class="modal modal_small modal-fixed-footer">
+    <div class="modal-content">
+      <p><span id="gen_prompt_message">Prompt message</span></p>
+      <p><input id="gen_prompt_input" value="test" /></p>
+    </div>
+    <div class="modal-footer">
+      <a id="gen_prompt_ok_link" href="#" class="waves-effect btn-flat modal-close">Okay</a>
+      <a id="gen_prompt_cancel_link" href="#" class="waves-effect btn-flat modal-close">Cancel</a>
+    </div>
+  </div>
+
   <!-- Local Server Alert to be shown if Ardublockly Server is not running. -->
   <div id="not_running_dialog" class="modal">
     <div class="modal-content">