1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
var ThreadSettingsForm = FormView.extend({
el: "#thread_settings",
events: {
"click": "hide",
"click .inner": "stopPropagation",
"click .thread_delete": "deleteThread",
"click .close_link": "hide",
"change [name=color]": "changeColor",
},
action: "",
method: 'put',
initialize: function(){
this.__super__.initialize.call(this)
this.template = this.$(".template").html()
},
populate: function(){
// this.action = "/api/thread/" + data.id
$("body").removeClass("loading")
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.$(".close_link").attr("href", "/details/" + thread.id)
this.$(".metadata").html(metadata(thread))
this.$("[name=title]").val(sanitize(thread.title))
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.color || keyword.color)
$.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(thread.keyword)
}.bind(this))
},
validate: function(){
var errors = []
var title = $("[name=title]").val()
if (! title || ! title.length) {
errors.push("Please enter a title.")
}
return errors.length ? errors : null
},
serialize: function(){
},
success: function(data){
window.location.href = "/details/" + data.comment.thread
},
visible: false,
show: function(){
this.visible = 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
this.$el.removeClass('visible')
app.router.pushState("/details/" + this.options.parent.data.thread.id)
},
toggle: function(){
if (this.visible) this.hide()
else this.show()
},
changeColor: function(){
var color_name = this.$("[name=color]").val()
set_background_color(color_name)
},
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 + ' "' + sanitize(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",
url: "/api/thread/" + id,
headers: { "csrf-token": $("[name=_csrf]").attr("value") },
data: { csrf: csrf() },
success: function(){
window.location.href = "/"
},
})
}
},
})
|
