Skip to content

Display a banner-link to promote Global Accessibility Awareness Day (GAAD) —

Notifications You must be signed in to change notification settings

nfreear/gaad-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build status — Travis-CI js-semistandard-style

nfreear/gaad-widget

Display a banner-link to promote Global Accessibility Awareness Day (GAAD). The banner displays for a configurable period before and after the day.

Global Accessibility Awareness Day

Join us on Thursday, May 18 2017 and mark the sixth Global Accessibility Awareness Day (GAAD). The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities.

Built on Datejs.

Note ~ this is not an official widget!

Original Gist.

Features

v2.1

  • Added ?gaadwidget=force URL parameter, #2
  • Added iCal and JSON data files.

v2.0

  • Different after-event message - containing next year's date, #5 - thanks @srinivasu..
  • Added translation into Français/French, #4
  • Added neutral black theme, #2
  • Changed default days_after from 5 to 10.

v1.x

  • Zero configuration required by default,
  • Paste and forget - the banner appears 10 days before and disappears 10 days after,
  • Configurable,
  • Basic internationalization,
  • Basic automated testing in place (Travis-CI),
  • Accessible ~ let me know if you spot a problem!
  • Responsive design,
  • Compatible with all modern browsers, and MSIE 9-11,
  • CDN courtesy of RawGit (thank you!) - with HTTPS/SSL.

Wishlist.

Install and test

npm install
npm run build
npm run build-min
npm test

Usage

Via RawGit - production / CDN:

<div id="id-gaad"></div>

<script src="https://cdn.rawgit.com/nfreear/gaad-widget/2.1-beta/build/GAAD.widget.js"></script>

Local hosting:

<div id="id-gaad"></div>

<script src="build/GAAD.widget.js" ></script>

Setting the days_before option:

<div id="id-gaad"></div>

<script src="build/GAAD.widget.js" data-gaad='{ "days_before": 20 }'></script>

Setting several configuration options:

<div id="custom_id"></div>

<script
  src="build/GAAD.widget.js"
  data-gaad='{ "id": "custom_id", "days_after": 10, "theme": "black", "debug": true }'
  ></script>

Translation

Translations, #4.

Français (French):

<div id="id-gaad"></div>

<script src="build/GAAD.widget.js" data-gaad='{ "lang": "fr" }' ></script>

License

License: MIT.

Twitter: @nfreear, @gbla11yday.