From b503dd7d8037bba587ef826ed07bfd1515fe91a1 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Mon, 12 Oct 2015 21:00:29 -0700 Subject: [PATCH] Add shadow blocks and category colours to code demo. --- blockly_compressed.js | 2 +- blockly_uncompressed.js | 3 +- core/toolbox.js | 13 ++- demos/code/index.html | 224 ++++++++++++++++++++++++++++------------ 4 files changed, 166 insertions(+), 76 deletions(-) diff --git a/blockly_compressed.js b/blockly_compressed.js index c0484801c..78ba4a5e5 100644 --- a/blockly_compressed.js +++ b/blockly_compressed.js @@ -1226,7 +1226,7 @@ a.svgGroup_);this.flyout_.init(a);this.CONFIG_.cleardotPath=a.options.pathToMedi Blockly.Toolbox.prototype.dispose=function(){this.flyout_.dispose();this.tree_.dispose();goog.dom.removeNode(this.HtmlDiv);this.lastCategory_=this.workspace_=null}; Blockly.Toolbox.prototype.position=function(){var a=this.HtmlDiv;if(a){var b=this.workspace_.options.svg,c=goog.style.getPageOffset(b),b=Blockly.svgSize(b);a.style.left=this.workspace_.RTL?c.x+b.width-a.offsetWidth+"px":c.x+"px";a.style.height=b.height+"px";a.style.top=c.y+"px";this.width=a.offsetWidth;this.workspace_.RTL||--this.width;this.flyout_.position()}}; Blockly.Toolbox.prototype.populate_=function(a){function b(a,e){for(var f=0,g;g=a.childNodes[f];f++)if(g.tagName)switch(g.tagName.toUpperCase()){case "CATEGORY":var h=c.createNode(g.getAttribute("name"));h.blocks=[];e.add(h);var k=g.getAttribute("custom");k?h.blocks=k:b(g,h);k=g.getAttribute("colour");h.hexColour=goog.isString(k)?Blockly.makeColour(k):"";"true"==g.getAttribute("expanded")&&(h.blocks.length&&c.setSelectedItem(h),h.setExpanded(!0));break;case "SEP":e.add(new Blockly.Toolbox.TreeSeparator); -break;case "BLOCK":e.blocks.push(g)}}var c=this.tree_;c.removeChildren();c.blocks=[];b(a,this.tree_);if(c.blocks.length)throw"Toolbox cannot have both blocks and categories in the root level.";Blockly.fireUiEvent(window,"resize")};Blockly.Toolbox.prototype.addColour_=function(a){a=a.getChildren();for(var b=0,c;c=a[b];b++){var d="8px solid "+(c.hexColour||"#ddd");this.workspace_.RTL?c.getElement().style.borderLeft=d:c.getElement().style.borderRight=d;this.addColour_(c)}}; +break;case "BLOCK":e.blocks.push(g)}}var c=this.tree_;c.removeChildren();c.blocks=[];b(a,this.tree_);if(c.blocks.length)throw"Toolbox cannot have both blocks and categories in the root level.";Blockly.fireUiEvent(window,"resize")};Blockly.Toolbox.prototype.addColour_=function(a){a=a.getChildren();for(var b=0,c;c=a[b];b++){var d=c.getElement();if(d){var e="8px solid "+(c.hexColour||"#ddd");this.workspace_.RTL?d.style.borderLeft=e:d.style.borderRight=e}this.addColour_(c)}}; Blockly.Toolbox.prototype.clearSelection=function(){this.tree_.setSelectedItem(null)};Blockly.Toolbox.prototype.getRect=function(){var a=this.workspace_.RTL?Blockly.svgSize(this.workspace_.options.svg).width-this.width:-1E7;return new goog.math.Rect(a,-1E7,1E7+this.width,2E7)};Blockly.Toolbox.TreeControl=function(a,b){this.toolbox_=a;goog.ui.tree.TreeControl.call(this,goog.html.SafeHtml.EMPTY,b)};goog.inherits(Blockly.Toolbox.TreeControl,goog.ui.tree.TreeControl); Blockly.Toolbox.TreeControl.prototype.enterDocument=function(){Blockly.Toolbox.TreeControl.superClass_.enterDocument.call(this);if(goog.events.BrowserFeature.TOUCH_ENABLED){var a=this.getElement();Blockly.bindEvent_(a,goog.events.EventType.TOUCHSTART,this,this.handleTouchEvent_)}};Blockly.Toolbox.TreeControl.prototype.handleTouchEvent_=function(a){a.preventDefault();var b=this.getNodeFromEvent_(a);b&&a.type===goog.events.EventType.TOUCHSTART&&setTimeout(function(){b.onMouseDown(a)},1)}; Blockly.Toolbox.TreeControl.prototype.createNode=function(a){return new Blockly.Toolbox.TreeNode(this.toolbox_,a?goog.html.SafeHtml.htmlEscape(a):goog.html.SafeHtml.EMPTY,this.getConfig(),this.getDomHelper())}; diff --git a/blockly_uncompressed.js b/blockly_uncompressed.js index 3cebfcb43..44aa97f63 100644 --- a/blockly_uncompressed.js +++ b/blockly_uncompressed.js @@ -73,7 +73,7 @@ goog.addDependency("array/array.js", ['goog.array', 'goog.array.ArrayLike'], ['g goog.addDependency("asserts/asserts.js", ['goog.asserts', 'goog.asserts.AssertionError'], ['goog.debug.Error', 'goog.dom.NodeType', 'goog.string']); goog.addDependency("async/freelist.js", ['goog.async.FreeList'], []); goog.addDependency("async/nexttick.js", ['goog.async.nextTick', 'goog.async.throwException'], ['goog.debug.entryPointRegistry', 'goog.dom.TagName', 'goog.functions', 'goog.labs.userAgent.browser', 'goog.labs.userAgent.engine']); -goog.addDependency("async/run.js", ['goog.async.run'], ['goog.async.WorkQueue', 'goog.async.nextTick', 'goog.async.throwException', 'goog.testing.watchers']); +goog.addDependency("async/run.js", ['goog.async.run'], ['goog.async.WorkQueue', 'goog.async.nextTick', 'goog.async.throwException']); goog.addDependency("async/workqueue.js", ['goog.async.WorkItem', 'goog.async.WorkQueue'], ['goog.asserts', 'goog.async.FreeList']); goog.addDependency("color/color.js", ['goog.color', 'goog.color.Hsl', 'goog.color.Hsv', 'goog.color.Rgb'], ['goog.color.names', 'goog.math']); goog.addDependency("color/names.js", ['goog.color.names'], []); @@ -146,7 +146,6 @@ goog.addDependency("structs/set.js", ['goog.structs.Set'], ['goog.structs', 'goo goog.addDependency("structs/structs.js", ['goog.structs'], ['goog.array', 'goog.object']); goog.addDependency("structs/trie.js", ['goog.structs.Trie'], ['goog.object', 'goog.structs']); goog.addDependency("style/style.js", ['goog.style'], ['goog.array', 'goog.asserts', 'goog.dom', 'goog.dom.NodeType', 'goog.dom.TagName', 'goog.dom.vendor', 'goog.math.Box', 'goog.math.Coordinate', 'goog.math.Rect', 'goog.math.Size', 'goog.object', 'goog.string', 'goog.userAgent']); -goog.addDependency("testing/watchers.js", ['goog.testing.watchers'], []); goog.addDependency("timer/timer.js", ['goog.Timer'], ['goog.Promise', 'goog.events.EventTarget']); goog.addDependency("ui/colorpalette.js", ['goog.ui.ColorPalette'], ['goog.array', 'goog.color', 'goog.dom.TagName', 'goog.style', 'goog.ui.Palette', 'goog.ui.PaletteRenderer']); goog.addDependency("ui/colorpicker.js", ['goog.ui.ColorPicker', 'goog.ui.ColorPicker.EventType'], ['goog.ui.ColorPalette', 'goog.ui.Component']); diff --git a/core/toolbox.js b/core/toolbox.js index 0b0566ea4..2b433d3aa 100644 --- a/core/toolbox.js +++ b/core/toolbox.js @@ -244,11 +244,14 @@ Blockly.Toolbox.prototype.populate_ = function(newTree) { Blockly.Toolbox.prototype.addColour_ = function(tree) { var children = tree.getChildren(); for (var i = 0, child; child = children[i]; i++) { - var border = '8px solid ' + (child.hexColour || '#ddd'); - if (this.workspace_.RTL) { - child.getElement().style.borderLeft = border; - } else { - child.getElement().style.borderRight = border; + var element = child.getElement(); + if (element) { + var border = '8px solid ' + (child.hexColour || '#ddd'); + if (this.workspace_.RTL) { + element.style.borderLeft = border; + } else { + element.style.borderRight = border; + } } this.addColour_(child); } diff --git a/demos/code/index.html b/demos/code/index.html index 6c8e47a43..747aaa253 100644 --- a/demos/code/index.html +++ b/demos/code/index.html @@ -70,7 +70,7 @@