Merge pull request #6 from PoongalOO/modern-gradient

supress webkit-gradient, add linear-gradient

README.fr.md

@@ -27,6 +27,10 @@ La compatibilité avec tous les navigateurs et appareils modernes n'est pas enco
   - supprime les données jQuery internes de turn.js sans effacer les données utilisateur sans lien.
 - Remplacement de la boucle d'animation interne `setInterval` par `requestAnimationFrame`.
 - Correction de `animatef(false)` pour que l'annulation d'une animation annule bien la frame planifiée.
+- Modernisation des sorties CSS :
+  - 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é.
 - 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.
@@ -169,6 +173,8 @@ La suite actuelle couvre :
 - l'enregistrement des namespaces d'événements ;
 - le nettoyage `destroy` et la réinitialisation ;
 - la planification et l'annulation `requestAnimationFrame` dans `animatef` ;
+- l'écriture des propriétés CSS standard pour les transforms ;
+- les gradients de pli bornés et uniquement ombrés pendant l'animation ;
 - le rendu de la démo minimale ;
 - le rendu après page tournée ;
 - la géométrie en viewport compact ;

readme.md

@@ -27,6 +27,10 @@ Compatibility is not yet guaranteed for every modern browser or device. Safari/W
   - removes turn.js internal jQuery data while preserving unrelated user data.
 - Replaced the internal `setInterval` animation loop with `requestAnimationFrame`.
 - Fixed `animatef(false)` so cancelling an animation cancels the scheduled animation frame.
+- Modernized CSS output:
+  - 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.
 - 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.
@@ -169,6 +173,8 @@ The current suite covers:
 - event namespace registration;
 - `destroy` cleanup and re-initialization;
 - `requestAnimationFrame` scheduling and cancellation in `animatef`;
+- standard CSS transform property writing;
+- bounded, shadow-only fold gradients during animation;
 - minimal demo rendering;
 - page turn rendering;
 - compact viewport geometry;

tests/unit/turn.unit.test.js

@@ -220,6 +220,16 @@ describe('turn.js jQuery plugin', () => {
     expect(complete).not.toHaveBeenCalled();
   });
 
