From 728284ab6120ce5d80d0a34a2a0bba550d23f5c7 Mon Sep 17 00:00:00 2001
From: Neil Fraser <fraser@google.com>
Date: Fri, 14 Oct 2016 08:57:39 -0700
Subject: [PATCH] Disable options in readonly mode. (Block Factory)

---
 demos/blockfactory/app_controller.js          | 21 ++++-----
 demos/blockfactory/factory.css                |  7 +--
 demos/blockfactory/index.html                 | 44 ++++++++++++-------
 .../workspacefactory/wfactory_init.js         |  7 +--
 4 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/demos/blockfactory/app_controller.js b/demos/blockfactory/app_controller.js
index 5598ce62a..b556b4f8d 100644
--- a/demos/blockfactory/app_controller.js
+++ b/demos/blockfactory/app_controller.js
@@ -414,7 +414,8 @@ AppController.prototype.assignExporterChangeListeners = function() {
   // Checking the block definitions checkbox displays preview of code to export.
   document.getElementById('blockDefCheck').addEventListener('change',
       function(e) {
-        self.ifCheckedDisplay(blockDefCheck, ['blockDefs', 'blockDefSettings']);
+        self.ifCheckedEnable(blockDefCheck.checked,
+            ['blockDefs', 'blockDefSettings']);
       });
 
   // Preview updates when user selects different block definition format.
@@ -426,7 +427,8 @@ AppController.prototype.assignExporterChangeListeners = function() {
   // Checking the generator stub checkbox displays preview of code to export.
   document.getElementById('genStubCheck').addEventListener('change',
       function(e) {
-        self.ifCheckedDisplay(genStubCheck, ['genStubs', 'genStubSettings']);
+        self.ifCheckedEnable(genStubCheck.checked,
+            ['genStubs', 'genStubSettings']);
       });
 
   // Preview updates when user selects different generator stub language.
@@ -437,24 +439,23 @@ AppController.prototype.assignExporterChangeListeners = function() {
 };
 
 /**
- * If given checkbox is checked, display given elements. Otherwise, hide.
- * @param {!Element} checkbox Input element of type checkbox.
- * @param {!Array.<string>} idArray Array of element IDs to show when
- *    block is checked.
+ * If given checkbox is checked, enable the given elements.  Otherwise, disable.
+ * @param {boolean} enabled True if enabled, false otherwise.
+ * @param {!Array.<string>} idArray Array of element IDs to enable when
+ *    checkbox is checked.
  */
-AppController.prototype.ifCheckedDisplay = function(checkbox, idArray) {
+AppController.prototype.ifCheckedEnable = function(enabled, idArray) {
   for (var i = 0, id; id = idArray[i]; i++) {
     var element = document.getElementById(id);
-    if (checkbox.checked) {
+    if (enabled) {
       element.classList.remove('disabled');
     } else {
       element.classList.add('disabled');
     }
     var fields = element.querySelectorAll('input, textarea, select');
     for (var j = 0, field; field = fields[j]; j++) {
-      field.disabled = !checkbox.checked;
+      field.disabled = !enabled;
     }
-    //element.style.display = checkbox.checked ? 'block' : 'none';
   }
 };
 
diff --git a/demos/blockfactory/factory.css b/demos/blockfactory/factory.css
index ce8ebe319..fa99314bb 100644
--- a/demos/blockfactory/factory.css
+++ b/demos/blockfactory/factory.css
@@ -466,12 +466,13 @@ td.taboff:hover {
 
 #preload_div {
   display: table;
-  height: 70%;
-  margin-right: 5%;
+  height: 75%;
+  margin-left: 2%;
+  margin-right: 2%;
   max-height: 500px;
   overflow: hidden;
   overflow-y: scroll;
-  width: 35%;
+  width: 30%;
 }
 
 #shadowBlockDropdown {
diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html
index 66a8fd7c1..b76151b74 100644
--- a/demos/blockfactory/index.html
+++ b/demos/blockfactory/index.html
@@ -226,10 +226,16 @@
         </div>
         <div id="workspace_options">
           <label><input type="checkbox" id="option_readOnly_checkbox" class="optionsInput">Read Only</label><br>
-          <label><input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks</label><br>
-          <label><input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks</label><br>
+          <div id="readonly1">
+            <label><input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks</label><br>
+          </div>
+          <div id="readonly2">
+            <label><input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks</label><br>
+          </div>
           <label><input type="checkbox" id="option_css_checkbox" class="optionsInput">Use Blockly CSS</label><br>
-          <label><input type="checkbox" id="option_disable_checkbox" class="optionsInput">Disabled Blocks</label><br>
+          <div id="readonly3">
+            <label><input type="checkbox" id="option_disable_checkbox" class="optionsInput">Disabled Blocks</label><br>
+          </div>
           <label><input type="checkbox" id="option_grid_checkbox" class="optionsInput">Use Grid</label><br>
           <div id="grid_options" name="grid" style="display: none">
             <label>Spacing <input type="number" id="gridOption_spacing_number" class="optionsInput" value="0"></label><br>
@@ -237,25 +243,31 @@
             <label>Colour <input type="text" id="gridOption_colour_text" class="optionsInput" value="#888"></label><br>
             <label><input type="checkbox" id="gridOption_snap_checkbox" class="optionsInput" value="grid_snap_checkbox">Snap</label><br>
           </div>
-          <label><input type="checkbox" id="option_infiniteBlocks_checkbox" class="optionsInput" value="checked">Infinite Blocks</label><br>
-          <div id="maxBlockNumber_option" style="display: none">
-            <label>Max Blocks <input type="number" id="option_maxBlocks_number" class="optionsInput" value=100></label><br>
+          <div id="readonly4">
+            <label><input type="checkbox" id="option_infiniteBlocks_checkbox" class="optionsInput" value="checked">Infinite Blocks</label><br>
+            <div id="maxBlockNumber_option" style="display: none">
+              <label>Max Blocks <input type="number" id="option_maxBlocks_number" class="optionsInput" value=100></label><br>
+            </div>
           </div>
           <label>Path to Blockly Media <input type="text" id="option_media_text" class="optionsInput"></label><br>
           <label><input type="checkbox" id="option_rtl_checkbox" class="optionsInput">Layout with RTL</label><br>
           <label><input type="checkbox" id="option_scrollbars_checkbox" class="optionsInput">Scrollbars</label><br>
-          <label><input type="checkbox" id="option_sounds_checkbox" class="optionsInput">Sounds<br>
-          <div id="trashcan_option">
+          <div id="readonly5">
+            <label><input type="checkbox" id="option_sounds_checkbox" class="optionsInput">Sounds<br>
+          </div>
+          <div id="readonly6">
             <label><input type="checkbox" id="option_trashcan_checkbox" class="optionsInput">Trashcan</label><br>
           </div>
-          <label><input type="checkbox" id="option_zoom_checkbox" class="optionsInput">Zoom</label><br>
-          <div id="zoom_options" name="zoom" style="display: none">
-            <label><input type="checkbox" id="zoomOption_controls_checkbox" class="optionsInput">Zoom Controls</label><br>
-            <label><input type="checkbox" id="zoomOption_wheel_checkbox" class="optionsInput">Zoom Wheel</label><br>
-            <label>Start Scale <input type="number" id="zoomOption_startScale_number" class="optionsInput" name="startScale" value="1.0"></label><br>
-            <label>Max Scale <input type="number" id="zoomOption_maxScale_number" class="optionsInput" value="3"></label><br>
-            <label>Min Scale <input type="number" id="zoomOption_minScale_number" class="optionsInput" value="0.3"></label><br>
-            <label>Scale Speed <input type="number" id="zoomOption_scaleSpeed_number" class="optionsInput" value="1.2"></label><br>
+          <div id="readonly7">
+            <label><input type="checkbox" id="option_zoom_checkbox" class="optionsInput">Zoom</label><br>
+            <div id="zoom_options" name="zoom" style="display: none">
+              <label><input type="checkbox" id="zoomOption_controls_checkbox" class="optionsInput">Zoom Controls</label><br>
+              <label><input type="checkbox" id="zoomOption_wheel_checkbox" class="optionsInput">Zoom Wheel</label><br>
+              <label>Start Scale <input type="number" id="zoomOption_startScale_number" class="optionsInput" name="startScale" value="1.0"></label><br>
+              <label>Max Scale <input type="number" id="zoomOption_maxScale_number" class="optionsInput" value="3"></label><br>
+              <label>Min Scale <input type="number" id="zoomOption_minScale_number" class="optionsInput" value="0.3"></label><br>
+              <label>Scale Speed <input type="number" id="zoomOption_scaleSpeed_number" class="optionsInput" value="1.2"></label><br>
+            </div>
           </div>
         </div>
       </aside>
diff --git a/demos/blockfactory/workspacefactory/wfactory_init.js b/demos/blockfactory/workspacefactory/wfactory_init.js
index 46e5e6f81..341af46fb 100644
--- a/demos/blockfactory/workspacefactory/wfactory_init.js
+++ b/demos/blockfactory/workspacefactory/wfactory_init.js
@@ -523,9 +523,10 @@ WorkspaceFactoryInit.addWorkspaceFactoryOptionsListeners_ =
 
   document.getElementById('option_readOnly_checkbox').addEventListener('change',
     function(e) {
-      document.getElementById('trashcan_option').style.display =
-          document.getElementById('option_readOnly_checkbox').checked ?
-            'none' : 'block';
+      var checkbox = document.getElementById('option_readOnly_checkbox');
+      blocklyFactory.ifCheckedEnable(!checkbox.checked,
+          ['readonly1', 'readonly2', 'readonly3', 'readonly4', 'readonly5',
+           'readonly6', 'readonly7']);
     });
 
     document.getElementById('option_infiniteBlocks_checkbox').addEventListener('change',