easy-layout 5.0.102 → 5.0.104

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "easy-layout",
   "author": "James Smith",
-  "version": "5.0.102",
+  "version": "5.0.104",
   "license": "MIT, Anti-996",
   "homepage": "https://github.com/djalbat/easy-layout",
   "description": "Layout elements that work with CSS flexbox.",

package/src/div/splitter/horizontal.js

@@ -29,22 +29,22 @@ class HorizontalSplitter extends Splitter {
 
       if (dragging) {
         const direction = this.getDirection(),
-              sizeableDiv = this.getSizeableDiv();
+              sizeableElement = this.getSizeableElement();
 
         const previousMouseTop = this.getPreviousMouseTop(),
-              previousSizeableDivHeight = this.getPreviousSizeableDivHeight(),
+              previousSizeableElementHeight = this.getPreviousSizeableElementHeight(),
               relativeMouseTop = mouseTop - previousMouseTop;
 
-        let sizeableDivHeight = previousSizeableDivHeight - direction * relativeMouseTop;
+        let sizeableElementHeight = previousSizeableElementHeight - direction * relativeMouseTop;
 
-        const height = sizeableDivHeight, ///
+        const height = sizeableElementHeight, ///
               eventType = DRAG_EVENT_TYPE;
 
-        sizeableDiv.setHeight(height);
+        sizeableElement.setHeight(height);
 
-        sizeableDivHeight = sizeableDiv.getHeight();  ///
+        sizeableElementHeight = sizeableElement.getHeight();  ///
 
-        this.callHandlers(eventType, sizeableDivHeight);
+        this.callHandlers(eventType, sizeableElementHeight);
       }
     }
   }
