diff --git a/demos/magazine/index.html b/demos/magazine/index.html
index 7e141d5..ee8da30 100644
--- a/demos/magazine/index.html
+++ b/demos/magazine/index.html
@@ -1,62 +1,154 @@
-
+
-
-
+
+
+ turn.js - demo magazine double page
+
+ main {
+ min-height: 100vh;
+ display: grid;
+ align-content: center;
+ justify-items: center;
+ gap: 18px;
+ padding: 28px;
+ box-sizing: border-box;
+ }
+
+ .magazine-frame {
+ width: min(1152px, calc(100vw - 56px));
+ aspect-ratio: 1152 / 752;
+ }
+
+ #magazine {
+ width: 100%;
+ height: 100%;
+ background: #b8c0cc;
+ }
+
+ #magazine .page {
+ background-color: #ccc;
+ background-position: center;
+ background-size: 100% 100%;
+ overflow: hidden;
+ }
+
+ .controls {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ font-size: 15px;
+ }
+
+ button {
+ min-width: 96px;
+ min-height: 38px;
+ border: 1px solid #8e99aa;
+ border-radius: 6px;
+ background: #fff;
+ color: #202734;
+ font: inherit;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background: #f5f7fa;
+ }
+
+ #status {
+ min-width: 92px;
+ text-align: center;
+ }
+
+
+
-
+
+
+ Page 1
+
+
+
+
+
+
+ function updateStatus() {
+ $status.text('Page ' + $magazine.turn('page') + ' / ' + $magazine.turn('pages'));
+ }
+ var initialSize = currentMagazineSize();
+ $frame.css('height', initialSize.height);
+
+ $magazine.turn({
+ width: initialSize.width,
+ height: initialSize.height,
+ display: 'double',
+ acceleration: true,
+ gradients: true,
+ elevation: 50,
+ when: {
+ turned: updateStatus
+ }
+ });
+
+ $('#previous').on('click', function() {
+ $magazine.turn('previous');
+ });
+
+ $('#next').on('click', function() {
+ $magazine.turn('next');
+ });
+
+ $(document).on('keydown.turnDemo', function(event) {
+ if (event.key === 'ArrowLeft') $magazine.turn('previous');
+ if (event.key === 'ArrowRight') $magazine.turn('next');
+ });
+
+ $(window).on('resize.turnDemo', syncMagazineSize);
+
+ updateStatus();
+ });
+
diff --git a/demos/magazine_single/index.html b/demos/magazine_single/index.html
index 945a6cd..4806622 100644
--- a/demos/magazine_single/index.html
+++ b/demos/magazine_single/index.html
@@ -1,62 +1,153 @@
-
+
-
-
+
+
+ turn.js - demo magazine simple page
+
+ main {
+ min-height: 100vh;
+ display: grid;
+ align-content: center;
+ justify-items: center;
+ gap: 18px;
+ padding: 28px;
+ box-sizing: border-box;
+ }
+
+ .magazine-frame {
+ width: min(576px, calc(100vw - 56px));
+ aspect-ratio: 576 / 752;
+ }
+
+ #magazine {
+ width: 100%;
+ height: 100%;
+ background: #b8c0cc;
+ }
+
+ #magazine .page {
+ background-color: #ccc;
+ background-position: center;
+ background-size: 100% 100%;
+ overflow: hidden;
+ }
+
+ .controls {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ font-size: 15px;
+ }
+
+ button {
+ min-width: 96px;
+ min-height: 38px;
+ border: 1px solid #8e99aa;
+ border-radius: 6px;
+ background: #fff;
+ color: #202734;
+ font: inherit;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background: #f5f7fa;
+ }
+
+ #status {
+ min-width: 92px;
+ text-align: center;
+ }
+
+
+
-
+
+
+ Page 1
+
+
+
+
+
+
+ function updateStatus() {
+ $status.text('Page ' + $magazine.turn('page') + ' / ' + $magazine.turn('pages'));
+ }
+ var initialSize = currentMagazineSize();
+ $frame.css('height', initialSize.height);
+
+ $magazine.turn({
+ width: initialSize.width,
+ height: initialSize.height,
+ display: 'single',
+ acceleration: true,
+ gradients: true,
+ elevation: 50,
+ when: {
+ turned: updateStatus
+ }
+ });
+
+ $('#previous').on('click', function() {
+ $magazine.turn('previous');
+ });
+
+ $('#next').on('click', function() {
+ $magazine.turn('next');
+ });
+
+ $(document).on('keydown.turnDemo', function(event) {
+ if (event.key === 'ArrowLeft') $magazine.turn('previous');
+ if (event.key === 'ArrowRight') $magazine.turn('next');
+ });
+
+ $(window).on('resize.turnDemo', syncMagazineSize);
+
+ updateStatus();
+ });
+
diff --git a/tests/visual/minimal.spec.js b/tests/visual/minimal.spec.js
index 9152ee3..7acd61e 100644
--- a/tests/visual/minimal.spec.js
+++ b/tests/visual/minimal.spec.js
@@ -15,6 +15,7 @@ const jqueryPath = resolve(jqueryDist, 'jquery.min.js');
const contentTypes = {
'.html': 'text/html; charset=utf-8',
'.js': 'text/javascript; charset=utf-8',
+ '.jpg': 'image/jpeg',
'.svg': 'image/svg+xml; charset=utf-8'
};
@@ -163,3 +164,59 @@ test('minimal demo keeps page measurements aligned during a page turn', async ({
await expect(page.locator('#book')).toHaveScreenshot('minimal-book-turning-page-4.png');
});
+
+test('magazine demo loads with jQuery 4 and turns pages', async ({ page }) => {
+ await page.goto(`${baseUrl}/demos/magazine/index.html`);
+ await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function');
+
+ await expect(page.locator('#status')).toHaveText('Page 1 / 6');
+ await page.locator('#next').click();
+ await expect(page.locator('#status')).toHaveText('Page 2 / 6');
+ await page.waitForTimeout(700);
+
+ const metrics = await page.evaluate(() => {
+ const book = document.querySelector('#magazine').getBoundingClientRect();
+ const wrapper = [...document.querySelectorAll('.turn-page-wrapper')]
+ .map(element => element.getBoundingClientRect())
+ .find(rect => rect.width && rect.height);
+ const size = $('#magazine').turn('size');
+
+ return {
+ book: { width: Math.round(book.width), height: Math.round(book.height) },
+ wrapper: { width: Math.round(wrapper.width), height: Math.round(wrapper.height) },
+ size
+ };
+ });
+
+ expect(metrics.size).toEqual(metrics.book);
+ expect(metrics.wrapper.height).toBe(metrics.book.height);
+ expect(metrics.wrapper.width).toBe(metrics.book.width / 2);
+});
+
+test('single-page magazine demo loads with jQuery 4 and turns pages', async ({ page }) => {
+ await page.goto(`${baseUrl}/demos/magazine_single/index.html`);
+ await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function');
+
+ await expect(page.locator('#status')).toHaveText('Page 1 / 6');
+ await page.locator('#next').click();
+ await expect(page.locator('#status')).toHaveText('Page 2 / 6');
+ await page.waitForTimeout(700);
+
+ const metrics = await page.evaluate(() => {
+ const book = document.querySelector('#magazine').getBoundingClientRect();
+ const wrapper = [...document.querySelectorAll('.turn-page-wrapper')]
+ .map(element => element.getBoundingClientRect())
+ .find(rect => rect.width && rect.height);
+ const size = $('#magazine').turn('size');
+
+ return {
+ book: { width: Math.round(book.width), height: Math.round(book.height) },
+ wrapper: { width: Math.round(wrapper.width), height: Math.round(wrapper.height) },
+ size
+ };
+ });
+
+ expect(metrics.size).toEqual(metrics.book);
+ expect(metrics.wrapper.height).toBe(metrics.book.height);
+ expect(metrics.wrapper.width).toBe(metrics.book.width);
+});