diff --git a/src/pages/options/index.html b/src/pages/options/index.html index d35abde..13f7f23 100644 --- a/src/pages/options/index.html +++ b/src/pages/options/index.html @@ -60,11 +60,11 @@ body { --ribbon-color: #0075ff; /* #4169e1;*/ font-family: Ubuntu, Arial, sans-serif; - font-size: 75%; + font-size: 80%; padding: 10px; } - ul { + menu { list-style: none; padding: 0; } @@ -182,18 +182,43 @@ - + + + + + ID + + FOR + + + + LABEL + + [обновить] + [⏸] + [ℹ] + + - - Антизапрет + + Антизапрет + antizapret + + + + Антицензорити + anticensority + anticensority + anticensority + + + Свой: @@ -216,7 +241,7 @@ Отключить / Сброс - + diff --git a/src/pages/options/index.mjs b/src/pages/options/index.mjs index 43326cc..7cde5b5 100644 --- a/src/pages/options/index.mjs +++ b/src/pages/options/index.mjs @@ -1,5 +1,39 @@ console.log('Options page is opening...'); +customElements.define('pac-record', + class extends HTMLElement { + constructor() { + super(); + const shadow = this.attachShadow({ mode: 'open' }); + const fragment = pacRecordTemplate.content.cloneNode(true); + shadow.appendChild(fragment); + const templateAttrs = shadow.querySelectorAll('#attributes > slot[name]'); + const dataAttrs = shadow.querySelectorAll('*[data-attrs]'); + dataAttrs.forEach( + (da) => { + da.dataset.attrs.split(' ').forEach( + (attr) => { + console.log(shadow.querySelector(`#attributes > slot[name=${attr}]`)); + da.setAttribute( + attr, + shadow.querySelector(`#attributes > slot[name=${attr}]`).assignedNodes()[0].textContent, + ); + }, + ); + } + ); + + const input = fragment.querySelector('div > input'); + const label = fragment.querySelector('div > label'); + /*const node = pacRecordTemplate.content.cloneNode(true); + const input = node.querySelector('div > input'); + const label = node.querySelector('div > label'); + input.id = input.value = label.htmlFor = this.dataset.id;*/ + + } + } +); + customPacUrl.addEventListener('change', function (event) { console.log('ON CHANGE:', event); pacChooserForm.reportValidity();