Nourished Personal Mucus

    aurelia-resize
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    aurelia-resize

    an aurelia attribute add-on that detects DOM-element resize events either via window-change or CSS-animation.

    example

    view:

    <window>
      <div style="background-color:#6bb329" resizeable resize.trigger="onContentResize($event.detail)"></div>
      <h2>width: ${width}</h2>
      <h2>height: ${height}</h2>
    </window>

    view-model:

    onContentResize(x) {
      this.width = x.width;
      this.height = x.height;
    }

    Dependencies element-resize-detector

    Install (Aurelia CLI)

    Install with npm:

    npm install aurelia-resize --save
    

    Add to your bundles:

    {
      "name": "aurelia-resize",
      "path": "../node_modules/aurelia-resize/dist/amd",
      "main": "index"
    },
    {
      "name": "element-resize-detector",
      "path": "../node_modules/element-resize-detector/dist",
      "main": "element-resize-detector"
    }
    

    Install (JSPM)

    jspm install npm:aurelia-resize

    Install (Webpack 2)

    Install with npm:

    npm install aurelia-resize --save
    

    Usage

    Use the plug-in in your `main.js``

    export function configure(aurelia) {
      aurelia.use
        .standardConfiguration()
        .plugin('aurelia-resize');

    in your view, add the resizeable attribute and bind to the resize event-handler

    <div resizeable resize.trigger="foo($event.detail)">

    In your view-model, add an event handler:

    foo(detail){
        console.log("width=" + detail.width);
        console.log("height=" + detail.height);
        console.log("old width=" + detail.widthOld);
        console.log("old height=" + detail.heightOld);
    }

    you can also throttle, or debounce the events if you need to slow them down.

    <div resizeable resize.trigger="foo($event.detail) & throttle:250">
    <div resizeable resize.trigger="foo($event.detail) & debounce:500">

    Canvas

    one use of this is to resize a canvas so it fits a div:

    <!--widget.html-->
    <template>
      <require from="./widget.css"></require>
      <div id="host" resizeable resize.trigger="resize($event.detail) & throttle:500">
        <canvas ref=elmt></canvas>
      </div>
    </template>
    //widget.ts
    @customElement("widget")
    export class WidgetCustomElement {
      elmt:HTMLCanvasElement;
      resize(data){  
        this.elmt.width = data.width;
        this.elmt.height = data.height;
      }
    }
    //widget.scss 
    widget {
      div {
        padding: 0;
        margin: 0;
        display: block;
      }
      canvas {
        padding: 0;
        margin: 0;
        display: block;
      }
    }

    Install

    npm i aurelia-resize

    DownloadsWeekly Downloads

    435

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • meirionhughes