forked from fixin.me/fixin.me
Fix js code and comment formatting
This commit is contained in:
@@ -3,12 +3,14 @@
|
|||||||
import "@hotwired/turbo-rails"
|
import "@hotwired/turbo-rails"
|
||||||
|
|
||||||
|
|
||||||
/* Hide page before loaded for testing purposes */
|
// Show page if hidden for testing purposes.
|
||||||
function showPage(event) {
|
function showPage(event) {
|
||||||
document.documentElement.style.visibility="visible"
|
document.documentElement.style.visibility="visible"
|
||||||
}
|
}
|
||||||
document.addEventListener('turbo:load', showPage)
|
document.addEventListener('turbo:load', showPage)
|
||||||
|
|
||||||
|
|
||||||
|
// <details> event handlers.
|
||||||
function detailsChange(event) {
|
function detailsChange(event) {
|
||||||
var target = event.currentTarget
|
var target = event.currentTarget
|
||||||
var count = target.querySelectorAll('input:checked:not([disabled])').length
|
var count = target.querySelectorAll('input:checked:not([disabled])').length
|
||||||
@@ -24,7 +26,7 @@ function detailsChange(event) {
|
|||||||
}
|
}
|
||||||
window.detailsChange = detailsChange
|
window.detailsChange = detailsChange
|
||||||
|
|
||||||
/* Close open <details> when focus lost */
|
// Close open <details> when focus lost.
|
||||||
function detailsClose(event) {
|
function detailsClose(event) {
|
||||||
if (!event.relatedTarget ||
|
if (!event.relatedTarget ||
|
||||||
event.relatedTarget.closest("details") != event.currentTarget) {
|
event.relatedTarget.closest("details") != event.currentTarget) {
|
||||||
@@ -37,6 +39,8 @@ window.detailsObserver = new MutationObserver((mutations) => {
|
|||||||
mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
|
mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Validation of multiple-submit forms with different field requirements.
|
||||||
function formValidate(event) {
|
function formValidate(event) {
|
||||||
var id = event.submitter.getAttribute("data-validate")
|
var id = event.submitter.getAttribute("data-validate")
|
||||||
if (!id) return;
|
if (!id) return;
|
||||||
@@ -79,7 +83,7 @@ Turbo.StreamActions.enable = function() {
|
|||||||
this.targetElements.forEach((e) => { this.enableElement(e) })
|
this.targetElements.forEach((e) => { this.enableElement(e) })
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: change to visibility = collapse to avoid width change? */
|
// TODO: change to visibility = collapse to avoid width change?
|
||||||
Turbo.StreamActions.hide = function() {
|
Turbo.StreamActions.hide = function() {
|
||||||
this.targetElements.forEach((e) => { e.style.display = "none" })
|
this.targetElements.forEach((e) => { e.style.display = "none" })
|
||||||
}
|
}
|
||||||
@@ -96,7 +100,7 @@ Turbo.StreamActions.collapse = function() {
|
|||||||
|
|
||||||
Turbo.StreamActions.close_form = function() {
|
Turbo.StreamActions.close_form = function() {
|
||||||
this.targetElements.forEach((e) => {
|
this.targetElements.forEach((e) => {
|
||||||
/* Move focus if there's no focus or focus inside form being closed */
|
// Move focus if there's no focus or focus inside form being closed.
|
||||||
const focused = document.activeElement
|
const focused = document.activeElement
|
||||||
if (!focused || (focused == document.body) || e.contains(focused)) {
|
if (!focused || (focused == document.body) || e.contains(focused)) {
|
||||||
let nextForm = e.parentElement.querySelector(`#${e.id} ~ tr:has([autofocus])`)
|
let nextForm = e.parentElement.querySelector(`#${e.id} ~ tr:has([autofocus])`)
|
||||||
@@ -121,6 +125,8 @@ Turbo.StreamActions.unselect = function() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Keyboard event processing handlers.
|
||||||
function formProcessKey(event) {
|
function formProcessKey(event) {
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case "Escape":
|
case "Escape":
|
||||||
@@ -147,7 +153,7 @@ function detailsProcessKey(event) {
|
|||||||
var button = event.currentTarget.querySelector("button:not([disabled])")
|
var button = event.currentTarget.querySelector("button:not([disabled])")
|
||||||
if (button) {
|
if (button) {
|
||||||
button.click()
|
button.click()
|
||||||
// Autofocus won't be respected unless target is blurred
|
// Autofocus won't be respected unless target is blurred.
|
||||||
event.target.blur()
|
event.target.blur()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
@@ -157,7 +163,8 @@ function detailsProcessKey(event) {
|
|||||||
}
|
}
|
||||||
window.detailsProcessKey = detailsProcessKey;
|
window.detailsProcessKey = detailsProcessKey;
|
||||||
|
|
||||||
/* Items table drag and drop support */
|
|
||||||
|
// Items table drag and drop support.
|
||||||
var lastEnterTime
|
var lastEnterTime
|
||||||
function dragStart(event) {
|
function dragStart(event) {
|
||||||
lastEnterTime = event.timeStamp
|
lastEnterTime = event.timeStamp
|
||||||
@@ -167,7 +174,8 @@ function dragStart(event) {
|
|||||||
})
|
})
|
||||||
event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"))
|
event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"))
|
||||||
var rowRectangle = row.getBoundingClientRect()
|
var rowRectangle = row.getBoundingClientRect()
|
||||||
event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top)
|
event.dataTransfer.setDragImage(row, event.x - rowRectangle.left,
|
||||||
|
event.y - rowRectangle.top)
|
||||||
event.dataTransfer.dropEffect = "move"
|
event.dataTransfer.dropEffect = "move"
|
||||||
}
|
}
|
||||||
window.dragStart = dragStart
|
window.dragStart = dragStart
|
||||||
@@ -177,7 +185,7 @@ window.dragStart = dragStart
|
|||||||
* * Enter/Leave events at the same timeStamp may not be logically ordered
|
* * Enter/Leave events at the same timeStamp may not be logically ordered
|
||||||
* (e.g. E -> E -> L, not E -> L -> E),
|
* (e.g. E -> E -> L, not E -> L -> E),
|
||||||
* * not every Enter event has corresponding Leave event, especially during
|
* * not every Enter event has corresponding Leave event, especially during
|
||||||
* rapid pointer moves
|
* rapid pointer moves.
|
||||||
* NOTE: sometimes Leave is not emitted when pointer goes fast over table
|
* NOTE: sometimes Leave is not emitted when pointer goes fast over table
|
||||||
* and outside. This should probably be fixed in browser, than patched here.
|
* and outside. This should probably be fixed in browser, than patched here.
|
||||||
*/
|
*/
|
||||||
@@ -197,7 +205,7 @@ window.dragOver = dragOver
|
|||||||
|
|
||||||
function dragLeave(event) {
|
function dragLeave(event) {
|
||||||
//console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
|
//console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id)
|
||||||
// Leave has been accounted for by Enter at the same timestamp, processed earlier
|
// Leave has been accounted for by Enter at the same timestamp, processed earlier.
|
||||||
if (event.timeStamp <= lastEnterTime) return
|
if (event.timeStamp <= lastEnterTime) return
|
||||||
event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
|
event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
|
||||||
tr.classList.remove("dropzone")
|
tr.classList.remove("dropzone")
|
||||||
|
|||||||
Reference in New Issue
Block a user