https://123ru.net/js/jquery.injectCSS.js

1/*
2 * jquery.injectCSS.js - jquery css injection plugin
3 * Copyright (C) 2013, Robert Kajic ([email protected])
4 * http://kajic.com
5 *
6 * https://github.com/kajic/jquery-injectCSS
7 * Allows for injection of CSS defined as javascript JSS objects.
8 *
9 * Based on JSS (http://jss-lang.org/).
10 *
11 * Licensed under the MIT License.
12 *
13 * Date: 2013-01-08
14 * Version: 0.1
15 */
16
17(function (jQuery) {
18    'use strict';
19
20    function toCSS(jss, options) {
21        function jsonToCSS(scope, css) {
22            if (scope && !result[scope]) {
23                result[scope] = {};
24            }
25            for (var property in css) {
26                var value = css[property];
27                if (value instanceof Array) {
28                    var values = value;
29                    for (var i = 0; i < values.length; i++) {
30                        addProperty(scope, property, values[i]);
31                    }
32                }
33                else {
34                    switch (typeof(value)) {
35                        case "number":
36                        case "string":
37                            addProperty(scope, property, value);
38                            break;
39                        case "object":
40                            var endChar = property.charAt(property.length - 1);
41                            if (scope && (endChar === "_" || endChar === "-")) {
42                                var variants = value;
43                                for (var key in variants) {
44                                    // key may be a comma separted list
45                                    var list = key.split(/\s*,\s*/);
46                                    for (var j = 0; j < list.length; j++) {
47                                        var valueVariant = variants[key];
48                                        if (valueVariant instanceof Array) {
49                                            var valuesVariant = valueVariant;
50                                            for (var k = 0; k < valuesVariant.length; k++) {
51                                                addProperty(scope, property + list[j], valuesVariant[k]);
52                                            }
53                                        }
54                                        else {
55                                            addProperty(scope, property + list[j], variants[key]);
56                                        }
57                                    }
58                                }
59                            }
60                            else {
61                                jsonToCSS(makeSelectorName(scope, property), value);
62                            }
63                            break;
64                    }
65                }
66            }
67        }
68
69        function makePropertyName(n) {
70            return n.replace(/_/g, "-");
71        }
72
73        function makeSelectorName(scope, name) {
74            var snames = [];
75            var names = name.split(/\s*,\s*/);
76            var scopes = scope.split(/\s*,\s*/);
77            for (var s = 0; s < scopes.length; s++) {
78                var currentScope = scopes[s];
79                for (var i = 0; i < names.length; i++) {
80                    var currentName = names[i];
81                    if (currentName.charAt(0) === "&") {
82                        snames.push(currentScope + currentName.substr(1));
83                    } else {
84                        snames.push(currentScope ? currentScope + " " + currentName : currentName);
85                    }
86                }
87            }
88            return snames.join(", ");
89        }
90
91        function addProperty(scope, property, value) {
92
93            if (typeof(value) === "number" && !options.useRawValues) {
94                value = value + "px";
95            }
96
97            var properties = property.split(/\s*,\s*/);
98            for (var i = 0; i < properties.length; i++) {
99                var currentProperty = makePropertyName(properties[i]);
100
101                if (result[scope][currentProperty]) {
102                    result[scope][currentProperty].push(value);
103                } else {
104                    result[scope][currentProperty] = [value];
105                }
106            }
107        }
108
109        // --------------
110
111
112        var result = {};
113
114        if (typeof(jss) === "string") {
115            // evaluate the JSS object:
116            try {
117                eval("var jss = {" + jss + "}");
118            }
119            catch (e) {
120                return "/*\nUnable to parse JSS: " + e + "\n*/";
121            }
122        }
123
124        jsonToCSS("", jss);
125
126        // output result:
127        var ret = "";
128        for (var a in result) {
129            var css = result[a];
130            ret += a + " {\n";
131            for (var i in css) {
132                var values = css[i];    // this is an array !
133                for (var j = 0; j < values.length; j++) {
134                    ret += "\t" + i + ": " + values[j] + ";\n";
135                }
136            }
137            ret += "}\n";
138        }
139        return ret;
140    }
141
142    var defaults = {
143        truncateFirst: false,
144        container: null,
145        containerName: "injectCSSContainer",
146        useRawValues: false
147    };
148
149    jQuery.injectCSS = function (jss, options) {
150        options = jQuery.extend({}, defaults, options);
151
152        options.media = options.media || 'all';
153
154        var container = (options.container && jQuery(options.container)) || jQuery("#" + options.containerName);
155        if (!container.length) {
156            container = jQuery("<style></style>").appendTo('head').attr({

157                media: options.media,
158                id: options.containerName,
159                type: 'text/css'
160            });
161        }
162
163        var containerDomElem = container[0];
164        var isIeStylesheet = containerDomElem.styleSheet !== undefined && containerDomElem.styleSheet.cssText !== undefined;
165
166        var css = "";
167        if (!options.truncateFirst) {
168            css += isIeStylesheet ? containerDomElem.styleSheet.cssText : container.text();
169        }
170        css += toCSS(jss, options);
171
172        if (isIeStylesheet) {
173            containerDomElem.styleSheet.cssText = css;
174        } else {
175            container.text(css); //Others
176        }
177
178        return container;
179    };
180}(jQuery));