From 836cc36598bcf64f86daa78faf04d7f54e7e850c Mon Sep 17 00:00:00 2001 From: Robert Hall Date: Thu, 15 Feb 2018 22:10:07 +0700 Subject: [PATCH 1/2] Using pageYOffset & pageXOffset --- src/generators/nodes/Window.ts | 6 +++--- test/js/samples/window-binding-scroll/expected-bundle.js | 6 +++--- test/js/samples/window-binding-scroll/expected.js | 6 +++--- test/runtime/samples/window-bind-scroll-update/_config.js | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/generators/nodes/Window.ts b/src/generators/nodes/Window.ts index c8b044bb2dd1..12754c911017 100644 --- a/src/generators/nodes/Window.ts +++ b/src/generators/nodes/Window.ts @@ -158,10 +158,10 @@ export default class Window extends Node { clearTimeout(${timeout}); var x = ${bindings.scrollX ? `#component.get("${bindings.scrollX}")` - : `window.scrollX`}; + : `window.pageXOffset || window.scrollX`}; var y = ${bindings.scrollY ? `#component.get("${bindings.scrollY}")` - : `window.scrollY`}; + : `window.pageYOffset || window.scrollY`}; window.scrollTo(x, y); ${timeout} = setTimeout(${clear}, 100); } @@ -182,7 +182,7 @@ export default class Window extends Node { #component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) { ${lock} = true; clearTimeout(${timeout}); - window.scrollTo(${isX ? 'x, window.scrollY' : 'window.scrollX, y'}); + window.scrollTo(${isX ? 'x, window.pageYOffset || window.scrollY' : 'window.pageXOffset || window.scrollX, y'}); ${timeout} = setTimeout(${clear}, 100); }); `); diff --git a/test/js/samples/window-binding-scroll/expected-bundle.js b/test/js/samples/window-binding-scroll/expected-bundle.js index e3d8e740305a..55b4874c7587 100644 --- a/test/js/samples/window-binding-scroll/expected-bundle.js +++ b/test/js/samples/window-binding-scroll/expected-bundle.js @@ -198,7 +198,7 @@ function create_main_fragment(state, component) { window_updating = true; component.set({ - y: this.scrollY + y: this.pageYOffset || this.scrollY }); window_updating = false; } @@ -207,7 +207,7 @@ function create_main_fragment(state, component) { component.observe("y", function(y) { window_updating = true; clearTimeout(window_updating_timeout); - window.scrollTo(window.scrollX, y); + window.scrollTo(window.pageXOffset || window.scrollX, y); window_updating_timeout = setTimeout(clear_window_updating, 100); }); @@ -243,7 +243,7 @@ function create_main_fragment(state, component) { function SvelteComponent(options) { init(this, options); this._state = assign({}, options.data); - this._state.y = window.scrollY; + this._state.y = window.pageYOffset || window.scrollY; this._fragment = create_main_fragment(this._state, this); diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 70eae003d7b9..237460f71e13 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -9,7 +9,7 @@ function create_main_fragment(state, component) { window_updating = true; component.set({ - y: this.scrollY + y: this.pageYOffset || this.scrollY }); window_updating = false; } @@ -18,7 +18,7 @@ function create_main_fragment(state, component) { component.observe("y", function(y) { window_updating = true; clearTimeout(window_updating_timeout); - window.scrollTo(window.scrollX, y); + window.scrollTo(window.pageXOffset || window.scrollX, y); window_updating_timeout = setTimeout(clear_window_updating, 100); }); @@ -54,7 +54,7 @@ function create_main_fragment(state, component) { function SvelteComponent(options) { init(this, options); this._state = assign({}, options.data); - this._state.y = window.scrollY; + this._state.y = window.pageYOffset || window.scrollY; this._fragment = create_main_fragment(this._state, this); diff --git a/test/runtime/samples/window-bind-scroll-update/_config.js b/test/runtime/samples/window-bind-scroll-update/_config.js index 3ae13c33cefc..34a19a8c3fdd 100644 --- a/test/runtime/samples/window-bind-scroll-update/_config.js +++ b/test/runtime/samples/window-bind-scroll-update/_config.js @@ -2,10 +2,10 @@ export default { skip: true, // JSDOM test ( assert, component, target, window ) { - assert.equal( window.scrollY, 0 ); + assert.equal( window.pageYOffset || window.scrollY, 0 ); component.set({ scrollY: 100 }); - assert.equal( window.scrollY, 100 ); + assert.equal( window.pageYOffset || window.scrollY, 100 ); component.destroy(); } From a5cc451c9c558fcbbe83afae2dc2b8a873070b26 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 25 Feb 2018 08:45:59 -0500 Subject: [PATCH 2/2] only use page[XY]Offset --- src/generators/nodes/Window.ts | 16 +++++++++++----- .../window-binding-scroll/expected-bundle.js | 6 +++--- .../js/samples/window-binding-scroll/expected.js | 6 +++--- .../samples/window-bind-scroll-update/_config.js | 4 ++-- 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/generators/nodes/Window.ts b/src/generators/nodes/Window.ts index 12754c911017..7a1f70376b3a 100644 --- a/src/generators/nodes/Window.ts +++ b/src/generators/nodes/Window.ts @@ -19,6 +19,11 @@ const associatedEvents = { scrollY: 'scroll', }; +const properties = { + scrollX: 'pageXOffset', + scrollY: 'pageYOffset' +}; + const readonly = new Set([ 'innerWidth', 'innerHeight', @@ -93,15 +98,16 @@ export default class Window extends Node { if (attribute.name === 'online') return; const associatedEvent = associatedEvents[attribute.name]; + const property = properties[attribute.name] || attribute.name; if (!events[associatedEvent]) events[associatedEvent] = []; events[associatedEvent].push( - `${attribute.value.name}: this.${attribute.name}` + `${attribute.value.name}: this.${property}` ); // add initial value generator.metaBindings.push( - `this._state.${attribute.value.name} = window.${attribute.name};` + `this._state.${attribute.value.name} = window.${property};` ); } }); @@ -158,10 +164,10 @@ export default class Window extends Node { clearTimeout(${timeout}); var x = ${bindings.scrollX ? `#component.get("${bindings.scrollX}")` - : `window.pageXOffset || window.scrollX`}; + : `window.pageXOffset`}; var y = ${bindings.scrollY ? `#component.get("${bindings.scrollY}")` - : `window.pageYOffset || window.scrollY`}; + : `window.pageYOffset`}; window.scrollTo(x, y); ${timeout} = setTimeout(${clear}, 100); } @@ -182,7 +188,7 @@ export default class Window extends Node { #component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) { ${lock} = true; clearTimeout(${timeout}); - window.scrollTo(${isX ? 'x, window.pageYOffset || window.scrollY' : 'window.pageXOffset || window.scrollX, y'}); + window.scrollTo(${isX ? 'x, window.pageYOffset' : 'window.pageXOffset, y'}); ${timeout} = setTimeout(${clear}, 100); }); `); diff --git a/test/js/samples/window-binding-scroll/expected-bundle.js b/test/js/samples/window-binding-scroll/expected-bundle.js index 55b4874c7587..c3623445871d 100644 --- a/test/js/samples/window-binding-scroll/expected-bundle.js +++ b/test/js/samples/window-binding-scroll/expected-bundle.js @@ -198,7 +198,7 @@ function create_main_fragment(state, component) { window_updating = true; component.set({ - y: this.pageYOffset || this.scrollY + y: this.pageYOffset }); window_updating = false; } @@ -207,7 +207,7 @@ function create_main_fragment(state, component) { component.observe("y", function(y) { window_updating = true; clearTimeout(window_updating_timeout); - window.scrollTo(window.pageXOffset || window.scrollX, y); + window.scrollTo(window.pageXOffset, y); window_updating_timeout = setTimeout(clear_window_updating, 100); }); @@ -243,7 +243,7 @@ function create_main_fragment(state, component) { function SvelteComponent(options) { init(this, options); this._state = assign({}, options.data); - this._state.y = window.pageYOffset || window.scrollY; + this._state.y = window.pageYOffset; this._fragment = create_main_fragment(this._state, this); diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 237460f71e13..be6360a6501d 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -9,7 +9,7 @@ function create_main_fragment(state, component) { window_updating = true; component.set({ - y: this.pageYOffset || this.scrollY + y: this.pageYOffset }); window_updating = false; } @@ -18,7 +18,7 @@ function create_main_fragment(state, component) { component.observe("y", function(y) { window_updating = true; clearTimeout(window_updating_timeout); - window.scrollTo(window.pageXOffset || window.scrollX, y); + window.scrollTo(window.pageXOffset, y); window_updating_timeout = setTimeout(clear_window_updating, 100); }); @@ -54,7 +54,7 @@ function create_main_fragment(state, component) { function SvelteComponent(options) { init(this, options); this._state = assign({}, options.data); - this._state.y = window.pageYOffset || window.scrollY; + this._state.y = window.pageYOffset; this._fragment = create_main_fragment(this._state, this); diff --git a/test/runtime/samples/window-bind-scroll-update/_config.js b/test/runtime/samples/window-bind-scroll-update/_config.js index 34a19a8c3fdd..71a880e43873 100644 --- a/test/runtime/samples/window-bind-scroll-update/_config.js +++ b/test/runtime/samples/window-bind-scroll-update/_config.js @@ -2,10 +2,10 @@ export default { skip: true, // JSDOM test ( assert, component, target, window ) { - assert.equal( window.pageYOffset || window.scrollY, 0 ); + assert.equal( window.pageYOffset, 0 ); component.set({ scrollY: 100 }); - assert.equal( window.pageYOffset || window.scrollY, 100 ); + assert.equal( window.pageYOffset, 100 ); component.destroy(); }