feat: lr-select + camera selector WIP

TOC.md

@@ -46,6 +46,8 @@
       - [ProgressBar](./blocks/ProgressBar/) - abstract progress bar
       - [ProgressBarCommon](./blocks/ProgressBarCommon/) - displays uploading progress for the all files selected
       - [Range](./blocks/Range/) - customizable wrapper for the range input element
+      - [Select](./blocks/Select/) - customizable selector
+      - [ShadowWrapper](./blocks/ShadowWrapper/) - Shadow DOM wrapper to encapsulate your solution
       - [SimpleBtn](./blocks/SimpleBtn/) - button for the file uploading workflow start
       - [SourceBtn](./blocks/SourceBtn/) - button for the certain source activation
       - [SourceList](./blocks/SourceList/) - renders the list of file sources basing on configuration provided

abstract/Block.js

@@ -114,3 +114,5 @@ export class Block extends BaseComponent {
     super.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
   }
 }
+
+export { BaseComponent };

blocks/CameraSource/CameraSource.js

@@ -18,7 +18,12 @@ export class CameraSource extends UploaderBlock {
     messageHidden: true,
     requestBtnHidden: canUsePermissionsApi(),
     l10nMessage: null,
+    cameraSelectOptions: null,
+    cameraSelectHidden: true,
 
+    onCameraSelectChange: (e) => {
+      console.log(e.target.value);
+    },
     onCancel: () => {
       this.cancelFlow();
     },
@@ -175,13 +180,29 @@ export class CameraSource extends UploaderBlock {
     });
   }
 
-  initCallback() {
+  async initCallback() {
     super.initCallback();
     this.registerActivity(this.activityType, this._onActivate, this._onDeactivate);
 
     this.sub('--cfg-camera-mirror', (val) => {
       this.$.videoTransformCss = val ? 'scaleX(-1)' : null;
     });
+
+    let deviceList = await navigator.mediaDevices.enumerateDevices();
+    let cameraSelectOptions = deviceList
+      .filter((info) => {
+        return info.kind === 'videoinput';
+      })
+      .map((info) => {
+        return {
+          text: info.label,
+          value: info.deviceId,
+        };
+      });
+    if (cameraSelectOptions.length > 0) {
+      this.$.cameraSelectOptions = cameraSelectOptions;
+      this.$.cameraSelectHidden = false;
+    }
   }
 }
 
