Block factory cleanup. Fix one-based list option.

This commit is contained in:
Neil Fraser
2016-10-13 20:18:44 -07:00
parent b49b78de77
commit ff48285a86
7 changed files with 46 additions and 271 deletions

View File

@@ -104,7 +104,11 @@ Blockly.Options = function(options) {
// 'path' is a deprecated option which has been replaced by 'media'.
pathToMedia = options['path'] + 'media/';
}
var oneBasedIndex = !options['oneBasedIndex'];
if (options['oneBasedIndex'] === undefined) {
var oneBasedIndex = true;
} else {
var oneBasedIndex = !!options['oneBasedIndex'];
}
this.RTL = rtl;
this.oneBasedIndex = oneBasedIndex;

View File

@@ -386,11 +386,6 @@ td.taboff:hover {
font-size: large;
}
td {
padding: 0;
vertical-align: top;
}
.inputfile {
height: 0;
opacity: 0;

View File

@@ -62,13 +62,13 @@
<div id="exportSelector">
<br>
<h3> Block Selector </h3>
<div class='dropdown'>
<div class="dropdown">
<button id="button_setBlocks">Select</button>
<div id="dropdownDiv_setBlocks" class="dropdown-content">
<a id='dropdown_addAllFromLib' title="Select all block library blocks.">All Stored in Block Library</a>
<a id='dropdown_addAllUsed' title="Select all block library blocks used in workspace factory.">All Used in Workspace Factory</a>
<a id="dropdown_addAllFromLib" title="Select all block library blocks.">All Stored in Block Library</a>
<a id="dropdown_addAllUsed" title="Select all block library blocks used in workspace factory.">All Used in Workspace Factory</a>
</div>
<button id='clearSelectedButton' title="Clear selected blocks.">Clear Selected</a>
<button id="clearSelectedButton" title="Clear selected blocks.">Clear Selected</a>
</div>
<div id="blockSelector"></div>
@@ -158,10 +158,10 @@
<div class="dropdown">
<button id="button_export">Export</button>
<div id="dropdownDiv_export" class="dropdown-content">
<a id='dropdown_exportOptions'>Starter Code</a>
<a id='dropdown_exportToolbox'>Toolbox</a>
<a id='dropdown_exportPreload'>Workspace Blocks</a>
<a id='dropdown_exportAll'>All</a>
<a id="dropdown_exportOptions">Starter Code</a>
<a id="dropdown_exportToolbox">Toolbox</a>
<a id="dropdown_exportPreload">Workspace Blocks</a>
<a id="dropdown_exportAll">All</a>
</div>
</div>
@@ -175,7 +175,7 @@
<h3>Edit</h3>
<p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p>
</div>
<table id='workspaceTabs' style="width:auto; height:auto">
<table id="workspaceTabs" style="width:auto; height:auto">
<td id="tab_toolbox" class="tabon">Toolbox</td>
<td id="tab_preload" class="taboff">Workspace</td>
</table>
@@ -183,18 +183,18 @@
<div id="toolbox_blocks"></div>
</section>
<aside id="toolbox_div">
<p id="categoryHeader">Your categories will appear here</p>
<p id="categoryHeader">You currently have no categories.</p>
<table id="categoryTable" style="width:auto; height:auto">
</table>
<p>&nbsp;</p>
<div class='dropdown'>
<div class="dropdown">
<button id="button_add" class="large">+</button>
<div id="dropdownDiv_add" class="dropdown-content">
<a id='dropdown_newCategory'>New Category</a>
<a id='dropdown_loadCategory'>Standard Category</a>
<a id='dropdown_separator'>Separator</a>
<a id='dropdown_loadStandardToolbox'>Standard Toolbox</a>
<a id="dropdown_newCategory">New Category</a>
<a id="dropdown_loadCategory">Standard Category</a>
<a id="dropdown_separator">Separator</a>
<a id="dropdown_loadStandardToolbox">Standard Toolbox</a>
</div>
</div>
@@ -204,20 +204,20 @@
<button id="button_down" class="large">&#8595;</button>
<br>
<div class='dropdown'>
<button id="button_editCategory">Edit Category</button>
<div id="dropdownDiv_editCategory" class="dropdown-content">
<a id='dropdown_name'>Name</a>
<a id='dropdown_color'>Color</a>
</div>
<div class="dropdown">
</div>
</aside>
<button id='button_addShadow' style='display:none'>Make Shadow</button>
<button id='button_removeShadow' style='display:none'>Remove Shadow</button>
<button id="button_addShadow" style="display:none">Make Shadow</button>
<button id="button_removeShadow" style="display:none">Remove Shadow</button>
<aside id='preload_div' style='display:none'>
<aside id="preload_div" style="display:none">
<div id="preloadHelp">
<p>Configure the options for your Blockly inject call.</p>
<button id="button_optionsHelp">Help</button>
@@ -281,10 +281,10 @@
<tr id="blockLibrary">
<td id="blockLibraryContainer">
<span>
<div class='dropdown'>
<div class="dropdown">
<button id="button_blockLib">Block Library</button>
<div id="dropdownDiv_blockLib" class="dropdown-content">
<a id='createNewBlockButton'>Create New Block</a>
<a id="createNewBlockButton">Create New Block</a>
</div>
</div>
<select id="blockLibraryDropdown" style="display:none">

View File

@@ -1,224 +0,0 @@
body {
background-color: #fff;
font-family: sans-serif;
}
h1 {
font-weight: normal;
font-size: 140%;
}
section {
float: left;
}
aside {
float: right;
}
#categoryTable>table {
border: 1px solid #ccc;
border-bottom: none;
}
#workspaceTabs>table {
float: right;
}
td.tabon {
border-bottom-color: #ddd !important;
background-color: #ddd;
padding: 5px 19px;
}
td.taboff {
cursor: pointer;
padding: 5px 19px;
}
td.taboff:hover {
background-color: #eee;
}
button {
border-radius: 4px;
border: 1px solid #ddd;
background-color: #eee;
color: #000;
font-size: large;
margin: 0 5px;
padding: 10px;
}
button:hover:not(:disabled) {
box-shadow: 2px 2px 5px #888;
}
button:disabled {
opacity: .6;
}
button>* {
opacity: .6;
vertical-align: text-bottom;
}
button:hover:not(:disabled)>* {
opacity: 1;
}
button.small {
font-size: small;
}
table {
border: none;
border-collapse: collapse;
margin: 0;
padding: 0;
}
td {
padding: 0;
vertical-align: top;
}
.inputfile {
height: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0;
z-index: -1;
}
#toolbox_section {
height: 480px;
width: 80%;
position: relative;
}
#toolbox_blocks {
height: 100%;
width: 100%;
}
#preview_blocks {
height: 300px;
width: 100%;
}
#createDiv {
width: 70%;
}
#previewDiv {
width: 30%;
}
#toolbox_div {
width: 20%;
}
#preload_div {
width: 20%;
}
#disable_div {
background-color: white;
height: 100%;
left: 0;
opacity: .5;
position: absolute;
top: 0;
width: 100%;
z-index: -1; /* Start behind workspace */
}
/* Rules for Closure popup color picker */
.goog-palette {
outline: none;
cursor: default;
}
.goog-palette-cell {
height: 13px;
width: 15px;
margin: 0;
border: 0;
text-align: center;
vertical-align: middle;
border-right: 1px solid #000000;
font-size: 1px;
}
.goog-palette-colorswatch {
border: 1px solid #000000;
height: 13px;
position: relative;
width: 15px;
}
.goog-palette-cell-hover .goog-palette-colorswatch {
border: 1px solid #FFF;
}
.goog-palette-cell-selected .goog-palette-colorswatch {
border: 1px solid #000;
color: #fff;
}
.goog-palette-table {
border: 1px solid #000;
border-collapse: collapse;
}
.goog-popupcolorpicker {
position: absolute;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
display: none;
min-width: 170px;
opacity: 1;
position: absolute;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a, .dropdown-content label {
color: black;
display: block;
font-size: small;
padding: 12px 16px;
text-decoration: none;
}
/* Change color of dropdown links on hover. */
.dropdown-content a:hover, .dropdown-content label:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu */
.show {
display: block;
}
.shadowBlock>.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.shadowBlock>.blocklyPathLight,
.shadowBlock>.blocklyPathDark {
display: none;
}

View File

@@ -108,7 +108,7 @@ WorkspaceFactoryController.prototype.addCategory = function() {
// After possibly creating a category, check again if it's the first category.
var isFirstCategory = !this.model.hasElements();
// Get name from user.
name = this.promptForNewCategoryName('Enter the name of your new category:');
var name = this.promptForNewCategoryName('Enter the name of your new category:');
if (!name) { // Exit if cancelled.
return;
}
@@ -238,7 +238,7 @@ WorkspaceFactoryController.prototype.removeElement = function() {
* Gets a valid name for a new category from the user.
* @param {string} promptString Prompt for the user to enter a name.
* @param {string=} opt_oldName The current name.
* @return {string} Valid name for a new category, or null if cancelled.
* @return {string?} Valid name for a new category, or null if cancelled.
*/
WorkspaceFactoryController.prototype.promptForNewCategoryName =
function(promptString, opt_oldName) {

View File

@@ -192,8 +192,8 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
function() {
document.getElementById('dropdownDiv_export').classList.toggle('show');
document.getElementById('dropdownDiv_load').classList.remove('show');
document.getElementById('dropdownDiv_importBlocks').classList.
remove('show');
document.getElementById('dropdownDiv_importBlocks').classList
.remove('show');
});
document.getElementById('button_up').addEventListener
@@ -219,15 +219,15 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
('click',
function() {
controller.changeCategoryName();
document.getElementById('dropdownDiv_editCategory').classList.
remove('show');
document.getElementById('dropdownDiv_editCategory').classList
.remove('show');
});
document.getElementById('button_importBlocks').addEventListener
('click',
function() {
document.getElementById('dropdownDiv_importBlocks').classList.
toggle('show');
document.getElementById('dropdownDiv_importBlocks').classList
.toggle('show');
document.getElementById('dropdownDiv_export').classList.remove('show');
document.getElementById('dropdownDiv_load').classList.remove('show');
});
@@ -237,8 +237,8 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
function() {
document.getElementById('dropdownDiv_load').classList.toggle('show');
document.getElementById('dropdownDiv_export').classList.remove('show');
document.getElementById('dropdownDiv_importBlocks').classList.
remove('show');
document.getElementById('dropdownDiv_importBlocks').classList
.remove('show');
});
document.getElementById('input_loadToolbox').addEventListener
@@ -261,23 +261,23 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
('change',
function() {
controller.importBlocks(event.target.files[0],'JSON');
document.getElementById('dropdownDiv_importBlocks').classList.
remove('show');
document.getElementById('dropdownDiv_importBlocks').classList
.remove('show');
});
document.getElementById('input_importBlocksJs').addEventListener
('change',
function() {
controller.importBlocks(event.target.files[0],'JavaScript');
document.getElementById('dropdownDiv_importBlocks').classList.
remove('show');
document.getElementById('dropdownDiv_importBlocks').classList
.remove('show');
});
document.getElementById('button_clear').addEventListener
('click',
function() {
document.getElementById('dropdownDiv_importBlocks').classList.
remove('show');
document.getElementById('dropdownDiv_importBlocks').classList
.remove('show');
document.getElementById('dropdownDiv_export').classList.remove('show');
document.getElementById('dropdownDiv_load').classList.remove('show');
controller.clearAll();

View File

@@ -51,7 +51,7 @@ WorkspaceFactoryView.prototype.addCategoryRow = function(name, id) {
// Delete help label and enable category buttons if it's the first category.
if (count == 0) {
document.getElementById('categoryHeader').textContent = 'Your Categories:';
document.getElementById('categoryHeader').textContent = 'Your categories:';
}
// Create tab.
@@ -91,9 +91,9 @@ WorkspaceFactoryView.prototype.deleteElementRow = function(id, index) {
*/
WorkspaceFactoryView.prototype.addEmptyCategoryMessage = function() {
var table = document.getElementById('categoryTable');
if (table.rows.length == 0) {
if (!table.rows.length) {
document.getElementById('categoryHeader').textContent =
'Your categories will appear here';
'You currently have no categories.';
}
};
@@ -243,7 +243,7 @@ WorkspaceFactoryView.prototype.addSeparatorTab = function(id) {
var count = table.rows.length;
if (count == 0) {
document.getElementById('categoryHeader').textContent = 'Your Categories:';
document.getElementById('categoryHeader').textContent = 'Your categories:';
}
// Create separator.
var row = table.insertRow(count);