easy 19.0.7 → 20.0.2

package/src/document.js

@@ -1,11 +1,10 @@
 "use strict";
 
 import keyMixins from "./mixins/key";
-import clickMixins from "./mixins/click";
 import eventMixins from "./mixins/event";
 import mouseMixins from "./mixins/mouse";
+import clickMixins from "./mixins/click";
 import selectionMixins from "./mixins/selection";
-import customEventMixins from "./mixins/customEvent";
 
 import { UNDEFINED } from "./constants";
 
@@ -26,8 +25,7 @@ class Document {
 export default (typeof document === UNDEFINED) ? undefined : new Document();  ///
 
 Object.assign(Document.prototype, keyMixins);
-Object.assign(Document.prototype, clickMixins);
 Object.assign(Document.prototype, eventMixins);
 Object.assign(Document.prototype, mouseMixins);
+Object.assign(Document.prototype, clickMixins);
 Object.assign(Document.prototype, selectionMixins);
-Object.assign(Document.prototype, customEventMixins);

package/src/element/button.js

@@ -1,7 +1,10 @@
 "use strict";
 
 import Element from "../element";
+import focusMixins from "../mixins/focus";
 
 export default class Button extends Element {
   static tagName = "button";
 }
+
+Object.assign(Button.prototype, focusMixins);

package/src/element/checkbox.js

@@ -1,9 +1,10 @@
 "use strict";
 
 import Element from "../element";
-import changeMixins from "../mixins/change";
+import inputMixins from "../mixins/input";
+import focusMixins from "../mixins/focus";
 
-class Checkbox extends Element {
+export default class Checkbox extends Element {
   isChecked() { return this.domElement.checked; }
 
   check(checked = true) { this.domElement.checked = checked; }
@@ -15,6 +16,5 @@ class Checkbox extends Element {
   };
 }
 
-Object.assign(Checkbox.prototype, changeMixins);
-
-export default Checkbox;
+Object.assign(Checkbox.prototype, inputMixins);
+Object.assign(Checkbox.prototype, focusMixins);

package/src/element/input.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import Element from "../element";
+import inputMixins from "../mixins/input";
+import focusMixins from "../mixins/focus";
+import selectionMixins from "../mixins/selection";
+
+export default class Input extends Element {
+  static tagName = "input";
+}
+
+Object.assign(Input.prototype, inputMixins);
+Object.assign(Input.prototype, focusMixins);
+Object.assign(Input.prototype, selectionMixins);

package/src/element/link.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import Element from "../element";
+import focusMixins from "../mixins/focus";
 
 export default class Link extends Element {
   getHRef() { return this.getAttribute("href"); }
@@ -9,3 +10,5 @@ export default class Link extends Element {
 
   static tagName = "a";
 }
+
+Object.assign(Link.prototype, focusMixins);

package/src/element/select.js

@@ -1,20 +1,12 @@
 "use strict";
 
 import Element from "../element";
-import changeMixins from "../mixins/change";
-
-class Select extends Element {
-  onResize(resizeHandler, element) {} ///
-
-  offResize(resizeHandler, element) {}  ///
-
-  getValue() { return this.domElement.value; }
-
-  setValue(value) { this.domElement.value = value; }
+import inputMixins from "../mixins/input";
+import focusMixins from "../mixins/focus";
 
+export default class Select extends Element {
   static tagName = "select";
 }
 
-Object.assign(Select.prototype, changeMixins);
-
-export default Select;
+Object.assign(Select.prototype, inputMixins);
+Object.assign(Select.prototype, focusMixins);

package/src/element/textarea.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import Element from "../element";
+import inputMixins from "../mixins/input";
+import focusMixins from "../mixins/focus";
+import selectionMixins from "../mixins/selection";
+
+export default class Textarea extends Element {
+  static tagName = "textarea";
+}
+
+Object.assign(Textarea.prototype, inputMixins);
+Object.assign(Textarea.prototype, focusMixins);
+Object.assign(Textarea.prototype, selectionMixins);

package/src/element.js

@@ -4,12 +4,13 @@ import Offset from "./offset";
 import Bounds from "./bounds";
 import jsxMixins from "./mixins/jsx";
 import keyMixins from "./mixins/key";
-import clickMixins from "./mixins/click";
 import stateMixins from "./mixins/state";
 import eventMixins from "./mixins/event";
 import mouseMixins from "./mixins/mouse";
-import resizeMixins from "./mixins/resize";
+import clickMixins from "./mixins/click";
+import focusMixins from "./mixins/focus";
 import scrollMixins from "./mixins/scroll";
+import resizeMixins from "./mixins/resize";
 import elementMixins from "./mixins/element";
 import customEventMixins from "./mixins/customEvent";
 
@@ -29,7 +30,7 @@ import { NONE,
          DEFAULT_PROPERTIES,
          IGNORED_PROPERTIES } from "./constants";
 
-class Element {
+export default class Element {
   constructor(selector) {
     if (selector) {
       this.domElement = document.querySelector(selector);
@@ -294,16 +295,6 @@ class Element {
     });
   }
   
-  blur() { this.domElement.blur(); }
-
-  focus() { this.domElement.focus(); }
-
-  hasFocus() {
-    const focus = (document.activeElement === this.domElement);  ///
-
-    return focus;
-  }
-
   static fromClass(Class, properties, ...remainingArguments) {
     const { tagName } = Class,
           element = elementFromTagName(Class, tagName, ...remainingArguments),
@@ -333,17 +324,16 @@ class Element {
 
 Object.assign(Element.prototype, jsxMixins);
 Object.assign(Element.prototype, keyMixins);
+Object.assign(Element.prototype, mouseMixins);
 Object.assign(Element.prototype, clickMixins);
 Object.assign(Element.prototype, stateMixins);
 Object.assign(Element.prototype, eventMixins);
-Object.assign(Element.prototype, mouseMixins);
-Object.assign(Element.prototype, resizeMixins);
+Object.assign(Element.prototype, focusMixins);
 Object.assign(Element.prototype, scrollMixins);
+Object.assign(Element.prototype, resizeMixins);
 Object.assign(Element.prototype, elementMixins);
 Object.assign(Element.prototype, customEventMixins);
 
-export default Element;
-
 function elementFromTagName(Class, tagName, ...remainingArguments) {
   const selector = null,
         element = new (Function.prototype.bind.call(Class, null, selector, ...remainingArguments));

package/src/example/view/div.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import { Element } from "../../index";  ///
+
+export default class Div extends Element {
+  mouseMoveHandler = (event, element) => {
+    const { pageX, pageY } = event;
+
+    console.log(pageX, pageY)
+  }
+
+  resizeHandler = (event, element) => {
+    const width = this.getWidth(),
+          height = this.getHeight();
+
+    console.log(width, height)
+  }
+
+  didMount() {
+    this.onResize(this.resizeHandler, this);
+    this.onMouseMove(this.mouseMoveHandler, this);
+  }
+
+  willUnmount() {
+    this.offMouseMove(this.mouseMoveHandler, this);
+    this.offResize(this.resizeHandler, this);
+  }
+
+  childElements() {
+    return (
+
+      <p>
+        A paragraph contained in a div with resize and mouse move handlers.
+      </p>
+
+    );
+  }
+
+  static tagName = "div";
+}

package/src/example/view.js

@@ -1,41 +1,16 @@
 "use strict";
 
-import { Button, Element, Textarea, mouseButtons } from "../index";  ///
+import { Element } from "../index";  ///
 
-import Checkbox from "./view/checkbox";
-
-const { LEFT_MOUSE_BUTTON } = mouseButtons;
+import Div from "./view/div";
 
 export default class View extends Element {
   childElements() {
-    return ([
-
-      <Checkbox onChange={(event, element) => {
-                  console.log("Changed")
-                }}
-                checked
-      />,
-      <Textarea onChange={(event, element) => {
-                  console.log("change")
-                }}
-                onScroll={function(event, element) {  ///
-                  const scrollTop = this.getScrollTop(),
-                        scrollLeft = this.getScrollLeft();
-
-                  console.log(scrollTop, scrollLeft)
-                }}
-      />,
-      <Button onClick={(event, element) => {
-                const { button } = event;
+    return (
 
-                console.log(button === LEFT_MOUSE_BUTTON)
-              }}
-      >
-        Submit
-      </Button>,
       <Div/>
 
-    ]);
+    );
   }
 
   static tagName = "div";
@@ -44,40 +19,3 @@ export default class View extends Element {
     className: "view"
   };
 }
-
-class Div extends Element {
-  mouseMoveHandler = (event, element) => {
-    const { pageX, pageY } = event;
-
-    console.log(pageX, pageY)
-  }
-
-  resizeHandler = (event, element) => {
-    const width = this.getWidth(),
-          height = this.getHeight();
-
-    console.log(width, height)
-  }
-
-  didMount() {
-    this.onResize(this.resizeHandler, this);
-    this.onMouseMove(this.mouseMoveHandler, this);
-  }
-
-  willUnmount() {
-    this.offMouseMove(this.mouseMoveHandler, this);
-    this.offResize(this.resizeHandler, this);
-  }
-
-  childElements() {
-    return (
-
-      <p>
-        A paragraph contained in a div with resize and mouse move handlers.
-      </p>
-
-    );
-  }
-
-  static tagName = "div";
-}

package/src/index.js

@@ -3,21 +3,17 @@
 export { default as React } from "./react";
 export { default as Bounds } from "./bounds";
 export { default as Offset } from "./offset";
-
+export { default as Element } from "./element";
+export { default as TextElement } from "./textElement";
 export { default as Body } from "./element/body";
 export { default as Link } from "./element/link";
-export { default as Input } from "./inputElement/input";
+export { default as Input } from "./element/input";
 export { default as Button } from "./element/button";
 export { default as Select } from "./element/select";
-export { default as Element } from "./element";
 export { default as Checkbox } from "./element/checkbox";
-export { default as Textarea } from "./inputElement/textarea";
-export { default as TextElement } from "./textElement";
-export { default as InputElement } from "./inputElement";
-
+export { default as Textarea } from "./element/textarea";
 export { default as window } from "./window";
 export { default as document } from "./document";
 export { default as eventTypes } from "./eventTypes";
 export { default as mouseButtons } from "./mouseButtons";
-
 export { default as elementUtilities } from "./utilities/element";

package/src/mixins/element.js

@@ -4,7 +4,7 @@ import { first } from "../utilities/array";
 import { WILDCARD } from "../constants";
 import { domNodeMatchesSelector, elementsFromDOMElements, filterDOMNodesBySelector, ascendantDOMNodesFromDOMNode, descendantDOMNodesFromDOMNode } from "../utilities/dom";
 
-function getParentElement(selector = WILDCARD) {
+export function getParentElement(selector = WILDCARD) {
   let parentElement = null;
 
   const parentDOMElement = this.domElement.parentElement; ///
@@ -24,7 +24,7 @@ function getParentElement(selector = WILDCARD) {
   return parentElement;
 }
 
-function getChildElements(selector = WILDCARD) {
+export function getChildElements(selector = WILDCARD) {
   const childDOMNodes = this.domElement.childNodes, ///
         childDOMElements = filterDOMNodesBySelector(childDOMNodes, selector),
         childElements = elementsFromDOMElements(childDOMElements);
@@ -32,7 +32,7 @@ function getChildElements(selector = WILDCARD) {
   return childElements;
 }
 
-function getAscendantElements(selector = WILDCARD, maximumHeight = Infinity) {
+export function getAscendantElements(selector = WILDCARD, maximumHeight = Infinity) {
   const height = maximumHeight, ///
         domNode = this.domElement,  ///
         ascendantDOMNodes = ascendantDOMNodesFromDOMNode(domNode, height),
@@ -42,7 +42,7 @@ function getAscendantElements(selector = WILDCARD, maximumHeight = Infinity) {
   return ascendantElements;
 }
 
-function getDescendantElements(selector = WILDCARD, maximumDepth = Infinity) {
+export function getDescendantElements(selector = WILDCARD, maximumDepth = Infinity) {
   const depth = maximumDepth, ///
         domNode = this.domElement,  ///
         descendantDOMNodes = descendantDOMNodesFromDOMNode(domNode, depth),
@@ -52,7 +52,7 @@ function getDescendantElements(selector = WILDCARD, maximumDepth = Infinity) {
   return descendantElements;
 }
 
-function getNextSiblingElement(selector = WILDCARD) {
+export function getNextSiblingElement(selector = WILDCARD) {
   let nextSiblingElement = null;
 
   const nextSiblingDOMNode = this.domElement.nextSibling; ///
@@ -64,7 +64,7 @@ function getNextSiblingElement(selector = WILDCARD) {
   return nextSiblingElement;
 }
 
-function getPreviousSiblingElement(selector = WILDCARD) {
+export function getPreviousSiblingElement(selector = WILDCARD) {
   let previousSiblingElement = null;
 
   const previousSiblingDOMNode = this.domElement.previousSibling;  ///

package/src/mixins/event.js

@@ -2,7 +2,6 @@
 
 import { SPACE } from "../constants";
 import { RESIZE_EVENT_TYPE } from "../eventTypes";
-import { removeResizeObject } from "../mixins/resize";
 
 function onEvent(eventTypes, handler, element = this) {
   eventTypes = eventTypes.split(SPACE); ///
@@ -13,13 +12,25 @@ function onEvent(eventTypes, handler, element = this) {
             resizeEventListenersLength = resizeEventListeners.length;
 
       if (resizeEventListenersLength === 0) {
-        this.addResizeObject();
+        this.resizeObserver = new ResizeObserver((entries) => {
+          const resizeEventListeners = this.findEventListeners(RESIZE_EVENT_TYPE);
+
+          resizeEventListeners.forEach((resizeEventListener) => {
+            const event = null;
+
+            resizeEventListener(event);
+          });
+        });
+
+        this.resizeObserver.observe(this.domElement)
       }
-    }
 
-    const eventListener = this.addEventListener(eventType, handler, element);
+      this.addEventListener(eventType, handler, element);
+    } else {
+      const eventListener = this.addEventListener(eventType, handler, element);
 
-    this.domElement.addEventListener(eventType, eventListener);
+      this.domElement.addEventListener(eventType, eventListener);
+    }
   });
 }
 
@@ -27,17 +38,21 @@ function offEvent(eventTypes, handler, element = this) {
   eventTypes = eventTypes.split(SPACE); ///
 
   eventTypes.forEach((eventType) => {
-    const eventListener = this.removeEventListener(eventType, handler, element);
-
-    this.domElement.removeEventListener(eventType, eventListener);
-
     if (eventType === RESIZE_EVENT_TYPE) {
+      this.removeEventListener(eventType, handler, element);
+
       const resizeEventListeners = this.findEventListeners(RESIZE_EVENT_TYPE),
             resizeEventListenersLength = resizeEventListeners.length;
 
       if (resizeEventListenersLength === 0) {
-        this.removeResizeObject();
+        this.resizeObserver.unobserve(this.domElement);
+
+        delete this.resizeObserver;
       }
+    } else {
+      const eventListener = this.removeEventListener(eventType, handler, element);
+
+      this.domElement.removeEventListener(eventType, eventListener);
     }
   });
 }

package/src/mixins/focus.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { BLUR_EVENT_TYPE, FOCUS_EVENT_TYPE } from "../eventTypes";
+
+function onBlur(blurHandler, element) { this.onEvent(BLUR_EVENT_TYPE, blurHandler, element); }
+
+function offBlur(blurHandler, element) { this.offEvent(BLUR_EVENT_TYPE, blurHandler, element); }
+
+function onFocus(focusHandler, element) { this.onEvent(FOCUS_EVENT_TYPE, focusHandler, element); }
+
+function offFocus(focusHandler, element) { this.offEvent(FOCUS_EVENT_TYPE, focusHandler, element); }
+
+function blur() { this.domElement.blur(); }
+
+function focus() { this.domElement.focus(); }
+
+function hasFocus() {
+  const focus = (document.activeElement === this.domElement);  ///
+
+  return focus;
+}
+
+const focusMixins = {
+  onBlur,
+  offBlur,
+  onFocus,
+  offFocus,
+  blur,
+  focus,
+  hasFocus
+};
+
+export default focusMixins;

package/src/mixins/input.js

@@ -1,20 +1,26 @@
 "use strict";
 
-import { BLUR_EVENT_TYPE, FOCUS_EVENT_TYPE } from "../eventTypes";
+import { CHANGE_EVENT_TYPE } from "../eventTypes";
 
-function onBlur(blurHandler, element) { this.onEvent(BLUR_EVENT_TYPE, blurHandler, element); }
+function onChange(changeHandler, element) { this.onEvent(CHANGE_EVENT_TYPE, changeHandler, element); }
 
-function offBlur(blurHandler, element) { this.offEvent(BLUR_EVENT_TYPE, blurHandler, element); }
+function offChange(changeHandler, element) { this.offEvent(CHANGE_EVENT_TYPE, changeHandler, element); }
 
-function onFocus(focusHandler, element) { this.onEvent(FOCUS_EVENT_TYPE, focusHandler, element); }
+function getValue() { return this.domElement.value; }
 
-function offFocus(focusHandler, element) { this.offEvent(FOCUS_EVENT_TYPE, focusHandler, element); }
+function setValue(value) { this.domElement.value = value; }
+
+function isReadOnly() { return this.domElement.readOnly; }
+
+function setReadOnly(readOnly) { this.domElement.readOnly = readOnly; }
 
 const inputMixins = {
-  onBlur,
-  offBlur,
-  onFocus,
-  offFocus
+  onChange,
+  offChange,
+  getValue,
+  setValue,
+  isReadOnly,
+  setReadOnly
 };
 
 export default inputMixins;

package/src/mixins/mouse.js

@@ -1,10 +1,6 @@
 "use strict";
 
-import { MOUSEUP_EVENT_TYPE,
-         MOUSEOUT_EVENT_TYPE,
-         MOUSEDOWN_EVENT_TYPE,
-         MOUSEOVER_EVENT_TYPE,
-         MOUSEMOVE_EVENT_TYPE } from "../eventTypes";
+import { MOUSEUP_EVENT_TYPE, MOUSEOUT_EVENT_TYPE, MOUSEDOWN_EVENT_TYPE, MOUSEOVER_EVENT_TYPE, MOUSEMOVE_EVENT_TYPE } from "../eventTypes";
 
 function onMouseUp(mouseUpHandler, element) { this.onEvent(MOUSEUP_EVENT_TYPE, mouseUpHandler, element); }
 

package/src/mixins/resize.js

@@ -1,71 +1,14 @@
 "use strict";
 
 import { RESIZE_EVENT_TYPE } from "../eventTypes";
-import { OBJECT, TEXT_HTML, ABOUT_BLANK } from "../constants";
 
 export function onResize(resizeHandler, element) { this.onEvent(RESIZE_EVENT_TYPE, resizeHandler, element); }
 
 export function offResize(resizeHandler, element) { this.offEvent(RESIZE_EVENT_TYPE, resizeHandler, element); }
 
-function addResizeObject() {
-  const resizeObject = document.createElement(OBJECT),
-        type = TEXT_HTML,  ///
-        data = ABOUT_BLANK, ///
-        style = `display: block; 
-                 position: absolute; 
-                 top: 0; 
-                 left: 0; 
-                 height: 100%; 
-                 width: 100%; 
-                 overflow: hidden; 
-                 pointer-events: none; 
-                 z-index: -1;`;
-
-  Object.assign(resizeObject, {
-    type,
-    data
-  });
-
-  resizeObject.setAttribute("style", style);
-
-  this.__resizeObject__ = resizeObject; ///
-
-  resizeObject.onload = () => {
-    resizeObjectLoadHandler(this);
-  };
-
-  this.domElement.appendChild(resizeObject);
-}
-
-function removeResizeObject() {
-  const resizeObject = this.__resizeObject__, ///
-        objectWindow = resizeObject.contentDocument.defaultView;  ///
-
-  objectWindow.removeEventListener(RESIZE_EVENT_TYPE, resizeEventListener);
-
-  this.domElement.removeChild(resizeObject);
-
-  delete this.__resizeObject__;
-}
-
 const resizeMixins = {
   onResize,
-  offResize,
-  addResizeObject,
-  removeResizeObject
+  offResize
 };
 
 export default resizeMixins;
-
-function resizeObjectLoadHandler(element) {
-  const resizeObject = element.__resizeObject__,
-        resizeObjectWindow = resizeObject.contentDocument.defaultView;  ///
-
-  resizeObjectWindow.addEventListener(RESIZE_EVENT_TYPE, (event) => {
-    const resizeEventListeners = element.findEventListeners(RESIZE_EVENT_TYPE);
-
-    resizeEventListeners.forEach((resizeEventListener) => {
-      resizeEventListener(event);
-    });
-  });
-}

package/src/mixins/scroll.js

@@ -6,12 +6,12 @@ function onScroll(scrollHandler, element) { this.onEvent(SCROLL_EVENT_TYPE, scro
 
 function offScroll(scrollHandler, element) { this.offEvent(SCROLL_EVENT_TYPE, scrollHandler, element); }
 
+function scrollTo(scrollTop, scrollLeft) { this.domElement.scrollTo(scrollTop, scrollLeft); }
+
 function getScrollTop() { return this.domElement.scrollTop; }
 
 function getScrollLeft() { return this.domElement.scrollLeft; }
 
-function scrollTo(scrollTop, scrollLeft) { this.domElement.scrollTo(scrollTop, scrollLeft); }
-
 function setScrollTop(scrollTop) { this.domElement.scrollTop = scrollTop; }
 
 function setScrollLeft(scrollLeft) { this.domElement.scrollLeft = scrollLeft; }
@@ -19,9 +19,9 @@ function setScrollLeft(scrollLeft) { this.domElement.scrollLeft = scrollLeft; }
 const scrollMixins = {
   onScroll,
   offScroll,
+  scrollTo,
   getScrollTop,
   getScrollLeft,
-  scrollTo,
   setScrollTop,
   setScrollLeft
 };