diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 13a6db134..c70d4b29d 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -3,6 +3,9 @@ function importAll(r) {
r.keys().forEach(r);
}
+// XXX for dropzone.
+import "core-js/web/dom-collections";
+
require('@rails/ujs').start();
require('hammerjs');
require('jquery-hotkeys');
diff --git a/app/javascript/src/javascripts/tag_counter.js b/app/javascript/src/javascripts/tag_counter.js
index 428759688..a4c053b98 100644
--- a/app/javascript/src/javascripts/tag_counter.js
+++ b/app/javascript/src/javascripts/tag_counter.js
@@ -1,39 +1,29 @@
-import { h, Component, render } from "preact";
-import { makeObservable, observable, computed, action } from "mobx";
-import { observer } from "mobx-react";
-
import Utility from "./utility";
-export default @observer class TagCounter extends Component {
+export default class TagCounter {
static lowCount = 10;
static highCount = 20;
- @observable tagCount = 0;
-
- constructor() {
- super();
- makeObservable(this);
+ constructor($element) {
+ this.$element = $element;
+ this.$target.on("input", (event) => this.update(event));
+ this.update();
}
- componentDidMount() {
- $(this.props.tags).on("input", this.updateCount);
- this.updateCount();
+ update() {
+ this.$element.find(".tag-count").text(`${this.tagCount} / ${TagCounter.highCount} tags`);
+ this.$element.find("img").attr("src", `/images/${this.iconName}.png`);
}
- render() {
- return (
-
- {this.tagCount} / {TagCounter.highCount} tags
- 
-
- );
+ get $target() {
+ return $(this.$element.attr("data-for"));
}
- @action.bound updateCount() {
- this.tagCount = Utility.regexp_split($(this.props.tags).val()).length;
+ get tagCount() {
+ return Utility.regexp_split(this.$target.val()).length;
}
- @computed get iconName() {
+ get iconName() {
if (this.tagCount < TagCounter.lowCount) {
return "blobglare";
} else if (this.tagCount >= TagCounter.lowCount && this.tagCount < TagCounter.highCount) {
@@ -45,8 +35,7 @@ export default @observer class TagCounter extends Component {
static initialize() {
$("[data-tag-counter]").toArray().forEach(element => {
- let target = $($(element).attr("data-for")).get(0);
- render(h(TagCounter, { tags: target }), element);
+ new TagCounter($(element));
});
}
}
diff --git a/app/views/posts/partials/show/_edit.html.erb b/app/views/posts/partials/show/_edit.html.erb
index eb7ba1b6b..2c99860dc 100644
--- a/app/views/posts/partials/show/_edit.html.erb
+++ b/app/views/posts/partials/show/_edit.html.erb
@@ -49,7 +49,10 @@