These are chat archives for opal/opal

26th
Oct 2017
Mitch VanDuyn
@catmando
Oct 26 2017 04:07
@elia Yeah I was just trying to figure out this problem that appeared to be hyper-react, but as it turns out, its this issue with yields magically converting false to JS new Boolean(false) values. Any tips on where that block method might be would be appreciated, and I will get a PR done asap.
LeoDaoTao
@LeoDaoTao
Oct 26 2017 06:51
I’ve been experimenting with opal-rails today and I really like the way it handles jQuery. I’ve tried a few jQuery plugins that I use in some of my projects and all just work fine once I expose the methods. I’m having an issue with one of them — jCanvas. I expose the method I’m using (just trying the example from jCanvas homepage), but it does not work and there is no error, it just does not draw on the canvas. If I use JS in the console it works as expected so everything is loaded correctly. Maybe an issue with the way canvas works but I’m not sure. Any ideas on how can even start troubleshooing this? Hard to troubleshoot if you don’t get errors :-)
Barrie Hadfield
@barriehadfield
Oct 26 2017 06:53
@LeoDaoTao try .to_n if you are passing an array to a JS method
LeoDaoTao
@LeoDaoTao
Oct 26 2017 06:58
@barriehadfield I’m passing a hash and .to_n did the trick
@barriehadfield Thank you!
LeoDaoTao
@LeoDaoTao
Oct 26 2017 07:10
@barriehadfield I’m wondering if this maybe should be done by Opal internally? Are there any cases where .to_n would not be used?
Elia Schito
@elia
Oct 26 2017 07:31
@leodaotao Despite the similar syntax and usage js objects and hashes have major differences, I thought a couple of times about introducing a special syntax or method to produce js objects directly (eg JS{foo: :bar}) but never went much further
LeoDaoTao
@LeoDaoTao
Oct 26 2017 07:33
@elia yeah, just realized that after looking up JS docs, JS is not my strong point
LeoDaoTao
@LeoDaoTao
Oct 26 2017 07:39

@elia @barriehadfield so let’s say I have jQuery code that looks like this:

$('canvas').drawPolygon({
  x: 100, y: 100,
  radius: 50,
  click: function(layer) {
    $(this).animateLayer(layer, {
      rotate: '+=144'
    });
  }
});

How do I get the function passed to click: to work with opal ?

Elia Schito
@elia
Oct 26 2017 08:47

@LeoDaoTao I think it would be something like:

Element['canvas'].drawPolygon({
  x: 100, y: 100,
  radius: 50,
  click: -> (layer) {
    Element[`this`].animateLayer(layer, {
      rotate: '+=144'
    }.to_n);
  }
}.to_n)

Note that inside the lamda self comes from the lambda definition, that's why we need to explicitly reference this in backticks

LeoDaoTao
@LeoDaoTao
Oct 26 2017 22:24
@elia Thank you, I get a Uncaught TypeError: self.$to_a is not a function on the click event what could be causing this?
Elia Schito
@elia
Oct 26 2017 22:25
@LeoDaoTao you have to inspect the stacktrace in order to find the cause
LeoDaoTao
@LeoDaoTao
Oct 26 2017 22:27
@elie not sure I understand the error though, let me try to disect it more :-)
LeoDaoTao
@LeoDaoTao
Oct 26 2017 22:34
@elie I’m thinking of using a different canvas library though. jCanvas creates too much spaghetti code that looks bad even when written in ruby. I tried fabric.js which is pure JS and it works with objects. Translates to ruby objecs pretty nicelly when wrapped in Native. I think I’ll just wrap parts of it that I need. Very nice work you guys did with Opal. It’s really impressive!