Block Factory: Add missing workspace options, fix reset button.

This commit is contained in:
Neil Fraser
2016-10-17 17:32:14 -07:00
parent 8d4401430c
commit 9fe29a9cc2
4 changed files with 84 additions and 68 deletions

View File

@@ -225,49 +225,42 @@
<button class="small" id="button_standardOptions">Reset to Default</button>
</div>
<div id="workspace_options">
<label><input type="checkbox" id="option_readOnly_checkbox" class="optionsInput">Read Only</label><br>
<div id="readonly1">
<label><input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks</label><br>
<label><input type="checkbox" id="option_readOnly_checkbox">Read Only</label><br>
<label><input type="checkbox" id="option_grid_checkbox">Use Grid</label><br>
<div id="grid_options" style="display: none">
<label>Spacing <input type="number" id="gridOption_spacing_number" style="width: 3em"></label><br>
<label>Length <input type="number" id="gridOption_length_number" style="width: 3em"></label><br>
<label>Colour <input type="text" id="gridOption_colour_text" style="width: 8em"></label><br>
<div id="readonly1">
<label><input type="checkbox" id="gridOption_snap_checkbox">Snap</label><br>
</div>
</div>
<label>Path to Blockly Media <input type="text" id="option_media_text" style="width: 90%"></label><br>
<label><input type="checkbox" id="option_rtl_checkbox">Layout with RTL</label><br>
<label><input type="checkbox" id="option_scrollbars_checkbox">Scrollbars</label><br>
<label><input type="checkbox" id="option_zoom_checkbox">Zoom</label><br>
<div id="zoom_options" style="display: none">
<label><input type="checkbox" id="zoomOption_controls_checkbox">Zoom Controls</label><br>
<label><input type="checkbox" id="zoomOption_wheel_checkbox">Zoom Wheel</label><br>
<label>Start Scale <input type="number" id="zoomOption_startScale_number" style="width: 4em"></label><br>
<label>Max Scale <input type="number" id="zoomOption_maxScale_number" style="width: 4em"></label><br>
<label>Min Scale <input type="number" id="zoomOption_minScale_number" style="width: 4em"></label><br>
<label>Scale Speed <input type="number" id="zoomOption_scaleSpeed_number" style="width: 4em"></label><br>
</div>
<label><input type="checkbox" id="option_css_checkbox">Use Blockly CSS</label><br>
<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>
<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>
<label>Length <input type="number" id="gridOption_length_number" class="optionsInput" value="1"></label><br>
<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>
<div id="readonly4">
<label><input type="checkbox" id="option_infiniteBlocks_checkbox" class="optionsInput" value="checked">Infinite Blocks</label><br>
<label><input type="checkbox" id="option_collapse_checkbox">Collapsible Blocks</label><br>
<label><input type="checkbox" id="option_comments_checkbox">Comments for Blocks</label><br>
<label><input type="checkbox" id="option_disable_checkbox">Disabled Blocks</label><br>
<label><input type="checkbox" id="option_infiniteBlocks_checkbox">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>
<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>
<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>
<label>Max Blocks <input type="number" id="option_maxBlocks_number" style="width: 5em"></label><br>
</div>
<label><input type="checkbox" id="option_horizontalLayout_checkbox">Horizontal Toolbox</label><br>
<label><input type="checkbox" id="option_toolboxPosition_checkbox">Toolbox End</label><br>
<label><input type="checkbox" id="option_oneBasedIndex_checkbox">One-based index</label><br>
<label><input type="checkbox" id="option_sounds_checkbox">Sounds<br>
<label><input type="checkbox" id="option_trashcan_checkbox">Trashcan</label><br>
</div>
</div>
</aside>

View File