+  it('writes modern CSS transform properties', () => {
+    const { $ } = fixture;
+    const element = $('<div></div>')[0];
+
+    $(element).transform('translate(12px, 24px)', '10% 20%');
+
+    expect(element.style.transform).toBe('translate(12px, 24px)');
+    expect(element.style.transformOrigin).toBe('10% 20%');
+  });
+
   it('registers internal handlers with event namespaces', () => {
     fixture.window.close();
     fixture = createFixture();

tests/visual/minimal.spec.js

@@ -113,7 +113,7 @@ test('minimal demo keeps page measurements aligned during a page turn', async ({
   await expect(page.locator('#status')).toHaveText('Page 4 / 6');
 
   await page.locator('#next').click();
-  await page.waitForTimeout(160);
+  await page.waitForTimeout(80);
 
   const metrics = await page.evaluate(() => {
     const book = document.querySelector('#book').getBoundingClientRect();
@@ -144,5 +144,22 @@ test('minimal demo keeps page measurements aligned during a page turn', async ({
     expect(item.jqueryHeight, item.page).toBe(metrics.pageHeight);
   }
 
+  const gradientImages = await page.evaluate(() => (
+    [...document.querySelectorAll('[style*="linear-gradient"]')]
+      .map(element => element.style.backgroundImage)
+      .filter(Boolean)
+  ));
+
+  expect(gradientImages.length).toBeGreaterThan(0);
+  for (const backgroundImage of gradientImages) {
+    expect(backgroundImage).not.toContain('255, 255, 255');
+
+    for (const match of backgroundImage.matchAll(/([0-9.]+)%/g)) {
+      const stop = Number(match[1]);
+      expect(stop).toBeGreaterThanOrEqual(0);
+      expect(stop).toBeLessThanOrEqual(100);
+    }
+  }
+
   await expect(page.locator('#book')).toHaveScreenshot('minimal-book-turning-page-4.png');
 });

turn.js

@@ -209,41 +209,19 @@ var has3d,
 
 	gradient = function(obj, p0, p1, colors, numColors) {
 	
-		var j, cols = [];
+		var j, cols = [],
+			dx = p1.x-p0.x,
+			dy = p1.y-p0.y,
+			angle = Math.atan2(dy, dx),
+			stop;
 
-		if (vendor=='-webkit-') {
-		
-			for (j = 0; j<numColors; j++)
-					cols.push('color-stop('+colors[j][0]+', '+colors[j][1]+')');
-			
-			obj.css({'background-image': '-webkit-gradient(linear, '+p0.x+'% '+p0.y+'%,  '+p1.x+'% '+p1.y+'%, '+ cols.join(',') +' )'});
-
-		} else {
-
-			// This procedure makes the gradients for non-webkit browsers
-			// It will be reduced to one unique way for gradients in next versions
-			
-			p0 = {x:p0.x/100 * obj.width(), y:p0.y/100 * obj.height()};
-			p1 = {x:p1.x/100 * obj.width(), y:p1.y/100 * obj.height()};
-
-			var dx = p1.x-p0.x,
-				dy = p1.y-p0.y,
-				angle = Math.atan2(dy, dx),
-				angle2 = angle - Math.PI/2,
-				diagonal = Math.abs(obj.width()*Math.sin(angle2)) + Math.abs(obj.height()*Math.cos(angle2)),
-				gradientDiagonal = Math.sqrt(dy*dy + dx*dx),
-				corner = point2D((p1.x<p0.x) ? obj.width() : 0, (p1.y<p0.y) ? obj.height() : 0),
-				slope = Math.tan(angle),
-				inverse = -1/slope,
-				x = (inverse*corner.x - corner.y - slope*p0.x + p0.y) / (inverse-slope),
-				c = {x: x, y: inverse*x - inverse*corner.x + corner.y},
-				segA = (Math.sqrt( Math.pow(c.x-p0.x,2) + Math.pow(c.y-p0.y,2)));
-
-				for (j = 0; j<numColors; j++)
-					cols.push(' '+colors[j][1]+' '+(( segA + gradientDiagonal*colors[j][0] )*100/diagonal)+'%');
-		
-				obj.css({'background-image': vendor+'linear-gradient(' + (-angle) + 'rad,' + cols.join(',') + ')'});
+		for (j = 0; j<numColors; j++) {
+			stop = Math.max(0, Math.min(1, colors[j][0])) * 100;
+			cols.push(' '+colors[j][1]+' '+stop+'%');
 		}
+
+		var backgroundImage = 'linear-gradient(' + (-deg(angle)) + 'deg,' + cols.join(',') + ')';
+		obj.css({'background-image': backgroundImage});
 	},
 
 turnMethods = {
@@ -1686,8 +1664,8 @@ flipMethods = {
 							point2D(left?100:0, top?100:0),
 							point2D(gradientEndPointA.x, gradientEndPointA.y),
 							[[gradientStartV, 'rgba(0,0,0,0)'],
-							[((1-gradientStartV)*0.8)+gradientStartV, 'rgba(0,0,0,'+(0.2*gradientOpacity)+')'],
-							[1, 'rgba(255,255,255,'+(0.2*gradientOpacity)+')']],
+							[((1-gradientStartV)*0.9)+gradientStartV, 'rgba(0,0,0,'+(0.12*gradientOpacity)+')'],
+							[1, 'rgba(0,0,0,0)']],
 							3,
 							alpha);
 		
@@ -1695,8 +1673,8 @@ flipMethods = {
 					gradient(data.bshadow,
 							point2D(left?0:100, top?0:100),
 							point2D(gradientEndPointB.x, gradientEndPointB.y),
-							[[0.8, 'rgba(0,0,0,0)'],
-							[1, 'rgba(0,0,0,'+(0.3*gradientOpacity)+')'],
+							[[0.7, 'rgba(0,0,0,0)'],
+							[0.9, 'rgba(0,0,0,'+(0.18*gradientOpacity)+')'],
 							[1, 'rgba(0,0,0,0)']],
 							3);
 				
@@ -2008,10 +1986,15 @@ $.extend($.fn, {
 
 		var properties = {};
 		
-		if (origin)
-			properties[vendor+'transform-origin'] = origin;
+		if (origin) {
+			if (vendor)
+				properties[vendor+'transform-origin'] = origin;
+			properties['transform-origin'] = origin;
+		}
 		
-		properties[vendor+'transform'] = transform;
+		if (vendor)
+			properties[vendor+'transform'] = transform;
+		properties.transform = transform;
 	
 		return this.css(properties);