Can one limit overlapping window to its parent space?

answered 2013-04-01 11:18:40 +0800

benbai
2228 ● 6
http://www.zkoss.org

You can listen to sizing/moving events and fix the size and position as needed, e.g.,

<zk>
    <script><![CDATA[
        function fixSize (uuid) {
            var wgt = zk.Widget.$('#'+uuid),
                n = wgt.$n(),
                $n = jq(n),
                parent = wgt.parent,
                $pcave = jq(parent.$n('cave')),
                w, h,
                fireOnSize;
            w = $pcave.width();
            if ($n.width() > w) {
                fireOnSize = true;
                n.style.width = w + 'px';
            }
            h = $pcave.height();
            if ($n.height() > h) {
                fireOnSize = true;
                n.style.height = h + 'px';
            }
            if (fireOnSize) {
                _fireOnSize(wgt, $n);
            }
        }
        function fixPosition (uuid) {
            fixSize(uuid);
            var wgt = zk.Widget.$('#'+uuid),
                n = wgt.$n(),
                $n = jq(n),
                parent = wgt.parent,
                $pcave = jq(parent.$n('cave')),
                noffset = $n.offset(),
                pcoffset = $pcave.offset(),
                nt, nb, nl, nr,
                t, b, l, r,
                diff,
                fireOnSize;
            t = pcoffset.top;
            nt = noffset.top;
            if (nt < t) {
                fireOnSize = true;
                n.style.top = t + 'px';
            } else {
                b = t + $pcave.height();
                nb = nt + $n.height();
                if (nb > b) {
                    fireOnSize = true;
                    diff = nb - b;
                    n.style.top = nt - diff + 'px';
                }
            }
            l = pcoffset.left;
            nl = noffset.left;
            if (nl < l) {
                fireOnSize = true;
                n.style.left = l + 'px';
            } else {
                r = l + $pcave.width();
                nr = nl + $n.width();
                if (nr > r) {
                    fireOnSize = true;
                    diff = nr - r;
                    n.style.left = nl - diff + 'px';
                }
            }
            if (fireOnSize) {
                _fireOnSize(wgt, $n);
            }
        }
        function _fireOnSize (wgt, $n) {
            var data = {
                top: $n.offset().top + 'px', left: $n.offset().left + 'px',
                height: $n.height() + 'px', width: $n.width() + 'px'
            };
            wgt.fire('onSize', data, {ignorable: true});
        }
    ]]></script>
    <vlayout hflex="1" vflex="1">
        <window title="first win" border="normal" vflex="1">
            <window mode="overlapped"
                title="overlapped win" border="normal"
                sizable="true" maximizable="true">
                <attribute name="onSize"><![CDATA[
                    Clients.evalJavaScript("fixPosition('"+self.getUuid()+"')");
                ]]></attribute>
                <attribute name="onMaximize"><![CDATA[
                    Clients.evalJavaScript("fixPosition('"+self.getUuid()+"')");
                ]]></attribute>
                <attribute name="onMove"><![CDATA[
                    Clients.evalJavaScript("fixPosition('"+self.getUuid()+"')");
                ]]></attribute>
            </window>
        </window>
        <window title="second win" border="normal" vflex="1" />
    </vlayout>
</zk>

answered 2013-04-09 18:49:02 +0800

sarafudheen
0

Hi, SergeTk, Can you please post this solution here? I have simiar issue

answered 2013-04-09 18:49:23 +0800

sarafudheen
0

Hi, SergeTk, Can you please post this solution here? I have simiar issue