Bug #2/#3, fix for Internet Explorer, separate stylesheet [iet:8994834]

nfreear · May 14, 2017 · 5ed4714 · 5ed4714
1 parent f124783
commit 5ed4714
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 
-*.css
 test*.html
 *.min.js
 *copy*

diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ Via [RawGit][] - production / CDN:
 ```html
 <div id="id-gaad"></div>
 
-<script src="https://cdn.rawgit.com/nfreear/gaad-widget/1.0-alpha/build/GAAD.widget.js"></script>
+<script src="https://cdn.rawgit.com/nfreear/gaad-widget/1.0-beta/build/GAAD.widget.js"></script>
 ```
 
 Local hosting:
@@ -95,7 +95,7 @@ Français (French):
 
 License: [MIT][].
 
-Twitter: [@nfreear][];
+Twitter: [@nfreear][].
 
 
 [GAAD]: http://globalaccessibilityawarenessday.org/?utm_source=github&utm_campaign=gaad-widget

diff --git a/build/GAAD.widget.js b/build/GAAD.widget.js
@@ -1534,18 +1534,19 @@ Date.CultureInfo = {
         url: "http://globalaccessibilityawarenessday.org/?utm_source=github&utm_campaign=gaad-widget",
         days_before: 10,
         days_after: 5,
+        style_url: "/../../style/GAAD.widget.css",
         should_show: null,
         date: GAAD_DATE,
         datefmt: GAAD_DATE.toString("MMMM dS, yyyy"),
         today: Date.today(),
-        xth: Date.today().toString("yyyy") - 2011,
-        css: [ ".gaad-widget-js {", "  background: #00385E;", "  border: 3px solid #f8c958;", "  border-radius: 6px;", "  color: #fff;", "  display: block;", '  font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;', "  line-height: 1.6em;", "  margin: 1em;", "  padding: 20px;", "  text-align: center;", "}", ".gaad-widget-js a { color: #fff; text-decoration: underline; }" ]
+        xth: Date.today().toString("yyyy") - 2011
     };
     var scriptEl = D.querySelector('script[ src *= "' + defaults.script + '" ]');
     var data = scriptEl.getAttribute("data-gaad");
     var options = data ? JSON.parse(data) : {};
     C.warn(scriptEl, options);
     var gaad = extend(defaults, options);
+    gaad.script_url = scriptEl.src;
     gaad.show_date = new Date(GAAD_DATE).addDays(-gaad.days_before);
     gaad.hide_date = new Date(GAAD_DATE).addDays(gaad.days_after);
     gaad.diff_show = gaad.today - gaad.show_date;
@@ -1556,15 +1557,12 @@ Date.CultureInfo = {
         return C.warn("GAAD: no-show", gaad);
     }
     C.warn("GAAD: show", gaad);
-    var styleEl = D.createElement("style");
-    styleEl.id = gaad.id + "-css";
-    styleEl.innerText = gaad.css.join("\n");
     var elem = D.getElementById(gaad.id);
     elem.lang = gaad.lang;
     elem.setAttribute("role", "alert");
     elem.className = "gaad-widget-js";
     elem.innerHTML = gaad.join;
-    D.head.appendChild(styleEl);
+    addStylesheet(gaad.script_url + gaad.style_url);
     function extend() {
         var extended = {};
         var key;
@@ -1579,4 +1577,11 @@ Date.CultureInfo = {
         }
         return extended;
     }
+    function addStylesheet(url) {
+        var styleEl = D.createElement("link");
+        styleEl.rel = "stylesheet";
+        styleEl.type = "text/css";
+        styleEl.href = url;
+        D.head.appendChild(styleEl);
+    }
 })(window, window.document, window.console, window.Date);
diff --git a/src/widget-src.js b/src/widget-src.js
@@ -23,36 +23,25 @@
     url: 'http://globalaccessibilityawarenessday.org/?utm_source=github&utm_campaign=gaad-widget',
     days_before: 10,
     days_after: 5,
+    style_url: '/../../style/GAAD.widget.css',
     should_show: null,
     date: GAAD_DATE,
     datefmt: GAAD_DATE.toString('MMMM dS, yyyy'),
     today: Date.today(),
-    xth: Date.today().toString('yyyy') - 2011,
-    css: [
-      '.gaad-widget-js {',
-      '  background: #00385E;',
-      '  border: 3px solid #f8c958;',
-      '  border-radius: 6px;',
-      '  color: #fff;',
-      '  display: block;',
-      '  font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;',
-      '  line-height: 1.6em;',
-      '  margin: 1em;',
-      '  padding: 20px;',
-      '  text-align: center;',
-      '}',
-      '.gaad-widget-js a { color: #fff; text-decoration: underline; }'
-    ]
+    xth: Date.today().toString('yyyy') - 2011
   };
 
   var scriptEl = D.querySelector('script[ src *= "' + defaults.script + '" ]');
+
   var data = scriptEl.getAttribute('data-gaad');
   var options = data ? JSON.parse(data) : {};
 
   C.warn(scriptEl, options); // Not: scriptEl.dataset
 
   var gaad = extend(defaults, options);
 
+  gaad.script_url = scriptEl.src;
+
   gaad.show_date = new Date(GAAD_DATE).addDays(-gaad.days_before); // Clone.
   gaad.hide_date = new Date(GAAD_DATE).addDays(gaad.days_after);
 
@@ -70,18 +59,14 @@
 
   C.warn('GAAD: show', gaad);
 
-  var styleEl = D.createElement('style');
-  styleEl.id = gaad.id + '-css';
-  styleEl.innerText = gaad.css.join('\n');
-
   var elem = D.getElementById(gaad.id);
 
   elem.lang = gaad.lang;
   elem.setAttribute('role', 'alert');
   elem.className = 'gaad-widget-js';
   elem.innerHTML = gaad.join;
 
-  D.head.appendChild(styleEl);
+  addStylesheet(gaad.script_url + gaad.style_url);
 
   // ---------------------------
   // JuhQ: https://gist.github.com/pbojinov/8f3765b672efec122f66#gistcomment-1493930
@@ -101,4 +86,17 @@
     }
     return extended;
   }
+
+  function addStylesheet (url) {
+    var styleEl = D.createElement('link');
+    styleEl.rel = 'stylesheet';
+    styleEl.type = 'text/css';
+    styleEl.href = url;
+
+    /* var styleEl = D.createElement('style');
+    styleEl.id = gaad.id + '-css';
+    styleEl.innerText = gaad.css.join('\n'); */
+
+    D.head.appendChild(styleEl);
+  }
 })(window, window.document, window.console, window.Date);
diff --git a/style/GAAD.widget.css b/style/GAAD.widget.css
@@ -0,0 +1,22 @@
+/*!
+  GAAD.widget.js | ©Nick Freear 2017-04-27 | License: MIT.
+
+  https://github.com/nfreear/gaad-widget
+*/
+
+.gaad-widget-js {
+  background: #00385E;
+  border: 3px solid #f8c958;
+  border-radius: 6px;
+  color: #fff;
+  display: block;
+  font: 1.2em 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.6em;
+  margin: 1em;
+  padding: 20px;
+  text-align: center;
+}
+.gaad-widget-js a {
+  color: #fff;
+  text-decoration: underline;
+}