These are chat archives for ractivejs/ractive

28th
Sep 2017
kouts
@kouts
Sep 28 2017 15:30
Quick question: How to insert a component after an element? I know there is insert() but there is not an insertAfter() method
Chris Reeves
@evs-chris
Sep 28 2017 15:31
There's not currently a way to do that outside of a template
Unless the element happens to be the last sibling in a container, in which case, you could use the append option
kouts
@kouts
Sep 28 2017 15:33
Hmm I found a way ctx.node.parentNode.insertBefore(el, ctx.node.nextSibling);
where el is this.find('*')
would this cause a problem?
ctx.node being the node I want to position my instance after
Chris Reeves
@evs-chris
Sep 28 2017 15:34
So inside a template?
Joseph
@fskreuz
Sep 28 2017 15:35
Might be possible with ractive.attachChild and an anchor, but this assumes you have an anchor after the element in advance.
kouts
@kouts
Sep 28 2017 15:35
It's basically a popover component
that I want to appear next to the element that triggered it
Chris Reeves
@evs-chris
Sep 28 2017 15:36
Yeah, your safest bet is an anchor, but if it's an ephemeral thing that won't be sticking around to confuse things later, manual insertBefore should be fine
kouts
@kouts
Sep 28 2017 15:36
@fskreuz yes I thought this one too, but there will be too many popovers
ok thanks!
Joseph
@fskreuz
Sep 28 2017 15:38
Popovers... unless it's not a huge, overly-customized one, decorators come into mind first. Decorators are good for near-DOM operations, like popovers, tooltips and such.
Chris Reeves
@evs-chris
Sep 28 2017 15:39
I've used a decorator to create an on the fly child element to embed a component in before too
kouts
@kouts
Sep 28 2017 15:39
thank you @fskreuz , I will try a decorator too
Joseph
@fskreuz
Sep 28 2017 15:40
Popovers = Bootstrap comes into mind. :D
kouts
@kouts
Sep 28 2017 15:41
that's what I'm using but I thought I'd create a custom one
Ractive.decorators.popover = function(element, options){
    var $el = $(element);
    if(options.trigger == 'manual'){
        $el.on('click', function(event){
            if($el.data('bs.popover')){
                return false;
            }
            $el.popover(options).popover('show');
            var $popover = $el.next('.popover').attr('tabindex', '1').focus().on('blur', function(){
                // console.log('popover destroyed');
                $el.popover('destroy');
            });
        });
    }else{
        $el.popover(options);
    }
    return {
        teardown: function(){
            if(options.trigger == 'manual'){
                $el.off('click');
                if(typeof $popover !='undefined'){
                    $popover.off('blur');
                }
            }
            if($el.data('bs.popover')){
                $el.popover('hide');
                $el.popover('destroy');
            }
        }
    };
}
Joseph
@fskreuz
Sep 28 2017 15:42
yep, pretty much what I had in mind.
But like what @evs-chris mentioned, you can use a decorator to manually create an instance and stick it to the node.
kouts
@kouts
Sep 28 2017 15:44
Ok, how do I manually create an instance?
You mean manually create a bootstrap popover instance?
Joseph
@fskreuz
Sep 28 2017 15:46
If your popover is a custom component, you can just new Component({ el: decoratorNode }) inside the decorator setup.
kouts
@kouts
Sep 28 2017 15:47
Wow!
create the component inside the decorator?
on the fly?
Joseph
@fskreuz
Sep 28 2017 15:49
Something like...
const MyCustomPopoverComponent = Ractive.extend({...})

Ractive.decorators.myPopover = function(node, opts){

  const popover = MyCustomPopoverComponent({ el: node, append: whateverFitsBest })

  return {
    teardown: function(){
      popover.teardown()
    }
  }
}
kouts
@kouts
Sep 28 2017 15:49
Ahh I see, I can pass the el attribute afterwards
So can I create a component without the el option set beforehand?
didn't know you can do that
Joseph
@fskreuz
Sep 28 2017 15:51
I think... yes? Or at least that's how I thought ractive.render() 's argument was for. You can create an instance, but not designate where it would go, then use ractive.render() to stick it somewhere.
or was it ractive.insert()... hmm...
kouts
@kouts
Sep 28 2017 15:53
will try that tommorow, thanks for your help
Chris Reeves
@evs-chris
Sep 28 2017 16:14
render if it was created without an el, insert of it was detached from elsewhere
Joseph
@fskreuz
Sep 28 2017 16:22
:+1: