From 3893926048db6dc989c7724ef660e246ae379f35 Mon Sep 17 00:00:00 2001
From: Albert Yi <albert@carbonfive.com>
Date: Mon, 3 Dec 2018 13:20:09 -0800
Subject: [PATCH] add dynamic tag counts on upload form

---
 app/javascript/src/javascripts/posts.js.erb   | 27 +++++++++++-
 app/javascript/src/styles/specific/posts.scss |  6 +--
 app/javascript/src/styles/specific/tags.scss  | 44 +++++++++++++++++++
 .../src/styles/specific/uploads.scss          |  1 +
 app/views/posts/partials/show/_edit.html.erb  | 19 +++++---
 app/views/uploads/new.html.erb                | 17 ++++---
 6 files changed, 98 insertions(+), 16 deletions(-)

diff --git a/app/javascript/src/javascripts/posts.js.erb b/app/javascript/src/javascripts/posts.js.erb
index bf5ac5057..a6c23b72e 100644
--- a/app/javascript/src/javascripts/posts.js.erb
+++ b/app/javascript/src/javascripts/posts.js.erb
@@ -39,6 +39,10 @@ Post.initialize_all = function() {
     this.initialize_edit_dialog();
   }
 
+  var $fields_multiple = $('[data-autocomplete="tag-edit"]');
+  $fields_multiple.on("keypress.danbooru", Post.update_tag_count);
+  Post.update_tag_count();
+
   $(window).on('danbooru:initialize_saved_seraches', () => {
     Post.initialize_saved_searches();
   });
@@ -78,7 +82,7 @@ Post.initialize_gestures = function() {
 }
 
 Post.initialize_edit_dialog = function() {
-  $("#open-edit-dialog").button().show().on("click.danbooru", function(e) {
+  $("#open-edit-dialog").show().on("click.danbooru", function(e) {
     Post.open_edit_dialog();
     e.preventDefault();
   });
@@ -598,6 +602,27 @@ Post.initialize_saved_searches = function() {
   });
 }
 
+Post.update_tag_count = function(event) {
+  let string = "0 tags";
+  let count = 0;
+
+  if (event) {
+    let tags = $(event.target).val().match(/\S+/g);
+    if (tags) {
+      count = tags.length;
+      string = (count == 1) ? (count + " tag") : (count + " tags")
+    }
+  }
+  $("#tags-container .count").html(string);
+  let klass = "smile";
+  if (count < 25) {
+    klass = "frown";
+  } else if (count < 35) {
+    klass = "meh";
+  }
+  $("#tags-container .options #face").removeClass().addClass(`far fa-${klass}`);
+}
+
 $(document).ready(function() {
   Post.initialize_all();
 });
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index 91103f0ad..14d5f27a5 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -44,10 +44,6 @@ article.post-preview {
   margin-top: 1em;
 }
 
-#open-edit-dialog {
-  padding: 0;
-}
-
 #edit-dialog textarea {
   margin-bottom: 0.25em;
 }
@@ -57,7 +53,6 @@ article.post-preview {
     border: 2px solid transparent;
   }
 
-
   &.post-status-has-children img {
     border-color: $preview_has_children_color;
   }
@@ -348,6 +343,7 @@ div#c-posts {
     }
 
     textarea {
+      width: 100%;
       margin-bottom: 0.25em;
     }
 
diff --git a/app/javascript/src/styles/specific/tags.scss b/app/javascript/src/styles/specific/tags.scss
index f94a9f431..ec8796a21 100644
--- a/app/javascript/src/styles/specific/tags.scss
+++ b/app/javascript/src/styles/specific/tags.scss
@@ -11,3 +11,47 @@ div#c-tags {
     }
   }
 }
