fix: update demo fields for blockly v10 and remove closure modules

examples/pitch-field-demo/blocks.js

@@ -13,7 +13,7 @@ Blockly.Blocks['test_pitch_field'] = {
   init: function() {
     this.appendDummyInput()
         .appendField('pitch')
-        .appendField(new CustomFields.FieldPitch('7'), 'PITCH');
+        .appendField(new FieldPitch('7'), 'PITCH');
     this.setStyle('loop_blocks');
-  }
+  },
 };

examples/pitch-field-demo/field_pitch.js

@@ -6,21 +6,10 @@
  */
 
 /**
- * @fileoverview Music pitch input field. Borrowed from Blockly Games.
- * @author [email protected] (Neil Fraser)
- * @author [email protected] (Sam El-Husseini)
+ * @fileoverview Music pitch input field. Based on the field in Blockly Games.
  */
 'use strict';
 
-goog.provide('CustomFields.FieldPitch');
-
-goog.require('Blockly.browserEvents');
-goog.require('Blockly.FieldTextInput');
-goog.require('Blockly.utils.math');
-
-
-var CustomFields = CustomFields || {};
-
 /**
  * Class for an editable pitch field.
  * @param {string} text The initial content of the field.
@@ -68,7 +57,7 @@ class FieldPitch extends Blockly.FieldTextInput {
   showEditor_() {
     super.showEditor_();
 
-    const div = Blockly.WidgetDiv.DIV;
+    const div = Blockly.WidgetDiv.getDiv();
     if (!div.firstChild) {
       // Mobile interface uses Blockly.dialog.setPrompt().
       return;
@@ -78,21 +67,21 @@ class FieldPitch extends Blockly.FieldTextInput {
     Blockly.DropDownDiv.getContentDiv().appendChild(editor);
 
     Blockly.DropDownDiv.setColour(this.sourceBlock_.style.colourPrimary,
-      this.sourceBlock_.style.colourTertiary);
+        this.sourceBlock_.style.colourTertiary);
 
     Blockly.DropDownDiv.showPositionedByField(
-      this, this.dropdownDispose_.bind(this));
+        this, this.dropdownDispose_.bind(this));
 
     // The pitch picker is different from other fields in that it updates on
     // mousemove even if it's not in the middle of a drag.  In future we may
     // change this behaviour.  For now, using `bind` instead of
     // `conditionalBind` allows it to work without a mousedown/touchstart.
     this.boundEvents_.push(
         Blockly.browserEvents.bind(this.imageElement_, 'click', this,
-        this.hide_));
+            this.hide_));
     this.boundEvents_.push(
         Blockly.browserEvents.bind(this.imageElement_, 'mousemove', this,
-        this.onMouseMove));
+            this.onMouseMove));
 
     this.updateGraph_();
   }
@@ -234,5 +223,3 @@ class FieldPitch extends Blockly.FieldTextInput {
 }
 
 Blockly.fieldRegistry.register('field_pitch', FieldPitch);
-
-CustomFields.FieldPitch = FieldPitch;

examples/pitch-field-demo/index.html

@@ -5,12 +5,6 @@
     <title>Blockly Demo: Custom Pitch Field</title>
     <script src="./node_modules/blockly/blockly_compressed.js"></script>
     <script src="blocks.js"></script>
-    <script>
-      var goog = {
-        provide: function() {},
-        require: function() {}
-      };
-    </script>
     <script src="field_pitch.js"></script>
     <script src="./node_modules/blockly/msg/en.js"></script>
     <style>

examples/turtle-field-demo/blocks.js

@@ -15,7 +15,7 @@ Blockly.Blocks['turtle_basic'] = {
         .appendField('simple turtle');
     this.appendDummyInput()
         .setAlign(Blockly.ALIGN_CENTRE)
-        .appendField(new CustomFields.FieldTurtle(), 'TURTLE');
+        .appendField(new FieldTurtle(), 'TURTLE');
     this.setStyle('loop_blocks');
     this.setCommentText('Demonstrates a turtle field with no validator.');
   }
@@ -27,7 +27,7 @@ Blockly.Blocks['turtle_nullifier'] = {
         .appendField('no trademarks');
     this.appendDummyInput()
         .setAlign(Blockly.ALIGN_CENTRE)
-        .appendField(new CustomFields.FieldTurtle(null, null, null, this.validate)
+        .appendField(new FieldTurtle(null, null, null, this.validate)
             , 'TURTLE');
     this.setStyle('loop_blocks');
     this.setCommentText('Validates combinations of names and hats to null' +
@@ -67,16 +67,16 @@ Blockly.Blocks['turtle_changer'] = {
       .setAlign(Blockly.ALIGN_CENTRE)
         .appendField('force hats');
     this.appendDummyInput()
-        .appendField(new CustomFields.FieldTurtle(
-            'Dots', 'Crown', 'Yertle',  this.validate), 'TURTLE');
+        .appendField(new FieldTurtle(
+            'Dots', 'Crown', 'Yertle', this.validate), 'TURTLE');
     this.setStyle('loop_blocks');
     this.setCommentText('Validates the input so that certain names always' +
       ' have specific hats. The name-hat combinations are: (Leonardo, Mask),' +
       ' (Yertle, Crown), (Franklin, Propeller).');
   },
 
   validate: function(newValue) {
-    switch(newValue.turtleName) {
+    switch (newValue.turtleName) {
       case 'Leonardo':
         newValue.hat = 'Mask';
         break;
@@ -88,5 +88,5 @@ Blockly.Blocks['turtle_changer'] = {
         break;
     }
     return newValue;
-  }
+  },
 };

examples/turtle-field-demo/field_turtle.js

@@ -10,19 +10,6 @@
  */
 'use strict';
 
-// You must provide the constructor for your custom field.
-goog.provide('CustomFields.FieldTurtle');
-
-// You must require the abstract field class to inherit from.
-goog.require('Blockly.Field');
-goog.require('Blockly.fieldRegistry');
-goog.require('Blockly.utils');
-goog.require('Blockly.utils.dom');
-goog.require('Blockly.utils.object');
-goog.require('Blockly.utils.Size');
-
-var CustomFields = CustomFields || {};
-
 class FieldTurtle extends Blockly.Field {
   // Since this field is editable we must also define serializable as true
   // (for backwards compatibility reasons serializable is false by default).
@@ -732,5 +719,3 @@ class FieldTurtle extends Blockly.Field {
 // Blockly needs to know the JSON name of this field. Usually this is
 // registered at the bottom of the field class.
 Blockly.fieldRegistry.register('field_turtle', FieldTurtle);
-
-CustomFields.FieldTurtle = FieldTurtle;

examples/turtle-field-demo/index.html

@@ -5,12 +5,6 @@
     <title>Blockly Demo: Custom Turtle Field</title>
     <script src="./node_modules/blockly/blockly_compressed.js"></script>
     <script src="blocks.js"></script>
-    <script>
-      var goog = {
-        provide: function() {},
-        require: function() {}
-      };
-    </script>
     <script src="field_turtle.js"></script>
     <script src="https://unpkg.com/blockly/msg/en.js"></script>
     <style>