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, final;

                final = [];

                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);
                        final.push(block);
                    }
                }

                return final;
            },

            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
     * textDimensions('hello world!',
     * 				  { fontFamily: 'Arial', fontSize: '16px', fontWeight: 'normal'})
     */
    var textDimensions = (function() {
        var createDummyElement = function(name, options) {
            var element = document.createElement('div'),
                nameNode = document.createTextNode(name);

            element.appendChild(nameNode);

            element.style.fontFamily = options.fontFamily;
            element.style.fontSize = options.fontSize;
            element.style.fontWeight = options.fontWeight;
            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);

            return element;
        };

        var destroyElement = function(element) {
            element.parentNode.removeChild(element);
        }

        var cache = {};

        return function(name, options) {
            var cacheKey = JSON.stringify({ name: name, options: options });

            if (cache[cacheKey]) {
                return cache[cacheKey];
            }

            // prepare options
            options = options || {};
            options.fontFamily = options.fontFamily || 'Times';
            options.fontSize = options.fontSize || '16px';
            options.fontWeight = options.fontWeight || 'normal';

            var element = createDummyElement(name, options);

            var result = {
                w: element.offsetWidth,
                h: element.offsetHeight,
                name: name
            };

            destroyElement(element);

            cache[cacheKey] = result;

            return result;
        };
    })();

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