oxjs/source/Ox.UI/js/Bar/Ox.Resizebar.js

// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Resizebar <f:Ox.Element> Resizebar
    () ->              <f> Resizebar object
    (options) ->       <f> Resizebar object
    (options, self) -> <f> Resizebar object
    options <o> Options object
        collapsed   <b|false> inital collapse state
        collapsible <b|true> collapse state can be changed
        edge        <s|left> edge
        elements    <a|[]> elements of the bar
        orientation <s|horizontal> orientation, can be horizontal or vertical
        panel       <o|null> panel object
        resizeable  <b|true> can bar be resized
        resize      <a|[]> array with possible sizes
        size        <n|0> default size
    self    <o> Shared private variable
@*/
/**
*/
Ox.Resizebar = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                collapsed: false,
                collapsible: true,
                edge: 'left',
                elements: [],
                orientation: 'horizontal',
                parent: null,
                resizable: true,
                resize: [],
                size: 0
            })
            .options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
            .addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
            /*
            .attr({
                draggable: 'true'
            })
            .bind('dragstart', function(e) {
                // e.originalEvent.dataTransfer.setDragImage($('<div>')[0], 0, 0);
            })
            .bind('drag', function(e) {
                Ox.print('dragging', e)
            })
            */
            .bindEvent({
                anyclick: toggle,
                dragstart: dragstart,
                drag: drag,
                dragend: dragend
            })
            .append($('<div>').addClass('OxSpace'))
            .append($('<div>').addClass('OxLine'))
            .append($('<div>').addClass('OxSpace'));

    $.extend(self, {
        clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
        dimensions: Ox.UI.DIMENSIONS[self.options.orientation], // fixme: should orientation be the opposite orientation here?
        edges: Ox.UI.EDGES[self.options.orientation],
        leftOrTop: self.options.edge == 'left' || self.options.edge == 'top'
    });

    function dragstart(event, e) {
        if (self.options.resizable && !self.options.collapsed) {
            Ox.print('DRAGSTART')
			self.drag = {
			    startPos: e[self.clientXY],
                startSize: self.options.size
            }
		} else { Ox.print('NO DRAGSTART r !c', self.options.resizable, !self.options.collapsed) }
    }

    function drag(event, e) {
        if (self.options.resizable && !self.options.collapsed) {
            var d = e[self.clientXY] - self.drag.startPos,
                size = self.options.size;
            self.options.size = Ox.limit(
                self.drag.startSize + d * (self.leftOrTop ? 1 : -1),
                self.options.resize[0],
                self.options.resize[self.options.resize.length - 1]
            );
            Ox.forEach(self.options.resize, function(v) {
                if (self.options.size >= v - 8 && self.options.size <= v + 8) {
                    self.options.size = v;
                    return false;
                }
            });
            if (self.options.size != size) {
                that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
                // fixme: send {size: x}, not x
                if (self.leftOrTop) {
                    self.options.elements[0]
                        .css(self.dimensions[1], self.options.size + 'px')
                    self.options.elements[1]
                        .css(self.edges[2], (self.options.size + 1) + 'px')
                } else {
                    self.options.elements[0]
                        .css(self.edges[3], (self.options.size + 1) + 'px')
                    self.options.elements[1]
                        .css(self.dimensions[1], self.options.size + 'px')
                }
                triggerEvents('resize');
                self.options.parent.updateSize(self.leftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
            }
        }
    }

    function dragend() {
        if (self.options.resizable && !self.options.collapsed) {
            self.options.size != self.drag.startSize && triggerEvents('resizeend');
        }
    }

    function toggle() {
        if (self.options.collapsible) {
            // fixme: silly, pass a parameter
			self.options.parent.toggle(
			    self.leftOrTop ? 0 :
			    self.options.parent.options('elements').length - 1
			);
			self.options.collapsed = !self.options.collapsed;
        }
		/*
        //Ox.print('toggle');
        if (Ox.isUndefined(self.options.position)) {
            self.options.position = parseInt(self.options.parent.css(self.options.edge)) +
                    (self.options.collapsed ? self.options.size : 0);
        }
        var size = self.options.position -
                    (self.options.collapsed ? 0 : self.options.size),
            animate = {};
        //Ox.print('s.o.e', self.options.edge);
        animate[self.options.edge] = size;
        self.options.parent.animate(animate, 200, function() {
            var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 0 : 1;
            self.options.collapsed = !self.options.collapsed;
			Ox.Event.trigger(self.ids[i], 'toggle', self.options.collapsed);
            Ox.Event.trigger(self.ids[1 - i], 'resize', self.options.elements[1 - i][self.dimensions[1]]());
        });
		*/
    }

    function triggerEvents(event) {
        self.options.elements[0].triggerEvent(event,
            self.leftOrTop ?
            self.options.size :
            self.options.elements[0][self.dimensions[1]]()
        );
        self.options.elements[1].triggerEvent(event,
            self.leftOrTop ?
            self.options.elements[1][self.dimensions[1]]() :
            self.options.size
        );            
    }

    return that;

};