@@ -206,6 +227,9 @@ CameraSource.template = /*html*/ `
     set="onclick: onCancel"
     l10n="cancel">
   </button>
+  <lr-select 
+    set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange">
+  </lr-select>
   <button
     type="button"
     class="shot-btn primary-btn"

blocks/CameraSource/index.html

@@ -39,7 +39,7 @@
 
   <script src="./test.js" type="module"></script>
 
-  <div id="viewport"></div>
+  <lr-camera-source class="lr-wgt-common"></lr-camera-source>
 </lr-live-html></col-css>
     </main>
     <footer>© 2022 🦆</footer>

blocks/CameraSource/ref.htm

@@ -5,5 +5,5 @@ <h1>CameraSource</h1>
 
   <script src="./test.js" type="module"></script>
 
-  <div id="viewport"></div>
+  <lr-camera-source class="lr-wgt-common"></lr-camera-source>
 </lr-live-html>

blocks/CameraSource/test.js

@@ -1,12 +1,14 @@
 import { CameraSource } from './CameraSource.js';
+import { Select } from '../Select/Select.js';
+import { Icon } from '../Icon/Icon.js';
 import { registerBlocks } from '../../abstract/registerBlocks.js';
 
-registerBlocks({ CameraSource });
-
-const cameraSrc = new CameraSource();
-cameraSrc.classList.add('lr-wgt-common');
-
 window.onload = () => {
-  document.querySelector('#viewport')?.appendChild(cameraSrc);
+  if (window.location.host) {
+    return;
+  }
+  registerBlocks({ CameraSource, Select, Icon });
+  /** @type {CameraSource} */
+  const cameraSrc = document.querySelector('lr-camera-source');
   cameraSrc.$['*currentActivity'] = 'camera';
 };

blocks/FileItem/index.html

@@ -39,7 +39,7 @@
 
   <script src="test.js" type="module"></script>
 
-  <div id="viewport"></div>
+  <div id="viewport" style="--ctx-name: 'TEST'"></div>
 </lr-live-html></col-css>
     </main>
     <footer>© 2022 🦆</footer>

blocks/Select/Select.js

@@ -0,0 +1,53 @@
+import { Block, BaseComponent } from '../../abstract/Block.js';
+
+export class Option extends BaseComponent {
+  initCallback() {
+    this.outerHTML = /*html*/ `<option value="${this.$.value}">${this.$.text}</option>`;
+  }
+}
+Option.reg('lr-option');
+
+export class Select extends Block {
+  init$ = {
+    ...this.init$,
+    currentText: '',
+    options: [],
+  };
+
+  initCallback() {
+    super.initCallback();
+
+    this.sub('options', (options) => {
+      this.$.currentText = options?.[0]?.text || '';
+    });
+
+    /** @type {HTMLSelectElement} */
+    let select = this.ref.select;
+    select.addEventListener(
+      'change',
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.value = this.ref.select.value;
+        this.$.currentText =
+          this.$.options.find((opt) => {
+            return opt.value == this.value;
+          })?.text || '';
+        this.dispatchEvent(new Event('change'));
+      },
+      false
+    );
+  }
+}
+
+Select.template = /*html*/ `
+<button>
+  {{currentText}}
+  <lr-icon name="select"></lr-icon>
+  <select 
+    ref="select"
+    repeat="options"
+    repeat-item-tag="lr-option">
+  </select>
+</button>
+`;

blocks/Select/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>blocks</title>
+    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+    <script type="importmap">{
+  "imports": {
+    "@symbiotejs/symbiote": "https://unpkg.com/@symbiotejs/[email protected]/core/symbiote.js"
+  }
+}
+</script>
+    <script type="module" src="https://unpkg.com/@re4ma/[email protected]/build/re4ma.js"></script>
+    <script type="module">
+      import { LiveHtml } from '../../blocks/LiveHtml/LiveHtml.js';
+      LiveHtml.reg('lr-live-html');
+    </script>
+    <script type="module">/** * @param{String}html * @returns{String}*/ export function colorCode(html){return html .replace(/&lt;/g,'<span -tag-arr->&lt;</span>') .replace(/&gt;/g,'<span -tag-arr->&gt;</span>') .split('="') .map((chunk)=>{return chunk.replace('"','</span>"');}) .join(`="<span -attr->`) .replace(/"/g,'<span -quote->"</span>') .replace(/=/g,'<span -equal->=</span>') .split('<span -tag-arr->&lt;</span>/') .join('<span -tag-arr->&lt;/</span>') .split('<span -tag-arr->&lt;</span>!--') .join('<span -comment->&lt;!--') .split('--<span -tag-arr->&gt;</span>') .join('--&gt;</span>') .split('<span -tag-arr->&lt;</span>style<span -tag-arr->&gt;</span>') .join('<span -tag-arr->&lt;</span>style<span -tag-arr->&gt;</span><span -style->') .split('<span -tag-arr->&lt;/</span>style<span -tag-arr->&gt;</span>') .join('</span><span -tag-arr->&lt;/</span>style<span -tag-arr->&gt;</span>');}let codeElements=[...document.querySelectorAll('code')];let tmpEl=document.createElement('div');codeElements.forEach((codeEl)=>{tmpEl.textContent=codeEl.innerHTML;codeEl.innerHTML=colorCode(tmpEl.textContent);});</script>
+    <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');:root{--clr-bg:rgb(31 29 29);--clr-font:rgb(224 253 255);--clr-link:rgb(253 255 139);--clr-panel:rgb(255 255 255 / 10%);--clr-accent:rgb(233 159 255);--clr-accent-shade:rgb(233 159 255 / 6%);--clr-code:#fff;--clr-code-hl:rgb(255 112 112);--gap-min:2px;--gap-mid:10px;--gap-max:20px;--gap-huge:60px;}html,body{margin:0;padding:0;color:var(--clr-font);font-family:Roboto,sans-serif;background-color:var(--clr-bg);}body{display:grid;grid-template-rows:min-content min-content auto min-content;min-height:100vh;}header{padding:20px;background-color:rgba(0,0,0,.4);}nav{--l-bg-clr:rgba(60,60,60,.9);--blur:6px;display:flex;justify-content:center;position:sticky;z-index:10000;top:0;background-color:var(--l-bg-clr);height:100%;}@supports ((-webkit-backdrop-filter:blur(var(--blur))) or (backdrop-filter:blur(var(--blur)))){nav{--l-bg-clr:rgba(255,255,255,.1);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));}}nav > div{display:flex;justify-content:space-around;align-items:center;width:100%;max-width:1080px;}nav a{display:block;color:var(--clr-font);margin:20px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.6);}main{display:flex;justify-content:center;padding:20px;}col-css{display:block;max-width:1080px;width:100%;}footer{padding:20px;background-color:rgba(0,0,0,.2);}lr-live-html{min-height:400px;}main a{color:var(--clr-link);}code{display:block;background-color:#000;color:var(--clr-code);padding:var(--gap-max);overflow-x:auto;}code .hl{color:var(--clr-code-hl);}code:not([class]){display:inline-block;padding:var(--gap-min);padding-left:.5em;padding-right:.5em;}blockquote{display:block;color:var(--clr-accent);background-color:var(--clr-accent-shade);padding:var(--gap-mid);margin:0;margin-top:var(--gap-max);border-left:var(--gap-min) solid currentColor;}h1{color:var(--clr-accent);}h2{margin-top:calc(var(--gap-max) * 3);}li{margin-bottom:var(--gap-mid);}table{width:100%;}th{padding:10px;background:rgba(0,0,0,.4);}td{padding:10px;background:rgba(255,255,255,.1);}tr:hover{background:rgba(255,255,255,.1);}lr-live-html{display:grid;grid-template-columns:50% 50%;box-shadow:0 5px 16px rgb(0 0 0 / 60%);}lr-live-html [contenteditable]{padding:20px;overflow:auto;color:rgb(255 255 255);font-size:14px;font-family:monospace;white-space:pre;background-color:#000;outline:none;}lr-live-html [contenteditable] [-tag-arr-]{color:rgb(255 112 112);}lr-live-html [contenteditable] [-comment-]{color:aqua;font-style:italic;opacity:0.5;}lr-live-html [contenteditable] [-attr-]{color:rgb(152 197 255);}lr-live-html [contenteditable] [-quote-]{color:rgb(169 255 152);}lr-live-html [contenteditable] [-equal-]{color:rgb(255 152 241);}lr-live-html [contenteditable] [-style-]{color:rgb(255 207 152);}lr-live-html iframe{display:block;width:100%;height:100%;background-color:#fff;border:0;}lr-live-html{display:grid;grid-template-columns:50% 50%;box-shadow:0 5px 16px rgb(0 0 0 / 60%);}code{padding:20px;overflow:auto;color:rgb(255 255 255);font-size:14px;font-family:monospace;white-space:pre;background-color:#000;outline:none;}code [-tag-arr-]{color:rgb(255 112 112);}code [-comment-]{color:aqua;font-style:italic;opacity:0.5;}code [-attr-]{color:rgb(152 197 255);}code [-quote-]{color:rgb(169 255 152);}code [-equal-]{color:rgb(255 152 241);}code [-style-]{color:rgb(255 207 152);}lr-live-html iframe{display:block;width:100%;height:100%;background-color:#fff;border:0;}</style>
+  </head>
+  <body>
+    <header>🟡 Uploadcare | blocks</header>
+    <nav>
+      <div>
+        <a href="../../">Home</a>
+        <a href="../../blocks/">Blocks</a>
+        <a href="../../solutions/">Solutions</a>
+        <a href="../../toc.html">TOC</a>
+        <a href="//github.com/uploadcare/uc-blocks/discussions">Discussions</a>
+      </div>
+    </nav>
+    <main>
+      <col-css><h1>Select</h1>
+
+<lr-live-html>
+  <link rel="stylesheet" href="../themes/lr-basic/index.css" />
+
+  <script src="test.js" type="module"></script>
+
+  <lr-select class="lr-wgt-common"></lr-select>
+</lr-live-html></col-css>
+    </main>
+    <footer>© 2022 🦆</footer>
+  </body>
+</html>

