Resizer, resize flags

Write your functional requirement here, be Specific please!

Resizer, resize flags

Postby algocrunch » Wed Nov 27, 2013 3:04 am

We have a requirement for the Resizer control to only allow resizing in certain directions. As a work around I was able to add the notion of "resizeFlags" and enhance Resizer's _onDragstop function to obey these flags:

Code: Select all
/************** Fix resizer to check if resize flags are set ************/
xui.UI.Resizer._onDragstop = function (profile, e, src, args) {
    var cssPos, size, pos, o = profile.proxy;

    if (!args.move)
        size = { width: o.width() - profile.o_w, height: o.height() - profile.o_h };

    if (args.left || args.top || args.move) {
        cssPos = o.cssPos();
        pos = { left: cssPos.left - profile.o_pos.left, top: cssPos.top - profile.o_pos.top };
    }

    /************ Additions **********/
    var flags = profile.$parentUIProfile.boxing().resizeFlags;
    if (flags) {
        if (pos) {
            if (flags.indexOf('l') < 0)
                pos.left = 0;
            if (flags.indexOf('t') < 0)
                pos.top = 0;
        }
        if (size) {
            if (flags.indexOf('r') < 0)
                size.width = 0;
            if (flags.indexOf('b') < 0)
                size.height = 0;
        }
    }
    /********************/

    if (profile.onUpdate && false === profile.boxing().onUpdate(profile, profile._target, size, pos)) { }
    else {
        profile.box._onUpdate(profile, profile._target, size, pos);
    }

    if (profile.properties._attached) {
        if (xui.browser.ie6) profile._target.ieRemedy();
        profile.proxy.html('', false).css({ visibility: 'hidden', border: 'none', zIndex: '0', width: '0', height: '0' });
    }
    //profile.boxing().active();
    profile.$onDrag = false;
}
algocrunch
 
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: Resizer, resize flags

Postby support » Wed Nov 27, 2013 8:53 am

Demo code:

   
Class('App', 'xui.Com',{
Instance:{
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};

append((new xui.UI.Block())
.setHost(host,"ctl_block1")
.setTagVar({"resizerProp":{"horizontal":false,forceVisible:true}})
.setLeft(60)
.setTop(30)
.setResizer(true)
.setHtml("Vertical Resizer<br>")
);

append((new xui.UI.Block())
.setHost(host,"ctl_block2")
.setTagVar({"resizerProp":{"vertical":false,forceVisible:true}})
.setLeft(320)
.setTop(40)
.setResizer(true)
.setHtml("Horizontal Resize<br>")
);

return children;
// ]]Code created by CrossUI RAD Tools
}
}
});
   
Attachments
resizer.png
resizer.png (2.61 KiB) Viewed 5411 times
support
 
Posts: 352
Joined: Sat Apr 27, 2013 9:22 am

Re: Resizer, resize flags

Postby algocrunch » Wed Nov 27, 2013 1:11 pm

I cannot find information about resizerProp in the builder or in the APIs. What we need is for only the RIGHT and BOTTOM edges to be grabbable. What would the code be for that?
Can you add this information to the API or point me to where I can find more details about what we can use in "setTagVar"?
algocrunch
 
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: Resizer, resize flags

Postby support » Thu Nov 28, 2013 1:11 am

Currently, it's a hidden function. We'll add getResizerProp/setResizerProp functions in the next verion.
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 1 guest

cron