Eiji

Eiji

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")
2
Post #11
grych

grych OP

Creator of Drab

It will not work - on the browser side it uses normal DOM methods from jQuery library.

0
Post #12
vic

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
Post #13
grych

grych OP

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 :slight_smile:

2
Post #14
vic

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! :heart:

1
Post #15
grych

grych OP

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
Post #16
vic

vic

Asdf Core Team

Yay, I was able to connect and call some random javascript at my app:

Screen Shot 2017-01-15 at 2.07.19 PM.png1440×886 226 KB

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 it DrabNative perhaps DrabHeadless could 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 :slight_smile:

4
Post #17
grych

grych OP

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 :wink:

use Drab.Commander, plugins: [Drab.Query, Drab.Call]
4
Post #18
grych

grych OP

Creator of Drab

Actually it is already done, by setting up :css property:

update(socket, css: "font-size", set: "6px", on: "#button")
1
Post #19
grych

grych OP

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
Post #20