diff --git a/packages/rocketchat-ui-master/package.js b/packages/rocketchat-ui-master/package.js
index e2b51652edf..0626e69ab55 100644
--- a/packages/rocketchat-ui-master/package.js
+++ b/packages/rocketchat-ui-master/package.js
@@ -27,5 +27,6 @@ Package.onUse(function(api) {
api.addFiles('client/main.js', 'client');
api.addFiles('server/inject.js', 'server');
+ api.addAssets('server/dynamic-css.js', 'server');
api.addAssets('public/icons.svg', 'server');
});
diff --git a/packages/rocketchat-ui-master/server/dynamic-css.js b/packages/rocketchat-ui-master/server/dynamic-css.js
index 9505c7ad4e8..95f48091978 100644
--- a/packages/rocketchat-ui-master/server/dynamic-css.js
+++ b/packages/rocketchat-ui-master/server/dynamic-css.js
@@ -1,53 +1,57 @@
-/* global DynamicCss */
+/* eslint-disable */
'use strict';
-export default () => {
+(function() {
+ var debounce = function debounce(func, wait, immediate) {
+ var timeout = void 0;
+ return function () {
+ var _this = this;
- const debounce = (func, wait, immediate) => {
- let timeout;
- return function(...args) {
- const later = () => {
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ var later = function later() {
timeout = null;
- !immediate && func.apply(this, args);
+ !immediate && func.apply(_this, args);
};
- const callNow = immediate && !timeout;
+
+ var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
callNow && func.apply(this, args);
};
};
- const cssVarPoly = {
- test() { return window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)'); },
- init() {
+
+ var cssVarPoly = {
+ test: function test() {
+ return window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)');
+ },
+ init: function init() {
if (this.test()) {
return;
}
+
console.time('cssVarPoly');
cssVarPoly.ratifiedVars = {};
cssVarPoly.varsByBlock = [];
cssVarPoly.oldCSS = [];
-
cssVarPoly.findCSS();
cssVarPoly.updateCSS();
console.timeEnd('cssVarPoly');
},
- findCSS() {
- const styleBlocks = Array.prototype.concat.apply([], document.querySelectorAll('#css-variables, link[type="text/css"].__meteor-css__'));
-
- // we need to track the order of the style/link elements when we save off the CSS, set a counter
- let counter = 1;
-
- // loop through all CSS blocks looking for CSS variables being set
- styleBlocks.map(block => {
- // console.log(block.nodeName);
+ findCSS: function findCSS() {
+ var styleBlocks = Array.prototype.concat.apply([], document.querySelectorAll('#css-variables, link[type="text/css"].__meteor-css__'));
+ var counter = 1;
+ styleBlocks.map(function (block) {
if (block.nodeName === 'STYLE') {
- const theCSS = block.innerHTML;
+ var theCSS = block.innerHTML;
cssVarPoly.findSetters(theCSS, counter);
cssVarPoly.oldCSS[counter++] = theCSS;
} else if (block.nodeName === 'LINK') {
- const url = block.getAttribute('href');
+ var url = block.getAttribute('href');
cssVarPoly.oldCSS[counter] = '';
- cssVarPoly.getLink(url, counter, function(counter, request) {
+ cssVarPoly.getLink(url, counter, function (counter, request) {
cssVarPoly.findSetters(request.responseText, counter);
cssVarPoly.oldCSS[counter++] = request.responseText;
cssVarPoly.updateCSS();
@@ -55,118 +59,122 @@ export default () => {
}
});
},
-
- // find all the "--variable: value" matches in a provided block of CSS and add them to the master list
- findSetters(theCSS, counter) {
- // console.log(theCSS);
+ findSetters: function findSetters(theCSS, counter) {
cssVarPoly.varsByBlock[counter] = theCSS.match(/(--[^:; ]+:..*?;)/g);
},
- // run through all the CSS blocks to update the variables and then inject on the page
- updateCSS: debounce(() => {
- // first lets loop through all the variables to make sure later vars trump earlier vars
+
+ updateCSS: debounce(function () {
cssVarPoly.ratifySetters(cssVarPoly.varsByBlock);
+ cssVarPoly.oldCSS.filter(function (e) {
+ return e;
+ }).forEach(function (css, id) {
+ var newCSS = cssVarPoly.replaceGetters(css, cssVarPoly.ratifiedVars);
+ var el = document.querySelector('#inserted' + id);
- // loop through the css blocks (styles and links)
- cssVarPoly.oldCSS.filter(e => e).forEach((css, id) => {
- const newCSS = cssVarPoly.replaceGetters(css, cssVarPoly.ratifiedVars);
- const el = document.querySelector(`#inserted${ id }`);
if (el) {
- // console.log("updating")
el.innerHTML = newCSS;
} else {
- // console.log("adding");
- const style = document.createElement('style');
+ var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = newCSS;
style.classList.add('inserted');
- style.id = `inserted${ id }`;
+ style.id = 'inserted' + id;
document.getElementsByTagName('head')[0].appendChild(style);
}
});
}, 100),
- // parse a provided block of CSS looking for a provided list of variables and replace the --var-name with the correct value
- replaceGetters(oldCSS, varList) {
- return oldCSS.replace(/var\((--.*?)\)/gm, (all, variable) => varList[variable]);
+ replaceGetters: function replaceGetters(oldCSS, varList) {
+ return oldCSS.replace(/var\((--.*?)\)/gm, function (all, variable) {
+ return varList[variable];
+ });
},
-
- // determine the css variable name value pair and track the latest
- ratifySetters(varList) {
- // loop through each block in order, to maintain order specificity
- varList.filter(curVars => curVars).forEach(curVars => {
- // const curVars = varList[curBlock] || [];
- curVars.forEach(function(theVar) {
- // console.log(theVar);
- // split on the name value pair separator
- const matches = theVar.split(/:\s*/);
- // console.log(matches);
- // put it in an object based on the varName. Each time we do this it will override a previous use and so will always have the last set be the winner
- // 0 = the name, 1 = the value, strip off the ; if it is there
+ ratifySetters: function ratifySetters(varList) {
+ varList.filter(function (curVars) {
+ return curVars;
+ }).forEach(function (curVars) {
+ curVars.forEach(function (theVar) {
+ var matches = theVar.split(/:\s*/);
cssVarPoly.ratifiedVars[matches[0]] = matches[1].replace(/;/, '');
});
});
- Object.keys(cssVarPoly.ratifiedVars).filter(key => {
+ Object.keys(cssVarPoly.ratifiedVars).filter(function (key) {
return cssVarPoly.ratifiedVars[key].indexOf('var') > -1;
- }).forEach(key => {
- cssVarPoly.ratifiedVars[key] = cssVarPoly.ratifiedVars[key].replace(/var\((--.*?)\)/gm, function(all, variable) {
+ }).forEach(function (key) {
+ cssVarPoly.ratifiedVars[key] = cssVarPoly.ratifiedVars[key].replace(/var\((--.*?)\)/gm, function (all, variable) {
return cssVarPoly.ratifiedVars[variable];
});
});
},
- // get the CSS file (same domain for now)
- getLink(url, counter, success) {
- const request = new XMLHttpRequest();
+ getLink: function getLink(url, counter, success) {
+ var request = new XMLHttpRequest();
request.open('GET', url, true);
request.overrideMimeType('text/css;');
- request.onload = function() {
+
+ request.onload = function () {
if (request.status >= 200 && request.status < 400) {
- // Success!
- // console.log(request.responseText);
if (typeof success === 'function') {
success(counter, request);
}
} else {
- // We reached our target server, but it returned an error
console.warn('an error was returned from:', url);
}
};
- request.onerror = function() {
- // There was a connection error of some sort
+ request.onerror = function () {
console.warn('we could not get anything from:', url);
};
request.send();
}
-
};
- const stateCheck = setInterval(() => {
+ var stateCheck = setInterval(function () {
if (document.readyState === 'complete' && typeof Meteor !== 'undefined') {
clearInterval(stateCheck);
- // document ready
cssVarPoly.init();
}
}, 100);
- DynamicCss = typeof DynamicCss !=='undefined'? DynamicCss : {};
- DynamicCss.test = () => window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)');
- DynamicCss.run = debounce((replace = false) => {
+ var DynamicCss = {};
+
+ DynamicCss.test = function () {
+ return window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)');
+ };
+
+ DynamicCss.run = debounce(function () {
+ var replace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
if (replace) {
- // const variables = RocketChat.models.Settings.findOne({_id:'theme-custom-variables'}, {fields: { value: 1}});
- const colors = RocketChat.settings.collection.find({_id:/theme-color-rc/i}, {fields: { value: 1, editor: 1}}).fetch().filter(color => color && color.value);
+ var colors = RocketChat.settings.collection.find({
+ _id: /theme-color-rc/i
+ }, {
+ fields: {
+ value: 1,
+ editor: 1
+ }
+ }).fetch().filter(function (color) {
+ return color && color.value;
+ });
if (!colors) {
return;
}
- const css = colors.map(({_id, value, editor}) => {
+
+ var css = colors.map(function (_ref) {
+ var _id = _ref._id,
+ value = _ref.value,
+ editor = _ref.editor;
+
if (editor === 'expression') {
- return `--${ _id.replace('theme-color-', '') }: var(--${ value });`;
+ return '--' + _id.replace('theme-color-', '') + ': var(--' + value + ');';
}
- return `--${ _id.replace('theme-color-', '') }: ${ value };`;
+
+ return '--' + _id.replace('theme-color-', '') + ': ' + value + ';';
}).join('\n');
- document.querySelector('#css-variables').innerHTML = `:root {${ css }}`;
+ document.querySelector('#css-variables').innerHTML = ':root {' + css + '}';
}
+
cssVarPoly.init();
}, 1000);
-};
+})();
diff --git a/packages/rocketchat-ui-master/server/inject.js b/packages/rocketchat-ui-master/server/inject.js
index d83897f8890..dd9bb80bb11 100644
--- a/packages/rocketchat-ui-master/server/inject.js
+++ b/packages/rocketchat-ui-master/server/inject.js
@@ -27,7 +27,7 @@ RocketChat.models.Settings.find({_id:/theme-color-rc/i}, {fields: { value: 1}}).
changed: renderDynamicCssList
});
-Inject.rawHead('dynamic', ``);
+Inject.rawHead('dynamic', ``);
Inject.rawBody('icons', Assets.getText('public/icons.svg'));