From 72d8e05271979101c31c7ed6d8cb668d5f202b80 Mon Sep 17 00:00:00 2001 From: Emerson Rocha Date: Mon, 3 Jan 2022 20:43:20 -0300 Subject: [PATCH] HXL-CPLP/forum#60, #4: picturam.html; mvp of using CSS stylesheets rules (avoid add too much addEventListeners --- docs/picturam.html | 68 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 59 insertions(+), 9 deletions(-) diff --git a/docs/picturam.html b/docs/picturam.html index 1fd7349..b596b23 100644 --- a/docs/picturam.html +++ b/docs/picturam.html @@ -10,19 +10,23 @@ Numerordĭnātĭo pictūrae + + @@ -50,7 +54,8 @@

Numerordĭnātĭo pictūrae

- + + @@ -60,7 +65,7 @@

Numerordĭnātĭo pictūrae

BCP47 linguam + aria-label="BCP47 linguam" aria-describedby="cl_label" value="">
@@ -81,7 +86,8 @@

Numerordĭnātĭo pictūrae

-
+ +
@@ -112,11 +118,55 @@

Numerordĭnātĭo pictūrae

render_optionem() } + function picturam_css(object_de_array, stylesheet_id = 'picturam-stylesheet'){ + let picturamStylesheet = document.getElementById(stylesheet_id) + let crudumStylesheet = [] + console.log(picturamStylesheet) + console.log(object_de_array) + + for (let [selector, optionem] of Object.entries(object_de_array)) { + crudumStylesheet.push(`${selector} {\n ${optionem.join(";\n ")}\n}`) + } + + picturamStylesheet.innerHTML = crudumStylesheet.join("\n") + } + window.picturam_css = picturam_css + + // picturam_css({ + // 'dl [data-bcp47-language="Lat" i]': [ + // 'display: none;' + // ], + // 'dl [data-bcp47-language="lat" i]': [ + // 'display: none;' + // ], + // }) + function render_optionem() { + let picturam_css_optionem = {} console.log('render_optionem') let details = document.querySelectorAll('#picturam-html details'); // let significatum = document.querySelectorAll('[data-significatum]'); [...details].map(item => document.getElementById('ce').checked ? item.setAttribute("open", 1) : item.removeAttribute("open")) + + let cl_val = document.querySelector('#cl') + let cl_val_list = cl_val.value.split(',').map(item => item.trim()).filter(item => item) + if (cl_val_list && cl_val_list.length > 0) { + for (let rem of cl_val_list) { + picturam_css_optionem[`dl [data-bcp47-language="${rem}" i]`] = ['display: block !important;'] + } + } + + let cs_val = document.querySelector('#cs') + let cs_val_list = cs_val.value.split(',').map(item => item.trim()).filter(item => item) + if (cs_val_list && cs_val_list.length > 0) { + for (let rem of cs_val_list) { + picturam_css_optionem[`dl [data-bcp47-script="${rem}" i]`] = ['display: block !important;'] + } + } + console.log('picturam_css_optionem', picturam_css_optionem) + picturam_css(picturam_css_optionem) + + // if (document.getElementById('ce').checked) { // [...details].map(item => item.setAttribute("open", document.getElementById('ce').checked)) // }