Permalink
Browse files

Migrate FlipView to _ElementResizeInstrument

 Change Description:

         This Commit Migrates the WinJS.UI.FlipView control to use the _ElementResizeInstrument component to detect resizes instead of "mselementresize"
         Updated timings on some unit tests to work with new resize pattern and wait until the initial FlipView async resize event was handled after construction before continuing with the test.
  • Loading branch information...
AmazingJaze committed Sep 24, 2015
1 parent 8e8a3b0 commit 81f235ea5e00de61f9e5bf755040cbfb57dc1478
@@ -18,11 +18,12 @@ define([
'../Utilities/_Hoverable',
'../Utilities/_ItemsManager',
'../Utilities/_UI',
'./ElementResizeInstrument',
'./FlipView/_Constants',
'./FlipView/_PageManager',
'require-style!less/styles-flipview',
'require-style!less/colors-flipview'
], function flipperInit(_Global, _Base, _BaseUtils, _ErrorFromName, _Events, _Resources, _WriteProfilerMark, Animations, _TransitionAnimation, BindingList, Promise, Scheduler, _Control, _Dispose, _ElementUtilities, _Hoverable, _ItemsManager, _UI, _Constants, _PageManager) {
], function flipperInit(_Global, _Base, _BaseUtils, _ErrorFromName, _Events, _Resources, _WriteProfilerMark, Animations, _TransitionAnimation, BindingList, Promise, Scheduler, _Control, _Dispose, _ElementUtilities, _Hoverable, _ItemsManager, _UI, _ElementResizeInstrument, _Constants, _PageManager) {
"use strict";
_Base.Namespace.define("WinJS.UI", {
@@ -87,14 +88,6 @@ define([
}
}
function flipviewResized(e) {
var that = e.target && e.target.winControl;
if (that && that instanceof FlipView) {
_WriteProfilerMark("WinJS.UI.FlipView:resize,StartTM");
that._resize();
}
}
var strings = {
get badAxis() { return "Invalid argument: orientation must be a string, either 'horizontal' or 'vertical'"; },
get badCurrentPage() { return "Invalid argument: currentPage must be a number greater than or equal to zero and be within the bounds of the datasource"; },
@@ -206,7 +199,8 @@ define([
_ElementUtilities._globalListener.removeEventListener(this._flipviewDiv, 'wheel', this._windowWheelHandlerBound);
_ElementUtilities._globalListener.removeEventListener(this._flipviewDiv, 'mousewheel', this._windowWheelHandlerBound);
_ElementUtilities._resizeNotifier.unsubscribe(this._flipviewDiv, flipviewResized);
_ElementUtilities._resizeNotifier.unsubscribe(this._flipviewDiv, this._resizeHandlerBound);
this._elementResizeInstrument.dispose();
this._disposed = true;
@@ -652,9 +646,6 @@ define([
new _ElementUtilities._MutationObserver(flipViewPropertyChanged).observe(this._flipviewDiv, { attributes: true, attributeFilter: ["dir", "style"] });
this._cachedStyleDir = this._flipviewDiv.style.direction;
this._flipviewDiv.addEventListener("mselementresize", flipviewResized);
_ElementUtilities._resizeNotifier.subscribe(this._flipviewDiv, flipviewResized);
this._contentDiv.addEventListener("mouseleave", function () {
that._mouseInViewport = false;
}, false);
@@ -714,20 +705,37 @@ define([
}
}, true);
this._resizeHandlerBound = this._resizeHandler.bind(this);
this._elementResizeInstrument = new _ElementResizeInstrument._ElementResizeInstrument();
this._flipviewDiv.appendChild(this._elementResizeInstrument.element);
this._elementResizeInstrument.addEventListener("resize", this._resizeHandlerBound);
_ElementUtilities._resizeNotifier.subscribe(this._flipviewDiv, this._resizeHandlerBound);
var initiallyParented = _Global.document.body.contains(this._flipviewDiv);
if (initiallyParented) {
this._elementResizeInstrument.addedToDom();
}
// Scroll position isn't maintained when an element is added/removed from
// the DOM so every time we are placed back in, let the PageManager
// fix the scroll position.
var initiallyParented = _Global.document.body.contains(this._flipviewDiv);
_ElementUtilities._addInsertedNotifier(this._flipviewDiv);
var initialTrigger = true;
this._flipviewDiv.addEventListener("WinJSNodeInserted", function (event) {
// WinJSNodeInserted fires even if the element is already in the DOM
if (initiallyParented) {
initiallyParented = false;
return;
// WinJSNodeInserted fires even if the element was already in the DOM
if (initialTrigger) {
initialTrigger = false;
if (!initiallyParented) {
that._elementResizeInstrument.addedToDom();
that._pageManager.resized();
}
} else {
that._pageManager.resized();
}
that._pageManager.resized();
}, false);
this._flipviewDiv.addEventListener("keydown", function (event) {
if (that._disposed) {
return;
@@ -881,6 +889,11 @@ define([
return false;
},
_resizeHandler: function FlipView_resizeHandler() {
_WriteProfilerMark("WinJS.UI.FlipView:resize,StartTM");
this._pageManager.resized();
},
_refreshHandler: function FlipView_refreshHandler() {
var dataSource = this._dataSourceAfterRefresh || this._dataSource,
renderer = this._itemRendererAfterRefresh || this._itemRenderer,
@@ -1084,10 +1097,6 @@ define([
this._completeJumpPending = false;
},
_resize: function FlipView_resize() {
this._pageManager.resized();
},
_setCurrentIndex: function FlipView_setCurrentIndex(index) {
return this._pageManager.jumpToIndex(index);
},
@@ -6,6 +6,8 @@
.win-flipview {
overflow: hidden;
height: 400px;
/* Necessary for detecting element resize */
position: relative;
.win-surface {
-ms-scroll-chaining: none;
@@ -17,11 +17,11 @@ module WinJSTests {
flipView.itemTemplate.verifyOutput(getDisplayedElement(flipView), rawData);
}
function eventsTest(element, flipView, rawData, complete, useL0DomEvent) {
var gotVisibilityChangedTrue,
gotVisibilityChangedFalse,
outgoingElement,
expectedIncomingElement;
function eventsTest(element, flipView, rawData, complete, useL0DomEvent, pageAlreadyCompleted: boolean) {
var gotVisibilityChangedTrue;
var gotVisibilityChangedFalse;
var outgoingElement;
var expectedIncomingElement;
function resetResults() {
gotVisibilityChangedTrue = false;
@@ -116,7 +116,7 @@ module WinJSTests {
}
];
runFlipViewTests(flipView, tests);
runFlipViewTests(flipView, tests, pageAlreadyCompleted);
}
@@ -143,16 +143,32 @@ module WinJSTests {
}
function generate(name, testFunction) {
function generate(name, executeTest: Function) {
function generateTest(orientation, useL0DomEvent) {
FlipViewEventsTests.prototype[name + "_" + orientation + (useL0DomEvent ? "_useL0DomEvent" : "")] = function (complete) {
var element = document.getElementById("BasicFlipView"),
testData = createArraySource(COUNT, ["400px"], ["400px"]),
rawData = testData.rawData,
options = { itemDataSource: testData.dataSource, itemTemplate: basicInstantRenderer, orientation: orientation };
var flipView = new WinJS.UI.FlipView(element, options);
testFunction(element, flipView, rawData, complete, useL0DomEvent);
var element = document.getElementById("BasicFlipView");
var testData = createArraySource(COUNT, ["400px"], ["400px"]);
var rawData = testData.rawData;
var options = { itemDataSource: testData.dataSource, itemTemplate: basicInstantRenderer, orientation: orientation };
var flipView: WinJS.UI.PrivateFlipView<any>;
// Creating a new FlipView in the DOM will result in it handling an initial async resize event.
// Wait for this to fire before continuing the test, so we don't detect any false positives
// caused by resize handling code running in the middle of a test.
flipView = <WinJS.UI.PrivateFlipView<any>> new WinJS.UI.FlipView(element, options);
var initialResizePromise = new WinJS.Promise((c) => {
flipView._elementResizeInstrument.addEventListener("resize", c);
});
var pageCompletedPromise = new WinJS.Promise((c) => {
flipView.addEventListener("pagecompleted", c);
});
WinJS.Promise
.join([
initialResizePromise,
pageCompletedPromise
])
.then(() => {
executeTest(element, flipView, rawData, complete, useL0DomEvent, /* pageAlreadyCompleted */ true);
});
};
}
@@ -125,8 +125,8 @@ var basicInstantRenderer:any = function basicInstantRenderer(itemPromise) {
rootElement.style.width = itemData.data.width;
rootElement.style.height = itemData.data.height;
rootElement.textContent = "";
var titleElement = document.createElement("div"),
dataElement = document.createElement("div");
var titleElement = document.createElement("div");
var dataElement = document.createElement("div");
titleElement.textContent = itemData.data.title;
dataElement.textContent = itemData.data.data1;
rootElement.appendChild(titleElement);
@@ -162,9 +162,9 @@ var alternateBasicInstantRenderer:any = function alternateBasicInstantRenderer(i
rootElement.style.height = itemData.data.height;
rootElement.id = itemData.data.itemId;
rootElement.textContent = "";
var titleElement = document.createElement("div"),
dataElement = document.createElement("div"),
dataElement2 = document.createElement("div");
var titleElement = document.createElement("div");
var dataElement = document.createElement("div");
var dataElement2 = document.createElement("div");
titleElement.textContent = "ALT" + itemData.data.title;
dataElement.textContent = "ALT" + itemData.data.data1,
dataElement2.textContent = "ALT" + itemData.data.data2;
@@ -179,9 +179,9 @@ var alternateBasicInstantRenderer:any = function alternateBasicInstantRenderer(i
alternateBasicInstantRenderer.verifyOutput = function (renderedItem, rawData) {
LiveUnit.LoggingCore.logComment("Verifying item matches what should have been rendered");
LiveUnit.Assert.areEqual(renderedItem.id, rawData.itemId);
var titleElement = renderedItem.firstElementChild,
dataElement = titleElement.nextElementSibling,
dataElement2 = dataElement.nextElementSibling;
var titleElement = renderedItem.firstElementChild;
var dataElement = titleElement.nextElementSibling;
var dataElement2 = dataElement.nextElementSibling;
LiveUnit.Assert.areEqual(titleElement.textContent, "ALT" + rawData.title);
LiveUnit.Assert.areEqual(dataElement.textContent, "ALT" + rawData.data1);
@@ -190,13 +190,13 @@ alternateBasicInstantRenderer.verifyOutput = function (renderedItem, rawData) {
};
function verifyFlipViewPagePositions(flipView) {
var width:number = flipView._flipviewDiv.offsetWidth,
height:number = flipView._flipviewDiv.offsetHeight,
scrollPosition = WinJS.Utilities.getScrollPosition(flipView._panningDivContainer),
horizontal:boolean = flipView.orientation === "horizontal",
itemSpacing:number = flipView.itemSpacing,
pages = [],
currentPageIndex = -1;
var width: number = flipView._flipviewDiv.offsetWidth;
var height: number = flipView._flipviewDiv.offsetHeight;
var scrollPosition = WinJS.Utilities.getScrollPosition(flipView._panningDivContainer);
var horizontal: boolean = flipView.orientation === "horizontal";
var itemSpacing: number = flipView.itemSpacing;
var pages = [];
var currentPageIndex = -1;
LiveUnit.Assert.areEqual(0, (scrollPosition[(horizontal ? "scrollTop" : "scrollLeft")]));
flipView._pageManager._forEachPage(function (curr) {
@@ -216,8 +216,8 @@ function verifyFlipViewPagePositions(flipView) {
var currentPageLocation:number = (horizontal ? pages[currentPageIndex].pageRoot.offsetLeft : pages[currentPageIndex].pageRoot.offsetTop);
for (var i = 0; i < currentPageIndex; i++) {
var pageLeft = pages[i].pageRoot.offsetLeft,
pageTop = pages[i].pageRoot.offsetTop;
var pageLeft = pages[i].pageRoot.offsetLeft;
var pageTop = pages[i].pageRoot.offsetTop;
LiveUnit.Assert.isFalse(nodeInView(flipView, pages[i]));
LiveUnit.Assert.areEqual(0, (horizontal ? pageTop : pageLeft));
@@ -237,7 +237,8 @@ function verifyFlipViewPagePositions(flipView) {
}
}
function runFlipViewTests(flipView, tests) {
function runFlipViewTests(flipView, tests, pageAlreadyCompleted?: boolean) {
var currentTest = 0;
function runNextTest() {
@@ -257,6 +258,11 @@ function runFlipViewTests(flipView, tests) {
}
flipView.addEventListener("pagecompleted", pageEventHandler, false);
if (pageAlreadyCompleted) {
runNextTest();
}
// else wait for the pagecompleted handler to fire
}
function quickNext(curr, next, horizontal) {
@@ -436,6 +436,7 @@ declare module WinJS {
class PrivateFlipView<T> extends FlipView<T> {
_pageManager;
_animating: boolean;
_elementResizeInstrument: _ElementResizeInstrument;
}
class PrivateSemanticZoom extends SemanticZoom {

0 comments on commit 81f235e

Please sign in to comment.