seng-device-state-tracker - npm Package Compare versions

Comparing version 1.0.7 to 1.1.1

karma.conf.dev.js

@@ -33,3 +33,3 @@ /**
 
-		webpack: require('./config/webpack.config.test')(),
+		webpack: require('./config/webpack.config.test'),
 
@@ -36,0 +36,0 @@ // Make dev server silent.

lib/DeviceStateEvent.js

@@ -14,6 +14,6 @@ "use strict";
     };
+    DeviceStateEvent.STATE_UPDATE = eventTypeUtils_1.EVENT_TYPE_PLACEHOLDER;
     return DeviceStateEvent;
 }(DataEvent_1.default));
-DeviceStateEvent.STATE_UPDATE = eventTypeUtils_1.EVENT_TYPE_PLACEHOLDER;
 eventTypeUtils_1.generateEventTypes({ DeviceStateEvent: DeviceStateEvent });
 exports.default = DeviceStateEvent;

lib/DeviceStateTracker.d.ts

 import EventDispatcher from 'seng-event/lib/EventDispatcher';
 import IDeviceStateConfig from './IDeviceStateConfig';
+import IDeviceStateData from './IDeviceStateData';
 /**
@@ -63,2 +64,7 @@ * Utility class that tracks which media query is currently active using the
     /**
+     * Get current deviceState
+     * @returns {IDeviceStateData}
+     */
+    readonly currentDeviceState: IDeviceStateData;
+    /**
      * Checks if the enum object is correctly formatted. The DeviceState enum should only contain numeric values in
@@ -90,3 +96,4 @@ * an ascending order.
      * query. When the reverseDeviceStateOrder boolean is set to true, will
-     * set the first one in this array.
+     * set the first one in this array. Dispatches a DeviceStateEvent with the
+     * current DeviceState
      */
@@ -93,0 +100,0 @@ private updateFromMatchMedia();

lib/DeviceStateTracker.js

@@ -47,2 +47,16 @@ "use strict";
     }
