ictinus - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

demo/demo.js

 // Split Layout Examples
 document.addEventListener('DOMContentLoaded', () => {
-  new ictinus.SplitLayout(document.querySelector('#horizontal-example'), 'horizontal');
-  new ictinus.SplitLayout(document.querySelector('#vertical-example'), 'vertical', 20);
+  new ictinus.BareSplitLayout(document.querySelector('#horizontal-example'));
+  new ictinus.BareSplitLayout(document.querySelector('#vertical-example'), 20);
 });

dist/ictinus.js

@@ -7,7 +7,17 @@ (function (global, factory) {
 
-  class BareSplitLayout {
-      constructor(container, orientation, min = 100) {
+  class BaseLayout {
+      constructor(container) {
           this.container = container;
-          this.orientation = orientation;
+      }
+      ;
+  }
+
+  class BareSplitLayout extends BaseLayout {
+      constructor(container, min = 100, onResize = null) {
+          super(container);
           this.min = min;
+          this.onResize = onResize;
+          this.cancelSelection = e => {
+              e.preventDefault();
+          };
           this.startResize = e => {
@@ -19,2 +29,3 @@ e.stopPropagation();
               window.addEventListener('mouseup', this.stopResize);
+              window.addEventListener('selectstart', this.cancelSelection);
           };
@@ -28,3 +39,5 @@ this.resize = e => {
               window.removeEventListener('mousemove', this.resize);
+              window.removeEventListener('selectstart', this.cancelSelection);
           };
+          this.orientation = (this.container.classList.contains('split-vertical')) ? 'vertical' : 'horizontal';
           this.dimension = (this.orientation == 'horizontal') ? 'width' : 'height';
@@ -48,6 +61,9 @@ this.axis = (this.orientation == 'horizontal') ? 'clientX' : 'clientY';
           this.container.style[cssProperty] = `${ratio.toFixed(3)}% 5px 5px auto`;
+          if (this.onResize) {
+              this.onResize.call(this, ratio);
+          }
       }
   }
   class SplitLayout extends BareSplitLayout {
-      constructor(container, orientation, min = 100, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
+      constructor(container, orientation, min = 100, onResize = null, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
           container.classList.add('split-layout-container', `split-${orientation}`);
@@ -60,3 +76,3 @@ elementA.classList.add('split-layout-element');
           container.appendChild(elementB);
-          super(container, orientation, min);
+          super(container, min, onResize);
       }
@@ -63,0 +79,0 @@ }

lib/main.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const split_1 = require("./split");
+var split_1 = require("./split");
 exports.BareSplitLayout = split_1.BareSplitLayout;
 exports.SplitLayout = split_1.SplitLayout;
 //# sourceMappingURL=main.js.map

lib/split.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-class BareSplitLayout {
-    constructor(container, orientation, min = 100) {
-        this.container = container;
-        this.orientation = orientation;
+const base_1 = require("./base");
+class BareSplitLayout extends base_1.BaseLayout {
+    constructor(container, min = 100, onResize = null) {
+        super(container);
         this.min = min;
+        this.onResize = onResize;
+        this.cancelSelection = e => {
+            e.preventDefault();
+        };
         this.startResize = e => {
@@ -14,2 +18,3 @@ e.stopPropagation();
             window.addEventListener('mouseup', this.stopResize);
+            window.addEventListener('selectstart', this.cancelSelection);
         };
@@ -23,3 +28,5 @@ this.resize = e => {
             window.removeEventListener('mousemove', this.resize);
+            window.removeEventListener('selectstart', this.cancelSelection);
         };
+        this.orientation = (this.container.classList.contains('split-vertical')) ? 'vertical' : 'horizontal';
         this.dimension = (this.orientation == 'horizontal') ? 'width' : 'height';
@@ -43,2 +50,5 @@ this.axis = (this.orientation == 'horizontal') ? 'clientX' : 'clientY';
         this.container.style[cssProperty] = `${ratio.toFixed(3)}% 5px 5px auto`;
+        if (this.onResize) {
+            this.onResize.call(this, ratio);
+        }
     }
@@ -48,3 +58,3 @@ }
 class SplitLayout extends BareSplitLayout {
-    constructor(container, orientation, min = 100, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
+    constructor(container, orientation, min = 100, onResize = null, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
         container.classList.add('split-layout-container', `split-${orientation}`);
@@ -57,3 +67,3 @@ elementA.classList.add('split-layout-element');
         container.appendChild(elementB);
-        super(container, orientation, min);
+        super(container, min, onResize);
     }
@@ -60,0 +70,0 @@ }

package.json

 {
   "name": "ictinus",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "main": "dist/ictinus.js",
@@ -5,0 +5,0 @@ "author": "Paris Kasidiaris <[e-mail]>",

src/main.ts

@@ -1,2 +0,1 @@
-import { BareSplitLayout, SplitLayout } from './split';
-export { BareSplitLayout, SplitLayout };
+export { BareSplitLayout, SplitLayout } from './split';

src/split.spec.ts

@@ -35,3 +35,3 @@ import * as chai from 'chai';
 
-    const layout = new SplitLayout(container, 'horizontal', 100, undefined, gutter);
+    const layout = new SplitLayout(container, 'horizontal', 100, undefined, undefined, gutter);
 
@@ -75,2 +75,8 @@ it('should add the appropriate classes to the SplitLayout container', () => {
 
+    it('should cancel selection via `selectstart` on the window', () => {
+      chai.expect(window.addEventListener).to.have.been.third.called.with(
+        'selectstart', <any>layout.cancelSelection,
+      );
+    });
+
     after(() => {
@@ -129,5 +135,11 @@ const spy = <any>(chai.spy);
     const horizontalContainer = document.createElement('div');
-    const horizontalLayout = new SplitLayout(horizontalContainer, 'horizontal', 64);
+    const horizontalOnResizeCallback = chai.spy();
+    const horizontalLayout = new SplitLayout(
+      horizontalContainer, 'horizontal', 64, horizontalOnResizeCallback,
+    );
     const verticalContainer = document.createElement('div');
-    const verticalLayout = new SplitLayout(verticalContainer, 'vertical', 32);
+    const verticalOnResizeCallback = chai.spy();
+    const verticalLayout = new SplitLayout(
+      verticalContainer, 'vertical', 32, verticalOnResizeCallback,
+    );
 
@@ -150,2 +162,10 @@ // Create a 800px ⨉ 400px DOMRect with 100px distance from the top of the screen and
 
+    it('should fire the onResize callback with the appropriate parameter', () => {
+      horizontalLayout.setSize(160);  // 20% of 800px width
+      chai.expect(horizontalOnResizeCallback).to.be.called.once.with(<any>20);
+
+      verticalLayout.setSize(40);  // 10% of 400px height
+      chai.expect(verticalOnResizeCallback).to.be.called.once.with(<any>10);
+    });
+
     it('should do nothing if the provided value exceeds min or max values', () => {
@@ -201,8 +221,19 @@ const initialHorizontalStyle = horizontalLayout.container.style.gridTemplateColumns;
 
+    after(() => {
+      const spy = <any>(chai.spy);
+      spy.restore(window, 'removeEventListener');
+    });
+
     it('should remove the `resize` callback from the `mousemove` event on the container', () => {
-      chai.expect(window.removeEventListener).to.have.been.called.once.with(
+      chai.expect(window.removeEventListener).to.have.been.first.called.with(
         'mousemove', <any>layout.resize,
       );
     });
+
+    it('should restore selection on window', () => {
+      chai.expect(window.removeEventListener).to.have.been.second.called.with(
+        'selectstart', <any>layout.cancelSelection,
+      );
+    });
   });
 });

src/split.ts

@@ -1,3 +0,7 @@
-export class BareSplitLayout {
+import { BaseLayout } from './base';
+
+
+export class BareSplitLayout extends BaseLayout {
   public readonly gutter: HTMLElement;
+  public readonly orientation: 'horizontal' | 'vertical';
   private readonly dimension: 'width' | 'height';
@@ -10,6 +14,10 @@ private readonly axis: 'clientX' | 'clientY';
   constructor(
-    public readonly container: HTMLElement,
-    public readonly orientation: 'horizontal' | 'vertical',
-    public readonly min: number = 100)
+    container: HTMLElement,
+    public readonly min: number = 100,
+    public readonly onResize: Function = null)
   {
+    super(container);
+    this.orientation = (
+      this.container.classList.contains('split-vertical')
+    ) ? 'vertical' : 'horizontal';
     this.dimension = (this.orientation == 'horizontal') ? 'width' : 'height';
@@ -30,2 +38,6 @@ this.axis = (this.orientation == 'horizontal') ? 'clientX' : 'clientY';
 
+  public cancelSelection = e => {
+    e.preventDefault();
+  }
+
   public startResize = e => {
@@ -37,2 +49,3 @@ e.stopPropagation();
     window.addEventListener('mouseup', this.stopResize);
+    window.addEventListener('selectstart', this.cancelSelection);
   }
@@ -55,2 +68,6 @@
     this.container.style[cssProperty] = `${ratio.toFixed(3)}% 5px 5px auto`;
+
+    if (this.onResize) {
+      this.onResize.call(this, ratio);
+    }
   }
@@ -61,2 +78,3 @@
     window.removeEventListener('mousemove', this.resize);
+    window.removeEventListener('selectstart', this.cancelSelection);
   }
@@ -71,5 +89,6 @@ }
     min: number = 100,
+    onResize: Function = null,
     elementA: HTMLElement = document.createElement('div'),
     gutter: HTMLElement = document.createElement('div'),
-    elementB: HTMLElement = document.createElement('div'),)
+    elementB: HTMLElement = document.createElement('div'))
   {
@@ -85,4 +104,4 @@ container.classList.add('split-layout-container', `split-${orientation}`);
 
-    super(container, orientation, min);
+    super(container, min, onResize);
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136742

increased by19.01%

Number of package files

81

increased by62%

Lines of code

535

increased by18.89%

No dependency changes