From effc1d5f1c960d65f2b0fd643419764b57513fc5 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Wed, 9 Nov 2016 16:37:46 -0800 Subject: [PATCH 1/6] Add ability to specify a css class for labels and buttons --- core/css.js | 2 +- core/flyout.js | 3 ++- core/flyout_button.js | 31 ++++++++++++++++++++++++------- tests/playground.html | 7 +++++++ 4 files changed, 34 insertions(+), 9 deletions(-) diff --git a/core/css.js b/core/css.js index 128fea86d..6512fd496 100644 --- a/core/css.js +++ b/core/css.js @@ -295,7 +295,7 @@ Blockly.Css.CONTENT = [ 'fill: #000;', '}', - '.blocklyFlyoutLabelText:hover {', + '.blocklyFlyoutLabelText.clickable:hover {', 'fill: #aaa;', '}', diff --git a/core/flyout.js b/core/flyout.js index b129f6166..a1b16c425 100644 --- a/core/flyout.js +++ b/core/flyout.js @@ -704,8 +704,9 @@ Blockly.Flyout.prototype.show = function(xmlList) { var isLabel = tagName == 'LABEL'; var text = xml.getAttribute('text'); var callbackKey = xml.getAttribute('callbackKey'); + var className = xml.getAttribute('class'); var curButton = new Blockly.FlyoutButton(this.workspace_, - this.targetWorkspace_, text, callbackKey, isLabel); + this.targetWorkspace_, text, callbackKey, isLabel, className); contents.push({type: 'button', button: curButton}); gaps.push(default_gap); } diff --git a/core/flyout_button.js b/core/flyout_button.js index babcf97a5..7f6aedd26 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -39,10 +39,12 @@ goog.require('goog.math.Coordinate'); * @param {string} callbackKey The key to use when looking up the callback for a * click on this button. * @param {boolean} isLabel Whether this button should be styled as a label. + * @param {string=} opt_cssClass Optional parameter specifying a CSS class to + * add to this button. * @constructor */ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, - isLabel) { + isLabel, opt_cssClass) { /** * @type {!Blockly.WorkspaceSvg} * @private @@ -80,6 +82,13 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, * @private */ this.isLabel_ = isLabel; + + /** + * If specified, a CSS class to add to this button. + * @type {?string} + * @private + */ + this.cssClass_ = opt_cssClass || null; }; /** @@ -104,8 +113,12 @@ Blockly.FlyoutButton.prototype.height = 0; * @return {!Element} The button's SVG group. */ Blockly.FlyoutButton.prototype.createDom = function() { - this.svgGroup_ = Blockly.utils.createSvgElement('g', - {'class': this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton'}, + var cssClass = this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton'; + if (this.cssClass_) { + cssClass += ' ' + this.cssClass_; + } + + this.svgGroup_ = Blockly.createSvgElement('g', {'class': cssClass}, this.workspace_.getCanvas()); if (!this.isLabel_) { @@ -122,10 +135,14 @@ Blockly.FlyoutButton.prototype.createDom = function() { 'rx': 4, 'ry': 4}, this.svgGroup_); - var svgText = Blockly.utils.createSvgElement('text', - {'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText', - 'x': 0, 'y': 0, - 'text-anchor': 'middle'}, this.svgGroup_); + cssClass = this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText'; + if (this.isLabel_ && this.callback_) { + cssClass += ' clickable'; + } + + var svgText = Blockly.createSvgElement('text', + {'class': cssClass, 'x': 0, 'y': 0, 'text-anchor': 'middle'}, + this.svgGroup_); svgText.textContent = this.text_; this.width = svgText.getComputedTextLength() + diff --git a/tests/playground.html b/tests/playground.html index 8a7435915..06776887d 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -115,6 +115,7 @@ function start() { logEvents(false); } taChange(); + Blockly.registerButtonCallback('logStuff', function(){console.log('stuff!');}); } function getToolboxElement() { @@ -320,6 +321,11 @@ h1 { #importExport { font-family: monospace; } + +.ioLabel .blocklyFlyoutLabelText { + font-style: italic; +} + @@ -586,6 +592,7 @@ h1 { + From ff87c76557e2388d619a0a1be268f737afd71d67 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Thu, 10 Nov 2016 12:59:24 -0800 Subject: [PATCH 2/6] Don't make labels clickable --- core/css.js | 4 ---- core/flyout.js | 5 +---- core/flyout_button.js | 47 +++++++++++++++++++++++-------------------- tests/playground.html | 3 +-- 4 files changed, 27 insertions(+), 32 deletions(-) diff --git a/core/css.js b/core/css.js index 6512fd496..a4babe270 100644 --- a/core/css.js +++ b/core/css.js @@ -295,10 +295,6 @@ Blockly.Css.CONTENT = [ 'fill: #000;', '}', - '.blocklyFlyoutLabelText.clickable:hover {', - 'fill: #aaa;', - '}', - /* Don't allow users to select text. It gets annoying when trying to drag a block and selected text moves instead. diff --git a/core/flyout.js b/core/flyout.js index a1b16c425..ceeaf211c 100644 --- a/core/flyout.js +++ b/core/flyout.js @@ -702,11 +702,8 @@ Blockly.Flyout.prototype.show = function(xmlList) { } else if (tagName == 'BUTTON' || tagName == 'LABEL') { // Labels behave the same as buttons, but are styled differently. var isLabel = tagName == 'LABEL'; - var text = xml.getAttribute('text'); - var callbackKey = xml.getAttribute('callbackKey'); - var className = xml.getAttribute('class'); var curButton = new Blockly.FlyoutButton(this.workspace_, - this.targetWorkspace_, text, callbackKey, isLabel, className); + this.targetWorkspace_, xml, isLabel); contents.push({type: 'button', button: curButton}); gaps.push(default_gap); } diff --git a/core/flyout_button.js b/core/flyout_button.js index 7f6aedd26..93a934c0b 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -35,16 +35,13 @@ goog.require('goog.math.Coordinate'); * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this * button. * @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace. - * @param {string} text The text to display on the button. - * @param {string} callbackKey The key to use when looking up the callback for a - * click on this button. + * @param {!Element} xml The xml specifying the label/button. * @param {boolean} isLabel Whether this button should be styled as a label. - * @param {string=} opt_cssClass Optional parameter specifying a CSS class to - * add to this button. * @constructor */ -Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, - isLabel, opt_cssClass) { +Blockly.FlyoutButton = function(workspace, targetWorkspace, xml, isLabel) { + // Labels behave the same as buttons, but are styled differently. + /** * @type {!Blockly.WorkspaceSvg} * @private @@ -61,7 +58,7 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, * @type {string} * @private */ - this.text_ = text; + this.text_ = xml.getAttribute('text'); /** * @type {!goog.math.Coordinate} @@ -69,13 +66,6 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, */ this.position_ = new goog.math.Coordinate(0, 0); - /** - * Function to call when this button is clicked. - * @type {function(!Blockly.FlyoutButton)} - * @private - */ - this.callback_ = Blockly.flyoutButtonCallbacks_[callbackKey]; - /** * Whether this button should be styled as a label. * @type {boolean} @@ -83,12 +73,29 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, */ this.isLabel_ = isLabel; + /** + * Function to call when this button is clicked. + * @type {function(!Blockly.FlyoutButton)} + * @private + */ + this.callback_ = null; + + var callbackKey = xml.getAttribute('callbackKey'); + if (this.isLabel_ && callbackKey) { + console.log ('Labels should not have callbacks. Label text: ' + this.text_); + } else if (!this.isLabel_ && + !(callbackKey && Blockly.flyoutButtonCallbacks_[callbackKey])) { + console.log('Buttons should have callbacks. Button text: ' + this.text_); + } else { + this.callback_ = Blockly.flyoutButtonCallbacks_[callbackKey]; + } + /** * If specified, a CSS class to add to this button. * @type {?string} * @private */ - this.cssClass_ = opt_cssClass || null; + this.cssClass_ = xml.getAttribute('class') || null; }; /** @@ -135,13 +142,9 @@ Blockly.FlyoutButton.prototype.createDom = function() { 'rx': 4, 'ry': 4}, this.svgGroup_); - cssClass = this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText'; - if (this.isLabel_ && this.callback_) { - cssClass += ' clickable'; - } - var svgText = Blockly.createSvgElement('text', - {'class': cssClass, 'x': 0, 'y': 0, 'text-anchor': 'middle'}, + {'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText', + 'x': 0, 'y': 0, 'text-anchor': 'middle'}, this.svgGroup_); svgText.textContent = this.text_; diff --git a/tests/playground.html b/tests/playground.html index 06776887d..0167e89a1 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -115,7 +115,6 @@ function start() { logEvents(false); } taChange(); - Blockly.registerButtonCallback('logStuff', function(){console.log('stuff!');}); } function getToolboxElement() { @@ -592,7 +591,7 @@ h1 { - + From 1bac79791e27c5fdb2c6d1eaef55ecff33c9cee4 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 2 Dec 2016 11:31:38 -0800 Subject: [PATCH 3/6] console.log -> console.warn --- core/flyout_button.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/flyout_button.js b/core/flyout_button.js index 93a934c0b..93b1505a8 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -35,7 +35,7 @@ goog.require('goog.math.Coordinate'); * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this * button. * @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace. - * @param {!Element} xml The xml specifying the label/button. + * @param {!Element} xml The XML specifying the label/button. * @param {boolean} isLabel Whether this button should be styled as a label. * @constructor */ @@ -82,10 +82,10 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, xml, isLabel) { var callbackKey = xml.getAttribute('callbackKey'); if (this.isLabel_ && callbackKey) { - console.log ('Labels should not have callbacks. Label text: ' + this.text_); + console.warn('Labels should not have callbacks. Label text: ' + this.text_); } else if (!this.isLabel_ && !(callbackKey && Blockly.flyoutButtonCallbacks_[callbackKey])) { - console.log('Buttons should have callbacks. Button text: ' + this.text_); + console.warn('Buttons should have callbacks. Button text: ' + this.text_); } else { this.callback_ = Blockly.flyoutButtonCallbacks_[callbackKey]; } From 7b783dc30a10f5ca1c2904de780c2e29b548e31b Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 2 Dec 2016 14:08:50 -0800 Subject: [PATCH 4/6] change 'class' to 'web-style' --- core/flyout_button.js | 2 +- tests/playground.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/flyout_button.js b/core/flyout_button.js index 93b1505a8..ca3d49ab6 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -95,7 +95,7 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, xml, isLabel) { * @type {?string} * @private */ - this.cssClass_ = xml.getAttribute('class') || null; + this.cssClass_ = xml.getAttribute('web-style') || null; }; /** diff --git a/tests/playground.html b/tests/playground.html index 0167e89a1..66a3e2514 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -591,7 +591,7 @@ h1 { - + From 7f4efe4ebedec5f0f5e5c4fbc38e6ca5e0267a1a Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 2 Dec 2016 14:12:34 -0800 Subject: [PATCH 5/6] createSvgElement is now in utils. fix two calls. --- core/flyout_button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/flyout_button.js b/core/flyout_button.js index ca3d49ab6..baecd2fc8 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -125,7 +125,7 @@ Blockly.FlyoutButton.prototype.createDom = function() { cssClass += ' ' + this.cssClass_; } - this.svgGroup_ = Blockly.createSvgElement('g', {'class': cssClass}, + this.svgGroup_ = Blockly.utils.createSvgElement('g', {'class': cssClass}, this.workspace_.getCanvas()); if (!this.isLabel_) { @@ -142,7 +142,7 @@ Blockly.FlyoutButton.prototype.createDom = function() { 'rx': 4, 'ry': 4}, this.svgGroup_); - var svgText = Blockly.createSvgElement('text', + var svgText = Blockly.utils.createSvgElement('text', {'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText', 'x': 0, 'y': 0, 'text-anchor': 'middle'}, this.svgGroup_); From 729c442c31af3f0aa4918ba3b7ae1bc466cd829e Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Mon, 5 Dec 2016 15:14:02 -0800 Subject: [PATCH 6/6] lint --- core/flyout_button.js | 2 +- tests/playground.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/flyout_button.js b/core/flyout_button.js index baecd2fc8..4e3fd7ec7 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -95,7 +95,7 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, xml, isLabel) { * @type {?string} * @private */ - this.cssClass_ = xml.getAttribute('web-style') || null; + this.cssClass_ = xml.getAttribute('web-class') || null; }; /** diff --git a/tests/playground.html b/tests/playground.html index 66a3e2514..c728879e7 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -321,7 +321,7 @@ h1 { font-family: monospace; } -.ioLabel .blocklyFlyoutLabelText { +.ioLabel>.blocklyFlyoutLabelText { font-style: italic; } @@ -591,7 +591,7 @@ h1 { - +