Created
April 23, 2020 19:59
-
-
Save noozo/cf6154f3c2bdcc8e69ff11dd8600e03a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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