Skip to content

Instantly share code, notes, and snippets.

@noozo

noozo/app.js

Created Apr 23, 2020
Embed
What would you like to do?
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import 'bootstrap';
import css from "../css/app.scss"
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"
// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"
import { Socket } from "phoenix"
import { LiveSocket, debug } from "phoenix_live_view"
let Hooks = {}
// Input autofocus and cancel create
Hooks.Focus = {
mounted() {
let componentSelector = "#" + this.el.getAttribute("data-component")
this.el.focus()
this.el.addEventListener("keyup", e => {
if (e.keyCode == 27) {
this.pushEventTo(componentSelector, "cancel", {})
}
})
}
}
const getListId = event => event.target.closest(".list").getAttribute("phx-value-list_id")
Hooks.Draggable = {
mounted() {
this.el.addEventListener("dragstart", event => {
event.target.style.opacity = .7
const type = event.target.getAttribute("phx-value-draggable_type")
const id = event.target.getAttribute("phx-value-draggable_id")
event.dataTransfer.setData("text/plain", type + "," + id)
}, false)
this.el.addEventListener("dragend", event => {
event.target.style.opacity = ""
}, false)
this.el.addEventListener("drop", event => {
event.preventDefault()
event.target.style.background = ""
}, false)
}
}
Hooks.DropContainer = {
mounted() {
this.el.addEventListener("dragover", event => {
event.preventDefault()
}, false)
this.el.addEventListener("dragenter", event => {
event.target.style.background = "lightgrey"
}, false)
this.el.addEventListener("dragleave", event => {
event.target.style.background = ""
}, false)
this.el.addEventListener("drop", event => {
event.preventDefault()
event.target.style.background = ""
const draggable = event.dataTransfer.getData("text/plain").split(",")
const type = draggable[0]
const id = draggable[1]
switch (type) {
case "item":
{
this.pushEvent("move_item", { id: id, to_list_id: getListId(event) })
}
break
case "list":
{
this.pushEvent("swap_lists", { id: id, to_list_id: getListId(event) })
}
break
}
}, false)
}
}
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, { hooks: Hooks, params: { _csrf_token: csrfToken } });
liveSocket.connect()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment