Add classList polyfill to examples, add node-sass script, update read…

…me, resolves #22

README.md

@@ -18,7 +18,7 @@ A lightweight, accessible and customizable javascript timepicker widget. Accessi
 
 ## Installation
 ```
-npm install --save appointment-picker
+npm i -S appointment-picker
 ```
 
 ## Setup
@@ -45,6 +45,15 @@ require(['appointment-picker'], function(AppointmentPicker) {
 });
 ```
 
+### Use without any dependency
+Initialize the picker using the `new` keyword
+```html
+<input id="time-2" type="text" value="10:00">
+```
+```javascript
+var picker = new AppointmentPicker(document.getElementById('time-2'), {});
+```
+
 ### Use as jQuery plugin
 
 If you would like to use the appointment-picker as a jQuery plugin add following code before initializing
@@ -56,23 +65,14 @@ $.fn.appointmentPicker = function(options) {
 };
 ```
 
-Now you can initialize the picker on any text input field
+Now you can initialize the picker on any text input field using `$`
 ```html
 <input id="time-1" type="text">
 ```
 ```javascript
 var $picker = $('#time-1').appointmentPicker();
 ```
 
-### Use without any dependency
-If you don't use jQuery, initialize the picker using `new`
-```html
-<input id="time-2" type="text" value="10:00">
-```
-```javascript
-var picker = new AppointmentPicker(document.getElementById('time-2'), {});
-```
-
 ## Options
 The appointment-picker can be configured with options
 - `interval` sets the interval between appointments in minutes (`1-60`), if this number gets lower (more possible appointments) the picker will get longer
@@ -89,8 +89,9 @@ The appointment-picker can be configured with options
 __Note:__ with `startTime` and `endTime` appointments below and above can be visually removed. If startTime is greater than `minTime` a lower time can still be manually set via the keyboard. On the other hand the picker does not accept lower hours than `minTime` and higher than `maxTime`. Manually entered times outside of the defined bounds will be rejected by the picker, no extra validation is therefore needed ([example](https://jannicz.github.io/appointment-picker/example/form-submit.html)). Entering an empty string into the input resets the time.
 
 Pass the options into the the AppointmentPicker call
-// Standalone
+
 ```javascript
+// Without dependency
 var picker = new AppointmentPicker(document.getElementById('time-2'), {
   interval: 30,
   mode: '12h',
@@ -113,9 +114,9 @@ The appointment-picker exposes several functions to change its behaviour from ou
 
 To get the current time programmatically from a picker instance use
 ```javascript
-// Standalone
+// Without dependency
 picker.getTime();
-// or access the picker instance of the jQuery object
+// Using jQuery
 $picker.appointmentPicker.getTime(); // i.e. { h: 15, m: 30 }
 ```
 
@@ -170,6 +171,11 @@ For screen reader support add both a `aria-label` and `aria-live` properties on
 - Safari (macOS 10 & iOS 9)
 - Edge
 - IE11 / IE10
+- IE9 (with classList polyfill)
+
+### Legacy browser support (i.e. IE9)
+
+Add the [element.classList polyfill](https://www.npmjs.com/package/classlist-polyfill) by either importing it with a module loader or simply load the polyfill from a CDN in your html head.
 
 ## Author & License
 - Jan Suwart | MIT License

css/appointment-picker.css

@@ -1,5 +1,5 @@
 /*
- * appointment-picker.css 1.1.1 | MIT License | github.com/jannicz/appointment-picker
+ * appointment-picker.css 1.1.2 | MIT License | github.com/jannicz/appointment-picker
  */
 /* Default variation */
 .appo-picker {
@@ -14,6 +14,8 @@
   font-family: Helvetica, Arial, sans-serif;
   /* Large variation */ }
   .appo-picker.is-open {
+    display: inline-block;
+    /* IE 9 */
     display: -ms-flexbox;
     /* IE 10 */
     display: -webkit-flex;
@@ -67,6 +69,9 @@
   list-style-type: none; }
 
 .appo-picker-list-item {
+  display: inline-block;
+  /* IE 9 */
+  display: flex;
   width: 25%;
   height: 34px; }
   .appo-picker-list-item input[type="button"] {

css/appointment-picker.scss

@@ -1,5 +1,5 @@
 /*
- * appointment-picker.css 1.1.1 | MIT License | github.com/jannicz/appointment-picker
+ * appointment-picker.css 1.1.2 | MIT License | github.com/jannicz/appointment-picker
  */
 
 /* Default variation */
@@ -16,6 +16,7 @@
     font-family: Helvetica, Arial, sans-serif;
 
     &.is-open {
+        display: inline-block; /* IE 9 */
         display: -ms-flexbox; /* IE 10 */
         display: -webkit-flex; /* Safari 6.1+. iOS 7.1+, BB10 */
         display: flex;
@@ -82,6 +83,8 @@
 }
 
 .appo-picker-list-item {
+    display: inline-block; /* IE 9 */
+    display: flex;
     width: 25%;
     height: 34px;
 

example/exposed-functions.html

@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="demo.css">
 	<link rel="stylesheet" href="../css/appointment-picker.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
 	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 	<script src="../js/appointment-picker.js"></script>
 </head>

example/form-submit.html

@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="demo.css">
 	<link rel="stylesheet" href="../css/appointment-picker.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
 	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 	<script src="../js/appointment-picker.js"></script>
 </head>

example/render-on-init.html

@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="demo.css">
 	<link rel="stylesheet" href="../css/appointment-picker.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
 	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 	<script src="../js/appointment-picker.js"></script>
 	<style type="text/css">

index.html

@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="example/demo.css">
 	<link rel="stylesheet" href="css/appointment-picker.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
 	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 	<script src="js/appointment-picker.js"></script>
 </head>

js/appointment-picker.js

@@ -2,7 +2,7 @@
  * Appointment-Picker - a lightweight, accessible and customizable timepicker
  *
  * @module Appointment-Picker
- * @version 1.1.1
+ * @version 1.1.2
  *
  * @author Jan Suwart
 */
@@ -260,8 +260,8 @@
 		this.close(e);
 	}
 
-	// If the input has focus, a mouseclick can still open the picker
-	function _onInputClick(e) {
+	// Opens the picker, useful if the input has focus, still to be able to open the picker
+	function _onInputClick() {
 		this.open();
 	}
 
@@ -305,7 +305,7 @@
 		this.el.value = this.displayTime;
 	};
 
-	// Time getter returns time as 24h
+	// Time getter returns time as object
 	AppointmentPicker.prototype.getTime = function() {
 		return this.time;
 	};