1066 lines
34 KiB
JavaScript
1066 lines
34 KiB
JavaScript
'use strict';
|
|
var formVars = {};
|
|
var alertMapping = {};
|
|
var alertList = [];
|
|
var alertCount = 0;
|
|
var moreTopicCount = 0;
|
|
var conn = false;
|
|
var selectedTopics = [];
|
|
var attachItemCallback = function(){}
|
|
|
|
// Topic move
|
|
var forumToMoveTo = 0;
|
|
|
|
// TODO: Write a friendlier error handler which uses a .notice or something, we could have a specialised one for alerts
|
|
function ajaxError(xhr,status,errstr) {
|
|
console.log("The AJAX request failed");
|
|
console.log("xhr", xhr);
|
|
console.log("status", status);
|
|
console.log("errstr", errstr);
|
|
if(status=="parsererror") {
|
|
console.log("The server didn't respond with a valid JSON response");
|
|
}
|
|
console.trace();
|
|
}
|
|
|
|
function postLink(event) {
|
|
event.preventDefault();
|
|
let formAction = $(event.target).closest('a').attr("href");
|
|
$.ajax({ url: formAction, type: "POST", dataType: "json", error: ajaxError, data: {js: "1"} });
|
|
}
|
|
|
|
function bindToAlerts() {
|
|
$(".alertItem.withAvatar a").click(function(event) {
|
|
event.stopPropagation();
|
|
$.ajax({ url: "/api/?action=set&module=dismiss-alert", type: "POST", dataType: "json", error: ajaxError, data: { asid: $(this).attr("data-asid") } });
|
|
});
|
|
}
|
|
|
|
function addAlert(msg, notice = false) {
|
|
var mmsg = msg.msg;
|
|
if("sub" in msg) {
|
|
for(var i = 0; i < msg.sub.length; i++) {
|
|
mmsg = mmsg.replace("\{"+i+"\}", msg.sub[i]);
|
|
}
|
|
}
|
|
|
|
let aItem = Template_alert({
|
|
ASID: msg.asid,
|
|
Path: msg.path,
|
|
Avatar: msg.avatar || "",
|
|
Message: mmsg
|
|
})
|
|
alertMapping[msg.asid] = aItem;
|
|
alertList.push(msg.asid);
|
|
|
|
if(notice) {
|
|
// TODO: Add some sort of notification queue to avoid flooding the end-user with notices?
|
|
// TODO: Use the site name instead of "Something Happened"
|
|
if(Notification.permission === "granted") {
|
|
var n = new Notification("Something Happened",{
|
|
body: mmsg,
|
|
icon: msg.avatar,
|
|
});
|
|
setTimeout(n.close.bind(n), 8000);
|
|
}
|
|
}
|
|
|
|
runInitHook("after_add_alert");
|
|
}
|
|
|
|
function updateAlertList(menuAlerts) {
|
|
let alertListNode = menuAlerts.getElementsByClassName("alertList")[0];
|
|
let alertCounterNode = menuAlerts.getElementsByClassName("alert_counter")[0];
|
|
alertCounterNode.textContent = "0";
|
|
|
|
let outList = "";
|
|
let j = 0;
|
|
for(var i = 0; i < alertList.length && j < 8; i++) {
|
|
outList += alertMapping[alertList[i]];
|
|
j++;
|
|
}
|
|
|
|
if(outList == "") outList = "<div class='alertItem'>"+phraseBox["alerts"]["alerts.no_alerts"]+"</div>";
|
|
alertListNode.innerHTML = outList;
|
|
|
|
if(alertCount != 0) {
|
|
alertCounterNode.textContent = alertCount;
|
|
menuAlerts.classList.add("has_alerts");
|
|
} else {
|
|
menuAlerts.classList.remove("has_alerts");
|
|
}
|
|
|
|
bindToAlerts();
|
|
console.log("alertCount:",alertCount)
|
|
runInitHook("after_update_alert_list", alertCount);
|
|
}
|
|
|
|
function setAlertError(menuAlerts,msg) {
|
|
let alertListNode = menuAlerts.getElementsByClassName("alertList")[0];
|
|
alertListNode.innerHTML = "<div class='alertItem'>"+msg+"</div>";
|
|
}
|
|
|
|
var alertsInitted = false;
|
|
function loadAlerts(menuAlerts) {
|
|
if(!alertsInitted) return;
|
|
$.ajax({
|
|
type: 'get',
|
|
dataType: 'json',
|
|
url:'/api/?action=get&module=alerts',
|
|
success: (data) => {
|
|
if("errmsg" in data) {
|
|
setAlertError(menuAlerts,data.errmsg)
|
|
return;
|
|
}
|
|
alertList = [];
|
|
alertMapping = {};
|
|
for(var i in data.msgs) addAlert(data.msgs[i]);
|
|
console.log("data.msgCount:",data.msgCount)
|
|
alertCount = data.msgCount;
|
|
updateAlertList(menuAlerts)
|
|
},
|
|
error: (magic,theStatus,error) => {
|
|
let errtxt = "Unable to get the alerts";
|
|
try {
|
|
var data = JSON.parse(magic.responseText);
|
|
if("errmsg" in data) errtxt = data.errmsg;
|
|
} catch(err) {
|
|
console.log(magic.responseText);
|
|
console.log(err);
|
|
}
|
|
console.log("error", error);
|
|
setAlertError(menuAlerts,errtxt);
|
|
}
|
|
});
|
|
}
|
|
|
|
function SplitN(data,ch,n) {
|
|
var out = [];
|
|
if(data.length === 0) return out;
|
|
|
|
var lastIndex = 0;
|
|
var j = 0;
|
|
var lastN = 1;
|
|
for(let i = 0; i < data.length; i++) {
|
|
if(data[i] === ch) {
|
|
out[j++] = data.substring(lastIndex,i);
|
|
lastIndex = i;
|
|
if(lastN === n) break;
|
|
lastN++;
|
|
}
|
|
}
|
|
if(data.length > lastIndex) out[out.length - 1] += data.substring(lastIndex);
|
|
return out;
|
|
}
|
|
|
|
function wsAlertEvent(data) {
|
|
addAlert(data, true);
|
|
|
|
var alist = "";
|
|
for (var i = 0; i < alertList.length; i++) alist += alertMapping[alertList[i]];
|
|
// TODO: Add support for other alert feeds like PM Alerts
|
|
var generalAlerts = document.getElementById("general_alerts");
|
|
// TODO: Make sure we update alertCount here
|
|
updateAlertList(generalAlerts, alist);
|
|
}
|
|
|
|
function runWebSockets() {
|
|
if(window.location.protocol == "https:") {
|
|
conn = new WebSocket("wss://" + document.location.host + "/ws/");
|
|
} else conn = new WebSocket("ws://" + document.location.host + "/ws/");
|
|
|
|
conn.onerror = (err) => {
|
|
console.log(err);
|
|
}
|
|
|
|
conn.onopen = () => {
|
|
console.log("The WebSockets connection was opened");
|
|
conn.send("page " + document.location.pathname + '\r');
|
|
// TODO: Don't ask again, if it's denied. We could have a setting in the UCP which automatically requests this when someone flips desktop notifications on
|
|
if(me.User.ID > 0) {
|
|
Notification.requestPermission();
|
|
}
|
|
}
|
|
|
|
conn.onclose = () => {
|
|
conn = false;
|
|
console.log("The WebSockets connection was closed");
|
|
}
|
|
|
|
conn.onmessage = (event) => {
|
|
if(event.data[0] == "{") {
|
|
console.log("json message");
|
|
let data = "";
|
|
try {
|
|
data = JSON.parse(event.data);
|
|
} catch(err) {
|
|
console.log(err);
|
|
return;
|
|
}
|
|
|
|
if ("msg" in data) wsAlertEvent(data);
|
|
else if("event" in data) {
|
|
if(data.event == "dismiss-alert"){
|
|
Object.keys(alertMapping).forEach((key) => {
|
|
if(key==data.asid) {
|
|
alertCount--;
|
|
let index = -1;
|
|
for(var i = 0; i < alertList.length; i++) {
|
|
if(alertList[i]==key) {
|
|
alertList[i] = 0;
|
|
index = i;
|
|
}
|
|
}
|
|
if(index==-1) return;
|
|
|
|
for(var i = index; (i+1) < alertList.length; i++) {
|
|
alertList[i] = alertList[i+1];
|
|
}
|
|
alertList.splice(alertList.length-1,1);
|
|
delete alertMapping[key];
|
|
|
|
// TODO: Add support for other alert feeds like PM Alerts
|
|
var generalAlerts = document.getElementById("general_alerts");
|
|
if(alertList.length < 8) loadAlerts(generalAlerts);
|
|
else updateAlertList(generalAlerts);
|
|
}
|
|
});
|
|
}
|
|
} else if("Topics" in data) {
|
|
console.log("topic in data");
|
|
console.log("data:", data);
|
|
let topic = data.Topics[0];
|
|
if(topic === undefined){
|
|
console.log("empty topic list");
|
|
return;
|
|
}
|
|
|
|
// TODO: Fix the data race where the function hasn't been loaded yet
|
|
let renTopic = Template_topics_topic(topic);
|
|
$(".topic_row[data-tid='"+topic.ID+"']").addClass("ajax_topic_dupe");
|
|
|
|
let node = $(renTopic);
|
|
node.addClass("new_item hide_ajax_topic");
|
|
console.log("Prepending to topic list");
|
|
$(".topic_list").prepend(node);
|
|
moreTopicCount++;
|
|
|
|
let moreTopicBlocks = document.getElementsByClassName("more_topic_block_initial");
|
|
for(let i = 0; i < moreTopicBlocks.length; i++) {
|
|
let moreTopicBlock = moreTopicBlocks[i];
|
|
moreTopicBlock.classList.remove("more_topic_block_initial");
|
|
moreTopicBlock.classList.add("more_topic_block_active");
|
|
|
|
console.log("phraseBox:",phraseBox);
|
|
let msgBox = moreTopicBlock.getElementsByClassName("more_topics")[0];
|
|
msgBox.innerText = phraseBox["topic_list"]["topic_list.changed_topics"].replace("%d",moreTopicCount);
|
|
}
|
|
} else {
|
|
console.log("unknown message");
|
|
console.log(data);
|
|
}
|
|
}
|
|
|
|
var messages = event.data.split('\r');
|
|
for(var i = 0; i < messages.length; i++) {
|
|
let message = messages[i];
|
|
//console.log("Message: ",message);
|
|
let msgblocks = SplitN(message," ",3);
|
|
if(msgblocks.length < 3) continue;
|
|
if(message.startsWith("set ")) {
|
|
let oldInnerHTML = document.querySelector(msgblocks[1]).innerHTML;
|
|
if(msgblocks[2]==oldInnerHTML) continue;
|
|
document.querySelector(msgblocks[1]).innerHTML = msgblocks[2];
|
|
} else if(message.startsWith("set-class ")) {
|
|
// Fix to stop the inspector from getting all jittery
|
|
let oldClassName = document.querySelector(msgblocks[1]).className;
|
|
if(msgblocks[2]==oldClassName) continue;
|
|
document.querySelector(msgblocks[1]).className = msgblocks[2];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
(() => {
|
|
addInitHook("pre_init", () => {
|
|
// We can only get away with this because template_alert has no phrases, otherwise it too would have to be part of the "dance", I miss Go concurrency :(
|
|
loadScript("template_alert.js", () => {
|
|
console.log("Loaded template_alert.js");
|
|
addInitHook("after_phrases", () => {
|
|
// TODO: The load part of loadAlerts could be done asynchronously while the update of the DOM could be deferred
|
|
$(document).ready(() => {
|
|
alertsInitted = true;
|
|
var alertMenuList = document.getElementsByClassName("menu_alerts");
|
|
for(var i = 0; i < alertMenuList.length; i++) {
|
|
loadAlerts(alertMenuList[i]);
|
|
}
|
|
if(window["WebSocket"]) runWebSockets();
|
|
});
|
|
});
|
|
});
|
|
|
|
$(document).ready(mainInit);
|
|
});
|
|
})();
|
|
|
|
// TODO: Use these in .filter_item and pass back an item count from the backend to work with here
|
|
// Ported from common/parser.go
|
|
function PageOffset(count, page, perPage) {
|
|
let offset = 0;
|
|
let lastPage = LastPage(count, perPage)
|
|
if(page > 1) {
|
|
offset = (perPage * page) - perPage
|
|
} else if (page == -1) {
|
|
page = lastPage
|
|
offset = (perPage * page) - perPage
|
|
} else {
|
|
page = 1
|
|
}
|
|
|
|
// We don't want the offset to overflow the slices, if everything's in memory
|
|
if(offset >= (count - 1)) offset = 0;
|
|
return {Offset:offset, Page:page, LastPage:lastPage}
|
|
}
|
|
function LastPage(count, perPage) {
|
|
return (count / perPage) + 1
|
|
}
|
|
function Paginate(count, perPage, maxPages) {
|
|
if(count < perPage) return [1];
|
|
let page = 0;
|
|
let out = [];
|
|
for(let current = 0; current < count; current += perPage){
|
|
page++;
|
|
out.push(page);
|
|
if(out.length >= maxPages) break;
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function mainInit(){
|
|
runInitHook("start_init");
|
|
|
|
$(".more_topics").click((event) => {
|
|
event.preventDefault();
|
|
let moreTopicBlocks = document.getElementsByClassName("more_topic_block_active");
|
|
for(let i = 0; i < moreTopicBlocks.length; i++) {
|
|
let moreTopicBlock = moreTopicBlocks[i];
|
|
moreTopicBlock.classList.remove("more_topic_block_active");
|
|
moreTopicBlock.classList.add("more_topic_block_initial");
|
|
}
|
|
$(".ajax_topic_dupe").fadeOut("slow", function(){
|
|
$(this).remove();
|
|
});
|
|
$(".hide_ajax_topic").removeClass("hide_ajax_topic"); // TODO: Do Fade
|
|
moreTopicCount = 0;
|
|
})
|
|
|
|
$(".add_like").click(function(event) {
|
|
event.preventDefault();
|
|
let target = this.closest("a").getAttribute("href");
|
|
console.log("target: ", target);
|
|
this.classList.remove("add_like");
|
|
this.classList.add("remove_like");
|
|
let controls = this.closest(".controls");
|
|
let hadLikes = controls.classList.contains("has_likes");
|
|
if(!hadLikes) controls.classList.add("has_likes");
|
|
let likeCountNode = controls.getElementsByClassName("like_count")[0];
|
|
console.log("likeCountNode",likeCountNode);
|
|
likeCountNode.innerHTML = parseInt(likeCountNode.innerHTML) + 1;
|
|
let likeButton = this;
|
|
|
|
$.ajax({
|
|
url: target,
|
|
type: "POST",
|
|
dataType: "json",
|
|
data: { isJs: 1 },
|
|
error: ajaxError,
|
|
success: function (data, status, xhr) {
|
|
if("success" in data) {
|
|
if(data["success"] == "1") return;
|
|
}
|
|
// addNotice("Failed to add a like: {err}")
|
|
likeButton.classList.add("add_like");
|
|
likeButton.classList.remove("remove_like");
|
|
if(!hadLikes) controls.classList.remove("has_likes");
|
|
likeCountNode.innerHTML = parseInt(likeCountNode.innerHTML) - 1;
|
|
console.log("data", data);
|
|
console.log("status", status);
|
|
console.log("xhr", xhr);
|
|
}
|
|
});
|
|
});
|
|
|
|
$(".link_label").click(function(event) {
|
|
event.preventDefault();
|
|
let forSelect = $(this).attr("data-for");
|
|
let linkSelect = $('#'+forSelect);
|
|
if(!linkSelect.hasClass("link_opened")) {
|
|
event.stopPropagation();
|
|
linkSelect.addClass("link_opened");
|
|
}
|
|
});
|
|
|
|
function rebuildPaginator(lastPage) {
|
|
let urlParams = new URLSearchParams(window.location.search);
|
|
let page = urlParams.get('page');
|
|
if(page=="") page = 1;
|
|
let stopAtPage = lastPage;
|
|
if(stopAtPage>5) stopAtPage = 5;
|
|
|
|
let pageList = [];
|
|
for(let i = 0; i < stopAtPage;i++) pageList.push(i+1);
|
|
//$(".pageset").html(Template_paginator({PageList: pageList, Page: page, LastPage: lastPage}));
|
|
let ok = false;
|
|
$(".pageset").each(function(){
|
|
this.outerHTML = Template_paginator({PageList: pageList, Page: page, LastPage: lastPage});
|
|
ok = true;
|
|
});
|
|
if(!ok) {
|
|
$(Template_paginator({PageList: pageList, Page: page, LastPage: lastPage})).insertAfter("#topic_list");
|
|
}
|
|
}
|
|
|
|
function rebindPaginator() {
|
|
$(".pageitem a").unbind("click");
|
|
$(".pageitem a").click(function() {
|
|
event.preventDefault();
|
|
// TODO: Take mostviewed into account
|
|
let url = "//"+window.location.host+window.location.pathname;
|
|
let urlParams = new URLSearchParams(window.location.search);
|
|
urlParams.set("page",new URLSearchParams(this.getAttribute("href")).get("page"));
|
|
let q = "?";
|
|
for(let item of urlParams.entries()) q += item[0]+"="+item[1]+"&";
|
|
if(q.length>1) q = q.slice(0,-1);
|
|
|
|
// TODO: Try to de-duplicate some of these fetch calls
|
|
fetch(url+q+"&js=1", {credentials: "same-origin"})
|
|
.then((resp) => resp.json())
|
|
.then((data) => {
|
|
if(!"Topics" in data) throw("no Topics in data");
|
|
let topics = data["Topics"];
|
|
|
|
// TODO: Fix the data race where the function hasn't been loaded yet
|
|
let out = "";
|
|
for(let i = 0; i < topics.length;i++) out += Template_topics_topic(topics[i]);
|
|
$(".topic_list").html(out);
|
|
|
|
let obj = {Title: document.title, Url: url+q};
|
|
history.pushState(obj, obj.Title, obj.Url);
|
|
rebuildPaginator(data.LastPage);
|
|
rebindPaginator();
|
|
}).catch((ex) => {
|
|
console.log("Unable to get script '"+url+q+"&js=1"+"'");
|
|
console.log("ex: ", ex);
|
|
console.trace();
|
|
});
|
|
});
|
|
}
|
|
|
|
// TODO: Render a headless topics.html instead of the individual topic rows and a bit of JS glue
|
|
$(".filter_item").click(function(event) {
|
|
if(!window.location.pathname.startsWith("/topics/")) return
|
|
event.preventDefault();
|
|
let that = this;
|
|
let fid = this.getAttribute("data-fid");
|
|
// TODO: Take mostviewed into account
|
|
let url = "//"+window.location.host+"/topics/?fids="+fid;
|
|
|
|
fetch(url+"&js=1", {credentials: "same-origin"})
|
|
.then((resp) => resp.json())
|
|
.then((data) => {
|
|
if(!"Topics" in data) throw("no Topics in data");
|
|
let topics = data["Topics"];
|
|
|
|
// TODO: Fix the data race where the function hasn't been loaded yet
|
|
let out = "";
|
|
for(let i = 0; i < topics.length;i++) out += Template_topics_topic(topics[i]);
|
|
$(".topic_list").html(out);
|
|
|
|
let obj = {Title: document.title, Url: url};
|
|
history.pushState(obj, obj.Title, obj.Url);
|
|
rebuildPaginator(data.LastPage)
|
|
rebindPaginator();
|
|
|
|
$(".filter_item").each(function(){
|
|
this.classList.remove("filter_selected");
|
|
});
|
|
that.classList.add("filter_selected");
|
|
$(".topic_list_title h1").text(that.innerText);
|
|
}).catch((ex) => {
|
|
console.log("Unable to get script '"+url+"&js=1"+"'");
|
|
console.log("ex: ", ex);
|
|
console.trace();
|
|
});
|
|
});
|
|
|
|
if (document.getElementById("topicsItemList")!==null) rebindPaginator();
|
|
if (document.getElementById("forumItemList")!==null) rebindPaginator();
|
|
|
|
$(".open_edit").click((event) => {
|
|
event.preventDefault();
|
|
$('.hide_on_edit').addClass("edit_opened");
|
|
$('.show_on_edit').addClass("edit_opened");
|
|
runHook("open_edit");
|
|
});
|
|
|
|
$(".topic_item .submit_edit").click(function(event){
|
|
event.preventDefault();
|
|
let topicNameInput = $(".topic_name_input").val();
|
|
$(".topic_name").html(topicNameInput);
|
|
$(".topic_name").attr(topicNameInput);
|
|
let topicContentInput = $('.topic_content_input').val();
|
|
$(".topic_content").html(quickParse(topicContentInput));
|
|
let topicStatusInput = $('.topic_status_input').val();
|
|
$(".topic_status_e:not(.open_edit)").html(topicStatusInput);
|
|
|
|
$('.hide_on_edit').removeClass("edit_opened");
|
|
$('.show_on_edit').removeClass("edit_opened");
|
|
runHook("close_edit");
|
|
|
|
$.ajax({
|
|
url: this.form.getAttribute("action"),
|
|
type: "POST",
|
|
dataType: "json",
|
|
data: {
|
|
topic_name: topicNameInput,
|
|
topic_status: topicStatusInput,
|
|
topic_content: topicContentInput,
|
|
js: 1
|
|
},
|
|
error: ajaxError,
|
|
success: (data,status,xhr) => {
|
|
if("Content" in data) $(".topic_content").html(data["Content"]);
|
|
}
|
|
});
|
|
});
|
|
|
|
$(".delete_item").click(function(event) {
|
|
postLink(event);
|
|
$(this).closest('.deletable_block').remove();
|
|
});
|
|
|
|
// Miniature implementation of the parser to avoid sending as much data back and forth
|
|
function quickParse(msg) {
|
|
msg = msg.replace(":)", "😀")
|
|
msg = msg.replace(":(", "😞")
|
|
msg = msg.replace(":D", "😃")
|
|
msg = msg.replace(":P", "😛")
|
|
msg = msg.replace(":O", "😲")
|
|
msg = msg.replace(":p", "😛")
|
|
msg = msg.replace(":o", "😲")
|
|
msg = msg.replace(";)", "😉")
|
|
msg = msg.replace("\n","<br>")
|
|
return msg
|
|
}
|
|
|
|
$(".edit_item").click(function(event){
|
|
event.preventDefault();
|
|
let blockParent = this.closest('.editable_parent');
|
|
$(blockParent).find('.hide_on_edit').addClass("edit_opened");
|
|
$(blockParent).find('.show_on_edit').addClass("edit_opened");
|
|
let srcNode = blockParent.querySelector(".edit_source");
|
|
let block = blockParent.querySelector('.editable_block');
|
|
block.classList.add("in_edit");
|
|
let source = "";
|
|
if(srcNode!=null) source = srcNode.innerText;
|
|
else source = block.innerHTML;
|
|
// TODO: Add a client template for this
|
|
block.innerHTML = "<textarea style='width: 99%;' name='edit_item'>" + source + "</textarea><br><a href='" + this.closest('a').getAttribute("href") + "'><button class='submit_edit' type='submit'>Update</button></a>";
|
|
|
|
$(".submit_edit").click(function(event){
|
|
event.preventDefault();
|
|
$(blockParent).find('.hide_on_edit').removeClass("edit_opened");
|
|
$(blockParent).find('.show_on_edit').removeClass("edit_opened");
|
|
block.classList.remove("in_edit");
|
|
let newContent = block.querySelector('textarea').value;
|
|
block.innerHTML = quickParse(newContent);
|
|
if(srcNode!=null) srcNode.innerText = newContent;
|
|
|
|
let formAction = this.closest('a').getAttribute("href");
|
|
// TODO: Bounce the parsed post back and set innerHTML to it?
|
|
$.ajax({
|
|
url: formAction,
|
|
type: "POST",
|
|
dataType: "json",
|
|
data: { js: "1", edit_item: newContent },
|
|
error: ajaxError,
|
|
success: (data,status,xhr) => {
|
|
if("Content" in data) block.innerHTML = data["Content"];
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
$(".edit_field").click(function(event) {
|
|
event.preventDefault();
|
|
let blockParent = $(this).closest('.editable_parent');
|
|
let block = blockParent.find('.editable_block').eq(0);
|
|
block.html("<input name='edit_field' value='" + block.text() + "' type='text'/><a href='" + $(this).closest('a').attr("href") + "'><button class='submit_edit' type='submit'>Update</button></a>");
|
|
|
|
$(".submit_edit").click(function(event) {
|
|
event.preventDefault();
|
|
let blockParent = $(this).closest('.editable_parent');
|
|
let block = blockParent.find('.editable_block').eq(0);
|
|
let newContent = block.find('input').eq(0).val();
|
|
block.html(newContent);
|
|
|
|
let formAction = $(this).closest('a').attr("href");
|
|
$.ajax({
|
|
url: formAction + "?session=" + me.User.Session,
|
|
type: "POST",
|
|
dataType: "json",
|
|
error: ajaxError,
|
|
data: { isJs: "1", edit_item: newContent }
|
|
});
|
|
});
|
|
});
|
|
|
|
$(".edit_fields").click(function(event)
|
|
{
|
|
event.preventDefault();
|
|
if($(this).find("input").length !== 0) return;
|
|
//console.log("clicked .edit_fields");
|
|
var blockParent = $(this).closest('.editable_parent');
|
|
blockParent.find('.hide_on_edit').addClass("edit_opened");
|
|
blockParent.find('.show_on_edit').addClass("edit_opened");
|
|
blockParent.find('.editable_block').show();
|
|
blockParent.find('.editable_block').each(function(){
|
|
var fieldName = this.getAttribute("data-field");
|
|
var fieldType = this.getAttribute("data-type");
|
|
if(fieldType=="list") {
|
|
var fieldValue = this.getAttribute("data-value");
|
|
if(fieldName in formVars) var it = formVars[fieldName];
|
|
else var it = ['No','Yes'];
|
|
var itLen = it.length;
|
|
var out = "";
|
|
for (var i = 0; i < itLen; i++) {
|
|
var sel = "";
|
|
if(fieldValue == i || fieldValue == it[i]) {
|
|
sel = "selected ";
|
|
this.classList.remove(fieldName + '_' + it[i]);
|
|
this.innerHTML = "";
|
|
}
|
|
out += "<option "+sel+"value='"+i+"'>"+it[i]+"</option>";
|
|
}
|
|
this.innerHTML = "<select data-field='"+fieldName+"' name='"+fieldName+"'>"+out+"</select>";
|
|
}
|
|
else if(fieldType=="hidden") {}
|
|
else this.innerHTML = "<input name='"+fieldName+"' value='"+this.textContent+"' type='text'/>";
|
|
});
|
|
|
|
// Remove any handlers already attached to the submitter
|
|
$(".submit_edit").unbind("click");
|
|
|
|
$(".submit_edit").click(function(event)
|
|
{
|
|
event.preventDefault();
|
|
var outData = {isJs: "1"}
|
|
var blockParent = $(this).closest('.editable_parent');
|
|
blockParent.find('.editable_block').each(function() {
|
|
var fieldName = this.getAttribute("data-field");
|
|
var fieldType = this.getAttribute("data-type");
|
|
if(fieldType=="list") {
|
|
var newContent = $(this).find('select :selected').text();
|
|
this.classList.add(fieldName + '_' + newContent);
|
|
this.innerHTML = "";
|
|
} else if(fieldType=="hidden") {
|
|
var newContent = $(this).val();
|
|
} else {
|
|
var newContent = $(this).find('input').eq(0).val();
|
|
this.innerHTML = newContent;
|
|
}
|
|
this.setAttribute("data-value",newContent);
|
|
outData[fieldName] = newContent;
|
|
});
|
|
|
|
var formAction = $(this).closest('a').attr("href");
|
|
//console.log("Form Action:", formAction);
|
|
//console.log(outData);
|
|
$.ajax({ url: formAction + "?session=" + me.User.Session, type:"POST", dataType:"json", data: outData, error: ajaxError });
|
|
blockParent.find('.hide_on_edit').removeClass("edit_opened");
|
|
blockParent.find('.show_on_edit').removeClass("edit_opened");
|
|
});
|
|
});
|
|
|
|
// This one's for Tempra Conflux
|
|
// TODO: We might want to use pure JS here
|
|
$(".ip_item").each(function(){
|
|
var ip = this.textContent;
|
|
if(ip.length > 10){
|
|
this.innerHTML = "Show IP";
|
|
this.onclick = function(event) {
|
|
event.preventDefault();
|
|
this.textContent = ip;
|
|
};
|
|
}
|
|
});
|
|
|
|
$(this).click(() => {
|
|
$(".selectedAlert").removeClass("selectedAlert");
|
|
$("#back").removeClass("alertActive");
|
|
$(".link_select").removeClass("link_opened");
|
|
});
|
|
|
|
$(".alert_bell").click(function(){
|
|
var menuAlerts = $(this).parent();
|
|
if(menuAlerts.hasClass("selectedAlert")) {
|
|
event.stopPropagation();
|
|
menuAlerts.removeClass("selectedAlert");
|
|
$("#back").removeClass("alertActive");
|
|
}
|
|
});
|
|
$(".menu_alerts").click(function(event) {
|
|
event.stopPropagation();
|
|
if($(this).hasClass("selectedAlert")) return;
|
|
if(!conn) loadAlerts(this);
|
|
this.className += " selectedAlert";
|
|
document.getElementById("back").className += " alertActive"
|
|
});
|
|
$(".link_select").click(event => event.stopPropagation());
|
|
|
|
$("input,textarea,select,option").keyup(event => event.stopPropagation())
|
|
|
|
$(".create_topic_link").click((event) => {
|
|
event.preventDefault();
|
|
$(".topic_create_form").show();
|
|
});
|
|
$(".topic_create_form .close_form").click((event) => {
|
|
event.preventDefault();
|
|
$(".topic_create_form").hide();
|
|
});
|
|
|
|
function uploadFileHandler(fileList,maxFiles = 5, step1 = () => {}, step2 = () => {}) {
|
|
let files = [];
|
|
for(var i = 0; i < fileList.length && i < 5; i++) {
|
|
files[i] = fileList[i];
|
|
}
|
|
|
|
let totalSize = 0;
|
|
for(let i = 0; i < files.length; i++) {
|
|
console.log("files[" + i + "]",files[i]);
|
|
totalSize += files[i]["size"];
|
|
}
|
|
if(totalSize > me.Site.MaxRequestSize) {
|
|
throw("You can't upload this much at once, max: " + me.Site.MaxRequestSize);
|
|
}
|
|
|
|
for(let i = 0; i < files.length; i++) {
|
|
let reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
let filename = files[i]["name"];
|
|
step1(e,filename)
|
|
|
|
let reader = new FileReader();
|
|
reader.onload = (e2) => {
|
|
crypto.subtle.digest('SHA-256',e2.target.result)
|
|
.then((hash) => {
|
|
const hashArray = Array.from(new Uint8Array(hash))
|
|
return hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('')
|
|
}).then(hash => step2(e,hash,filename));
|
|
}
|
|
reader.readAsArrayBuffer(files[i]);
|
|
}
|
|
reader.readAsDataURL(files[i]);
|
|
}
|
|
}
|
|
|
|
// TODO: Surely, there's a prettier and more elegant way of doing this?
|
|
function getExt(filename) {
|
|
if(!filename.indexOf('.' > -1)) {
|
|
throw("This file doesn't have an extension");
|
|
}
|
|
return filename.split('.').pop();
|
|
}
|
|
|
|
// Attachment Manager
|
|
function uploadAttachHandler2() {
|
|
let fileDock = this.closest(".attach_edit_bay");
|
|
try {
|
|
uploadFileHandler(this.files, 5, () => {},
|
|
(e, hash, filename) => {
|
|
console.log("hash",hash);
|
|
|
|
let formData = new FormData();
|
|
formData.append("session",me.User.Session);
|
|
for(let i = 0; i < this.files.length; i++) {
|
|
formData.append("upload_files",this.files[i]);
|
|
}
|
|
|
|
let req = new XMLHttpRequest();
|
|
req.addEventListener("load", () => {
|
|
let data = JSON.parse(req.responseText);
|
|
let fileItem = document.createElement("div");
|
|
let ext = getExt(filename);
|
|
// TODO: Check if this is actually an image, maybe push ImageFileExts to the client from the server in some sort of gen.js?
|
|
// TODO: Use client templates here
|
|
fileItem.className = "attach_item attach_image_holder";
|
|
fileItem.innerHTML = "<img src='"+e.target.result+"' height=24 width=24 /><span class='attach_item_path' aid='"+data[hash+"."+ext]+"' fullpath='//" + window.location.host + "/attachs/" + hash + "." + ext+"'>"+hash+"."+ext+"</span><button class='attach_item_select'>Select</button><button class='attach_item_copy'>Copy</button>";
|
|
fileDock.insertBefore(fileItem,fileDock.querySelector(".attach_item_buttons"));
|
|
|
|
$(".attach_item_select").unbind("click");
|
|
$(".attach_item_copy").unbind("click");
|
|
bindAttachItems()
|
|
});
|
|
req.open("POST","//"+window.location.host+"/"+fileDock.getAttribute("type")+"/attach/add/submit/"+fileDock.getAttribute("id"));
|
|
req.send(formData);
|
|
});
|
|
} catch(e) {
|
|
// TODO: Use a notice instead
|
|
alert(e);
|
|
}
|
|
}
|
|
|
|
// Quick Topic / Quick Reply
|
|
function uploadAttachHandler() {
|
|
try {
|
|
uploadFileHandler(this.files,5,(e,filename) => {
|
|
// TODO: Use client templates here
|
|
let fileDock = document.getElementById("upload_file_dock");
|
|
let fileItem = document.createElement("label");
|
|
console.log("fileItem",fileItem);
|
|
|
|
let ext = getExt(filename)
|
|
fileItem.innerText = "." + ext;
|
|
fileItem.className = "formbutton uploadItem";
|
|
// TODO: Check if this is actually an image
|
|
fileItem.style.backgroundImage = "url("+e.target.result+")";
|
|
|
|
fileDock.appendChild(fileItem);
|
|
},(e,hash, filename) => {
|
|
console.log("hash",hash);
|
|
let ext = getExt(filename)
|
|
let content = document.getElementById("input_content")
|
|
console.log("content.value", content.value);
|
|
|
|
let attachItem;
|
|
if(content.value == "") attachItem = "//" + window.location.host + "/attachs/" + hash + "." + ext;
|
|
else attachItem = "\r\n//" + window.location.host + "/attachs/" + hash + "." + ext;
|
|
content.value = content.value + attachItem;
|
|
console.log("content.value", content.value);
|
|
|
|
// For custom / third party text editors
|
|
attachItemCallback(attachItem);
|
|
});
|
|
} catch(e) {
|
|
// TODO: Use a notice instead
|
|
alert(e);
|
|
}
|
|
}
|
|
|
|
let uploadFiles = document.getElementById("upload_files");
|
|
if(uploadFiles != null) {
|
|
uploadFiles.addEventListener("change", uploadAttachHandler, false);
|
|
}
|
|
let uploadFilesOp = document.getElementById("upload_files_op");
|
|
if(uploadFilesOp != null) {
|
|
uploadFilesOp.addEventListener("change", uploadAttachHandler2, false);
|
|
}
|
|
let uploadFilesPost = document.getElementsByClassName("upload_files_post");
|
|
if(uploadFilesPost != null) {
|
|
for(let i = 0; i < uploadFilesPost.length; i++) {
|
|
uploadFilesPost[i].addEventListener("change", uploadAttachHandler2, false);
|
|
}
|
|
}
|
|
|
|
function copyToClipboard(str) {
|
|
const el = document.createElement('textarea');
|
|
el.value = str;
|
|
el.setAttribute('readonly', '');
|
|
el.style.position = 'absolute';
|
|
el.style.left = '-9999px';
|
|
document.body.appendChild(el);
|
|
el.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(el);
|
|
}
|
|
|
|
function bindAttachItems() {
|
|
$(".attach_item_select").click(function(){
|
|
let hold = $(this).closest(".attach_item");
|
|
if(hold.hasClass("attach_item_selected")) {
|
|
hold.removeClass("attach_item_selected");
|
|
} else {
|
|
hold.addClass("attach_item_selected");
|
|
}
|
|
});
|
|
$(".attach_item_copy").click(function(){
|
|
let hold = $(this).closest(".attach_item");
|
|
let pathNode = hold.find(".attach_item_path");
|
|
copyToClipboard(pathNode.attr("fullPath"));
|
|
});
|
|
}
|
|
bindAttachItems();
|
|
|
|
$(".attach_item_delete").click(function(){
|
|
let formData = new URLSearchParams();
|
|
formData.append("session",me.User.Session);
|
|
|
|
let aidList = "";
|
|
let elems = document.getElementsByClassName("attach_item_selected");
|
|
if(elems == null) return;
|
|
|
|
for(let i = 0; i < elems.length; i++) {
|
|
let pathNode = elems[i].querySelector(".attach_item_path");
|
|
console.log("pathNode",pathNode);
|
|
aidList += pathNode.getAttribute("aid") + ",";
|
|
elems[i].remove();
|
|
}
|
|
if(aidList.length > 0) aidList = aidList.slice(0, -1);
|
|
console.log("aidList",aidList)
|
|
formData.append("aids",aidList);
|
|
|
|
let req = new XMLHttpRequest();
|
|
let fileDock = this.closest(".attach_edit_bay");
|
|
req.open("POST","//"+window.location.host+"/"+fileDock.getAttribute("type")+"/attach/remove/submit/"+fileDock.getAttribute("id"),true);
|
|
req.send(formData);
|
|
});
|
|
|
|
$(".moderate_link").click((event) => {
|
|
event.preventDefault();
|
|
$(".pre_opt").removeClass("auto_hide");
|
|
$(".moderate_link").addClass("moderate_open");
|
|
$(".topic_row").each(function(){
|
|
$(this).click(function(){
|
|
selectedTopics.push(parseInt($(this).attr("data-tid"),10));
|
|
if(selectedTopics.length==1) {
|
|
var msg = "What do you want to do with this topic?";
|
|
} else {
|
|
var msg = "What do you want to do with these "+selectedTopics.length+" topics?";
|
|
}
|
|
$(".mod_floater_head span").html(msg);
|
|
$(this).addClass("topic_selected");
|
|
$(".mod_floater").removeClass("auto_hide");
|
|
});
|
|
});
|
|
|
|
let bulkActionSender = function(action, selectedTopics, fragBit) {
|
|
let url = "/topic/"+action+"/submit/"+fragBit+"?session=" + me.User.Session;
|
|
$.ajax({
|
|
url: url,
|
|
type: "POST",
|
|
data: JSON.stringify(selectedTopics),
|
|
contentType: "application/json",
|
|
error: ajaxError,
|
|
success: () => {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
};
|
|
$(".mod_floater_submit").click(function(event){
|
|
event.preventDefault();
|
|
let selectNode = this.form.querySelector(".mod_floater_options");
|
|
let optionNode = selectNode.options[selectNode.selectedIndex];
|
|
let action = optionNode.getAttribute("val");
|
|
|
|
// Handle these specially
|
|
switch(action) {
|
|
case "move":
|
|
console.log("move action");
|
|
let modTopicMover = $("#mod_topic_mover");
|
|
$("#mod_topic_mover").removeClass("auto_hide");
|
|
$("#mod_topic_mover .pane_row").click(function(){
|
|
modTopicMover.find(".pane_row").removeClass("pane_selected");
|
|
let fid = this.getAttribute("data-fid");
|
|
if (fid == null) {
|
|
return;
|
|
}
|
|
this.classList.add("pane_selected");
|
|
console.log("fid: " + fid);
|
|
forumToMoveTo = fid;
|
|
|
|
$("#mover_submit").click(function(event){
|
|
event.preventDefault();
|
|
bulkActionSender("move",selectedTopics,forumToMoveTo);
|
|
});
|
|
});
|
|
return;
|
|
}
|
|
|
|
bulkActionSender(action,selectedTopics,"");
|
|
});
|
|
});
|
|
|
|
$("#themeSelectorSelect").change(function(){
|
|
console.log("Changing the theme to " + this.options[this.selectedIndex].getAttribute("val"));
|
|
$.ajax({
|
|
url: this.form.getAttribute("action") + "?session=" + me.User.Session,
|
|
type: "POST",
|
|
dataType: "json",
|
|
data: { "newTheme": this.options[this.selectedIndex].getAttribute("val"), isJs: "1" },
|
|
error: ajaxError,
|
|
success: function (data, status, xhr) {
|
|
console.log("Theme successfully switched");
|
|
console.log("data", data);
|
|
console.log("status", status);
|
|
console.log("xhr", xhr);
|
|
window.location.reload();
|
|
}
|
|
});
|
|
});
|
|
|
|
// The time range selector for the time graphs in the Control Panel
|
|
$(".timeRangeSelector").change(function(){
|
|
console.log("Changed the time range to " + this.options[this.selectedIndex].getAttribute("val"));
|
|
window.location = this.form.getAttribute("action")+"?timeRange=" + this.options[this.selectedIndex].getAttribute("val"); // Do a redirect as a form submission refuses to work properly
|
|
});
|
|
|
|
$(".unix_to_24_hour_time").each(function(){
|
|
let unixTime = this.innerText;
|
|
let date = new Date(unixTime*1000);
|
|
console.log("date: ", date);
|
|
let minutes = "0" + date.getMinutes();
|
|
let formattedTime = date.getHours() + ":" + minutes.substr(-2);
|
|
console.log("formattedTime:", formattedTime);
|
|
this.innerText = formattedTime;
|
|
});
|
|
|
|
this.onkeyup = function(event) {
|
|
if(event.which == 37) this.querySelectorAll("#prevFloat a")[0].click();
|
|
if(event.which == 39) this.querySelectorAll("#nextFloat a")[0].click();
|
|
};
|
|
|
|
function addPollInput() {
|
|
console.log("clicked on pollinputinput");
|
|
let dataPollInput = $(this).parent().attr("data-pollinput");
|
|
console.log("dataPollInput: ", dataPollInput);
|
|
if(dataPollInput == undefined) return;
|
|
if(dataPollInput != (pollInputIndex-1)) return;
|
|
|
|
$(".poll_content_row .formitem").append("<div class='pollinput' data-pollinput='"+pollInputIndex+"'><input type='checkbox' disabled /><label class='pollinputlabel'></label><input form='quick_post_form' name='pollinputitem["+pollInputIndex+"]' class='pollinputinput' type='text' placeholder='Add new poll option' /></div>");
|
|
pollInputIndex++;
|
|
console.log("new pollInputIndex: ", pollInputIndex);
|
|
$(".pollinputinput").off("click");
|
|
$(".pollinputinput").click(addPollInput);
|
|
}
|
|
|
|
var pollInputIndex = 1;
|
|
$("#add_poll_button").click((event) => {
|
|
event.preventDefault();
|
|
$(".poll_content_row").removeClass("auto_hide");
|
|
$("#has_poll_input").val("1");
|
|
$(".pollinputinput").click(addPollInput);
|
|
});
|
|
|
|
//id="poll_results_{{.Poll.ID}}" class="poll_results auto_hide"
|
|
$(".poll_results_button").click(function(){
|
|
let pollID = $(this).attr("data-poll-id");
|
|
$("#poll_results_" + pollID + " .user_content").html("<div id='poll_results_chart_"+pollID+"'></div>");
|
|
$("#poll_results_" + pollID).removeClass("auto_hide");
|
|
fetch("/poll/results/" + pollID, {
|
|
credentials: 'same-origin'
|
|
}).then((response) => response.text()).catch((error) => console.error("Error:",error)).then((rawData) => {
|
|
// TODO: Make sure the received data is actually a list of integers
|
|
let data = JSON.parse(rawData);
|
|
console.log("rawData: ", rawData);
|
|
console.log("series: ", data);
|
|
Chartist.Pie('#poll_results_chart_' + pollID, {
|
|
series: data,
|
|
}, {
|
|
height: '120px',
|
|
});
|
|
})
|
|
});
|
|
|
|
runInitHook("end_init");
|
|
};
|