🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

ictinus

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ictinus - npm Package Compare versions

Comparing version
0.6.0
 to
0.7.0
.rpt2_cache/10a220...73498b871ae8e26a6c347b5819e7cf6614abfb8

Sorry, the diff of this file is not supported yet

.rpt2_cache/10a220...73498b871ae8e26a6c347b5819e7cf6614abfb8

Sorry, the diff of this file is not supported yet

.rpt2_cache/10a220...73498b871ae8e26a6c347b5819e7cf6614abfb8

Sorry, the diff of this file is not supported yet

.rpt2_cache/2340d9...28248949f75ef78196148958acfc249b16bd892

Sorry, the diff of this file is not supported yet

.rpt2_cache/2340d9...28248949f75ef78196148958acfc249b16bd892

Sorry, the diff of this file is not supported yet

.rpt2_cache/2340d9...28248949f75ef78196148958acfc249b16bd892

Sorry, the diff of this file is not supported yet

+17
-22
demo/demo.css

@@ -1,26 +0,29 @@

#horizontal-example {
width: 60vw;
height: 200px;
background: yellow;
margin: 0 auto;
.split-layout-element {
padding: 8px;
}
#horizontal-example .split-layout-element {
max-height: 100%;
overflow: auto;
.split-layout-gutter {
background: rgba(192, 192, 192, 0.3);
}
#horizontal-example .split-layout-element:first-child {
background-color: rgba(255, 0, 0, 0.5);
.split-layout-element:first-child {
background-color: rgba(204, 255, 204, 0.7);
}
#horizontal-example .split-layout-element:last-child {
background-color: rgba(0, 0, 255, 0.5);
.split-layout-element:last-child {
background-color: rgba(255, 255, 204, 0.7);
}
#horizontal-example {
width: 60vw;
height: 200px;
}
.#horizontal-example .split-layout-container.split-horizontal > .split-layout-element {
min-width: 25%;
}
#vertical-example {
height: 40vh;
width: 200px;
background: green;
margin: 0 auto;
}

@@ -32,9 +35,1 @@

}
#vertical-example .split-layout-element:first-child {
background-color: rgba(256, 0, 0, 0.5);
}
#vertical-example .split-layout-element:last-child {
background-color: rgba(0, 0, 256, 0.5);
}
+2
-2
demo/index.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>

<h3>Horizontal Example</h3>
<div id="horizontal-example" class="split-layout-container split-horizontal">
<div id="horizontal-example" class="split-layout-container split-horizontal split-transparent-gutter">
<div class="split-layout-element">

@@ -24,3 +24,3 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex arcu, hendrerit eu dolor vitae, luctus egestas sapien. Cras rhoncus dapibus diam et mattis. Vivamus quis turpis vitae justo aliquam vehicula ac ut mi. Pellentesque dictum vel lorem sit amet sagittis. Integer maximus vel risus a condimentum. Nulla tellus mauris, tristique sit amet risus eget, venenatis ullamcorper dui. Vestibulum congue fermentum dui eget tempor. Aenean vel pharetra arcu. Fusce consequat, enim sit amet dapibus interdum, erat neque ultrices augue, at sollicitudin turpis ligula id ipsum. Sed ac rutrum erat. Sed in nisi ex. Integer lobortis suscipit ante, et finibus felis mattis quis. Pellentesque aliquam velit dolor, nec volutpat odio accumsan malesuada. Suspendisse tempor libero nec sapien pretium dignissim.

<h3>Vertical Example</h3>
<div id="vertical-example" class="split-layout-container split-vertical">
<div id="vertical-example" class="split-layout-container split-vertical split-transparent-gutter">
<div class="split-layout-element">

@@ -27,0 +27,0 @@ Vestibulum sollicitudin ex id quam pharetra faucibus. Mauris faucibus accumsan lorem, at consequat risus. Suspendisse condimentum arcu et auctor vulputate. Aliquam ullamcorper odio eget justo viverra, sit amet mattis ipsum porttitor. Vestibulum at mattis arcu. Donec ornare, dolor eget tincidunt rutrum, augue nibh porta lectus, vitae feugiat massa turpis eget felis. Aliquam non consequat mi. Quisque ac ante volutpat, dapibus orci eu, commodo mauris. Cras dapibus ultrices mi ac vulputate. Pellentesque ut magna ac metus mattis lacinia in eu tortor. Nullam sed suscipit ante. Ut tincidunt, nisl sed fermentum efficitur, massa lectus sodales magna, in euismod sem augue id nibh. Pellentesque ut mollis nisl. Nunc eget pulvinar tortor. Vivamus sit amet dolor nec augue rutrum porttitor nec et quam.

