@ulu/frontend 0.0.14 → 0.0.16

package/js/helpers/css-breakpoint.js

@@ -25,7 +25,7 @@ export class CssBreakpoints {
     valueFromPsuedo: false,
     customProperty: "--breakpoint",
     psuedoSelector: ':before',
-    order: ["small", "medium", "large"],
+    order: ["none", "small", "medium", "large"],
     debug: false
   }
   /**
@@ -44,11 +44,28 @@ export class CssBreakpoints {
     this.resizeDirection = null;
     this.previousIndex = null;
     this.breakpoints = {};
+    this.onChangeCallbacks = [];
     this.order.forEach(n => this.breakpoints[n] = new Breakpoint(n, this));
     log(this, this);
     this.update(); // Run for the first time, then whenever browser resizes
     CssBreakpoints.instances.push(this);
   }
+  /**
+   * Add a callback for everytime a breakpoint changes
+   * - Not recommended, possibly use to watch for changes, etc
+   * - For more control use intance.at(name) with breakpoint methods
+   * @param {Function} callback Function to call, passed one argument current instance which can be used to get information about breakpoints
+   */
+  onChange(callback) {
+    this.onChangeCallbacks.push(callback);
+  }
+  /**
+   * Remove change callback
+   * @param {Function} callback Function to remove
+   */
+  removeOnChange(callback) {
+    removeArrayElement(this.onChangeCallbacks, callback);
+  }
   /**
    * Get breakpoint from a psuedo element
    */
@@ -76,6 +93,10 @@ export class CssBreakpoints {
    */
   update() {
     const name = this.getBreakpoint();
+    if (!name) {
+      logError(this, 'Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!');
+      return;
+    }
     // console.log('name:\n', name);
     if (name === this.active) return;
     // this.log(`current breakpoint: ${ name }`);
@@ -113,6 +134,8 @@ export class CssBreakpoints {
     if (this.previousIndex !== null) {
       this.resizeDirection = this.previousIndex < index ? "up" : "down";
     }
+
+    this.onChangeCallbacks.forEach(cb => cb(this));
   }
   /**
    * Get a breakpoint by key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Theming library",
   "browser": "js/index.js",
   "main": "index.js",

package/types/helpers/css-breakpoint.d.ts

@@ -34,6 +34,19 @@ export class CssBreakpoints {
     resizeDirection: string;
     previousIndex: any;
     breakpoints: {};
+    onChangeCallbacks: any[];
+    /**
+     * Add a callback for everytime a breakpoint changes
+     * - Not recommended, possibly use to watch for changes, etc
+     * - For more control use intance.at(name) with breakpoint methods
+     * @param {Function} callback Function to call, passed one argument current instance which can be used to get information about breakpoints
+     */
+    onChange(callback: Function): void;
+    /**
+     * Remove change callback
+     * @param {Function} callback Function to remove
+     */
+    removeOnChange(callback: Function): void;
     /**
      * Get breakpoint from a psuedo element
      */

package/types/helpers/css-breakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-breakpoint.d.ts","sourceRoot":"","sources":["../../js/helpers/css-breakpoint.js"],"names":[],"mappings":"AAeA;;;;GAIG;AACH;IACE,wBAAsB;IACtB;;;;;;;MAOC;IACD;;;;;;;OAOG;IACH;QANyB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;OAcvC;IAVC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,wBAA2B;IAC3B,mBAAyB;IACzB,gBAAqB;IAMvB;;OAEG;IACH,gCAEC;IACD;;OAEG;IACH,kCAEC;IACD;;OAEG;IACH,wBAMC;IACD;;OAEG;IACH,eAuCC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAGC;IAED,yBAGC;CACF;AAnID;;;GAGG;AACH;IACE,6CAMC;IALC,eAA0B;IAC1B,gBAAmB;IACnB,UAAY;IACZ,WAAa;IACb,gBAA4B;IAE9B;;OAEG;IACH,sBAMC;IACD;;OAEG;IACH,4BAIC;IACD;;OAEG;IACH,+BAEC;IACD;;;;;OAKG;IACH,aAJW,cAAe,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}
+{"version":3,"file":"css-breakpoint.d.ts","sourceRoot":"","sources":["../../js/helpers/css-breakpoint.js"],"names":[],"mappings":"AAeA;;;;GAIG;AACH;IACE,wBAAsB;IACtB;;;;;;;MAOC;IACD;;;;;;;OAOG;IACH;QANyB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;OAevC;IAXC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,wBAA2B;IAC3B,mBAAyB;IACzB,gBAAqB;IACrB,yBAA2B;IAM7B;;;;;OAKG;IACH,mCAEC;IACD;;;OAGG;IACH,yCAEC;IACD;;OAEG;IACH,gCAEC;IACD;;OAEG;IACH,kCAEC;IACD;;OAEG;IACH,wBAMC;IACD;;OAEG;IACH,eA6CC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAGC;IAED,yBAGC;CACF;AAnID;;;GAGG;AACH;IACE,6CAMC;IALC,eAA0B;IAC1B,gBAAmB;IACnB,UAAY;IACZ,WAAa;IACb,gBAA4B;IAE9B;;OAEG;IACH,sBAMC;IACD;;OAEG;IACH,4BAIC;IACD;;OAEG;IACH,+BAEC;IACD;;;;;OAKG;IACH,aAJW,cAAe,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}