Skip to content

Commit

Permalink
Expose useful stuff from javascript imports
Browse files Browse the repository at this point in the history
  • Loading branch information
cbeer committed Feb 8, 2023
1 parent c27a68e commit e916c16
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 91 deletions.
23 changes: 9 additions & 14 deletions app/javascript/blacklight/bookmark_toggle.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
import Blacklight from 'blacklight/core'
import CheckboxSubmit from 'blacklight/checkbox_submit'

const BookmarkToggle = (() => {
// change form submit toggle to checkbox
Blacklight.doBookmarkToggleBehavior = function() {
document.addEventListener('click', (e) => {
if (e.target.matches('[data-checkboxsubmit-target="checkbox"]')) {
const form = e.target.closest('form')
if (form) new CheckboxSubmit(form).clicked(e);
}
});
};
Blacklight.doBookmarkToggleBehavior.selector = 'form.bookmark-toggle';
const BookmarkToggle = (e) => {
if (e.target.matches('[data-checkboxsubmit-target="checkbox"]')) {
const form = e.target.closest('form')
if (form) new CheckboxSubmit(form).clicked(e);
}
};

Blacklight.doBookmarkToggleBehavior();
})()
BookmarkToggle.selector = 'form.bookmark-toggle';

document.addEventListener('click', BookmarkToggle);

export default BookmarkToggle
20 changes: 10 additions & 10 deletions app/javascript/blacklight/button_focus.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
const ButtonFocus = (() => {
document.addEventListener('click', (e) => {
// Button clicks should change focus. As of 10/3/19, Firefox for Mac and
// Safari both do not set focus to a button on button click.
// See https://zellwk.com/blog/inconsistent-button-behavior/ for background information
if (e.target.matches('[data-toggle="collapse"]') || e.target.matches('[data-bs-toggle="collapse"]')) {
e.target.focus()
}
})
})()
const ButtonFocus = (e) => {
// Button clicks should change focus. As of 10/3/19, Firefox for Mac and
// Safari both do not set focus to a button on button click.
// See https://zellwk.com/blog/inconsistent-button-behavior/ for background information
if (e.target.matches('[data-toggle="collapse"]') || e.target.matches('[data-bs-toggle="collapse"]')) {
e.target.focus()
}
}

document.addEventListener('click', ButtonFocus)

export default ButtonFocus
15 changes: 5 additions & 10 deletions app/javascript/blacklight/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,10 @@
can be a turbo-stream that defines some HTML fragementsand where on the page to put them:
https://turbo.hotwired.dev/handbook/streams
*/
import Blacklight from 'blacklight/core'
import ModalForm from 'blacklight/modalForm'

const Modal = (() => {
// We keep all our data in Blacklight.modal object.
// Create lazily if someone else created first.
if (Blacklight.modal === undefined) {
Blacklight.modal = {};
}

const modal = Blacklight.modal
const modal = {}

// a Bootstrap modal div that should be already on the page hidden
modal.modalSelector = '#blacklight-modal';
Expand Down Expand Up @@ -147,20 +140,22 @@ const Modal = (() => {
};

modal.hide = function (el) {
const dom = document.querySelector(Blacklight.modal.modalSelector)
const dom = document.querySelector(modal.modalSelector)

if (!dom.open) return
dom.close()
}

modal.show = function(el) {
const dom = document.querySelector(Blacklight.modal.modalSelector)
const dom = document.querySelector(modal.modalSelector)

if (dom.open) return
dom.showModal()
}

modal.setupModal()

return modal;
})()

export default Modal
108 changes: 51 additions & 57 deletions app/javascript/blacklight/search_context.js
Original file line number Diff line number Diff line change
@@ -1,59 +1,53 @@
import Blacklight from 'blacklight/core'

const SearchContext = (() => {
Blacklight.doSearchContextBehavior = function() {
document.addEventListener('click', (e) => {
if (e.target.matches('[data-context-href]')) {
Blacklight.handleSearchContextMethod.call(e.target, e)
}
})
};

Blacklight.csrfToken = () => document.querySelector('meta[name=csrf-token]')?.content
Blacklight.csrfParam = () => document.querySelector('meta[name=csrf-param]')?.content

// this is the Rails.handleMethod with a couple adjustments, described inline:
// first, we're attaching this directly to the event handler, so we can check for meta-keys
Blacklight.handleSearchContextMethod = function(event) {
const link = this

// instead of using the normal href, we need to use the context href instead
let href = link.getAttribute('data-context-href')
let target = link.getAttribute('target')
let csrfToken = Blacklight.csrfToken()
let csrfParam = Blacklight.csrfParam()
let form = document.createElement('form')
form.method = 'post'
form.action = href


let formContent = `<input name="_method" value="post" type="hidden" />
<input name="redirect" value="${link.getAttribute('href')}" type="hidden" />`

// check for meta keys.. if set, we should open in a new tab
if(event.metaKey || event.ctrlKey) {
target = '_blank';
}

if (csrfParam !== undefined && csrfToken !== undefined) {
formContent += `<input name="${csrfParam}" value="${csrfToken}" type="hidden" />`
}

// Must trigger submit by click on a button, else "submit" event handler won't work!
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
formContent += '<input type="submit" />'

if (target) { form.setAttribute('target', target); }

form.style.display = 'none'
form.innerHTML = formContent
document.body.appendChild(form)
form.querySelector('[type="submit"]').click()

event.preventDefault()
};

Blacklight.doSearchContextBehavior();
})()
const SearchContext = (e) => {
if (e.target.matches('[data-context-href]')) {
SearchContext.handleSearchContextMethod.call(e.target, e)
}
}

SearchContext.csrfToken = () => document.querySelector('meta[name=csrf-token]')?.content
SearchContext.csrfParam = () => document.querySelector('meta[name=csrf-param]')?.content

// this is the Rails.handleMethod with a couple adjustments, described inline:
// first, we're attaching this directly to the event handler, so we can check for meta-keys
SearchContext.handleSearchContextMethod = function(event) {
const link = this

// instead of using the normal href, we need to use the context href instead
let href = link.getAttribute('data-context-href')
let target = link.getAttribute('target')
let csrfToken = SearchContext.csrfToken()
let csrfParam = SearchContext.csrfParam()
let form = document.createElement('form')
form.method = 'post'
form.action = href


let formContent = `<input name="_method" value="post" type="hidden" />
<input name="redirect" value="${link.getAttribute('href')}" type="hidden" />`

// check for meta keys.. if set, we should open in a new tab
if(event.metaKey || event.ctrlKey) {
target = '_blank';
}

if (csrfParam !== undefined && csrfToken !== undefined) {
formContent += `<input name="${csrfParam}" value="${csrfToken}" type="hidden" />`
}

// Must trigger submit by click on a button, else "submit" event handler won't work!
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
formContent += '<input type="submit" />'

if (target) { form.setAttribute('target', target); }

form.style.display = 'none'
form.innerHTML = formContent
document.body.appendChild(form)
form.querySelector('[type="submit"]').click()

event.preventDefault()
};

document.addEventListener('click', SearchContext)

export default SearchContext

0 comments on commit e916c16

Please sign in to comment.