From a7791635aa98f012d35f97c3c5288494bbb28e38 Mon Sep 17 00:00:00 2001 From: Miquel Sabaté Solà Date: Wed, 13 Mar 2024 18:03:43 +0100 Subject: Initial commit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Miquel Sabaté Solà --- app/javascript/controllers/application.js | 9 ++++++ app/javascript/controllers/comment_controller.js | 36 ++++++++++++++++++++++++ app/javascript/controllers/export_controller.js | 19 +++++++++++++ app/javascript/controllers/header_controller.js | 21 ++++++++++++++ app/javascript/controllers/index.js | 11 ++++++++ app/javascript/controllers/search_controller.js | 36 ++++++++++++++++++++++++ 6 files changed, 132 insertions(+) create mode 100644 app/javascript/controllers/application.js create mode 100644 app/javascript/controllers/comment_controller.js create mode 100644 app/javascript/controllers/export_controller.js create mode 100644 app/javascript/controllers/header_controller.js create mode 100644 app/javascript/controllers/index.js create mode 100644 app/javascript/controllers/search_controller.js (limited to 'app/javascript/controllers') diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js new file mode 100644 index 0000000..1213e85 --- /dev/null +++ b/app/javascript/controllers/application.js @@ -0,0 +1,9 @@ +import { Application } from "@hotwired/stimulus" + +const application = Application.start() + +// Configure Stimulus development experience +application.debug = false +window.Stimulus = application + +export { application } diff --git a/app/javascript/controllers/comment_controller.js b/app/javascript/controllers/comment_controller.js new file mode 100644 index 0000000..22167c8 --- /dev/null +++ b/app/javascript/controllers/comment_controller.js @@ -0,0 +1,36 @@ +import { Controller } from "@hotwired/stimulus" + +// Controller that handles actions for adding some dynamism like showing/hiding +// comments. +export default class extends Controller { + // Cancel the current operation for comments. + toggle(event) { + event.preventDefault(); + + const parent = event.target.closest('.comment'); + const regl_body = parent.getElementsByClassName('comment-body'); + const edit_body = parent.getElementsByClassName('comment-edit-body'); + if (regl_body.length !== 1 || edit_body.length !== 1) { + return; + } + + regl_body[0].classList.toggle('hidden'); + edit_body[0].classList.toggle('hidden'); + } + + // Hide/show the "New comment" button & form properly, while also focusing on + // the text area when shown. + toggleNewComment(event) { + event.preventDefault(); + + document.getElementById("comment-new-button").classList.toggle('hidden'); + + let body = document.getElementById("comment-new-body"); + body.classList.toggle('hidden'); + + // BUG (minor): this is not working! (bug in Trix?) + if (!body.classList.contains("hidden")) { + document.getElementById("comment_content").focus(); + } + } +} diff --git a/app/javascript/controllers/export_controller.js b/app/javascript/controllers/export_controller.js new file mode 100644 index 0000000..1807799 --- /dev/null +++ b/app/javascript/controllers/export_controller.js @@ -0,0 +1,19 @@ +import { Controller } from "@hotwired/stimulus" + +// Controller used in the exports#new page. That is, it allows us to change the +// format to be picked up by the exporter. +export default class extends Controller { + static targets = ["id"] + + connect() { + const url = `/searches/${this.idTarget.value}/exports.csv`; + document.getElementById("export-format-button").setAttribute('href', url); + } + + // Change the format to be used. + change() { + const format = document.getElementById("export-select-format").value; + const url = `/searches/${this.idTarget.value}/exports.${format}`; + document.getElementById("export-format-button").setAttribute('href', url); + } +} diff --git a/app/javascript/controllers/header_controller.js b/app/javascript/controllers/header_controller.js new file mode 100644 index 0000000..ceb53a6 --- /dev/null +++ b/app/javascript/controllers/header_controller.js @@ -0,0 +1,21 @@ +import { Controller } from "@hotwired/stimulus" + +// Controller being used by the top application header. It allows the user to +// show/hide the hidden menu with the different options. +export default class extends Controller { + // Hide/show the hidden navigation menu from the header. + toggle(event) { + event.preventDefault(); + + // Toggle the up/down arrow. + const el = document.getElementById("header-chevron"); + if (el.classList[0] === "gg-chevron-down") { + el.classList.replace("gg-chevron-down", "gg-chevron-up") + } else { + el.classList.replace("gg-chevron-up", "gg-chevron-down") + } + + // Hide/show the hidden navigation menu. + document.getElementById("hidden-nav").classList.toggle('hidden'); + } +} diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js new file mode 100644 index 0000000..54ad4ca --- /dev/null +++ b/app/javascript/controllers/index.js @@ -0,0 +1,11 @@ +// Import and register all your controllers from the importmap under controllers/* + +import { application } from "controllers/application" + +// Eager load all controllers defined in the import map under controllers/**/*_controller +import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading" +eagerLoadControllersFrom("controllers", application) + +// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!) +// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading" +// lazyLoadControllersFrom("controllers", application) diff --git a/app/javascript/controllers/search_controller.js b/app/javascript/controllers/search_controller.js new file mode 100644 index 0000000..b35593a --- /dev/null +++ b/app/javascript/controllers/search_controller.js @@ -0,0 +1,36 @@ +import { Controller } from "@hotwired/stimulus" + +// Controller that dynamically fetches search results from the body as +// introduced on an input. Then it fills the `results` elements with them. +export default class extends Controller { + static targets = ["body"] + + connect() { + document.getElementById("search_body").focus(); + } + + load(event) { + event.preventDefault(); + + try { + fetch("/searches/search?" + new URLSearchParams({body: this.bodyTarget.value})) + .then(response => response.text()) + .then(html => { + document.getElementById("results").innerHTML = html; + document.getElementById("save-search").classList.toggle("hidden"); + }) + } catch (error) { + document.getElementById("results").innerHTML = '
Something went wrong!
' + } + } + + save(event) { + event.preventDefault(); + + document.getElementById("search-form-submit").classList.toggle("hidden"); + document.getElementById("save-search").classList.toggle("hidden"); + document.getElementById("search-form-name").classList.toggle("hidden"); + document.getElementById("search-form-shared").classList.toggle("hidden"); + document.getElementById("search_name").focus(); + } +} -- cgit v1.2.3