Bug #2, Reference 2.0-beta in README; update README; black theme

* [iet:8994834]

README.md

@@ -21,8 +21,16 @@ Note ~ this is not an official widget!
 
 ## Features
 
+# v2.x
+
+* Separate after-event message - containing next year's date, [#5][b/a]
+* Add translation in Français/French, [#4][i18n]
+* Neutral `black` theme, [#2][wishlist]
+
+# v1.x
+
 * Zero configuration required by default,
-* Paste and forget - the banner appears _10_ days before and disappears _5_ days after,
+* Paste and forget - the banner appears _10_ days before and disappears _10_ days after,
 * Configurable,
 * Basic internationalization,
 * Basic automated testing in place (Travis-CI),
@@ -49,7 +57,7 @@ Via [RawGit][] - production / CDN:
 ```html
 <div id="id-gaad"></div>
 
-<script src="https://cdn.rawgit.com/nfreear/gaad-widget/1.0-beta.2/build/GAAD.widget.js"></script>
+<script src="https://cdn.rawgit.com/nfreear/gaad-widget/2.0-beta/build/GAAD.widget.js"></script>
 ```
 
 Local hosting:
@@ -75,8 +83,7 @@ Setting several configuration options:
 
 <script
   src="build/GAAD.widget.js"
-  data-gaad=
-  '{ "id": "custom_id", "days_before": 20, "days_after": 8, "url": "http://globalaccessibilityawarenessday.org/" }'
+  data-gaad='{ "id": "custom_id", "days_after": 10, "theme": "black", "debug": true }'
   ></script>
 ```
 
@@ -87,27 +94,25 @@ Français (French):
 ```html
 <div id="id-gaad"></div>
 
-<script
-  src="build/GAAD.widget.js"
-  data-gaad=
-  '{ "lang": "fr", "template": "Rejoignez-nous le jeudi 18 mai 2017 et marquer le %xème <a href=\"%U\">Global Accessibility Awareness Day (GAAD)</a>." }'
-  ></script>
+<script src="build/GAAD.widget.js" data-gaad='{ "lang": "fr" }' ></script>
 ```
 
 ## License
 
 License: [MIT][].
 
-Twitter: [@nfreear][].
+Twitter: [@nfreear][], [@gbla11yday][].
 
 
 [GAAD]: http://globalaccessibilityawarenessday.org/?utm_source=github&utm_campaign=gaad-widget
 [@gbla11yday]: https://twitter.com/gbla11yday
 [@nfreear]: https://twitter.com/nfreear
 [gaad-widget]: https://github.com/nfreear/gaad-widget
 [gaad-image]: https://github.com/nfreear/gaad-widget/raw/master/style/GAAD.widget.png
-[wishlist]: https://github.com/nfreear/gaad-widget/issues/2#!-Wishlist "Wishlist"
-[ie]: https://github.com/nfreear/gaad-widget/issues/3#!-MSIE-9-11 "Browser compatibility"
+[wishlist]: https://github.com/nfreear/gaad-widget/issues/2#!-Wishlist "Bug #2, Wishlist"
+[i18n]: https://github.com/nfreear/gaad-widget/issues/4 "Bug #4, Translations (v 2.x)"
+[b/a]: https://github.com/nfreear/gaad-widget/issues/5 "Bug #5, Separate before and after messages (v 2.x)"
+[ie]: https://github.com/nfreear/gaad-widget/issues/3#!-MSIE-9-11 "Bug #3, Browser compatibility"
 [gist]: https://gist.github.com/nfreear/eef4be96147cb5c1182cbc9e595f2833
 [Datejs]: https://github.com/datejs/Datejs
 [RawGit]: https://rawgit.com/

build/GAAD.widget.js

@@ -1548,6 +1548,7 @@ Date.CultureInfo = {
         days_after: 10,
         embed: false,
         style_url: "/../../style/GAAD.widget.css",
+        theme: "blue",
         should_show: null,
         is_before: null,
         xreplace: {
@@ -1597,7 +1598,10 @@ Date.CultureInfo = {
     elem.lang = gaad.lang;
     elem.dir = gaad.dir;
     elem.setAttribute("role", "alert");
-    elem.className = "gaad-widget-js " + (gaad.embed ? "embed" : "no-embed");
+    elem.className = replaceObj("gaad-widget-js {t} {e}", {
+        "{t}": gaad.theme,
+        "{e}": gaad.embed ? "embed" : "no-embed"
+    });
     elem.innerHTML = gaad.join;
     addStylesheet(gaad.script_url + gaad.style_url);
     W.console && console.log("Happy GAAD! ~ http://globalaccessibilityawarenessday.org");

src/widget-src.js

@@ -37,6 +37,7 @@
     days_after: 10,
     embed: false,
     style_url: '/../../style/GAAD.widget.css',
+    theme: 'blue', // OR: 'black'
     should_show: null,
     is_before: null,
     xreplace: {
@@ -107,7 +108,7 @@
   elem.lang = gaad.lang;
   elem.dir = gaad.dir;
   elem.setAttribute('role', 'alert');
-  elem.className = 'gaad-widget-js ' + (gaad.embed ? 'embed' : 'no-embed');
+  elem.className = replaceObj('gaad-widget-js {t} {e}', { '{t}': gaad.theme, '{e}': gaad.embed ? 'embed' : 'no-embed' });
   elem.innerHTML = gaad.join;
 
   addStylesheet(gaad.script_url + gaad.style_url);

style/GAAD.widget.css

@@ -17,6 +17,10 @@
   text-align: center;
 }
 
+.gaad-widget-js.black {
+  background: #333;
+}
+
 .gaad-widget-js a {
   border-bottom: 2px dotted transparent;
   color: #fff;