diff options
Diffstat (limited to 'public/assets')
| -rw-r--r-- | public/assets/js/lib/views/details/settings.js | 501 |
1 files changed, 270 insertions, 231 deletions
diff --git a/public/assets/js/lib/views/details/settings.js b/public/assets/js/lib/views/details/settings.js index c2ff078..fd23c46 100644 --- a/public/assets/js/lib/views/details/settings.js +++ b/public/assets/js/lib/views/details/settings.js @@ -1,9 +1,8 @@ var ThreadSettingsForm = FormView.extend({ - el: "#thread_settings", events: { - "click": "hide", + // click: "hide", "click .inner": "stopPropagation", "click .thread_delete": "deleteThread", "click .file_delete": "deleteFile", @@ -20,152 +19,174 @@ var ThreadSettingsForm = FormView.extend({ }, action: "", - method: 'put', + method: "put", - initialize: function(){ - this.__super__.initialize.call(this) - this.template = this.$(".template").html() - this.allowedTemplate = this.$(".allowedTemplate").html() - this.filesTemplate = this.$(".settingsFilesTemplate").html() + initialize: function () { + this.__super__.initialize.call(this); + this.template = this.$(".template").html(); + this.allowedTemplate = this.$(".allowedTemplate").html(); + this.filesTemplate = this.$(".settingsFilesTemplate").html(); }, - populate: function(){ - var data = this.options.parent.data - var keywords = data.keywords - var keyword = data.keyword - var thread = data.thread - var comments = data.comments - var files = data.files - var settings = thread.settings - var display = thread.display + populate: function () { + var data = this.options.parent.data; + var keywords = data.keywords; + var keyword = data.keyword; + var thread = data.thread; + var comments = data.comments; + var files = data.files; + var settings = thread.settings; + var display = thread.display; - this.thread = thread - this.files = data.files - this.action = "/api/thread/" + thread.id - this.allowed = (this.thread.allowed || "").split(" ").map(s => s.trim()).filter(s => !! s) + this.thread = thread; + this.files = data.files; + this.action = "/api/thread/" + thread.id; + this.allowed = (this.thread.allowed || "") + .split(" ") + .map((s) => s.trim()) + .filter((s) => !!s); - this.$(".close_link").attr("href", "/details/" + thread.id) - this.$(".metadata").html(metadata(thread)) - this.$("[name=title]").val(thread.title) + this.$(".close_link").attr("href", "/details/" + thread.id); + this.$(".metadata").html(metadata(thread)); + this.$("[name=title]").val(thread.title); - this.$("[name=hootbox]").prop("checked", !!thread.settings.hootbox) - this.$("[name=shorturls]").prop("checked", !!thread.settings.shorturls) - this.$("[name=noupload]").prop("checked", !!thread.settings.noupload) - this.$("[name=privacy]").prop("checked", !!thread.privacy) + this.$("[name=hootbox]").prop("checked", !!thread.settings.hootbox); + this.$("[name=shorturls]").prop("checked", !!thread.settings.shorturls); + this.$("[name=noupload]").prop("checked", !!thread.settings.noupload); + this.$("[name=privacy]").prop("checked", !!thread.privacy); - var $color = this.$('[name=color]') + var $color = this.$("[name=color]"); Object.keys(COLORS).forEach((color) => { - var option = document.createElement('option') - option.value = color - option.innerHTML = color - $color.append(option) - }) - $color.val(thread && thread.color? thread.color: keyword? keyword.color: "") + var option = document.createElement("option"); + option.value = color; + option.innerHTML = color; + $color.append(option); + }); + $color.val( + thread && thread.color ? thread.color : keyword ? keyword.color : "", + ); - var $sort = this.$('[name=sort]') + var $sort = this.$("[name=sort]"); FILE_SORTS.forEach((sort) => { - var option = document.createElement('option') - option.value = sort.key - option.innerHTML = sort.label - $sort.append(option) - }) - $sort.val(thread.settings.sort || "name_asc") + var option = document.createElement("option"); + option.value = sort.key; + option.innerHTML = sort.label; + $sort.append(option); + }); + $sort.val(thread.settings.sort || "name_asc"); - this.toggleAllowed() - this.fetchKeywords() + this.toggleAllowed(); + this.fetchKeywords(); - var $files = this.$(".files") - $files.empty() - files.sort((a,b) => cmp(a.filename, b.filename)) - .forEach(file => { - var size = hush_size(file.size) - var datetime = verbose_date(file.date, true) - var date_class = carbon_date(file.date) - var link = make_link(file) - var t = this.filesTemplate.replace(/{{username}}/g, file.username) - .replace(/{{link}}/g, link) - .replace(/{{filename}}/g, file.filename) - .replace(/{{date_class}}/g, date_class) - .replace(/{{date}}/g, datetime[0]) - .replace(/{{time}}/g, datetime[1]) - .replace(/{{size_class}}/g, size[0]) - .replace(/{{size}}/g, size[1]) - .replace(/{{id}}/g, file.id) - var $t = $(t) - $files.append($t) - }) + var $files = this.$(".files"); + $files.empty(); + files + .sort((a, b) => cmp(a.filename, b.filename)) + .forEach((file) => { + var size = hush_size(file.size); + var datetime = verbose_date(file.date, true); + var date_class = carbon_date(file.date); + var link = make_link(file); + var t = this.filesTemplate + .replace(/{{username}}/g, file.username) + .replace(/{{link}}/g, link) + .replace(/{{filename}}/g, file.filename) + .replace(/{{date_class}}/g, date_class) + .replace(/{{date}}/g, datetime[0]) + .replace(/{{time}}/g, datetime[1]) + .replace(/{{size_class}}/g, size[0]) + .replace(/{{size}}/g, size[1]) + .replace(/{{id}}/g, file.id); + var $t = $(t); + $files.append($t); + }); - $("body").removeClass("loading") + $("body").removeClass("loading"); }, - fetchKeywords: function(thread){ - $.get('/api/keywords', function(data){ - var $keyword = this.$('[name=keyword]') - data.keywords - .map( (a) => a.keyword) - .sort( (a,b) => a < b ? -1 : a === b ? 0 : 1 ) - .forEach((keyword) => { - var option = document.createElement('option') - option.value = keyword - option.innerHTML = keyword - $keyword.append(option) - }) - $keyword.val(this.thread.keyword) - }.bind(this)) + fetchKeywords: function (thread) { + $.get( + "/api/keywords", + function (data) { + var $keyword = this.$("[name=keyword]"); + data.keywords + .map((a) => a.keyword) + .sort((a, b) => (a < b ? -1 : a === b ? 0 : 1)) + .forEach((keyword) => { + var option = document.createElement("option"); + option.value = keyword; + option.innerHTML = keyword; + $keyword.append(option); + }); + $keyword.val(this.thread.keyword); + }.bind(this), + ); }, - loadThreads: function(threads){ + loadThreads: function (threads) { // update the dropdown list of threads - var $thread_select = this.$('[name=thread]') + var $thread_select = this.$("[name=thread]"); if (!threads || !threads.length) { - $thread_select.parent().hide() - return + $thread_select.parent().hide(); + return; } - $thread_select.parent().show() + $thread_select.parent().show(); threads - .map( (a) => [a.title.toLowerCase(), a]) - .sort( (a,b) => a[0].localeCompare(b[0]) ) - .forEach((pair) => { - const thread = pair[1] - var option = document.createElement('option') - option.value = thread.id - // console.log(thread, get_revision(thread)) - option.innerHTML = '[' + thread.id + get_revision(thread) + '] ' + sanitize(thread.title) - $thread_select.append(option) - }) + .map((a) => [a.title.toLowerCase(), a]) + .sort((a, b) => a[0].localeCompare(b[0])) + .forEach((pair) => { + const thread = pair[1]; + var option = document.createElement("option"); + option.value = thread.id; + // console.log(thread, get_revision(thread)) + option.innerHTML = + "[" + + thread.id + + get_revision(thread) + + "] " + + sanitize(thread.title); + $thread_select.append(option); + }); // console.log(threads) }, - toggleAllowed: function(e){ - var checked = this.$('[name=privacy]').prop('checked') - this.$(".allowed_field_container").toggle(checked) - this.$(".allowed_names").toggle(checked) - if (! checked) return - this.$("[name=allowed_field]").focus() - this.displayAllowed() + toggleAllowed: function (e) { + var checked = this.$("[name=privacy]").prop("checked"); + this.$(".allowed_field_container").toggle(checked); + this.$(".allowed_names").toggle(checked); + if (!checked) return; + this.$("[name=allowed_field]").focus(); + this.displayAllowed(); }, - displayAllowed: function(e){ - var $allowedNames = this.$(".allowed_names").empty() - this.allowed.forEach(username => { - var t = this.allowedTemplate.replace(/{{username}}/g, username) - $allowedNames.append(t) - }) + displayAllowed: function (e) { + var $allowedNames = this.$(".allowed_names").empty(); + this.allowed.forEach((username) => { + var t = this.allowedTemplate.replace(/{{username}}/g, username); + $allowedNames.append(t); + }); }, - keydownAllowed: function(e){ - if (e.keyCode === 13) { // enter - e.preventDefault() - e.stopPropagation() - this.updateAllowed() + keydownAllowed: function (e) { + if (e.keyCode === 13) { + // enter + e.preventDefault(); + e.stopPropagation(); + this.updateAllowed(); } }, - updateAllowed: function(){ - var usernames = this.$('[name=allowed_field]').val().replace(/,/g, ' ').split(' ').map(s => s.trim()).filter(s => !! s) - this.$('[name=allowed_field]').val('') - usernames = usernames.filter( (name) => this.allowed.indexOf(name) === -1 ) - .map( (name) => sanitizeHTML(name) ) + updateAllowed: function () { + var usernames = this.$("[name=allowed_field]") + .val() + .replace(/,/g, " ") + .split(" ") + .map((s) => s.trim()) + .filter((s) => !!s); + this.$("[name=allowed_field]").val(""); + usernames = usernames + .filter((name) => this.allowed.indexOf(name) === -1) + .map((name) => sanitizeHTML(name)); $.ajax({ method: "PUT", url: "/api/checkUsernames", @@ -173,31 +194,33 @@ var ThreadSettingsForm = FormView.extend({ data: JSON.stringify({ csrf: csrf(), usernames: usernames }), contentType: "application/json", dataType: "json", - success: function(data){ - if (! data.usernames || ! data.usernames.length) return - this.allowed = this.allowed.concat(data.usernames) - this.displayAllowed() + success: function (data) { + if (!data.usernames || !data.usernames.length) return; + this.allowed = this.allowed.concat(data.usernames); + this.displayAllowed(); }.bind(this), - }) + }); }, - removeAllowed: function(){ - this.allowed = this.$("#allowed_names input[type=checkbox]:checked").map(function(){ - return $(this).val() - }) - this.displayAllowed() + removeAllowed: function () { + this.allowed = this.$("#allowed_names input[type=checkbox]:checked").map( + function () { + return $(this).val(); + }, + ); + this.displayAllowed(); }, - validate: function(){ - var errors = [] - var title = $("[name=title]").val() - if (! title || ! title.length) { - errors.push("Please enter a title.") + validate: function () { + var errors = []; + var title = $("[name=title]").val(); + if (!title || !title.length) { + errors.push("Please enter a title."); } - return errors.length ? errors : null + return errors.length ? errors : null; }, - serialize: function(){ + serialize: function () { var data = { title: $("[name=title]").val(), keyword: $("[name=keyword]").val(), @@ -208,115 +231,127 @@ var ThreadSettingsForm = FormView.extend({ hootbox: $("[name=hootbox]:checked").val() ? true : false, shorturls: $("[name=shorturls]:checked").val() ? true : false, noupload: $("[name=noupload]:checked").val() ? true : false, - sort: $("[name=sort]").val() + sort: $("[name=sort]").val(), }, - } - return JSON.stringify(data) + }; + return JSON.stringify(data); }, - success: function(data){ - console.log(data) - window.location.href = "/details/" + this.options.parent.data.thread.id + success: function (data) { + console.log(data); + window.location.href = "/details/" + this.options.parent.data.thread.id; }, visible: false, - show: function(){ - this.visible = true - app.typing = true - this.populate() - this.$el.addClass('visible') - app.router.pushState("/details/" + this.options.parent.data.thread.id + "/settings") + show: function () { + this.visible = true; + app.typing = true; + this.populate(); + this.$el.addClass("visible"); + app.router.pushState( + "/details/" + this.options.parent.data.thread.id + "/settings", + ); }, - hide: function(e){ - e && e.preventDefault() - this.visible = false - app.typing = false - this.$el.removeClass('visible') - app.router.pushState("/details/" + this.options.parent.data.thread.id) + hide: function (e) { + e && e.preventDefault(); + this.visible = false; + app.typing = false; + this.$el.removeClass("visible"); + app.router.pushState("/details/" + this.options.parent.data.thread.id); }, - toggle: function(){ - if (this.visible) this.hide() - else this.show() + toggle: function () { + if (this.visible) this.hide(); + else this.show(); }, - changeColor: function(){ - var color_name = this.$("[name=color]").val() - set_background_color(color_name) + changeColor: function () { + var color_name = this.$("[name=color]").val(); + set_background_color(color_name); }, - changeSort: function(){ - var sort_name = this.$("[name=sort]").val() - console.log(">", sort_name) - app.view.files.resort(sort_name) + changeSort: function () { + var sort_name = this.$("[name=sort]").val(); + console.log(">", sort_name); + app.view.files.resort(sort_name); }, - toggleFile: function(e){ + toggleFile: function (e) { // e.preventDefault() - e.stopPropagation() - const $input = $(e.currentTarget) - const $tr = $input.closest('tr.file') - const value = e.currentTarget.checked + e.stopPropagation(); + const $input = $(e.currentTarget); + const $tr = $input.closest("tr.file"); + const value = e.currentTarget.checked; // $(e.currentTarget).prop('checked', value) // console.log('check', $input, value) - this.toggleFileChecked($tr, null, value) + this.toggleFileChecked($tr, null, value); }, - toggleFileRow: function(e){ + toggleFileRow: function (e) { // e.preventDefault() - e.stopPropagation() - const $tr = $(e.currentTarget) - const $input = $tr.find('input[type="checkbox"]') - const value = ! $input.prop('checked') - this.toggleFileChecked($tr, $input, value) + e.stopPropagation(); + const $tr = $(e.currentTarget); + const $input = $tr.find('input[type="checkbox"]'); + const value = !$input.prop("checked"); + this.toggleFileChecked($tr, $input, value); }, - toggleFileChecked: function($tr, $input, value){ - $tr.toggleClass('checked', value) - if ($input) $input.prop('checked', value) + toggleFileChecked: function ($tr, $input, value) { + $tr.toggleClass("checked", value); + if ($input) $input.prop("checked", value); }, - moveFiles: function(){ - var thread_id = this.$("[name=thread]").val() + moveFiles: function () { + var thread_id = this.$("[name=thread]").val(); // if (!thread_id) return alert("Please choose a thread") - var file_ids = toArray(this.el.querySelectorAll("[name=file_id]:checked")).map(input => input.value) - console.log("thread:", thread_id) - console.log("files:", file_ids) - var promises = file_ids.map(file_id => { + var file_ids = toArray( + this.el.querySelectorAll("[name=file_id]:checked"), + ).map((input) => input.value); + console.log("thread:", thread_id); + console.log("files:", file_ids); + var promises = file_ids.map((file_id) => { return new Promise((resolve, reject) => { $.ajax({ method: "GET", - url: '/api/file/' + file_id + '/move/' + thread_id, + url: "/api/file/" + file_id + "/move/" + thread_id, headers: { "csrf-token": $("[name=_csrf]").attr("value") }, dataType: "json", - success: function(data){ - console.log('moved', file_id) - resolve(data) + success: function (data) { + console.log("moved", file_id); + resolve(data); }, - error: function(){ - console.log('error moving', file_id) - reject() - } - }) + error: function () { + console.log("error moving", file_id); + reject(); + }, + }); + }); + }); + Promise.all(promises) + .then(() => { + window.location.href = "/details/" + thread_id; }) - }) - Promise.all(promises).then( () => { - window.location.href = '/details/' + thread_id - }).catch(() =>{ - console.error('whaaaaa') - alert('there was a problem moving the files...') - }) + .catch(() => { + console.error("whaaaaa"); + alert("there was a problem moving the files..."); + }); }, - deleteThread: function(e){ - var data = this.options.parent.data - var id = data.thread.id - var comment_count = (data.comments || []).length - var file_count = (data.files || []).length - var msg = "Are you sure you want to delete this thread?\n\n#" + id + ' "' + sanitizeHTML(data.thread.title) + '"' - msg += " + " + comment_count + " comment" + courtesy_s(comment_count) - if ( file_count) msg += " + " + file_count + " file" + courtesy_s(file_count) - var should_remove = confirm(msg) + deleteThread: function (e) { + var data = this.options.parent.data; + var id = data.thread.id; + var comment_count = (data.comments || []).length; + var file_count = (data.files || []).length; + var msg = + "Are you sure you want to delete this thread?\n\n#" + + id + + ' "' + + sanitizeHTML(data.thread.title) + + '"'; + msg += " + " + comment_count + " comment" + courtesy_s(comment_count); + if (file_count) + msg += " + " + file_count + " file" + courtesy_s(file_count); + var should_remove = confirm(msg); if (should_remove) { $.ajax({ method: "DELETE", @@ -324,25 +359,30 @@ var ThreadSettingsForm = FormView.extend({ headers: { "csrf-token": $("[name=_csrf]").attr("value") }, data: JSON.stringify({ csrf: csrf() }), dataType: "json", - success: function(){ - window.location.href = "/" - } - }) + success: function () { + window.location.href = "/"; + }, + }); } }, - deleteFile: function(e){ - e.preventDefault() - e.stopPropagation() - var $el = $(e.currentTarget) - var $parent = $el.closest('.file') - var file_id = $el.data('id') - if (! file_id) return - var data = this.options.parent.data - var file = data.files.find(f => f.id === file_id) - if (! file) return - var msg = "Are you sure you want to delete this file?\n\n#" + file_id + ' "' + sanitizeHTML(file.filename) + '"' - var should_remove = confirm(msg) + deleteFile: function (e) { + e.preventDefault(); + e.stopPropagation(); + var $el = $(e.currentTarget); + var $parent = $el.closest(".file"); + var file_id = $el.data("id"); + if (!file_id) return; + var data = this.options.parent.data; + var file = data.files.find((f) => f.id === file_id); + if (!file) return; + var msg = + "Are you sure you want to delete this file?\n\n#" + + file_id + + ' "' + + sanitizeHTML(file.filename) + + '"'; + var should_remove = confirm(msg); if (should_remove) { $.ajax({ method: "DELETE", @@ -350,12 +390,11 @@ var ThreadSettingsForm = FormView.extend({ headers: { "csrf-token": $("[name=_csrf]").attr("value") }, data: JSON.stringify({ csrf: csrf() }), dataType: "json", - success: function(data){ - console.log(data) - $parent.remove() - } - }) + success: function (data) { + console.log(data); + $parent.remove(); + }, + }); } }, - -}) +}); |