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

Migrate core/utils/style.js to goog.module

Browse Source
This commit is contained in:
Aaron Dodson
2021-07-14 13:58:05 -07:00
parent 78e72222c1
commit 656f4fc9d6
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
core/utils/style.js
View File

@@ -16,7 +16,8 @@
* @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');
@@ -28,9 +29,9 @@ goog.require('Blockly.utils.Size');
* @param {!Element} element Element to get size of.
* @return {!Blockly.utils.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);
const getSize = function(element) {
if (getStyle(element, 'display') != 'none') {
return getSizeWithDisplay(element);
}
// Evaluate size with a temporary element.
@@ -59,7 +60,7 @@ Blockly.utils.style.getSize = function(element) {
* @return {!Blockly.utils.Size} Object with width/height properties.
* @private
*/
Blockly.utils.style.getSizeWithDisplay_ = function(element) {
const getSizeWithDisplay = function(element) {
const offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
const offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
return new Blockly.utils.Size(offsetWidth, offsetHeight);
@@ -79,9 +80,9 @@ Blockly.utils.style.getSizeWithDisplay_ = function(element) {
* @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) ||
const getStyle = function(element, style) {
return getComputedStyle(element, style) ||
getCascadedStyle(element, style) ||
(element.style && element.style[style]);
};
@@ -97,7 +98,7 @@ 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) {
const getComputedStyle = function(element, property) {
if (document.defaultView && document.defaultView.getComputedStyle) {
const styles = document.defaultView.getComputedStyle(element, null);
if (styles) {
@@ -120,7 +121,7 @@ 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) {
const getCascadedStyle = function(element, style) {
return /** @type {string} */ (
element.currentStyle ? element.currentStyle[style] : null);
};
@@ -131,7 +132,7 @@ Blockly.utils.style.getCascadedStyle = function(element, style) {
* @param {!Element} el Element to get the page offset for.
* @return {!Blockly.utils.Coordinate} The page offset.
*/
Blockly.utils.style.getPageOffset = function(el) {
const getPageOffset = function(el) {
const pos = new Blockly.utils.Coordinate(0, 0);
const box = el.getBoundingClientRect();
const documentElement = document.documentElement;
@@ -152,7 +153,7 @@ Blockly.utils.style.getPageOffset = function(el) {
* Similar to Closure's goog.style.getViewportPageOffset
* @return {!Blockly.utils.Coordinate} The page offset of the viewport.
*/
Blockly.utils.style.getViewportPageOffset = function() {
const getViewportPageOffset = function() {
const body = document.body;
const documentElement = document.documentElement;
const scrollLeft = body.scrollLeft || documentElement.scrollLeft;
@@ -172,7 +173,7 @@ 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) {
const setElementShown = function(el, isShown) {
el.style.display = isShown ? '' : 'none';
};
@@ -183,8 +184,8 @@ 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');
const isRightToLeft = function(el) {
return 'rtl' == getStyle(el, 'direction');
};
/**
@@ -193,11 +194,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) {
const left = Blockly.utils.style.getComputedStyle(element, 'borderLeftWidth');
const right = Blockly.utils.style.getComputedStyle(element, 'borderRightWidth');
const top = Blockly.utils.style.getComputedStyle(element, 'borderTopWidth');
const bottom = Blockly.utils.style.getComputedStyle(element, 'borderBottomWidth');
const getBorderBox = function(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),
@@ -220,10 +221,10 @@ 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(
const scrollIntoContainerView = function(
element, container, opt_center) {
const offset =
Blockly.utils.style.getContainerOffsetToScrollInto(element,
getContainerOffsetToScrollInto(element,
container, opt_center);
container.scrollLeft = offset.x;
container.scrollTop = offset.y;
@@ -244,20 +245,20 @@ Blockly.utils.style.scrollIntoContainerView = function(
* @return {!Blockly.utils.Coordinate} The new scroll position of the container,
* in form of goog.math.Coordinate(scrollLeft, scrollTop).
*/
Blockly.utils.style.getContainerOffsetToScrollInto = function(
const getContainerOffsetToScrollInto = function(
element, container, opt_center) {
// Absolute position of the element's border's top left corner.
const elementPos = Blockly.utils.style.getPageOffset(element);
const elementPos = getPageOffset(element);
// Absolute position of the container's border's top left corner.
const containerPos = Blockly.utils.style.getPageOffset(container);
const 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.
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.
const elementSize = Blockly.utils.style.getSizeWithDisplay_(element);
const elementSize = getSizeWithDisplay(element);
const spaceX = container.clientWidth - elementSize.width;
const spaceY = container.clientHeight - elementSize.height;
let scrollLeft = container.scrollLeft;
@@ -279,3 +280,16 @@ Blockly.utils.style.getContainerOffsetToScrollInto = function(
}
return new Blockly.utils.Coordinate(scrollLeft, scrollTop);
};
exports = {
getSize,
getComputedStyle,
getCascadedStyle,
getPageOffset,
getViewportPageOffset,
setElementShown,
isRightToLeft,
getBorderBox,
scrollIntoContainerView,
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'], []);
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'], []);
goog.addDependency('../../core/utils/toolbox.js', ['Blockly.utils.toolbox'], ['Blockly.Xml', 'Blockly.constants']);