These are chat archives for ractivejs/ractive

28th
Sep 2017
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:30 UTC
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 UTC
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
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:33 UTC
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 UTC
So inside a template?
Joseph
@fskreuz
Sep 28 2017 15:35 UTC
Might be possible with ractive.attachChild and an anchor, but this assumes you have an anchor after the element in advance.
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:35 UTC
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 UTC
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
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:36 UTC
@fskreuz yes I thought this one too, but there will be too many popovers
ok thanks!
Joseph
@fskreuz
Sep 28 2017 15:38 UTC
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 UTC
I've used a decorator to create an on the fly child element to embed a component in before too
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:39 UTC
thank you @fskreuz , I will try a decorator too
Joseph
@fskreuz
Sep 28 2017 15:40 UTC
Popovers = Bootstrap comes into mind. :D
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:41 UTC
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 UTC
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.
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:44 UTC
Ok, how do I manually create an instance?
You mean manually create a bootstrap popover instance?
Joseph
@fskreuz
Sep 28 2017 15:46 UTC
If your popover is a custom component, you can just new Component({ el: decoratorNode }) inside the decorator setup.
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:47 UTC
Wow!
create the component inside the decorator?
on the fly?
Joseph
@fskreuz
Sep 28 2017 15:49 UTC
Something like...
const MyCustomPopoverComponent = Ractive.extend({...})

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

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

  return {
    teardown: function(){
      popover.teardown()
    }
  }
}
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:49 UTC
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 UTC
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...
Giannis Koutsaftakis
@kouts
Sep 28 2017 15:53 UTC
will try that tommorow, thanks for your help
Chris Reeves
@evs-chris
Sep 28 2017 16:14 UTC
render if it was created without an el, insert of it was detached from elsewhere
Joseph
@fskreuz
Sep 28 2017 16:22 UTC
:+1: