Fix parsing of uppercase PM postfix, add mocha/chai specs and test pa…

…ge, resolves #13

.editorconfig

@@ -0,0 +1,20 @@
+# http://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js}]
+indent_style = tab
+indent_size = 4
+
+[*.scss]
+indent_style = space
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false

README.md

@@ -142,18 +142,22 @@ document.body.addEventListener('change.appo.picker', function(e) { var time = e.
 ## Styling
 All appointment-picker styles are namespaced with `.appo-picker`, i.e. `.appo-picker-list-item`. Depending on your project, you can either overwrite them using your own CSS or by modifying the provided CSS.
 
+## Accessibility
+
+For screen reader support add both a `aria-label` and `aria-live` properties on the input field
+```html
+<input id="time-1" type="text" aria-live="assertive" aria-label="Use up or down arrow keys to change time">
+```
+
 ## Best practices
 - appointment-picker neither installs any event listeners outside of the input nor it adds any dom elements until it is opened by the user
 - it can be destroyed using its the exposed destroy method that causes all event listeners and dom elements to be removed (i.e. if used in a single page application)
-- for better screen reader support it is recomended to add both a `aria-label` and `aria-live` properties on the input field
-  ```html
-  <input id="time-1" type="text" aria-live="assertive" aria-label="Use up or down arrow keys to change time">
-  ```
+- there is automated testing ([Mocha](https://mochajs.org) and [Chai](http://chaijs.com/api/assert)) to assert that the exposed core functions and the date parser behave correctly ([see specs page](https://jannicz.github.io/appointment-picker/tests/tests.html))
 
 ## Browser Support (tested)
 - Chrome
 - Firefox
-- Safari (macOS 11 & iOS 10)
+- Safari (macOS 10 & iOS 9)
 - Edge
 - IE11 / IE10
 

css/appointment-picker.css

@@ -1,5 +1,5 @@
 /*
- * appointment-picker.css 1.0.4 | MIT License | github.com/jannicz/appointment-picker
+ * appointment-picker.css 1.0.5 | MIT License | github.com/jannicz/appointment-picker
  */
 /* Default variation */
 .appo-picker {

css/appointment-picker.scss

@@ -1,5 +1,5 @@
 /*
- * appointment-picker.css 1.0.4 | MIT License | github.com/jannicz/appointment-picker
+ * appointment-picker.css 1.0.5 | MIT License | github.com/jannicz/appointment-picker
  */
 
 /* Default variation */

index.html

@@ -124,6 +124,10 @@ <h3>More Examples</h3>
 			<li><a href="example/exposed-functions.html">Calling exposed functions</a></li>
 			<li><a href="example/render-on-init.html">Rendering into DOM on init</a></li>
 		</ul>
+		<h3>Tests</h3>
+		<ul>
+			<li><a href="tests/tests.html">Mocha Specs</a></li>
+		</ul>
 	</p>
 
 	<p>Report bugs or feature requests on <a href="https://github.com/jannicz/appointment-picker/issues">Github Issues</a></p>

js/appointment-picker.js

@@ -2,7 +2,7 @@
  * Appointment-Picker - a lightweight, accessible and customizable timepicker
  *
  * @module Appointment-Picker
- * @version 1.0.4
+ * @version 1.0.5
  *
  * @author Jan Suwart
 */
@@ -59,15 +59,15 @@
 		this.closeEventFn = this.close.bind(this);
 		this.openEventFn = this.open.bind(this);
 		this.keyEventFn = this.onKeyPress.bind(this);
-		this.tabKeyUpEventFn = this.onTabKeyUp.bind(this);
+		this.bodyFocusEventFn = this.onBodyFocus.bind(this);
 
 		initialize(this, el, options || {});
 	};
 
 	/**
 	 * Initialize the picker, merge default options and check for errors
 	 * @param {Object} _this - this view reference
-	 * @param {DOMnode} el - reference to the time input field
+	 * @param {HTMLElement} el - reference to the time input field
 	 * @param {Object} options - user defined options
 	 */
 	function initialize(_this, el, options) {
@@ -151,7 +151,7 @@
 		// Delay document click listener to prevent picker flashing
 		setTimeout(function() {
 			document.body.addEventListener('click', _this.closeEventFn);
-			document.body.addEventListener('focus', _this.tabKeyUpEventFn, true);	
+			document.body.addEventListener('focus', _this.bodyFocusEventFn, true);	
 		}, 100);
 	};
 
@@ -185,7 +185,7 @@
 		this.picker.removeEventListener('click', this.selectionEventFn);
 		this.picker.removeEventListener('keyup', this.keyEventFn);
 		document.body.removeEventListener('click', this.closeEventFn);
-		document.body.removeEventListener('focus', this.tabKeyUpEventFn, true);
+		document.body.removeEventListener('focus', this.bodyFocusEventFn, true);
 	};
 
 	/**
@@ -238,7 +238,7 @@
 	};
 
 	// Close the picker on document focus, usually by hitting TAB
-	AppointmentPicker.prototype.onTabKeyUp = function(e) {
+	AppointmentPicker.prototype.onBodyFocus = function(e) {
 		if (!this.isOpen) return;
 		this.close(e);
 	};
@@ -333,26 +333,26 @@
 	};
 
 	/**
-	 * @param {String} time - string that needs to be parsed, i.e. '11:15PM '
+	 * @param {String} time - string that needs to be parsed, i.e. '11:15PM ' or '10:30 am'
 	 * @returns {Object|undefined} containing {h: hour, m: minute} or undefined if unrecognized
-	 * @see https://regexr.com/3h7bo  
+	 * @see https://regexr.com/3heaj
 	 */
 	function _parseTime(time) {
-		var match = time.match(/^([\d]{1,2}):([\d]{2})[\s]*([ap][m])?.*$/);
-		var hour;
+		var match = time.match(/^\s*([\d]{1,2}):([\d]{2})[\s]*([ap][m])?.*$/i);
 
 		if (match) {
-			if (match[3] === 'pm' && match[1] !== '12') {
-				hour = Number(match[1]) + 12;
-			} else if (match[3] === 'am' && match[1] === '12') {
+			var hour = Number(match[1]);
+			var minute = Number(match[2]);
+			var postfix = match[3];
+
+			if (/pm/i.test(postfix) && hour !== 12) {
+				hour += 12;
+			} else if (/am/i.test(postfix) && hour === 12) {
 				hour = 0;
-			} else {
-				hour = match[1]
 			}
-			return { h: Number(hour), m: Number(match[2]) };
+			return { h: hour, m: minute };
 		}
-
-		return undefined;
+		return;
 	};
 
 	/**
@@ -385,7 +385,7 @@
 		var next = direction < 0 ? item.previousElementSibling : item.nextElementSibling;
 		if (next && next.className.indexOf('disabled') < 0) {
 			return next;
-		} else { // If .disabled found, try the next sibling
+		} else { // If disabled class found, try the next sibling
 			return _getNextSibling(next, direction);
 		}
 	};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "appointment-picker",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "customizable timepicker to be used with or without jQuery",
   "main": "js/appointment-picker.js",
   "scripts": {