scratch-blocks/core/field_textinput.js

676 lines
23 KiB
JavaScript
Raw Permalink Normal View History

/**
* @license
* Visual Blocks Editor
*
* Copyright 2012 Google Inc.
2014-10-07 13:09:55 -07:00
* 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 Text input field.
* @author fraser@google.com (Neil Fraser)
*/
'use strict';
goog.provide('Blockly.FieldTextInput');
goog.require('Blockly.BlockSvg.render');
goog.require('Blockly.Colours');
goog.require('Blockly.Field');
goog.require('Blockly.Msg');
goog.require('Blockly.scratchBlocksUtils');
goog.require('Blockly.utils');
goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.userAgent');
/**
* Class for an editable text field.
* @param {string} text The initial content of the field.
* @param {Function=} opt_validator An optional function that is called
* to validate any constraints on what the user entered. Takes the new
* text as an argument and returns either the accepted text, a replacement
* text, or null to abort the change.
* @param {RegExp=} opt_restrictor An optional regular expression to restrict
* typed text to. Text that doesn't match the restrictor will never show
* in the text field.
* @extends {Blockly.Field}
* @constructor
*/
Blockly.FieldTextInput = function(text, opt_validator, opt_restrictor) {
Blockly.FieldTextInput.superClass_.constructor.call(this, text,
opt_validator);
this.setRestrictor(opt_restrictor);
this.addArgType('text');
};
goog.inherits(Blockly.FieldTextInput, Blockly.Field);
2018-04-17 14:15:18 -07:00
/**
* Construct a FieldTextInput from a JSON arg object,
* dereferencing any string table references.
* @param {!Object} options A JSON object with options (text, class, and
* spellcheck).
* @returns {!Blockly.FieldTextInput} The new field instance.
* @package
* @nocollapse
*/
Blockly.FieldTextInput.fromJson = function(options) {
var text = Blockly.utils.replaceMessageReferences(options['text']);
var field = new Blockly.FieldTextInput(text, options['class']);
if (typeof options['spellcheck'] === 'boolean') {
field.setSpellcheck(options['spellcheck']);
}
return field;
};
/**
* Length of animations in seconds.
*/
Blockly.FieldTextInput.ANIMATION_TIME = 0.25;
/**
* Padding to use for text measurement for the field during editing, in px.
*/
Blockly.FieldTextInput.TEXT_MEASURE_PADDING_MAGIC = 45;
/**
* The HTML input element for the user to type, or null if no FieldTextInput
* editor is currently open.
* @type {HTMLInputElement}
* @private
*/
Blockly.FieldTextInput.htmlInput_ = null;
/**
* Mouse cursor style when over the hotspot that initiates the editor.
*/
Blockly.FieldTextInput.prototype.CURSOR = 'text';
/**
* Allow browser to spellcheck this field.
* @private
*/
Blockly.FieldTextInput.prototype.spellcheck_ = true;
/**
* Install this text field on a block.
*/
Blockly.FieldTextInput.prototype.init = function() {
if (this.fieldGroup_) {
// Field has already been initialized once.
return;
}
var notInShadow = !this.sourceBlock_.isShadow();
if (notInShadow) {
this.className_ += ' blocklyEditableLabel';
}
Blockly.FieldTextInput.superClass_.init.call(this);
// If not in a shadow block, draw a box.
if (notInShadow) {
this.box_ = Blockly.utils.createSvgElement('rect',
{
'x': 0,
'y': 0,
'width': this.size_.width,
'height': this.size_.height,
'fill': this.sourceBlock_.getColourTertiary()
}
);
this.fieldGroup_.insertBefore(this.box_, this.textElement_);
}
};
/**
2014-09-08 14:26:52 -07:00
* Close the input widget if this input is being deleted.
*/
Blockly.FieldTextInput.prototype.dispose = function() {
2014-09-08 14:26:52 -07:00
Blockly.WidgetDiv.hideIfOwner(this);
Blockly.FieldTextInput.superClass_.dispose.call(this);
};
/**
* Set the value of this field.
* @param {?string} newValue New value.
* @override
*/
Blockly.FieldTextInput.prototype.setValue = function(newValue) {
if (newValue === null) {
2016-01-15 15:36:06 -08:00
return; // No change if null.
}
2016-06-29 17:44:12 -07:00
if (this.sourceBlock_) {
var validated = this.callValidator(newValue);
// If the new value is invalid, validation returns null.
// In this case we still want to display the illegal result.
2016-06-29 17:44:12 -07:00
if (validated !== null) {
newValue = validated;
}
}
Blockly.Field.prototype.setValue.call(this, newValue);
};
/**
* Set the text in this field and fire a change event.
* @param {*} newText New text.
*/
Blockly.FieldTextInput.prototype.setText = function(newText) {
if (newText === null) {
// No change if null.
return;
}
newText = String(newText);
if (newText === this.text_) {
// No change.
return;
}
if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
2017-06-22 10:38:20 -04:00
Blockly.Events.fire(new Blockly.Events.BlockChange(
this.sourceBlock_, 'field', this.name, this.text_, newText));
}
Blockly.Field.prototype.setText.call(this, newText);
};
/**
* Set whether this field is spellchecked by the browser.
* @param {boolean} check True if checked.
*/
Blockly.FieldTextInput.prototype.setSpellcheck = function(check) {
this.spellcheck_ = check;
};
/**
* Set the restrictor regex for this text input.
* Text that doesn't match the restrictor will never show in the text field.
* @param {?RegExp} restrictor Regular expression to restrict text.
*/
Blockly.FieldTextInput.prototype.setRestrictor = function(restrictor) {
this.restrictor_ = restrictor;
};
/**
* Show the inline free-text editor on top of the text.
2014-09-08 14:26:52 -07:00
* @param {boolean=} opt_quietInput True if editor should be created without
* focus. Defaults to false.
* @param {boolean=} opt_readOnly True if editor should be created with HTML
* input set to read-only, to prevent virtual keyboards.
* @param {boolean=} opt_withArrow True to show drop-down arrow in text editor.
* @param {Function=} opt_arrowCallback Callback for when drop-down arrow clicked.
* @private
*/
Blockly.FieldTextInput.prototype.showEditor_ = function(
opt_quietInput, opt_readOnly, opt_withArrow, opt_arrowCallback) {
this.workspace_ = this.sourceBlock_.workspace;
2014-09-08 14:26:52 -07:00
var quietInput = opt_quietInput || false;
var readOnly = opt_readOnly || false;
Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL,
this.widgetDispose_(), this.widgetDisposeAnimationFinished_(),
Blockly.FieldTextInput.ANIMATION_TIME);
var div = Blockly.WidgetDiv.DIV;
// Apply text-input-specific fixed CSS
div.className += ' fieldTextInput';
// Create the input.
var htmlInput =
goog.dom.createDom(goog.dom.TagName.INPUT, 'blocklyHtmlInput');
htmlInput.setAttribute('spellcheck', this.spellcheck_);
if (readOnly) {
htmlInput.setAttribute('readonly', 'true');
}
/** @type {!HTMLInputElement} */
Blockly.FieldTextInput.htmlInput_ = htmlInput;
div.appendChild(htmlInput);
if (opt_withArrow) {
// Move text in input to account for displayed drop-down arrow.
if (this.sourceBlock_.RTL) {
2018-06-21 10:03:37 -04:00
htmlInput.style.paddingLeft = (this.arrowSize_ + Blockly.BlockSvg.DROPDOWN_ARROW_PADDING) + 'px';
} else {
htmlInput.style.paddingRight = (this.arrowSize_ + Blockly.BlockSvg.DROPDOWN_ARROW_PADDING) + 'px';
}
// Create the arrow.
var dropDownArrow =
goog.dom.createDom(goog.dom.TagName.IMG, 'blocklyTextDropDownArrow');
dropDownArrow.setAttribute('src',
2018-05-02 15:32:28 -07:00
Blockly.mainWorkspace.options.pathToMedia + 'dropdown-arrow-dark.svg');
dropDownArrow.style.width = this.arrowSize_ + 'px';
dropDownArrow.style.height = this.arrowSize_ + 'px';
dropDownArrow.style.top = this.arrowY_ + 'px';
dropDownArrow.style.cursor = 'pointer';
// Magic number for positioning the drop-down arrow on top of the text editor.
var dropdownArrowMagic = '11px';
if (this.sourceBlock_.RTL) {
dropDownArrow.style.left = dropdownArrowMagic;
} else {
dropDownArrow.style.right = dropdownArrowMagic;
}
if (opt_arrowCallback) {
htmlInput.dropDownArrowMouseWrapper_ = Blockly.bindEvent_(dropDownArrow,
2018-05-02 15:32:28 -07:00
'mousedown', this, opt_arrowCallback);
}
div.appendChild(dropDownArrow);
}
htmlInput.value = htmlInput.defaultValue = this.text_;
htmlInput.oldValue_ = null;
this.validate_();
this.resizeEditor_();
2014-09-08 14:26:52 -07:00
if (!quietInput) {
htmlInput.focus();
htmlInput.select();
// For iOS only
htmlInput.setSelectionRange(0, 99999);
2014-09-08 14:26:52 -07:00
}
this.bindEvents_(htmlInput, quietInput || readOnly);
// Add animation transition properties
var transitionProperties = 'box-shadow ' + Blockly.FieldTextInput.ANIMATION_TIME + 's';
if (Blockly.BlockSvg.FIELD_TEXTINPUT_ANIMATE_POSITIONING) {
div.style.transition += ',padding ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
'width ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
'height ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
'margin-left ' + Blockly.FieldTextInput.ANIMATION_TIME + 's';
}
div.style.transition = transitionProperties;
htmlInput.style.transition = 'font-size ' + Blockly.FieldTextInput.ANIMATION_TIME + 's';
// The animated properties themselves
htmlInput.style.fontSize = Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_FINAL + 'pt';
div.style.boxShadow = '0px 0px 0px 4px ' + Blockly.Colours.fieldShadow;
};
/**
* Bind handlers for user input on this field and size changes on the workspace.
* @param {!HTMLInputElement} htmlInput The htmlInput created in showEditor, to
* which event handlers will be bound.
* @param {boolean} bindGlobalKeypress Whether to bind a keypress listener to enable
* keyboard editing without focusing the field.
* @private
*/
Blockly.FieldTextInput.prototype.bindEvents_ = function(
htmlInput, bindGlobalKeypress) {
// Bind to keydown -- trap Enter without IME and Esc to hide.
htmlInput.onKeyDownWrapper_ =
Blockly.bindEventWithChecks_(htmlInput, 'keydown', this,
2018-05-02 15:32:28 -07:00
this.onHtmlInputKeyDown_);
// Bind to keyup -- trap Enter; resize after every keystroke.
htmlInput.onKeyUpWrapper_ =
Blockly.bindEventWithChecks_(htmlInput, 'keyup', this,
2018-05-02 15:32:28 -07:00
this.onHtmlInputChange_);
// Bind to keyPress -- repeatedly resize when holding down a key.
htmlInput.onKeyPressWrapper_ =
Blockly.bindEventWithChecks_(htmlInput, 'keypress', this,
2018-05-02 15:32:28 -07:00
this.onHtmlInputChange_);
// For modern browsers (IE 9+, Chrome, Firefox, etc.) that support the
// DOM input event, also trigger onHtmlInputChange_ then. The input event
// is triggered on keypress but after the value of the text input
// has updated, allowing us to resize the block at that time.
htmlInput.onInputWrapper_ =
Blockly.bindEvent_(htmlInput, 'input', this, this.onHtmlInputChange_);
htmlInput.onWorkspaceChangeWrapper_ = this.resizeEditor_.bind(this);
this.workspace_.addChangeListener(htmlInput.onWorkspaceChangeWrapper_);
if (bindGlobalKeypress) {
htmlInput.onDocumentKeyDownWrapper_ =
Blockly.bindEventWithChecks_(document, 'keydown', this,
this.onDocumentKeyDown_);
}
};
/**
* Unbind handlers for user input and workspace size changes.
* @param {!HTMLInputElement} htmlInput The html for this text input.
* @private
*/
Blockly.FieldTextInput.prototype.unbindEvents_ = function(htmlInput) {
Blockly.unbindEvent_(htmlInput.onKeyDownWrapper_);
Blockly.unbindEvent_(htmlInput.onKeyUpWrapper_);
Blockly.unbindEvent_(htmlInput.onKeyPressWrapper_);
Blockly.unbindEvent_(htmlInput.onInputWrapper_);
this.workspace_.removeChangeListener(
htmlInput.onWorkspaceChangeWrapper_);
// Remove document handler only if it was added (e.g. in quiet mode)
if (htmlInput.onDocumentKeyDownWrapper_) {
Blockly.unbindEvent_(htmlInput.onDocumentKeyDownWrapper_);
}
};
/**
* Handle key down to the editor.
* @param {!Event} e Keyboard event.
* @private
*/
Blockly.FieldTextInput.prototype.onHtmlInputKeyDown_ = function(e) {
var htmlInput = Blockly.FieldTextInput.htmlInput_;
2015-10-14 16:23:23 -07:00
var tabKey = 9, enterKey = 13, escKey = 27;
if (e.keyCode == enterKey) {
Blockly.WidgetDiv.hide();
2017-07-27 15:13:06 -04:00
Blockly.DropDownDiv.hideWithoutAnimation();
} else if (e.keyCode == escKey) {
htmlInput.value = htmlInput.defaultValue;
Blockly.WidgetDiv.hide();
2017-07-27 15:13:06 -04:00
Blockly.DropDownDiv.hideWithoutAnimation();
2015-10-14 16:23:23 -07:00
} else if (e.keyCode == tabKey) {
Blockly.WidgetDiv.hide();
2017-07-27 15:13:06 -04:00
Blockly.DropDownDiv.hideWithoutAnimation();
2015-10-14 16:23:23 -07:00
this.sourceBlock_.tab(this, !e.shiftKey);
e.preventDefault();
}
};
Blockly.FieldTextInput.prototype.onDocumentKeyDown_ = function(e) {
var htmlInput = Blockly.FieldTextInput.htmlInput_;
var targetMatches = e.target === htmlInput;
var targetIsInput = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA';
if (targetMatches || !targetIsInput) { // Ignore keys into other inputs
htmlInput.removeAttribute('readonly');
htmlInput.value = ''; // Reset the input, new value is picked up by input keypress
htmlInput.focus();
Blockly.unbindEvent_(htmlInput.onDocumentKeyDownWrapper_);
htmlInput.onDocumentKeyDownWrapper_ = null;
}
};
2016-07-06 17:33:47 -04:00
/**
* Key codes that are whitelisted from the restrictor.
* These are only needed and used on Gecko (Firefox).
* See: https://github.com/LLK/scratch-blocks/issues/503.
2016-07-06 17:33:47 -04:00
*/
Blockly.FieldTextInput.GECKO_KEYCODE_WHITELIST = [
97, // Select all, META-A.
99, // Copy, META-C.
118, // Paste, META-V.
120 // Cut, META-X.
2016-07-06 17:33:47 -04:00
];
/**
* Handle a change to the editor.
* @param {!Event} e Keyboard event.
* @private
*/
Blockly.FieldTextInput.prototype.onHtmlInputChange_ = function(e) {
// Check if the key matches the restrictor.
if (e.type === 'keypress' && this.restrictor_) {
var keyCode;
var isWhitelisted = false;
if (goog.userAgent.GECKO) {
// e.keyCode is not available in Gecko.
keyCode = e.charCode;
// Gecko reports control characters (e.g., left, right, copy, paste)
// in the key event - whitelist these from being restricted.
// < 32 and 127 (delete) are control characters.
// See: http://www.theasciicode.com.ar/ascii-control-characters/delete-ascii-code-127.html
if (keyCode < 32 || keyCode == 127) {
isWhitelisted = true;
} else if (e.metaKey || e.ctrlKey) {
// For combos (ctrl-v, ctrl-c, etc.), Gecko reports the ASCII letter
// and the metaKey/ctrlKey flags.
isWhitelisted = Blockly.FieldTextInput.GECKO_KEYCODE_WHITELIST.indexOf(keyCode) > -1;
}
} else {
keyCode = e.keyCode;
}
2016-07-06 17:33:47 -04:00
var char = String.fromCharCode(keyCode);
if (!isWhitelisted && !this.restrictor_.test(char) && e.preventDefault) {
// Failed to pass restrictor.
e.preventDefault();
return;
}
}
var htmlInput = Blockly.FieldTextInput.htmlInput_;
2016-01-15 15:36:06 -08:00
// Update source block.
var text = htmlInput.value;
if (text !== htmlInput.oldValue_) {
htmlInput.oldValue_ = text;
this.setText(text);
2016-01-15 15:36:06 -08:00
this.validate_();
} else if (goog.userAgent.WEBKIT) {
// Cursor key. Render the source block to show the caret moving.
// Chrome only (version 26, OS X).
this.sourceBlock_.render();
}
Merge google/develop June 22 (#441) * Localisation updates from https://translatewiki.net. * test page that creates random blocks and randomly drags them around the page * Localisation updates from https://translatewiki.net. * add missing return in fake drag * get rid of drag_tests file: * Generated JS helper functions should be camelCase. Complying with Google style guide. * Localisation updates from https://translatewiki.net. * Fix extra category error. Clean up code, rename variables, reduce line lengths, fix lint issues. * Remove claim that good.string.quote should be used. * Change the blockly workspace resizing strategy. (#386) * Add a new method to be called when the contents of the workspace change and the scrollbars need to be adjusted but the the chrome (trash, toolbox, etc) are expected to stay in the same place. Change a bunch of calls to svgResize to either be removed or call the new method instead. This is a nice performance win since the offsetHeight/Width call in svgResize can be expensive, especially when called as often as we do - there was some layout thrashing. This also paves the way for moving calls to recordDeleteAreas (which is also expensive) to a more cacheable spot than on every mouse down/touch event. of things (namely the scrollbars) * Fix size of graph demo when it first loads by calling svgResize. The graph starts with fixed width and was relying on a resize event to fire (which I believe was removed in commit 217c681b86b0f2df76c479c9efae62e6e). * Fix the resizing of the code demo. The demo's tab min-width used to match the toolbox's width was only being set on a resize event, but commit 217c681b86b0f2df76c479c9efae62e6e changed how that worked. * Fix up some comments. * Use specific workspaces rather than Blockly.getMainWorkspace(). * Make workspace required for resizeSvgContents and update some calls to send real workspaces rather than ones that are null. Remove the private tag on terminateDrag_ because it is only actually called from outside the BlockSvg object. * Remove a rogue period. * Recategorize BlockSvg.terminateDrag_ to @package instead of @private so that other developers don't use it, but it still can be used by other Blockly classes. * Add a TODO to fix issue #307. * Add @package to workspace resizeContents. * Routine recompile * Fix unit tests. * Fix inheritance on rendered connection. Closure compiler on maximum compression breaks badly due to lack of @extends attribute. * Add toolbox location and toolbox mode options to playground. * Increase commonality between playgrounds. * Properly deal with shadow statement blocks in stacks. * Localisation updates from https://translatewiki.net. * Use a comment block for function comments in generated JS, Python and Dart. * Fix typo in flyout.js (#403) * Fix typo in flyout.js (#402) * Line wrap comments in generated code. * Remove reference to undefined variable (#413) REASON_MUST_DISCONNECT was removed by a refactor in 2a1ffa1. * Fix airstrike by grabbing the correct toolbox element. (#411) Probably broken in 266e2ffa9a017d21d7ca2f151730d6ecfcecf173. * Localisation updates from https://translatewiki.net. * Fix issue #406 by calling resize from the keypress handler on text inputs. (#408) * Remove shadow blocks from Accessible Blockly demo. Update README. * Generate for loops on one line. * Introduce a common translation pipe; remove local stringMap attributes. Fix variable name error in paste functions. Minor linting. * Fix precedence on isIndex blocks. * Add indexing setting for JavaScript Generation (#419) Adding setting to allow for switching between zero and one based indexing for Blockly Blocks such that the generated code will use this flag to determine whether one based or zero based indexing should be used. One based indexing is enabled by default. * Remove unused functions and dependencies. * Remove the unnecessary construction of new services. * Fix sort block in JS to satisfy tests. * Trigger a contents resize in block's moveBy. (#422) This fixes #420 but and it also fixes some other similar problems with copy/paste and other users of moveBy. * Consolidate the usages of the 'blockly-disabled' label. * Fix error when undoing a shadow block replacement. Issue #415. * Unify setActiveDesc() and updateSelectedNode() in the TreeService. Move function calls made directly within the template to the correct hooks. * Standardize naming of components. * Prevent collisions between user functions and helper functions. * Localisation updates from https://translatewiki.net. * Fix #425. Attash the resize handler to the workspace so it can be removed (#429) when workspace.dispose() is called. * Change the TreeService to a singleton. * Remove unneeded generated parens around function calls in indexOf blocks. * Fix #423 by calling workspace's resize when the flyout reflows. (#430) * Updating URLs to reflect new docs. (#418) * Updating URLs to reflect new docs. Removing -blockly in URLs. * Rebuilt. * Routine recompile * Prevent selected block from ending up underneath a bumped block. * Fix undo on fields with validators with side effects. * Don't fire change event on fields that haven't been named yet. * Localisation updates from https://translatewiki.net. * Fix tree focus issues. * Fix remaining focus issues on block deletion. * cache delete areas instead of recalculating them onMouseDown * Cache screen CTM for performance improvement. * Call svgResizeContents from block_svg's dipose so that deleting blocks (#434) from the context menu (or anywhere really) causes the workspace to recalculate its size. Remove the call to svgResizeContents from onMouseUp's logic for determining whether the block is being dropped in the trash since it calls dispose. One side effect of this is that when you delete multiple blocks resize gets called for each of them and the scrollbars move during the operation. This is most obviously seen by doing an airstrike in the playground and then deleting all the blocks at once. * Allow terminal blocks to replace other terminal blocks (#433) * Allow terminal blocks to replace other terminal blocks * Updated test to allow replacing terminal blocks * Refactor how activeDescendant is set. Introduce helper functions to ensure that calls like pasteAbove() preserve the focus. * Localisation updates from https://translatewiki.net. * Remove unnecessary logging. * Reduce unneeded parentheses in JS and Python. * Start using field_number. * Make it easy to disable unconnected blocks. * Routine recompile. * Check if matrix is null in mouseToSvg * Remove js/ localizations pre-merge * Fix change to block_render_svg * Fix error in xml.js * Playground merge * Add simple toolboxes to playgrounds * Fix flyout reference in events listener * Move tokenizeIntepolation into Blockly.utils namespace. * Use simpler message interpolation in Code demo. * Create console stub for IE 9. * Don't output blockId if not set (e.g., toolbox category event). (#443) * Fix block in multi-playground * Increase commonality between playgrounds. # Conflicts: # tests/multi_playground.html # tests/playground.html * Remove "show flyouts" button * Recompile for merge June 22
2016-06-22 17:50:16 -04:00
this.resizeEditor_();
};
/**
* Check to see if the contents of the editor validates.
* Style the editor accordingly.
* @private
*/
Blockly.FieldTextInput.prototype.validate_ = function() {
var valid = true;
goog.asserts.assertObject(Blockly.FieldTextInput.htmlInput_);
var htmlInput = Blockly.FieldTextInput.htmlInput_;
2016-06-29 17:44:12 -07:00
if (this.sourceBlock_) {
valid = this.callValidator(htmlInput.value);
}
if (valid === null) {
Blockly.utils.addClass(htmlInput, 'blocklyInvalidInput');
} else {
Blockly.utils.removeClass(htmlInput, 'blocklyInvalidInput');
}
};
/**
* Resize the editor and the underlying block to fit the text.
* @private
*/
Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
var scale = this.sourceBlock_.workspace.scale;
var div = Blockly.WidgetDiv.DIV;
var initialWidth;
if (this.sourceBlock_.isShadow()) {
initialWidth = this.sourceBlock_.getHeightWidth().width * scale;
} else {
initialWidth = this.size_.width * scale;
}
var width;
if (Blockly.BlockSvg.FIELD_TEXTINPUT_EXPAND_PAST_TRUNCATION) {
// Resize the box based on the measured width of the text, pre-truncation
var textWidth = Blockly.scratchBlocksUtils.measureText(
2018-05-02 15:32:28 -07:00
Blockly.FieldTextInput.htmlInput_.style.fontSize,
Blockly.FieldTextInput.htmlInput_.style.fontFamily,
Blockly.FieldTextInput.htmlInput_.style.fontWeight,
Blockly.FieldTextInput.htmlInput_.value
);
// Size drawn in the canvas needs padding and scaling
textWidth += Blockly.FieldTextInput.TEXT_MEASURE_PADDING_MAGIC;
textWidth *= scale;
width = textWidth;
} else {
// Set width to (truncated) block size.
width = initialWidth;
}
// The width must be at least FIELD_WIDTH and at most FIELD_WIDTH_MAX_EDIT
width = Math.max(width, Blockly.BlockSvg.FIELD_WIDTH_MIN_EDIT * scale);
width = Math.min(width, Blockly.BlockSvg.FIELD_WIDTH_MAX_EDIT * scale);
// Add 1px to width and height to account for border (pre-scale)
div.style.width = (width / scale + 1) + 'px';
div.style.height = (Blockly.BlockSvg.FIELD_HEIGHT_MAX_EDIT + 1) + 'px';
div.style.transform = 'scale(' + scale + ')';
// Use margin-left to animate repositioning of the box (value is unscaled).
// This is the difference between the default position and the positioning
// after growing the box.
div.style.marginLeft = -0.5 * (width - initialWidth) + 'px';
// Add 0.5px to account for slight difference between SVG and CSS border
var borderRadius = this.getBorderRadius() + 0.5;
div.style.borderRadius = borderRadius + 'px';
Blockly.FieldTextInput.htmlInput_.style.borderRadius = borderRadius + 'px';
// Pull stroke colour from the existing shadow block
var strokeColour = this.sourceBlock_.getColourTertiary();
div.style.borderColor = strokeColour;
2015-04-28 13:51:25 -07:00
var xy = this.getAbsoluteXY_();
// Account for border width, post-scale
xy.x -= scale / 2;
xy.y -= scale / 2;
2013-12-20 16:25:26 -08:00
// In RTL mode block fields and LTR input fields the left edge moves,
// whereas the right edge is fixed. Reposition the editor.
2015-04-28 13:51:25 -07:00
if (this.sourceBlock_.RTL) {
2016-04-05 19:41:04 -04:00
xy.x += width;
xy.x -= div.offsetWidth * scale;
xy.x += 1 * scale;
}
// Shift by a few pixels to line up exactly.
xy.y += 1 * scale;
2015-08-21 14:13:07 -07:00
if (goog.userAgent.GECKO && Blockly.WidgetDiv.DIV.style.top) {
// Firefox mis-reports the location of the border by a pixel
// once the WidgetDiv is moved into position.
xy.x += 2 * scale;
xy.y += 1 * scale;
2015-08-21 14:13:07 -07:00
}
if (goog.userAgent.WEBKIT) {
xy.y -= 1 * scale;
}
2016-04-05 19:43:41 -04:00
// Finally, set the actual style
div.style.left = xy.x + 'px';
div.style.top = xy.y + 'px';
};
/**
* Border radius for drawing this field, called when rendering the owning shadow block.
* @return {Number} Border radius in px.
*/
Blockly.FieldTextInput.prototype.getBorderRadius = function() {
if (this.sourceBlock_.getOutputShape() == Blockly.OUTPUT_SHAPE_ROUND) {
return Blockly.BlockSvg.NUMBER_FIELD_CORNER_RADIUS;
}
return Blockly.BlockSvg.TEXT_FIELD_CORNER_RADIUS;
};
/**
* Close the editor, save the results, and start animating the disposal of elements.
* @return {!Function} Closure to call on destruction of the WidgetDiv.
* @private
*/
2014-09-08 14:26:52 -07:00
Blockly.FieldTextInput.prototype.widgetDispose_ = function() {
var thisField = this;
return function() {
var div = Blockly.WidgetDiv.DIV;
var htmlInput = Blockly.FieldTextInput.htmlInput_;
// Save the edit (if it validates).
thisField.maybeSaveEdit_();
thisField.unbindEvents_(htmlInput);
if (htmlInput.dropDownArrowMouseWrapper_) {
Blockly.unbindEvent_(htmlInput.dropDownArrowMouseWrapper_);
}
Blockly.Events.setGroup(false);
// Animation of disposal
htmlInput.style.fontSize = Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_INITIAL + 'pt';
div.style.boxShadow = '';
// Resize to actual size of final source block.
if (thisField.sourceBlock_) {
if (thisField.sourceBlock_.isShadow()) {
var size = thisField.sourceBlock_.getHeightWidth();
div.style.width = (size.width + 1) + 'px';
div.style.height = (size.height + 1) + 'px';
} else {
div.style.width = (thisField.size_.width + 1) + 'px';
div.style.height = (Blockly.BlockSvg.FIELD_HEIGHT_MAX_EDIT + 1) + 'px';
}
}
div.style.marginLeft = 0;
};
};
/**
* Final disposal of the text field's elements and properties.
* @return {!Function} Closure to call on finish animation of the WidgetDiv.
* @private
*/
Blockly.FieldTextInput.prototype.widgetDisposeAnimationFinished_ = function() {
return function() {
2015-08-19 17:21:05 -07:00
// Delete style properties.
var style = Blockly.WidgetDiv.DIV.style;
style.width = 'auto';
style.height = 'auto';
style.fontSize = '';
// Reset class
Blockly.WidgetDiv.DIV.className = 'blocklyWidgetDiv';
// Remove all styles
Blockly.WidgetDiv.DIV.removeAttribute('style');
Blockly.FieldTextInput.htmlInput_.style.transition = '';
Blockly.FieldTextInput.htmlInput_ = null;
};
};
Blockly.FieldTextInput.prototype.maybeSaveEdit_ = function() {
var htmlInput = Blockly.FieldTextInput.htmlInput_;
// Save the edit (if it validates).
var text = htmlInput.value;
if (this.sourceBlock_) {
var text1 = this.callValidator(text);
if (text1 === null) {
// Invalid edit.
text = htmlInput.defaultValue;
} else {
// Validation function has changed the text.
text = text1;
if (this.onFinishEditing_) {
this.onFinishEditing_(text);
}
}
}
this.setText(text);
this.sourceBlock_.rendered && this.sourceBlock_.render();
};
/**
* Ensure that only a number may be entered.
* @param {string} text The user's text.
* @return {?string} A string representing a valid number, or null if invalid.
*/
Blockly.FieldTextInput.numberValidator = function(text) {
Merge google/develop June 22 (#441) * Localisation updates from https://translatewiki.net. * test page that creates random blocks and randomly drags them around the page * Localisation updates from https://translatewiki.net. * add missing return in fake drag * get rid of drag_tests file: * Generated JS helper functions should be camelCase. Complying with Google style guide. * Localisation updates from https://translatewiki.net. * Fix extra category error. Clean up code, rename variables, reduce line lengths, fix lint issues. * Remove claim that good.string.quote should be used. * Change the blockly workspace resizing strategy. (#386) * Add a new method to be called when the contents of the workspace change and the scrollbars need to be adjusted but the the chrome (trash, toolbox, etc) are expected to stay in the same place. Change a bunch of calls to svgResize to either be removed or call the new method instead. This is a nice performance win since the offsetHeight/Width call in svgResize can be expensive, especially when called as often as we do - there was some layout thrashing. This also paves the way for moving calls to recordDeleteAreas (which is also expensive) to a more cacheable spot than on every mouse down/touch event. of things (namely the scrollbars) * Fix size of graph demo when it first loads by calling svgResize. The graph starts with fixed width and was relying on a resize event to fire (which I believe was removed in commit 217c681b86b0f2df76c479c9efae62e6e). * Fix the resizing of the code demo. The demo's tab min-width used to match the toolbox's width was only being set on a resize event, but commit 217c681b86b0f2df76c479c9efae62e6e changed how that worked. * Fix up some comments. * Use specific workspaces rather than Blockly.getMainWorkspace(). * Make workspace required for resizeSvgContents and update some calls to send real workspaces rather than ones that are null. Remove the private tag on terminateDrag_ because it is only actually called from outside the BlockSvg object. * Remove a rogue period. * Recategorize BlockSvg.terminateDrag_ to @package instead of @private so that other developers don't use it, but it still can be used by other Blockly classes. * Add a TODO to fix issue #307. * Add @package to workspace resizeContents. * Routine recompile * Fix unit tests. * Fix inheritance on rendered connection. Closure compiler on maximum compression breaks badly due to lack of @extends attribute. * Add toolbox location and toolbox mode options to playground. * Increase commonality between playgrounds. * Properly deal with shadow statement blocks in stacks. * Localisation updates from https://translatewiki.net. * Use a comment block for function comments in generated JS, Python and Dart. * Fix typo in flyout.js (#403) * Fix typo in flyout.js (#402) * Line wrap comments in generated code. * Remove reference to undefined variable (#413) REASON_MUST_DISCONNECT was removed by a refactor in 2a1ffa1. * Fix airstrike by grabbing the correct toolbox element. (#411) Probably broken in 266e2ffa9a017d21d7ca2f151730d6ecfcecf173. * Localisation updates from https://translatewiki.net. * Fix issue #406 by calling resize from the keypress handler on text inputs. (#408) * Remove shadow blocks from Accessible Blockly demo. Update README. * Generate for loops on one line. * Introduce a common translation pipe; remove local stringMap attributes. Fix variable name error in paste functions. Minor linting. * Fix precedence on isIndex blocks. * Add indexing setting for JavaScript Generation (#419) Adding setting to allow for switching between zero and one based indexing for Blockly Blocks such that the generated code will use this flag to determine whether one based or zero based indexing should be used. One based indexing is enabled by default. * Remove unused functions and dependencies. * Remove the unnecessary construction of new services. * Fix sort block in JS to satisfy tests. * Trigger a contents resize in block's moveBy. (#422) This fixes #420 but and it also fixes some other similar problems with copy/paste and other users of moveBy. * Consolidate the usages of the 'blockly-disabled' label. * Fix error when undoing a shadow block replacement. Issue #415. * Unify setActiveDesc() and updateSelectedNode() in the TreeService. Move function calls made directly within the template to the correct hooks. * Standardize naming of components. * Prevent collisions between user functions and helper functions. * Localisation updates from https://translatewiki.net. * Fix #425. Attash the resize handler to the workspace so it can be removed (#429) when workspace.dispose() is called. * Change the TreeService to a singleton. * Remove unneeded generated parens around function calls in indexOf blocks. * Fix #423 by calling workspace's resize when the flyout reflows. (#430) * Updating URLs to reflect new docs. (#418) * Updating URLs to reflect new docs. Removing -blockly in URLs. * Rebuilt. * Routine recompile * Prevent selected block from ending up underneath a bumped block. * Fix undo on fields with validators with side effects. * Don't fire change event on fields that haven't been named yet. * Localisation updates from https://translatewiki.net. * Fix tree focus issues. * Fix remaining focus issues on block deletion. * cache delete areas instead of recalculating them onMouseDown * Cache screen CTM for performance improvement. * Call svgResizeContents from block_svg's dipose so that deleting blocks (#434) from the context menu (or anywhere really) causes the workspace to recalculate its size. Remove the call to svgResizeContents from onMouseUp's logic for determining whether the block is being dropped in the trash since it calls dispose. One side effect of this is that when you delete multiple blocks resize gets called for each of them and the scrollbars move during the operation. This is most obviously seen by doing an airstrike in the playground and then deleting all the blocks at once. * Allow terminal blocks to replace other terminal blocks (#433) * Allow terminal blocks to replace other terminal blocks * Updated test to allow replacing terminal blocks * Refactor how activeDescendant is set. Introduce helper functions to ensure that calls like pasteAbove() preserve the focus. * Localisation updates from https://translatewiki.net. * Remove unnecessary logging. * Reduce unneeded parentheses in JS and Python. * Start using field_number. * Make it easy to disable unconnected blocks. * Routine recompile. * Check if matrix is null in mouseToSvg * Remove js/ localizations pre-merge * Fix change to block_render_svg * Fix error in xml.js * Playground merge * Add simple toolboxes to playgrounds * Fix flyout reference in events listener * Move tokenizeIntepolation into Blockly.utils namespace. * Use simpler message interpolation in Code demo. * Create console stub for IE 9. * Don't output blockId if not set (e.g., toolbox category event). (#443) * Fix block in multi-playground * Increase commonality between playgrounds. # Conflicts: # tests/multi_playground.html # tests/playground.html * Remove "show flyouts" button * Recompile for merge June 22
2016-06-22 17:50:16 -04:00
console.warn('Blockly.FieldTextInput.numberValidator is deprecated. ' +
'Use Blockly.FieldNumber instead.');
2015-01-22 15:58:10 -08:00
if (text === null) {
2014-12-07 19:19:35 -06:00
return null;
}
text = String(text);
// TODO: Handle cases like 'ten', '1.203,14', etc.
// 'O' is sometimes mistaken for '0' by inexperienced users.
text = text.replace(/O/ig, '0');
// Strip out thousands separators.
text = text.replace(/,/g, '');
var n = parseFloat(text || 0);
return isNaN(n) ? null : String(n);
};
/**
* Ensure that only a nonnegative integer may be entered.
* @param {string} text The user's text.
* @return {?string} A string representing a valid int, or null if invalid.
*/
Blockly.FieldTextInput.nonnegativeIntegerValidator = function(text) {
var n = Blockly.FieldTextInput.numberValidator(text);
if (n) {
n = String(Math.max(0, Math.floor(n)));
}
return n;
};
2018-04-17 14:15:18 -07:00
Blockly.Field.register('field_input', Blockly.FieldTextInput);