Skip to content

Commit

Permalink
Migrate FlipView to _ElementResizeInstrument
Browse files Browse the repository at this point in the history 
 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
AmazingJaze committed Sep 24, 2015
1 parent 8e8a3b0 commit 81f235e
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 55 deletions.
55 changes: 32 additions & 23 deletions src/js/WinJS/Controls/FlipView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand Down Expand Up @@ -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"; },
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
},
Expand Down
2 changes: 2 additions & 0 deletions src/less/styles-flipview.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
.win-flipview {
overflow: hidden;
height: 400px;
/* Necessary for detecting element resize */
position: relative;

.win-surface {
-ms-scroll-chaining: none;
Expand Down
44 changes: 30 additions & 14 deletions tests/FlipView/FlipViewEventsTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -116,7 +116,7 @@ module WinJSTests {
}
];

runFlipViewTests(flipView, tests);
runFlipViewTests(flipView, tests, pageAlreadyCompleted);
}


Expand All @@ -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);
});
};
}

Expand Down
42 changes: 24 additions & 18 deletions tests/FlipView/FlipperHelpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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) {
Expand All @@ -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));
Expand All @@ -237,7 +237,8 @@ function verifyFlipViewPagePositions(flipView) {
}
}

function runFlipViewTests(flipView, tests) {
function runFlipViewTests(flipView, tests, pageAlreadyCompleted?: boolean) {

var currentTest = 0;

function runNextTest() {
Expand All @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions tests/TestLib/winjs.dev.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,7 @@ declare module WinJS {
class PrivateFlipView<T> extends FlipView<T> {
_pageManager;
_animating: boolean;
_elementResizeInstrument: _ElementResizeInstrument;
}

class PrivateSemanticZoom extends SemanticZoom {
Expand Down

0 comments on commit 81f235e

Please sign in to comment.