CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-31 04:30:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Disable options in readonly mode. (Block Factory)

Browse Source
This commit is contained in:
Neil Fraser
2016-10-14 08:57:39 -07:00
parent a2e7481d04
commit 728284ab61
4 changed files with 47 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
demos/blockfactory/app_controller.js
View File

@@ -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';
}
};

7
demos/blockfactory/factory.css
View File

@@ -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 {

44
demos/blockfactory/index.html
View File

@@ -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>

7
demos/blockfactory/workspacefactory/wfactory_init.js
View File

@@ -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',