mirror of
https://github.com/scratchfoundation/scratch-blocks.git
synced 2025-08-28 22:10:31 -04:00
Add a new FieldDate input type
This commit is contained in:
Paul Kendall
parent
984d35593e
commit
b3b9ef8ce3
3 changed files with 327 additions and 0 deletions
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
155
core/css.js
155
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.
|
||||
|
|
|
|||
170
core/field_date.js
Normal file
170
core/field_date.js
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
/**
|
||||
* @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_);
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue