diff --git a/core/utils/style.js b/core/utils/style.js index 1c169453d..1fcfbdd62 100644 --- a/core/utils/style.js +++ b/core/utils/style.js @@ -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; diff --git a/tests/deps.js b/tests/deps.js index ffa833134..cdeae73f4 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -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']);