Had to manually install aurelia-pal for the plugin to throw no error on load.

example:

<div resizeable="scroll" ...></div>

Version 0.2.0 was functioning without error. Ran jspm install to update to 0.3.0 (no other changes), and am getting the following error.

system.src.js:4857 Uncaught (in promise) Error: utils is not defined Evaluating https://localhost:44382/jspm_packages/npm/[email protected]/dist/element-resize-detector.js Evaluating https://localhost:44382/jspm_packages/npm/[email protected] Error loading https://localhost:44382/jspm_packages/github/MeirionHughes/[email protected] at t (https://localhost:44382/jspm_packages/system.js:4:61) at g (https://localhost:44382/jspm_packages/system.js:4:9747) at https://localhost:44382/jspm_packages/system.js:4:9289 at b (https://localhost:44382/jspm_packages/system.js:4:11045) at x (https://localhost:44382/jspm_packages/system.js:4:11393) at p (https://localhost:44382/jspm_packages/system.js:4:9271) at h (https://localhost:44382/jspm_packages/system.js:4:9656) at https://localhost:44382/jspm_packages/system.js:4:7925

Hi,

I guess you release it under the MIT license but there is no license file in your repo.

Could you add a license file ?

Thank you !

I'm getting the following errors:

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

and after changing const and let to var in resizable.js, I'm getting:

SyntaxError: Unexpected token ')'

because of the arrow function assignment to this.callback.

So it looks like there may be some more transpiling issues.

Hi I see that your dependency for element-resize-detector is still using an older version. In light of Chrome adding support for the ResizeObserver API recently it may be worthwhile updating it.

I am using the CLI and did an

npm install aurelia-resize --save

I then added the following to my main.js:

aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-resize');

I created two divs in my app.html

<div class="main">
  <div class="sidebar"></div>
  <div class="content" resizable resize.trigger($event.detail) & throttle:500></div>
</div>

In my app.js, I have the following:

export class App {
   resize(detail){
      console.log(detail);
   }
}

I then reload my page, and change the height of content in the console but nothing happens.

Currently the resizeListener you define in your view model must be a function variable.

resizeListener = function(width, height) {
    console.log("width=" + width);
    console.log("height=" + height);
  }

Unfortunately, if you make it a member function:

resizeListener (width, height) {
    console.log("width=" + width);
    console.log("height=" + height);
  }

when it is called it has the incorrect context (not the view-model).

I don't really know how to fix this, so suggestions welcome.

This is a great project, thanks for all of the hard work!

I'm using this project in a javascript aurelia project.

I recently did an npm update, which pulled in 1.0.3, and, when loading the app, I started to get the following error:

DEBUG [aurelia] Loading plugin aurelia-resize.
Uncaught TypeError: Cannot read property '__useDefault' of undefined

So I dug around the node_modules dir for aurelia-resize. Turns out that the app has to be configured differently.

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

//new config
{
  "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"
}

Unfortunately, this was a minor patch release that resulted in a breaking change. I would recommend reverting 1.0.4 to match 1.0.2 and then release 1.0.3 as 1.1.0. Thoughts?

simplify install to jspm install aurelia-resize

Aurelia CLI seems to be solely reliant on npm and was hoping you could publish the latest set to npm

So both resizeable and resizable are supported.

In coding, US english is kind of the norm. At least we could add an alias to keep gb-en based and us-en based developers happy?

We use color as the css property and not colour either.

I attempted to depend on the npm:element-resize-detector library via a JSPM dependency. Unfortunately, even with a shim, it results in an error trying to resolve "utils".

Temporarily fixed by embedding the minified distribution element-resize-detector into aurelia-resize.js, Ideally should be dependency on npm:element-resize-detector.

Need better support for older-browsers npm:element-resize-detector should cover that

In webpack, you need to add this to your package.json to get it to work.

"aurelia": {
"build": {
"resources": [
"aurelia-resize",
"aurelia-resize/resizeable"
]
}

Should I do a PR for this with the readme?

It seems that getting package with jspm automatically builds it if it finds build tasks in it. In new versions of aurelia-resize build tasks are missing making this plugin not usable in automated development environments.

need to convert delay to function rather than fixed value; that way it can use the right value on the timers should the bindable throttle or debounce get updated.

I'm looking to update from aurelia-cli 0.26.1 to the latest (1.0.0-beta.13) and I hit an issue with the aurelia-resize dependency of element-resize-detector... As best I can tell the element-resize-detector is failing on a require statement inside the element-resize-detector.

//Detection strategies.
var objectStrategyMaker = require('./detection-strategy/object');

with the following stacktrace
Unhandled rejection Error: Module name "detection-strategy/object" has not been loaded yet for context: _. Use require([])https://requirejs.org/docs/errors.html#notloaded at makeError (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:3834:17) at Object.localRequire [as require] (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5102:44) at requirejs (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5463:24) at o (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:561) at http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:752 at Object.7../browser-detector (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:57242:31) at o (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:701) at r (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:867) at http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:896 at Object.execCb (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5362:33) at Module.check (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:4544:55) at Module.enable (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:4842:22) at Object.enable (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5223:39) at Module. (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:4827:33) at http://localhost:9000/scripts/vendor-bundle-8.5.0.js:3800:23 at each (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:3725:31)

Looks like resizeable.js didn't transpile 'let' to 'var' and 'class' in dist.

When creating a div with a show.bind which is first false and then changed to true there is no content.
The show.bind element still has the class of aurelia-hide even though the value is true.

• target umd
• bundle element-resize-detector
• clean typings
• test with jspm
• test with cli
• update docs

DOM elements seem to have a resize event, but its never used. Maybe it could be called from the plugin which would allow you to use aurelia's delegate binding; if you wished (keep existing approach too). Example:

<div resize-event resize.delegate="resizeListener() & throttle:500">