Yes. You won’t be able to use only Drab.Modal, which depends on bootstrap+jquery
grych
Creator of Drab
afulki
Thank you! Don’t suppose you know how to fix the issue with
$(document).ready(function() { $('.chips-autocomplete').material_chip({ getting a Uncaught ReferenceError: $ is not defined, error (this only started after I modified my config to use the npm setting in the brunch config)
0
grych
Creator of Drab
I am not very familiar with Material, but it looks like you don’t have jQuery defined as a global. You can set it up in the brunch config like:
"dependencies": {
"jquery": ">= 3.1.1",...
npm: {globals: {
$: 'jquery',...
0
afulki
I do (did) have npm set up as you directed in the git readme, but wasn’t able to get it to work, will fork my code and transition over to bootstrap, see how i like it 
Thanks for the help
0
grych
Creator of Drab
Hi all,
Drab.Live update: attributes goes live!
<a href="<%= @href %>" class="<%= @classes %>"><%= @link %></a>
Now, you may update any of this assigns in the Commander to immediate update it on the page
def button_clicked(socket, _sender) do
classes = peek(socket, :classes) <> " red-big-button"
poke socket, href: "https://tg.pl/drab", classes: classes
end
Demo
I’ve made a small demo here. You may type down a Bootstrap class to observe how it changes, live.
How Does it Work
Drab actually updates the attribute. It does not re-render or replace the tag, so if you’ve done any updates with JS, it would be kept. But, who needs JS when you have Drab?
Limitations
It works only with named attributes. So constructions like:
<tag <%= attr %>>
are prohibited. For now, such code does not compile as a Drab Template (but will show a friendly messages during compile time). I still how no idea how I could handle it, so I will leave it as it is. Do you think it is worth to make an effort to make it work?
Story
Again, the goal is to find the best, Phoenix-like API to update the page on the fly. I believe this is a good way to do it, as you need only minimal (or none) changes to your Phoenix templates to go live with Drab.
TODO
- work on partials, propagate poke changes only into selected partials
- have a values of the fields directly in the Commander Event Handler Function
- a handy way to update the url bar
1
OvermindDL1
Whoo looks awesome!
Hmm, there are cases, but maybe signifying it via a delimiter of some form? Like Polymer does blah="{{variable}}" to set the property on the element named blah to the contents of variable, and it uses blah$="{{variable}}" to set the *attribute*. A difference is if it is explicitly falsethen it removes the attribute entirely, if it is non-false then it sets the attribute to that value with the special case of if that value istrue(not the string"true"but the booleantruethen it just sets it as a true attribute (think therequired` attribute on input boxes). You have to have some way to differentiate between property and attribute setting as they can do very very different things depending on the DOM node being updated.
1
grych
Creator of Drab
True. I would like to be compatible with “normal” Phoenix tempate, so I would rather do foo=<%=@bar%> for attribute and foo$=<%=@bar%> for the property.
So far I’ve found the following ways to deal with nodes:
Helper functions and changeset
Something like below, query for the selector, do a changes on the specific node(s) and push the modified node:
node = query(socket, "#selector")
node = set_property(node, "property", false)
node = set_attribute(node, "other", "blah")
push socket, node
Bound property to assign in JS
<script>
node.some_property = <%= @assign %>
</script>
Each time the @assign is poked from the Commander, script is re-evaluated. This must be done anyway, for other cases.
Template (Polymer styla)
<tag attribute=<%= @attribute %> property$=<%= @property %>>
This would bound the the property with the assign.
0
OvermindDL1
Hear hear, as long as can still be used within templates too.
That is backwards from Polymer and other template libraries where $ is used for attributes and without $ is used for properties (properties are a lot more used than attributes).
0
jschoch
This idea is great and please keep up the momentum!
Looking through this and firing up the demo I was wondering what the security implications of this are?
While magic can be great ,it can be a problem for folks learning/reading the library when there is too much magic (perl, rails)… Please make the magic optional and try to document it if possible.
1
OvermindDL1
Drab is made in such a way that everything is compartmentalized. I’m not even using any of it’s main accessors right now as I’ve built’ish my own to work with the Unpoly.js library.