Детали не расширяются до полного размера при динамически сгенерировании ⇐ Javascript

[Anonymous]

Я делаю меню, и, как предполагают члены здесь. Как видно в первом фрагменте кода, меню не изменяется до полного размера. Но все элементы правильно заполнены элементами. Атрибуты и текстовое содержание. Я пытаюсь сделать его полностью сгенерированным JavaScript. < /P>

Код: Выделить всё

   class GLMenuTemplate
{
#style_id    = "webgl_menu_template_style";
#template_id = "webgl_menu_template";
#webgl_css   = `
div.webgl_menu /*element.class*/
{
position:absolute;z-index:10;border:1px solid black;
}
div.webgl_menu  summary /*element.class elements*/
{
background-color: #eee;
width:            1.3em;
height:           1.3em;
border:           solid black thin;
border-radius:    .3em;
padding:          0;
margin:           0;
align-content:    center;
text-align:       center;
cursor:           pointer;
}
div.webgl_menu  summary::marker  {  content: "+"; } /*element.class elements*/
div.webgl_menu  summary:hover { background-color:#ddd; }
div.webgl_menu  details[open] summary::marker { content: "x"; }`;

constructor ()
{
this.#styleInit();
this.#templateInit();
}
get template () {return document.getElementById(this.#template_id);}
#styleInit()
{
if (document.getElementById (this.#style_id)) return;
let style = document.createElement("style");
style.setAttribute ("id", this.#style_id);
style.innerText = this.#webgl_css;
document.body.appendChild(style);
}
#templateInit()
{
if (document.getElementById (this.#template_id)) return;
let div = this.#createDiv();
let tr  = this.#createTr();
let template = this.#createTemplate (this.#template_id, [div, tr]);
document.body.appendChild(template);
}
#createElement(elementName, children)
{
let element = document.createElement (elementName);
if (children)
for (let child of children)
element.appendChild (child);
return element;
}
#createTemplate(id, contents)
{
let template = document.createElement("template");
template.setAttribute ("id", id);
document.body.appendChild(template);
if (contents)
for (let content of contents)
template.content.appendChild(content);
return template;
}
#createDiv()
{
//template for menu item 
let summary = document.createElement ("summary");
let table   = document.createElement ("table");
//table.appendChild(tr);
let details = this.#createElement ("details", [summary, table]);
let div     = this.#createElement ("div", [details]);
div.setAttribute ("class", "webgl_menu");
return div;
}
#createTr ()
{
let label = this.#createElement ("label");
let td    = this.#createElement ("td",    [label] );
let tr    = this.#createElement ("tr",    [td]);
return tr;
}

}
class GLMenu
{
#x = 0xffff; #y = 0xffff;
#rowt    = null;
#items   = null;
#tpl     = null;
constructor (x, y, relativeElement)
{
let menuTemplate =  new GLMenuTemplate();
this.#template = menuTemplate.template;
[this.#x, this.#y] = [window.scrollX + x, window.scrollY + y];
if (relativeElement)
{
let r = relativeElement.getBoundingClientRect();
this.#x += r.left;
this.#y += r.top;
}

let divt = {div: this.#template.content.querySelector("div")};
let dive = {div: document.importNode(divt.div, true)};
[dive.div.style.top, dive.div.style.left] = [this.#y, this.#x];
document.body.appendChild(dive.div);

this.#rowt  = {tr: this.#template.content.querySelector("tr")};
this.#items = dive.div.querySelector ("table");

}

set #template(value) { this.#tpl = value; }
get #template()      { return this.#tpl;  }

attachEventListeners(element, listeners)
{
if (!listeners) return;
if (typeof listeners  === "function")
{
element.addEventListener ("click", listeners);
return;
}
if (Array.isArray(listeners))
{
for (let listener of listeners)
element.addEventListener (listener.name, listener.callback);
return;
}
element.addEventListener (listeners.name, listeners.callback);
}
addCheckbox (text, events)
{
let input = document.createElement ("input");
input.setAttribute ("type", "checkbox");
input.textContent = text;
this.attachEventListeners (input, events);

let rowe  = {tr: document.importNode(this.#rowt.tr, true)};
let label = rowe.tr.querySelector("label");
label.appendChild (input);
rowe.tr.appendChild (label);
this.#items.appendChild (rowe.tr);
return input;
}
}

document.addEventListener('DOMContentLoaded',
(event) =>
{
let canvas = document.getElementById("cone1 heart geometry 2");
// Menu 1
let menu1 = new GLMenu(10, 10, canvas);
menu1.addCheckbox ("write to console",    [{name:"click", callback: (e) =>
{
console.log (e.target.textContent  + ": checked:" + e.target.checked);
}}]   );
menu1.addCheckbox ("don't write to console",    (e) =>
{
console.log (e.target.textContent  + ": don't, checked:" + e.target.checked);
}   );
//Menu 2
let menu2 = new GLMenu(100, 100, canvas);
menu2.addCheckbox ("write to console 2",    {name:"click", callback: (e) =>
{
console.log (e.target.textContent  + ": 2 checked:" + e.target.checked);
}}   );
menu2.addCheckbox ("don't write to console 2",    (e) =>
{
console.log (e.target.textContent  + ": don't 2, checked:" + e.target.checked);
}   );

}
);< /code>
< /div>
< /div>
< /p>
Вот более ранняя версия вышеупомянутой программы, которая работает правильно. Первое различие,  в динамическом варианте выше добавляется внешняя таблица, поэтому таблица будет пустой, когда импортируется из шаблона.  < /P>



{
let template = document.getElementById("webgl_menu_template");
let divt = {div: template.content.querySelector("div")};
let dive = {div: document.importNode(divt.div, true)};
[dive.div.style.top, dive.div.style.left] = [10, 10];
document.body.appendChild(dive.div);
}
);< /code>
div.webgl_menu /*element.class*/
{
position:absolute;z-index:10;border:1px solid black;
}
div.webgl_menu  summary /*element.class elements*/
{
background-color: #eee;
width:            1.3em;
height:           1.3em;
border:           solid black thin;
border-radius:    .3em;
padding:          0;
margin:           0;
align-content:    center;
text-align:       center;
cursor:           pointer;
}
div.webgl_menu  summary::marker  {  content: "+"; } /*element.class elements*/
div.webgl_menu  summary:hover { background-color:#ddd; }
div.webgl_menu  details[open] summary::marker { content: "x"; }< /code>
   




 Show line 

Подробнее здесь: https://stackoverflow.com/questions/796 ... -generated