CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-10 02:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5060 from gonfunko/style

Browse Source 
Migrate core/utils/style.js to goog.module syntax
This commit is contained in:
Aaron Dodson
2021-07-19 09:45:03 -07:00
committed by GitHub
parent 646513c0a6 9b5a919212
commit 821cdcef0f
2 changed files with 84 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
core/utils/style.js
View File

@@ -16,54 +16,55 @@
* @name Blockly.utils.style
* @namespace
*/
goog.provide('Blockly.utils.style');
goog.module('Blockly.utils.style');
goog.module.declareLegacyNamespace();
goog.require('Blockly.utils.Coordinate');
goog.require('Blockly.utils.Size');
const Coordinate = goog.require('Blockly.utils.Coordinate');
const Size = goog.require('Blockly.utils.Size');
/**
* Gets the height and width of an element.
* Similar to Closure's goog.style.getSize
* @param {!Element} element Element to get size of.
* @return {!Blockly.utils.Size} Object with width/height properties.
* @return {!Size} Object with width/height properties.
*/
Blockly.utils.style.getSize = function(element) {
if (Blockly.utils.style.getStyle_(element, 'display') != 'none') {
return Blockly.utils.style.getSizeWithDisplay_(element);
function getSize(element) {
if (getStyle(element, 'display') != 'none') {
return getSizeWithDisplay(element);
}
// Evaluate size with a temporary element.
var style = element.style;
var originalDisplay = style.display;
var originalVisibility = style.visibility;
var originalPosition = style.position;
const style = element.style;
const originalDisplay = style.display;
const originalVisibility = style.visibility;
const originalPosition = style.position;
style.visibility = 'hidden';
style.position = 'absolute';
style.display = 'inline';
var offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
var offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
const offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
const offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
style.display = originalDisplay;
style.position = originalPosition;
style.visibility = originalVisibility;
return new Blockly.utils.Size(offsetWidth, offsetHeight);
};
return new Size(offsetWidth, offsetHeight);
}
exports.getSize = getSize;
/**
* Gets the height and width of an element when the display is not none.
* @param {!Element} element Element to get size of.
* @return {!Blockly.utils.Size} Object with width/height properties.
* @private
* @return {!Size} Object with width/height properties.
*/
Blockly.utils.style.getSizeWithDisplay_ = function(element) {
var offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
var offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
return new Blockly.utils.Size(offsetWidth, offsetHeight);
};
function getSizeWithDisplay(element) {
const offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
const offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
return new Size(offsetWidth, offsetHeight);
}
/**
* Cross-browser pseudo get computed style. It returns the computed style where
@@ -77,13 +78,11 @@ Blockly.utils.style.getSizeWithDisplay_ = function(element) {
* @param {!Element} element Element to get style of.
* @param {string} style Property to get (must be camelCase, not CSS-style).
* @return {string} Style value.
* @private
*/
Blockly.utils.style.getStyle_ = function(element, style) {
return Blockly.utils.style.getComputedStyle(element, style) ||
Blockly.utils.style.getCascadedStyle(element, style) ||
function getStyle(element, style) {
return getComputedStyle(element, style) || getCascadedStyle(element, style) ||
(element.style && element.style[style]);
};
}
/**
* Retrieves a computed style value of a node. It returns empty string if the
@@ -97,9 +96,9 @@ Blockly.utils.style.getStyle_ = function(element, style) {
* @param {string} property Property to get (camel-case).
* @return {string} Style value.
*/
Blockly.utils.style.getComputedStyle = function(element, property) {
function getComputedStyle(element, property) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var styles = document.defaultView.getComputedStyle(element, null);
const styles = document.defaultView.getComputedStyle(element, null);
if (styles) {
// element.style[..] is undefined for browser specific styles
// as 'filter'.
@@ -108,7 +107,8 @@ Blockly.utils.style.getComputedStyle = function(element, property) {
}
return '';
};
}
exports.getComputedStyle = getComputedStyle;
/**
* Gets the cascaded style value of a node, or null if the value cannot be
@@ -120,45 +120,48 @@ Blockly.utils.style.getComputedStyle = function(element, property) {
* @param {string} style Property to get (camel-case).
* @return {string} Style value.
*/
Blockly.utils.style.getCascadedStyle = function(element, style) {
function getCascadedStyle(element, style) {
return /** @type {string} */ (
element.currentStyle ? element.currentStyle[style] : null);
};
}
exports.getCascadedStyle = getCascadedStyle;
/**
* Returns a Coordinate object relative to the top-left of the HTML document.
* Similar to Closure's goog.style.getPageOffset
* @param {!Element} el Element to get the page offset for.
* @return {!Blockly.utils.Coordinate} The page offset.
* @return {!Coordinate} The page offset.
*/
Blockly.utils.style.getPageOffset = function(el) {
var pos = new Blockly.utils.Coordinate(0, 0);
var box = el.getBoundingClientRect();
var documentElement = document.documentElement;
function getPageOffset(el) {
const pos = new Coordinate(0, 0);
const box = el.getBoundingClientRect();
const documentElement = document.documentElement;
// Must add the scroll coordinates in to get the absolute page offset
// of element since getBoundingClientRect returns relative coordinates to
// the viewport.
var scrollCoord = new Blockly.utils.Coordinate(
const scrollCoord = new Coordinate(
window.pageXOffset || documentElement.scrollLeft,
window.pageYOffset || documentElement.scrollTop);
pos.x = box.left + scrollCoord.x;
pos.y = box.top + scrollCoord.y;
return pos;
};
}
exports.getPageOffset = getPageOffset;
/**
* Calculates the viewport coordinates relative to the document.
* Similar to Closure's goog.style.getViewportPageOffset
* @return {!Blockly.utils.Coordinate} The page offset of the viewport.
* @return {!Coordinate} The page offset of the viewport.
*/
Blockly.utils.style.getViewportPageOffset = function() {
var body = document.body;
var documentElement = document.documentElement;
var scrollLeft = body.scrollLeft || documentElement.scrollLeft;
var scrollTop = body.scrollTop || documentElement.scrollTop;
return new Blockly.utils.Coordinate(scrollLeft, scrollTop);
};
function getViewportPageOffset() {
const body = document.body;
const documentElement = document.documentElement;
const scrollLeft = body.scrollLeft || documentElement.scrollLeft;
const scrollTop = body.scrollTop || documentElement.scrollTop;
return new Coordinate(scrollLeft, scrollTop);
}
exports.getViewportPageOffset = getViewportPageOffset;
/**
* Shows or hides an element from the page. Hiding the element is done by
@@ -172,9 +175,10 @@ Blockly.utils.style.getViewportPageOffset = function() {
* @param {*} isShown True to render the element in its default style,
* false to disable rendering the element.
*/
Blockly.utils.style.setElementShown = function(el, isShown) {
function setElementShown(el, isShown) {
el.style.display = isShown ? '' : 'none';
};
}
exports.setElementShown = setElementShown;
/**
* Returns true if the element is using right to left (RTL) direction.
@@ -183,9 +187,10 @@ Blockly.utils.style.setElementShown = function(el, isShown) {
* @param {!Element} el The element to test.
* @return {boolean} True for right to left, false for left to right.
*/
Blockly.utils.style.isRightToLeft = function(el) {
return 'rtl' == Blockly.utils.style.getStyle_(el, 'direction');
};
function isRightToLeft(el) {
return 'rtl' == getStyle(el, 'direction');
}
exports.isRightToLeft = isRightToLeft;
/**
* Gets the computed border widths (on all sides) in pixels
@@ -193,11 +198,11 @@ Blockly.utils.style.isRightToLeft = function(el) {
* @param {!Element} element The element to get the border widths for.
* @return {!Object} The computed border widths.
*/
Blockly.utils.style.getBorderBox = function(element) {
var left = Blockly.utils.style.getComputedStyle(element, 'borderLeftWidth');
var right = Blockly.utils.style.getComputedStyle(element, 'borderRightWidth');
var top = Blockly.utils.style.getComputedStyle(element, 'borderTopWidth');
var bottom = Blockly.utils.style.getComputedStyle(element, 'borderBottomWidth');
function getBorderBox(element) {
const left = getComputedStyle(element, 'borderLeftWidth');
const right = getComputedStyle(element, 'borderRightWidth');
const top = getComputedStyle(element, 'borderTopWidth');
const bottom = getComputedStyle(element, 'borderBottomWidth');
return {
top: parseFloat(top),
@@ -205,7 +210,8 @@ Blockly.utils.style.getBorderBox = function(element) {
bottom: parseFloat(bottom),
left: parseFloat(left)
};
};
}
exports.getBorderBox = getBorderBox;
/**
* Changes the scroll position of `container` with the minimum amount so
@@ -220,14 +226,12 @@ Blockly.utils.style.getBorderBox = function(element) {
* @param {boolean=} opt_center Whether to center the element in the container.
* Defaults to false.
*/
Blockly.utils.style.scrollIntoContainerView = function(
element, container, opt_center) {
var offset =
Blockly.utils.style.getContainerOffsetToScrollInto(element,
container, opt_center);
function scrollIntoContainerView(element, container, opt_center) {
const offset = getContainerOffsetToScrollInto(element, container, opt_center);
container.scrollLeft = offset.x;
container.scrollTop = offset.y;
};
}
exports.scrollIntoContainerView = scrollIntoContainerView;
/**
* Calculate the scroll position of `container` with the minimum amount so
@@ -241,27 +245,26 @@ Blockly.utils.style.scrollIntoContainerView = function(
* document scroll element will be used.
* @param {boolean=} opt_center Whether to center the element in the container.
* Defaults to false.
* @return {!Blockly.utils.Coordinate} The new scroll position of the container,
* @return {!Coordinate} The new scroll position of the container,
* in form of goog.math.Coordinate(scrollLeft, scrollTop).
*/
Blockly.utils.style.getContainerOffsetToScrollInto = function(
element, container, opt_center) {
function getContainerOffsetToScrollInto(element, container, opt_center) {
// Absolute position of the element's border's top left corner.
var elementPos = Blockly.utils.style.getPageOffset(element);
const elementPos = getPageOffset(element);
// Absolute position of the container's border's top left corner.
var containerPos = Blockly.utils.style.getPageOffset(container);
var containerBorder = Blockly.utils.style.getBorderBox(container);
const containerPos = getPageOffset(container);
const containerBorder = getBorderBox(container);
// Relative pos. of the element's border box to the container's content box.
var relX = elementPos.x - containerPos.x - containerBorder.left;
var relY = elementPos.y - containerPos.y - containerBorder.top;
const relX = elementPos.x - containerPos.x - containerBorder.left;
const relY = elementPos.y - containerPos.y - containerBorder.top;
// How much the element can move in the container, i.e. the difference between
// the element's bottom-right-most and top-left-most position where it's
// fully visible.
var elementSize = Blockly.utils.style.getSizeWithDisplay_(element);
var spaceX = container.clientWidth - elementSize.width;
var spaceY = container.clientHeight - elementSize.height;
var scrollLeft = container.scrollLeft;
var scrollTop = container.scrollTop;
const elementSize = getSizeWithDisplay(element);
const spaceX = container.clientWidth - elementSize.width;
const spaceY = container.clientHeight - elementSize.height;
let scrollLeft = container.scrollLeft;
let scrollTop = container.scrollTop;
if (opt_center) {
// All browsers round non-integer scroll positions down.
scrollLeft += relX - spaceX / 2;
@@ -277,5 +280,6 @@ Blockly.utils.style.getContainerOffsetToScrollInto = function(
scrollLeft += Math.min(relX, Math.max(relX - spaceX, 0));
scrollTop += Math.min(relY, Math.max(relY - spaceY, 0));
}
return new Blockly.utils.Coordinate(scrollLeft, scrollTop);
};
return new Coordinate(scrollLeft, scrollTop);
}
exports.getContainerOffsetToScrollInto = getContainerOffsetToScrollInto;

2
tests/deps.js
View File

@@ -183,7 +183,7 @@ goog.addDependency('../../core/utils/object.js', ['Blockly.utils.object'], [], {
goog.addDependency('../../core/utils/rect.js', ['Blockly.utils.Rect'], [], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/utils/size.js', ['Blockly.utils.Size'], []);
goog.addDependency('../../core/utils/string.js', ['Blockly.utils.string'], []);
goog.addDependency('../../core/utils/style.js', ['Blockly.utils.style'], ['Blockly.utils.Coordinate', 'Blockly.utils.Size']);
goog.addDependency('../../core/utils/style.js', ['Blockly.utils.style'], ['Blockly.utils.Coordinate', 'Blockly.utils.Size'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/utils/svg.js', ['Blockly.utils.Svg'], []);
goog.addDependency('../../core/utils/svg_paths.js', ['Blockly.utils.svgPaths'], [], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/utils/toolbox.js', ['Blockly.utils.toolbox'], ['Blockly.Xml', 'Blockly.constants']);