|
- /*
- *
- * Внешний вид
- *
- */
-
- function задатьВнешнийВид()
- {
- var вид = document.createElement("style");
- document.head.appendChild(вид);
- вид.innerHTML =
- `
- .муром-кнопка
- {
- padding: 0.5em 2em 0.5em 2em;
- margin-right: 0.5em;
- float: right;
- color: #222;
- font-family: sans-serif;
- border: 1px solid #ddd;
- background-color: transparent;
- cursor: pointer;
- text-transform: uppercase;
- -webkit-transition-duration: 0.2s; /* Safari */
- transition-duration: 0.2s;
- }
- .муром-кнопка:hover
- {
- border: 1px solid #222;
- }
- .муром-отступ-по-сторонам
- {
- margin-left: 0.5em;
- margin-right: 0.5em;
- }
- `;
- }
-
- /*
- *
- * Список модулей
- *
- */
-
- function СписокМодулей()
- {
- var я = this;
-
- this.создатьИнтерфейс();
- this.задатьВид();
- this.выбрали = new Уведомитель();
- this.выбрали.подписать(function(){
- я.отобразитьВыбор();
- });
- }
- СписокМодулей.prototype.создатьИнтерфейс = function()
- {
- // Помещаем таблицу в div для реализации промотки.
- this.иф = document.createElement("div");
- this.таблица = document.createElement("table");
- this.иф.appendChild(this.таблица);
- };
- СписокМодулей.prototype.задатьВид = function()
- {
- this.иф.style.cssText =
- `
- overflow: auto;
- height: 18.5em;
- border: 1px solid #ddd;
- /*
- padding: 0.5em;
- margin: 0.5em;
- */
- `;
- this.таблица.style.cssText =
- `
- color: #666666;
- font-family: sans-serif;
- cursor: default;
- border-collapse: collapse;
- `;
- };
- СписокМодулей.prototype.очистить = function()
- {
- while (this.таблица.rows.length)
- {
- this.таблица.deleteRow(0);
- };
- };
- СписокМодулей.prototype.добавитьЭлемент = function(статус, имя)
- {
- var статусHTML = "";
- if (статус)
- {
- статусHTML = "checked";
- }
-
- var ряд = this.таблица.insertRow();
- var ячейка = 0;
-
- var номер = ряд.insertCell(ячейка++);
- номер.innerHTML = this.таблица.rows.length - 1;
- номер.style.cssText = "padding: 0.5em;";
-
- var вкл = ряд.insertCell(ячейка++);
- вкл.innerHTML = `<input type="checkbox" disabled ` + статусHTML + `></input>`;
-
- var название = ряд.insertCell(ячейка++);
- название.innerHTML = имя;
- название.style.cssText = "padding: 0.5em; width: 100%;";
- };
- СписокМодулей.prototype.отобразитьСписок = function(список)
- {
- this.очистить();
- for (var номер in список)
- {
- var элемент = список[номер];
- var статус = элемент[0];
- var имя = элемент[1];
- this.добавитьЭлемент(статус, имя);
- }
- };
- СписокМодулей.prototype.улавливатьВыборЭлемента = function(номер)
- {
- var я = this;
-
- var ряд = this.таблица.rows[номер]
- ряд.onclick = function()
- {
- я.выборРанее = я.выбор;
- я.выбор = номер;
- я.выбрали.уведомить();
- };
- };
- СписокМодулей.prototype.улавливатьВыбор = function()
- {
- this.выборРанее = null;
- this.выбор = null;
- for (var номер = 0; номер < this.таблица.rows.length; ++номер)
- {
- this.улавливатьВыборЭлемента(номер);
- }
- };
- СписокМодулей.prototype.отобразитьВыбор = function()
- {
- if (this.выборРанее != null)
- {
- var ряд = this.таблица.rows[this.выборРанее];
- ряд.style.backgroundColor = null;
- }
- var ряд = this.таблица.rows[this.выбор];
- ряд.style.backgroundColor = "#eee";
- };
- СписокМодулей.prototype.задатьСписок = function(список)
- {
- this.отобразитьСписок(список);
- this.улавливатьВыбор();
- };
- СписокМодулей.prototype.выбрать = function(номер)
- {
- var ряд = this.таблица.rows[номер];
- ряд.scrollIntoView();
- ряд.onclick();
- };
- СписокМодулей.prototype.обновитьЭлемент = function(номер, статус, имя)
- {
- var ряд = this.таблица.rows[номер];
- ряд.cells[1].childNodes[0].checked = статус;
- ряд.cells[2].innerHTML = имя;
- };
- СписокМодулей.prototype.удалитьЭлемент = function(номер)
- {
- var ряд = this.таблица.rows[номер];
- ряд.parentNode.removeChild(ряд);
- }
-
- /*
- *
- * Тест списка модулей
- *
- */
-
- function ТестСпискаМодулей()
- {
- this.создатьИнтерфейс();
- }
- ТестСпискаМодулей.prototype.создатьИнтерфейс = function()
- {
- var я = this;
-
- this.иф = document.createElement("div");
- this.список = new СписокМодулей();
- this.иф.appendChild(this.список.иф);
-
- var модули = [
- [true, "муром.загрузка_1.0.0"],
- [true, "муром.uuid_1.0.0"],
- [true, "Уведомитель_1.0.0"],
- [false, "uikit_3.2.0.css"],
- [false, "uikit_3.2.0.js"],
- [false, "ПанельУправления.UIKit"],
- [false, "ПанельУправления_1.0.0"],
- ];
-
- this.список.задатьСписок(модули);
- this.список.выбрать(0);
-
- this.создатьКнопку("Выбрать последний", function(){
- console.log("выбрать");
- я.список.выбрать(модули.length - 1);
- });
- this.создатьКнопку("Обновить последний", function(){
- я.список.обновитьЭлемент(модули.length - 1, true, "Новое имя");
- });
- this.создатьКнопку("Удалить последний", function(){
- я.список.удалитьЭлемент(модули.length - 1);
- });
- this.создатьКнопку("Добавить", function(){
- я.список.добавитьЭлемент(true, "Новый-599");
- var номер = я.список.таблица.rows.length - 1;
- я.список.улавливатьВыборЭлемента(номер);
- я.список.выбрать(номер);
- });
- };
- ТестСпискаМодулей.prototype.создатьКнопку = function(имя, реакция)
- {
- var кнопка = document.createElement("button");
- кнопка.innerHTML = имя;
- this.иф.appendChild(кнопка);
- кнопка.onclick = реакция;
- };
-
- /*
- *
- * Свойства модуля
- *
- */
-
- function СвойстваМодуля()
- {
- this.создатьИнтерфейс();
- this.изменилиНомер = new Уведомитель();
- this.настроитьНомер();
- this.изменилиИмя = new Уведомитель();
- this.настроитьИмя();
- this.изменилиСтатус = new Уведомитель();
- this.настроитьСтатус();
- this.удалить = new Уведомитель();
- this.настроитьУдаление();
- }
- СвойстваМодуля.prototype.создатьИнтерфейс = function()
- {
- this.иф = document.createElement("div");
- this.иф.style.cssText =
- `
- border: 1px solid #ddd;
- /*
- padding: 0.5em;
- margin: 0.5em;
- */
- color: #666666;
- font-family: sans-serif;
- `;
- this.таблица = document.createElement("table");
- this.иф.appendChild(this.таблица);
- };
- Object.defineProperty(СвойстваМодуля.prototype, "номер", {
- get: function()
- {
- return Number(this.полеНомер.value);
- },
- set: function(значение)
- {
- this.полеНомер.value = значение;
- }
- });
- СвойстваМодуля.prototype.настроитьНомер = function()
- {
- var я = this;
-
- var ряд = this.таблица.insertRow();
- var ячейка = 0;
-
- var ключ = ряд.insertCell(ячейка++);
- ключ.innerHTML = "Номер:";
- ключ.style.cssText = "padding: 0.5em;";
-
- var значение = ряд.insertCell(ячейка++);
- this.полеНомер = document.createElement("input");
- this.полеНомер.type = "number";
- this.полеНомер.min = 0;
- значение.style.cssText = "width: 100%; padding: 0.5em;";
- this.полеНомер.style.cssText = "width: 100%;";
- значение.appendChild(this.полеНомер);
-
- this.полеНомер.oninput = function()
- {
- я.изменилиНомер.уведомить();
- };
- };
- Object.defineProperty(СвойстваМодуля.prototype, "имя", {
- get: function()
- {
- return this.полеИмя.value;
- },
- set: function(значение)
- {
- this.полеИмя.value = значение;
- }
- });
- СвойстваМодуля.prototype.настроитьИмя = function()
- {
- var я = this;
-
- var ряд = this.таблица.insertRow();
- var ячейка = 0;
-
- var ключ = ряд.insertCell(ячейка++);
- ключ.innerHTML = "Имя:";
- ключ.style.cssText = "padding: 0.5em;";
-
- var значение = ряд.insertCell(ячейка++);
- this.полеИмя = document.createElement("input");
- значение.style.cssText = "width: 100%; padding: 0.5em;";
- this.полеИмя.style.cssText = "width: 100%;";
- значение.appendChild(this.полеИмя);
-
- this.полеИмя.oninput = function()
- {
- я.изменилиИмя.уведомить();
- };
- };
- Object.defineProperty(СвойстваМодуля.prototype, "статус", {
- get: function()
- {
- return this.переключатель.checked;
- },
- set: function(значение)
- {
- this.переключатель.checked = значение;
- }
- });
- СвойстваМодуля.prototype.настроитьСтатус = function()
- {
- var я = this;
-
- var ряд = this.таблица.insertRow();
- var ячейка = 0;
-
- var ключ = ряд.insertCell(ячейка++);
- ключ.innerHTML = "Исполнять:";
- ключ.style.cssText = "padding: 0.5em;";
-
- var значение = ряд.insertCell(ячейка++);
- this.переключатель = document.createElement("input");
- this.переключатель.type = "checkbox";
- this.переключатель.style.cssText = "padding: 0.5em;";
- значение.appendChild(this.переключатель);
-
- this.переключатель.onchange = function()
- {
- я.изменилиСтатус.уведомить();
- };
- ключ.onclick = function()
- {
- я.переключатель.checked = !я.переключатель.checked;
- я.изменилиСтатус.уведомить();
- };
- };
- СвойстваМодуля.prototype.настроитьУдаление = function()
- {
- var я = this;
-
- var ряд = this.таблица.insertRow();
- var ячейка = 0;
-
- ряд.insertCell(ячейка++);
- var значение = ряд.insertCell(ячейка++);
-
- this.кнопкаУдалить = document.createElement("button");
- this.кнопкаУдалить.innerHTML = "Удалить";
- this.кнопкаУдалить.classList.add("муром-кнопка");
- значение.appendChild(this.кнопкаУдалить);
-
- this.кнопкаУдалить.onclick = function()
- {
- я.удалить.уведомить();
- };
- };
-
- /*
- *
- * Тест свойства модуля
- *
- */
-
- function ТестСвойстваМодуля()
- {
- this.создатьИнтерфейс();
- }
- ТестСвойстваМодуля.prototype.создатьИнтерфейс = function()
- {
- var я = this;
-
- this.иф = document.createElement("div");
- this.свойства = new СвойстваМодуля();
- this.иф.appendChild(this.свойства.иф);
-
- this.свойства.изменилиНомер.подписать(function(){
- console.log("номер: '" + я.свойства.номер + "'");
- });
- this.свойства.изменилиИмя.подписать(function(){
- console.log("имя: '" + я.свойства.имя + "'");
- });
- this.свойства.изменилиСтатус.подписать(function(){
- console.log("статус: '" + я.свойства.статус + "'");
- });
- this.свойства.удалить.подписать(function(){
- console.log("удалить модуль '" + я.свойства.имя + "'");
- });
- };
-
- /*
- *
- * Модули
- *
- */
-
- function Модули()
- {
-
- }
- Модули.prototype.свойства = function(номер)
- {
- return murom.moduleProperties(номер);
- };
- Модули.prototype.задатьСвойства = function(номер, свойства)
- {
- var м = муром.модули[номер];
- м[2] = свойства;
- };
- Модули.prototype.статус = function(номер)
- {
- return murom.moduleStatus(номер);
- };
- Модули.prototype.задатьСтатус = function(номер, статус)
- {
- var св = this.свойства(номер);
- св["status"] = статус;
- this.задатьСвойства(номер, св);
- };
- Модули.prototype.задатьИмя = function(номер, имя)
- {
- var м = муром.модули[номер];
- м[0] = имя;
- };
- Модули.prototype.задатьНомер = function(старый, новый)
- {
- //console.log("задать номер. '" + старый + "' -> '" + новый + "'");
- var модуль = муром.модули[старый];
- // Удаляем старую запись.
- муром.модули.splice(старый, 1);
- // Добавляем модуль в новую позицию.
- муром.модули.splice(новый, 0, модуль);
- };
-
- /*
- *
- * Панель управления
- *
- */
-
- function ПанельУправления()
- {
- this.модули = new Модули();
- this.создатьОснову();
- this.создатьСохранениеСкачиваниеДобавление();
- this.создатьСписокМодулей();
- this.создатьСвойстваМодуля();
- }
- ПанельУправления.prototype.создатьОбёрткуЯчейку = function()
- {
- var обёртка = document.createElement("table");
- обёртка.style.cssText = "width: 100%;";
- var ряд = обёртка.insertRow();
- var ячейка = ряд.insertCell();
- return [обёртка, ячейка];
- };
- ПанельУправления.prototype.создатьОснову = function()
- {
- this.иф = document.createElement("table");
- this.иф.style.cssText = "width: 100%;";
- var ряд = this.иф.insertRow();
- this.лево = ряд.insertCell();
- this.лево.style.cssText = "width: 100%;";
- var право = ряд.insertCell();
- право.style.cssText = "height: 100%;";
- this.кнопки = document.createElement("table");
- this.кнопки.style.cssText = "height: 100%;";
- право.appendChild(this.кнопки);
- ряд = this.иф.insertRow();
- this.низ = ряд.insertCell();
- this.низ.colSpan = 2;
- };
- ПанельУправления.prototype.создатьСписокМодулей = function()
- {
- this.список = new СписокМодулей();
- this.список.задатьСписок(this.списокМодулей());
- var оя = this.создатьОбёрткуЯчейку();
- this.лево.appendChild(оя[0]);
- оя[1].appendChild(this.список.иф);
- };
- ПанельУправления.prototype.создатьСвойстваМодуля = function()
- {
- this.свойства = new СвойстваМодуля();
- оя = this.создатьОбёрткуЯчейку();
- this.низ.appendChild(оя[0]);
- оя[1].appendChild(this.свойства.иф);
- };
- ПанельУправления.prototype.списокМодулей = function()
- {
- var список = [];
- for (var номер in муром.модули)
- {
- var м = муром.модули[номер];
- var статус = this.модули.статус(номер);
- var имя = м[0];
- var элемент = [статус, имя];
- список.push(элемент);
- }
-
- return список;
- };
- ПанельУправления.prototype.создатьКнопку = function(имя, уведомитель)
- {
- var кнопка = document.createElement("button");
- кнопка.innerHTML = имя;
- кнопка.style.cssText = "width: 100%;";
- кнопка.classList.add("муром-кнопка");
- кнопка.onclick = function()
- {
- уведомитель.уведомить();
- };
-
- return кнопка;
- };
- ПанельУправления.prototype.создатьСохранениеСкачиваниеДобавление = function()
- {
- var я = this;
-
- var ряд = this.кнопки.insertRow();
- var ячейка = ряд.insertCell();
- this.сохранить = new Уведомитель();
- this.кнопкаСохранить = this.создатьКнопку("Сохранить", this.сохранить);
- ячейка.appendChild(this.кнопкаСохранить);
-
- ряд = this.кнопки.insertRow();
- ячейка = ряд.insertCell();
- this.скачать = new Уведомитель();
- this.кнопкаСкачать = this.создатьКнопку("Скачать", this.скачать);
- ячейка.appendChild(this.кнопкаСкачать);
-
- // Пробел.
- ряд = this.кнопки.insertRow();
- ячейка = ряд.insertCell();
- ячейка.style.cssText = "height: 100%;";
-
- ряд = this.кнопки.insertRow();
- ячейка = ряд.insertCell();
- this.добавить = new Уведомитель();
- this.кнопкаДобавить = this.создатьКнопку("Добавить", this.добавить);
- ячейка.appendChild(this.кнопкаДобавить);
- };
- ПанельУправления.prototype.имяФайла = function()
- {
- var путь = window.location.pathname;
- var имя = путь.split("/").pop();
- return decodeURI(имя);
- };
-
- function запуститьПУ()
- {
- var пу = new ПанельУправления();
- муром.пу = пу;
- var области = муром.создатьЛевуюПравуюОбласти();
- var по = области[1];
- по.appendChild(пу.иф);
- муром.создатьРедакторВЛевойОбласти();
- var список = пу.список;
- var свойства = пу.свойства;
- var модули = пу.модули;
-
- function отобразитьКодВыбранногоМодуля()
- {
- var модуль = муром.модули[список.выбор];
- var код = муром.atob(модуль[1]);
- муром.редактор.session.setValue(код);
- }
- function отобразитьСвойстваВыбранногоМодуля()
- {
- var модуль = муром.модули[список.выбор];
-
- свойства.номер = список.выбор;
- свойства.имя = модуль[0];
- свойства.статус = пу.модули.статус(список.выбор);
- }
- список.выбрали.подписатьМного([
- отобразитьКодВыбранногоМодуля,
- отобразитьСвойстваВыбранногоМодуля,
- ]);
-
- function обновитьСтатусМодуля()
- {
- var номер = список.выбор;
- var имя = свойства.имя;
- var статус = свойства.статус;
- модули.задатьСтатус(номер, статус);
- список.обновитьЭлемент(номер, статус, имя);
- }
- свойства.изменилиСтатус.подписать(обновитьСтатусМодуля);
-
- function обновитьИмяМодуля()
- {
- var номер = список.выбор;
- var имя = свойства.имя;
- var статус = свойства.статус;
- модули.задатьИмя(номер, имя);
- список.обновитьЭлемент(номер, статус, имя);
- }
- свойства.изменилиИмя.подписать(обновитьИмяМодуля);
-
- function обновитьНомерМодуля()
- {
- var старый = список.выбор;
- var новый = свойства.номер;
- if (старый == новый)
- {
- return;
- }
- if (новый > муром.модули.length - 1)
- {
- новый = муром.модули.length - 1;
- }
- модули.задатьНомер(старый, новый);
- список.задатьСписок(пу.списокМодулей());
- список.выбрать(новый);
- }
- свойства.изменилиНомер.подписать(обновитьНомерМодуля);
-
- function добавитьМодуль()
- {
- var число = Math.floor(Math.random() * Math.floor(1000));
- var имя = "новый-" + число;
- var код = `console.log("НАДО Добавить код в модуль '` + имя + `'");`;
- var модуль = [имя, муром.btoa(код)];
- муром.модули.push(модуль);
- var модули = пу.списокМодулей();
- список.задатьСписок(модули);
- список.выбрать(модули.length - 1);
- }
- пу.добавить.подписать(добавитьМодуль);
-
- function удалитьМодуль()
- {
- var номер = список.выбор;
-
- var статус = пу.модули.статус(номер);
- if (статус)
- {
- alert("ОШИБКА Удалить можно лишь неисполняемый модуль");
- return;
- }
-
- // Удалить выбранный модуль.
- муром.модули.splice(номер, 1);
- --номер;
- if (номер < 0)
- {
- номер = 0;
- }
- var модули = пу.списокМодулей();
- список.задатьСписок(модули);
- список.выбрать(номер);
- }
- свойства.удалить.подписать(удалитьМодуль);
-
- function сохранитьВыбранныйМодуль()
- {
- var модуль = муром.модули[список.выбор];
- var код = муром.редактор.session.getValue();
- модуль[1] = муром.btoa(код);
- }
- function сохранить()
- {
- пу.кнопкаСохранить.disabled = true;
- localforage.setItem("modules", муром.модули, function(ошибка, значение){
- пу.кнопкаСохранить.disabled = false;
- if (ошибка)
- {
- console.error("Не удалось сохранить модули: '" + ошибка + "'");
- }
- });
- }
- пу.сохранить.подписатьМного([
- сохранитьВыбранныйМодуль,
- сохранить,
- ]);
-
- // How to create a file in memory for user to download, but not through server?
- // https://stackoverflow.com/a/18197341
- function скачать()
- {
- var содержимое = муром.файл.начало;
- for (var номер in муром.модули)
- {
- var модуль = муром.модули[номер];
- var имя = модуль[0];
- var код64 = модуль[1];
- var свойства = модули.свойства(номер);
- содержимое +=
- `
-
- [
- "` + имя + `",
- "` + код64 + `",
- `
- +
- JSON.stringify(свойства)
- +
- `
- ],
- `
- ;
- }
- содержимое += муром.файл.конец;
- содержимое = муром.btoa(содержимое);
-
- var ссыль = document.createElement("a");
- ссыль.setAttribute("href", "data:text/html;charset=utf-8;base64," + содержимое);
- var имя = пу.имяФайла();
- ссыль.setAttribute("download", имя);
- ссыль.style.display = "none";
- document.body.appendChild(ссыль);
- ссыль.click();
- document.body.removeChild(ссыль);
- }
- пу.скачать.подписать(скачать);
-
- // При запуске.
- список.выбрать(0);
- }
-
- /*
- *
- * Пуск
- *
- */
-
- if (window.location.search == "?0")
- {
- console.debug("Запуск панели управления");
- задатьВнешнийВид();
- запуститьПУ();
- console.debug("Панель управления запущена")
- }
|