flexBoxDirective.js

angular.module("ui.ssnau.flexBox", [])
    .directive("flexBox", function () {
        var isDragging = false;
        var meta = {};
        var hasBind = false;
        var ndCurtain = $("<div style='position:absolute;width:100%;height:100%;opacity:0;z-index:1000;background:blue;left:0px;top:0px;'></div>");

        function bindMouseEvent(elem) {
            $(elem).on("mousemove", function (e) {
                if (!isDragging) return;
                var ndElem = meta.delimeter,
                    ndPrev = ndElem.prev(),
                    ndNext = ndElem.next() == ndCurtain ? []: ndElem.next(),
                    pageX = e.pageX || e.originalEvent.pageX,
                    pageY = e.pageY || e.originalEvent.pageY;

                if (meta.direction === "row") {
                    processDiff([ndPrev, ndNext], "width", pageX - meta.x, ["+", "-"]);
                }

                if (meta.direction === "column") {
                    processDiff([ndPrev, ndNext], "height", pageY - meta.y, ["+", "-"]);
                }

                //renew meta info
                meta.x = pageX;
                meta.y = pageY;
            });

            $(elem).on("mousedown", ".delimeter", function (e) {
                isDragging = true;
                meta = {
                    delimeter: $(this), //delimeter is self
                    direction: flexDirection(elem),
                    x: e.pageX || e.originalEvent.pageX,
                    y: e.pageY || e.originalEvent.pageY
                };
                ndCurtain.appendTo(elem);
                e.preventDefault();
                e.stopPropagation();
            });

            //only bind globally once
            if (hasBind) return;
            hasBind = true;
            $(document).on("mouseup", function () {
                isDragging = false;
                meta = {};
                ndCurtain.remove();
            });


        }

        /**
         *
         * @param nodes Array [JQueryNode]
         * @param demension "width" | "height"
         * @param diff integer
         * @param ops Array ["+" | "-"]
         */
        function processDiff(nodes, demension, diff, ops) {
            var results = [];
            for (var i = 0; i < nodes.length; i++) {
                var node = nodes[i];
                if (!node.length) {
                    results.push(null);
                    continue;
                };
                var orig = (demension === "width") ? node.width() : node.height();
                var result = (ops[i] === "+") ? (orig + diff) : (orig - diff);
                var min = parseInt(window.getComputedStyle(node[0])["min"+ demension[0].toUpperCase() + demension.substr(1)]) || 0;
                console.log(result + " ** " + min);
                if (result <= min) return; //Only if there is a result being 0, end this function
                results.push(result);
            }

            results.forEach(function (result, index) {
                    if (node.length){
                        nodes[index].css(demension, result + "px");
                    }
                }
            );
        }

        function flexDirection(elem) {
            var el = elem.length ? elem[0] : elem,
                cs = window.getComputedStyle(el);
            return cs.webkitFlexDirection || cs.flexDirection;
        }

        return {
            restrict: "A",
            link: function (scope, elem) {
                bindMouseEvent(elem);
            }
        };
    });