Packages
drab
0.2.2
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.query.js
const EVENTS = ["click", "change", "keyup", "keydown"]
const EVENTS_TO_DISABLE = <%= Drab.config.events_to_disable_while_processing |> Drab.Core.encode_js %>
// disable all drab object when disconnected from the server
Drab.disable_drab_objects = function(disable) {
<%= if Drab.config.disable_controls_when_disconnected do %>
$(`[drab-event]`).prop('disabled', disable)
<% end %>
}
Drab.on_load(function(drab) {
drab.disable_drab_objects(true)
})
Drab.on_disconnect(function(drab) {
drab.disable_drab_objects(true)
})
Drab.on_connect(function(resp, drab) {
function payload(who) {
setid(who)
return {
// by default, we pass back some sender attributes
id: who.attr("id"),
name: who.attr("name"),
class: who.attr("class"),
text: who.text(),
html: who.html(),
val: who.val(),
data: who.data(),
drab_id: who.attr("drab-id")
}
}
function setid(whom) {
whom.attr("drab-id", uuid())
}
// set up the controls with drab handlers
// first serve the shortcut controls by adding the longcut attrbutes
for (let ev of EVENTS) {
$(`[drab-${ev}]`).each(function() {
$(this).attr("drab-event", ev)
$(this).attr("drab-handler", $(this).attr(`drab-${ev}`))
})
}
let events_to_disable = EVENTS_TO_DISABLE
$("[drab-event]").each(function() {
if($(this).attr("drab-handler")) {
let ev=$(this).attr("drab-event")
$(this).off(ev).on(ev, function(event) {
let t = $(this)
// disable current control - will be re-enabled after finish
<%= if Drab.config.disable_controls_while_processing do %>
if ($.inArray(ev, events_to_disable) >= 0) {
t.prop('disabled', true)
}
<% end %>
// send the message back to the server
drab.launch_event(
ev,
t.attr("drab-handler"),
payload(t)
<%= if Drab.config.disable_controls_while_processing do %>
,
function() {
t.prop('disabled', false)
// console.log("GOTREPLY!", t)
}
<% end %>
)
// drab.channel.push("event", {event: ev, payload: payload($(this))})
})
} else {
console.log("Drab Error: drab-event definded without drab-handler", $(this))
}
})
// re-enable drab controls
drab.disable_drab_objects(false)
})