Timeline: Updated doc's

src/meteoJS/Timeline.js

@@ -101,6 +101,8 @@ import addEventFunctions from './Events.js';
  * {@link module:meteoJS/timeline/visualisation.Visualisation} class. To animate
  * through time steps use the {@link module:meteoJS/timeline/animation.Animation}
  * class.
+ * 
+ * <pre><code>import Timeline from 'meteojs/Timeline';</code></pre>
  */
 export class Timeline {
 

src/meteoJS/timeline/Animation.js

@@ -10,15 +10,15 @@ import Timeline from '../Timeline.js';
  * 
  * @typedef {Object} module:meteoJS/timeline/animation~options
  * @param {module:meteoJS/timeline.Timeline} timeline - Timeline to animate.
- * @param {number} [restartPause]
+ * @param {number} [restartPause=1.8]
  *   Time in seconds to pause before the animation restart.
- * @param {number} [imagePeriod]
+ * @param {number} [imagePeriod=0.2]
  *   Time in seconds between animation of two images.
  *   Ignored, if imageFrequency is specified.
  * @param {number|undefined} [imageFrequency]
  *   Time of images during one second.
- * @param {boolean} [enabledStepsOnly] - Use only enabled times.
- * @param {boolean} [allEnabledStepsOnly]
+ * @param {boolean} [enabledStepsOnly=true] - Use only enabled times.
+ * @param {boolean} [allEnabledStepsOnly=false]
  *   Use only times that are enabled by all sets of time.
  */
 
@@ -60,6 +60,8 @@ import Timeline from '../Timeline.js';
 
 /**
  * Object to animate {@link module:meteoJS/timeline.Timeline}.
+ * 
+ * <pre><code>import Animation from 'meteojs/timeline/Animation';</code></pre>
  */
 export class Animation {
 
@@ -69,7 +71,7 @@ export class Animation {
   constructor({ timeline,
     restartPause = 1.8,
     imagePeriod = 0.2,
-    imageFrequency,
+    imageFrequency = undefined,
     enabledStepsOnly = true,
     allEnabledStepsOnly = false } = {}) {
     /**
@@ -360,11 +362,13 @@ export default Animation;
 /**
  * Insert an input-group to change frequency.
  * 
+ * <pre><code>import { insertFrequencyInput } from 'meteojs/timeline/Animation';</code></pre>
+ * 
  * @param {external:jQuery} node - Node to insert input-group.
  * @param {Object} options - Options for input-group.
  * @param {module:meteoJS/timeline/animation.Animation} options.animation
  *   Animation object.
- * @param {string} options.suffix - Suffix text for input-group.
+ * @param {string} [options.suffix='fps'] - Suffix text for input-group.
  * @returns {external:jQuery} Input-group node.
  */
 export function insertFrequencyInput(node, { animation, suffix = 'fps' }) {
@@ -388,6 +392,8 @@ export function insertFrequencyInput(node, { animation, suffix = 'fps' }) {
 /**
  * Insert an input-range to change frequency.
  * 
+ * <pre><code>import { insertFrequencyRange } from 'meteojs/timeline/Animation';</code></pre>
+ * 
  * @param {external:jQuery} node - Node to insert input-range.
  * @param {Object} options - Options for input-range.
  * @param {module:meteoJS/timeline/animation.Animation} options.animation
@@ -421,21 +427,28 @@ export function insertFrequencyRange(node, { animation, frequencies }) {
 /**
  * Insert an button-group to change frequency.
  * 
+ * <pre><code>import { insertFrequencyButtonGroup } from 'meteojs/timeline/Animation';</code></pre>
+ * 
  * @param {external:jQuery} node - Node to insert the button-group.
  * @param {Object} options - Options for the button-group.
  * @param {module:meteoJS/timeline/animation.Animation} options.animation
  *   Animation object.
  * @param {number[]} options.frequencies - Frequencies to select.
- * @param {string|undefined} btnGroupClass - Class added to the button-group node.
- * @param {string|undefined} btnClass - Class added to each button.
- * @param {string} options.suffix - Suffix text for each button after frequency.
+ * @param {string|undefined} [options.btnGroupClass='btn-group']
+ *   Class added to the button-group node.
+ * @param {string|undefined} [options.btnClass='btn btn-primary']
+ *   Class added to each button.
+ * @param {string} [options.suffix='fps']
+ *   Suffix text for each button after frequency.
  * @returns {external:jQuery} Button-group node.
  */
-export function insertFrequencyButtonGroup(node, { animation,
+export function insertFrequencyButtonGroup(node, {
+  animation,
   frequencies,
   btnGroupClass = 'btn-group',
   btnClass = 'btn btn-primary',
-  suffix = 'fps' }) {
+  suffix = 'fps'
+}) {
   let btnGroup = $('<div>').addClass(btnGroupClass);
   frequencies = frequencies ? frequencies : [];
   frequencies.forEach(freq => {
@@ -460,11 +473,13 @@ export function insertFrequencyButtonGroup(node, { animation,
 /**
  * Insert an input-group to change restart pause.
  * 
+ * <pre><code>import { insertRestartPauseInput } from 'meteojs/timeline/Animation';</code></pre>
+ * 
  * @param {external:jQuery} node - Node to insert input-group.
  * @param {Object} options - Options for input-group.
  * @param {module:meteoJS/timeline/animation.Animation} options.animation
  *   Animation object.
- * @param {string} options.suffix - Suffix text for input-group.
+ * @param {string} [options.suffix='s'] - Suffix text for input-group.
  * @returns {external:jQuery} Input-group node.
  */
 export function insertRestartPauseInput(node, { animation, suffix = 's' }) {
@@ -488,6 +503,8 @@ export function insertRestartPauseInput(node, { animation, suffix = 's' }) {
 /**
  * Insert an input-range to change restart pause.
  * 
+ * <pre><code>import { insertRestartPauseRange } from 'meteojs/timeline/Animation';</code></pre>
+ * 
  * @param {external:jQuery} node - Node to insert input-range.
  * @param {Object} options - Options for input-range.
  * @param {module:meteoJS/timeline/animation.Animation} options.animation
@@ -523,21 +540,28 @@ export function insertRestartPauseRange(node, { animation, pauses }) {
 /**
  * Insert an button-group to change restart pause.
  * 
+ * <pre><code>import { insertRestartPauseButtonGroup } from 'meteojs/timeline/Animation';</code></pre>
+ * 
  * @param {external:jQuery} node - Node to insert the button-group.
  * @param {Object} options - Options for the button-group.
  * @param {module:meteoJS/timeline/animation.Animation} options.animation
  *   Animation object.
  * @param {number[]} options.pauses - Restart pauses to select.
- * @param {string|undefined} btnGroupClass - Class added to the button-group node.
- * @param {string|undefined} btnClass - Class added to each button.
- * @param {string} options.suffix - Suffix in each button after duration text.
+ * @param {string|undefined} [options.btnGroupClass='btn-group']
+ *   Class added to the button-group node.
+ * @param {string|undefined} [options.btnClass='btn btn-primary']
+ *   Class added to each button.
+ * @param {string} [options.suffix='s']
+ *   Suffix in each button after duration text.
  * @returns {external:jQuery} Button-group node.
  */
-export function insertRestartPauseButtonGroup(node, { animation,
+export function insertRestartPauseButtonGroup(node, {
+  animation,
   pauses,
   btnGroupClass = 'btn-group',
   btnClass = 'btn btn-primary',
-  suffix = 's' }) {
+  suffix = 's'
+}) {
   let btnGroup = $('<div>').addClass(btnGroupClass);
   pauses = pauses ? pauses : [];
   pauses.forEach(pause => {

src/meteoJS/timeline/NavigationButtons.js

@@ -49,6 +49,8 @@ import addEventFunctions from '../Events.js';
  * Class to create buttons and insert them into the DOM to navigate
  *   through the times of the passed timeline.
  * 
+ * <pre><code>import NavigationButtons from 'meteojs/timeline/NavigationButtons';</code></pre>
+ * 
  * @fires module:meteoJS/timeline/navigationButtons#click:button
  */
 export class NavigationButtons {

src/meteoJS/timeline/Visualisation.js

@@ -55,6 +55,8 @@ import Timeline from '../Timeline.js';
  *   The event listener will be deleted automatically if the output is muted.
  * * At the end of the constructor call "this.setNode(this.options.node);".
  * 
+ * <pre><code>import Visualisation from 'meteojs/timeline/Visualisation';</code></pre>
+ * 
  * @abstract
  * @listens module:meteoJS/timeline#change:time
  * @listens module:meteoJS/timeline#change:times
@@ -254,10 +256,10 @@ export class Visualisation {
    * an object using {@link module:meteoJS/events}.
    * 
    * @protected
-   * @param {object} obj - Object to put the event listener on.
+   * @param {Object} obj - Object to put the event listener on.
    * @param {mixed} listener - Event listener key.
-   * @param {function} func - Function to be executed when event is triggered.
-   * @param {object} [thisArg] - This in the function func when event triggered.
+   * @param {Function} func - Function to be executed when event is triggered.
+   * @param {Object} [thisArg] - This in the function func when event triggered.
    */
   attachEventListener(obj, listener, func, thisArg) {
     this.listeners.push([obj, listener]);
@@ -283,10 +285,19 @@ export class Visualisation {
 addEventFunctions(Visualisation.prototype);
 export default Visualisation;
 
+/**
+ * moment.js object.
+ * 
+ * @external momentjs
+ * @see {@link https://momentjs.com}
+ */
+
 /**
  * Format a Date-object via the {@link https://momentjs.com|Moment.js} library.
  * 
- * @param {Object} moment - Moment.js object.
+ * <pre><code>import { makeTimeTextCallbackFunction } from 'meteojs/timeline/Visualisation';</code></pre>
+ * 
+ * @param {external:momentjs} moment - Moment.js object.
  * @returns {module:meteoJS/timeline/visualisation~timeTextCallbackFunction}
  *   Callback.
  */

src/meteoJS/timeline/animation/ToggleButton.js

@@ -11,46 +11,52 @@ import biPauseFill from 'bootstrap-icons/icons/pause-fill.svg';
 /**
  * Options for constructor.
  * 
- * @typedef {Object} meteoJS/timeline/animation/togglebutton~options
- * @param {meteoJS.timeline.animation} animation Animation object.
- * @param {HTMLElement} node
+ * @typedef {Object} module:meteoJS/timeline/animation/togglebutton~options
+ * @param {module:meteoJS/timeline/animation.Animation} animation Animation object.
+ * @param {external:HTMLElement} node
  *   Node to append the button and the dropdown menu (if menu set to true).
  *   If this is a 'button' element, this will be the animation button and
  *   no menu is added.
- * @param {string|HTMLElement|undefined} startedContent
+ * @param {string|external:HTMLElement|undefined} [startedContent]
  *   Content or text of button node if animation is running.
- * @param {string|undefined} startedClass
+ *   Default ist the Bootstrap
+ *   {@link https://icons.getbootstrap.com/icons/pause-fill/|pause-fill} Icon.
+ * @param {string|undefined} [startedClass]
  *   Classed added to button node if animation is running.
- * @param {string|HTMLElement|undefined} stoppedContent
+ * @param {string|external:HTMLElement|undefined} [stoppedContent]
  *   Content of button node if animation is stopped.
- * @param {string|undefined} stoppedClass
+ *   Default ist the Bootstrap
+ *   {@link https://icons.getbootstrap.com/icons/play-fill/|play-fill} Icon.
+ * @param {string|undefined} [stoppedClass]
  *   Classed added to button node if animation is running.
- * @param {string|undefined} classButton
+ * @param {string|undefined} [classButton]
  *   Classed added to button node.
- * @param {boolean} menu
+ * @param {boolean} [menu=true]
  *   Add dropdown menu for animation setup to the button. Ignored, if node is a
  *   button element.
- * @param {boolean} menuImageFrequency
+ * @param {boolean} [menuImageFrequency=true]
  *   Show frequency configuration in the dropdown menu.
- * @param {string} imageFrequencyCaption
+ * @param {string} [imageFrequencyCaption='Frequency']
  *   Label text for the frequency configuration in the dropdown menu.
- * @param {undefined|integer[]} menuFrequencies
+ * @param {undefined|integer[]} [menuFrequencies]
  *   Array of frequencies for the range slider. If undefined the slider will be
  *   hidden.
- * @param {boolean} menuRestartPause
+ * @param {boolean} [menuRestartPause=true]
  *   Show restart pause configuration in the dropdown menu.
- * @param {string} restartPauseCaption
+ * @param {string} [restartPauseCaption='Restart pause']
  *   Label text for the restart pause configuration in the dropdown menu.
  */
 
 /**
  * @classdesc
  * Object to style a button accordingly to the status of an animation object.
+ * 
+ * <pre><code>import ToggleButton from 'meteojs/timeline/animation/ToggleButton';</code></pre>
  */
 export class ToggleButton {
 
   /**
-   * @param {meteoJS/timeline/animation/togglebutton~options} options Options.
+   * @param {module:meteoJS/timeline/animation/togglebutton~options} options Options.
    */
   constructor(options = {}) {
     let { animation = undefined,

src/meteoJS/timeline/visualisation/Slider.js

@@ -14,6 +14,8 @@ import Visualisation from '../Visualisation.js';
 /**
  * Show timeline as a slider.
  * 
+ * <pre><code>import Slider from 'meteojs/timeline/visualisation/Slider';</code></pre>
+ * 
  * @extends module:meteoJS/timeline/visualisation.Visualisation
  */
 export class Slider extends Visualisation {

src/meteoJS/timeline/visualisation/Text.js

@@ -15,6 +15,8 @@ import Visualisation from '../Visualisation.js';
 /**
  * Show current selected time of a timeline as text.
  * 
+ * <pre><code>import Text from 'meteojs/timeline/visualisation/Text';</code></pre>
+ * 
  * @extends module:meteoJS/timeline/visualisation.Visualisation
  */
 export class Text extends Visualisation {

src/meteoJS/timeline/visualisation/bsButtons.js

@@ -24,6 +24,8 @@ import Visualisation from '../Visualisation.js';
 /**
  * Show timeline as a group of buttons.
  * 
+ * <pre><code>import bsButtons from 'meteojs/timeline/visualisation/bsButtons';</code></pre>
+ * 
  * @extends module:meteoJS/timeline/visualisation.Visualisation
  */
 export class bsButtons extends Visualisation {

src/meteoJS/timeline/visualisation/bsDropdown.js

@@ -42,6 +42,8 @@ import Text from './Text.js';
  * Show timeline in a dropdown menu. The menu will be build according to
  * bootstrap.
  * 
+ * <pre><code>import bsDropdown from 'meteojs/timeline/visualisation/bsDropdown';</code></pre>
+ * 
  * @extends module:meteoJS/timeline/visualisation.Visualisation
  */
 export class bsDropdown extends Visualisation {