- needed to position the dropdown content */
.dropdown {
display: inline-block;
@@ -566,7 +523,7 @@ td.taboff:hover {
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
background-color: #fff;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
display: none;
min-width: 170px;
opacity: 1;
@@ -598,6 +555,23 @@ td.taboff:hover {
display: block;
}
+#dropdownDiv_editCategory {
+ padding: 0 1ex;
+}
+
+#dropdownDiv_editCategory>img {
+ vertical-align: middle;
+}
+
+#colourpicker {
+ z-index: 999;
+}
+
+#colourpicker>table {
+ border-collapse: separate;
+ z-index: 999;
+}
+
.shadowBlock>.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html
index afdfe01a8..b01ff2857 100644
--- a/demos/blockfactory/index.html
+++ b/demos/blockfactory/index.html
@@ -8,12 +8,12 @@
-
+
@@ -208,10 +208,11 @@
-
+
diff --git a/demos/blockfactory/workspacefactory/wfactory_controller.js b/demos/blockfactory/workspacefactory/wfactory_controller.js
index 61c830870..43f9ae453 100644
--- a/demos/blockfactory/workspacefactory/wfactory_controller.js
+++ b/demos/blockfactory/workspacefactory/wfactory_controller.js
@@ -491,26 +491,25 @@ WorkspaceFactoryController.prototype.reinjectPreview = function(tree) {
};
/**
- * Tied to "change name" button. Changes the name of the selected category.
- * Continues prompting the user until they input a category name that is not
- * currently in use, exits if user presses cancel.
+ * Changes the name and colour of the selected category.
+ * Return if selected element is a separator.
+ * @param {string} name New name for selected category.
+ * @param {string} colour New colour for selected category.
+ * Must be a valid CSS string.
*/
-WorkspaceFactoryController.prototype.changeCategoryName = function() {
+WorkspaceFactoryController.prototype.changeSelectedCategory =
+ function(name, colour) {
var selected = this.model.getSelected();
// Return if a category is not selected.
if (selected.type != ListElement.TYPE_CATEGORY) {
return;
}
- // Get new name from user.
- window.foo = selected;
- var newName = this.promptForNewCategoryName('What do you want to change this'
- + ' category\'s name to?', selected.name);
- if (!newName) { // If cancelled.
- return;
- }
+ // Change colour of selected category.
+ selected.changeColor(colour);
+ this.view.setBorderColor(this.model.getSelectedId(), colour);
// Change category name.
- selected.changeName(newName);
- this.view.updateCategoryName(newName, this.model.getSelectedId());
+ selected.changeName(name);
+ this.view.updateCategoryName(name, this.model.getSelectedId());
// Update preview.
this.updatePreview();
};
@@ -557,24 +556,6 @@ WorkspaceFactoryController.prototype.moveElementToIndex = function(element,
this.view.moveTabToIndex(element.id, newIndex, oldIndex);
};
-/**
- * Changes the color of the selected category. Return if selected element is
- * a separator.
- * @param {string} color The color to change the selected category. Must be
- * a valid CSS string.
- */
-WorkspaceFactoryController.prototype.changeSelectedCategoryColor =
- function(color) {
- // Return if category is not selected.
- if (this.model.getSelected().type != ListElement.TYPE_CATEGORY) {
- return;
- }
- // Change color of selected category.
- this.model.getSelected().changeColor(color);
- this.view.setBorderColor(this.model.getSelectedId(), color);
- this.updatePreview();
-};
-
/**
* Tied to the "Standard Category" dropdown option, this function prompts
* the user for a name of a standard Blockly category (case insensitive) and
diff --git a/demos/blockfactory/workspacefactory/wfactory_init.js b/demos/blockfactory/workspacefactory/wfactory_init.js
index 36ca9fe27..84d420111 100644
--- a/demos/blockfactory/workspacefactory/wfactory_init.js
+++ b/demos/blockfactory/workspacefactory/wfactory_init.js
@@ -27,9 +27,6 @@
* @author Emma Dauterman (evd2014)
*/
-goog.require('goog.ui.PopupColorPicker');
-goog.require('goog.ui.ColorPicker');
-
/**
* Namespace for workspace factory initialization methods.
* @namespace
@@ -48,7 +45,7 @@ WorkspaceFactoryInit.initWorkspaceFactory = function(controller) {
document.getElementById('button_down').disabled = true;
document.getElementById('button_editCategory').disabled = true;
- this.initColorPicker_(controller);
+ this.initColourPicker_(controller);
this.addWorkspaceFactoryEventListeners_(controller);
this.assignWorkspaceFactoryClickHandlers_(controller);
this.addWorkspaceFactoryOptionsListeners_(controller);
@@ -58,98 +55,25 @@ WorkspaceFactoryInit.initWorkspaceFactory = function(controller) {
};
/**
- * Initialize the color picker in workspace factory.
+ * Initialize the colour picker in workspace factory.
* @param {!FactoryController} controller The controller for the workspace
* factory tab.
* @private
*/
-WorkspaceFactoryInit.initColorPicker_ = function(controller) {
- // Array of Blockly category colours, consitent with the 15 degree default
+WorkspaceFactoryInit.initColourPicker_ = function(controller) {
+ // Array of Blockly category colours, consistent with the 15 degree default
// of the block factory's colour wheel.
var colours = [];
+ var row = [];
for (var hue = 0; hue < 360; hue += 15) {
- colours.push(WorkspaceFactoryInit.hsvToHex_(hue,
- Blockly.HSV_SATURATION, Blockly.HSV_VALUE));
- }
-
- // Create color picker with specific set of Blockly colours.
- var colourPicker = new goog.ui.ColorPicker();
- colourPicker.setSize(6);
- colourPicker.setColors(colours);
-
- // Create and render the popup colour picker and attach to button.
- var popupPicker = new goog.ui.PopupColorPicker(null, colourPicker);
- popupPicker.render();
- popupPicker.attach(document.getElementById('dropdown_color'));
- popupPicker.setFocusable(true);
- goog.events.listen(popupPicker, 'change', function(e) {
- controller.changeSelectedCategoryColor(popupPicker.getSelectedColor());
- blocklyFactory.closeModal();
- });
-};
-
-/**
- * Converts from h,s,v values to a hex string
- * @param {number} h Hue, in [0, 360].
- * @param {number} s Saturation, in [0, 1].
- * @param {number} v Value, in [0, 1].
- * @return {string} hex representation of the color.
- * @private
- */
-WorkspaceFactoryInit.hsvToHex_ = function(h, s, v) {
- var brightness = v * 255;
- var red = 0;
- var green = 0;
- var blue = 0;
- if (s == 0) {
- red = brightness;
- green = brightness;
- blue = brightness;
- } else {
- var sextant = Math.floor(h / 60);
- var remainder = (h / 60) - sextant;
- var val1 = brightness * (1 - s);
- var val2 = brightness * (1 - (s * remainder));
- var val3 = brightness * (1 - (s * (1 - remainder)));
- switch (sextant) {
- case 1:
- red = val2;
- green = brightness;
- blue = val1;
- break;
- case 2:
- red = val1;
- green = brightness;
- blue = val3;
- break;
- case 3:
- red = val1;
- green = val2;
- blue = brightness;
- break;
- case 4:
- red = val3;
- green = val1;
- blue = brightness;
- break;
- case 5:
- red = brightness;
- green = val1;
- blue = val2;
- break;
- case 6:
- case 0:
- red = brightness;
- green = val3;
- blue = val1;
- break;
+ row.push(Blockly.hueToHex(hue).substring(1));
+ if (row.length == 6) {
+ colours.push(row);
+ row = [];
}
}
-
- var hexR = ('0' + Math.floor(red).toString(16)).slice(-2);
- var hexG = ('0' + Math.floor(green).toString(16)).slice(-2);
- var hexB = ('0' + Math.floor(blue).toString(16)).slice(-2);
- return '#' + hexR + hexG + hexB;
+ // Override the default colours.
+ cp_grid = colours;
};
/**
@@ -311,12 +235,25 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
document.getElementById('button_editCategory').addEventListener
('click',
function() {
+ var selected = controller.model.getSelected();
+ // Return if a category is not selected.
+ if (selected.type != ListElement.TYPE_CATEGORY) {
+ return;
+ }
+ document.getElementById('categoryName').value = selected.name;
+ document.getElementById('categoryColour').value = selected.color ?
+ selected.color.substring(1).toLowerCase() : '000000';
+ // Link the colour picker to the field.
+ cp_init('categoryColour');
blocklyFactory.openModal('dropdownDiv_editCategory');
});
- document.getElementById('dropdown_name').addEventListener
+
+ document.getElementById('categorySave').addEventListener
('click',
function() {
- controller.changeCategoryName();
+ var name = document.getElementById('categoryName').value.trim();
+ var colour = '#' + document.getElementById('categoryColour').value;
+ controller.changeSelectedCategory(name, colour);
blocklyFactory.closeModal();
});
diff --git a/demos/blockfactory/workspacefactory/wfactory_view.js b/demos/blockfactory/workspacefactory/wfactory_view.js
index f36ae5c17..754b084d6 100644
--- a/demos/blockfactory/workspacefactory/wfactory_view.js
+++ b/demos/blockfactory/workspacefactory/wfactory_view.js
@@ -320,7 +320,7 @@ WorkspaceFactoryView.prototype.markShadowBlocks = function(blocks) {
*/
WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
// Add Blockly CSS for user-generated shadow blocks.
- Blockly.utils.addClass(block.svgGroup_, 'shadowBlock');
+ Blockly.utils.dom.addClass(block.svgGroup_, 'shadowBlock');
// If not a valid shadow block, add a warning message.
if (!block.getSurroundParent()) {
block.setWarningText('Shadow blocks must be nested inside' +
@@ -338,7 +338,7 @@ WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
*/
WorkspaceFactoryView.prototype.unmarkShadowBlock = function(block) {
// Remove Blockly CSS for user-generated shadow blocks.
- Blockly.utils.removeClass(block.svgGroup_, 'shadowBlock');
+ Blockly.utils.dom.removeClass(block.svgGroup_, 'shadowBlock');
};
/**
+ var box = document.createElement('img');
+ box.style.border = 'outset 3px #888';
+ box.src = '1x1.gif';
+ box.height = 20;
+ box.width = 30;
+ box.label = id;
+ box.onclick = new Function('cp_open(this)');
+ box.onmouseover = cp_cancelclose;
+ box.onmouseout = cp_closesoon;
+ obj.parentNode.insertBefore(box, obj);
+ obj.cp_box = box;
+ }
+ obj.cp_box.style.backgroundColor = '#' + obj.value;
+}
+
+function cp_open(caller) {
+ // Create a table of colours.
+ if (cp_dom) {
+ cp_close();
+ return;
+ }
+ cp_caller = caller;
+ // alert(document.getElementById(caller.label));
+ cp_defaultcolour = document.getElementById(caller.label).value;
+ var posX = 0;
+ var posY = caller.offsetHeight;
+ while (caller) {
+ posX += caller.offsetLeft;
+ posY += caller.offsetTop;
+ caller = caller.offsetParent;
+ }
+ cp_dom = document.createElement('div');
+ cp_dom.id = 'colourpicker';
+ var table = document.createElement('table');
+ table.setAttribute('border', '1');
+ table.style.backgroundColor = '#808080';
+ table.onmouseover = cp_cancelclose;
+ table.onmouseout = cp_closesoon;
+ var tbody = document.createElement('tbody'); // IE 6 needs this.
+ var row, cell;
+ for (var y = 0; y < cp_grid.length; y++) {
+ row = document.createElement('tr');
+ tbody.appendChild(row);
+ for (var x = 0; x < cp_grid[y].length; x++) {
+ cell = document.createElement('td');
+ row.appendChild(cell);
+ cell.style.backgroundColor = '#' + cp_grid[y][x];
+ cell.label = cp_grid[y][x];
+ cell.style.border = 'solid 2px #' + cell.label;
+ cell.onmouseover = cp_onmouseover;
+ cell.onmouseout = cp_onmouseout;
+ cell.onclick = cp_onclick;
+ cell.innerHTML = '