Release/2.2.2

CHANGELOG.md

@@ -4,16 +4,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.2] - 2021-05-03
+## Changes
+- Updated comments and docs to be more accurate and up to date
 ## [2.2.1] - 2021-03-04
 ### Changed
 - socket.io dependency version bump
 
 ## [2.2.0] - 2021-02-19
 ### Added
+- Indexeddb additions to the userdata class
+
+### Changed
+- update NPM modules to remove security vulnerabilities
 - This CHANGELOG
 - Fullscreen Plugin. The ability to add in a fullscreen button within container
 - Fullscreen Plugin Automated Testing
 - Fullscreen Plugin Documentation
 - Indexeddb additions to the userdata class
-### Changed
 - update NPM modules to remove security vulnerabilities

README.md

@@ -202,11 +202,11 @@ Some games will support many of these features, some none at all. We doubt one g
 
 Each plugin is responsible for one of the listed mechanics and should be provided a
 [HTML range input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), and an optional default value.
-Each mechanic's value will range between 0 to 1, and the default initial value is aways 0.5.
+Each mechanic's value will range between 0 to 1, and the default initial value is always 0.5.
 
 ```javascript
 import {
-  HitAreaScalePlugin, DragThresholdScalePlugin, HealtPlugin, ObjectCountPlugin,
+  HitAreaScalePlugin, DragThresholdScalePlugin, HealthPlugin, ObjectCountPlugin,
   CompletionPercentagePlugin, SpeedScalePlugin, TimersScalePlugin, InputCountPlugin,
   Container
   } from 'springroll-container';
@@ -420,7 +420,7 @@ For example the SoundPlugin can accept more than one volume slider or button if
     musicSliders: '#musicSlider, #musicSliderTwo',
   });
 ```
-As long as the string you pass to the constructor is a valid selector string the plugin will use anything you pass to it. The plugins will keep settings in sync across the controls if neccessary as well. Sliders will update each other, buttons will set a dataSet attribute or class (see individual plugin sections for the exact attribute), and any other controls will match each other appropriately.
+As long as the string you pass to the constructor is a valid selector string the plugin will use anything you pass to it. The plugins will keep settings in sync across the controls if necessary as well. Sliders will update each other, buttons will set a dataSet attribute or class (see individual plugin sections for the exact attribute), and any other controls will match each other appropriately.
 
 *Note: at this time there is no support for multiple HTMLElements as parameters. If you are passing an HTMLElement as the parameter rather than a selector string you cannot pass multiple controls. If you do wish to use multiple controls, pass the plugin a selector string instead.
 
@@ -485,7 +485,73 @@ import { SavedData } from 'springroll-container';
 
 // Firstly, construct the SavedData object. This is only needed for IndexedDB work
 savedData = new SavedData('dbName');
