Packages
drab
0.10.0
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.3
0.8.2
0.8.1
0.8.0
0.7.7
0.7.6
0.7.5
0.7.4
0.7.3
0.7.2
0.7.1
0.7.0
0.6.3
0.6.2
0.6.1
0.6.0
0.6.0-pre.1
0.5.6
0.5.5
0.5.4
0.5.3
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.5
0.3.4
0.3.3
0.3.2
0.3.1
0.3.0
0.2.6
0.2.5
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.1
0.1.0
Remote controlled frontend framework for Phoenix.
Current section
Files
Jump to
Current section
Files
priv/templates/drab/drab.modal.js
const MODAL_WRAPPER = "_drab_modal_wrapper_";
const MODAL_BUTTONS = ".drab-modal-button";
Drab.on_connect(function (resp, drab) {
function modal_elems(id) {
var modal_wrapper, modal, modal_backdrop, form;
modal_wrapper = document.getElementById(MODAL_WRAPPER + id);
if (modal_wrapper) {
modal = modal_wrapper.querySelector(".modal")
return {
modal_wrapper: modal_wrapper,
modal: modal,
modal_backdrop: modal_wrapper.querySelector(".modal-backdrop"),
form: modal.querySelector("form")
}
}
}
function clicked(message, element_name) {
clearTimeout(Drab["modal_timeout_function_" + message.id]);
var mod = modal_elems(message.id);
if (mod) {
var query_output = [message.sender, {
button_clicked: element_name,
params: Drab.form_params(mod.form)
}];
drab.channel.push("modal", { ok: query_output });
mod.modal.className = "modal fade";
mod.modal_backdrop.className = "modal-backdrop fade";
setTimeout(function () {
document.querySelector("body").classList.remove("modal-open");
mod.modal_wrapper.outerHTML = "";
}, 100);
}
}
drab.channel.on("modal", function (message) {
var mod = modal_elems(message.id);
if (mod) mod.modal_wrapper.outerHTML = "";
var body = document.querySelector("body");
body.insertAdjacentHTML("beforeend", message.html);
mod = modal_elems(message.id);
setTimeout(function () {
<%= case Drab.Config.get(:modal_css) do %>
<% :bootstrap3 -> %> mod.modal.classList.add("in"); mod.modal_backdrop.classList.add("in");
<% :bootstrap4 -> %> mod.modal.classList.add("show"); mod.modal_backdrop.classList.add("show");
<% end %>
body.classList.add("modal-open");
mod.form.querySelector("input, textarea, select").focus();
}, 50);
var buttons = mod.modal.querySelectorAll(MODAL_BUTTONS);
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function (e) { clicked(message, e.srcElement.getAttribute("name"));}
}
mod.form.onsubmit = function(e) {
clicked(message, "ok");
e.preventDefault();
return false;
};
mod.form.onkeyup = function(e) {
var key = e.which || e.keyCode;
if (key == 27) {
clicked(message, "cancel");
}
}
if (message.timeout) {
Drab["modal_timeout_function_" + message.id] = setTimeout(function () {
clicked(message, "cancel");
}, message.timeout);
}
Drab.enable_drab_on("#_drab_modal_wrapper_" + message.id + " .modal-body");
});
});