@sencha/cmd-linux-64/dist/js/node_modules/fashion/src/export/css/CssVariableManager.js

Productivity and performance optimization tool for building applications with Sencha Ext JS

"use strict";

var Fashion = require('../Base.js');
var Runtime = require('../Runtime.js');
var ValueParser = require('../parse/ValueParser.js');
var SourceBuilder = require('../type/SourceBuilder.js');

class CssVariableManager {

    constructor () {
        this.reset();
    }

    reset () {
        this.initFns = [];
        this.calcFns = [];
        this.variableMap = {};
        this.runtime = null;
    }

    createRuntime () {
        return new Runtime();
    }

    getRuntime () {
        var me = this,
            rt = me.runtime;
        if (!rt) {
            rt = me.createRuntime();
            for(var i = 0; i < me.initFns.length; i++) {
                me.initFns[i](rt);
            }
            me.runtime = rt;
        }
        return rt;
    }

    calculate (vars) {
        var me = this,
            rt = me.getRuntime(),
            globals = {},
            parser = new ValueParser(),
            map = me.variableMap,
            key, scope, sb, name, names, jsName, value, wrapper;

        scope = new rt.Scope();
        for (name in vars) {
            key = Fashion.getJsName(name.replace(me.nameRe, ''));
            if (key.indexOf('$') !== 0) {
                key = '$' + key;
            }
            scope.put(key, parser.parse(vars[name]));
        }

        rt._globalScope = scope;
        rt._currentScope = scope;
        for (var i = 0; i < me.calcFns.length; i++) {
            me.calcFns[i](rt);
        }

        sb = new SourceBuilder();

        vars = {};
        for (name in map) {
            names = map[name];
            for (var i = 0; i < names.length; i++) {
                key = names[i];
                jsName = '$' + Fashion.getJsName(key);
                value = scope.get(jsName);
                if (value) {
                    if (value.$isWrapper) {
                        value = value.value;
                    }
                    vars[key] = sb.toSource(value);
                }
            }
        }

        return vars;
    }

    applyVariables (vars) {
        var me = this,
            map = me.variableMap;

        for (var selector in map) {
            var variables = map[selector];
            var els = document.querySelectorAll(selector);
            if (els) {
                for (var i = 0; i < els.length; i++) {
                    for (var j = 0; j < variables.length; j++) {
                        var varName = variables[j];
                        els[i].style.setProperty('--' + varName, vars[varName]);
                    }
                }
            }
        }
    }

    setVariables (vars) {
        this.applyVariables(this.calculate(vars));
    }

    register (init, calc, map) {
        if (init) {
            this.initFns.push(init);
        }

        if (calc) {
            this.calcFns.push(calc);
        }

        if (map) {
            var vars = this.variableMap;
            for (var name in map) {
                var curr = vars[name];
                if (!curr) {
                    vars[name] = map[name];
                }
                else {
                    curr.push.apply(curr, map[name]);
                }
            }
        }
    }

    buildName (name) {
        return name.replace(/^--/, '').replace(/^\$/, '');
    }

    buildJsName (name) {
        return Fashion.getJsName(name)
    }

    buildNames (names) {
        var out = {}, name;
        for (name in names) {
            out[name] = this.buildName(names[name]);
        }
        return out;
    }

    buildJsNames (names) {
        var out = {}, name;
        for (name in names) {
            out[name] = this.buildJsName(names[name]);
        }
        return out;
    }

    getVariables () {
        var me = this,
            map = me.variableMap,
            out = {};

        for (var selector in map) {
            var variables = map[selector];
            var els = document.querySelectorAll(selector);
            if (els) {
                for (var i = 0; i < els.length; i++) {
                    for (var j = 0; j < variables.length; j++) {
                        var varName = variables[j];
                        out[varName] = els[i].style.getPropertyValue('--' + varName);
                    }
                }
            }
        }
        return out;
}
}

Fashion.apply(CssVariableManager.prototype, {
    $isExport: true,
    nameRe: /^--/
});

module.exports = CssVariableManager;