@@ -1105,33 +1105,42 @@ WorkspaceFactoryController.prototype.readOptions_ = function() {
// Add all standard options to the options object.
// Use parse int to get numbers from value inputs.
optionsObj['collapse'] =
document.getElementById('option_collapse_checkbox').checked;
optionsObj['comments'] =
document.getElementById('option_comments_checkbox').checked;
optionsObj['css'] = document.getElementById('option_css_checkbox').checked;
optionsObj['disable'] =
document.getElementById('option_disable_checkbox').checked;
if (document.getElementById('option_infiniteBlocks_checkbox').checked) {
optionsObj['maxBlocks'] = Infinity;
var readonly = document.getElementById('option_readOnly_checkbox').checked;
if (readonly) {
optionsObj['readOnly'] = true;
} else {
var maxBlocksValue =
document.getElementById('option_maxBlocks_number').value;
optionsObj['maxBlocks'] = typeof maxBlocksValue == 'string' ?
parseInt(maxBlocksValue) : maxBlocksValue;
optionsObj['collapse'] =
document.getElementById('option_collapse_checkbox').checked;
optionsObj['comments'] =
document.getElementById('option_comments_checkbox').checked;
optionsObj['disable'] =
document.getElementById('option_disable_checkbox').checked;
if (document.getElementById('option_infiniteBlocks_checkbox').checked) {
optionsObj['maxBlocks'] = Infinity;
} else {
var maxBlocksValue =
document.getElementById('option_maxBlocks_number').value;
optionsObj['maxBlocks'] = typeof maxBlocksValue == 'string' ?
parseInt(maxBlocksValue) : maxBlocksValue;
}
optionsObj['trashcan'] =
document.getElementById('option_trashcan_checkbox').checked;
optionsObj['horizontalLayout'] =
document.getElementById('option_horizontalLayout_checkbox').checked;
optionsObj['toolboxPosition'] =
document.getElementById('option_toolboxPosition_checkbox').checked ?
'end' : 'start';
}
optionsObj['css'] = document.getElementById('option_css_checkbox').checked;
optionsObj['media'] = document.getElementById('option_media_text').value;
optionsObj['readOnly'] =
document.getElementById('option_readOnly_checkbox').checked;
optionsObj['rtl'] = document.getElementById('option_rtl_checkbox').checked;
optionsObj['scrollbars'] =
document.getElementById('option_scrollbars_checkbox').checked;
optionsObj['sounds'] =
document.getElementById('option_sounds_checkbox').checked;
if (!optionsObj['readOnly']) {
optionsObj['trashcan'] =
document.getElementById('option_trashcan_checkbox').checked;
}
optionsObj['oneBasedIndex'] =
document.getElementById('option_oneBasedIndex_checkbox').checked;
// If using a grid, add all grid options.
if (document.getElementById('option_grid_checkbox').checked) {
@@ -1144,7 +1153,10 @@ WorkspaceFactoryController.prototype.readOptions_ = function() {
grid['length'] = typeof lengthValue == 'string' ?
parseInt(lengthValue) : lengthValue;
grid['colour'] = document.getElementById('gridOption_colour_text').value;
grid['snap'] = document.getElementById('gridOption_snap_checkbox').checked;
if (!readonly) {
grid['snap'] =
document.getElementById('gridOption_snap_checkbox').checked;
}
optionsObj['grid'] = grid;
}

View File

@@ -513,7 +513,7 @@ WorkspaceFactoryInit.addWorkspaceFactoryOptionsListeners_ =
'block' : 'none';
});
// Checking the grid checkbox displays zoom options.
// Checking the zoom checkbox displays zoom options.
document.getElementById('option_zoom_checkbox').addEventListener('change',
function(e) {
document.getElementById('zoom_options').style.display =
@@ -521,12 +521,12 @@ WorkspaceFactoryInit.addWorkspaceFactoryOptionsListeners_ =
'block' : 'none';
});
// Checking the readonly checkbox enables/disables other options.
document.getElementById('option_readOnly_checkbox').addEventListener('change',
function(e) {
var checkbox = document.getElementById('option_readOnly_checkbox');
blocklyFactory.ifCheckedEnable(!checkbox.checked,
['readonly1', 'readonly2', 'readonly3', 'readonly4', 'readonly5',
'readonly6', 'readonly7']);
['readonly1', 'readonly2']);
});
document.getElementById('option_infiniteBlocks_checkbox').addEventListener('change',
@@ -537,9 +537,10 @@ WorkspaceFactoryInit.addWorkspaceFactoryOptionsListeners_ =
});
// Generate new options every time an options input is updated.
var optionsElements = document.getElementsByClassName('optionsInput');
for (var i = 0; i < optionsElements.length; i++) {
optionsElements[i].addEventListener('change', function() {
var div = document.getElementById('workspace_options');
var options = div.getElementsByTagName('input');
for (var i = 0, option; option = options[i]; i++) {
option.addEventListener('change', function() {
controller.generateNewOptions();
});
}

View File

@@ -382,15 +382,25 @@ WorkspaceFactoryView.prototype.updateHelpText = function(mode) {
* or a single flyout of blocks. Updates checkboxes and text fields.
*/
WorkspaceFactoryView.prototype.setBaseOptions = function() {
// Readonly mode.
document.getElementById('option_readOnly_checkbox').checked = false;
blocklyFactory.ifCheckedEnable(true, ['readonly1', 'readonly2']);
// Set basic options.
document.getElementById('option_css_checkbox').checked = true;
document.getElementById('option_infiniteBlocks_checkbox').checked = true;
document.getElementById('option_maxBlocks_number').value = 100;
document.getElementById('option_media_text').value =
'https://blockly-demo.appspot.com/static/media/';
document.getElementById('option_readOnly_checkbox').checked = false;
document.getElementById('option_rtl_checkbox').checked = false;
document.getElementById('option_sounds_checkbox').checked = true;
document.getElementById('option_oneBasedIndex_checkbox').checked = true;
document.getElementById('option_horizontalLayout_checkbox').checked = false;
document.getElementById('option_toolboxPosition_checkbox').checked = false;
// Check infinite blocks and hide suboption.
document.getElementById('option_infiniteBlocks_checkbox').checked = true;
document.getElementById('maxBlockNumber_option').style.display =
'none';
// Uncheck grid and zoom options and hide suboptions.
document.getElementById('option_grid_checkbox').checked = false;
@@ -399,7 +409,7 @@ WorkspaceFactoryView.prototype.setBaseOptions = function() {
document.getElementById('zoom_options').style.display = 'none';
// Set grid options.
document.getElementById('gridOption_spacing_number').value = 0;
document.getElementById('gridOption_spacing_number').value = 20;
document.getElementById('gridOption_length_number').value = 1;
document.getElementById('gridOption_colour_text').value = '#888';
document.getElementById('gridOption_snap_checkbox').checked = false;