+45
-40
dist/ictinus.css
.split-layout-container {
box-sizing: border-box;
display: grid;
grid-gap: 0; }
display: flex;
align-items: stretch; }
.split-layout-container > .split-layout-element {
overflow: auto; }
.split-layout-container > .split-layout-element:last-child {
flex: 1; }
.split-layout-container.split-transparent-gutter > .split-layout-element,
.split-layout-container.split-transparent-gutter > .split-layout-gutter {
position: relative; }
.split-layout-container.split-transparent-gutter > .split-layout-element {
z-index: 1; }
.split-layout-container.split-transparent-gutter > .split-layout-gutter {
z-index: 2; }
.split-layout-container.split-transparent-gutter.split-horizontal > .split-layout-element:first-child {
width: 20%; }
.split-layout-container.split-transparent-gutter.split-horizontal > .split-layout-gutter {
left: -5px; }
.split-layout-container.split-transparent-gutter.split-horizontal > .split-layout-element:last-child {
left: -10px;
margin-right: -10px; }
.split-layout-container.split-transparent-gutter.split-vertical > .split-layout-element:first-child {
height: 20%; }
.split-layout-container.split-transparent-gutter.split-vertical > .split-layout-gutter {
top: -5px; }
.split-layout-container.split-transparent-gutter.split-vertical > .split-layout-element:last-child {
top: -10px;
margin-bottom: -10px; }
.split-layout-container.split-horizontal {
flex-direction: row; }
.split-layout-container.split-horizontal > .split-layout-element {
min-width: 100px; }
.split-layout-container.split-horizontal > .split-layout-element:first-child {
width: 20%; }
.split-layout-container.split-horizontal > .split-layout-gutter {
width: 10px;
cursor: ew-resize; }
.split-layout-container.split-vertical {
flex-direction: column; }
.split-layout-container.split-vertical > .split-layout-element {
min-height: 100px; }
.split-layout-container.split-vertical > .split-layout-element:first-child {
height: 20%; }
.split-layout-container.split-vertical > .split-layout-gutter {
height: 10px;
cursor: ns-resize; }
.split-layout-gutter {
z-index: 100; }
.split-layout-container.split-horizontal {
grid-template-columns: auto 5px 5px auto; }
.split-layout-container.split-horizontal > .split-layout-element,
.split-layout-container.split-horizontal > .split-layout-gutter {
height: 100%;
grid-row: 1; }
.split-layout-container.split-horizontal > .split-layout-element:first-child {
grid-column: 1 / 3; }
.split-layout-container.split-horizontal > .split-layout-element:last-child {
grid-column: 3 / 5; }
.split-layout-container.split-horizontal > .split-layout-gutter {
cursor: ew-resize;
grid-column: 2 / 4; }
.split-layout-container.split-vertical {
grid-template-rows: auto 5px 5px auto; }
.split-layout-container.split-vertical > .split-layout-element,
.split-layout-container.split-vertical > .split-layout-gutter {
grid-column: 1; }
.split-layout-container.split-vertical > .split-layout-element:first-child {
grid-row: 1 / 3; }
.split-layout-container.split-vertical > .split-layout-element:last-child {
grid-row: 3 / 5; }
.split-layout-container.split-vertical > .split-layout-gutter {
cursor: ns-resize;
grid-row: 2 / 4; }
/*# sourceMappingURL=ictinus.css.map */
+1
-1
dist/ictinus.css.map

