Use stimulus for bookmark toggling

Author: cbeer

app/components/blacklight/document/bookmark_component.html.erb

@@ -7,15 +7,16 @@
              method:  bookmarked? ? :delete : :put,
              class: "bookmark-toggle",
              data: {
-               'doc-id' => @document.id,
-               present: t('blacklight.search.bookmarks.present'),
-               absent: t('blacklight.search.bookmarks.absent'),
-               inprogress: t('blacklight.search.bookmarks.inprogress')
+              controller: 'blacklight--checkbox-submit',
+              'blacklight--checkbox-submit-present-value': t('blacklight.search.bookmarks.present'),
+              'blacklight--checkbox-submit-absent-value': t('blacklight.search.bookmarks.absent'),
+              'blacklight--checkbox-submit-inprogress-value': t('blacklight.search.bookmarks.inprogress'),
+              'doc-id' => @document.id
             }) do %>
   <div class="checkbox toggle-bookmark">
-    <label class="toggle-bookmark" data-checkboxsubmit-target="label">
-      <input type="checkbox" class="toggle-bookmark" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
-      <span data-checkboxsubmit-target="span"><%= bookmarked? ? t('blacklight.search.bookmarks.present') : t('blacklight.search.bookmarks.absent') %></span>
+    <label class="toggle-bookmark" data-blacklight--checkbox-submit-target="label">
+      <input type="checkbox" class="toggle-bookmark" data-action="change->blacklight--checkbox-submit#change" <%= 'checked="checked"' if bookmarked? %> data-blacklight--checkbox-submit-target="checkbox">
+      <span data-blacklight--checkbox-submit-target="span"><%= bookmarked? ? t('blacklight.search.bookmarks.present') : t('blacklight.search.bookmarks.absent') %></span>
     </label>
   </div>
 

app/javascript/blacklight/bookmark_toggle.js

@@ -1,11 +1,9 @@
-import BookmarkToggle from 'blacklight/bookmark_toggle'
 import ButtonFocus from 'blacklight/button_focus'
 import Modal from 'blacklight/modal'
 import SearchContext from 'blacklight/search_context'
 import Core from 'blacklight/core'
 
 export default {
-  BookmarkToggle,
   ButtonFocus,
   Modal,
   SearchContext,

app/javascript/blacklight/checkbox_submit.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['checkbox', 'label', 'span']
+  static values = { present: String, absent: String, inprogress: String }
+
+  async change() {
+    this.spanTarget.innerHTML = this.inprogressValue;
+    this.labelTarget.setAttribute('disabled', 'disabled');
+    this.checkboxTarget.setAttribute('disabled', 'disabled');
+
+    const response = await this.submit();
+
+    this.labelTarget.removeAttribute('disabled')
+    this.checkboxTarget.removeAttribute('disabled')
+
+    if (response.ok) {
+      const json = await response.json()
+      this.updateStateTo(this.checked)
+      this.updateGlobalBookmarkCounter(json.bookmarks.count)
+    } else {
+      alert('Error')
+    }
+  }
+
+  get checked() {
+    return this.checkboxTarget.checked;
+  }
+
+  async submit() {
+    const method = this.checked ? 'put' : 'delete';
+
+    //Set the Rails hidden field that fakes an HTTP verb
+    //properly for current state action.
+    this.element.querySelector('input[name=_method]').value = method;
+
+    const response = await fetch(this.element.getAttribute('action'), {
+      body: new FormData(this.element),
+      method: method.toUpperCase(),
+      headers: {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': document.querySelector('meta[name=csrf-token]')?.content
+      }
+    })
+
+    return response;
+  }
+
+  updateGlobalBookmarkCounter(value) {
+    document.querySelector('[data-role=bookmark-counter]').innerHTML = value;
+  }
+
+  updateStateTo(state) {
+    if (state) {
+      this.labelTarget.classList.add('checked')
+      this.spanTarget.innerHTML = this.presentValue;
+    } else {
+      this.labelTarget.classList.remove('checked')
+      this.spanTarget.innerHTML = this.absentValue;
+    }
+  }
+}

app/javascript/blacklight/index.js

@@ -1,3 +1,4 @@
 # frozen_string_literal: true
 
 pin_all_from File.expand_path("../app/javascript/blacklight", __dir__), under: "blacklight"
+pin_all_from File.expand_path("../app/javascript/controllers", __dir__), under: "controllers"

app/javascript/controllers/blacklight/checkbox_submit_controller.js

@@ -119,3 +119,18 @@ namespace :blacklight do
     end
   end
 end
+
+if Rake::Task.task_defined?('stimulus:manifest:display')
+  Rake::Task['stimulus:manifest:display'].enhance do
+    puts Stimulus::Manifest.generate_from(Blacklight::Engine.root.join("app/javascript/controllers")).join("\n").gsub('./blacklight/', 'blacklight-frontend/app/javascript/controllers/blacklight/')
+  end
+end
+
+if Rake::Task.task_defined?('stimulus:manifest:update')
+  Rake::Task['stimulus:manifest:update'].enhance do
+    manifest = Stimulus::Manifest.generate_from(Blacklight::Engine.root.join("app/javascript/controllers")).join("\n").gsub('./blacklight/', 'blacklight-frontend/app/javascript/controllers/blacklight/')
+    File.open(Rails.root.join("app/javascript/controllers/index.js"), "a+") do |index|
+      index.puts manifest
+    end
+  end
+end

config/importmap.rb

@@ -30,6 +30,7 @@
     "not IE 11"
   ],
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.1",
     "bootstrap": ">=4.3.1 <6.0.0"
   }
 }