blocks/Select/ref.htm

@@ -0,0 +1,9 @@
+<h1>Select</h1>
+
+<lr-live-html>
+  <link rel="stylesheet" href="../themes/lr-basic/index.css" />
+
+  <script src="test.js" type="module"></script>
+
+  <lr-select class="lr-wgt-common"></lr-select>
+</lr-live-html>

blocks/Select/select.css

@@ -0,0 +1,21 @@
+lr-select {
+  display: inline-flex;
+}
+
+lr-select > button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-right: 0;
+  color: var(--clr-btn-txt-secondary);
+  background-color: var(--clr-btn-bgr-secondary);
+  box-shadow: var(--shadow-btn-secondary);
+}
+
+lr-select > button > select {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}

blocks/Select/test.js

@@ -0,0 +1,37 @@
+import { Select } from './Select.js';
+import { Icon } from '../Icon/Icon.js';
+import { registerBlocks } from '../../abstract/registerBlocks.js';
+
+function init() {
+  registerBlocks({ Select, Icon });
+  /** @type {Select} */
+  let select = document.querySelector('lr-select');
+  select.$.options = [
+    {
+      text: 'Option 1',
+      value: 1,
+    },
+    {
+      text: 'Option 2',
+      value: 2,
+    },
+    {
+      text: 'Option 3',
+      value: 3,
+    },
+  ];
+  select.onchange = (e) => {
+    console.log(e);
+    console.log(select.value);
+  };
+}
+
+window.onload = () => {
+  if (window.location.host) {
+    return;
+  }
+
+  window.requestAnimationFrame(() => {
+    init();
+  });
+};