@@ -9,3 +9,3 @@ {

"names": [],
"mappings": "ACAA,AAAA,uBAAuB,CAAC;EACpB,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,CAAC,GACd;;AAED,AAAA,oBAAoB,CAAC;EACjB,OAAO,EAAE,GAAG,GACf;;AAED,AAAA,uBAAuB,AAAA,iBAAiB,CAAC;EACrC,qBAAqB,EAAE,iBAAiB,GAC3C;;AAED,AAAA,uBAAuB,AAAA,iBAAiB,GAAG,qBAAqB;AAChE,uBAAuB,AAAA,iBAAiB,GAAG,oBAAoB,CAAC;EAC5D,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,CAAC,GACd;;AAED,AAAA,uBAAuB,AAAA,iBAAiB,GAAE,qBAAqB,AAAA,YAAY,CAAC;EACxE,WAAW,EAAE,KAAK,GACrB;;AAED,AAAA,uBAAuB,AAAA,iBAAiB,GAAE,qBAAqB,AAAA,WAAW,CAAC;EACvE,WAAW,EAAE,KAAK,GACrB;;AAED,AAAA,uBAAuB,AAAA,iBAAiB,GAAG,oBAAoB,CAAC;EAC5D,MAAM,EAAE,SAAS;EACjB,WAAW,EAAE,KAAK,GACrB;;AAED,AAAA,uBAAuB,AAAA,eAAe,CAAC;EACnC,kBAAkB,EAAE,iBAAiB,GACxC;;AAED,AAAA,uBAAuB,AAAA,eAAe,GAAG,qBAAqB;AAC9D,uBAAuB,AAAA,eAAe,GAAG,oBAAoB,CAAC;EAC1D,WAAW,EAAE,CAAC,GACjB;;AAED,AAAA,uBAAuB,AAAA,eAAe,GAAE,qBAAqB,AAAA,YAAY,CAAC;EACtE,QAAQ,EAAE,KAAK,GAClB;;AAED,AAAA,uBAAuB,AAAA,eAAe,GAAE,qBAAqB,AAAA,WAAW,CAAC;EACrE,QAAQ,EAAE,KAAK,GAClB;;AAED,AAAA,uBAAuB,AAAA,eAAe,GAAG,oBAAoB,CAAC;EAC1D,MAAM,EAAE,SAAS;EACjB,QAAQ,EAAE,KAAK,GAClB"
"mappings": "ACKA,AAAA,uBAAuB,CAAC;EACtB,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,OAAO,GAoFrB;EAvFD,AAKE,uBALqB,GAKnB,qBAAqB,CAAC;IACtB,QAAQ,EAAE,IAAI,GAKf;IAXH,AAQI,uBARmB,GAKnB,qBAAqB,AAGpB,WAAW,CAAC;MACX,IAAI,EAAE,CAAC,GACR;EAVL,AAcI,uBAdmB,AAapB,yBAAyB,GACtB,qBAAqB;EAd3B,uBAAuB,AAapB,yBAAyB,GAEtB,oBAAoB,CAAE;IACtB,QAAQ,EAAE,QAAQ,GACnB;EAjBL,AAmBI,uBAnBmB,AAapB,yBAAyB,GAMtB,qBAAqB,CAAC;IACtB,OAAO,EAAE,CAAC,GACX;EArBL,AAuBI,uBAvBmB,AAapB,yBAAyB,GAUtB,oBAAoB,CAAC;IACrB,OAAO,EAAE,CAAC,GACX;EAzBL,AA4BM,uBA5BiB,AAapB,yBAAyB,AAcvB,iBAAiB,GACd,qBAAqB,AAAA,YAAY,CAAC;IAClC,KAAK,EAjCuB,GAAG,GAkChC;EA9BP,AA+BM,uBA/BiB,AAapB,yBAAyB,AAcvB,iBAAiB,GAId,oBAAoB,CAAC;IACrB,IAAI,EAAE,IAA4B,GACnC;EAjCP,AAkCM,uBAlCiB,AAapB,yBAAyB,AAcvB,iBAAiB,GAOd,qBAAqB,AAAA,WAAW,CAAC;IACjC,IAAI,EAxCe,KAAI;IAyCvB,YAAY,EAzCO,KAAI,GA0CxB;EArCP,AAyCM,uBAzCiB,AAapB,yBAAyB,AA2BvB,eAAe,GACZ,qBAAqB,AAAA,YAAY,CAAC;IAClC,MAAM,EA9CsB,GAAG,GA+ChC;EA3CP,AA4CM,uBA5CiB,AAapB,yBAAyB,AA2BvB,eAAe,GAIZ,oBAAoB,CAAC;IACrB,GAAG,EAAE,IAA4B,GAClC;EA9CP,AA+CM,uBA/CiB,AAapB,yBAAyB,AA2BvB,eAAe,GAOZ,qBAAqB,AAAA,WAAW,CAAC;IACjC,GAAG,EArDgB,KAAI;IAsDvB,aAAa,EAtDM,KAAI,GAuDxB;EAlDP,AAsDE,uBAtDqB,AAsDpB,iBAAiB,CAAC;IACjB,cAAc,EAAE,GAAG,GAcpB;IArEH,AAyDI,uBAzDmB,AAsDpB,iBAAiB,GAGd,qBAAqB,CAAC;MACtB,SAAS,EA7DiB,KAAK,GAkEhC;MA/DL,AA4DM,uBA5DiB,AAsDpB,iBAAiB,GAGd,qBAAqB,AAGpB,YAAY,CAAC;QACZ,KAAK,EAjEuB,GAAG,GAkEhC;IA9DP,AAiEI,uBAjEmB,AAsDpB,iBAAiB,GAWd,oBAAoB,CAAC;MACrB,KAAK,EAvEgB,IAAI;MAwEzB,MAAM,EAAE,SAAS,GAClB;EApEL,AAuEE,uBAvEqB,AAuEpB,eAAe,CAAC;IACf,cAAc,EAAE,MAAM,GAcvB;IAtFH,AA0EI,uBA1EmB,AAuEpB,eAAe,GAGZ,qBAAqB,CAAC;MACtB,UAAU,EA9EgB,KAAK,GAmFhC;MAhFL,AA6EM,uBA7EiB,AAuEpB,eAAe,GAGZ,qBAAqB,AAGpB,YAAY,CAAC;QACZ,MAAM,EAlFsB,GAAG,GAmFhC;IA/EP,AAkFI,uBAlFmB,AAuEpB,eAAe,GAWZ,oBAAoB,CAAC;MACrB,MAAM,EAxFe,IAAI;MAyFzB,MAAM,EAAE,SAAS,GAClB"
}
+6
-10
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 @@ }

