Skip to content
Permalink
Browse files

Using phx-hook to handle DOM updates from server.

  • Loading branch information...
diegomanuel committed Nov 3, 2019
1 parent dda94f9 commit 2a2783b2db548e4d1822dda77345262065af23d6
@@ -8,51 +8,19 @@ import css from "../css/app.css"
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"
import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

const params = {hello: "there!"};
const liveSocket = new LiveSocket("/live", Socket, {params});
liveSocket.connect();

// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"
import hooks from "./hooks"

function selectOnFocus() {
document.querySelectorAll(".focus-select").forEach((el) => {
el.onfocus = () => el.select();
if (Array.from(el.classList).indexOf("show-select") > -1) {
el.select();
}
});
}

function scrollOnUpdate() {
document.querySelectorAll(".scroll-on-update").forEach((el) => {
el.scrollTop = el.scrollHeight;
});
}

// Select the nodes that will be observed for mutations
document.querySelectorAll("body").forEach((body) => {
// Create an observer instance with a callback function to execute when mutations are observed
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type == "childList") {
selectOnFocus();
scrollOnUpdate();
}
}
});

// Start observing the target node for configured mutations (which mutations to observe)
observer.observe(body, {attributes: true, childList: true, subtree: true});
});
// Connect to LiveView socket
const params = {hello: "there!"};
const liveSocket = new LiveSocket("/live", Socket, {params, hooks});
liveSocket.connect();

// Extra stuff
window.copyToClipboard = (str) => {
const el = document.createElement("textarea"); // Create a <textarea> element
el.value = str; // Set its value to the string that you want copied
@@ -0,0 +1,24 @@
function scrollBottom(el) {
el.scrollTop = el.scrollHeight;
}

const hooks = {
"new-chat-message": {
mounted() {
scrollBottom(this.el);
},
updated() {
scrollBottom(this.el);
}
},
"select-on-focus": {
mounted() {
this.el.onfocus = () => this.el.select();
if (Array.from(this.el.classList).indexOf("select-on-show") > -1) {
this.el.select();
}
}
}
};

export default hooks

This file was deleted.

@@ -11,7 +11,7 @@
<b>Qchatex ID:</b> <%= raw parse_chat_scope(@chat, @user) %>
<div onclick="copyToClipboard(window.location.href)" class="chat-id" title="Copy chat URL to clipboard!"><%= @chat.id %></div>
</h4>
<ul class="messages-list scroll-on-update">
<ul phx-hook="new-chat-message" class="messages-list">
<%=for message <- @messages do %>
<li>
<b><%= message.user.nickname %></b> at <small><%= parse_timestamp(message.timestamp) %></small>
@@ -9,7 +9,7 @@ defmodule LiveQchatexWeb.ChatView do

if Map.get(assigns, :click) == "show_input_title" do
~s(<form action="#send" phx-submit="update_title">
<span><input type="text" name="title" class="focus-select show-select" value="#{
<span><input type="text" name="title" phx-hook="select-on-focus" class="select-on-show" value="#{
chat.title
}" maxlength="100"/></span>
</form>)
@@ -41,7 +41,7 @@ defmodule LiveQchatexWeb.ChatView do
cond do
member.id == user.id && Map.get(assigns, :click) == "show_input_nickname" ->
~s(<form action="#send" phx-submit="update_nickname">
<p><input type="text" name="nick" class="focus-select show-select" value="#{
<p><input type="text" name="nick" phx-hook="select-on-focus" class="select-on-show" value="#{
member.nickname
}" maxlength="20"/></p>
</form>)

0 comments on commit 2a2783b

Please sign in to comment.
You can’t perform that action at this time.