@@ -56,14 +56,14 @@ class HorizontalSplitter extends Splitter {
 
     if (!disabled) {
       const dragging = this.isDragging(),
-            sizeableDiv = this.getSizeableDiv(),
+            sizeableElement = this.getSizeableElement(),
             previousMouseTop = mouseTop,  ///
-            sizeableDivHeight = sizeableDiv.getHeight(),
-            previousSizeableDivHeight = sizeableDivHeight;  ///
+            sizeableElementHeight = sizeableElement.getHeight(),
+            previousSizeableElementHeight = sizeableElementHeight;  ///
 
       this.setPreviousMouseTop(previousMouseTop);
 
-      this.setPreviousSizeableDivHeight(previousSizeableDivHeight);
+      this.setPreviousSizeableElementHeight(previousSizeableElementHeight);
 
       rowResizeCursor();
 
@@ -80,11 +80,11 @@ class HorizontalSplitter extends Splitter {
     return previousMouseTop;
   }
 
-  getPreviousSizeableDivHeight() {
+  getPreviousSizeableElementHeight() {
     const state = this.getState(),
-          { previousSizeableDivHeight } = state;
+          { previousSizeableElementHeight } = state;
 
-    return previousSizeableDivHeight;
+    return previousSizeableElementHeight;
   }
 
   setPreviousMouseTop(previousMouseTop) {
@@ -93,19 +93,19 @@ class HorizontalSplitter extends Splitter {
     });
   }
 
-  setPreviousSizeableDivHeight(previousSizeableDivHeight) {
+  setPreviousSizeableElementHeight(previousSizeableElementHeight) {
     this.updateState({
-      previousSizeableDivHeight
+      previousSizeableElementHeight
     });
   }
 
   setInitialState() {
     const previousMouseTop = null,
-          previousSizeableDivHeight = null;
+          previousSizeableElementHeight = null;
 
     this.setState({
       previousMouseTop,
-      previousSizeableDivHeight
+      previousSizeableElementHeight
     });
   }
 

package/src/div/splitter/vertical.js

@@ -29,22 +29,22 @@ class VerticalSplitter extends Splitter {
 
       if (dragging) {
         const direction = this.getDirection(),
-              sizeableDiv = this.getSizeableDiv();
+              sizeableElement = this.getSizeableElement();
 
         const previousMouseLeft = this.getPreviousMouseLeft(),
-              previousSizeableDivWidth = this.getPreviousSizeableDivWidth(),
+              previousSizeableElementWidth = this.getPreviousSizeableElementWidth(),
               relativeMouseLeft = mouseLeft - previousMouseLeft;
 
-        let sizeableDivWidth = previousSizeableDivWidth - direction * relativeMouseLeft;
+        let sizeableElementWidth = previousSizeableElementWidth - direction * relativeMouseLeft;
 
-        const width = sizeableDivWidth, ///
+        const width = sizeableElementWidth, ///
               eventType = DRAG_EVENT_TYPE;
 
-        sizeableDiv.setWidth(width);
+        sizeableElement.setWidth(width);
 
-        sizeableDivWidth = sizeableDiv.getWidth();  ///
+        sizeableElementWidth = sizeableElement.getWidth();  ///
 
-        this.callHandlers(eventType, sizeableDivWidth);
+        this.callHandlers(eventType, sizeableElementWidth);
       }
     }
   }
@@ -56,14 +56,14 @@ class VerticalSplitter extends Splitter {
 
     if (!disabled) {
       const dragging = this.isDragging(),
-            sizeableDiv = this.getSizeableDiv(),
+            sizeableElement = this.getSizeableElement(),
             previousMouseLeft = mouseLeft,  ///
-            sizeableDivWidth = sizeableDiv.getWidth(),
-            previousSizeableDivWidth = sizeableDivWidth;  ///
+            sizeableElementWidth = sizeableElement.getWidth(),
+            previousSizeableElementWidth = sizeableElementWidth;  ///
 
       this.setPreviousMouseLeft(previousMouseLeft);
 
-      this.setPreviousSizeableDivWidth(previousSizeableDivWidth);
+      this.setPreviousSizeableElementWidth(previousSizeableElementWidth);
 
       columnResizeCursor();
 
@@ -80,11 +80,11 @@ class VerticalSplitter extends Splitter {
     return previousMouseLeft;
   }
 
-  getPreviousSizeableDivWidth() {
+  getPreviousSizeableElementWidth() {
     const state = this.getState(),
-          { previousSizeableDivWidth } = state;
+          { previousSizeableElementWidth } = state;
 
-    return previousSizeableDivWidth;
+    return previousSizeableElementWidth;
   }
 
   setPreviousMouseLeft(previousMouseLeft) {
@@ -93,19 +93,19 @@ class VerticalSplitter extends Splitter {
     });
   }
 
-  setPreviousSizeableDivWidth(previousSizeableDivWidth) {
+  setPreviousSizeableElementWidth(previousSizeableElementWidth) {
     this.updateState({
-      previousSizeableDivWidth
+      previousSizeableElementWidth
     });
   }
 
   setInitialState() {
     const previousMouseLeft = null,
-          previousSizeableDivWidth = null;
+          previousSizeableElementWidth = null;
 
     this.setState({
       previousMouseLeft,
-      previousSizeableDivWidth
+      previousSizeableElementWidth
     });
   }
 

package/src/div/splitter.js

@@ -5,6 +5,7 @@ import withStyle from "easy-with-style";  ///
 import { window, Element, eventTypes } from "easy";
 
 import SizeableDiv from "../div/sizeable";
+import SizeableSection from "../section/sizeable";
 
 import { resetCursor } from "../cursor";
 import { ESCAPE_KEY_CODE } from "../constants";
@@ -114,34 +115,38 @@ class SplitterDiv extends Element {
     let direction;
 
     const nextSiblingElement = this.getNextSiblingElement(),
-          previousSiblingElement = this.getPreviousSiblingElement();
+          previousSiblingElement = this.getPreviousSiblingElement(),
+          nextSiblingElementSizeableElement = isElementSizeableElement(nextSiblingElement),
+          previousSiblingElementSizeableElement = isElementSizeableElement(previousSiblingElement);
 
-    if (nextSiblingElement instanceof SizeableDiv) {
+    if (nextSiblingElementSizeableElement) {
       direction = +1;
     }
 
-    if (previousSiblingElement instanceof SizeableDiv) {
+    if (previousSiblingElementSizeableElement) {
       direction = -1;
     }
 
     return direction;
   }
 
-  getSizeableDiv() {
-    let sizeableDiv;
+  getSizeableElement() {
+    let sizeableElement;
 
     const nextSiblingElement = this.getNextSiblingElement(),
-          previousSiblingElement = this.getPreviousSiblingElement();
+          previousSiblingElement = this.getPreviousSiblingElement(),
+          nextSiblingElementSizeableElement = isElementSizeableElement(nextSiblingElement),
+          previousSiblingElementSizeableElement = isElementSizeableElement(previousSiblingElement);
 
-    if (nextSiblingElement instanceof SizeableDiv) {
-      sizeableDiv = nextSiblingElement; ///
+    if (nextSiblingElementSizeableElement) {
+      sizeableElement = nextSiblingElement; ///
     }
 
-    if (previousSiblingElement instanceof SizeableDiv) {
-      sizeableDiv = previousSiblingElement; ///
+    if (previousSiblingElementSizeableElement) {
+      sizeableElement = previousSiblingElement; ///
     }
 
-    return sizeableDiv;
+    return sizeableElement;
   }
 
   startDrag() {
@@ -283,3 +288,9 @@ export default withStyle(SplitterDiv)`
   flex-shrink: 0;
 
 `;
+
+function isElementSizeableElement(element) {
+  const elementSizeableElement = (element instanceof SizeableDiv) || (element instanceof SizeableSection);
+
+  return elementSizeableElement;
+}

package/src/index.js

@@ -8,5 +8,6 @@ export { default as ColumnDiv } from "./div/column";
 export { default as ColumnsDiv } from "./div/columns";
 export { default as SplitterDiv } from "./div/splitter";
 export { default as SizeableDiv } from "./div/sizeable";
+export { default as SizeableSection } from "./section/sizeable";
 export { default as VerticalSplitterDiv } from "./div/splitter/vertical";
 export { default as HorizontalSplitterDiv } from "./div/splitter/horizontal";

package/src/section/sizeable.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Element } from "easy";
+
+class SizeableSection extends Element {
+  static tagName = "section";
+
+  static defaultProperties = {
+    className: "sizeable"
+  };
+}
+
+export default withStyle(SizeableSection)`
+
+  display: flex;
+  
+`;