extra.js

// ulysses extra utility functions

goog.provide('ulysses.extra')

ulysses.extra = (function() {
    "use strict";

    /**
     * Given a multiselect element, get array of selected values
     */
    var multiselect_values = function(el) {
        var values = [];

        for (var i = 0, n = el.options.length; i < n; i++) {
            var option = el.options[i];

            if (option.selected && option.value) {
                values.push(option.value);
            }
        }

        return values;
    };

    /**
     * Given a select element, get selected value (or null)
     */
    var select_values = function(el) {
        var mv = multiselect_values(el);

        return mv.length > 0 ? mv[0] : null;
    };

    /**
     * Pack blocks into bin
     * Adapted from:
     * http://codeincomplete.com/posts/2011/5/7/bin_packing/
     */
    var Packer = (function() {

        Packer = function(w, h) {
            this.init(w, h);
        };

        Packer.prototype = {
            init: function(w, h) {
                this.root = { x: 0, y: 0, w: w, h: h };
            },

            fit: function(blocks) {
                var n, node, block, packed;

                packed = [];

                for (n = 0; n < blocks.length; n++) {
                    block = blocks[n];

                    if (node = this.findNode(this.root, block.w, block.h)) {
                        block.fit = this.splitNode(node, block.w, block.h);
                        packed.push(block);
                    }
                }

                return packed;
            },

            findNode: function(root, w, h) {
                if (root.used) {
                    return this.findNode(root.right, w, h) || this.findNode(root.down, w, h);
                } else if ((w <= root.w) && (h <= root.h)) {
                    return root;
                } else {
                    return null;
                }
            },

            splitNode: function(node, w, h) {
                node.used = true;
                node.down  = { x: node.x,     y: node.y + h, w: node.w,     h: node.h - h };
                node.right = { x: node.x + w, y: node.y,     w: node.w - w, h: h          };
                return node;
            }
        };

        return Packer;
    })();

    /**
     * Get the dimensions of a piece of text
     * ex. textDimensions('hello world!', '16px');
     */
    var textDimensions = (function() {
        var element = null;
        var nameNode = null;

        var createDummyElement = function(name, fontSize) {
            if (!element) {
                element = document.createElement('div');
                nameNode = document.createTextNode(name);

                element.appendChild(nameNode);

                element.style.lineHeight = '1.3';
                element.style.fontFamily = 'Source Sans Pro';
                element.style.fontWeight = '100';
                element.style.position = 'absolute';
                element.style.visibility = 'hidden';
                element.style.left = '-999px';
                element.style.top = '-999px';
                element.style.width = 'auto';
                element.style.height = 'auto';

                document.body.appendChild(element);
            } else {
                var newNameNode = document.createTextNode(name);
                element.replaceChild(newNameNode, nameNode);
                nameNode = newNameNode;
            }

            element.style.fontSize = fontSize;

            return element;
        };

        var getDomTextDimensions = function(name, fontSize) {
            var element = createDummyElement(name, fontSize);

            return {
                w: element.offsetWidth,
                h: element.offsetHeight,
                name: name
            };
        };

        return getDomTextDimensions;
    })();

    return {
        multiselect_values: multiselect_values,
        select_values: select_values,
        Packer: Packer,
        textDimensions: textDimensions
    };
})();