Move datepicker CSS out of main codebase.

core/block.js

@@ -973,7 +973,8 @@ Blockly.Block.prototype.jsonInit = function(json) {
           field = new Blockly.FieldAngle(element['angle']);
           break;
         case 'field_checkbox':
-          field = new Blockly.FieldCheckbox(element['checked']);
+          field = new Blockly.FieldCheckbox(
+              element['checked'] ? 'TRUE' : 'FALSE');
           break;
         case 'field_colour':
           field = new Blockly.FieldColour(element['colour']);

core/css.js

@@ -79,6 +79,9 @@ Blockly.Css.inject = function(hasCss, pathToMedia) {
   var text = '.blocklyDraggable {}\n';
   if (hasCss) {
     text += Blockly.Css.CONTENT.join('\n');
+    if (Blockly.FieldDate) {
+      text += Blockly.FieldDate.CSS.join('\n');
+    }
   }
   // Strip off any trailing slash (either Unix or Windows).
   Blockly.Css.mediaPath_ = pathToMedia.replace(/[\\\/]$/, '');
@@ -514,161 +517,6 @@ Blockly.Css.CONTENT = [
   '  color: #fff;',
   '}',
 
-  /* Copied from: goog/css/datepicker.css */
-  /*
-   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
-   *
-   * Use of this source code is governed by the Apache License, Version 2.0.
-   * See the COPYING file for details.
-   */
-
-  /*
-   * Standard styling for a goog.ui.DatePicker.
-   *
-   * @author arv@google.com (Erik Arvidsson)
-   */
-
-  '.blocklyWidgetDiv .goog-date-picker,',
-  '.blocklyWidgetDiv .goog-date-picker th,',
-  '.blocklyWidgetDiv .goog-date-picker td {',
-  '  font: 13px Arial, sans-serif;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker {',
-  '  -moz-user-focus: normal;',
-  '  -moz-user-select: none;',
-  '  position: relative;',
-  '  border: 1px solid #000;',
-  '  float: left;',
-  '  padding: 2px;',
-  '  color: #000;',
-  '  background: #c3d9ff;',
-  '  cursor: default;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker th {',
-  '  text-align: center;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker td {',
-  '  text-align: center;',
-  '  vertical-align: middle;',
-  '  padding: 1px 3px;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-menu {',
-  '  position: absolute;',
-  '  background: threedface;',
-  '  border: 1px solid gray;',
-  '  -moz-user-focus: normal;',
-  '  z-index: 1;',
-  '  outline: none;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-menu ul {',
-  '  list-style: none;',
-  '  margin: 0px;',
-  '  padding: 0px;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-menu ul li {',
-  '  cursor: default;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-menu-selected {',
-  '  background: #ccf;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker th {',
-  '  font-size: .9em;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker td div {',
-  '  float: left;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker button {',
-  '  padding: 0px;',
-  '  margin: 1px 0;',
-  '  border: 0;',
-  '  color: #20c;',
-  '  font-weight: bold;',
-  '  background: transparent;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-date {',
-  '  background: #fff;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-week,',
-  '.blocklyWidgetDiv .goog-date-picker-wday {',
-  '  padding: 1px 3px;',
-  '  border: 0;',
-  '  border-color: #a2bbdd;',
-  '  border-style: solid;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-week {',
-  '  border-right-width: 1px;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-wday {',
-  '  border-bottom-width: 1px;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-head td {',
-  '  text-align: center;',
-  '}',
-
-  /** Use td.className instead of !important */
-  '.blocklyWidgetDiv td.goog-date-picker-today-cont {',
-  '  text-align: center;',
-  '}',
-
-  /** Use td.className instead of !important */
-  '.blocklyWidgetDiv td.goog-date-picker-none-cont {',
-  '  text-align: center;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-month {',
-  '  min-width: 11ex;',
-  '  white-space: nowrap;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-year {',
-  '  min-width: 6ex;',
-  '  white-space: nowrap;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-monthyear {',
-  '  white-space: nowrap;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker table {',
-  '  border-collapse: collapse;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-other-month {',
-  '  color: #888;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-wkend-start,',
-  '.blocklyWidgetDiv .goog-date-picker-wkend-end {',
-  '  background: #eee;',
-  '}',
-
-  /** Use td.className instead of !important */
-  '.blocklyWidgetDiv td.goog-date-picker-selected {',
-  '  background: #c3d9ff;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-date-picker-today {',
-  '  background: #9ab;',
-  '  font-weight: bold !important;',
-  '  border-color: #246 #9bd #9bd #246;',
-  '  color: #fff;',
-  '}',
-
   /* Copied from: goog/css/menu.css */
   /*
    * Copyright 2009 The Closure Library Authors. All Rights Reserved.

core/field_date.js

@@ -197,3 +197,160 @@ Blockly.FieldDate.loadLanguage_ = function() {
     }
   }
 };
+
+Blockly.FieldDate.CSS = [
+  /* Copied from: goog/css/datepicker.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /*
+   * Standard styling for a goog.ui.DatePicker.
+   *
+   * @author arv@google.com (Erik Arvidsson)
+   */
+
+  '.blocklyWidgetDiv .goog-date-picker,',
+  '.blocklyWidgetDiv .goog-date-picker th,',
+  '.blocklyWidgetDiv .goog-date-picker td {',
+  '  font: 13px Arial, sans-serif;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker {',
+  '  -moz-user-focus: normal;',
+  '  -moz-user-select: none;',
+  '  position: relative;',
+  '  border: 1px solid #000;',
+  '  float: left;',
+  '  padding: 2px;',
+  '  color: #000;',
+  '  background: #c3d9ff;',
+  '  cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker th {',
+  '  text-align: center;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker td {',
+  '  text-align: center;',
+  '  vertical-align: middle;',
+  '  padding: 1px 3px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu {',
+  '  position: absolute;',
+  '  background: threedface;',
+  '  border: 1px solid gray;',
+  '  -moz-user-focus: normal;',
+  '  z-index: 1;',
+  '  outline: none;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu ul {',
+  '  list-style: none;',
+  '  margin: 0px;',
+  '  padding: 0px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu ul li {',
+  '  cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu-selected {',
+  '  background: #ccf;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker th {',
+  '  font-size: .9em;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker td div {',
+  '  float: left;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker button {',
+  '  padding: 0px;',
+  '  margin: 1px 0;',
+  '  border: 0;',
+  '  color: #20c;',
+  '  font-weight: bold;',
+  '  background: transparent;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-date {',
+  '  background: #fff;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-week,',
+  '.blocklyWidgetDiv .goog-date-picker-wday {',
+  '  padding: 1px 3px;',
+  '  border: 0;',
+  '  border-color: #a2bbdd;',
+  '  border-style: solid;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-week {',
+  '  border-right-width: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-wday {',
+  '  border-bottom-width: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-head td {',
+  '  text-align: center;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-today-cont {',
+  '  text-align: center;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-none-cont {',
+  '  text-align: center;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-month {',
+  '  min-width: 11ex;',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-year {',
+  '  min-width: 6ex;',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-monthyear {',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker table {',
+  '  border-collapse: collapse;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-other-month {',
+  '  color: #888;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-wkend-start,',
+  '.blocklyWidgetDiv .goog-date-picker-wkend-end {',
+  '  background: #eee;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-selected {',
+  '  background: #c3d9ff;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-today {',
+  '  background: #9ab;',
+  '  font-weight: bold !important;',
+  '  border-color: #246 #9bd #9bd #246;',
+  '  color: #fff;',
+  '}'
+];

demos/blockfactory/factory.js

@@ -368,14 +368,14 @@ function getFieldsJson_(block) {
           fields.push({
             type: block.type,
             name: block.getFieldValue('FIELDNAME'),
-            angle: block.getFieldValue('ANGLE')
+            angle: Number(block.getFieldValue('ANGLE'))
           });
           break;
         case 'field_checkbox':
           fields.push({
             type: block.type,
             name: block.getFieldValue('FIELDNAME'),
-            checked: block.getFieldValue('CHECKED')
+            checked: block.getFieldValue('CHECKED') == 'TRUE'
           });
           break;
         case 'field_colour':
@@ -416,7 +416,6 @@ function getFieldsJson_(block) {
         case 'field_image':
           fields.push({
             type: block.type,
-            name: block.getFieldValue('FIELDNAME'),
             src: block.getFieldValue('SRC'),
             width: Number(block.getFieldValue('WIDTH')),
             height: Number(block.getFieldValue('HEIGHT')),
@@ -603,14 +602,18 @@ function updatePreview() {
   if (Blockly.Blocks[blockType]) {
     throw 'Block name collides with existing property: ' + blockType;
   }
-  var code = document.getElementById('languagePre').textContent;
+  var code = document.getElementById('languagePre').textContent.trim();
+  if (!code) {
+    // Nothing to render.  Happens while cloud storage is loading.
+    return;
+  }
   var format = document.getElementById('format').value;
   if (format == 'JSON') {
     Blockly.Blocks[blockType] = {
       init: function() {
         this.jsonInit(JSON.parse(code));
       }
-    };;
+    };
   } else if (format == 'JavaScript') {
     eval(code);
   } else {