+
+// Then, open a connection to the database. All changes to the structure of the database should be passed in here
+```
+Additions is an optional parameter expecting a JSON object with any additions to the databases structure namely new [stores](https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase/createObjectStore) and [indexes](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex). These are placed inside of an array 
+
+Deletions is an optional parameter used to delete any [indexes](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/deleteIndex) or [stores](https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase/deleteObjectStore)
+
+``` javascript
+
+let additions = {
+  stores: [{
+    storeName: 'storeOne',
+    // optionally define a keyPath and/or set autoIncrement to true or false
+    options: { keyPath: "taskTitle" }
+  },
+  {
+    storeName: 'storeTwo'
+  }],
+  indexes: [{
+    indexName: 'newIndex',
+    keyPath: 'key',
+    // Any objectParameters for the Index
+    options: {
+      unique: false
+    }
+  }]
+};
+
+// Deletions is an optional parameter used to delete any indexes or stores
+let deletions = {
+  stores: ['storeOne', 'storeTwo'],
+  indexes: ['newIndex']
+};
+
+// Optionally pass in the new database version. Set to true to increment the database version.
+// Leave this parameter out or pass in false to connect without making any changes to the structure of the database
+let dbVersion = 1 
+
+// The name of the database to connect to
+let dbName = 'dbName';
+
+// Finally, pass these parameters in to establish a connection with the database
+savedData.onOpenDb(dbName, dbVersion, additions, deletions);
 ```
+
+There are other methods currently supported to interact with the database. These allow you to [Add a record](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/add), [Deleting a record](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/delete), [Reading](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/get), [reading all records](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/getAll) Each will return a success, or on failure, an error message 
+
+``` javascript
+
+//Delete a record by the key in a specific store
+savedData.IDBRemove('storeName', 'key');
+
+// add a record to a store. The record can be any type of object accepted by indexedDB
+savedData.IDBAdd('storeName', 'record');
+
+// returns the record with the given key from the store with the given storeName
+savedData.IDBRead('storeName', 'key');
+
+// Finally, close the connection to the database
+savedData.closeDb();
+
+// Return all records from a database or optionally a specified amount defined by the second parameter
+savedData.IDBReadAll('storeName');
+savedData.IDBReadAll('storeName', 5);
+
+
+
 All other methods will work the same as the documentation [here](https://github.com/SpringRoll/SpringRoll/tree/main/src/state#userdata);
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "springroll-container",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "The iframe controller for interacting with SpringRoll applications",
   "main": "./dist/index.js",
   "license": "MIT",

src/plugins/ButtonSizePlugin.js

@@ -3,13 +3,14 @@ import { SliderPlugin } from '../base-plugins';
 /**
  * @export
  * @class ButtonSizePlugin
+ * @property {object[]} sliders An array of slider objects given to ButtonSizePlugin
+ * @property {number} currentValue The current button size value
  * @extends {SliderPlugin}
- *
  */
 export class ButtonSizePlugin extends SliderPlugin {
   /**
-   *Creates an instance of ButtonSizePlugin.
-   * @param {string | HTMLElement} buttonSliders selector string for the inputs
+   * Creates an instance of ButtonSizePlugin.
+   * @param {string | HTMLElement} buttonSliders selector string or html element(s) for the inputs
    * @param {object} options
    * @param {number} [options.defaultButtonSize=0.5]
    * @memberof ButtonSizePlugin
@@ -32,9 +33,11 @@ export class ButtonSizePlugin extends SliderPlugin {
   }
 
   /**
+   * Get ButtonSize Key
    * @readonly
    * @static
    * @memberof ButtonSizePlugin
+   * @returns {string}
    */
   static get buttonSizeKey() {
     return 'buttonSize';

src/plugins/CaptionsStylePlugin.js

@@ -2,8 +2,6 @@ import { SavedData } from '../SavedData';
 import { ButtonPlugin } from '../base-plugins';
 import { RadioGroup } from '../ui-elements';
 
-// Private Variables
-const CAPTIONS_STYLES = 'captionsStyles';
 const DEFAULT_CAPTIONS_STYLES = {
   size: 'medium',
   background: 'black',
@@ -29,17 +27,20 @@ const ALIGN_VALUES = ['top', 'bottom'];
  * @property {Object[]} fontSizeRadios array that contains each radio group
  * @property {Object[]} colorRadios array that contains each radio group
  * @property {Object[]} alignmentRadios array that contains each radio group
- * @property {number} fontSizeRadiosLength
- * @property {number} colorRadiosLength
- * @property {number} alignmentRadiosLength
+ * @property {number} fontSizeRadiosLength Length of the fontSizeRadios array
+ * @property {number} colorRadiosLength Length of the colorRadios array
+ * @property {number} alignmentRadiosLength Length of the alignmentRadios array
  * @extends {ButtonPlugin}
  */
 export class CaptionsStylePlugin extends ButtonPlugin {
   /**
-   *Creates an instance of CaptionsStylePlugin.
-   * @param {string } fontSizeRadios selector string for one or more radio groups for caption font size
-   * @param {string } colorRadios selector string for one or more radio groups for caption font/background colors
-   * @param {string } alignmentRadios selector string for one or more radio groups for caption position
+   * Creates an instance of CaptionsStylePlugin.
+   * @param {string} fontSizeRadios selector string for one or more radio groups for caption font size
+   * @param {string} colorRadios selector string for one or more radio groups for caption font/background colors
+   * @param {string} alignmentRadios selector string for one or more radio groups for caption position
+   * @param {string} [defaultFontSize='medium'] Default selected font size
+   * @param {string} [defaultColor='default'] Default selected color
+   * @param {string} [defaultAlignment='top'] Default selected alignment
    * @memberof CaptionsStylePlugin
    */
   constructor(fontSizeRadios, colorRadios, alignmentRadios,
@@ -50,7 +51,7 @@ export class CaptionsStylePlugin extends ButtonPlugin {
     this.captionsStyles = Object.assign(
       {},
       DEFAULT_CAPTIONS_STYLES,
-      SavedData.read(CAPTIONS_STYLES) || {}
+      SavedData.read(CaptionsStylePlugin.captionStyleKey) || {}
     );
 
     //split the selector strings into individual selectors.
@@ -230,7 +231,7 @@ export class CaptionsStylePlugin extends ButtonPlugin {
   * @memberof CaptionsStylePlugin
   */
   start() {
-    this.setCaptionsStyles(SavedData.read(CAPTIONS_STYLES));
+    this.setCaptionsStyles(SavedData.read(CaptionsStylePlugin.captionStyleKey));
 
     this.client.on('loaded', this.sendAllProperties);
     this.client.on('loadDone', this.sendAllProperties);
@@ -242,7 +243,7 @@ export class CaptionsStylePlugin extends ButtonPlugin {
   * @memberof CaptionsStylePlugin
   */
   sendAllProperties() {
-    this.sendProperty(CAPTIONS_STYLES, this.captionsStyles);
+    this.sendProperty(CaptionsStylePlugin.captionStyleKey, this.captionsStyles);
   }
   /**
    * Fired whenever the font size radios are updated
@@ -330,9 +331,9 @@ export class CaptionsStylePlugin extends ButtonPlugin {
       this.captionsStyles[styles] = value;
     }
 
-    SavedData.write(CAPTIONS_STYLES, this.captionsStyles);
+    SavedData.write(CaptionsStylePlugin.captionStyleKey, this.captionsStyles);
     if (this.client) {
-      this.client.send(CAPTIONS_STYLES, this.captionsStyles);
+      this.client.send(CaptionsStylePlugin.captionStyleKey, this.captionsStyles);
     }
   }
 
@@ -346,4 +347,15 @@ export class CaptionsStylePlugin extends ButtonPlugin {
       .concat(this.alignmentRadios)
       .concat(this.fontSizeRadios);
   }
+  /**
+   * Get captionStyle Key
+   * @readonly
+   * @static
+   * @memberof CaptionStyleKey
+   * @returns {string}
+   */
+  static get captionStyleKey() {
+    return 'captionsStyles';
+  }
+
 }

src/plugins/CaptionsTogglePlugin.js

@@ -2,14 +2,12 @@ import { SavedData } from '../SavedData';
 import { ButtonPlugin } from '../base-plugins';
 import { Button } from '../ui-elements';
 
-// Private Variables
-const CAPTIONS_MUTED = 'captionsMuted';
-
 /**
  * @export
  * @class CaptionsTogglePlugin
- * @property {Button[]} _captionsButtons array of caption mute buttons
- * @property {number} captionsButtonsLength
+ * @property {Button[]} _captionsButtons An array of caption mute buttons
+ * @property {boolean} _captionsMuted True if captions are muted
+ * @property {number} captionsButtonLength The length of the captionsButtons array
  * @extends {ButtonPlugin}
  */
 export class CaptionsTogglePlugin extends ButtonPlugin {
@@ -63,11 +61,11 @@ export class CaptionsTogglePlugin extends ButtonPlugin {
           this._captionsButtons[i].displayButton($event.data);
         }
 
-        if (null === SavedData.read(CAPTIONS_MUTED)) {
+        if (null === SavedData.read(CaptionsTogglePlugin.captionsToggleKey)) {
           return;
         }
 
-        this.captionsMuted = !!SavedData.read(CAPTIONS_MUTED);
+        this.captionsMuted = !!SavedData.read(CaptionsTogglePlugin.captionsToggleKey);
 
       }.bind(this)
     );
@@ -76,7 +74,7 @@ export class CaptionsTogglePlugin extends ButtonPlugin {
   * @memberof CaptionsTogglePlugin
   */
   start() {
-    this.captionsMuted = !!SavedData.read(CAPTIONS_MUTED);
+    this.captionsMuted = !!SavedData.read(CaptionsTogglePlugin.captionsToggleKey);
 
     this.client.on('loaded', this.sendAllProperties);
     this.client.on('loadDone', this.sendAllProperties);
@@ -88,7 +86,7 @@ export class CaptionsTogglePlugin extends ButtonPlugin {
   * @memberof CaptionsTogglePlugin
   */
   sendAllProperties() {
-    this.sendProperty(CAPTIONS_MUTED, this.captionsMuted);
+    this.sendProperty(CaptionsTogglePlugin.captionsToggleKey, this.captionsMuted);
   }
 
   /**
@@ -118,4 +116,15 @@ export class CaptionsTogglePlugin extends ButtonPlugin {
       this._captionsMuted
     );
   }
+
+  /**
+   * Get CaptionToggle Key
+   * @readonly
+   * @static
+   * @memberof captionsToggleKey
+   * @returns {string}
+   */
+  static get captionsToggleKey() {
+    return 'captionsMuted';
+  }
 }

src/plugins/ColorVisionPlugin.js

@@ -12,13 +12,16 @@ const COLOR_BLIND_TYPES = [
 /**
  * @export
  * @class ColorVisionPlugin
+ * @property {boolean} sendAfterFetch Whether to send the properties after fetch or not
+ * @property {boolean} canEmit Whether or not the plugin can send properties
+ * @property {string} colors 
  * @extends {RadioGroupPlugin}
  */
 export class ColorVisionPlugin extends RadioGroupPlugin {
   /**
-   *Creates an instance of ColorVisionPlugin.
-   * @param {object} params
-   * @param {string | HTMLElement} params.colorSelects
+   * Creates an instance of ColorVisionPlugin.
+   * @param {string | HTMLElement} colorSelects
+   * @param {string } [defaultValue] Default selected value
    * @memberof ColorVision
    */
   constructor(colorVisionRadios, { defaultValue = COLOR_BLIND_TYPES[0] } = {}) {
@@ -133,9 +136,11 @@ export class ColorVisionPlugin extends RadioGroupPlugin {
   }
 
   /**
+   * Get the ColorVisionPlugin key
    * @readonly
    * @static
    * @memberof ColorVisionPlugin
+   * @returns {string}
    */
   static get colorVisionKey() {
     return 'colorVision';

src/plugins/CompletionPercentagePlugin.js

@@ -3,14 +3,14 @@ import { SliderPlugin } from '../base-plugins';
 /**
  * @export
  * @class CompletionPercentagePlugin
+ * @property {object[]} sliders an array of all slider objects attached to CompletePercentagePlugin
  * @extends {SliderPlugin}
  */
 export class CompletionPercentagePlugin extends SliderPlugin {
   /**
-   *Creates an instance of CompletionPercentagePlugin.
-   * @param {object} params
-   * @param {string | HTMLElement} params.completionPercentageSliders
-   * @param {number} [params.defaultCompletionPercentage=0.5]
+   * Creates an instance of CompletionPercentagePlugin.
+   * @param {string | HTMLElement} completionPercentageSliders The selector or HTMLSliderElement of the slider
+   * @param {number} [defaultCompletionPercentage=0.5] Default selected completion percentage
    * @memberof CompletionPercentagePlugin
    */
   constructor(completionPercentageSliders, { defaultCompletionPercentage = 0.5 } = {}) {
@@ -23,8 +23,7 @@ export class CompletionPercentagePlugin extends SliderPlugin {
 
   /**
    * @memberof CompletionPercentagePlugin
-   * @param {Event} target
-   * @param {string} control
+   * @param {Event} e
    */
   onCompletionPercentageChange(e) {
     this.currentValue = e.target.value;
@@ -35,6 +34,7 @@ export class CompletionPercentagePlugin extends SliderPlugin {
    * @readonly
    * @static
    * @memberof CompletionPercentagePlugin
+   * @returns {string}
    */
   static get completionPercentageKey() {
     return 'completionPercentage';