+1
-1
dist/ictinus.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"ictinus.js","sources":["src/base.ts","src/split.ts"],"sourcesContent":["export class BaseLayout {\n constructor(public readonly container: HTMLElement) {};\n}\n","import { BaseLayout } from './base';\n\n\nexport class BareSplitLayout extends BaseLayout {\n public readonly gutter: HTMLElement;\n public readonly orientation: 'horizontal' | 'vertical';\n private readonly dimension: 'width' | 'height';\n private readonly axis: 'clientX' | 'clientY';\n private readonly rectAxis: 'left' | 'top';\n private max: number;\n private rect: DOMRect;\n\n constructor(\n container: HTMLElement,\n public readonly min: number = 100,\n public readonly onResize: Function = null)\n {\n super(container);\n this.orientation = (\n this.container.classList.contains('split-vertical')\n ) ? 'vertical' : 'horizontal';\n this.dimension = (this.orientation == 'horizontal') ? 'width' : 'height';\n this.axis = (this.orientation == 'horizontal') ? 'clientX' : 'clientY';\n this.rectAxis = (this.orientation == 'horizontal') ? 'left' : 'top';\n\n // We are not using querySelector, since we require the gutter to be an immediate child.\n for (const element of this.container.children) {\n if (element.classList.contains('split-layout-gutter')) {\n this.gutter = <HTMLElement>element;\n break;\n }\n }\n\n this.gutter.addEventListener('mousedown', this.startResize);\n }\n\n public cancelSelection = e => {\n e.preventDefault();\n }\n\n public startResize = e => {\n e.stopPropagation();\n this.rect = <DOMRect>this.container.getBoundingClientRect();\n this.max = this.rect[this.dimension] - this.min;\n window.addEventListener('mousemove', this.resize);\n window.addEventListener('mouseup', this.stopResize);\n window.addEventListener('selectstart', this.cancelSelection);\n }\n\n public resize = e => {\n const size = e[this.axis] - this.rect[this.rectAxis];\n\n this.setSize(size);\n }\n\n public setSize(size: number) {\n if (size < this.min || size > this.max) {\n return;\n }\n\n const ratio = size / this.rect[this.dimension] * 100;\n const cssProperty = (this.orientation == 'horizontal') ? 'gridTemplateColumns' : 'gridTemplateRows';\n\n this.container.style[cssProperty] = `${ratio.toFixed(3)}% 5px 5px auto`;\n\n if (this.onResize) {\n this.onResize.call(this, ratio);\n }\n }\n\n public stopResize = e => {\n e.stopPropagation();\n window.removeEventListener('mousemove', this.resize);\n window.removeEventListener('selectstart', this.cancelSelection);\n }\n}\n\n\nexport class SplitLayout extends BareSplitLayout {\n constructor(\n container: HTMLElement,\n orientation: 'horizontal' | 'vertical',\n min: number = 100,\n onResize: Function = null,\n elementA: HTMLElement = document.createElement('div'),\n gutter: HTMLElement = document.createElement('div'),\n elementB: HTMLElement = document.createElement('div'))\n {\n container.classList.add('split-layout-container', `split-${orientation}`);\n elementA.classList.add('split-layout-element');\n gutter.classList.add('split-layout-gutter');\n elementB.classList.add('split-layout-element');\n\n container.appendChild(elementA);\n container.appendChild(gutter);\n container.appendChild(elementB);\n\n super(container, min, onResize);\n }\n}\n"],"names":[],"mappings":"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"}
{"version":3,"file":"ictinus.js","sources":["src/base.ts","src/split.ts"],"sourcesContent":["export class BaseLayout {\n constructor(public readonly container: HTMLElement) {};\n}\n","import { BaseLayout } from './base';\n\n\nexport class BareSplitLayout extends BaseLayout {\n public readonly gutter: HTMLElement;\n public readonly orientation: 'horizontal' | 'vertical';\n private readonly dimension: 'width' | 'height';\n private readonly axis: 'clientX' | 'clientY';\n private readonly rectAxis: 'left' | 'top';\n private rect: DOMRect;\n\n constructor(\n container: HTMLElement,\n public readonly onResize: Function = null)\n {\n super(container);\n this.orientation = (\n this.container.classList.contains('split-vertical')\n ) ? 'vertical' : 'horizontal';\n this.dimension = (this.orientation == 'horizontal') ? 'width' : 'height';\n this.axis = (this.orientation == 'horizontal') ? 'clientX' : 'clientY';\n this.rectAxis = (this.orientation == 'horizontal') ? 'left' : 'top';\n\n // We are not using querySelector, since we require the gutter to be an immediate child.\n for (const element of this.container.children) {\n if (element.classList.contains('split-layout-gutter')) {\n this.gutter = <HTMLElement>element;\n break;\n }\n }\n\n this.gutter.addEventListener('mousedown', this.startResize);\n }\n\n public cancelSelection = e => {\n e.preventDefault();\n }\n\n public startResize = e => {\n e.stopPropagation();\n this.rect = <DOMRect>this.container.getBoundingClientRect();\n window.addEventListener('mousemove', this.resize);\n window.addEventListener('mouseup', this.stopResize);\n window.addEventListener('selectstart', this.cancelSelection);\n }\n\n public resize = e => {\n const size = e[this.axis] - this.rect[this.rectAxis];\n\n this.setSize(size);\n }\n\n public setSize(size: number) {\n const ratio = size / this.rect[this.dimension] * 100;\n const element = <HTMLElement>this.container.querySelector('.split-layout-element:first-child');\n\n element.style[this.dimension] = `${ratio.toFixed(3)}%`;\n\n if (this.onResize) {\n this.onResize.call(this, ratio);\n }\n }\n\n public stopResize = e => {\n e.stopPropagation();\n window.removeEventListener('mousemove', this.resize);\n window.removeEventListener('mouseup', this.stopResize);\n window.removeEventListener('selectstart', this.cancelSelection);\n }\n}\n\n\nexport class SplitLayout extends BareSplitLayout {\n constructor(\n container: HTMLElement,\n orientation: 'horizontal' | 'vertical',\n onResize: Function = null,\n elementA: HTMLElement = document.createElement('div'),\n gutter: HTMLElement = document.createElement('div'),\n elementB: HTMLElement = document.createElement('div'))\n {\n container.classList.add('split-layout-container', `split-${orientation}`);\n elementA.classList.add('split-layout-element');\n gutter.classList.add('split-layout-gutter');\n elementB.classList.add('split-layout-element');\n\n container.appendChild(elementA);\n container.appendChild(gutter);\n container.appendChild(elementB);\n\n super(container, onResize);\n }\n}\n"],"names":[],"mappings":"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"}
+6
-10
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 @@ }