blocks/themes/lr-basic/index.css

@@ -39,3 +39,4 @@
 @import url('../../ActivityCaption/activity-caption.css');
 @import url('../../ActivityIcon/activity-icon.css');
 @import url('../../CloudImageEditor/index.css');
+@import url('../../Select/select.css');

index.html

@@ -80,7 +80,7 @@ <h3 id="supported-browsers">Supported browsers</h3>
 </ul>
 <p><a href="https://uploadcare.com/blog/uploadcare-stops-internet-explorer-support/">Internet Explorer</a> is outdated and not supported anymore.</p>
 <h2 id="🚀-feedback">🚀 Feedback</h2>
-<p>Issues and PRs are welcome. You can provide your feedback or drop us a support request at <a href="mailto:&#104;&#101;&#108;&#108;&#111;&#x40;&#x75;&#112;&#x6c;&#111;&#x61;&#x64;&#x63;&#97;&#x72;&#101;&#46;&#99;&#x6f;&#109;">&#104;&#101;&#108;&#108;&#111;&#x40;&#x75;&#112;&#x6c;&#111;&#x61;&#x64;&#x63;&#97;&#x72;&#101;&#46;&#99;&#x6f;&#109;</a>.</p>
+<p>Issues and PRs are welcome. You can provide your feedback or drop us a support request at <a href="mailto:&#x68;&#101;&#x6c;&#x6c;&#111;&#64;&#117;&#x70;&#x6c;&#111;&#97;&#100;&#99;&#x61;&#x72;&#x65;&#46;&#99;&#x6f;&#x6d;">&#x68;&#101;&#x6c;&#x6c;&#111;&#64;&#117;&#x70;&#x6c;&#111;&#97;&#100;&#99;&#x61;&#x72;&#x65;&#46;&#99;&#x6f;&#x6d;</a>.</p>
 <h2 id="browse-documentation-and-live-demos">Browse documentation and live demos</h2>
 <p><a href="https://uploadcare.github.io/uc-blocks/">https://uploadcare.github.io/uc-blocks/</a></p>
 <blockquote>

toc.html

@@ -84,6 +84,8 @@
 <li><a href="./blocks/ProgressBar/">ProgressBar</a> - abstract progress bar</li>
 <li><a href="./blocks/ProgressBarCommon/">ProgressBarCommon</a> - displays uploading progress for the all files selected</li>
 <li><a href="./blocks/Range/">Range</a> - customizable wrapper for the range input element</li>
+<li><a href="./blocks/Select/">Select</a> - customizable selector</li>
+<li><a href="./blocks/ShadowWrapper/">ShadowWrapper</a> - Shadow DOM wrapper to encapsulate your solution</li>
 <li><a href="./blocks/SimpleBtn/">SimpleBtn</a> - button for the file uploading workflow start</li>
 <li><a href="./blocks/SourceBtn/">SourceBtn</a> - button for the certain source activation</li>
 <li><a href="./blocks/SourceList/">SourceList</a> - renders the list of file sources basing on configuration provided</li>