oxjs/source/Ox.UI/js/Core/Theme.js

'use strict';

/*@
Ox.Theme <f> get/set theme
    ()      -> <s>  Get current theme
    (theme) -> <s>  Set current theme
    theme <s>   name of theme
@*/

Ox.Theme = (function() {

    var localStorage = Ox.localStorage('Ox'),
        that = function(theme) {
            return theme ? setTheme(theme) : getTheme();
        };

    function getTheme() {
        var classNames = Ox.UI.$body.attr('class'),
            theme = '';
        classNames && Ox.forEach(classNames.split(' '), function(className) {
            if (Ox.startsWith(className, 'OxTheme')) {
                theme = className.replace('OxTheme', '').toLowerCase();
                Ox.Break();
            }
        });
        return theme;
    }

    function renderElement(value, type) {
        var $element, background, color, lightness = that[getTheme()].lightness;
        if (type == 'hue') {
            background = Ox.rgb(value, 1, lightness.background);
            color = Ox.rgb(value, 1, lightness.color);
        } else if (type == 'saturation') {
            background = Ox.range(7).map(function(i) {
                return Ox.rgb(i * 60, value, lightness.background);
            });
            color = Ox.rgb(0, 0, lightness.color);
        } else if (type == 'lightness') {
            background = Ox.range(3).map(function() {
                return Math.round(value * 255);
            });
            color = Ox.range(3).map(function() {
                return Math.round(value * 255) + (value < 0.5 ? 128 : -128);
            });
        } else if (type == 'gradient') {
            background = Ox.range(2).map(function(i) {
                return Ox.rgb(value, 1, lightness.background).map(function(value) {
                    return value + (i == 0 ? 16 : -16);
                });
            });
            color = Ox.rgb(value, 1, lightness.color);
        }
        $element = $('<div>')
            .addClass(
                'OxColor'
                + (type == 'lightness' ? '' : ' OxColor' + Ox.toTitleCase(type))
            )
            .css({
                color: 'rgb(' + color.join(', ') + ')'
            })
            .data(type == 'lightness' ? {} : {OxColor: value});
        if (Ox.isNumber(background[0])) {
            $element.css({
                background: 'rgb(' + background.join(', ') + ')'
            });
        } else {
            ['moz', 'o', 'webkit'].forEach(function(browser) {
                $element.css({
                    background: '-' + browser + '-linear-gradient('
                        + (background.length == 2 ? 'top' : 'left') + ', '
                        + background.map(function(rgb, i) {
                            return 'rgb(' + rgb.join(', ') + ') '
                                + Math.round(i * 100 / (background.length - 1)) + '%';
                        }).join(', ')
                        + ')'
                });
            });
        }
        return $element;
    };

    function setTheme(theme) {
        var currentTheme = getTheme();
        if (theme != currentTheme) {
            Ox.UI.$body
                .addClass('OxTheme' + Ox.toTitleCase(theme))
                .removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
            $('.OxColor').each(function() {
                var $element = $(this);
                if ($element.hasClass('OxColorName')) {
                    $element.attr({src: Ox.UI.getImageURL(
                        $element.data('OxImage'), theme, $element.data('OxColor')
                    )});
                } else {
                    Ox.forEach(['hue', 'saturation', 'gradient'], function(type) {
                        if ($element.hasClass('OxColor' + Ox.toTitleCase(type))) {
                            var value = $element.data('OxColor'),
                                $element_ = renderElement(value, type);
                            $element.css({
                                background: $element_.css('background'),
                                color: $element_.css('color')
                            });
                            Ox.Break();
                        }
                    });
                }
            });
            $('img').add('input[type="image"]').not('.OxColor').not('.OxVideo')
                .each(function(element) {
                    var $element = $(this), src = $element.attr('src');
                    $element.attr({
                        src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
                    });
                });
        }
        localStorage({theme: theme});
        return that;
    }

    /*@
    formatColor <f> Returns a themed colored element
    @*/
    that.formatColor = function(value, type) {
        return renderElement(value, type)
            .css({textAlign: 'center'})
            .html(Ox.formatNumber(value, 3));
    };

    /*@
    formatColorLevel <f> Returns a themed colored element
    @*/
    that.formatColorLevel = function(index, values, hueRange) {
        hueRange = hueRange || (Ox.isBoolean(index) ? [0, 120] : [120, 0]);
        var step = (hueRange[1] - hueRange[0]) / (values.length - 1),
            hue = hueRange[0] + index * step;
        return renderElement(hue, 'gradient')
            .css({textAlign: 'center'})
            .html(values[+index]);
    };

    /*@
    getColorImage <f> Returns a themed colored image
    @*/
    that.getColorImage = function(name, value, tooltip) {
        return (tooltip ? Ox.Element({element: '<img>', tooltip: tooltip}) : $('<img>')) 
            .addClass('OxColor OxColorName')
            .attr({src: Ox.UI.getImageURL(name, null, value)})
            .data({OxColor: value, OxImage: name});
    };

    return that;

}());