diff --git a/src/compile/nodes/Binding.ts b/src/compile/nodes/Binding.ts index 771721cb34..e0f928ccfa 100644 --- a/src/compile/nodes/Binding.ts +++ b/src/compile/nodes/Binding.ts @@ -6,6 +6,7 @@ import flattenReference from '../../utils/flattenReference'; import Compiler from '../Compiler'; import Block from '../dom/Block'; import Expression from './shared/Expression'; +import { dimensions } from '../../utils/patterns'; const readOnlyMediaAttributes = new Set([ 'duration', @@ -62,7 +63,7 @@ export default class Binding extends Node { const needsLock = node.name !== 'input' || !/radio|checkbox|range|color/.test(node.getStaticAttributeValue('type')); const isReadOnly = ( (node.isMediaNode() && readOnlyMediaAttributes.has(this.name)) || - this.name === 'width' || this.name === 'height' + dimensions.test(this.name) ); let updateCondition: string; @@ -122,8 +123,8 @@ export default class Binding extends Node { initialUpdate = null; } - // bind:width and bind:height - if (this.name === 'width' || this.name === 'height') { + // bind:offsetWidth and bind:offsetHeight + if (dimensions.test(this.name)) { initialUpdate = null; updateDom = null; } diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index 3b84b0c369..bb7d71fcd7 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -17,6 +17,7 @@ import Action from './Action'; import Text from './Text'; import * as namespaces from '../../utils/namespaces'; import mapChildren from './shared/mapChildren'; +import { dimensions } from '../../utils/patterns'; // source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7 const booleanAttributes = new Set('async autocomplete autofocus autoplay border challenge checked compact contenteditable controls default defer disabled formnovalidate frameborder hidden indeterminate ismap loop multiple muted nohref noresize noshade novalidate nowrap open readonly required reversed scoped scrolling seamless selected sortable spellcheck translate'.split(' ')); @@ -489,13 +490,27 @@ export default class Element extends Node { `); group.events.forEach(name => { - block.builders.hydrate.addLine( - `@addListener(${this.var}, "${name}", ${handler});` - ); + if (name === 'resize') { + // special case + const resize_listener = block.getUniqueName(`${this.var}_resize_listener`); + block.addVariable(resize_listener); - block.builders.destroy.addLine( - `@removeListener(${this.var}, "${name}", ${handler});` - ); + block.builders.mount.addLine( + `${resize_listener} = @addResizeListener(${this.var}, ${handler});` + ); + + block.builders.unmount.addLine( + `${resize_listener}.cancel();` + ); + } else { + block.builders.hydrate.addLine( + `@addListener(${this.var}, "${name}", ${handler});` + ); + + block.builders.destroy.addLine( + `@removeListener(${this.var}, "${name}", ${handler});` + ); + } }); const allInitialStateIsDefined = group.bindings @@ -509,6 +524,14 @@ export default class Element extends Node { `if (!(${allInitialStateIsDefined})) #component.root._beforecreate.push(${handler});` ); } + + if (group.events[0] === 'resize') { + this.compiler.target.hasComplexBindings = true; + + block.builders.hydrate.addLine( + `#component.root._beforecreate.push(${handler});` + ); + } }); this.initialUpdate = mungedBindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n'); @@ -973,7 +996,7 @@ const events = [ { eventNames: ['resize'], filter: (node: Element, name: string) => - (name === 'width' || name === 'height') + dimensions.test(name) }, // media events diff --git a/src/shared/dom.js b/src/shared/dom.js index 5661a121c1..54778d1aaf 100644 --- a/src/shared/dom.js +++ b/src/shared/dom.js @@ -203,14 +203,18 @@ export function addResizeListener(element, fn) { object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;'); object.type = 'text/html'; - if (isIE) element.appendChild(object); - object.data = 'about:blank'; - if (!isIE) element.appendChild(object); - object.onload = () => { object.contentDocument.defaultView.addEventListener('resize', fn); }; + if (/Trident/.test(navigator.userAgent)) { + element.appendChild(object); + object.data = 'about:blank'; + } else { + object.data = 'about:blank'; + element.appendChild(object); + } + return { cancel: () => { object.contentDocument.defaultView.removeEventListener('resize', fn); diff --git a/src/utils/patterns.ts b/src/utils/patterns.ts index 8fea930aa6..317a7c1990 100644 --- a/src/utils/patterns.ts +++ b/src/utils/patterns.ts @@ -1 +1,3 @@ export const whitespace = /[ \t\r\n]/; + +export const dimensions = /^(?:offset|client)(?:Width|Height)$/; diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts index 3e73d390b1..cd1db6664b 100644 --- a/src/validate/html/validateElement.ts +++ b/src/validate/html/validateElement.ts @@ -2,6 +2,7 @@ import * as namespaces from '../../utils/namespaces'; import validateEventHandler from './validateEventHandler'; import validate, { Validator } from '../index'; import { Node } from '../../interfaces'; +import { dimensions } from '../../utils/patterns'; const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/; @@ -157,7 +158,7 @@ export default function validateElement( message: `'${name}' binding can only be used with