Merge pull request #60 from orionhealth/date-field

Add a new FieldDate input type

core/blockly.js

@@ -33,6 +33,7 @@ goog.require('Blockly.Connection');
 goog.require('Blockly.FieldAngle');
 goog.require('Blockly.FieldCheckbox');
 goog.require('Blockly.FieldColour');
+goog.require('Blockly.FieldDate');
 goog.require('Blockly.FieldDropdown');
 goog.require('Blockly.FieldImage');
 goog.require('Blockly.FieldTextInput');
@@ -53,6 +54,7 @@ goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('goog.string');
 goog.require('goog.ui.ColorPicker');
+goog.require('goog.ui.DatePicker');
 goog.require('goog.ui.tree.TreeControl');
 goog.require('goog.userAgent');
 

core/css.js

@@ -527,6 +527,161 @@ 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

+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Date input field.
+ * @author pkendall64@gmail.com (Paul Kendall)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldDate');
+
+goog.require('Blockly.Field');
+goog.require('goog.ui.DatePicker');
+
+
+/**
+ * Class for a date input field.
+ * @param {string} date The initial date.
+ * @param {Function} opt_changeHandler A function that is executed when a new
+ *     date is selected.  Its sole argument is the new date value.  Its
+ *     return value becomes the selected date, unless it is undefined, in
+ *     which case the new date stands, or it is null, in which case the change
+ *     is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldDate = function(date, opt_changeHandler) {
+  if (!date) {
+    date = new goog.date.Date().toIsoString(true);
+  }
+  Blockly.FieldDate.superClass_.constructor.call(this, date);
+  this.setValue(date);
+  this.changeHandler_ = opt_changeHandler;
+};
+goog.inherits(Blockly.FieldDate, Blockly.Field);
+
+/**
+ * Clone this FieldDate.
+ * @return {!Blockly.FieldDate} The result of calling the constructor again
+ *   with the current values of the arguments used during construction.
+ */
+Blockly.FieldDate.prototype.clone = function() {
+  return new Blockly.FieldDate(this.getValue(), this.changeHandler_);
+};
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldDate.prototype.CURSOR = 'text';
+
+/**
+ * Close the colour picker if this input is being deleted.
+ */
+Blockly.FieldDate.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldDate.superClass_.dispose.call(this);
+};
+
+/**
+ * Return the current date.
+ * @return {string} Current date.
+ */
+Blockly.FieldDate.prototype.getValue = function() {
+  return this.date_;
+};
+
+/**
+ * Set the date.
+ * @param {string} date The new date.
+ */
+Blockly.FieldDate.prototype.setValue = function(date) {
+  if (this.sourceBlock_ && this.changeHandler_) {
+    var validated = this.changeHandler_(date);
+    // If the new date is invalid, validation returns null.
+    // In this case we still want to display the illegal result.
+    if (validated !== null && validated !== undefined) {
+      date = validated;
+    }
+  }
+  this.date_ = date;
+  Blockly.Field.prototype.setText.call(this, date);
+};
+
+/**
+ * Create a date picker under the date field.
+ * @private
+ */
+Blockly.FieldDate.prototype.showEditor_ = function() {
+  Blockly.WidgetDiv.show(this, Blockly.FieldDate.widgetDispose_);
+  // Create the date picker using Closure.
+  var picker = new goog.ui.DatePicker();
+
+  // Position the picker to line up with the field.
+  // Record windowSize and scrollOffset before adding the picker.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var xy = Blockly.getAbsoluteXY_(/** @type {!Element} */ (this.borderRect_));
+  var borderBBox = this.borderRect_.getBBox();
+  var div = Blockly.WidgetDiv.DIV;
+  picker.render(div);
+  picker.setDate(goog.date.fromIsoString(this.getValue()));
+  // Record pickerSize after adding the date picker.
+  var pickerSize = goog.style.getSize(picker.getElement());
+
+  // Flip the picker vertically if off the bottom.
+  if (xy.y + pickerSize.height + borderBBox.height >=
+      windowSize.height + scrollOffset.y) {
+    xy.y -= pickerSize.height - 1;
+  } else {
+    xy.y += borderBBox.height - 1;
+  }
+  if (Blockly.RTL) {
+    xy.x += borderBBox.width;
+    xy.x -= pickerSize.width;
+    // Don't go offscreen left.
+    if (xy.x < scrollOffset.x) {
+      xy.x = scrollOffset.x;
+    }
+  } else {
+    // Don't go offscreen right.
+    if (xy.x > windowSize.width + scrollOffset.x - pickerSize.width) {
+      xy.x = windowSize.width + scrollOffset.x - pickerSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset);
+
+  // Configure event handler.
+  var thisField = this;
+  Blockly.FieldDate.changeEventKey_ = goog.events.listen(picker,
+      goog.ui.DatePicker.Events.CHANGE,
+      function(event) {
+        var date = event.date ? event.date.toIsoString(true) : '';
+        Blockly.WidgetDiv.hide();
+        if (thisField.sourceBlock_ && thisField.changeHandler_) {
+          // Call any change handler, and allow it to override.
+          var override = thisField.changeHandler_(date);
+          if (override !== undefined) {
+            date = override;
+          }
+        }
+        thisField.setValue(date);
+      });
+};
+
+/**
+ * Hide the date picker.
+ * @private
+ */
+Blockly.FieldDate.widgetDispose_ = function() {
+  if (Blockly.FieldDate.changeEventKey_) {
+    goog.events.unlistenByKey(Blockly.FieldDate.changeEventKey_);
+  }
+};