Add a multi-attribute example.

cubing · Sep 8, 2020 · fe3a282 · fe3a282
1 parent 6e34b4a
commit fe3a282
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/app/twisty/attributes.html b/app/twisty/attributes.html
@@ -142,11 +142,35 @@ <h2><code>back-view=&quot;side-by-side&quot;</code></h2>
     <div class="content">
       <h2><code>camera-position=&quot;[-3, 4, 5]&quot;</code></h2>
       <div class="multi" id="camera-position">
+        <span>DOM attributes:</span>
+        <span>Constructor config object:</span>
+        <span>Dynamic property setter:</span>
         <twisty-player
           alg="R U R' U R U2' R'"
           camera-position="[-3, 4, 5]"
         ></twisty-player>
       </div>
     </div>
+
+    <div class="content">
+      <h2>
+        <code
+          >alg=&quot;R U R' U R U2' R'&quot;<br />
+          experimental-stickering=&quot;OLL&quot;<br />
+          background=&quot;none&quot;<br />
+          controls=&quot;none&quot;</code
+        >
+      </h2>
+      <div class="multi" id="multiple-attributes">
+        <span>DOM attributes:</span><span>Constructor config object:</span>
+        <span>Dynamic property setter:</span>
+        <twisty-player
+          alg="R U R' U R U2' R'"
+          experimental-stickering="OLL"
+          background="none"
+          controls="none"
+        ></twisty-player>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/app/twisty/attributes.ts b/app/twisty/attributes.ts
@@ -128,3 +128,20 @@ experimentalSetShareAllNewRenderers(true);
   tw.alg = parse("R U R' U R U2' R'");
   tw.cameraPosition = new Vector3(-3, 4, 5);
 }
+
+{
+  document.querySelector("#multiple-attributes")!.appendChild(
+    new TwistyPlayer({
+      alg: parse("R U R' U R U2' R'"),
+      experimentalStickering: "OLL",
+      background: "none",
+      controls: "none",
+    }),
+  );
+  const tw = new TwistyPlayer();
+  document.querySelector("#multiple-attributes")!.appendChild(tw);
+  tw.alg = parse("R U R' U R U2' R'");
+  tw.experimentalStickering = "OLL";
+  tw.background = "none";
+  tw.controls = "none";
+}