One more idea style shortcut:
update(socket, style: "font-size", set: "6px", on: "#button")
# or:
update(socket, style: "font-size", set: 6, unit: :px, on: "#button")
Eiji
2
grych
Creator of Drab
vic
Asdf Core Team
Would it be possible to generalize drab to call a particular function on javascript land? That would allow us to have a callback say in a polymer component or a react one and let them be called from elixir via drab. I just found about your library yesterday, but I’m willing to play with it today, and will explore this, as I’d be interested in using it to command an existing react-native app (where no jquery is available, so I’d really like to call a generic js function, perhaps use my app tree state as a queriable thing, as drab treats the client side as a database).
2
grych
Creator of Drab
It is already done - in fact, all the query functions just build the javascript and call it on the client side by running execjs/2 or broadcastjs/2. This functions just run any JS you give. At the beginning there were private, but I decided to open it to public as they may be useful in cases like yours 
2
vic
Asdf Core Team
Nice ! so I guess drab is not actually tied to having a DOM, that was my biggest concern about using with react-native. Thanks for the links, and for drab, it looks just awesome! 
1
grych
Creator of Drab
But it still requires jQuery on the client-side, as it was easier for me to develop it in early sandbox/proof-of-concept stage. Removing jQuery is on the todo list, but not on the top priority for now.
4
vic
Asdf Core Team
Yay, I was able to connect and call some random javascript at my app:
Still not commanding react properly but was able to execute a console log and a random js.
Here’s what I did
- created a bare-bones react native app
- copied just the essential parts of your drab.js template into it (removed most of the modal, and other stuff)
called itDrabNativeperhapsDrabHeadlesscould be better name, as it should be generic. Just included
the parts for connecting and sending events with payload. - bundled phoenix.js in it
- removed the Phoenix.Token validation and hardcoded my demo to
Elixir.DrabPoc.PageController#index - created another method in the commander:
def native_uppercase(socket, sender) do
socket |> console("Hey DrabNative, this is PageCommander from the server side!")
socket |> execjs("console.log(1+1)")
end
- on my app index.ios.js I did
export default class Drab extends Component {
constructor() {
super()
const drab = DrabNative().run()
this.state = {message: "Welcome to Drab Native"};
this.upcase = drab('native', {event_handler_function: 'native_uppercase'})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{this.state.message}
</Text>
<Button onPress={this.upcase} title="Press me" />
</View>
)
}
}
That was my afternoon fun for today
4
grych
Creator of Drab
Maybe it would be a good idea to extract the Drab core (so functions execjs and broadcastjs) and treat jquery/DOM part as a kind of a plugin? Thus you could build your own non-DOM add-on, like helper functions for React or whatever you want 
use Drab.Commander, plugins: [Drab.Query, Drab.Call]
4
grych
Creator of Drab
Actually it is already done, by setting up :css property:
update(socket, css: "font-size", set: "6px", on: "#button")
1
grych
Creator of Drab
@Eiji - I’ve finished the toggle. But it does more - does not just switch between two values, but you can specify more than two. Every time it is launched, it changes the value to the next on the list (or first if it reach the list end).
socket |> update(:class, set: ["btn-success", "btn-danger", "btn-primary"], on: "#btn")
Check out the live examples here: https://tg.pl/drab/docs#Drab.Query
1