Added newSuica, #109, #112

boytchev · Nov 10, 2023 · b465582 · b465582
1 parent 59adf25
commit b465582
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 15 deletions.
diff --git a/BUILD.NUMBER b/BUILD.NUMBER
@@ -1 +1 @@
-45
+48
diff --git a/bin/suica.js b/bin/suica.js
diff --git a/examples/suica.js b/examples/suica.js
diff --git a/src/suica-main.js b/src/suica-main.js
@@ -144,6 +144,11 @@ class Suica
 
 	constructor( suicaTag )
 	{
+		if( suicaTag.getAttribute( 'suica-auto-generated' ) )
+		{
+			return suica;
+		}
+
 		// internal storage
 		this._ = {
 			solidGeometry:{},
@@ -155,6 +160,7 @@ class Suica
 			suicaTag.style.display = 'inline-block';
 
 		suicaTag.style.boxSizing = 'border-box';
+		suicaTag.setAttribute( 'suica-auto-generated', true );
 
 		if( getComputedStyle(suicaTag).width == 'auto' )
 		{
@@ -289,7 +295,7 @@ class Suica
 	}
 
 
-	// create canvas element inside <suica>
+	// create canvas element inside <suica> (if it does not exist)
 	createCanvas()
 	{
 		// calculates size - if size is not defined in CSS,
@@ -300,7 +306,7 @@ class Suica
 		if( this.suicaTag.clientHeight < 1 )
 			this.suicaTag.style.height = (this.suicaTag.getAttribute('height') || (TEST_MODE?400:300)) + 'px';
 
-		// create canvas elements
+		// create canvas element 
 		this.canvas = document.createElement( 'canvas' );
 		this.canvas.width = this.suicaTag.clientWidth;
 		this.canvas.height = this.suicaTag.clientHeight;
@@ -311,7 +317,6 @@ class Suica
 
 		this.canvas.suicaObject = this;
 		this.suicaTag.appendChild( this.canvas );
-
 	} // Suica.createCanvas
 
 
@@ -1406,6 +1411,16 @@ class Suica
 //}
 
 
+window.newSuica = function( )
+{
+	var suicaTag = document.createElement( 'suica' );
+		suicaTag.style = 'border: solid 1m red;';
+		document.body.appendChild( suicaTag );
+
+	new Suica( suicaTag );
+}
+
+
 window.style = function( object, properties )
 {
 	for( var n in properties ) object[n] = properties[n];
@@ -1735,7 +1750,7 @@ window.splane = function( points=Suica.SPLANE.POINTS, closed, interpolant )
 //
 // idea from https://github.com/jspenguin2017/Snippets/blob/master/onbeforescriptexecute.html
 new MutationObserver( function( mutations )
-	{		
+	{
 		for( var parentElem of mutations )
 		{
 			for( var childElem of parentElem.addedNodes) 

diff --git a/test/cases.js b/test/cases.js
@@ -181,6 +181,7 @@ var cases = [
 'square', 
 'style', 
 'suica-centered', 
+'suica-js', 
 'suica-orientation-xyz', 
 'suica-orientation-xzy', 
 'suica-orientation-yxz', 

diff --git a/test/cases/suica-js.html b/test/cases/suica-js.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+	<script src="../test.js"></script>
+</head>
+
+<body>
+
+	<script>
+		newSuica();
+		oxyz();
+		demo();
+		cube();
+	</script>
+
+</body>
+</html>
diff --git a/test/snapshots/suica-js.png b/test/snapshots/suica-js.png
diff --git a/test/test.js b/test/test.js
@@ -378,10 +378,10 @@ function compareImages( )
 
 function sendSnapshot( )
 {
-	if( !suica ) return;
+	if( typeof suica == 'undefined' ) return;
 
 	const DELAY = 0.9;
-	
+
 	var _onTime = suica.ontime;
 
 	suica.ontime = (t, dT)=>{