From cd690532b4759a4dae2185ed207ddc2ef5fe79a5 Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Thu, 15 Mar 2018 17:28:28 -0300 Subject: [PATCH] dynamic-css script isn't working on old browsers --- packages/rocketchat-ui-master/package.js | 1 + .../server/dynamic-css.js | 168 +++++++++--------- .../rocketchat-ui-master/server/inject.js | 2 +- 3 files changed, 90 insertions(+), 81 deletions(-) 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'));