CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-04 15:40:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Clean out the date field (#3876)

Browse Source
This commit is contained in:
Sam El-Husseini
2020-05-06 09:42:24 -07:00
committed by GitHub
parent 1e251e812b
commit 888e348c69
14 changed files with 0 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
core/field_date.js
View File

@@ -1,344 +0,0 @@
/**
* @license
* Copyright 2015 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Date input field.
* @author pkendall64@gmail.com (Paul Kendall)
*/
'use strict';
goog.provide('Blockly.FieldDate');
goog.require('Blockly.Css');
goog.require('Blockly.Events');
goog.require('Blockly.Field');
goog.require('Blockly.fieldRegistry');
goog.require('Blockly.utils.dom');
goog.require('Blockly.utils.object');
goog.require('Blockly.utils.string');
goog.require('goog.date');
goog.require('goog.date.DateTime');
goog.require('goog.events');
goog.require('goog.i18n.DateTimeSymbols');
goog.require('goog.i18n.DateTimeSymbols_he');
goog.require('goog.ui.DatePicker');
/**
* Class for a date input field.
* @param {string=} opt_value The initial value of the field. Should be in
* 'YYYY-MM-DD' format. Defaults to the current date.
* @param {Function=} opt_validator A function that is called to validate
* changes to the field's value. Takes in a date string & returns a
* validated date string ('YYYY-MM-DD' format), or null to abort the change.
* @extends {Blockly.Field}
* @constructor
*/
Blockly.FieldDate = function(opt_value, opt_validator) {
Blockly.FieldDate.superClass_.constructor.call(this,
opt_value || new goog.date.Date().toIsoString(true), opt_validator);
};
Blockly.utils.object.inherits(Blockly.FieldDate, Blockly.Field);
/**
* Construct a FieldDate from a JSON arg object.
* @param {!Object} options A JSON object with options (date).
* @return {!Blockly.FieldDate} The new field instance.
* @package
* @nocollapse
*/
Blockly.FieldDate.fromJson = function(options) {
return new Blockly.FieldDate(options['date']);
};
/**
* Serializable fields are saved by the XML renderer, non-serializable fields
* are not. Editable fields should also be serializable.
* @type {boolean}
*/
Blockly.FieldDate.prototype.SERIALIZABLE = true;
/**
* Mouse cursor style when over the hotspot that initiates the editor.
*/
Blockly.FieldDate.prototype.CURSOR = 'text';
/**
* Border colour for the dropdown div showing the date picker. Must be a CSS
* string.
* @type {string}
* @private
*/
Blockly.FieldDate.prototype.DROPDOWN_BORDER_COLOUR = 'silver';
/**
* Background colour for the dropdown div showing the date picker. Must be a
* CSS string.
* @type {string}
* @private
*/
Blockly.FieldDate.prototype.DROPDOWN_BACKGROUND_COLOUR = 'white';
/**
* Ensure that the input value is a valid date.
* @param {*=} opt_newValue The input value.
* @return {?string} A valid date, or null if invalid.
* @protected
*/
Blockly.FieldDate.prototype.doClassValidation_ = function(opt_newValue) {
if (!opt_newValue) {
return null;
}
// Check if the new value is parsable or not.
var date = goog.date.Date.fromIsoString(opt_newValue);
if (!date || date.toIsoString(true) != opt_newValue) {
return null;
}
return opt_newValue;
};
/**
* Render the field. If the picker is shown make sure it has the current
* date selected.
* @protected
*/
Blockly.FieldDate.prototype.render_ = function() {
Blockly.FieldDate.superClass_.render_.call(this);
if (this.picker_) {
this.picker_.setDate(goog.date.Date.fromIsoString(this.getValue()));
this.updateEditor_();
}
};
/**
* Updates the field's colours to match those of the block.
* @package
*/
Blockly.FieldDate.prototype.applyColour = function() {
this.todayColour_ = this.sourceBlock_.style.colourPrimary;
this.selectedColour_ = this.sourceBlock_.style.colourSecondary;
this.updateEditor_();
};
/**
* Updates the picker to show the current date and currently selected date.
* @private
*/
Blockly.FieldDate.prototype.updateEditor_ = function() {
if (!this.picker_) {
// Nothing to update.
return;
}
// Updating today should come before updating selected, so that if the
// current day is selected, it will appear so.
if (this.oldTodayElement_) {
this.oldTodayElement_.style.backgroundColor = null;
this.oldTodayElement_.style.color = null;
}
var today = this.picker_.getElementByClass('goog-date-picker-today');
this.oldTodayElement_ = today;
if (today) {
today.style.backgroundColor = this.todayColour_;
today.style.color = 'white';
}
if (this.oldSelectedElement_ && this.oldSelectedElement_ != today) {
this.oldSelectedElement_.style.backgroundColor = null;
this.oldSelectedElement_.style.color = null;
}
var selected = this.picker_.getElementByClass('goog-date-picker-selected');
this.oldSelectedElement_ = selected;
if (selected) {
selected.style.backgroundColor = this.selectedColour_;
selected.style.color = this.todayColour_;
}
};
/**
* Create and show the date field's editor.
* @private
*/
Blockly.FieldDate.prototype.showEditor_ = function() {
this.picker_ = this.dropdownCreate_();
this.picker_.render(Blockly.DropDownDiv.getContentDiv());
Blockly.utils.dom.addClass(this.picker_.getElement(), 'blocklyDatePicker');
Blockly.DropDownDiv.setColour(
this.DROPDOWN_BACKGROUND_COLOUR, this.DROPDOWN_BORDER_COLOUR);
Blockly.DropDownDiv.showPositionedByField(
this, this.dropdownDispose_.bind(this));
this.updateEditor_();
};
/**
* Create the date dropdown editor.
* @return {!goog.ui.DatePicker} The newly created date picker.
* @private
*/
Blockly.FieldDate.prototype.dropdownCreate_ = function() {
// Create the date picker using Closure.
Blockly.FieldDate.loadLanguage_();
var picker = new goog.ui.DatePicker();
picker.setAllowNone(false);
picker.setShowWeekNum(false);
picker.setUseNarrowWeekdayNames(true);
picker.setUseSimpleNavigationMenu(true);
picker.setDate(goog.date.DateTime.fromIsoString(this.getValue()));
this.changeEventKey_ = goog.events.listen(
picker,
goog.ui.DatePicker.Events.CHANGE,
this.onDateSelected_,
null,
this);
this.activeMonthEventKey_ = goog.events.listen(
picker,
goog.ui.DatePicker.Events.CHANGE_ACTIVE_MONTH,
this.updateEditor_,
null,
this);
return picker;
};
/**
* Dispose of references to DOM elements and events belonging
* to the date editor.
* @private
*/
Blockly.FieldDate.prototype.dropdownDispose_ = function() {
goog.events.unlistenByKey(this.changeEventKey_);
goog.events.unlistenByKey(this.activeMonthEventKey_);
};
/**
* Handle a CHANGE event in the date picker.
* @param {!Event} event The CHANGE event.
* @private
*/
Blockly.FieldDate.prototype.onDateSelected_ = function(event) {
var date = event.date ? event.date.toIsoString(true) : '';
this.setValue(date);
Blockly.DropDownDiv.hideIfOwner(this);
};
/**
* Load the best language pack by scanning the Blockly.Msg object for a
* language that matches the available languages in Closure.
* @private
*/
Blockly.FieldDate.loadLanguage_ = function() {
for (var prop in goog.i18n) {
if (Blockly.utils.string.startsWith(prop, 'DateTimeSymbols_')) {
var lang = prop.substr(16).toLowerCase().replace('_', '.');
// E.g. 'DateTimeSymbols_pt_BR' -> 'pt.br'
if (goog.getObjectByName(lang, Blockly.Msg)) {
goog.i18n.DateTimeSymbols = goog.i18n[prop];
break;
}
}
}
};
/**
* CSS for date picker. See css.js for use.
*/
Blockly.Css.register([
/* eslint-disable indent */
'.blocklyDatePicker,',
'.blocklyDatePicker th,',
'.blocklyDatePicker td {',
'font: 13px Arial, sans-serif;',
'color: #3c4043;',
'}',
'.blocklyDatePicker th,',
'.blocklyDatePicker td {',
'text-align: center;',
'vertical-align: middle;',
'}',
'.blocklyDatePicker .goog-date-picker-wday,',
'.blocklyDatePicker .goog-date-picker-date {',
'padding: 6px 6px;',
'}',
'.blocklyDatePicker button {',
'cursor: pointer;',
'padding: 6px 6px;',
'margin: 1px 0;',
'border: 0;',
'color: #3c4043;',
'font-weight: bold;',
'background: transparent;',
'}',
'.blocklyDatePicker .goog-date-picker-previousMonth,',
'.blocklyDatePicker .goog-date-picker-nextMonth {',
'height: 24px;',
'width: 24px;',
'}',
'.blocklyDatePicker .goog-date-picker-monthyear {',
'font-weight: bold;',
'}',
'.blocklyDatePicker .goog-date-picker-wday, ',
'.blocklyDatePicker .goog-date-picker-other-month {',
'color: #70757a;',
'border-radius: 12px;',
'}',
'.blocklyDatePicker button,',
'.blocklyDatePicker .goog-date-picker-date {',
'cursor: pointer;',
'background-color: rgb(218, 220, 224, 0);',
'border-radius: 12px;',
'transition: background-color,opacity 100ms linear;',
'}',
'.blocklyDatePicker button:hover,',
'.blocklyDatePicker .goog-date-picker-date:hover {',
'background-color: rgb(218, 220, 224, .5);',
'}'
/* eslint-enable indent */
]);
Blockly.fieldRegistry.register('field_date', Blockly.FieldDate);
/**
* Back up original getMsg function.
* @type {!Function}
*/
goog.getMsgOrig = goog.getMsg;
/**
* Gets a localized message.
* Overrides the default Closure function to check for a Blockly.Msg first.
* Used infrequently, only known case is TODAY button in date picker.
* @param {string} str Translatable string, places holders in the form {$foo}.
* @param {Object.<string, string>=} opt_values Maps place holder name to value.
* @return {string} Message with placeholders filled.
* @suppress {duplicate}
*/
goog.getMsg = function(str, opt_values) {
var key = goog.getMsg.blocklyMsgMap[str];
if (key) {
str = Blockly.Msg[key];
}
return goog.getMsgOrig(str, opt_values);
};
/**
* Mapping of Closure messages to Blockly.Msg names.
*/
goog.getMsg.blocklyMsgMap = {
'Today': 'TODAY'
};

7
core/requires.js
View File

@@ -63,13 +63,6 @@ goog.require('Blockly.FieldMultilineInput');
goog.require('Blockly.FieldNumber');
goog.require('Blockly.FieldVariable');
// If you'd like to include the date field in your build, you will also need to
// include the Closure library as a build dependency. You can do so by running:
// gulp build-compressed --closure-library
// Be sure to also include "google-closure-library" to your list of
// devDependencies.
// goog.require('Blockly.FieldDate');
// Blockly Renderers.
// At least one renderer is mandatory. Geras is the default one.

18
demos/blockfactory/blocks.js
View File

@@ -559,24 +559,6 @@ Blockly.Blocks['field_colour'] = {
}
};
Blockly.Blocks['field_date'] = {
// Date input.
init: function() {
this.setColour(160);
this.appendDummyInput()
.appendField('date')
.appendField(new Blockly.FieldDate(), 'DATE')
.appendField(',')
.appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
this.setPreviousStatement(true, 'Field');
this.setNextStatement(true, 'Field');
this.setTooltip('Date input field.');
},
onchange: function() {
fieldNameCheck(this);
}
};
Blockly.Blocks['field_variable'] = {
// Dropdown for variables.
init: function() {

17
demos/blockfactory/factory_utils.js
View File

@@ -103,10 +103,6 @@ FactoryUtils.getGeneratorStub = function(block, generatorLanguage) {
// Subclass of Blockly.FieldTextInput, must test first.
code.push(makeVar('angle', name) +
" = block.getFieldValue('" + name + "');");
} else if (Blockly.FieldDate && field instanceof Blockly.FieldDate) {
// Blockly.FieldDate may not be compiled into Blockly.
code.push(makeVar('date', name) +
" = block.getFieldValue('" + name + "');");
} else if (field instanceof Blockly.FieldColour) {
code.push(makeVar('colour', name) +
" = block.getFieldValue('" + name + "');");
@@ -446,12 +442,6 @@ FactoryUtils.getFieldsJs_ = function(block) {
'), ' +
JSON.stringify(block.getFieldValue('FIELDNAME')));
break;
case 'field_date':
// Result: new Blockly.FieldDate('2015-02-04'), 'DATE'
fields.push('new Blockly.FieldDate(' +
JSON.stringify(block.getFieldValue('DATE')) + '), ' +
JSON.stringify(block.getFieldValue('FIELDNAME')));
break;
case 'field_variable':
// Result: new Blockly.FieldVariable('item'), 'VAR'
var varname
@@ -561,13 +551,6 @@ FactoryUtils.getFieldsJson_ = function(block) {
colour: block.getFieldValue('COLOUR')
});
break;
case 'field_date':
fields.push({
type: block.type,
name: block.getFieldValue('FIELDNAME'),
date: block.getFieldValue('DATE')
});
break;
case 'field_variable':
fields.push({
type: block.type,

5
demos/blockfactory/index.html
View File

@@ -430,11 +430,6 @@
<block type="field_dropdown"></block>
<block type="field_checkbox"></block>
<block type="field_colour"></block>
<!--
Date picker commented out since it increases footprint by 60%.
Add it only if you need it. See also goog.require in blockly.js.
<block type="field_date"></block>
-->
<block type="field_variable"></block>
<block type="field_image"></block>
</category>

18
demos/blockfactory_old/blocks.js
View File

@@ -460,24 +460,6 @@ Blockly.Blocks['field_colour'] = {
}
};
Blockly.Blocks['field_date'] = {
// Date input.
init: function() {
this.setColour(160);
this.appendDummyInput()
.appendField('date')
.appendField(new Blockly.FieldDate(), 'DATE')
.appendField(',')
.appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
this.setPreviousStatement(true, 'Field');
this.setNextStatement(true, 'Field');
this.setTooltip('Date input field.');
},
onchange: function() {
fieldNameCheck(this);
}
};
Blockly.Blocks['field_variable'] = {
// Dropdown for variables.
init: function() {

17
demos/blockfactory_old/factory.js
View File

@@ -335,12 +335,6 @@ function getFieldsJs_(block) {
escapeString(block.getFieldValue('COLOUR')) + '), ' +
escapeString(block.getFieldValue('FIELDNAME')));
break;
case 'field_date':
// Result: new Blockly.FieldDate('2015-02-04'), 'DATE'
fields.push('new Blockly.FieldDate(' +
escapeString(block.getFieldValue('DATE')) + '), ' +
escapeString(block.getFieldValue('FIELDNAME')));
break;
case 'field_variable':
// Result: new Blockly.FieldVariable('item'), 'VAR'
var varname = escapeString(block.getFieldValue('TEXT') || null);
@@ -440,13 +434,6 @@ function getFieldsJson_(block) {
colour: block.getFieldValue('COLOUR')
});
break;
case 'field_date':
fields.push({
type: block.type,
name: block.getFieldValue('FIELDNAME'),
date: block.getFieldValue('DATE')
});
break;
case 'field_variable':
fields.push({
type: block.type,
@@ -577,10 +564,6 @@ function updateGenerator(block) {
// Subclass of Blockly.FieldTextInput, must test first.
code.push(makeVar('angle', name) +
" = block.getFieldValue('" + name + "');");
} else if (Blockly.FieldDate && field instanceof Blockly.FieldDate) {
// Blockly.FieldDate may not be compiled into Blockly.
code.push(makeVar('date', name) +
" = block.getFieldValue('" + name + "');");
} else if (field instanceof Blockly.FieldColour) {
code.push(makeVar('colour', name) +
" = block.getFieldValue('" + name + "');");

5
demos/blockfactory_old/index.html
View File

@@ -196,11 +196,6 @@
<block type="field_dropdown"></block>
<block type="field_checkbox"></block>
<block type="field_colour"></block>
<!--
Date picker commented out since it increases footprint by 60%.
Add it only if you need it. See also goog.require in blockly.js.
<block type="field_date"></block>
-->
<block type="field_variable"></block>
<block type="field_image"></block>
</category>

17
tests/blocks/test_blocks.js
View File

@@ -693,23 +693,6 @@ Blockly.defineBlocksWithJsonArray([ // BEGIN JSON EXTRACT
],
"style": "math_blocks",
},
{
"type": "test_fields_date",
"message0": "date: %1",
"args0": [
{
"type": "field_date",
"name": "FIELDNAME",
"date": "2020-02-20",
"alt":
{
"type": "field_label",
"text": "NO DATE FIELD"
}
}
],
"style": "math_blocks",
},
{
"type": "test_fields_text_input",
"message0": "text input %1",

173
tests/mocha/field_date_test.js
View File

@@ -1,173 +0,0 @@
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/* If you want to run date tests add the date picker here:
* https://github.com/google/blockly/blob/master/core/blockly.js#L41
* before unskipping.
*/
suite.skip('Date Fields', function() {
function assertValue(dateField, expectedValue) {
var actualValue = dateField.getValue();
var actualText = dateField.getText();
chai.assert.equal(actualValue, expectedValue);
chai.assert.equal(actualText, expectedValue);
}
function assertValueDefault(dateField) {
var today = new goog.date.Date().toIsoString(true);
assertValue(dateField, today);
}
suite('Constructor', function() {
test('Empty', function() {
var dateField = new Blockly.FieldDate();
assertValueDefault(dateField);
});
test('Undefined', function() {
var dateField = new Blockly.FieldDate(undefined);
assertValueDefault(dateField);
});
test('Non-Parsable String', function() {
var dateField = new Blockly.FieldDate('bad');
assertValueDefault(dateField);
});
test('2020-02-20', function() {
var dateField = new Blockly.FieldDate('2020-02-20');
assertValue(dateField, '2020-02-20');
});
test('Invalid Date - Month(2020-13-20)', function() {
var dateField = new Blockly.FieldDate('2020-13-20');
assertValueDefault(dateField);
});
test('Invalid Date - Day(2020-02-32)', function() {
var dateField = new Blockly.FieldDate('2020-02-32');
assertValueDefault(dateField);
});
});
suite('fromJson', function() {
test('Empty', function() {
var dateField = Blockly.FieldDate.fromJson({});
assertValueDefault(dateField);
});
test('Undefined', function() {
var dateField = Blockly.FieldDate.fromJson({ date: undefined });
assertValueDefault(dateField);
});
test('Non-Parsable String', function() {
var dateField = Blockly.FieldDate.fromJson({ date: 'bad' });
assertValueDefault(dateField);
});
test('2020-02-20', function() {
var dateField = Blockly.FieldDate.fromJson({ date: '2020-02-20' });
assertValue(dateField, '2020-02-20');
});
test('Invalid Date - Month(2020-13-20)', function() {
var dateField = Blockly.FieldDate.fromJson({ date: '2020-13-20' });
assertValueDefault(dateField);
});
test('Invalid Date - Day(2020-02-32)', function() {
var dateField = Blockly.FieldDate.fromJson({ date: '2020-02-32' });
assertValueDefault(dateField);
});
});
suite('setValue', function() {
suite('Empty -> New Value', function() {
setup(function() {
this.dateField = new Blockly.FieldDate();
});
test('Null', function() {
this.dateField.setValue(null);
assertValueDefault(this.dateField);
});
test('Undefined', function() {
this.dateField.setValue(undefined);
assertValueDefault(this.dateField);
});
test('Non-Parsable String', function() {
this.dateField.setValue('bad');
assertValueDefault(this.dateField);
});
test('Invalid Date - Month(2020-13-20)', function() {
this.dateField.setValue('2020-13-20');
assertValueDefault(this.dateField);
});
test('Invalid Date - Day(2020-02-32)', function() {
this.dateField.setValue('2020-02-32');
assertValueDefault(this.dateField);
});
test('3030-03-30', function() {
this.dateField.setValue('3030-03-30');
assertValue(this.dateField, '3030-03-30');
});
});
suite('Value -> New Value', function() {
setup(function() {
this.dateField = new Blockly.FieldDate('2020-02-20');
});
test('Null', function() {
this.dateField.setValue(null);
assertValue(this.dateField, '2020-02-20');
});
test('Undefined', function() {
this.dateField.setValue(undefined);
assertValue(this.dateField, '2020-02-20');
});
test('Non-Parsable String', function() {
this.dateField.setValue('bad');
assertValue(this.dateField, '2020-02-20');
});
test('Invalid Date - Month(2020-13-20)', function() {
this.dateField.setValue('2020-13-20');
assertValue(this.dateField, '2020-02-20');
});
test('Invalid Date - Day(2020-02-32)', function() {
this.dateField.setValue('2020-02-32');
assertValue(this.dateField, '2020-02-20');
});
test('3030-03-30', function() {
this.dateField.setValue('3030-03-30');
assertValue(this.dateField, '3030-03-30');
});
});
});
suite('Validators', function() {
setup(function() {
this.dateField = new Blockly.FieldDate('2020-02-20');
});
teardown(function() {
this.dateField.setValidator(null);
});
suite('Null Validator', function() {
setup(function() {
this.dateField.setValidator(function() {
return null;
});
});
test('New Value', function() {
this.dateField.setValue('3030-03-30');
assertValue(this.dateField, '2020-02-20');
});
});
suite('Force Day 20s Validator', function() {
setup(function() {
this.dateField.setValidator(function(newValue) {
return newValue.substr(0, 8) + '2' + newValue.substr(9, 1);
});
});
test('New Value', function() {
this.dateField.setValue('3030-03-30');
assertValue(this.dateField, '3030-03-20');
});
});
suite('Returns Undefined Validator', function() {
setup(function() {
this.dateField.setValidator(function() {});
});
test('New Value', function() {
this.dateField.setValue('3030-03-30');
assertValue(this.dateField, '3030-03-30');
});
});
});
});

1
tests/mocha/index.html
View File

@@ -47,7 +47,6 @@
<script src="field_angle_test.js"></script>
<script src="field_checkbox_test.js"></script>
<script src="field_colour_test.js"></script>
<script src="field_date_test.js"></script>
<script src="field_dropdown_test.js"></script>
<script src="field_image_test.js"></script>
<script src="field_label_test.js"></script>

22
tests/mocha/xml_test.js
View File

@@ -143,28 +143,6 @@ suite('XML', function() {
var resultFieldDom = Blockly.Xml.blockToDom(block).childNodes[0];
assertNonVariableField(resultFieldDom, 'COLOUR', '#000099');
});
/* If you want to run date tests add the date picker here:
* https://github.com/google/blockly/blob/master/core/blockly.js#L41
* before unskipping.
*/
test.skip('Date', function() {
Blockly.defineBlocksWithJsonArray([{
"type": "field_date_test_block",
"message0": "%1",
"args0": [
{
"type": "field_date",
"name": "DATE",
"date": "2020-02-20"
}
],
}]);
this.blockTypes_.push('field_date_test_block');
var block = new Blockly.Block(this.workspace,
'field_date_test_block');
var resultFieldDom = Blockly.Xml.blockToDom(block).childNodes[0];
assertNonVariableField(resultFieldDom, 'DATE', '2020-02-20');
});
test('Dropdown', function() {
Blockly.defineBlocksWithJsonArray([{
"type": "field_dropdown_test_block",

3
tests/screenshot/test_cases/test_fields_date
View File

@@ -1,3 +0,0 @@
<xml xmlns="https://developers.google.com/blockly/xml">
<block type="test_fields_date"></block>
</xml>

12
typings/blockly.d.ts vendored
View File

@@ -4711,18 +4711,6 @@ declare module Blockly {
}
declare module Blockly.FieldDate {
/**
* Construct a FieldDate from a JSON arg object.
* @param {!Object} options A JSON object with options (date).
* @return {!Blockly.FieldDate} The new field instance.
* @package
* @nocollapse
*/
function fromJson(options: Object): Blockly.FieldDate;
}
declare module goog {
/**