apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

dynamic-css script isn't working on old browsers

Browse Source
pull/10152/head
Karl Prieb 8 years ago
parent 5bcb58afda
commit cd690532b4
3 changed files with 90 additions and 81 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      packages/rocketchat-ui-master/package.js
  2. 168
      packages/rocketchat-ui-master/server/dynamic-css.js
  3. 2
      packages/rocketchat-ui-master/server/inject.js

1
packages/rocketchat-ui-master/package.js
Unescape View File

@ -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');
});

168
packages/rocketchat-ui-master/server/dynamic-css.js
Unescape View File

@ -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);
};
})();

2
packages/rocketchat-ui-master/server/inject.js
Unescape View File

@ -27,7 +27,7 @@ RocketChat.models.Settings.find({_id:/theme-color-rc/i}, {fields: { value: 1}}).
changed: renderDynamicCssList
});
Inject.rawHead('dynamic', `<script>(${ require('./dynamic-css.js').default.toString().replace(/\/\/.*?\n/g, '') })()</script>`);
Inject.rawHead('dynamic', `<script>${ Assets.getText('server/dynamic-css.js') }</script>`);
Inject.rawBody('icons', Assets.getText('public/icons.svg'));

Write Preview
Loading…
Cancel
Save