function humanFileSize(bytes, si) { var thresh = si ? 1000 : 1024; if(Math.abs(bytes) < thresh) { return bytes + ' B'; } var units = si ? ['kB','MB','GB','TB','PB','EB','ZB','YB'] : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB']; var u = -1; do { bytes /= thresh; ++u; } while(Math.abs(bytes) >= thresh && u < units.length - 1); return bytes.toFixed(1)+' '+units[u]; } function trim(string) { var newStr = string.substring(0, 10); if(newStr.length !== string.length) newStr += "…"; return newStr; } function initGraffiti(id) { let canvas = null; let msgbox = MessageBox(tr("draw_graffiti"), "<div id='ovkDraw'></div>", [tr("save"), tr("cancel")], [function() { canvas.getImage({includeWatermark: false}).toBlob(blob => { let fName = "Graffiti-" + Math.ceil(performance.now()).toString() + ".jpeg"; let image = new File([blob], fName, {type: "image/jpeg", lastModified: new Date().getTime()}); fastUploadImage(id, image) }, "image/jpeg", 0.92); canvas.teardown(); }, function() { canvas.teardown(); }]); let watermarkImage = new Image(); watermarkImage.src = "/assets/packages/static/openvk/img/logo_watermark.gif"; msgbox.attr("style", "width: 750px;"); canvas = LC.init(document.querySelector("#ovkDraw"), { backgroundColor: "#fff", imageURLPrefix: "/assets/packages/static/openvk/js/node_modules/literallycanvas/lib/img", watermarkImage: watermarkImage, imageSize: { width: 640, height: 480 } }); } function fastUploadImage(textareaId, file) { // uploading images if(!file.type.startsWith('image/')) { MessageBox(tr("error"), tr("only_images_accepted", escapeHtml(file.name)), [tr("ok")], [() => {Function.noop}]) return; } // 🤓🤓🤓 if(file.size > 5 * 1024 * 1024) { MessageBox(tr("error"), tr("max_filesize", 5), [tr("ok")], [() => {Function.noop}]) return; } let imagesCount = document.querySelector("#post-buttons" + textareaId + " input[name='photos']").value.split(",").length if(imagesCount > 10) { MessageBox(tr("error"), tr("too_many_photos"), [tr("ok")], [() => {Function.noop}]) return } let xhr = new XMLHttpRequest let data = new FormData data.append("photo_0", file) data.append("count", 1) data.append("hash", u("meta[name=csrf]").attr("value")) xhr.open("POST", "/photos/upload") xhr.onloadstart = () => { document.querySelector("#post-buttons"+textareaId+" .upload").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`) } xhr.onload = () => { let response = JSON.parse(xhr.responseText) appendImage(response, textareaId) } xhr.send(data) } // append image after uploading via /photos/upload function appendImage(response, textareaId) { if(!response.success) { MessageBox(tr("error"), (tr("error_uploading_photo") + response.flash.message), [tr("ok")], [() => {Function.noop}]) } else { let form = document.querySelector("#post-buttons"+textareaId) let photosInput = form.querySelector("input[name='photos']") let photosIndicator = form.querySelector(".upload") for(const phot of response.photos) { let id = phot.owner + "_" + phot.vid photosInput.value += (id + ",") u(photosIndicator).append(u(` <div class="upload-item" id="aP" data-id="${id}"> <a class="upload-delete">×</a> <img src="${phot.url}"> </div> `)) u(photosIndicator.querySelector(`.upload #aP[data-id='${id}'] .upload-delete`)).on("click", () => { photosInput.value = photosInput.value.replace(id + ",", "") u(form.querySelector(`.upload #aP[data-id='${id}']`)).remove() }) } } u(`#post-buttons${textareaId} .upload #loader`).remove() } u(".post-like-button").on("click", function(e) { e.preventDefault(); var thisBtn = u(this).first(); var link = u(this).attr("href"); var heart = u(".heart", thisBtn); var counter = u(".likeCnt", thisBtn); var likes = counter.text() === "" ? 0 : counter.text(); var isLiked = heart.attr("id") === 'liked'; ky(link); heart.attr("id", isLiked ? '' : 'liked'); counter.text(parseInt(likes) + (isLiked ? -1 : 1)); if (counter.text() === "0") { counter.text(""); } return false; }); function setupWallPostInputHandlers(id) { u("#wall-post-input" + id).on("paste", function(e) { // Если вы находитесь на странице с постом с id 11, то копирование произойдёт джва раза. // Оч ржачный баг, но вот как его исправить, я, если честно, не знаю. if(e.clipboardData.files.length === 1) { fastUploadImage(id, e.clipboardData.files[0]) return; } }); u("#wall-post-input" + id).on("input", function(e) { var boost = 5; var textArea = e.target; textArea.style.height = "5px"; var newHeight = textArea.scrollHeight; textArea.style.height = newHeight + boost + "px"; return; // revert to original size if it is larger (possibly changed by user) // textArea.style.height = (newHeight > originalHeight ? (newHeight + boost) : originalHeight) + "px"; }); u("#wall-post-input" + id).on("dragover", function(e) { e.preventDefault() // todo add animation return; }); $("#wall-post-input" + id).on("drop", function(e) { e.originalEvent.dataTransfer.dropEffect = 'move'; fastUploadImage(id, e.originalEvent.dataTransfer.files[0]) return; }); } function OpenMiniature(e, photo, post, photo_id, type = "post") { /* костыли но смешные однако */ e.preventDefault(); if(u(".ovk-photo-view").length > 0) u(".ovk-photo-view-dimmer").remove(); // Значения для переключения фоток let json; let imagesCount = 0; let imagesIndex = 0; let tempDetailsSection = []; let dialog = u( `<div class="ovk-photo-view-dimmer"> <div class="ovk-photo-view"> <div class="photo_com_title"> <text id="photo_com_title_photos"> <img src="/assets/packages/static/openvk/img/loading_mini.gif"> </text> <div> <a id="ovk-photo-close">${tr("close")}</a> </div> </div> <center style="margin-bottom: 8pt;"> <div class="ovk-photo-slide-left"></div> <div class="ovk-photo-slide-right"></div> <img src="${photo}" style="max-width: 100%; max-height: 60vh; user-select:none;" id="ovk-photo-img"> </center> <div class="ovk-photo-details"> <img src="/assets/packages/static/openvk/img/loading_mini.gif"> </div> </div> </div>`); u("body").addClass("dimmed").append(dialog); document.querySelector("html").style.overflowY = "hidden" let button = u("#ovk-photo-close"); button.on("click", function(e) { let __closeDialog = () => { u("body").removeClass("dimmed"); u(".ovk-photo-view-dimmer").remove(); document.querySelector("html").style.overflowY = "scroll" }; __closeDialog(); }); function __reloadTitleBar() { u("#photo_com_title_photos").last().innerHTML = imagesCount > 1 ? tr("photo_x_from_y", imagesIndex, imagesCount) : tr("photo"); } function __loadDetails(photo_id, index) { if(tempDetailsSection[index] == null) { u(".ovk-photo-details").last().innerHTML = '<img src="/assets/packages/static/openvk/img/loading_mini.gif">'; ky("/photo" + photo_id, { hooks: { afterResponse: [ async (_request, _options, response) => { let parser = new DOMParser(); let body = parser.parseFromString(await response.text(), "text/html"); let element = u(body.getElementsByClassName("ovk-photo-details")).last(); tempDetailsSection[index] = element.innerHTML; if(index == imagesIndex) { u(".ovk-photo-details").last().innerHTML = element.innerHTML; } document.querySelectorAll(".ovk-photo-details .bsdn").forEach(bsdnInitElement) document.querySelectorAll(".ovk-photo-details script").forEach(scr => { // stolen from #953 let newScr = document.createElement('script') if(scr.src) { newScr.src = scr.src } else { newScr.textContent = scr.textContent } document.querySelector(".ovk-photo-details").appendChild(newScr); }) } ] } }); } else { u(".ovk-photo-details").last().innerHTML = tempDetailsSection[index]; } } function __slidePhoto(direction) { /* direction = 1 - right direction = 0 - left */ if(json == undefined) { console.log("Да подожди ты. Куда торопишься?"); } else { if(imagesIndex >= imagesCount && direction == 1) { imagesIndex = 1; } else if(imagesIndex <= 1 && direction == 0) { imagesIndex = imagesCount; } else if(direction == 1) { imagesIndex++; } else if(direction == 0) { imagesIndex--; } let photoURL = json.body[imagesIndex - 1].url; u("#ovk-photo-img").last().src = photoURL; __reloadTitleBar(); __loadDetails(json.body[imagesIndex - 1].id, imagesIndex); } } let slideLeft = u(".ovk-photo-slide-left"); slideLeft.on("click", (e) => { __slidePhoto(0); }); let slideRight = u(".ovk-photo-slide-right"); slideRight.on("click", (e) => { __slidePhoto(1); }); let data = new FormData() data.append('parentType', type); ky.post("/iapi/getPhotosFromPost/" + (type == "post" ? post : "1_"+post), { hooks: { afterResponse: [ async (_request, _options, response) => { json = await response.json(); imagesCount = json.body.length; imagesIndex = 0; // Это всё придётся правда на 1 прибавлять json.body.every(element => { imagesIndex++; if(element.id == photo_id) { return false; } else { return true; } }); __reloadTitleBar(); __loadDetails(json.body[imagesIndex - 1].id, imagesIndex); } ] }, body: data }); return u(".ovk-photo-view-dimmer"); } u("#write > form").on("keydown", function(event) { if(event.ctrlKey && event.keyCode === 13) this.submit(); }); var tooltipClientTemplate = Handlebars.compile(` <table> <tr> <td width="54" valign="top"> <img src="{{img}}" width="54" /> </td> <td width="1"></td> <td width="150" valign="top"> <text> {{app_tr}}: <b>{{name}}</b> </text><br/> <a href="{{url}}">${tr("learn_more")}</a> </td> </tr> </table> `); var tooltipClientNoInfoTemplate = Handlebars.compile(` <table> <tr> <td width="150" valign="top"> <text> {{app_tr}}: <b>{{name}}</b> </text><br/> </td> </tr> </table> `); tippy(".client_app", { theme: "light vk", content: "⌛", allowHTML: true, interactive: true, interactiveDebounce: 500, onCreate: async function(that) { that._resolvedClient = null; }, onShow: async function(that) { let client_tag = that.reference.dataset.appTag; let client_name = that.reference.dataset.appName; let client_url = that.reference.dataset.appUrl; let client_img = that.reference.dataset.appImg; if(client_name != "") { let res = { 'name': client_name, 'url': client_url, 'img': client_img, 'app_tr': tr("app") }; that.setContent(tooltipClientTemplate(res)); } else { let res = { 'name': client_tag, 'app_tr': tr("app") }; that.setContent(tooltipClientNoInfoTemplate(res)); } } }); function addNote(textareaId, nid) { if(nid > 0) { note.value = nid let noteObj = document.querySelector("#nd"+nid) let nortd = document.querySelector("#post-buttons"+textareaId+" .post-has-note"); nortd.style.display = "block" nortd.innerHTML = `${tr("note")} ${escapeHtml(noteObj.dataset.name)}` } else { note.value = "none" let nortd = document.querySelector("#post-buttons"+textareaId+" .post-has-note"); nortd.style.display = "none" nortd.innerHTML = "" } u("body").removeClass("dimmed"); u(".ovk-diag-cont").remove(); document.querySelector("html").style.overflowY = "scroll" } async function attachNote(id) { let notes = await API.Wall.getMyNotes() let body = `` if(notes.closed < 1) { body = `${tr("notes_closed")}` } else { if(notes.items.length < 1) { body = `${tr("no_notes")}` } else { body = ` ${tr("select_or_create_new")} <div id="notesList">` if(note.value != "none") { body += ` <div class="ntSelect" onclick="addNote(${id}, 0)"> <span>${tr("do_not_attach_note")}</span> </div>` } for(const note of notes.items) { body += ` <div data-name="${note.name}" class="ntSelect" id="nd${note.id}" onclick="addNote(${id}, ${note.id})"> <span>${escapeHtml(note.name)}</span> </div> ` } body += `</div>` } } let frame = MessageBox(tr("select_note"), body, [tr("cancel")], [Function.noop]); document.querySelector(".ovk-diag-body").style.padding = "10px" } async function showArticle(note_id) { u("body").addClass("dimmed"); let note = await API.Notes.getNote(note_id); u("#articleAuthorAva").attr("src", note.author.ava); u("#articleAuthorName").text(note.author.name); u("#articleAuthorName").attr("href", note.author.link); u("#articleTime").text(note.created); u("#articleLink").attr("href", note.link); u("#articleText").html(`<h1 class="articleView_nameHeading">${note.title}</h1>` + note.html); u("body").removeClass("dimmed"); u("body").addClass("article"); } $(document).on("click", "#videoAttachment", async (e) => { e.preventDefault() let body = ` <div class="topGrayBlock"> <div style="padding-top: 11px;padding-left: 12px;"> <a href="/videos/upload">${tr("upload_new_video")}</a> <input type="text" id="vquery" maxlength="20" placeholder="${tr("header_search")}" style="float: right;width: 160px;margin-right: 17px;margin-top: -2px;"> </div> </div> <div class="videosInsert" style="padding: 5px;height: 287px;overflow-y: scroll;"></div> ` let form = e.currentTarget.closest("form") MessageBox(tr("selecting_video"), body, [tr("close")], [Function.noop]); // styles for messageboxx document.querySelector(".ovk-diag-body").style.padding = "0" document.querySelector(".ovk-diag-cont").style.width = "580px" document.querySelector(".ovk-diag-body").style.height = "335px" async function insertVideos(page, query = "") { document.querySelector(".videosInsert").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`) let vidoses let noVideosText = tr("no_videos") if(query == "") { vidoses = await API.Wall.getVideos(page) } else { vidoses = await API.Wall.searchVideos(page, query) noVideosText = tr("no_videos_results") } if(vidoses.count < 1) { document.querySelector(".videosInsert").innerHTML = `<span>${noVideosText}</span>` } let pagesCount = Math.ceil(Number(vidoses.count) / 8) u("#loader").remove() let insert = document.querySelector(".videosInsert") for(const vid of vidoses.items) { let isAttached = (form.querySelector("input[name='videos']").value.includes(`${vid.video.owner_id}_${vid.video.id},`)) insert.insertAdjacentHTML("beforeend", ` <div class="content" style="padding: unset;"> <table> <tbody> <tr> <td valign="top"> <a href="/video${vid.video.owner_id}_${vid.video.id}"> <div class="video-preview" style="height: 75px;width: 133px;overflow: hidden;"> <img src="${vid.video.image[0].url}" alt="${escapeHtml(vid.video.title)}" style="max-width: 133px; height: 75px; margin: auto;"> </div> </a> </td> <td valign="top" style="width: 100%"> <a href="/video${vid.video.owner_id}_${vid.video.id}"> <b> ${ovk_proc_strtr(escapeHtml(vid.video.title), 30)} </b> </a> <br> <p> <span>${ovk_proc_strtr(escapeHtml(vid.video.description ?? ""), 140)}</span> </p> <span><a href="/id${vid.video.owner_id}" target="_blank">${escapeHtml(vid.video.author_name ?? "")}</a></span> </td> <td valign="top" class="action_links" style="width: 150px;"> <a class="profile_link" id="attachvid" data-name="${escapeHtml(vid.video.title)}" data-attachmentData="${vid.video.owner_id}_${vid.video.id}">${!isAttached ? tr("attach") : tr("detach")}</a> </td> </tr> </tbody> </table> </div> `) } if(page < pagesCount) { document.querySelector(".videosInsert").insertAdjacentHTML("beforeend", ` <div id="showMoreVideos" data-pagesCount="${pagesCount}" data-page="${page + 1}" style="width: 100%;text-align: center;background: #d5d5d5;height: 22px;padding-top: 9px;cursor:pointer;"> <span>more...</span> </div>`) } } $(".videosInsert").on("click", "#showMoreVideos", (e) => { u(e.currentTarget).remove() insertVideos(Number(e.currentTarget.dataset.page), document.querySelector(".topGrayBlock #vquery").value) }) $(".topGrayBlock #vquery").on("change", async (e) => { await new Promise(r => setTimeout(r, 1000)); if(e.currentTarget.value === document.querySelector(".topGrayBlock #vquery").value) { document.querySelector(".videosInsert").innerHTML = "" insertVideos(1, e.currentTarget.value) return; } else { console.info("skipping") } }) insertVideos(1) function insertAttachment(id) { let videos = form.querySelector("input[name='videos']") if(!videos.value.includes(id + ",")) { if(videos.value.split(",").length > 10) { NewNotification(tr("error"), tr("max_attached_videos")) return false } form.querySelector("input[name='videos']").value += (id + ",") console.info(id + " attached") return true } else { form.querySelector("input[name='videos']").value = form.querySelector("input[name='videos']").value.replace(id + ",", "") console.info(id + " detached") return false } } $(".videosInsert").on("click", "#attachvid", (ev) => { // откреплено от псто if(!insertAttachment(ev.currentTarget.dataset.attachmentdata)) { u(`.post-has-videos .post-has-video[data-id='${ev.currentTarget.dataset.attachmentdata}']`).remove() ev.currentTarget.innerHTML = tr("attach") } else { ev.currentTarget.innerHTML = tr("detach") form.querySelector(".post-has-videos").insertAdjacentHTML("beforeend", ` <div class="post-has-video" id="unattachVideo" data-id="${ev.currentTarget.dataset.attachmentdata}"> <span>${tr("video")} <b>"${ovk_proc_strtr(escapeHtml(ev.currentTarget.dataset.name), 20)}"</b></span> </div> `) u(`#unattachVideo[data-id='${ev.currentTarget.dataset.attachmentdata}']`).on("click", (e) => { let id = ev.currentTarget.dataset.attachmentdata form.querySelector("input[name='videos']").value = form.querySelector("input[name='videos']").value.replace(id + ",", "") console.info(id + " detached") u(e.currentTarget).remove() }) } }) }) $(document).on("click", "#editPost", (e) => { let post = e.currentTarget.closest("table") let content = post.querySelector(".text") let text = content.querySelector(".really_text") if(content.querySelector("textarea") == null) { content.insertAdjacentHTML("afterbegin", ` <div class="editMenu"> <div id="wall-post-input999"> <textarea id="new_content">${text.dataset.text}</textarea> <input type="button" class="button" value="${tr("save")}" id="endEditing"> <input type="button" class="button" value="${tr("cancel")}" id="cancelEditing"> </div> ${e.currentTarget.dataset.nsfw != null ? ` <div class="postOptions"> <label><input type="checkbox" id="nswfw" ${e.currentTarget.dataset.nsfw == 1 ? `checked` : ``}>${tr("contains_nsfw")}</label> </div> ` : ``} ${e.currentTarget.dataset.fromgroup != null ? ` <div class="postOptions"> <label><input type="checkbox" id="fromgroup" ${e.currentTarget.dataset.fromgroup == 1 ? `checked` : ``}>${tr("post_as_group")}</label> </div> ` : ``} </div> `) u(content.querySelector("#cancelEditing")).on("click", () => {post.querySelector("#editPost").click()}) u(content.querySelector("#endEditing")).on("click", () => { let nwcntnt = content.querySelector("#new_content").value let type = "post" if(post.classList.contains("comment")) { type = "comment" } let xhr = new XMLHttpRequest() xhr.open("POST", "/wall/edit") xhr.onloadstart = () => { content.querySelector(".editMenu").classList.add("loading") } xhr.onerror = () => { MessageBox(tr("error"), "unknown error occured", [tr("ok")], [() => {Function.noop}]) } xhr.ontimeout = () => { MessageBox(tr("error"), "Try to refresh page", [tr("ok")], [() => {Function.noop}]) } xhr.onload = () => { let result = JSON.parse(xhr.responseText) if(result.error == "no") { post.querySelector("#editPost").click() content.querySelector(".really_text").innerHTML = result.new_content if(post.querySelector(".editedMark") == null) { post.querySelector(".date").insertAdjacentHTML("beforeend", ` <span class="edited editedMark">(${tr("edited_short")})</span> `) } if(e.currentTarget.dataset.nsfw != null) { e.currentTarget.setAttribute("data-nsfw", result.nsfw) if(result.nsfw == 0) { post.classList.remove("post-nsfw") } else { post.classList.add("post-nsfw") } } if(e.currentTarget.dataset.fromgroup != null) { e.currentTarget.setAttribute("data-fromgroup", result.from_group) } post.querySelector(".post-avatar").setAttribute("src", result.author.avatar) post.querySelector(".post-author-name").innerHTML = result.author.name post.querySelector(".really_text").setAttribute("data-text", result.new_text) } else { MessageBox(tr("error"), result.error, [tr("ok")], [Function.noop]) post.querySelector("#editPost").click() } } xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send("postid="+e.currentTarget.dataset.id+ "&newContent="+nwcntnt+ "&hash="+encodeURIComponent(u("meta[name=csrf]").attr("value"))+ "&type="+type+ "&nsfw="+(content.querySelector("#nswfw") != null ? content.querySelector("#nswfw").checked : 0)+ "&fromgroup="+(content.querySelector("#fromgroup") != null ? content.querySelector("#fromgroup").checked : 0)) }) u(".editMenu").on("keydown", (e) => { if(e.ctrlKey && e.keyCode === 13) content.querySelector("#endEditing").click() }); text.style.display = "none" setupWallPostInputHandlers(999) } else { u(content.querySelector(".editMenu")).remove() text.style.display = "block" } }) // copypaste from videos picker $(document).on("click", "#photosAttachments", async (e) => { let body = ` <div class="topGrayBlock"> <div style="padding-top: 7px;padding-left: 12px;"> ${tr("upload_new_photo")}: <input type="file" multiple accept="image/*" id="fastFotosUplod" style="display:none"> <input type="button" class="button" value="${tr("upload_button")}" onclick="fastFotosUplod.click()"> <select id="albumSelect" style="width: 154px;float: right;margin-right: 17px;"> <option value="0">${tr("all_photos")}</option> </select> </div> </div> <div class="photosInsert" style="padding: 5px;height: 287px;overflow-y: scroll;"> <div style="position: fixed;z-index: 1007;width: 92%;background: white;margin-top: -5px;padding-top: 6px;"><h4>${tr("is_x_photos", 0)}</h4></div> <div class="photosList album-flex" style="margin-top: 20px;"></div> </div> ` let form = e.currentTarget.closest("form") MessageBox(tr("select_photo"), body, [tr("close")], [Function.noop]); document.querySelector(".ovk-diag-body").style.padding = "0" document.querySelector(".ovk-diag-cont").style.width = "630px" document.querySelector(".ovk-diag-body").style.height = "335px" async function insertPhotos(page, album = 0) { u("#loader").remove() let insertPlace = document.querySelector(".photosInsert .photosList") document.querySelector(".photosInsert").insertAdjacentHTML("beforeend", `<img id="loader" style="max-height: 8px;max-width: 36px;" src="/assets/packages/static/openvk/img/loading_mini.gif">`) let photos; try { photos = await API.Photos.getPhotos(page, Number(album)) } catch(e) { document.querySelector(".photosInsert h4").innerHTML = tr("is_x_photos", -1) insertPlace.innerHTML = "Invalid album" console.error(e) u("#loader").remove() return; } document.querySelector(".photosInsert h4").innerHTML = tr("is_x_photos", photos.count) let pagesCount = Math.ceil(Number(photos.count) / 24) u("#loader").remove() for(const photo of photos.items) { let isAttached = (form.querySelector("input[name='photos']").value.includes(`${photo.owner_id}_${photo.id},`)) insertPlace.insertAdjacentHTML("beforeend", ` <div style="width: 14%;margin-bottom: 7px;margin-left: 13px;" class="album-photo" data-attachmentdata="${photo.owner_id}_${photo.id}" data-preview="${photo.photo_130}"> <a href="/photo${photo.owner_id}_${photo.id}"> <img class="album-photo--image" src="${photo.photo_130}" alt="..." style="${isAttached ? "background-color: #646464" : ""}"> </a> </div> `) } if(page < pagesCount) { insertPlace.insertAdjacentHTML("beforeend", ` <div id="showMorePhotos" data-pagesCount="${pagesCount}" data-page="${page + 1}" style="width: 100%;text-align: center;background: #f0f0f0;height: 22px;padding-top: 9px;cursor:pointer;"> <span>more...</span> </div>`) } } insertPhotos(1) let albums = await API.Photos.getAlbums(Number(e.currentTarget.dataset.club ?? 0)) for(const alb of albums.items) { let sel = document.querySelector(".ovk-diag-body #albumSelect") sel.insertAdjacentHTML("beforeend", `<option value="${alb.id}">${ovk_proc_strtr(escapeHtml(alb.name), 20)}</option>`) } $(".photosInsert").on("click", "#showMorePhotos", (e) => { u(e.currentTarget).remove() insertPhotos(Number(e.currentTarget.dataset.page), document.querySelector(".topGrayBlock #albumSelect").value) }) $(".topGrayBlock #albumSelect").on("change", (evv) => { document.querySelector(".photosInsert .photosList").innerHTML = "" insertPhotos(1, evv.currentTarget.value) }) function insertAttachment(id) { let photos = form.querySelector("input[name='photos']") if(!photos.value.includes(id + ",")) { if(photos.value.split(",").length > 10) { NewNotification(tr("error"), tr("max_attached_photos")) return false } form.querySelector("input[name='photos']").value += (id + ",") console.info(id + " attached") return true } else { form.querySelector("input[name='photos']").value = form.querySelector("input[name='photos']").value.replace(id + ",", "") console.info(id + " detached") return false } } $(".photosList").on("click", ".album-photo", (ev) => { ev.preventDefault() if(!insertAttachment(ev.currentTarget.dataset.attachmentdata)) { u(form.querySelector(`.upload #aP[data-id='${ev.currentTarget.dataset.attachmentdata}']`)).remove() ev.currentTarget.querySelector("img").style.backgroundColor = "white" } else { ev.currentTarget.querySelector("img").style.backgroundColor = "#646464" let id = ev.currentTarget.dataset.attachmentdata u(form.querySelector(`.upload`)).append(u(` <div class="upload-item" id="aP" data-id="${ev.currentTarget.dataset.attachmentdata}"> <a class="upload-delete">×</a> <img src="${ev.currentTarget.dataset.preview}"> </div> `)); u(`.upload #aP[data-id='${ev.currentTarget.dataset.attachmentdata}'] .upload-delete`).on("click", () => { form.querySelector("input[name='photos']").value = form.querySelector("input[name='photos']").value.replace(id + ",", "") u(form.querySelector(`.upload #aP[data-id='${ev.currentTarget.dataset.attachmentdata}']`)).remove() }) } }) u("#fastFotosUplod").on("change", (evn) => { let xhr = new XMLHttpRequest() xhr.open("POST", "/photos/upload") let formdata = new FormData() let iterator = 0 for(const fille of evn.currentTarget.files) { if(!fille.type.startsWith('image/')) { continue; } if(fille.size > 5 * 1024 * 1024) { continue; } if(evn.currentTarget.files.length >= 10) { NewNotification(tr("error"), tr("max_attached_photos")) return; } formdata.append("photo_"+iterator, fille) iterator += 1 } xhr.onloadstart = () => { evn.currentTarget.parentNode.insertAdjacentHTML("beforeend", `<img id="loader" style="max-height: 8px;max-width: 36px;" src="/assets/packages/static/openvk/img/loading_mini.gif">`) } xhr.onload = () => { let result = JSON.parse(xhr.responseText) u("#loader").remove() if(result.success) { for(const pht of result.photos) { let id = pht.owner + "_" + pht.vid if(!insertAttachment(id)) { return } u(form.querySelector(`.upload`)).append(u(` <div class="upload-item" id="aP" data-id="${pht.owner + "_" + pht.vid}"> <a class="upload-delete">×</a> <img src="${pht.url}"> </div> `)); u(`.upload #aP[data-id='${pht.owner + "_" + pht.vid}'] .upload-delete`).on("click", () => { form.querySelector("input[name='photos']").value = form.querySelector("input[name='photos']").value.replace(id + ",", "") u(form.querySelector(`.upload #aP[data-id='${id}']`)).remove() }) } u("body").removeClass("dimmed"); u(".ovk-diag-cont").remove(); document.querySelector("html").style.overflowY = "scroll" } else { // todo: https://vk.com/wall-32295218_78593 alert(result.flash.message) } } formdata.append("hash", u("meta[name=csrf]").attr("value")) formdata.append("count", iterator) xhr.send(formdata) }) })