+
+#tags-container {
+  max-width: 70em;
+
+  div.header {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    width: 100%;
+
+    label {
+      grid-column: 1;
+    }
+
+    .options {
+      grid-column: 2;
+      justify-self: end;
+
+      .count {
+        color: gray;
+        text-decoration: italic;
+        margin-left: 0.25em;
+        padding-bottom: 0.2em;
+      }
+
+      i {
+        margin-left: 0.25em;
+        font-size: 11pt;
+      }
+
+      .fa-frown {
+        color: red;
+      }
+
+      .fa-meh {
+        color: darkkhaki;
+      }
+
+      .fa-smile {
+        color: green;
+      }
+    }
+  }
+}
diff --git a/app/javascript/src/styles/specific/uploads.scss b/app/javascript/src/styles/specific/uploads.scss
index c352b787f..f63d6ddf9 100644
--- a/app/javascript/src/styles/specific/uploads.scss
+++ b/app/javascript/src/styles/specific/uploads.scss
@@ -34,6 +34,7 @@ div#c-uploads {
 
     textarea {
       margin-bottom: 0.25em;
+      width: 100%;
     }
 
     .hint {
diff --git a/app/views/posts/partials/show/_edit.html.erb b/app/views/posts/partials/show/_edit.html.erb
index dc5837ccd..11d261a4d 100644
--- a/app/views/posts/partials/show/_edit.html.erb
+++ b/app/views/posts/partials/show/_edit.html.erb
@@ -75,16 +75,25 @@
     <div class="input" id="iqdb-similar" style="display: none;"></div>
   <% end %>
 
-  <div class="input">
-    <div>
+
+
+  <div class="input" id="tags-container">
+    <div class="header">
       <%= f.label :tag_string, "Tags" %>
-      <%= f.text_area :tag_string, :size => "50x5", :value => post.presenter.split_tag_list_text + " ", :data => { :autocomplete => "tag-edit" } %>
-      <span id="open-edit-dialog" class="ui-icon ui-icon-arrow-1-ne" title="detach" style="display: none;" data-shortcut="shift+e"/>
+
+      <span class="options">
+        <i id="face" class="fas"></i>
+        <span class="count"></span>
+        <a href="#"><i id="open-edit-dialog" class="fas fa-arrows-alt" title="detach" data-shortcut="shift+e"></i></a>
+      </span>
     </div>
 
+    <div>
+      <%= f.text_area :tag_string, :size => "60x5", :spellcheck => false, :"data-autocomplete" => "tag-edit", :"data-shortcut" => "e", :value => params[:tag_string] %>
+    </div>
     <%= render "related_tags/buttons" %>
   </div>
-
+  
   <div class="input">
     <%= submit_tag "Submit", :class => "ui-button ui-widget ui-corner-all" %>
   </div>
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index 55b921ac5..7bbcc7976 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -90,18 +90,25 @@
           </div>
         </div>
 
-        <div class="input">
-          <div>
+        <div class="input" id="tags-container">
+          <div class="header">
             <%= f.label :tag_string, "Tags" %>
-            <%= f.text_area :tag_string, :size => "60x5", :spellcheck => false, :"data-autocomplete" => "tag-edit", :"data-shortcut" => "e", :value => params[:tag_string] %>
-            <span id="open-edit-dialog" class="ui-icon ui-icon-arrow-1-ne" title="detach" style="display: none;" data-shortcut="shift+e"/>
+
+            <span class="options">
+              <i id="face" class="fas"></i>
+              <span class="count"></span>
+              <a href="#"><i id="open-edit-dialog" class="fas fa-arrows-alt" title="detach" data-shortcut="shift+e"></i></a>
+            </span>
           </div>
 
+          <div>
+            <%= f.text_area :tag_string, :size => "60x5", :spellcheck => false, :"data-autocomplete" => "tag-edit", :"data-shortcut" => "e", :value => params[:tag_string] %>
+          </div>
           <%= render "related_tags/buttons" %>
         </div>
 
         <div class="input">
-          <%= submit_tag "Submit", :id => "submit-button", :class => "large ui-button ui-widget ui-corner-all gradient", data: {disable_with: false} %>
+          <%= submit_tag "Submit", :id => "submit-button", :class => "large ui-button ui-widget ui-corner-all gradient", data: { disable_with: false } %>
         </div>
 
         <%= render "related_tags/container" %>