example for browser

commenthol · Aug 30, 2017 · 3117a5e · 3117a5e
1 parent 172bbf0
commit 3117a5e
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 0 deletions.
diff --git a/examples/browser/.gitignore b/examples/browser/.gitignore
@@ -0,0 +1 @@
+bundle.js
diff --git a/examples/browser/README.md b/examples/browser/README.md
@@ -0,0 +1,7 @@
+# date-holidays-examples-browser
+
+Start example with:
+
+1. `npm start`
+2. Open <http://localhost:3000> in a browser
+3. Select year, country, ...
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  body {font-family: sans-serif;}
+  table, td {border: 1px solid black; border-collapse: collapse;}
+  td {padding: 3px;}
+  </style>
+</head>
+<body>
+  <select id="year"></select>
+  <select id="country"></select>
+  <select id="state" style="display:none"></select>
+  <select id="region" style="display:none"></select>
+  <p></p>
+  <div id="content"></div>
+
+  <script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+  <script src="test.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/examples/browser/index.js b/examples/browser/index.js
@@ -0,0 +1,5 @@
+!(function (global) {
+  require('core-js/es6') // for IE11
+  global.Holidays = require('../..')
+  // global.Holidays = require('date-holidays')
+})(window)
diff --git a/examples/browser/package.json b/examples/browser/package.json
@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "name": "date-holidays-examples-browser",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "npm install && npm run build && npm run hs",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "browserify -o bundle.js index.js",
+    "hs": "http-server -p 3000"
+  },
+  "author": "commenthol <[email protected]>",
+  "license": "ISC",
+  "devDependencies": {
+    "browserify": "^14.4.0",
+    "http-server": "^0.10.0"
+  },
+  "dependencies": {
+    "core-js": "^2.5.0"
+  }
+}
diff --git a/examples/browser/test.js b/examples/browser/test.js
@@ -0,0 +1,105 @@
+!(function () {
+  var WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  var year = new Date().getFullYear()
+  var g = {year: year}
+
+  function select (id, fn) {
+    var el = document.getElementById(id)
+    var self = {
+      opts: {},
+      onChange: function (ev) {
+        self.selected = ev.target.value
+        g[id] = self.selected
+        if (id === 'country') {
+          ;['state', 'region'].forEach(function (i) {
+            g[i] = undefined
+            select(i).disable()
+          })
+        } else if (id === 'state') {
+          ;['region'].forEach(function (i) {
+            g[i] = undefined
+            select(i).disable()
+          })
+        }
+        renderContent()
+        fn && fn()
+      },
+      disable: function () {
+        el.style = 'display:none'
+      },
+      render: function (obj, selected) {
+        self.selected = selected
+        if (!obj) {
+          el.style = 'display:none'
+        } else {
+          el.style = 'display:block'
+          el.innerHTML =
+          (selected ? '' : '<option>--</option>') +
+          Object.keys(obj).map(function (i) {
+            return [
+              '<option value="', i, '"',
+              i == self.selected ? ' selected' : '',
+              '>', obj[i], '</option>'
+            ].join('')
+          }).join('')
+        }
+      }
+    }
+    el.addEventListener('change', self.onChange)
+    return self
+  }
+
+  function selectYear () {
+    var obj = {}
+    for (var i = year; i < year + 10; i++) {
+      obj[i] = i
+    }
+    select('year').render(obj, year)
+  }
+  function selectCountry (code) {
+    var hd = new Holidays()
+    var cs = hd.getCountries()
+    var s = select('country', selectState)
+    s.render(cs, code)
+    if (code) s.onChange({target: {value: code}})
+  }
+  function selectState () {
+    var hd = new Holidays()
+    var cs = hd.getStates(g.country)
+    select('state', selectRegion).render(cs)
+  }
+  function selectRegion () {
+    var hd = new Holidays()
+    var cs = hd.getRegions(g.country, g.state)
+    select('region').render(cs)
+  }
+
+  function renderContent () {
+    var hd = new Holidays(g.country, g.state, g.region)
+    var holidays = hd.getHolidays(g.year)
+    var count = 0
+    var table = [
+      '<table>',
+      '<thead><tr><th>',
+      ['#', 'weekday', 'date', 'name', 'type'].join('</th><th>'),
+      '</th></tr></thead>',
+      '<tbody>',
+      Object.keys(holidays).map(function (i) {
+        var d = holidays[i]
+        return '<tr><td>' + [
+          count++,
+          WEEKDAYS[d.start.getDay()],
+          d.date,
+          d.name,
+          d.type
+        ].join('</td><td>') + '</td></tr>'
+      }).join(''),
+      '</tbody>',
+      '</table>'
+    ].join('')
+    document.getElementById('content').innerHTML = table
+  }
+
+  selectYear()
+  selectCountry('CA')
+}())