@ulu/frontend 0.0.15 → 0.0.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## Version 0.0.17
+
+### SCSS
+
+- Add !important to all utilities meant to display none, since they should always override
+
 ## Version 0.0.10
 
 ### JS

package/js/helpers/css-breakpoint.js

@@ -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
    */
@@ -117,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.15",
+  "version": "0.0.17",
   "description": "Theming library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/helpers/_display.scss

@@ -54,19 +54,19 @@
   }
   .hidden,
   .display-none {
-    display: none;
+    display: none !important;
   }
 
   // Display none per breakpoint
   @each $name in map.keys(breakpoint.$sizes) {
     @include breakpoint.min($name) {
       .hidden-min-#{ $name } {
-        display: none;
+        display: none !important;
       }
     }
     @include breakpoint.max($name) {
       .hidden-max-#{ $name } {
-        display: none;
+        display: none !important;
       }
     }
   }

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"}