https://nuitdeschercheurs-france.eu/custom/themes/margot-kimiyo/javascripts/css-variable-polyfill.js?v=4.6.7

1// polyfill pour variables css
2var cssVarPoly = {
3  init: function init() {
4    // first lets see if the browser supports CSS variables
5    // No version of IE supports window.CSS.supports, so if that isn't supported in the first place we know CSS variables is not supported
6    // Edge supports supports, so check for actual variable support
7    if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) {
8      // this browser does support variables, abort
9      //console.log('your browser supports CSS variables, aborting and letting the native support handle things.');
10      return;
11    } else {
12      // edge barfs on console statements if the console is not open... lame!
13      console.log('no support for you! polyfill all (some of) the things!!');
14      document.querySelector('body').classList.add('cssvars-polyfilled');
15    }
16
17    cssVarPoly.ratifiedVars = {};
18    cssVarPoly.varsByBlock = {};
19    cssVarPoly.oldCSS = {};
20
21    // start things off
22    cssVarPoly.findCSS();
23    cssVarPoly.updateCSS();
24  },
25
26  // find all the css blocks, save off the content, and look for variables
27  findCSS: function findCSS() {
28    var styleBlocks = document.querySelectorAll('style:not(.inserted),link[type="text/css"]');
29
30    // we need to track the order of the style/link elements when we save off the CSS, set a counter
31    var counter = 1;
32
33    // loop through all CSS blocks looking for CSS variables being set
34    [].forEach.call(styleBlocks, function (block) {
35      // console.log(block.nodeName);
36      var theCSS = undefined;
37      if (block.nodeName === 'STYLE') {
38        // console.log("style");
39        theCSS = block.innerHTML;
40        cssVarPoly.findSetters(theCSS, counter);
41      } else if (block.nodeName === 'LINK') {
42        // console.log("link");
43        cssVarPoly.getLink(block.getAttribute('href'), counter, function (counter, request) {
44          cssVarPoly.findSetters(request.responseText, counter);
45          cssVarPoly.oldCSS[counter] = request.responseText;
46          cssVarPoly.updateCSS();
47        });
48        theCSS = '';
49      }
50      // save off the CSS to parse through again later. the value may be empty for links that are waiting for their ajax return, but this will maintain the order
51      cssVarPoly.oldCSS[counter] = theCSS;
52      counter++;
53    });
54  },
55
56  // find all the "--variable: value" matches in a provided block of CSS and add them to the master list
57  findSetters: function findSetters(theCSS, counter) {
58    // console.log(theCSS);
59    cssVarPoly.varsByBlock[counter] = theCSS.match(/(--.+:.+;)/g) || [];
60  },
61
62  // run through all the CSS blocks to update the variables and then inject on the page
63  updateCSS: function updateCSS() {
64    // first lets loop through all the variables to make sure later vars trump earlier vars
65    cssVarPoly.ratifySetters(cssVarPoly.varsByBlock);
66
67    // loop through the css blocks (styles and links)
68    for (var curCSSID in cssVarPoly.oldCSS) {if (window.CP.shouldStopExecution(1)){break;}
69      // console.log("curCSS:",oldCSS[curCSSID]);
70      var newCSS = cssVarPoly.replaceGetters(cssVarPoly.oldCSS[curCSSID], cssVarPoly.ratifiedVars);
71      // put it back into the page
72      // first check to see if this block exists already
73      if (document.querySelector('#inserted' + curCSSID)) {
74        // console.log("updating")
75        document.querySelector('#inserted' + curCSSID).innerHTML = newCSS;
76      } else {
77        // console.log("adding");
78        var style = document.createElement('style');
79        style.type = 'text/css';
80        style.innerHTML = newCSS;
81        style.classList.add('inserted');
82        style.id = 'inserted' + curCSSID;
83        document.getElementsByTagName('head')[0].appendChild(style);
84      }
85    }
86window.CP.exitedLoop(1);
87;
88  },
89
90  // parse a provided block of CSS looking for a provided list of variables and replace the --var-name with the correct value
91  replaceGetters: function replaceGetters(curCSS, varList) {
92    // console.log(varList);
93    for (var theVar in varList) {if (window.CP.shouldStopExecution(2)){break;}
94      // console.log(theVar);
95      // match the variable with the actual variable name
96      var getterRegex = new RegExp('var\\(\\s*' + theVar + '\\s*\\)', 'g');
97      // console.log(getterRegex);
98      // console.log(curCSS);
99      curCSS = curCSS.replace(getterRegex, varList[theVar]);
100
101      // now check for any getters that are left that have fallbacks
102      var getterRegex2 = new RegExp('var\\(\\s*.+\\s*,\\s*(.+)\\)', 'g');
103      // console.log(getterRegex);
104      // console.log(curCSS);
105      var matches = curCSS.match(getterRegex2);
106      if (matches) {
107        // console.log("matches",matches);

108        matches.forEach(function (match) {
109          // console.log(match.match(/var\(.+,\s*(.+)\)/))
110          // find the fallback within the getter
111          curCSS = curCSS.replace(match, match.match(/var\(.+,\s*(.+)\)/)[1]);
112        });
113      }
114
115      // curCSS = curCSS.replace(getterRegex2,varList[theVar]);
116    }
117window.CP.exitedLoop(2);
118;
119    // console.log(curCSS);
120    return curCSS;
121  },
122
123  // determine the css variable name value pair and track the latest
124  ratifySetters: function ratifySetters(varList) {
125    // console.log("varList:",varList);
126    // loop through each block in order, to maintain order specificity
127    for (var curBlock in varList) {if (window.CP.shouldStopExecution(3)){break;}
128      var curVars = varList[curBlock];
129      // console.log("curVars:",curVars);
130      // loop through each var in the block
131      curVars.forEach(function (theVar) {
132        // console.log(theVar);
133        // split on the name value pair separator
134        var matches = theVar.split(/:\s*/);
135        // console.log(matches);
136        // 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
137        // 0 = the name, 1 = the value, strip off the ; if it is there
138        cssVarPoly.ratifiedVars[matches[0]] = matches[1].replace(/;/, '');
139      });
140    }
141window.CP.exitedLoop(3);
142;
143    // console.log(ratifiedVars);
144  },
145
146  // get the CSS file (same domain for now)
147  getLink: function getLink(url, counter, success) {
148    var request = new XMLHttpRequest();
149    request.open('GET', url, true);
150    request.overrideMimeType('text/css;');
151    request.onload = function () {
152      if (request.status >= 200 && request.status < 400) {
153        // Success!
154        // console.log(request.responseText);
155        if (typeof success === 'function') {
156          success(counter, request);
157        }
158      } else {
159        // We reached our target server, but it returned an error
160        console.warn('an error was returned from:', url);
161      }
162    };
163
164    request.onerror = function () {
165      // There was a connection error of some sort
166      console.warn('we could not get anything from:', url);
167    };
168
169    request.send();
170  }
171};
172cssVarPoly.init();