+    Object.defineProperty(DeviceStateTracker.prototype, "currentDeviceState", {
+        /**
+         * Get current deviceState
+         * @returns {IDeviceStateData}
+         */
+        get: function () {
+            return {
+                state: this.currentState,
+                name: this.currentStateName,
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -116,3 +130,4 @@ * Checks if the enum object is correctly formatted. The DeviceState enum should only contain numeric values in
      * query. When the reverseDeviceStateOrder boolean is set to true, will
-     * set the first one in this array.
+     * set the first one in this array. Dispatches a DeviceStateEvent with the
+     * current DeviceState
      */
@@ -124,11 +139,7 @@ DeviceStateTracker.prototype.updateFromMatchMedia = function () {
             if (this.queryListMatches[index]) {
-                // Update current state
                 this.currentState = index;
-                // Update current state name
                 this.currentStateName = this.deviceStateNames[index];
-                // Update stateIndicator if available
                 if (this.stateIndicator) {
                     this.stateIndicator.textContent = this.currentStateName;
                 }
-                // Dispatch a new DeviceStateEvent
                 this.dispatchEvent(new DeviceStateEvent_1.default(DeviceStateEvent_1.default.STATE_UPDATE, {
@@ -149,2 +160,8 @@ state: index,
         this.stateIndicator.className = 'seng-state-indicator';
+        var style = document.createElement('style');
+        style.setAttribute('type', 'text/css');
+        style.innerHTML = "\n\t\t\t.seng-state-indicator {\n\t\t\t  position: fixed;\n\t\t\t  top: 0;\n\t\t\t  right: 0;\n\t\t\t  background-color: #17a2b8;\n\t\t\t  padding: 4px;\n\t\t\t  text-transform: uppercase;\n\t\t\t  font: normal small-caps bold 12px/1 monospace;\n\t\t\t  border-radius: 0 0 0 2px;\n\t\t\t  color: #fff;\n\t\t\t  border-left: 1px solid #000;\n\t\t\t  border-bottom: 1px solid #000;\n\t\t\t}\n\t\t";
+        // Always inject the CSS as first element in the document
+        // head so it can be easily overridden by other style sheets
+        document.head.insertBefore(style, document.head.children[0]);
         document.body.appendChild(this.stateIndicator);
@@ -151,0 +168,0 @@ };

package.json

 {
   "name": "seng-device-state-tracker",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "description": "Boilerplate and example project for all Seng projects",
@@ -11,4 +11,3 @@ "main": "index.js",
     "test:unit:dev": "karma start karma.conf.dev.js",
-    "validate": "npm-run-all -p validate:webpack lint test:unit -s validate:coverage",
-    "validate:webpack": "webpack-validator config/webpack.config.dist.js && webpack-validator config/webpack.config.test.js",
+    "validate": "npm-run-all -p lint test:unit -s validate:coverage",
     "validate:coverage": "istanbul check-coverage --statement 1 --branches 1 --functions 1 --lines 1",
@@ -26,3 +25,3 @@ "lint": "npm-run-all lint:*",
     "doc": "npm-run-all -p doc:*",
-    "doc:typedoc": "typedoc --out docs/ src/",
+    "doc:typedoc": "typedoc --out docs/ src/ --mode file",
     "generate": "npm-run-all clean compile test:unit doc",
@@ -39,3 +38,2 @@ "build": "npm-run-all clean compile",
     "validate": "Runs all scripts that validate if the contents of this repos is correct",
-    "validate:webpack": "Validates the webpack config file",
     "validate:coverage": "Checks if the code coverage results are above a defined minimun",
@@ -79,50 +77,42 @@ "lint": "Placeholder for all types if linting checks",
   "devDependencies": {
-    "@types/chai": "^3.4.34",
-    "@types/mocha": "^2.2.32",
-    "@types/webpack": "^1.12.35",
-    "archiver": "^1.0.0",
-    "awesome-typescript-loader": "^3.0.0-beta.17",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.1",
-    "babel-preset-env": "^1.5.1",
-    "babel-preset-es2015": "^6.24.1",
-    "chai": "^3.5.0",
-    "coveralls": "^2.11.6",
-    "es6-promise": "^3.2.1",
-    "es6-promisify": "^4.1.0",
-    "es6-promisify-all": "^0.1.0",
+    "@types/chai": "^4.0.4",
+    "@types/mocha": "^2.2.43",
+    "@types/webpack": "^3.0.13",
+    "archiver": "^2.1.0",
+    "awesome-typescript-loader": "3.2.3",
+    "chai": "^4.1.2",
+    "coveralls": "^3.0.0",
     "istanbul": "^0.4.3",
-    "istanbul-instrumenter-loader": "^0.2.0",
-    "karma": "^0.13.22",
+    "istanbul-instrumenter-loader": "^3.0.0",
+    "karma": "^1.7.1",
     "karma-chai": "^0.1.0",
-    "karma-coverage": "^1.0.0",
+    "karma-coverage": "1.1.1",
+    "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-mocha": "^1.1.1",
     "karma-mocha-reporter": "^2.2.0",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-remap-istanbul": "^0.1.1",
+    "karma-phantomjs-launcher": "1.0.4",
     "karma-source-map-support": "^1.1.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "^2.0.5",
+    "lodash": "^4.17.4",
     "marked": "^0.3.5",
     "match-media-mock": "^0.1.0",
-    "mocha": "^2.5.3",
-    "npm-run-all": "^2.2.0",
-    "phantomjs-prebuilt": "2.1.15",
+    "mocha": "^4.0.1",
+    "npm-run-all": "^4.1.1",
+    "phantomjs-prebuilt": "^2.1.15",
     "pre-push": "^0.1.1",
-    "remap-istanbul": "^0.6.4",
-    "shx": "^0.1.2",
-    "tslint": "^5.3.2",
-    "tslint-config-airbnb": "^5.0.1",
-    "tsutils": "^2.1.0",
-    "typedoc": "^0.7.1",
-    "typescript": "^2.3.3",
-    "webpack": "^1.12.12",
-    "webpack-dev-server": "^1.16.2",
-    "webpack-system-register": "^1.3.2",
-    "webpack-validator": "^2.1.3"
+    "shx": "^0.2.2",
+    "tslint": "^5.8.0",
+    "tslint-config-airbnb": "^5.3.0",
+    "tsutils": "^2.12.1",
+    "typedoc": "^0.9.0",
+    "typescript": "^2.5.3",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.3",
+    "webpack-system-register": "^1.3.2"
   },
   "dependencies": {
     "seng-event": "^1.2.3",
-    "tslib": "^1.2.0"
+    "tslib": "^1.8.0"
   }
 }

README.md

@@ -72,3 +72,3 @@ [![Travis](https://img.shields.io/travis/mediamonks/seng-device-state-tracker.svg?maxAge=2592000)](https://travis-ci.org/mediamonks/seng-device-state-tracker)
 ```js
-const config:IDeviceStateConfig = {
+const config = {
 	mediaQueries: {
@@ -88,3 +88,3 @@ X_SMALL: '(max-width: 479px)',
 	showStateIndicator: true,
-	reverseDeviceStateOrder: true,
+	reverseDeviceStateOrder: false,
 };
@@ -132,3 +132,6 @@ ```
 
-deviceStateTracker.addEventListener(DeviceStateEvent.STATE_UPDATE, (event:DeviceStateEvent) => {	
+// Retrieve the current state after initialisation
+const { state, name } = deviceStateTracker.currentDeviceState;
+
+deviceStateTracker.addEventListener(DeviceStateEvent.STATE_UPDATE, (event:DeviceStateEvent) => {
 	if (event.data.state === DeviceState.SMALL) {
@@ -176,2 +179,5 @@ console.log('Matched', event.data.name);
 
+// Retrieve the current state after initialisation
+const { state, name } = deviceStateTracker.currentDeviceState;
+
 deviceStateTracker.addEventListener(DeviceStateEvent.STATE_UPDATE, (event) => {
@@ -178,0 +184,0 @@ if (event.data.state === DeviceState.SMALL) {

No alert changes

Improved metrics

Total package byte prevSize

212702

increased by3.16%

Dev dependency count

35

decreased by-18.6%

Lines of code

452

increased by5.85%

Number of lines in readme file

265

increased by2.32%

Dependency changes

• Updatedtslib@^1.8.0