[d565449] | 1 | 'use strict';
|
---|
| 2 |
|
---|
| 3 | var removeRule = require('./vcssom/removeRule').removeRule;
|
---|
| 4 |
|
---|
| 5 | exports.addon = function (renderer) {
|
---|
| 6 | // VCSSOM support only browser environment.
|
---|
| 7 | if (!renderer.client) return;
|
---|
| 8 |
|
---|
| 9 | if (process.env.NODE_ENV !== 'production') {
|
---|
| 10 | require('./__dev__/warnOnMissingDependencies')('cssom', renderer, ['createRule']); // cssom
|
---|
| 11 | }
|
---|
| 12 |
|
---|
| 13 | var kebab = renderer.kebab;
|
---|
| 14 |
|
---|
| 15 | function VRule (selector, prelude) {
|
---|
| 16 | this.rule = renderer.createRule(selector, prelude);
|
---|
| 17 | this.decl = {};
|
---|
| 18 | }
|
---|
| 19 | VRule.prototype.diff = function (newDecl) {
|
---|
| 20 | var oldDecl = this.decl;
|
---|
| 21 | var style = this.rule.style;
|
---|
| 22 | var property;
|
---|
| 23 | for (property in oldDecl)
|
---|
| 24 | if (newDecl[property] === undefined)
|
---|
| 25 | style.removeProperty(property);
|
---|
| 26 | for (property in newDecl)
|
---|
| 27 | if (newDecl[property] !== oldDecl[property])
|
---|
| 28 | style.setProperty(kebab(property), newDecl[property]);
|
---|
| 29 | this.decl = newDecl;
|
---|
| 30 | };
|
---|
| 31 | VRule.prototype.del = function () {
|
---|
| 32 | removeRule(this.rule);
|
---|
| 33 | };
|
---|
| 34 |
|
---|
| 35 | function VSheet () {
|
---|
| 36 | /**
|
---|
| 37 | * {
|
---|
| 38 | * '<at-rule-prelude>': {
|
---|
| 39 | * '<selector>': {
|
---|
| 40 | * color: 'red
|
---|
| 41 | * }
|
---|
| 42 | * }
|
---|
| 43 | * }
|
---|
| 44 | */
|
---|
| 45 | this.tree = {};
|
---|
| 46 | }
|
---|
| 47 | VSheet.prototype.diff = function (newTree) {
|
---|
| 48 | var oldTree = this.tree;
|
---|
| 49 |
|
---|
| 50 | // Remove media queries not present in new tree.
|
---|
| 51 | for (var prelude in oldTree) {
|
---|
| 52 | if (newTree[prelude] === undefined) {
|
---|
| 53 | var rules = oldTree[prelude];
|
---|
| 54 | for (var selector in rules)
|
---|
| 55 | rules[selector].del();
|
---|
| 56 | }
|
---|
| 57 | }
|
---|
| 58 |
|
---|
| 59 | for (var prelude in newTree) {
|
---|
| 60 | if (oldTree[prelude] === undefined) {
|
---|
| 61 | // Whole media query is new.
|
---|
| 62 | for (var selector in newTree[prelude]) {
|
---|
| 63 | var rule = new VRule(selector, prelude);
|
---|
| 64 | rule.diff(newTree[prelude][selector]);
|
---|
| 65 | newTree[prelude][selector] = rule;
|
---|
| 66 | }
|
---|
| 67 | } else {
|
---|
| 68 | // Old tree already has rules with this media query.
|
---|
| 69 | var oldRules = oldTree[prelude];
|
---|
| 70 | var newRules = newTree[prelude];
|
---|
| 71 |
|
---|
| 72 | // Remove rules not present in new tree.
|
---|
| 73 | for (var selector in oldRules)
|
---|
| 74 | if (!newRules[selector])
|
---|
| 75 | oldRules[selector].del();
|
---|
| 76 |
|
---|
| 77 | // Apply new rules.
|
---|
| 78 | for (var selector in newRules) {
|
---|
| 79 | var rule = oldRules[selector];
|
---|
| 80 | if (rule) {
|
---|
| 81 | rule.diff(newRules[selector]);
|
---|
| 82 | newRules[selector] = rule;
|
---|
| 83 | } else {
|
---|
| 84 | rule = new VRule(selector, prelude);
|
---|
| 85 | rule.diff(newRules[selector]);
|
---|
| 86 | newRules[selector] = rule;
|
---|
| 87 | }
|
---|
| 88 | }
|
---|
| 89 | }
|
---|
| 90 | }
|
---|
| 91 |
|
---|
| 92 | this.tree = newTree;
|
---|
| 93 | };
|
---|
| 94 |
|
---|
| 95 | renderer.VRule = VRule;
|
---|
| 96 | renderer.VSheet = VSheet;
|
---|
| 97 | };
|
---|