Merge pull request #12 from PoongalOO/inline/ticket5

add turn.css

README.fr.md

@@ -31,6 +31,7 @@ La compatibilité avec tous les navigateurs et appareils modernes n'est pas enco
   - les gradients utilisent maintenant la syntaxe standard `linear-gradient(...deg, ...)` ;
   - les gradients de pli conservent des stops normalisés entre `0` et `100%` avec des ombres plus douces, sans highlight blanc ;
   - les transforms écrivent maintenant les propriétés standard `transform` et `transform-origin`, avec fallback préfixé quand il est détecté.
+- Déplacement des styles statiques des wrappers vers `turn.css` et des classes internes, en conservant inline les valeurs dynamiques de taille, position, z-index, transform et gradient.
 - Ajout d'une démo navigateur minimale avec jQuery `4.0.0`.
 - Ajout de texte et d'images locales dans la démo minimale.
 - Correction de la mise en page de la démo minimale afin que les dimensions mesurées par turn.js correspondent à la taille réellement rendue des pages.
@@ -50,6 +51,7 @@ xdg-open demos/minimal/index.html
 La démo charge :
 
 - jQuery `4.0.0` depuis le CDN jQuery ;
+- `../../turn.css` ;
 - `../../turn.js` ;
 - des images locales depuis `demos/minimal/assets`.
 
@@ -99,6 +101,7 @@ CSS minimal :
 JavaScript minimal :
 
 ```html
+<link rel="stylesheet" href="turn.css">
 <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
 <script src="turn.js"></script>
 <script>
@@ -111,6 +114,8 @@ JavaScript minimal :
 </script>
 ```
 
+`turn.css` contient les styles statiques des wrappers internes de turn.js. `turn.js` injecte aussi ces règles de base en fallback pour les pages existantes qui ne chargent que le script, mais charger explicitement la feuille de style est recommandé.
+
 Détruire une instance :
 
 ```javascript

demos/magazine/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>turn.js - demo magazine double page</title>
+  <link rel="stylesheet" href="../../turn.css">
   <style>
     html,
     body {

demos/magazine_single/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>turn.js - demo magazine simple page</title>
+  <link rel="stylesheet" href="../../turn.css">
   <style>
     html,
     body {

demos/minimal/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>turn.js - exemple minimal</title>
+  <link rel="stylesheet" href="../../turn.css">
   <style>
     html,
     body {

readme.md

@@ -31,6 +31,7 @@ Compatibility is not yet guaranteed for every modern browser or device. Safari/W
   - gradients now use standard `linear-gradient(...deg, ...)`;
   - fold gradients keep normalized `0-100%` stops and use softer shadow-only colors;
   - transforms now write standard `transform` and `transform-origin` properties, with a prefixed fallback when detected.
+- Moved static wrapper styles to `turn.css` and internal classes, while keeping dynamic size, position, z-index, transform, and gradient values inline.
 - Added a minimal browser demo using jQuery `4.0.0`.
 - Added text and local images to the minimal demo.
 - Fixed minimal demo layout so turn.js page measurements match the real rendered page size.
@@ -50,6 +51,7 @@ xdg-open demos/minimal/index.html
 The demo loads:
 
 - jQuery `4.0.0` from the jQuery CDN;
+- `../../turn.css`;
 - `../../turn.js`;
 - local image assets from `demos/minimal/assets`.
 
@@ -99,6 +101,7 @@ Basic CSS:
 Basic JavaScript:
 
 ```html
+<link rel="stylesheet" href="turn.css">
 <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
 <script src="turn.js"></script>
 <script>
@@ -111,6 +114,8 @@ Basic JavaScript:
 </script>
 ```
 
+`turn.css` contains the static styles for turn.js internal wrappers. `turn.js` also injects these base rules as a fallback for existing pages that only load the script, but loading the stylesheet explicitly is recommended.
+
 Destroying an instance:
 
 ```javascript

tests/unit/turn.unit.test.js

