Allow creation of buttons with developer-designated callbacks

core/blockly.js

@@ -117,6 +117,28 @@ Blockly.clipboardSource_ = null;
  */
 Blockly.dragMode_ = Blockly.DRAG_NONE;
 
+/**
+ * Map from function names to callbacks, for deciding what to do when a button
+ * is clicked.
+ * @type {!Object<string, function(!Blockly.FlyoutButton)}
+ */
+Blockly.flyoutButtonCallbacks_ = {};
+
+/**
+ * Register a callback function associated with a given key, for clicks on
+ * buttons and labels in the flyout.
+ * For instance, a button specified by the xml
+ * <button text="create variable" callbackKey="CREATE_VARIABLE"></button>
+ * should be matched by a call to
+ * registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
+ * @param {string} key The name to use to look up this function.
+ * @param {function(!Blockly.FlyoutButton)} func The function to call when the
+ *     given button is clicked.
+ */
+Blockly.registerButtonCallback = function(key, func) {
+  Blockly.flyoutButtonCallbacks_[key] = func;
+};
+
 /**
  * Convert a hue (HSV model) into an RGB hex triplet.
  * @param {number} hue Hue on a colour wheel (0-360).
@@ -342,7 +364,7 @@ Blockly.getMainWorkspace = function() {
 };
 
 /**
- * Wrapper to window.alert() that app developers may override to 
+ * Wrapper to window.alert() that app developers may override to
  * provide alternatives to the modal browser window.
  * @param {string} message The message to display to the user.
  * @param {function()=} opt_callback The callback when the alert is dismissed.
@@ -355,7 +377,7 @@ Blockly.alert = function(message, opt_callback) {
 };
 
 /**
- * Wrapper to window.confirm() that app developers may override to 
+ * Wrapper to window.confirm() that app developers may override to
  * provide alternatives to the modal browser window.
  * @param {string} message The message to display to the user.
  * @param {!function(boolean)} callback The callback for handling user response.

core/flyout.js

@@ -700,8 +700,9 @@ Blockly.Flyout.prototype.show = function(xmlList) {
         }
       } else if (tagName == 'BUTTON') {
         var label = xml.getAttribute('text');
+        var callback_key = xml.getAttribute('callbackKey');
         var curButton = new Blockly.FlyoutButton(this.workspace_,
-            this.targetWorkspace_, label);
+            this.targetWorkspace_, label, callback_key);
         contents.push({type: 'button', button: curButton});
         gaps.push(default_gap);
       }

core/flyout_button.js

@@ -32,15 +32,15 @@ goog.require('goog.math.Coordinate');
 
 /**
  * Class for a button in the flyout.
- * @param {!Blockly.Workspace} workspace The workspace in which to place this
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this
  *     button.
- * @param {!Blockly.Workspace} targetWorkspace The flyout's target workspace.
+ * @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace.
  * @param {string} text The text to display on the button.
  * @constructor
  */
-Blockly.FlyoutButton = function(workspace, targetWorkspace, text) {
+Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callback_key) {
   /**
-   * @type {!Blockly.Workspace}
+   * @type {!Blockly.WorkspaceSvg}
    * @private
    */
   this.workspace_ = workspace;
@@ -62,6 +62,13 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text) {
    * @private
    */
   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_[callback_key];
 };
 
 /**
@@ -148,6 +155,15 @@ Blockly.FlyoutButton.prototype.moveTo = function(x, y) {
   this.updateTransform_();
 };
 
+/**
+ * Get the button's target workspace.
+ * @return {!Blockly.WorkspaceSvg} The target workspace of the flyout where this
+ *     button resides.
+ */
+Blockly.FlyoutButton.prototype.getTargetWorkspace = function() {
+  return this.targetWorkspace_;
+};
+
 /**
  * Dispose of this button.
  */
@@ -172,5 +188,7 @@ Blockly.FlyoutButton.prototype.onMouseUp = function(e) {
   // Stop binding to mouseup and mousemove events--flyout mouseup would normally
   // do this, but we're skipping that.
   Blockly.Flyout.terminateDrag_();
-  Blockly.Variables.createVariable(this.targetWorkspace_);
+
+  // Call the callback registered to this button.
+  this.callback_(this);
 };

core/toolbox.js

@@ -362,6 +362,7 @@ Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, pathToMedia) {
         break;
       case 'BLOCK':
       case 'SHADOW':
+      case 'BUTTON':
         treeOut.blocks.push(childIn);
         lastElement = childIn;
         break;

core/variables.js

@@ -103,6 +103,12 @@ Blockly.Variables.flyoutCategory = function(workspace) {
   var xmlList = [];
   var button = goog.dom.createDom('button');
   button.setAttribute('text', Blockly.Msg.NEW_VARIABLE);
+  button.setAttribute('callbackKey', 'CREATE_VARIABLE');
+
+  Blockly.registerButtonCallback('CREATE_VARIABLE', function(button) {
+    Blockly.Variables.createVariable(button.getTargetWorkspace());
+  });
+
   xmlList.push(button);
 
   if (variableList.length > 0) {