summaryrefslogtreecommitdiff
path: root/public/assets
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets')
-rw-r--r--public/assets/css/hootstream.css1
-rw-r--r--public/assets/js/lib/views/details/commentform.js1
-rw-r--r--public/assets/js/lib/views/stream/hootstream.js48
-rw-r--r--public/assets/js/util/icons.js10
4 files changed, 45 insertions, 15 deletions
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 7533b2c..08b5cf2 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -62,7 +62,6 @@
transition: opacity 0.1s;
display: flex;
flex-direction: row;
- flex-wrap: ;
align-items: flex-start;
justify-content: center;
}
diff --git a/public/assets/js/lib/views/details/commentform.js b/public/assets/js/lib/views/details/commentform.js
index abda1e4..dc2ac75 100644
--- a/public/assets/js/lib/views/details/commentform.js
+++ b/public/assets/js/lib/views/details/commentform.js
@@ -13,7 +13,6 @@ var CommentForm = FormView.extend({
this.__super__.initialize.call(this, opt);
this.template = this.$(".template").html();
this.$comment = this.$("[name=comment]");
- console.log("initialize");
},
show: function () {
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 311d84e..143dc92 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -71,7 +71,7 @@ var HootStream = View.extend({
const thread = $(event.currentTarget)
.closest(".threadTitle")
.data("thread");
- console.log(action, thread);
+ // console.log(action, thread);
switch (action) {
case "play":
this.onPlay(event, thread);
@@ -126,16 +126,24 @@ var HootStream = View.extend({
},
onShowCommentForm: function (event, thread) {
- if (this.forms[thread]) {
- this.forms[thread].destroy();
- this.forms[thread] = null;
+ const isOpen = !!this.forms[thread];
+ // console.log("comment", thread, !!isOpen);
+ if (isOpen) {
+ this.onHideCommentForm(event, thread);
return;
}
- const $threadTitle = $(event.target).closest(".threadTitle");
+ $(event.target)
+ .closest(".actions")
+ .find(".addIcon")
+ .replaceWith($(ICONS.remove));
+ const $threadTitle = $(event.currentTarget)
+ .closest(".thread")
+ .find(".threadTitle");
const $form = $(this.commentFormTemplate);
$form.data("thread", thread);
$form.insertAfter($threadTitle);
$form.find("textarea").focus();
+ console.log($threadTitle);
const commentForm = new CommentForm({ parent: this });
commentForm.action = `/api/thread/${thread}/comment`;
commentForm.setElement($form);
@@ -147,8 +155,22 @@ var HootStream = View.extend({
this.forms[thread] = commentForm;
},
+ onHideCommentForm: function (event, thread) {
+ this.forms[thread].destroy();
+ this.forms[thread] = null;
+ $(event.target)
+ .closest(".actions")
+ .find(".removeIcon")
+ .replaceWith($(ICONS.add));
+ },
+
onSubmitComment: function (data, form) {
const { thread } = form.opt;
+ form.$el
+ .closest(".thread")
+ .find(".actions")
+ .find(".removeIcon")
+ .replaceWith($(ICONS.add));
form.destroy();
this.forms[thread] = null;
const current = this.state.threadLookup[thread];
@@ -435,19 +457,27 @@ var HootStream = View.extend({
const sortedFiles = this.sortFiles(files, thread.settings?.sort);
const actions = [
- hasAudio && { action: "play", label: "play music", icon: "play" },
- { action: "post", label: "post", icon: "add" },
+ hasAudio && {
+ action: "play",
+ label: "play music",
+ icon: ICONS.play,
+ },
+ {
+ action: "post",
+ label: "post",
+ icon: ICONS.add,
+ },
!isViewingThread &&
!isCompleteThread && {
action: "expand",
label: "expand",
- icon: "expand",
+ icon: ICONS.expand,
},
]
.filter((action) => !!action)
.map(
({ action, icon, label }) =>
- `<div class="action" data-action="${action}" title="${label}">${ICONS[icon]}</div>`
+ `<div class="action" data-action="${action}" title="${label}">${icon}</div>`
)
.join("");
diff --git a/public/assets/js/util/icons.js b/public/assets/js/util/icons.js
index f145515..5ff1ea6 100644
--- a/public/assets/js/util/icons.js
+++ b/public/assets/js/util/icons.js
@@ -1,7 +1,9 @@
const ICONS = {
- edit: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>',
- play: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>',
+ edit: '<svg class="icon editIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>',
+ play: '<svg class="icon playIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>',
expand:
- '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>',
- add: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>',
+ '<svg class="icon expandIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>',
+ add: '<svg class="icon addIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>',
+ remove:
+ '<svg class="icon removeIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg>',
};
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 22:52:47 +0000