Cartographie de l'état interne

tests/unit/turn.unit.test.js

@@ -36,6 +36,10 @@ function createFixture(pageCount = 4, windowOptions = {}) {
   return { window: dom.window, document: dom.window.document, $ };
 }
 
+function sortedKeys(object) {
+  return Object.keys(object).sort();
+}
+
 describe('turn.js jQuery plugin', () => {
   let fixture;
 
@@ -92,6 +96,130 @@ describe('turn.js jQuery plugin', () => {
     expect($book.turn('view')).toEqual([2, 3]);
   });
 
+  it('keeps documented book and flip state after initialization', () => {
+    const { $ } = fixture;
+    const $book = $('#book');
+
+    $book.turn({
+      width: 600,
+      height: 400,
+      display: 'double',
+      gradients: false,
+      acceleration: false
+    });
+
+    const bookState = $book.data();
+
+    expect(sortedKeys(bookState)).toEqual([
+      'display',
+      'done',
+      'eventHandlers',
+      'fparent',
+      'opts',
+      'page',
+      'pageDefaults',
+      'pageMv',
+      'pageObjs',
+      'pagePlace',
+      'pageWrap',
+      'pages',
+      'totalPages',
+      'turnOriginal'
+    ]);
+    expect(bookState.opts).toMatchObject({
+      width: 600,
+      height: 400,
+      display: 'double',
+      gradients: false,
+      acceleration: false
+    });
+    expect(bookState.turnOriginal).toEqual({
+      style: undefined,
+      class: undefined
+    });
+    expect(Object.keys(bookState.pageObjs)).toEqual(['1', '2', '3', '4']);
+    expect(Object.keys(bookState.pageDefaults)).toEqual(['1', '2', '3', '4']);
+    expect(Object.keys(bookState.pageWrap)).toEqual(['1', '2', '3', '4']);
+    expect(Object.keys(bookState.pagePlace)).toEqual(['1', '2', '3', '4']);
+    expect(Object.keys(bookState.pages)).toEqual(['1']);
+    expect(bookState.pageMv).toEqual([]);
+    expect(bookState.totalPages).toBe(4);
+    expect(bookState.page).toBe(1);
+
+    const pageState = bookState.pages[1].data();
+
+    expect(pageState.f).toBeDefined();
+    expect(pageState.f.opts).toMatchObject({
+      page: 1,
+      next: 2,
+      turn: $book,
+      duration: 600,
+      acceleration: false,
+      corners: 'forward',
+      backGradient: false,
+      frontGradient: false
+    });
+    expect(pageState.f.parent[0]).toBe(bookState.pageWrap[1][0]);
+    expect(pageState.f.wrapper).toBeDefined();
+    expect(pageState.f.fwrapper).toBeDefined();
+    expect(pageState.f.fpage).toBeDefined();
+  });
+
+  it('updates moving page state during next and previous turns', () => {
+    fixture.window.close();
+
+    const frameCallbacks = [];
+    const requestAnimationFrame = vi.fn(callback => {
+      frameCallbacks.push(callback);
+      return frameCallbacks.length;
+    });
+
+    fixture = createFixture(6, {
+      requestAnimationFrame,
+      cancelAnimationFrame: vi.fn()
+    });
+
+    const { $ } = fixture;
+    const $book = $('#book');
+
+    $book.turn({
+      width: 600,
+      height: 400,
+      display: 'double',
+      gradients: false,
+      acceleration: false,
+      duration: 32
+    });
+
+    $book.turn('next');
+
+    expect($book.turn('page')).toBe(2);
+    expect($book.turn('view')).toEqual([2, 3]);
+    expect($book.data('tpage')).toBe(2);
+    expect($book.data('pageMv')).toEqual([1]);
+
+    while (frameCallbacks.length) {
+      frameCallbacks.shift()(1000);
+    }
+
+    expect($book.data('tpage')).toBeUndefined();
+    expect($book.data('pageMv')).toEqual([]);
+
+    $book.turn('previous');
+
+    expect($book.turn('page')).toBe(1);
+    expect($book.turn('view')).toEqual([0, 1]);
+    expect($book.data('tpage')).toBe(1);
+    expect($book.data('pageMv')).toEqual([2]);
+
+    while (frameCallbacks.length) {
+      frameCallbacks.shift()(2000);
+    }
+
+    expect($book.data('tpage')).toBeUndefined();
+    expect($book.data('pageMv')).toEqual([]);
+  });
+
   it('can add and remove pages dynamically', () => {
     const { $ } = fixture;
     const $book = $('#book');

turn.js

@@ -191,6 +191,19 @@ var has3d,
 		return Object.prototype.hasOwnProperty.call(object, property);
 	},
 
+	// Internal book state stored on the root element with $.data().
+	// This helper keeps direct $.data() reads easy to identify.
+
+	turnData = function(book) {
+		return book.data();
+	},
+
+	// Internal flip state stored on each active page with $.data('f').
+
+	flipData = function(page) {
+		return page.data().f;
+	},
+
 	// Gets the CSS3 vendor prefix
 
 	getPrefix = function() {
@@ -237,19 +250,23 @@ turnMethods = {
 			vendor = getPrefix();
 		}
 
-		var i, data = this.data(), ch = this.children();
+		var i, data = turnData(this), ch = this.children();
 	
 		opts = $.extend({width: this.width(), height: this.height()}, turnOptions, opts);
+		// Book state: options, original DOM attributes and page indexes.
 		data.turnOriginal = {
 			style: this.attr('style'),
 			'class': this.attr('class')
 		};
 		data.opts = opts;
+		// Source page nodes and their original attributes for destroy().
 		data.pageObjs = {};
 		data.pageDefaults = {};
+		// Active flip instances, page wrappers and current DOM placement.
 		data.pages = {};
 		data.pageWrap = {};
 		data.pagePlace = {};
+		// Moving pages; tpage is created later while a turn is pending.
 		data.pageMv = [];
 		data.totalPages = opts.pages || 0;
 
@@ -310,7 +327,7 @@ turnMethods = {
 	destroy: function() {
 
 		var page, original,
-			data = this.data();
+			data = turnData(this);
 
 		if (!data.opts)
 			return this;
@@ -364,7 +381,7 @@ turnMethods = {
 
 	_destroyPage: function(page) {
 
-		var data = this.data(),
+		var data = turnData(this),
 			pageObj = data.pageObjs[page],
 			pageData,
 			flipData,
@@ -415,7 +432,7 @@ turnMethods = {
 	addPage: function(element, page) {
 
 		var incPages = false,
-			data = this.data(),
+			data = turnData(this),
 			lastPage = data.totalPages+1;
 
 		if (page) {
@@ -529,7 +546,7 @@ turnMethods = {
 
 	_makeFlip: function(page) {
 
-		var data = this.data();
+		var data = turnData(this);
 
 		if (!data.pages[page] && data.pagePlace[page]==page) {
 
@@ -1336,7 +1353,7 @@ flipMethods = {
 
 	options: function(opts) {
 		
-		var data = this.data().f;
+		var data = flipData(this);
 
 		if (opts) {
 			flipMethods.setData.call(this, {opts: $.extend({}, data.opts || flipOptions, opts) });
@@ -1348,7 +1365,7 @@ flipMethods = {
 
 	z: function(z) {
 
-		var data = this.data().f;
+		var data = flipData(this);
 		data.opts['z-index'] = z;
 		data.fwrapper.css({'z-index': z || parseInt(data.parent.css('z-index'), 10) || 0});
 
@@ -1357,7 +1374,8 @@ flipMethods = {
 
 	_cAllowed: function() {
 
-		return corners[this.data().f.opts.corners] || this.data().f.opts.corners;
+		var data = flipData(this);
+		return corners[data.opts.corners] || data.opts.corners;
 
 	},
 
@@ -1368,7 +1386,7 @@ flipMethods = {
 
 		e = (isTouch) ? e.originalEvent.touches : [e];
 
-		var data = this.data().f,
+		var data = flipData(this),
 			pos = data.parent.offset(),
 			width = this.width(),
 			height = this.height(),