@@ -252,6 +252,36 @@ describe('turn.js jQuery plugin', () => {
     expect($book.find('.turn-page-wrapper').length).toBeGreaterThan(0);
   });
 
+  it('uses CSS classes instead of inline styles for static wrapper styling', () => {
+    const { document, $ } = fixture;
+    const $book = $('#book');
+
+    $book.turn({
+      width: 600,
+      height: 400,
+      display: 'double',
+      gradients: true,
+      acceleration: false
+    });
+
+    const state = $book.data();
+    const pageWrapper = state.pageWrap[1][0];
+    const flipState = state.pages[1].data('f');
+
+    expect(document.getElementById('turn-js-base-css')).toBeTruthy();
+    expect(pageWrapper.classList.contains('turn-page-wrapper')).toBe(true);
+    expect(pageWrapper.style.position).toBe('');
+    expect(pageWrapper.style.overflow).toBe('');
+    expect(flipState.wrapper[0].classList.contains('turn-flip-wrapper')).toBe(true);
+    expect(flipState.wrapper[0].style.position).toBe('');
+    expect(flipState.wrapper[0].style.overflow).toBe('');
+    expect(flipState.fwrapper[0].classList.contains('turn-fold-wrapper')).toBe(true);
+    expect(flipState.fwrapper[0].style.position).toBe('');
+    expect(flipState.fwrapper[0].style.overflow).toBe('');
+    expect(flipState.fparent[0].classList.contains('turn-fold-parent')).toBe(true);
+    expect(flipState.fparent[0].style.pointerEvents).toBe('');
+  });
+
   it('supports initial page selection without animation', () => {
     const { $ } = fixture;
     const $book = $('#book');

tests/visual/minimal.spec.js

@@ -13,6 +13,7 @@ const jqueryDist = dirname(require.resolve('jquery'));
 const jqueryPath = resolve(jqueryDist, 'jquery.min.js');
 
 const contentTypes = {
+  '.css': 'text/css; charset=utf-8',
   '.html': 'text/html; charset=utf-8',
   '.js': 'text/javascript; charset=utf-8',
   '.jpg': 'image/jpeg',

turn.css

@@ -0,0 +1,30 @@
+.turn-page {
+  position: absolute;
+}
+
+.turn-page-wrapper,
+.turn-flip-wrapper,
+.turn-fold-wrapper,
+.turn-shadow {
+  position: absolute;
+  overflow: hidden;
+}
+
+.turn-fold-parent {
+  position: absolute;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.turn-fold-inner {
+  position: absolute;
+  overflow: visible;
+}
+
+.turn-fold-page {
+  cursor: default;
+}
+
+.turn-back-shadow {
+  overflow: hidden;
+}

turn.js

@@ -131,14 +131,30 @@ var has3d,
 	pagePosition = {0: {top: 0, left: 0, right: 'auto', bottom: 'auto'},
 					1: {top: 0, right: 0, left: 'auto', bottom: 'auto'}},
 
+	baseStyleId = 'turn-js-base-css',
+
+	baseStyles = [
+		'.turn-page{position:absolute;}',
+		'.turn-page-wrapper,.turn-flip-wrapper,.turn-fold-wrapper,.turn-shadow{position:absolute;overflow:hidden;}',
+		'.turn-fold-parent{position:absolute;overflow:visible;pointer-events:none;}',
+		'.turn-fold-inner{position:absolute;overflow:visible;}',
+		'.turn-fold-page{cursor:default;}',
+		'.turn-back-shadow{overflow:hidden;}'
+	].join(''),
+
+	ensureTurnCss = function() {
+		if (!document.getElementById(baseStyleId))
+			$('<style/>', {id: baseStyleId, type: 'text/css'}).
+				text(baseStyles).
+					appendTo(document.head || document.documentElement);
+	},
+
 	// Gets basic attributes for a layer
 
-	divAtt = function(top, left, zIndex, overf) {
+	divAtt = function(top, left, zIndex) {
 		return {'css': {
-					position: 'absolute',
 					top: top,
 					left: left,
-					'overflow': overf || 'hidden',
 					'z-index': zIndex || 'auto'
 					}
 			};
@@ -383,6 +399,8 @@ turnMethods = {
 
 	init: function(opts) {
 
+		ensureTurnCss();
+
 		// Define constants
 		if (has3d===undefined) {
 			has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style;
@@ -562,9 +580,7 @@ turnMethods = {
 
 		data.pageWrap[page] = $('<div/>', {'class': 'turn-page-wrapper',
 										page: page,
-										css: {position: 'absolute',
-										overflow: 'hidden',
-										width: width,
+										css: {width: width,
 										height: height}}).
 										css(pagePosition[(data.display=='double') ? page%2 : 0]);
 
@@ -1488,6 +1504,8 @@ flipMethods = {
 
 	init: function(opts) {
 
+		ensureTurnCss();
+
 		if (opts.gradients) {
 			opts.frontGradient = true;
 			opts.backGradient = true;
@@ -1610,8 +1628,8 @@ flipMethods = {
 
 
 		if (gradient && !data.bshadow)
-			data.bshadow = $('<div/>', divAtt(0, 0, 1)).
-				css({'position': '', width: this.width(), height: this.height()}).
+			data.bshadow = $('<div/>', {'class': 'turn-back-shadow'}).
+				css({width: this.width(), height: this.height()}).
 					appendTo(data.parent);
 
 		return gradient;
@@ -1623,17 +1641,17 @@ flipMethods = {
 	_createFoldParent: function() {
 
 		var data = flipData(this),
-			fparent = $('<div/>', {css: {'pointer-events': 'none'}}).hide();
+			fparent = $('<div/>', {'class': 'turn-fold-parent'}).hide();
 
 		fparent.data().flips = 0;
 
 		if (data.opts.turn) {
-			fparent.css(divAtt(-data.opts.turn.offset().top, -data.opts.turn.offset().left, 'auto', 'visible').css).
+			fparent.css(divAtt(-data.opts.turn.offset().top, -data.opts.turn.offset().left, 'auto').css).
 					appendTo(data.opts.turn);
 
 			turnData(data.opts.turn).fparent = fparent;
 		} else {
-			fparent.css(divAtt(0, 0, 'auto', 'visible').css).
+			fparent.css(divAtt(0, 0, 'auto').css).
 				attr('id', 'turn-fwrappers').
 					appendTo($('body'));
 		}
@@ -1697,22 +1715,26 @@ flipMethods = {
 			if (!data.fparent)
 				data.fparent = flipMethods._createFoldParent.call(this);
 
-			this.css({position: 'absolute', top: 0, left: 0, bottom: 'auto', right: 'auto'});
+			this.css({top: 0, left: 0, bottom: 'auto', right: 'auto'});
 
-			data.wrapper = $('<div/>', divAtt(0, 0, this.css('z-index'))).
+			data.wrapper = $('<div/>', {'class': 'turn-flip-wrapper'}).
+								css(divAtt(0, 0, this.css('z-index')).css).
 								appendTo(parent).
 									prepend(this);
 
-			data.fwrapper = $('<div/>', divAtt(parent.offset().top, parent.offset().left)).
+			data.fwrapper = $('<div/>', {'class': 'turn-fold-wrapper'}).
+								css(divAtt(parent.offset().top, parent.offset().left).css).
 								hide().
 									appendTo(data.fparent);
 
-			data.fpage = $('<div/>', {css: {cursor: 'default'}}).
-					appendTo($('<div/>', divAtt(0, 0, 0, 'visible')).
+			data.fpage = $('<div/>', {'class': 'turn-fold-page'}).
+					appendTo($('<div/>', {'class': 'turn-fold-inner'}).
+								css(divAtt(0, 0, 0).css).
 								appendTo(data.fwrapper));
 
 			if (data.opts.frontGradient)
-				data.ashadow = $('<div/>', divAtt(0, 0,  1)).
+				data.ashadow = $('<div/>', {'class': 'turn-shadow'}).
+					css(divAtt(0, 0,  1).css).
 					appendTo(data.fpage);
 
 			// Save data