appendBefore and appendAfter

Write your functional requirement here, be Specific please!

appendBefore and appendAfter

Postby algocrunch » Wed Nov 27, 2013 2:42 am

We need the ability to append before or after a control, instead of simply appending at the end of the control list. I could not find a way to do this with the APIs available. I came up with the following workaround to add this functionality until this feature makes it's way into the base system. Basically I added appendBefore and appendAfter functions, copied the append function (from xui-debug) and replaced the "append" call with one which calls insertBefore appropriately. I then added these functions to the prototype of the controls we need them in.

Code: Select all
/**** Add append before and after ********/
xui.UI.prototype.appendBefore = function (target, beforeNode, subId) {
    return this._customAppend(target, subId, function (parentNode, target) {
        if (beforeNode)
            beforeNode = document.getElementById(beforeNode.getDomId());
        parentNode.$add(function (node) {
            if (beforeNode) this.insertBefore(node, beforeNode);
            else this.appendChild(node);
        }, target, undefined);
    });
}
xui.UI.prototype.appendAfter = function (target, afterNode, subId) {
    return this._customAppend(target, subId, function (parentNode, target) {
        if (afterNode)
            afterNode = document.getElementById(afterNode.getDomId());
        parentNode.$add(function (node) {
            if (afterNode) this.insertBefore(node, afterNode.nextSibling);
            else this.appendChild(node);
        }, target, undefined);
    });
}

xui.UI.prototype._customAppend = function (target, subId, doAppend) {
    if (_.isHash(target) || _.isStr(target))
        target = xui.create(target);
    if (target['xui.UIProfile']) target = target.boxing();

    var pro = this.get(0), prop = pro.properties, parentNode;

    if (pro.beforeAppend && false === this.beforeAppend(pro, target))
        return;

    if (target['xui.Com']) {
        if (subId !== false) {
            target.getUIComponents().each(function (profile) {
                profile.linkParent(pro, subId);
            });
        }
        if (pro.renderId) {
            if (subId = typeof subId == 'string' ? subId : null) subId = pro.getSubIdByItemId(subId);
            parentNode = pro.keys.PANEL ? pro.getSubNode(pro.keys.PANEL, subId) : pro.getRoot();
            if ((!parentNode.isEmpty()) && (!prop.lazyAppend || parentNode.css('display') != 'none'))
                doAppend(parentNode, target);
        }
        else {
            (pro.excoms || (pro.excoms = [])).push([target, subId]);
        }
    } else {
        if (subId !== false) {
            if (target['xui.UI']) {
                target.each(function (profile) {
                    profile.linkParent(pro, subId);
                });
            }
        }
        if (pro.renderId) {
            if (subId = typeof subId == 'string' ? subId : null) subId = pro.getSubIdByItemId(subId);
            parentNode = pro.keys.PANEL ? pro.getSubNode(pro.keys.PANEL, subId) : pro.getRoot();
            if ((!parentNode.isEmpty()) && (!prop.lazyAppend || parentNode.css('display') != 'none'))
                doAppend(parentNode, target);
        } else {
            if (!target['xui.UI']) {
                if (!pro.exchildren)
                    pro.exchildren = [];
                pro.exchildren.push([target, subId]);
            }
        }
    }

    if (pro.afterAppend)
        this.afterAppend(pro, target);
    return this;
}
function applyAppendTo(xuiUI) {
    xuiUI.prototype.appendBefore = xui.UI.prototype.appendBefore;
    xuiUI.prototype.appendAfter = xui.UI.prototype.appendAfter;
    xuiUI.prototype._customAppend = xui.UI.prototype._customAppend;
}
applyAppendTo(xui.UI.Panel);
applyAppendTo(xui.UI.Div);
applyAppendTo(xui.UI.Span);
applyAppendTo(xui.UI.Group);
algocrunch
 
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: appendBefore and appendAfter

Postby support » Wed Dec 04, 2013 1:16 pm

Great! Thanks for your contribution.
But if we add the code into the lib, we have to conside the right position of "linkParent" function.
It's an advanced function for most users.
support
 
Posts: 352
Joined: Sat Apr 27, 2013 9:22 am

Re: appendBefore and appendAfter

Postby algocrunch » Wed Dec 04, 2013 1:55 pm

Good point. I'm afraid I am not familiar enough with the code to make sure the linkParent placement is 100% correct under all circumstances. Is this an enhancement the CrossUI team can complete?
algocrunch
 
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: appendBefore and appendAfter

Postby support » Thu Dec 05, 2013 11:23 am

I added two args to append function = > (target, subId, pre, base), you can test it.
support
 
Posts: 352
Joined: Sat Apr 27, 2013 9:22 am

Re: appendBefore and appendAfter

Postby algocrunch » Thu Dec 05, 2013 1:57 pm

Can you explain what these 2 fields are? Is "pre" the control to add before and "base" the control to add after? Thanks!
algocrunch
 
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: appendBefore and appendAfter

Postby support » Fri Dec 06, 2013 3:49 pm

if no [base]

[ <pre=true> [n...][n1][n2][n...] <pre=false> ]

if [base] is specified:

[ [n...][n1]<pre=true>[base]<pre=false>[n2][n...] ]
support
 
Posts: 352
Joined: Sat Apr 27, 2013 9:22 am

Re: appendBefore and appendAfter

Postby algocrunch » Fri Dec 06, 2013 5:37 pm

Took a minute, but I get it. If no base is specified and pre=true, then the new control is added at the beginning of the list. If no base is specified and pre=false, then the new control is added at the end (default behavior).
If base is specified then the new control is added either before or after the base depending on the value of pre. this sounds perfect, I will test it out. Thanks!
algocrunch
 
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: appendBefore and appendAfter

Postby algocrunch » Fri Dec 06, 2013 8:29 pm

I am getting a variable undefined error. It looks like your variable naming is incorrect:

append:function(target, subId, pre, base){
var pro=this.get(0),prop=pro.properties, parentNode;
// default is append to last
var index,baseN;
// add to first, or previous of base
pre=!!pre;
if(base){
if(base['xui.UIProfile']){
}else if(p['xui.UI']){
base=base.get(0);
}

This should else if(base['xui.UI']), not p, correct?
algocrunch
 
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: appendBefore and appendAfter

Postby support » Sat Dec 07, 2013 12:05 pm

Yeah, we'll fix it.
support
 
Posts: 352
Joined: Sat Apr 27, 2013 9:22 am


Return to Functional Requirement

Who is online

Users browsing this forum: No registered users and 0 guests

cron