v2.0.5.1 - Various bug fixes, changes, new additions and deprecations (#11)

* Update changelog.md

* Deleted unnecessary development console log.

Deleted unnecessary development console log in the goTo method.

* Added a removed note on a new version

* Fixed a bug with preventDefault with the pause button

- Fixed a bug that when triggering a fake click on the autoplay pause button, it would spit out the error ** Cannot read property 'preventDefault' of undefined** I believe this was due to the fact the `event` wasn't passed to the `.on` function, therefore the plugin didn't understand the code.
Fixed by adding the `event` in to the functions (Line 619 and 636)

- The `.on` function relating to that of the timeline navigation was inadvertently being run when the pause/play buttons were clicked or triggered. Fixed by adding a `:not` CSS selector to exclude the buttons. (Line 619)

- The pause/play `.on` function (`changeButtons`) would now refresh the page, so fixed by adding `event.preventDefault();` (Line 816)

* Added some new bug fixtures relating to the pause button preventDefault bug

* Added a known issues that won't be fixed section and added the current version

* Update To Do.md

* Create Version

* Rename To Do.md to To_Do.md

* Added Version number

* Update horizontal_timeline.2.0.min.css

* Added deprecated items

* Update README.md

* Deprecated options, added object options and changed code to reflect this

- Deprecated several singular options. [Lines 37-44 and 75-95]
- Introduced new object options instead of the single options. [Lines 46-59 and 98-125]
- Combined the `animationClass` object into one nested object.
- Changed the jQuery options `$.extend` to deep nested recursion with the `true` boolean. Enables the possibility of deep nested objects in the options. [Line 138]
- Added a way to internally access the user options. [Line 141]
- Changed various code to check if the new object options is set in the user options, if so use them, otherwise use the deprecated single options. [Lines 183-189, 285-307, 902-909, 1578-1582, 1629-1633 and 1758-1770]

* changed indentation

* Update horizontal_timeline.2.0.js

* Update changelog.md

* added a known issue

* Added new changed, fixed and added notes

* Changes, Bug fixes and new DOM event.

- Changed the internal function structure to a prototype object of functions, so it only adds the functions to the prototype once.
- Changed the anonymous functions of `init.addIdsAndClasses`, `create.date`, `create.eventDateDisplay`, and `autoplay`; and added them to the timeline prototype as separate functions `_addIdsAndClasses`, `_createDate`, `_eventDateDisplay`, `_autoplay`.
- Fixed an issue with the autoplay pause and play functions, that wouldn't get the instance correctly.
- Changed the `create` function to put together the HTML in a variable before adding to the document, avoiding the obsessive use of the jQuery `.append()`.
- Fixed a bug where the new autoplay prototype function would throw an error when the autoplay `isPaused` and `mouseEvent` data is being set to the element data object because the data object wasn't created at that point (throwing an `undefined` error). Solved by adding it in the plugin wrapper instead of the internal function.
- Fixed a bug with the goTo timeline links where if any of the data options were omitted from the links, the function didn't utilise the default options. This was caused by inconsistent naming and the name changes that occured wasn't reflected in the variable declarations, thereby throwing an `unrecognised` error.
- Added a new DOM event `initialised` to combat the issue of undefined errors when trying to use the any of the public methods straight after the initialisation code. The errors are caused by the `setTimeout` in the init function to delay the code so it gets the correct width, which in turn makes everything else delayed. The DOM event will be fired after this delay, indicating the plugin has truly completed.

* Added a comment for the new initialised DOM event

* Fixed bug

- Fixed a bug where on first load or hard-reload, the page would have 2 scrollbars due to both the `HTML` and `body` having the `overflow-x: hidden` CSS attribute. Fixed by removing the `HTML` from the CSS rule. [Line 15]

* Update horizontal_timeline.2.0.min.css

* Changed initialised DOM event data

Changed the name of the event data `element` to `timelineSelector` of the initialised DOM event, to make it more obvious what is is. Element could refer to any part of the timeline, where as timelineSelector would be more specific. [Line 242 - 246]

* Update changelog.md

* Update README.md

 - Added an autoplay note

- Updated the options

* Update horizontal_timeline.2.0.min.js

* Removed the use of tinyMobile and smallTablet

Removed the use of `tinyMobile` and `smallTablet` in the media queries and changed the `mobile` and `tablet` query widths to include the missing widths accordingly.

* Removed redundant code and changed the default to options to the object options

- Removed the use of `tinyMobile` and `smallTablet` in the `checkMQ` function and various if statements due to being redundant (the `mobile` and `tablet` will now cover the missing widths in the CSS media queries). [Lines 811, 1099, 1633, 1852-1857]
- Changed the object options code so if no options are defined or both the single and the object options are defined, then it defaults to the new object options, otherwise use the deprecated single options. [Lines 263-275, 297-341, 1678-1699, 1826-1850]

* Update horizontal_timeline.2.0.min.css

* Rename horizontal_timeline.2.0.js to horizontal_timeline.2.0_v2.0.5.1.js

* Rename horizontal_timeline.2.0.min.js to horizontal_timeline.2.0_v2.0.5.1.min.js

* Rename horizontal_timeline.2.0.css to horizontal_timeline.2.0_v2.0.5.1.css

* Rename horizontal_timeline.2.0.min.css to horizontal_timeline.2.0_v2.0.5.1.min.css

Author: yCodeTech

JavaScript/horizontal_timeline.2.0.js

@@ -1,8 +1,10 @@
 # Horizontal Timeline 2.0
 #### by [yCodeTech](https://github.com/yCodeTech)
 #### Twitter [@yCodeTech](https://twitter.com/yCodeTech)
-#### Current Version: 2.0.5
-Horizontal Timeline 2.0, is a fully customisable jQuery adaptation of a JavaScript plugin originally created by [CodyHouse](http://codyhouse.co/gem/horizontal-timeline/), to create a dynamic timeline on the horizontal axis.
+#### Current Version: 2.0.5.1
+#### Quick Links: <a href="#setup">Setup</a> | <a href="#options">Options</a> | <a href="#autoplay">Autoplay</a> | <a href="#known-issues">Known Issues</a> | <a href="#known-issues-that-wont-be-fixed">Known Issues That Won't Be Fixed</a> | <a href="#deprecated">Deprecated</a>
+
+Horizontal Timeline 2.0, is a fully customisable jQuery adaptation of a script originally created by [CodyHouse](http://codyhouse.co/gem/horizontal-timeline/), to create a dynamic timeline on the horizontal axis.
 
 Version 2.0 adds functionality that has been previously requested for the original version, and more:
    - Transformed into a jQuery plugin, with support for multiple timeline instances utilising ID's.
@@ -13,10 +15,11 @@ Version 2.0 adds functionality that has been previously requested for the origin
    - Added new autoplay feature with a progress bar, pause/play buttons, adjustable speed and on-hover pause functionality.
    - Added new go-to timeline link with customisable scroll functionality.
    - Added support for mouse-wheel scrolling, touch and swipe for touch devices, and keyboard arrow keys, with the option to disable the loading of the required plugin files.
-   - Added new `refresh`, `destroy`, `addEvent`, `removeEvent`, and `goTo` methods with new attachable namespaced `eventAdded`, `eventRemoved`, `eventChanged`, `goToTimeline` DOM Events.
+   - Added new `refresh`, `destroy`, `addEvent`, `removeEvent`, and `goTo` methods with new attachable namespaced `initialised`, `eventAdded`, `eventRemoved`, `eventChanged`, `goToTimeline` DOM Events.
    - Added new options to change the button icons and to disable the use of the Font Awesome icon library.
    - **Deprecated** the use of multiple data attributes, _data-date_ and _data-custom-display_, in favour of the all new combined singular data attribute, _data-horizontal-timeline_, that utilises an object to house all previously-used data.
    - Added new animation options to customise the event content animation.
+   - **Deprecated** some of the individual options in favour of the object options.
 
 For full documentation please check out the [Horizontal Timeline 2.0 website](http://horizontal-timeline.ycodetech.co.uk/)
 
@@ -76,10 +79,28 @@ $('#example').horizontalTimeline();
 /* The Defaults */
 
 $('#example').horizontalTimeline({
+   // ! Deprecated in favour of the object options. //
    desktopDateIntervals: 200,   //************\\
    tabletDateIntervals: 150,   // Minimum: 120 \\
    mobileDateIntervals: 120,  //****************\\
    minimalFirstDateInterval: true,
+   
+   // ! End Deprecated options //
+   
+   /* New object options... */
+   // If the deprecated single options exist in the user options, then use them,
+   // otherwise default to the new object options.
+   // Can not use in conjunction with the single options...
+   // If both single and object options are set in the options, the object will take precedence.
+
+   dateIntervals: {
+      "desktop": 200,   //************\\
+      "tablet": 150,   // Minimum: 120 \\
+      "mobile": 120,  //****************\\
+      "minimal": true
+   },
+
+   /* End new object options */
 
    dateDisplay: "dateTime",  // dateTime, date, time, dayMonth, monthYear, year
    dateOrder: "normal", // normal, reverse
@@ -95,7 +116,8 @@ $('#example').horizontalTimeline({
    useFontAwesomeIcons: true,
    useNavBtns: true,
    useScrollBtns: true,
-			
+   
+   // ! Deprecated in favour of the object options. //
    iconBaseClass: "fas fa-3x", // Space separated class names
    scrollLeft_iconClass: "fa-chevron-circle-left",
    scrollRight_iconClass: "fa-chevron-circle-right",
@@ -113,14 +135,91 @@ $('#example').horizontalTimeline({
       "left": "exit-left",
       "right": "exit-right"
    },
+   // ! End Deprecated options //
+   
+   /* New object options... */
+   
+   // If the deprecated single options exist in the user options, then use them,
+   // otherwise default to the new object options.
+   
+   // Can not use in conjunction with the single options...
+   // If both single and object options are set in the options, the object will take precedence.
+
+   iconClass: {
+      "base": "fas fa-3x", // Space separated class names
+      "scrollLeft": "fa-chevron-circle-left",
+      "scrollRight": "fa-chevron-circle-right",
+      "prev": "fa-arrow-circle-left",
+      "next": "fa-arrow-circle-right",
+      "pause": "fa-pause-circle",
+      "play": "fa-play-circle"
+   },
+   animationClass: {
+      "base": "animationSpeed", // Space separated class names,
+      "enter": {
+	  "left": "enter-left",
+	  "right": "enter-right"
+       },
+       "exit": {
+	  "left": "exit-left",
+	  "right": "exit-right"
+       }
+   }
+   
+   /* End new object options */
 });
 ```
 
 [Check out the docs](http://horizontal-timeline.ycodetech.co.uk/).
 
+## Autoplay
+The idea of autoplay is that it continuously loops whilst in view, with manual buttons to pause and resume the loop cycle at the user's command. There is no current plans to implement a feature that allows autoplay to stop after a certain amount of loops, due to it conflicting with the sole purpose of autoplay. [[Feature Request](https://github.com/yCodeTech/horizontal-timeline-2.0/issues/10)]
+
+However, there is a workaround that utilises the `eventChanged` DOM event and triggering a click on the pause button. Please check out the codepens:
+
+- [Stop after 1 loop](https://codepen.io/ycodetech/pen/BaNPxzL)
+- [Stop after [X] amount of loops](https://codepen.io/ycodetech/pen/YzXMjNo)
+
+
+
 ## Known Issues
 
 - Autoplay can't be set on multiple timelines, meaning the maximum per page is 1.
-- The event content animation can become stuck between classes and glitch out.
+- Timeline incorrectly gets and sets the wrong width after creating the HTML. Only happens on load for the first time or hard-reload, with refresh of the timeline or soft-reload seems to rectify the problem. Seems to be related to the navigation buttons not having a width for a few seconds after timeline creation.
+
+  A hotfix that was first introduced in v2.0.5-alpha.2 solved the issue with a 300ms `setTimeout` delay in the init function. However, this consequently created errors if a method runs directly after the initialisation code. A workaround was introduced in v2.0.5.1 as the `initialised` DOM event, which would be fired after the delay. If a method needs to be ran directly after the initialisation, use it inside the attachable event. See the [CodePen](https://codepen.io/ycodetech/pen/WNvadbQ). (Not sure how to fix properly.)
 
 These issues are hopefully going to be fixed in the future. If you want to help me out and fix any of these issues yourself, please do so and make a pull request for me to review and merge it with the plugin. All help will be appreciated.
+
+## Known Issues that won't be fixed.
+
+- The event content animation can become stuck between classes and glitch out. Can not fix as it relies on the `animationend` event, which doesn't always get fired, presumably the cause of the issue.
+
+- IE11 and Safari 5.1.7 for Windows 10 both have issues with the timeline, and encounters errors. Will not fix due to the browsers being severely outdated and their dev console errors are lacking descriptions to even attempt to find the cause of the errors.
+
+## Deprecated
+All the following options are deprecated and will be removed in version 2.0.6!
+
+As of _v2.0.5-alpha.3_ ...
+- `data-date`
+- `data-custom-display`
+
+(In favour of the combined singular data attribute: `data-horizontal-timeline` with key:value pairs.)
+
+As of _v2.0.5.1_ ...
+- `desktopDateIntervals`
+- `tabletDateIntervals`
+- `mobileDateIntervals`
+- `minimalFirstDateInterval`
+- `iconBaseClass`
+- `scrollLeft_iconClass`
+- `scrollRight_iconClass`
+- `prev_iconClass`
+- `next_iconClass`
+- `pause_iconClass`
+- `play_iconClass`
+- `animation_baseClass`
+- `enter_animationClass` object
+- `exit_animationClass` object
+
+(In favour of object options and a combined nested object for the `animationClass`.)

JavaScript/horizontal_timeline.2.0.min.js

@@ -2,7 +2,14 @@
 
 - ~~Add support for custom slide animations/transitions using Animate.css~~
 - ~~Implement a namespaced object data attribute to accomodate the data-date and possibly the custom animations.~~
-- ~~Add method to dynamically change existing dates and reposition them to reflect their new date order.~~ Will not add due to being an overkill feature.
-- ~~Add support for Right-to-Left.~~ (In the form of `dateOrder: reverse`.)
+- ~~Add method to dynamically change existing dates and reposition them to reflect their new date order.~~ 
+    
+    Will not add due to being an overkill feature.
+- ~~Add support for Right-to-Left.~~ 
+   
+   (In the form of `dateOrder: reverse`.)
 - ~~Rename the disableButton to reflect the docs name of Inactive Button States.~~
-- ~~Rework Autoplay to allow multiple autoplaying timelines per page.~~ Can not get this to work properly.
+- ~~Rework Autoplay to allow multiple autoplaying timelines per page.~~ 
+    
+    Can not get this to work properly.
+

JavaScript/horizontal_timeline.2.0_v2.0.5.1.js

@@ -0,0 +1 @@
+2.0.5.1

JavaScript/horizontal_timeline.2.0_v2.0.5.1.min.js

@@ -2,6 +2,59 @@
 
 All notable changes to this project will be documented in this file.
 
+- ## 2.0.5.1 [[v2.0.5.1]](https://github.com/yCodeTech/horizontal-timeline-2.0/tree/v2.0.5.1) - 09/04/2020
+     ### Removed
+     - An unnecessary development console log in the goTo method in the minified file (.min.js)
+     - The use of `tinyMobile` and `smallTablet` in the CSS media queries.
+     - The use of `tinyMobile` and `smallTablet` in the `checkMQ` function and various if statements due to being redundant.
+     
+     ### Fixed
+     - A bug that was caused by a missing `event` parameter in a function declaration when triggering a fake click on the autoplay pause button, it would spit out the error **Cannot read property 'preventDefault' of undefined**.
+     - The `.on` function relating to that of the timeline navigation which was inadvertently being run when the pause/play buttons were clicked or triggered - adding a `:not` CSS selector to exclude the buttons.
+     - A bug that appeared after the previous bug fixtures above was implemented. The pause/play `.on` function (`changeButtons`) would now refresh the page, so a `event.preventDefault();` was added.
+     - An issue with the autoplay pause and play functions, that wouldn't get the instance correctly.
+     - A bug where the new autoplay prototype function would throw an error when the autoplay `isPaused` and `mouseEvent` data is being set to the element data object because the data object wasn't created at that point (throwing an `undefined` error). Solved by adding it in the plugin wrapper instead of the internal function.
+     - A bug with the goTo timeline links where if any of the data options were omitted from the links, the function didn't utilise the default options. This was caused by inconsistent naming and the name changes that occured wasn't reflected in the variable declarations, thereby throwing an `unrecognised` error.
+     - A bug where on first load or hard-reload, the page would have 2 scrollbars due to both the `HTML` and `body` having the `overflow-x: hidden` CSS attribute. Fixed by removing the `HTML` from the CSS rule.
+     
+     ### Changed
+     - The jQuery options `$.extend` to deep nested recursion with the `true` boolean. Enables the possibility of deep nested objects in the options.
+     - Added a way to internally access the user options.
+     - Various code to check if the new object options is set in the user options, if so use them, otherwise use the deprecated single options. 
+     - The `animationClass` options objects and combined them into one nested object.
+     - The internal function structure to a prototype object of functions, so it only adds the functions to the prototype once.
+     - The anonymous functions of `init.addIdsAndClasses`, `create.date`, `create.eventDateDisplay`, and `autoplay`; and added them to the timeline prototype as separate functions `_addIdsAndClasses`, `_createDate`, `_eventDateDisplay`, `_autoplay`.
+     - The `create` function to put together the HTML in a variable before adding to the document, avoiding the obsessive use of the jQuery `.append()`.
+     - The name of the event data `element` to `timelineSelector` of the `initialised` DOM event, to make it more obvious what is is - `element` could refer to any part of the timeline, where as `timelineSelector` would be more specific.
+     - The `mobile` and `tablet` CSS media queries widths to include the missing widths accordingly.
+     - The object options code so if no options are defined or both the single and the object options are defined, then it defaults to the new object options, otherwise use the deprecated single options.
+     
+     ### Added
+     - New object options instead of the single options:
+          - `dateIntervals` with keys `desktop`, `mobile`, `tablet` and `minimal`.
+          - `iconClass` with keys `base`, `scrollLeft`, `scrollRight`, `prev`, `next`, `pause` and `play`
+          - `animationClass` with keys `base`, `enter` and `exit`, the latter two are objects with keys `left` and `right`
+     - Added a new DOM event `initialised` to combat the issue of undefined errors when trying to use the any of the public methods straight after the initialisation code. The errors are caused by the hotfix `setTimeout` in the init function to delay the code so it gets the correct width, which in turn makes everything else delayed. The DOM event will be fired after this delay, indicating the plugin has truly completed.
+     
+     ### Deprecated
+     - The single options:
+          - `desktopDateIntervals`
+          - `tabletDateIntervals`
+          - `mobileDateIntervals`
+          - `minimalFirstDateInterval`
+          - `iconBaseClass`
+          - `scrollLeft_iconClass`
+          - `scrollRight_iconClass`
+          - `prev_iconClass`
+          - `next_iconClass`
+          - `pause_iconClass`
+          - `play_iconClass`
+          - `animation_baseClass`
+          - `enter_animationClass` object
+          - `exit_animationClass` object
+     
+     (In favour of object options and a combined nested object for the animationClass.)
+
 - ## 2.0.5 [[v2.0.5]](https://github.com/yCodeTech/horizontal-timeline-2.0/tree/v2.0.5) - 25/02/2020
      ### Added
      - 3 new attachable namespaced DOM events: `eventAdded`, `eventRemoved`, `eventChanged` (the latter requested via email and an issue).
@@ -63,7 +116,7 @@ All notable changes to this project will be documented in this file.
 
      ### Fixed
      - The `useFontAwesomeIcons` option where it wouldn't do anything due to missing code.
-     - A bug that inconsistently and inaccurately calculates the width of the timeline on init, so the scrolling of the timeline was off slightly. (This was due to the function being called slightly before all elements had to chance to be created). Fixed with a 300s delay.
+     - A bug that inconsistently and inaccurately calculates the width of the timeline on init, so the scrolling of the timeline was off slightly. (This was due to the function being called slightly before all elements had to chance to be created). Fixed with a 300s `setTimeout` delay.
      - A bug that when the buttons are disiabled, the timeline appears to not to have a width and disappeared.
      - A persistant bug that shows the horizontal (x) scrollbar when translating the event content, added a line in the CSS.
      - A bug that broke multiple timelines by using the nav buttons that stored the wrong timeline instance when TouchSwipe was used.