let MaterialEditor = (function () { let module = {}; let __CreateNewsButton = document.querySelector("#CreateNewsButton"); if (__CreateNewsButton) { __CreateNewsButton.onclick = openModal; } let __CreateNoticeButton = document.querySelector("#CreateNoticeButton"); if (__CreateNoticeButton) { __CreateNoticeButton.onclick = openModal; } let __CreateMaterialButton = document.querySelector("#CreateMaterialButton"); if (__CreateMaterialButton) { __CreateMaterialButton.onclick = openModal; } let __CurrentCategory = undefined; function dataURIToBlob(dataURI) { const splitDataURI = dataURI.split(","); const byteString = splitDataURI[0].indexOf("base64") >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1]); const mimeString = splitDataURI[0].split(":")[1].split(";")[0]; const ia = new Uint8Array(byteString.length); for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i); return new Blob([ia], { type: mimeString }); } /** * Собрать все данные и отправить на БД * * @param {HTMLInputElement} caption * @param {HTMLInputElement} link * @param {HTMLDivElement} content * @param {HTMLDivElement} images * @param {HTMLInputElement} file */ function create(caption, link, content, images, file) { if (!caption || !link || !content || !images) { Messenger.Show("Некоторые элементы не были найдены, невозможно создать новость!"); return; } if (caption.value.length == 0) { Messenger.Show("Необходимо заполнить заголовок!"); return; } if (link.value.length == 0) { link.value = Main.GenerateHash256(); } let preview = { Valid: true, String: "", }; var date = new Date(); let m = ("00" + (date.getMonth() + 1)).slice(-2); let d = ("00" + date.getDate()).slice(-2); var imageFullpath = "image/" + __CurrentCategory + "/" + date.getUTCFullYear().toString() + "-" + m + "-" + d + "/"; var thumbFullpath = "thumb/" + __CurrentCategory + "/" + date.getUTCFullYear().toString() + "-" + m + "-" + m + "/"; let data = new FormData(); let contentHtml = ""; for (const c of content.blocks) { switch (c.type) { case "paragraph": contentHtml += "

" + c.data.text + "

"; preview.String += c.data.text; break; case "header": contentHtml += "" + c.data.text + "/h" + c.data.level + ">"; preview.String += c.data.text; break; case "list": if (c.data.style === "ordered") { contentHtml += "
    "; for (const li of c.data.items) { contentHtml += "
  1. " + li + "
  2. "; preview.String += li; } contentHtml += "
"; } else { contentHtml += ""; } break; case "delimiter": contentHtml += "
"; break; case "table": contentHtml += ""; for (const row of c.data.content) { contentHtml += ""; for (const col of row) { contentHtml += ""; preview.String += col; } contentHtml += ""; } contentHtml += "
" + col + "
"; break; case "image": let filename = Main.GenerateHashDashed(2) + "." + c.data.url.slice(11, c.data.url.indexOf(";")); contentHtml += ''; let div = document.createElement("div"); div.innerHTML = c.data.caption; if (div.textContent.length > 0) { contentHtml += '
' + c.data.caption + "
"; } data.append("Files", dataURIToBlob(c.data.url), filename); break; } } let clearTags = document.createElement("div"); clearTags.innerHTML = preview.String; preview.String = clearTags.textContent; if (preview.String.length > 260) { preview.String = preview.String.slice(0, 260); } let selectedImage = { Valid: false, String: "", }; if (__CurrentCategory != MATERIAL_CATEGORY.MATERIAL) { let selectedImageName = ";"; let selectedInput = images.querySelector("input:checked"); if (selectedInput) { let img = selectedInput.closest(".image").querySelector("img"); if (img) { selectedImageName = img.alt; selectedImage.String = thumbFullpath + selectedImageName.toLowerCase(); selectedImage.Valid = true; } } if (file.files.length > 0) { if (__CurrentCategory != MATERIAL_CATEGORY.NOTICE) { contentHtml += '
'; } for (const f of file.files) { let filename = f.name.toLowerCase(); filename = Main.GenerateHashDashed(2) + filename.slice(filename.lastIndexOf(".")); if (selectedImageName === f.name) { selectedImage.String = thumbFullpath + filename; } if (__CurrentCategory != MATERIAL_CATEGORY.NOTICE) { contentHtml += '' +
							filename +
							''; } data.append("Files", f, filename); } if (__CurrentCategory != MATERIAL_CATEGORY.NOTICE) { contentHtml += "
"; } } } data.set("Caption", caption.value); data.set("Link", link.value); data.set("Content", contentHtml); data.set("Source", JSON.stringify(content)); data.set("PreviewValid", preview.Valid); data.set("PreviewString", preview.String); data.set("ImageValid", selectedImage.Valid); data.set("ImageString", selectedImage.String); data.set("ImagePath", imageFullpath); data.set("ThumbPath", thumbFullpath); let closeModal = this.closest(".modal").querySelector(".close"); XHR.POST( function (result) { if (result && "Error" in result) { if (result.Error === null) { Messenger.Show(__CurrentCategory + " успешно добавлена"); closeModal.click(); } else { Messenger.Show("Возникла ошибка добавления новости." + result.Error); } } }, "/material-insert/" + __CurrentCategory, data, null, true, true ); } /** * Создать модальное окно для добавления новости */ function openModal() { switch (this.dataset.category) { case MATERIAL_CATEGORY.MATERIAL: __CurrentCategory = MATERIAL_CATEGORY.MATERIAL; break; case MATERIAL_CATEGORY.NEWS: __CurrentCategory = MATERIAL_CATEGORY.NEWS; break; case MATERIAL_CATEGORY.NOTICE: __CurrentCategory = MATERIAL_CATEGORY.NOTICE; break; default: return; } let body = document.createElement("div"), inputCaption = document.createElement("input"), inputLink = document.createElement("input"), contentBlock = document.createElement("div"), previewBlock = document.createElement("div"), preview = document.createElement("div"), label = document.createElement("label"), file = document.createElement("input"), fileButton = document.createElement("div"), buttonSend = document.createElement("button"); label.append(file, fileButton); label.className = "select-file"; fileButton.className = "button"; fileButton.textContent = "Выбрать изображениия"; file.type = "file"; if (__CurrentCategory === MATERIAL_CATEGORY.NOTICE) { file.multiple = false; } else { file.multiple = true; } file.accept = "image/*"; file.onchange = changeImages; inputCaption.type = "text"; inputCaption.placeholder = "Заголовок/название (обязательно)"; inputLink.type = "text"; inputLink.placeholder = "Ссылка на " + __CurrentCategory + " (не обязательно)"; buttonSend.textContent = "Создать"; // buttonSend.onclick = create.bind(buttonSend, inputCaption, inputLink, contentBlock, preview, file); preview.className = "preview-images"; contentBlock.id = "editorjs"; contentBlock.className = "content-editor"; // contentBlock.append(createManipulator()); if (__CurrentCategory !== MATERIAL_CATEGORY.MATERIAL) { body.append(inputCaption, inputLink, contentBlock, previewBlock, label, preview, buttonSend); } else { body.append(inputCaption, inputLink, contentBlock, previewBlock, buttonSend); } let tools = { header: { class: Header, inlineToolbar: true, config: { placeholder: "Заголовок", }, shortcut: "CMD+SHIFT+H", }, list: { class: List, inlineToolbar: true, shortcut: "CMD+SHIFT+L", }, // quote: { // class: Quote, // inlineToolbar: true, // config: { // quotePlaceholder: "Введите цитату", // captionPlaceholder: "Автор цитаты", // }, // shortcut: "CMD+SHIFT+O", // }, marker: { class: Marker, shortcut: "CMD+SHIFT+M", }, delimiter: Delimiter, inlineCode: { class: InlineCode, shortcut: "CMD+SHIFT+C", }, linkTool: LinkTool, table: { class: Table, inlineToolbar: true, shortcut: "CMD+ALT+T", }, onReady: function () { console.log("ready"); }, onChange: function () { console.log("changed"); }, }; if (__CurrentCategory === MATERIAL_CATEGORY.MATERIAL) { tools.image = { class: SimpleImage, inlineCode: true, }; tools.embed = { class: Embed, inlineToolbar: false, config: { services: { youtube: true, }, }, }; } const editor = new EditorJS({ holderOd: "editorjs", tools: tools, data: null, }); buttonSend.addEventListener("click", function () { editor.save().then((savedData) => { create.call(buttonSend, inputCaption, inputLink, savedData, preview, file); }); }); Modal.Create("Создать " + __CurrentCategory, body); } /** * Функция выбора файлов изображения для новости */ function changeImages() { let preview = document.querySelector(".preview-images"); if (!preview) { console.warn("Элемент [.preview-images] не найжен"); return; } for (const file of this.files) { /** * 1. Контейнер под изображение */ let div = document.createElement("div"); div.className = "image"; /** * 2. Создать элемент для изображения */ let img = document.createElement("img"); img.src = window.URL.createObjectURL(file); img.alt = file.name; img.height = 100; /** * 3. Создать label */ let label = document.createElement("label"); /** * 4. Создать input + span */ let input = document.createElement("input"); input.type = "radio"; input.dataset.image = file.name; input.name = "preview-images"; let span = document.createElement("span"); div.append(img, label); label.append(input, span); preview.append(div); } let firstImage = preview.querySelector("input"); firstImage.click(); } return module; })();