@ulu/frontend 0.0.11 → 0.0.13

package/js/helpers/css-breakpoint.js

@@ -25,20 +25,18 @@ export class CssBreakpoints {
     valueFromPsuedo: false,
     customProperty: "--breakpoint",
     psuedoSelector: ':before',
+    order: ["small", "medium", "large"],
     debug: false
   }
   /**
    * @param {Object} config Configruation object
-   * @param {Array} config.order Required, Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest
+   * @param {Array} config.order Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest, defaults to [small, medium, large]
    * @param {Array} config.customProperty Property to grab breakpoint from (default is --breakpoint)
    * @param {Array} config.valueFromPsuedo Use the legacy method of grabbing breakpoint from psuedo element, default uses custom property
    * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old psuedo method, adjust this to document.body
    * @param {String} config.psuedoSelector Change psuedo selector used to get the breakpoint from the psuedo's content property
    */
   constructor(config) {
-    if (!config.order) {
-      logError(this, 'Missing order (required)!');
-    }
     Object.assign(this, CssBreakpoints.defaults, config);
     this.active = null;
     this.previous = null;
@@ -119,6 +117,7 @@ export class CssBreakpoints {
   /**
    * Get a breakpoint by key
    * @param {String} name The name of the breakpoint to get
+   * @return {Breakpoint} Breakpoint to act on (see BreakpointDirection)
    */
   at(name) {
     const bp = this.breakpoints[name];

package/package.json

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

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

@@ -10,11 +10,12 @@ export class CssBreakpoints {
         valueFromPsuedo: boolean;
         customProperty: string;
         psuedoSelector: string;
+        order: string[];
         debug: boolean;
     };
     /**
      * @param {Object} config Configruation object
-     * @param {Array} config.order Required, Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest
+     * @param {Array} config.order Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest, defaults to [small, medium, large]
      * @param {Array} config.customProperty Property to grab breakpoint from (default is --breakpoint)
      * @param {Array} config.valueFromPsuedo Use the legacy method of grabbing breakpoint from psuedo element, default uses custom property
      * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old psuedo method, adjust this to document.body
@@ -52,8 +53,91 @@ export class CssBreakpoints {
     /**
      * Get a breakpoint by key
      * @param {String} name The name of the breakpoint to get
+     * @return {Breakpoint} Breakpoint to act on (see BreakpointDirection)
      */
-    at(name: string): any;
+    at(name: string): Breakpoint;
 }
 export default CssBreakpoints;
+/**
+ * @class
+ * Single breakpoint management
+ */
+declare class Breakpoint {
+    constructor(name: any, manager: any);
+    directions: {
+        max: BreakpointDirection;
+        min: BreakpointDirection;
+        only: BreakpointDirection;
+    };
+    _manager: any;
+    name: any;
+    /**
+     * Private method used inrternally for managing direction activation
+     * - Each direction manages it's own state and handlers
+     * @param {String} direction The directional key
+     * @param {Boolean} active State of that direction to set
+     */
+    _setDirection(direction: string, active: boolean): void;
+    /**
+     * Attach handler to be executed from the breakpoint and to all breakpoints below.
+     * - If the browser resizes from a breakpoint below this breakpoint,
+     *   and above the breakpoint name specified, this handler will fire
+     * @param {Function} handler Handler to be executed
+     */
+    max(handler: Function): void;
+    /**
+     * Attach handler to be executed from the breakpoint and to all breakpoints below.
+     * - If the browser resizes from a breakpoint above this breakpoint,
+     *   and below the breakpoint name specified, this handler will fire
+     * @param {Function} handler Handler to be executed
+     */
+    min(handler: Function): void;
+    /**
+     * Attach a handler to fire when the breakpoint is within the key
+     * @param {Function} handler Handler to be executed
+     */
+    only(handler: Function): void;
+    /**
+     * Remove handler
+     * @param {Function} handler Handler to be removed, extended on/off object style can be used
+     * @param {String} direction Remove handler only from specified direction, else search all directions
+     */
+    remove(handler: Function, direction: string): void;
+    log(...msg: any[]): void;
+}
+/**
+ * @class
+ * Used to handle a breakpoints direction's handler and state
+ */
+declare class BreakpointDirection {
+    constructor(direction: any, breakpoint: any);
+    direction: any;
+    active: boolean;
+    on: any[];
+    off: any[];
+    breakpoint: any;
+    /**
+     * Change the state of the direction
+     */
+    change(to: any): void;
+    /**
+     * Calls all functions in handlers or
+     */
+    _call(forActive: any): void;
+    /**
+     * Returns handlers in normalized object format on/off
+     */
+    getHandlers(handler: any): any;
+    /**
+     * Adds a handler for the direction, optionally use object to add off state handler
+     * @param {Function|Object} handler Function to be executed when direction is active, read object description for on/off
+     * @param {Function|Object} handler.on Function to be executed when direction is active
+     * @param {Function|Object} handler.off Function to be executed when direction was active and is now changed to inactive
+     */
+    add(handler: Function | any): void;
+    /**
+     * Removes a handler
+     */
+    remove(handler: any): void;
+}
 //# sourceMappingURL=css-breakpoint.d.ts.map

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;;;;;;MAMC;IACD;;;;;;;OAOG;IACH;QANyB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;OAiBvC;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;;;OAGG;IACH,sBAMC;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;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"}