+1
-1
lib/split.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"split.js","sourceRoot":"","sources":["../src/split.ts"],"names":[],"mappings":"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"}
{"version":3,"file":"split.js","sourceRoot":"","sources":["../src/split.ts"],"names":[],"mappings":"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"}
+1
-1
package.json
{
"name": "ictinus",
"version": "0.6.0",
"version": "0.7.0",
"main": "dist/ictinus.js",

@@ -5,0 +5,0 @@ "author": "Paris Kasidiaris <paris@sourcelair.com>",

+6
-0
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 @@ 

+20
-41
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 @@ );

+4
-11
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);
}
}
+80
-41
src/stylesheets/_split.scss

@@ -0,54 +1,93 @@

$split-layout-gutter-size: 10px;
$split-layout-element-initial-size: 20%;
$split-layout-element-min-size: 100px;
.split-layout-container {
box-sizing: border-box;
display: grid;
grid-gap: 0;
}
box-sizing: border-box;
display: flex;
align-items: stretch;
.split-layout-gutter {
z-index: 100;
}
> .split-layout-element {
overflow: auto;
.split-layout-container.split-horizontal {
grid-template-columns: auto 5px 5px auto;
}
&:last-child {
flex: 1;
}
}
.split-layout-container.split-horizontal > .split-layout-element,
.split-layout-container.split-horizontal > .split-layout-gutter {
height: 100%;
grid-row: 1;
}
&.split-transparent-gutter {
> .split-layout-element,
> .split-layout-gutter, {
position: relative;
}
.split-layout-container.split-horizontal >.split-layout-element:first-child {
grid-column: 1 / 3;
}
> .split-layout-element {
z-index: 1;
}
.split-layout-container.split-horizontal >.split-layout-element:last-child {
grid-column: 3 / 5;
}
> .split-layout-gutter {
z-index: 2;
}
.split-layout-container.split-horizontal > .split-layout-gutter {
cursor: ew-resize;
grid-column: 2 / 4;
}
&.split-horizontal {
> .split-layout-element:first-child {
width: $split-layout-element-initial-size;
}
> .split-layout-gutter {
left: -$split-layout-gutter-size/2;
}
> .split-layout-element:last-child {
left: -$split-layout-gutter-size;
margin-right: -$split-layout-gutter-size;
}
}
.split-layout-container.split-vertical {
grid-template-rows: auto 5px 5px auto;
}
&.split-vertical {
> .split-layout-element:first-child {
height: $split-layout-element-initial-size;
}
> .split-layout-gutter {
top: -$split-layout-gutter-size/2;
}
> .split-layout-element:last-child {
top: -$split-layout-gutter-size;
margin-bottom: -$split-layout-gutter-size;
}
}
}
.split-layout-container.split-vertical > .split-layout-element,
.split-layout-container.split-vertical > .split-layout-gutter {
grid-column: 1;
}
&.split-horizontal {
flex-direction: row;
.split-layout-container.split-vertical >.split-layout-element:first-child {
grid-row: 1 / 3;
}
> .split-layout-element {
min-width: $split-layout-element-min-size;
.split-layout-container.split-vertical >.split-layout-element:last-child {
grid-row: 3 / 5;
}
&:first-child {
width: $split-layout-element-initial-size;
}
}
.split-layout-container.split-vertical > .split-layout-gutter {
cursor: ns-resize;
grid-row: 2 / 4;
> .split-layout-gutter {
width: $split-layout-gutter-size;
cursor: ew-resize;
}
}
&.split-vertical {
flex-direction: column;
> .split-layout-element {
min-height: $split-layout-element-min-size;
&:first-child {
height: $split-layout-element-initial-size;
}
}
> .split-layout-gutter {
height: $split-layout-gutter-size;
cursor: ns-resize;
}
}
}
.rpt2_cache/10a220...1d07f8a1d53b942ab96ae1b98c0204e410825bf

Sorry, the diff of this file is not supported yet

.rpt2_cache/10a220...1d07f8a1d53b942ab96ae1b98c0204e410825bf

Sorry, the diff of this file is not supported yet

.rpt2_cache/10a220...1d07f8a1d53b942ab96ae1b98c0204e410825bf

Sorry, the diff of this file is not supported yet

.rpt2_cache/2340d9...1d07f8a1d53b942ab96ae1b98c0204e410825bf

Sorry, the diff of this file is not supported yet

.rpt2_cache/2340d9...1d07f8a1d53b942ab96ae1b98c0204e410825bf

Sorry, the diff of this file is not supported yet

.rpt2_cache/2340d9...1d07f8a1d53b942ab96ae1b98c0204e410825bf

Sorry, the diff of this file is not supported yet