feat(events): rename all outputs to drop the on prefix

BREAKING CHANGE: The `onResizeStart` output has been renamed to `resizeStart` The `onResize` output has been renamed to `resize` The `onResizeEnd` output has been renamed to `resizeEnd`
mattlewis92 · Aug 12, 2016 · 9c76aac · 9c76aac
1 parent ef0e87f
commit 9c76aac
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ import {Resizable} from 'angular2-resizable';
   selector: 'demo-app',
   directives: [Resizable],
   // you should add some styles to the element. See the demo folder for a more fleshed out example
-  template: '<div mwl-resizable (onResizeEnd)="onResizeEnd($event)"></div>'
+  template: '<div mwl-resizable (resizeEnd)="onResizeEnd($event)"></div>'
 })
 export class DemoApp {
 
@@ -71,7 +71,7 @@ https://mattlewis92.github.io/angular2-resizable/docs/
 * Install local dev dependencies: `npm install` while current directory is this repo
 
 ### Development server
-Run `npm start` to start a development server on port 8000 with auto reload + tests. 
+Run `npm start` to start a development server on port 8000 with auto reload + tests.
 
 ### Testing
 Run `npm test` to run tests once or `npm run test:watch` to continually run tests.

diff --git a/demo/demo.ts b/demo/demo.ts
@@ -37,7 +37,7 @@ import {Resizable, ResizeEvent, ResizeHandle} from './../angular2-resizable';
         [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
         [enableGhostResize]="true"
         [resizeSnapGrid]="{left: 50, right: 50}"
-        (onResizeEnd)="onResizeEnd($event)">
+        (resizeEnd)="onResizeEnd($event)">
         <img
           src="http://i.imgur.com/eqzz2dl.gif"
           class="resize-handle"

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -239,7 +239,7 @@ export class Resizable implements OnInit, AfterViewInit {
   @Input() resizeEdges: Edges = {};
 
   /**
-   * Set to `true` to enable a temporary resizing effect of the element in between the `onResizeStart` and `onResizeEnd` events.
+   * Set to `true` to enable a temporary resizing effect of the element in between the `resizeStart` and `resizeEnd` events.
    */
   @Input() enableGhostResize: boolean = false;
 
@@ -253,17 +253,17 @@ export class Resizable implements OnInit, AfterViewInit {
   /**
    * Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
    */
-  @Output() onResizeStart: EventEmitter<Object> = new EventEmitter(false);
+  @Output() resizeStart: EventEmitter<Object> = new EventEmitter(false);
 
   /**
    * Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
    */
-  @Output() onResize: EventEmitter<Object> = new EventEmitter(false);
+  @Output() resize: EventEmitter<Object> = new EventEmitter(false);
 
   /**
    * Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
    */
-  @Output() onResizeEnd: EventEmitter<Object> = new EventEmitter(false);
+  @Output() resizeEnd: EventEmitter<Object> = new EventEmitter(false);
 
   /**
    * @private
@@ -402,7 +402,7 @@ export class Resizable implements OnInit, AfterViewInit {
         this.renderer.setElementStyle(currentResize.clonedNode, 'left', `${newBoundingRect.left}px`);
       }
 
-      this.onResize.emit({
+      this.resize.emit({
         edges: getEdgesDiff({
           edges: currentResize.edges,
           initialRectangle: currentResize.startingRect,
@@ -439,15 +439,15 @@ export class Resizable implements OnInit, AfterViewInit {
         this.renderer.setElementStyle(currentResize.clonedNode, 'user-drag', 'none');
         this.renderer.setElementStyle(currentResize.clonedNode, '-webkit-user-drag', 'none');
       }
-      this.onResizeStart.emit({
+      this.resizeStart.emit({
         edges: getEdgesDiff({edges, initialRectangle: startingRect, newRectangle: startingRect}),
         rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
       });
     });
 
     this.mouseup.subscribe(() => {
       if (currentResize) {
-        this.onResizeEnd.emit({
+        this.resizeEnd.emit({
           edges: getEdgesDiff({
             edges: currentResize.edges,
             initialRectangle: currentResize.startingRect,

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -32,19 +32,19 @@ describe('resizable directive', () => {
         [resizeEdges]="resizeEdges"
         [enableGhostResize]="enableGhostResize"
         [resizeSnapGrid]="resizeSnapGrid"
-        (onResizeStart)="onResizeStart($event)"
-        (onResize)="onResize($event)"
-        (onResizeEnd)="onResizeEnd($event)">
+        (resizeStart)="resizeStart($event)"
+        (resize)="resize($event)"
+        (resizeEnd)="resizeEnd($event)">
       </div>
     `
   })
   class TestCmp {
 
     @ViewChild(Resizable) public resizable: Resizable;
     public style: Object = {};
-    public onResizeStart: Function = sinon.spy();
-    public onResize: Function = sinon.spy();
-    public onResizeEnd: Function = sinon.spy();
+    public resizeStart: Function = sinon.spy();
+    public resize: Function = sinon.spy();
+    public resizeEnd: Function = sinon.spy();
     public validate: Function = sinon.stub().returns(true);
     public resizeEdges: Edges = {top: true, bottom: true, left: true, right: true};
     public enableGhostResize: boolean = true;
@@ -206,7 +206,7 @@ describe('resizable directive', () => {
           clientY: 200
         }
       }];
-      spyName = 'onResizeStart';
+      spyName = 'resizeStart';
       expectedEvent = {
         edges: {
           top: 0
@@ -236,7 +236,7 @@ describe('resizable directive', () => {
           clientY: 199
         }
       }];
-      spyName = 'onResize';
+      spyName = 'resize';
       expectedEvent = {
         edges: {
           top: -1
@@ -290,7 +290,7 @@ describe('resizable directive', () => {
           clientY: 198
         }
       }];
-      spyName = 'onResizeEnd';
+      spyName = 'resizeEnd';
       expectedEvent = {
         edges: {
           top: -2
@@ -344,7 +344,7 @@ describe('resizable directive', () => {
           clientY: 205
         }
       }];
-      spyName = 'onResizeEnd';
+      spyName = 'resizeEnd';
       expectedEvent = {
         edges: {
           left: -2
@@ -398,7 +398,7 @@ describe('resizable directive', () => {
           clientY: 352
         }
       }];
-      spyName = 'onResizeEnd';
+      spyName = 'resizeEnd';
       expectedEvent = {
         edges: {
           bottom: 2
@@ -452,7 +452,7 @@ describe('resizable directive', () => {
           clientY: 205
         }
       }];
-      spyName = 'onResizeEnd';
+      spyName = 'resizeEnd';
       expectedEvent = {
         edges: {
           right: 2
@@ -508,9 +508,9 @@ describe('resizable directive', () => {
         clientX: 12,
         clientY: 20
       });
-      expect(fixture.componentInstance.onResizeStart).not.to.have.been.called;
-      expect(fixture.componentInstance.onResize).not.to.have.been.called;
-      expect(fixture.componentInstance.onResizeEnd).not.to.have.been.called;
+      expect(fixture.componentInstance.resizeStart).not.to.have.been.called;
+      expect(fixture.componentInstance.resize).not.to.have.been.called;
+      expect(fixture.componentInstance.resizeEnd).not.to.have.been.called;
     });
 
   }));
@@ -523,7 +523,7 @@ describe('resizable directive', () => {
         clientX: 100,
         clientY: 205
       });
-      expect(fixture.componentInstance.onResizeStart).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({
         edges: {
           left: 0
         },
@@ -545,13 +545,13 @@ describe('resizable directive', () => {
         clientY: 205
       });
       expect(elm.nextSibling['style'].width).to.equal('302px');
-      fixture.componentInstance.onResizeEnd.reset();
+      fixture.componentInstance.resizeEnd.reset();
       triggerDomEvent('mousedown', elm, {
         clientX: 100,
         clientY: 205
       });
-      expect(fixture.componentInstance.onResizeEnd).not.to.have.been.called;
-      expect(fixture.componentInstance.onResizeStart).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeEnd).not.to.have.been.called;
+      expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({
         edges: {
           left: 0
         },
@@ -572,7 +572,7 @@ describe('resizable directive', () => {
         clientX: 101,
         clientY: 205
       });
-      expect(fixture.componentInstance.onResizeEnd).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({
         edges: {
           left: 1
         },
@@ -632,12 +632,12 @@ describe('resizable directive', () => {
         clientX: 99,
         clientY: 200
       });
-      fixture.componentInstance.onResize.reset();
+      fixture.componentInstance.resize.reset();
       triggerDomEvent('mousemove', elm, {
         clientX: 99,
         clientY: 199
       });
-      expect(fixture.componentInstance.onResize).not.to.have.been.called;
+      expect(fixture.componentInstance.resize).not.to.have.been.called;
     });
   }));
 
@@ -656,7 +656,7 @@ describe('resizable directive', () => {
         clientX: 500,
         clientY: 210
       });
-      expect(fixture.componentInstance.onResizeEnd).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({
         edges: {
           left: -1
         },
@@ -698,10 +698,10 @@ describe('resizable directive', () => {
         }
       };
       expect(fixture.componentInstance.validate).to.have.been.calledWith(firstResizeEvent);
-      expect(fixture.componentInstance.onResize).to.have.been.calledWith(firstResizeEvent);
+      expect(fixture.componentInstance.resize).to.have.been.calledWith(firstResizeEvent);
       fixture.componentInstance.validate.returns(false);
       fixture.componentInstance.validate.reset();
-      fixture.componentInstance.onResize.reset();
+      fixture.componentInstance.resize.reset();
       triggerDomEvent('mousemove', elm, {
         clientX: 98,
         clientY: 210
@@ -720,12 +720,12 @@ describe('resizable directive', () => {
         }
       };
       expect(fixture.componentInstance.validate).to.have.been.calledWith(secondResizeEvent);
-      expect(fixture.componentInstance.onResize).not.to.have.been.called;
+      expect(fixture.componentInstance.resize).not.to.have.been.called;
       triggerDomEvent('mouseup', elm, {
         clientX: 98,
         clientY: 210
       });
-      expect(fixture.componentInstance.onResizeEnd).to.have.been.calledWith(firstResizeEvent);
+      expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith(firstResizeEvent);
     });
   }));
 
@@ -744,7 +744,7 @@ describe('resizable directive', () => {
         clientX: 100,
         clientY: 200
       });
-      expect(fixture.componentInstance.onResizeStart).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({
         edges: {
           left: 0
         },
@@ -776,17 +776,17 @@ describe('resizable directive', () => {
         clientX: 100,
         clientY: 210
       });
-      expect(fixture.componentInstance.onResizeStart).not.to.have.been.called;
+      expect(fixture.componentInstance.resizeStart).not.to.have.been.called;
       triggerDomEvent('mousemove', elm, {
         clientX: 101,
         clientY: 210
       });
-      expect(fixture.componentInstance.onResize).not.to.have.been.called;
+      expect(fixture.componentInstance.resize).not.to.have.been.called;
       triggerDomEvent('mouseup', elm, {
         clientX: 101,
         clientY: 210
       });
-      expect(fixture.componentInstance.onResizeEnd).not.to.have.been.called;
+      expect(fixture.componentInstance.resizeEnd).not.to.have.been.called;
     });
 
   }));
@@ -798,9 +798,9 @@ describe('resizable directive', () => {
         class="rectangle"
         [ngStyle]="style"
         mwl-resizable
-        (onResizeStart)="onResizeStart($event)"
-        (onResize)="onResize($event)"
-        (onResizeEnd)="onResizeEnd($event)">
+        (resizeStart)="resizeStart($event)"
+        (resize)="resize($event)"
+        (resizeEnd)="resizeEnd($event)">
         <span
           style="width: 5px; height: 5px; position: absolute; bottom: 5px; right: 5px"
           class="resize-handle"
@@ -815,7 +815,7 @@ describe('resizable directive', () => {
         clientX: 395,
         clientY: 345
       });
-      expect(fixture.componentInstance.onResizeStart).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({
         edges: {
           bottom: 0,
           right: 0
@@ -833,7 +833,7 @@ describe('resizable directive', () => {
         clientX: 396,
         clientY: 345
       });
-      expect(fixture.componentInstance.onResize).to.have.been.calledWith({
+      expect(fixture.componentInstance.resize).to.have.been.calledWith({
         edges: {
           bottom: 0,
           right: 1
@@ -851,7 +851,7 @@ describe('resizable directive', () => {
         clientX: 396,
         clientY: 345
       });
-      expect(fixture.componentInstance.onResizeEnd).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({
         edges: {
           bottom: 0,
           right: 1
@@ -908,7 +908,7 @@ describe('resizable directive', () => {
         clientX: 99,
         clientY: 205
       });
-      expect(fixture.componentInstance.onResize).to.have.been.calledWith({
+      expect(fixture.componentInstance.resize).to.have.been.calledWith({
         edges: {
           left: 0
         },
@@ -925,12 +925,12 @@ describe('resizable directive', () => {
         clientX: 95,
         clientY: 205
       });
-      expect(fixture.componentInstance.onResize).to.have.been.calledOnce;
+      expect(fixture.componentInstance.resize).to.have.been.calledOnce;
       triggerDomEvent('mousemove', elm, {
         clientX: 89,
         clientY: 205
       });
-      expect(fixture.componentInstance.onResize).to.have.been.calledWith({
+      expect(fixture.componentInstance.resize).to.have.been.calledWith({
         edges: {
           left: -10
         },
@@ -943,12 +943,12 @@ describe('resizable directive', () => {
           bottom: 350
         }
       });
-      expect(fixture.componentInstance.onResize).to.have.been.calledTwice;
+      expect(fixture.componentInstance.resize).to.have.been.calledTwice;
       triggerDomEvent('mouseup', elm, {
         clientX: 89,
         clientY: 205
       });
-      expect(fixture.componentInstance.onResizeEnd).to.have.been.calledWith({
+      expect(fixture.componentInstance.resizeEnd).to.have.been.calledWith({
         edges: {
           left: -10
         },