Deploying to gh-pages from @ d3c5fc5 🚀

ircam-ismm · Jul 26, 2024 · a350291 · a350291
1 parent 4444cf2
commit a350291
Show file tree

Hide file tree

Showing 7 changed files with 343 additions and 243 deletions.
diff --git a/build/262.bundle.js b/build/262.bundle.js
@@ -1,19 +1,21 @@
-"use strict";(self.webpackChunk_ircam_sc_components_doc=self.webpackChunk_ircam_sc_components_doc||[]).push([[262],{8262:(e,t,i)=>{i.r(t),i.d(t,{template:()=>s});var r=i(2182),a=i(1967),c=i(1630);const n={path:"docs",name:"docs",children:[{path:"docs/inner",name:"inner",children:[{path:"docs/inner/niap.md",name:"niap.md",size:1584,extension:".md",type:"file"},{path:"docs/inner/test.md",name:"test.md",size:1588,extension:".md",type:"file"}],size:3172,type:"directory"},{path:"docs/niap.md",name:"niap.md",size:1584,extension:".md",type:"file"},{path:"docs/test.md",name:"test.md",size:1588,extension:".md",type:"file"}],size:3172,type:"directory"},s=r.qy`
+"use strict";(self.webpackChunk_ircam_sc_components_doc=self.webpackChunk_ircam_sc_components_doc||[]).push([[262],{8262:(e,t,i)=>{i.r(t),i.d(t,{template:()=>n});var s=i(2182),c=i(1967),a=i(1630);const r={path:"docs",name:"docs",children:[{path:"docs/TODOS.md",name:"TODOS.md",size:1588,extension:".md",type:"file"},{path:"docs/src",name:"src",children:[{path:"docs/src/index.js",name:"index.js",size:1584,extension:".md",type:"file"},{path:"docs/src/utils.js",name:"utils.js",size:1588,extension:".md",type:"file"}],size:3172,type:"directory"},{path:"docs/README.md",name:"README.md",size:1584,extension:".md",type:"file"},{path:"docs/www",name:"www",children:[{path:"docs/www/index.html",name:"index.html",size:1584,extension:".md",type:"file"},{path:"docs/www/styles.css",name:"styles.css",size:1588,extension:".md",type:"file"}],size:3172,type:"directory"}],size:3172,type:"directory"},n=s.qy`
 
 <h2>sc-filetree</h2>
 
 <sc-code-example language="javascript">${"import { html } from 'lit';\nimport '@ircam/sc-components/sc-filetree.js';\n\nconst template = html`\n  <sc-filetree\n    .value=\"${JSON.stringify(tree)}\"\n  ></sc-filetree>\n`;\n"}</sc-code-example>
 
 <sc-filetree
   id="test-filetree"
-  .value=${n}
+  .value=${r}
   editable
   @input=${e=>document.querySelector("#filetree-input").value=JSON.stringify(e.detail.value,null,2)}
   @change=${e=>document.querySelector("#filetree-change").value=JSON.stringify(e.detail.value,null,2)}
 ></sc-filetree>
 
 <p>
   The data format used by the component to render the file tree is based on the format proposed by the <a href="https://www.npmjs.com/package/directory-tree" target="_blank">directory-tree</a> library.
+  <br />
+  Note that for now only the fields: "name", "path", and "type" of the entries are actually used by the component.
 </p>
 
 <h3>Events</h3>
@@ -34,8 +36,8 @@
   <sc-editor
     style="width: 500px; height: 500px;"
     language="json"
-    .value=${JSON.stringify(n,null,2)}
-    @change=${e=>document.querySelector("#test-filetree").value=a.parse(e.detail.value)}
+    .value=${JSON.stringify(r,null,2)}
+    @change=${e=>document.querySelector("#test-filetree").value=c.parse(e.detail.value)}
   ></sc-editor>
 </div>
 
@@ -68,7 +70,7 @@
   --sc-filetree-active-background-color: var(--sc-color-primary-4);
 }
   "
-  @change=${e=>(0,c.default)(e.detail.value)}
+  @change=${e=>(0,a.default)(e.detail.value)}
 ></sc-editor>
 
 `}}]);
diff --git a/build/364.bundle.js b/build/364.bundle.js
@@ -1,13 +1,16 @@
-"use strict";(self.webpackChunk_ircam_sc_components_doc=self.webpackChunk_ircam_sc_components_doc||[]).push([[364],{7364:(t,e,s)=>{s.r(e),s.d(e,{template:()=>i});var c=s(2182),o=s(1967),a=s(1630);const i=c.qy`
+"use strict";(self.webpackChunk_ircam_sc_components_doc=self.webpackChunk_ircam_sc_components_doc||[]).push([[364],{7364:(e,t,s)=>{s.r(t),s.d(t,{template:()=>d});var c=s(2182),a=s(1967),o=s(1630);const d=c.qy`
 
 <h2>sc-dots</h2>
 
 <sc-code-example language="javascript">${"\nimport { html } from 'lit';\nimport '@ircam/sc-components/sc-dots.js';\n\nconst template = html`\n  <sc-dots\n    .value=${[{ x: 0.5, y: 0.5 }]}\n  ></sc-dots>\n`;\n"}</sc-code-example>
 
 <sc-dots
   id="test-dots"
+  capture-events
+  persist-events
+  disabled
   .value=${[{x:.5,y:.5}]}
-  @input=${t=>document.querySelector("#dots-input").value=o.stringify(t.detail.value,null,2)}
+  @input=${e=>document.querySelector("#dots-input").value=a.stringify(e.detail.value,null,2)}
 ></sc-dots>
 
 <h3>Properties</h3>
@@ -18,7 +21,7 @@
     editable
     multiline
     style="width: 300px;"
-    @change=${t=>document.querySelector("#test-dots").value=o.parse(t.detail.value)}
+    @change=${e=>document.querySelector("#test-dots").value=a.parse(e.detail.value)}
   >[{ x: 0.5, y: 0.5 }]</sc-text>
   <p>Each "dots" position must contain a "x" and a "y" field</p>
   <p>An optionnal "color" field can also be given</p>
@@ -27,7 +30,7 @@
     editable
     multiline
     style="width: 300px;"
-    @change=${t=>document.querySelector("#test-dots").value=o.parse(t.detail.value)}
+    @change=${e=>document.querySelector("#test-dots").value=a.parse(e.detail.value)}
   >[{ x: 0.5, y: 0.5, color: 'red' }]</sc-text>
 </div>
 
@@ -37,15 +40,15 @@
   <sc-text>x-range [=[0, 1]]</sc-text>
   <sc-text
     editable
-    @change=${t=>document.querySelector("#test-dots").xRange=o.parse(t.detail.value)}
+    @change=${e=>document.querySelector("#test-dots").xRange=a.parse(e.detail.value)}
   >[0, 1]</sc-text>
 </div>
 
 <div>
   <sc-text>y-range [=[0, 1]]</sc-text>
   <sc-text
     editable
-    @change=${t=>document.querySelector("#test-dots").yRange=o.parse(t.detail.value)}
+    @change=${e=>document.querySelector("#test-dots").yRange=a.parse(e.detail.value)}
   >[0, 1]</sc-text>
 </div>
 
@@ -55,38 +58,44 @@
   <sc-slider
     min="5"
     max="100"
-    @input=${t=>document.querySelector("#test-dots").radius=t.detail.value}
+    @input=${e=>document.querySelector("#test-dots").radius=e.detail.value}
   >[0, 1]</sc-slider>
 </div>
 <div>
   <p>Radius relative to the given ranges</p>
   <sc-text>radius-relative [=null]</sc-text>
   <sc-slider
-    @input=${t=>{document.querySelector("#test-dots").radius=null,document.querySelector("#test-dots").radiusRelative=t.detail.value}}
+    @input=${e=>{document.querySelector("#test-dots").radius=null,document.querySelector("#test-dots").radiusRelative=e.detail.value}}
   ></sc-slider>
 </div>
 
 <div style="margin-top: 30px;">
   <p>Use the component as a multitouch input interface</p>
   <sc-text>?capture-events [=false]</sc-text>
   <sc-toggle
-    @change=${t=>document.querySelector("#test-dots").captureEvents=t.detail.value}
+    @change=${e=>document.querySelector("#test-dots").captureEvents=e.detail.value}
   ></sc-toggle>
 </div>
 <div>
   <p>If "capture-events" is true, persist the last position(s) on the component</p>
   <sc-text>?persist-events [=false]</sc-text>
   <sc-toggle
-    @change=${t=>document.querySelector("#test-dots").persistEvents=t.detail.value}
+    @change=${e=>document.querySelector("#test-dots").persistEvents=e.detail.value}
   ></sc-toggle>
+</div>
+<div>
+  <sc-text>?disabled [=false]</sc-text>
+  <sc-toggle
+    @change=${e=>document.querySelector("#test-dots").disabled=e.detail.value}
+  ></sc-toggle>
+</div>
 
 <h3>Events</h3>
 
 <div>
   <p>If "capture-events" is true</p>
   <sc-text>@input</sc-text>
   <sc-text id="dots-input" style="height: 200px;"></sc-text>
-
 </div>
 
 <h3>Styling</h3>
@@ -98,20 +107,19 @@
 #test-dots {
   width: 300px;
   height: 300px;
+  background-image: url(./assets/seating-map.png);
   background-color: var(--sc-color-primary-1);
 
-  --sc-dots-opacity: 1;
   --sc-dots-color: var(--sc-color-secondary-2);
-  --sc-dots-background-image: url(./assets/seating-map.png);
-  --sc-dots-background-color: var(--sc-color-primary-1);
+  --sc-dots-opacity: 1;
 }
   "
-  @change=${t=>(0,a.default)(t.detail.value)}
+  @change=${e=>(0,o.default)(e.detail.value)}
 ></sc-editor>
 
 <div>
   <sc-text readonly>debug containers</sc-text>
-  <sc-toggle @change=${t=>document.querySelector("#test-dots").classList.toggle("debug")}></sc-toggle>
+  <sc-toggle @change=${e=>document.querySelector("#test-dots").classList.toggle("debug")}></sc-toggle>
 </div>
 
 `}}]);
diff --git a/build/834.bundle.js b/build/834.bundle.js
@@ -43,6 +43,12 @@
     @change=${e=>document.querySelector("#test-io-surface").value=JSON.parse(e.detail.value)}
   >0</sc-text>
 </div>
+<div>
+  <sc-text>?disabled [=false]</sc-text>
+  <sc-toggle
+    @change=${e=>Array.from(document.querySelectorAll("sc-io-surface")).forEach((t=>t.disabled=e.detail.value))}
+  ></sc-toggle>
+</div>
 
 <h3>Styling</h3>
 <sc-editor

diff --git a/build/bundle.js b/build/bundle.js
diff --git a/src/sc-dots.js b/src/sc-dots.js
@@ -43,6 +43,9 @@ const template = html\`
 
 <sc-dots
   id="test-dots"
+  capture-events
+  persist-events
+  disabled
   .value=${[{ x: 0.5, y: 0.5 }]}
   @input=${e => document.querySelector('#dots-input').value = JSON5.stringify(e.detail.value, null, 2)}
 ></sc-dots>
@@ -119,14 +122,20 @@ const template = html\`
   <sc-toggle
     @change=${e => document.querySelector('#test-dots').persistEvents = e.detail.value}
   ></sc-toggle>
+</div>
+<div>
+  <sc-text>?disabled [=false]</sc-text>
+  <sc-toggle
+    @change=${e => document.querySelector('#test-dots').disabled = e.detail.value}
+  ></sc-toggle>
+</div>
 
 <h3>Events</h3>
 
 <div>
   <p>If "capture-events" is true</p>
   <sc-text>@input</sc-text>
   <sc-text id="dots-input" style="height: 200px;"></sc-text>
-
 </div>
 
 <h3>Styling</h3>
@@ -138,12 +147,11 @@ const template = html\`
 #test-dots {
   width: 300px;
   height: 300px;
+  background-image: url(./assets/seating-map.png);
   background-color: var(--sc-color-primary-1);
 
-  --sc-dots-opacity: 1;
   --sc-dots-color: var(--sc-color-secondary-2);
-  --sc-dots-background-image: url(./assets/seating-map.png);
-  --sc-dots-background-color: var(--sc-color-primary-1);
+  --sc-dots-opacity: 1;
 }
   "
   @change=${e => applyStyle(e.detail.value)}

diff --git a/src/sc-filetree.js b/src/sc-filetree.js
@@ -7,40 +7,62 @@ const tree = {
   name: 'docs',
   children: [
     {
-      path: 'docs/inner',
-      name: 'inner',
+      path: 'docs/TODOS.md',
+      name: 'TODOS.md',
+      size: 1588,
+      extension: '.md',
+      type: 'file'
+    },
+    {
+      path: 'docs/src',
+      name: 'src',
       children: [
         {
-          path: 'docs/inner/niap.md',
-          name: 'niap.md',
+          path: 'docs/src/index.js',
+          name: 'index.js',
           size: 1584,
           extension: '.md',
           type: 'file'
         },
         {
-          path: 'docs/inner/test.md',
-          name: 'test.md',
+          path: 'docs/src/utils.js',
+          name: 'utils.js',
           size: 1588,
           extension: '.md',
           type: 'file'
-        }
+        },
       ],
       size: 3172,
       type: 'directory'
     },
     {
-      path: 'docs/niap.md',
-      name: 'niap.md',
+      path: 'docs/README.md',
+      name: 'README.md',
       size: 1584,
       extension: '.md',
       type: 'file'
     },
     {
-      path: 'docs/test.md',
-      name: 'test.md',
-      size: 1588,
-      extension: '.md',
-      type: 'file'
+      path: 'docs/www',
+      name: 'www',
+      children: [
+        {
+          path: 'docs/www/index.html',
+          name: 'index.html',
+          size: 1584,
+          extension: '.md',
+          type: 'file'
+        },
+        {
+          path: 'docs/www/styles.css',
+          name: 'styles.css',
+          size: 1588,
+          extension: '.md',
+          type: 'file'
+        },
+      ],
+      size: 3172,
+      type: 'directory'
     },
   ],
   size: 3172,
@@ -72,6 +94,8 @@ const template = html\`
 
 <p>
   The data format used by the component to render the file tree is based on the format proposed by the <a href="https://www.npmjs.com/package/directory-tree" target="_blank">directory-tree</a> library.
+  <br />
+  Note that for now only the fields: "name", "path", and "type" of the entries are actually used by the component.
 </p>
 
 <h3>Events</h3>

diff --git a/src/sc-io-surface.js b/src/sc-io-surface.js
@@ -62,6 +62,12 @@ const template = html\`
     @change=${e => document.querySelector('#test-io-surface').value = JSON.parse(e.detail.value)}
   >0</sc-text>
 </div>
+<div>
+  <sc-text>?disabled [=false]</sc-text>
+  <sc-toggle
+    @change=${e => Array.from(document.querySelectorAll('sc-io-surface')).forEach(el => el.disabled = e.detail.value)}
+  ></sc-toggle>
+</div>
 
 <h3>Styling</h3>
 <sc-editor