ictinus - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/ictinus.js

@@ -15,5 +15,4 @@ (function (global, factory) {
   class BareSplitLayout extends BaseLayout {
-      constructor(container, min = 100, onResize = null) {
+      constructor(container, onResize = null) {
           super(container);
-          this.min = min;
           this.onResize = onResize;
@@ -26,3 +25,2 @@ this.cancelSelection = e => {
               this.rect = this.container.getBoundingClientRect();
-              this.max = this.rect[this.dimension] - this.min;
               window.addEventListener('mousemove', this.resize);
@@ -39,2 +37,3 @@ window.addEventListener('mouseup', this.stopResize);
               window.removeEventListener('mousemove', this.resize);
+              window.removeEventListener('mouseup', this.stopResize);
               window.removeEventListener('selectstart', this.cancelSelection);
@@ -55,8 +54,5 @@ };
       setSize(size) {
-          if (size < this.min || size > this.max) {
-              return;
-          }
           const ratio = size / this.rect[this.dimension] * 100;
-          const cssProperty = (this.orientation == 'horizontal') ? 'gridTemplateColumns' : 'gridTemplateRows';
-          this.container.style[cssProperty] = `${ratio.toFixed(3)}% 5px 5px auto`;
+          const element = this.container.querySelector('.split-layout-element:first-child');
+          element.style[this.dimension] = `${ratio.toFixed(3)}%`;
           if (this.onResize) {
@@ -68,3 +64,3 @@ this.onResize.call(this, ratio);
   class SplitLayout extends BareSplitLayout {
-      constructor(container, orientation, min = 100, onResize = null, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
+      constructor(container, orientation, onResize = null, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
           container.classList.add('split-layout-container', `split-${orientation}`);
@@ -77,3 +73,3 @@ elementA.classList.add('split-layout-element');
           container.appendChild(elementB);
-          super(container, min, onResize);
+          super(container, onResize);
       }
@@ -80,0 +76,0 @@ }

lib/split.js

@@ -5,5 +5,4 @@ "use strict";
 class BareSplitLayout extends base_1.BaseLayout {
-    constructor(container, min = 100, onResize = null) {
+    constructor(container, onResize = null) {
         super(container);
-        this.min = min;
         this.onResize = onResize;
@@ -16,3 +15,2 @@ this.cancelSelection = e => {
             this.rect = this.container.getBoundingClientRect();
-            this.max = this.rect[this.dimension] - this.min;
             window.addEventListener('mousemove', this.resize);
@@ -29,2 +27,3 @@ window.addEventListener('mouseup', this.stopResize);
             window.removeEventListener('mousemove', this.resize);
+            window.removeEventListener('mouseup', this.stopResize);
             window.removeEventListener('selectstart', this.cancelSelection);
@@ -45,8 +44,5 @@ };
     setSize(size) {
-        if (size < this.min || size > this.max) {
-            return;
-        }
         const ratio = size / this.rect[this.dimension] * 100;
-        const cssProperty = (this.orientation == 'horizontal') ? 'gridTemplateColumns' : 'gridTemplateRows';
-        this.container.style[cssProperty] = `${ratio.toFixed(3)}% 5px 5px auto`;
+        const element = this.container.querySelector('.split-layout-element:first-child');
+        element.style[this.dimension] = `${ratio.toFixed(3)}%`;
         if (this.onResize) {
@@ -59,3 +55,3 @@ this.onResize.call(this, ratio);
 class SplitLayout extends BareSplitLayout {
-    constructor(container, orientation, min = 100, onResize = null, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
+    constructor(container, orientation, onResize = null, elementA = document.createElement('div'), gutter = document.createElement('div'), elementB = document.createElement('div')) {
         container.classList.add('split-layout-container', `split-${orientation}`);
@@ -68,3 +64,3 @@ elementA.classList.add('split-layout-element');
         container.appendChild(elementB);
-        super(container, min, onResize);
+        super(container, onResize);
     }
@@ -71,0 +67,0 @@ }

package.json

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

README.md

@@ -8,2 +8,8 @@ # Ictinus
 
+## Principles
+
+### Prefer CSS over JavaScript
+
+Ictinus leaves the most decisions possible to CSS. Whatever cannot be accomplished by CSS, is being delegated to JavaScript (e.g. resizing an element with drag n drop). Essentially Ictinus employes the [rule of least power](https://en.wikipedia.org/wiki/Rule_of_least_power).
+
 ## License
@@ -10,0 +16,0 @@

src/split.spec.ts

@@ -35,3 +35,3 @@ import * as chai from 'chai';
 
-    const layout = new SplitLayout(container, 'horizontal', 100, undefined, undefined, gutter);
+    const layout = new SplitLayout(container, 'horizontal', undefined, undefined, gutter);
 
@@ -136,3 +136,3 @@ it('should add the appropriate classes to the SplitLayout container', () => {
     const horizontalLayout = new SplitLayout(
-      horizontalContainer, 'horizontal', 64, horizontalOnResizeCallback,
+      horizontalContainer, 'horizontal', horizontalOnResizeCallback,
     );
@@ -142,3 +142,3 @@ const verticalContainer = document.createElement('div');
     const verticalLayout = new SplitLayout(
-      verticalContainer, 'vertical', 32, verticalOnResizeCallback,
+      verticalContainer, 'vertical', verticalOnResizeCallback,
     );
@@ -159,50 +159,23 @@
       horizontalLayout.startResize(mouseDownEvent);
+      horizontalLayout.setSize(160);  // 20% of 800px width
+
       verticalLayout.startResize(mouseDownEvent);
+      verticalLayout.setSize(40);  // 10% of 400px height
     });
 
     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', () => {
-      const initialHorizontalStyle = horizontalLayout.container.style.gridTemplateColumns;
-      const initialVerticalStyle = verticalLayout.container.style.gridTemplateRows;
-
-      horizontalLayout.setSize(63);  // Too small
-      chai.assert.equal(
-        horizontalLayout.container.style.gridTemplateColumns, initialHorizontalStyle,
-      );
-
-      verticalLayout.setSize(31);  // Too small
-      chai.assert.equal(
-        verticalLayout.container.style.gridTemplateRows, initialVerticalStyle,
-      );
-
-      horizontalLayout.setSize(rect.width - 63);  // Too big
-      chai.assert.equal(
-        horizontalLayout.container.style.gridTemplateColumns, initialHorizontalStyle,
-      );
-
-      verticalLayout.setSize(rect.height - 31);  // Too big
-      chai.assert.equal(
-        verticalLayout.container.style.gridTemplateRows, initialVerticalStyle,
-      );
-    });
-
     it('should set the appropriate proportional grid dimensions', () => {
-      horizontalLayout.setSize(160);  // 20% of 800px width
-      chai.assert.equal(
-        horizontalLayout.container.style.gridTemplateColumns,
-        '20.000% 5px 5px auto',
+      const horizontalElement = horizontalLayout.container.querySelector(
+        '.split-layout-element:first-child'
       );
+      chai.assert.equal((<HTMLElement>horizontalElement).style.width, '20.000%');
 
-      verticalLayout.setSize(40);  // 10% of 400px height
-      chai.assert.equal(
-        verticalLayout.container.style.gridTemplateRows,
-        '10.000% 5px 5px auto',
+      const verticalElement = verticalLayout.container.querySelector(
+        '.split-layout-element:first-child'
       );
+      chai.assert.equal((<HTMLElement>verticalElement).style.height, '10.000%');
     });
@@ -226,3 +199,3 @@ });
 
-    it('should remove the `resize` callback from the `mousemove` event on the container', () => {
+    it('should remove the `resize` callback from the `mousemove` event on the window', () => {
       chai.expect(window.removeEventListener).to.have.been.first.called.with(
@@ -233,4 +206,10 @@ 'mousemove', <any>layout.resize,
 
+    it('should remove the `stopResize` callback from the `mouseup` event on the window', () => {
+      chai.expect(window.removeEventListener).to.have.been.second.called.with(
+        'mouseup', <any>layout.stopResize,
+      );
+    });
+
     it('should restore selection on window', () => {
-      chai.expect(window.removeEventListener).to.have.been.second.called.with(
+      chai.expect(window.removeEventListener).to.have.been.third.called.with(
         'selectstart', <any>layout.cancelSelection,
@@ -237,0 +216,0 @@ );

src/split.ts

@@ -10,3 +10,2 @@ import { BaseLayout } from './base';
   private readonly rectAxis: 'left' | 'top';
-  private max: number;
   private rect: DOMRect;
@@ -16,3 +15,2 @@
     container: HTMLElement,
-    public readonly min: number = 100,
     public readonly onResize: Function = null)
@@ -46,3 +44,2 @@ {
     this.rect = <DOMRect>this.container.getBoundingClientRect();
-    this.max = this.rect[this.dimension] - this.min;
     window.addEventListener('mousemove', this.resize);
@@ -60,10 +57,6 @@ window.addEventListener('mouseup', this.stopResize);
   public setSize(size: number) {
-    if (size < this.min || size > this.max) {
-      return;
-    }
-
     const ratio = size / this.rect[this.dimension] * 100;
-    const cssProperty = (this.orientation == 'horizontal') ? 'gridTemplateColumns' : 'gridTemplateRows';
+    const element = <HTMLElement>this.container.querySelector('.split-layout-element:first-child');
 
-    this.container.style[cssProperty] = `${ratio.toFixed(3)}% 5px 5px auto`;
+    element.style[this.dimension] = `${ratio.toFixed(3)}%`;
 
@@ -78,2 +71,3 @@ if (this.onResize) {
     window.removeEventListener('mousemove', this.resize);
+    window.removeEventListener('mouseup', this.stopResize);
     window.removeEventListener('selectstart', this.cancelSelection);
@@ -88,3 +82,2 @@ }
     orientation: 'horizontal' | 'vertical',
-    min: number = 100,
     onResize: Function = null,
@@ -104,4 +97,4 @@ elementA: HTMLElement = document.createElement('div'),
 
-    super(container, min, onResize);
+    super(container, 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

137646

increased by0.66%

Number of lines in readme file

23

increased by35.29%

Worsened metrics

Lines of code

515

decreased by-3.74%

No dependency changes