@joint/core 4.0.0

package/src/mvc/Dom/animations.mjs

@@ -0,0 +1,122 @@
+import $ from './Dom.mjs';
+import { dataPriv } from './vars.mjs';
+
+const animationKey = 'animationFrameId';
+const cssReset = {};
+
+cssReset['transition-property'] =
+cssReset['transition-duration'] =
+cssReset['transition-delay'] =
+cssReset['transition-timing-function'] =
+cssReset['animation-name'] =
+cssReset['animation-duration'] =
+cssReset['animation-delay'] =
+cssReset['animation-timing-function'] = '';
+
+export function animate(properties, opt = {}) {
+    this.stop();
+    for (let i = 0; i < this.length; i++) {
+        animateNode(this[i], properties, opt);
+    }
+    return this;
+}
+
+function animateNode(el, properties, opt = {}) {
+
+    let {
+        duration = 400,
+        easing = 'ease-in-out',
+        delay = 0,
+        complete
+    } = opt;
+
+    const delayId = setTimeout(function() {
+
+        const $el = $(el);
+        let fired = false;
+        let endEvent = 'transitionend';
+
+        // Convert milliseconds to seconds for CSS
+        duration = duration / 1000;
+        delay = delay / 1000;
+
+        // Set up CSS values for transition or keyframe animation
+        const cssValues = {};
+        if (typeof properties === 'string') {
+            // Keyframe animation
+            cssValues['animation-name'] = properties;
+            cssValues['animation-duration'] = duration + 's';
+            cssValues['animation-delay'] = delay + 's';
+            cssValues['animation-timing-function'] = easing;
+            endEvent = 'animationend';
+        } else {
+            // CSS transitions
+            const transitionProperties = [];
+            for (var key in properties) {
+                if (properties.hasOwnProperty(key)) {
+                    cssValues[key] = properties[key];
+                    transitionProperties.push(key);
+                }
+            }
+
+            if (duration > 0) {
+                cssValues['transition-property'] = transitionProperties.join(', ');
+                cssValues['transition-duration'] = duration + 's';
+                cssValues['transition-delay'] = delay + 's';
+                cssValues['transition-timing-function'] = easing;
+            }
+        }
+
+        const wrappedCallback = function(event){
+            if (event) {
+                if (event.target !== event.currentTarget) return; // makes sure the event didn't bubble from "below"
+                event.target.removeEventListener(endEvent, wrappedCallback);
+            } else {
+                el.removeEventListener(endEvent, wrappedCallback); // triggered by setTimeout
+            }
+            fired = true;
+            $el.css(cssReset);
+            complete && complete.call(el);
+        };
+
+        if (duration > 0){
+            el.addEventListener(endEvent, wrappedCallback);
+            // transitionEnd is not always firing on older Android phones
+            // so make sure it gets fired
+            const callbackId = setTimeout(function() {
+                if (fired) return;
+                wrappedCallback(null);
+            }, ((duration + delay) * 1000) + 25);
+
+            dataPriv.set(el, animationKey, {
+                id: callbackId,
+                stop: () => {
+                    clearTimeout(callbackId);
+                    el.removeEventListener(endEvent, wrappedCallback);
+                }
+            });
+        }
+
+        $el.css(cssValues);
+
+        if (duration <= 0) {
+            wrappedCallback(null);
+        }
+    });
+
+    dataPriv.set(el, animationKey, {
+        stop: () => clearTimeout(delayId)
+    });
+}
+
+export function stop() {
+    for (let i = 0; i < this.length; i++) {
+        const el = this[i];
+        const animation = dataPriv.get(el, animationKey);
+        if (!animation) continue;
+        animation.stop();
+        dataPriv.remove(el, animationKey);
+    }
+    this.css(cssReset);
+    return this;
+}

package/src/mvc/Dom/events.mjs

@@ -0,0 +1,69 @@
+// TODO: should not read config outside the mvc package
+import { config } from '../../config/index.mjs';
+import $ from './Dom.mjs';
+
+
+// Special events
+
+const special = Object.create(null);
+
+export default special;
+
+special.load = {
+    // Prevent triggered image.load events from bubbling to window.load
+    noBubble: true,
+};
+
+// Create mouseenter/leave events using mouseover/out and event-time checks
+// so that event delegation works in $.
+// Do the same for pointerenter/pointerleave and pointerover/pointerout
+[
+    ['mouseenter', 'mouseover'],
+    ['mouseleave', 'mouseout'],
+    ['pointerenter', 'pointerover'],
+    ['pointerleave', 'pointerout'],
+].forEach(([orig, fix]) => {
+    special[orig] = {
+        delegateType: fix,
+        bindType: fix,
+        handle: function(event) {
+            const target = this;
+            const related = event.relatedTarget;
+            const handleObj = event.handleObj;
+            let ret;
+            // For mouseenter/leave call the handler if related is outside the target.
+            // NB: No relatedTarget if the mouse left/entered the browser window
+            if (!related || !target.contains(related)) {
+                event.type = handleObj.origType;
+                ret = handleObj.handler.apply(target, arguments);
+                event.type = fix;
+            }
+            return ret;
+        },
+    };
+});
+
+
+// Gestures
+
+const maxDelay = config.doubleTapInterval;
+const minDelay = 30;
+
+special.dbltap = {
+    bindType: 'touchend',
+    delegateType: 'touchend',
+    handle: function(event, ...args) {
+        const { handleObj, target } = event;
+        const targetData = $.data.create(target);
+        const now = new Date().getTime();
+        const delta = 'lastTouch' in targetData ? now - targetData.lastTouch : 0;
+        if (delta < maxDelay && delta > minDelay) {
+            targetData.lastTouch = null;
+            event.type = handleObj.origType;
+            // let $ handle the triggering of "dbltap" event handlers
+            handleObj.handler.call(this, event, ...args);
+        } else {
+            targetData.lastTouch = now;
+        }
+    }
+};

package/src/mvc/Dom/index.mjs

@@ -0,0 +1,13 @@
+import { default as $ } from './Dom.mjs';
+import * as methods from './methods.mjs';
+import * as animations from './animations.mjs';
+import { default as props } from './props.mjs';
+import { default as special } from './events.mjs';
+
+Object.assign($.fn, methods);
+Object.assign($.fn, animations);
+Object.assign($.fn, props);
+Object.assign($.event.special, special);
+
+export default $;
+

package/src/mvc/Dom/methods.mjs

@@ -0,0 +1,392 @@
+import { camelCase } from '../../util/utilHelpers.mjs';
+import $ from './Dom.mjs';
+import V from '../../V/index.mjs';
+import { dataPriv, dataUser } from './vars.mjs';
+
+// Manipulation
+
+function cleanNodesData(nodes) {
+    let i = nodes.length;
+    while (i--) cleanNodeData(nodes[i]);
+}
+
+function cleanNodeData(node) {
+    $.event.remove(node);
+    dataPriv.remove(node);
+    dataUser.remove(node);
+}
+
+function removeNodes(nodes) {
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        if (node.parentNode) {
+            node.parentNode.removeChild(node);
+        }
+    }
+}
+
+export function remove() {
+    for (let i = 0; i < this.length; i++) {
+        const node = this[i];
+        cleanNodeData(node);
+        cleanNodesData(node.getElementsByTagName('*'));
+    }
+    removeNodes(this);
+    return this;
+}
+
+export function detach() {
+    removeNodes(this);
+    return this;
+}
+
+export function empty() {
+    for (let i = 0; i < this.length; i++) {
+        const node = this[i];
+        if (node.nodeType === 1) {
+            cleanNodesData(node.getElementsByTagName('*'));
+            // Remove any remaining nodes
+            node.textContent = '';
+        }
+    }
+    return this;
+}
+
+export function clone() {
+    const clones = [];
+    for (let i = 0; i < this.length; i++) {
+        clones.push(this[i].cloneNode(true));
+    }
+    return this.pushStack(clones);
+}
+
+export function html(html) {
+    const [el] = this;
+    if (!el) return null;
+    if (arguments.length === 0) return el.innerHTML;
+    if (html === undefined) return this; // do nothing
+    cleanNodesData(dataPriv, el.getElementsByTagName('*'));
+    if (typeof html === 'string' || typeof html === 'number') {
+        el.innerHTML = html;
+    } else {
+        el.innerHTML = '';
+        return this.append(html);
+    }
+    return this;
+}
+
+export function append(...nodes) {
+    const [parent] = this;
+    if (!parent) return this;
+    nodes.forEach((node) => {
+        if (!node) return;
+        if (typeof node === 'string') {
+            parent.append(...$.parseHTML(node));
+        } else if (node.toString() === '[object Object]') {
+            // $ object
+            this.append(...Array.from(node));
+        } else if (Array.isArray(node)) {
+            this.append(...node);
+        } else {
+            // DOM node
+            parent.appendChild(node);
+        }
+    });
+    return this;
+}
+
+export function prepend(...nodes) {
+    const [parent] = this;
+    if (!parent) return this;
+    nodes.forEach((node) => {
+        if (!node) return;
+        if (typeof node === 'string') {
+            parent.prepend(...$.parseHTML(node));
+        } else if (node.toString() === '[object Object]') {
+            // $ object
+            this.prepend(...Array.from(node));
+        } else if (Array.isArray(node)) {
+            this.prepend(...node);
+        } else {
+            // DOM node
+            parent.insertBefore(node, parent.firstChild);
+        }
+    });
+    return this;
+}
+
+export function appendTo(parent) {
+    $(parent).append(this);
+    return this;
+}
+
+export function prependTo(parent) {
+    $(parent).prepend(this);
+    return this;
+}
+
+// Styles and attributes
+
+const requireUnits = {};
+[
+    'width', 'height', 'top', 'bottom', 'left', 'right',
+    'padding', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
+    'margin', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight',
+].forEach((cssProp) => {
+    requireUnits[cssProp] = true;
+});
+
+function setCSSProperty(el, name, value) {
+    if (typeof value === 'number' && requireUnits[camelCase(name)]) {
+        value += 'px';
+    }
+    el.style[name] = value;
+}
+
+export function css(name, value) {
+    let styles;
+    if (typeof name === 'string') {
+        if (value === undefined) {
+            const [el] = this;
+            if (!el) return null;
+            return el.style[name];
+        } else {
+            styles = { [name]: value };
+        }
+    } else if (!name) {
+        throw new Error('no styles provided');
+    } else {
+        styles = name;
+    }
+    for (let style in styles) {
+        if (styles.hasOwnProperty(style)) {
+            for (let i = 0; i < this.length; i++) {
+                setCSSProperty(this[i], style, styles[style]);
+            }
+        }
+    }
+    return this;
+}
+
+export function data(name, value) {
+    if (arguments.length < 2) {
+        const [el] = this;
+        if (!el) return null;
+        if (name === undefined) {
+            return el.dataset;
+        }
+        return el.dataset[name];
+    }
+    for (let i = 0; i < this.length; i++) {
+        this[i].dataset[name] = value;
+    }
+    return this;
+}
+
+// Classes
+
+function setNodesClass(method, nodes, args) {
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        V.prototype[method].apply({ node }, args);
+    }
+}
+
+export function removeClass() {
+    setNodesClass('removeClass', this, arguments);
+    return this;
+}
+
+export function addClass() {
+    setNodesClass('addClass', this, arguments);
+    return this;
+}
+
+export function toggleClass() {
+    setNodesClass('toggleClass', this, arguments);
+    return this;
+}
+
+export function hasClass() {
+    const [node] = this;
+    if (!node) return false;
+    return V.prototype.hasClass.apply({ node }, arguments);
+}
+
+// Traversing
+
+export function children(selector) {
+    const matches = [];
+    for(let i = 0; i < this.length; i++) {
+        const node = this[i];
+        let children = Array.from(node.children);
+        if (typeof selector === 'string') {
+            children = children.filter(child => child.matches(selector));
+        }
+        matches.push(...children);
+    }
+    return this.pushStack(matches);
+}
+
+export function closest(selector) {
+    const closest = [];
+    for (let i = 0; i < this.length; i++) {
+        const el = this[i];
+        if (typeof selector === 'string') {
+            const closestEl = el.closest(selector);
+            if (closestEl) {
+                closest.push(closestEl);
+            }
+        } else {
+            const [ancestorEl] = $(selector);
+            if (ancestorEl && ancestorEl.contains(el)) {
+                closest.push(ancestorEl);
+            }
+        }
+    }
+    return this.pushStack(closest);
+}
+
+// Events
+
+export function on(types, selector, data, fn) {
+    $.event.on(this, types, selector, data, fn);
+    return this;
+}
+
+export function one(types, selector, data, fn) {
+    $.event.on(this, types, selector, data, fn, 1);
+    return this;
+}
+
+export function off(types, selector, fn) {
+    if (types && types.preventDefault && types.handleObj) {
+        // ( event )  dispatched $.Event
+        const handleObj = types.handleObj;
+        $(types.delegateTarget).off(
+            handleObj.namespace
+                ? handleObj.origType + '.' + handleObj.namespace
+                : handleObj.origType,
+            handleObj.selector,
+            handleObj.handler
+        );
+        return this;
+    }
+    if (typeof types === 'object') {
+        // ( types-object [, selector] )
+        for (let type in types) {
+            this.off(type, selector, types[type]);
+        }
+        return this;
+    }
+    if (selector === false || typeof selector === 'function') {
+        // ( types [, fn] )
+        fn = selector;
+        selector = undefined;
+    }
+    for (let i = 0; i < this.length; i++) {
+        $.event.remove(this[i], types, fn, selector);
+    }
+    return this;
+}
+
+// Measurements
+
+export function width() {
+    const [el] = this;
+    if (el === window) return el.document.documentElement.clientWidth;
+    else if (!el) return undefined;
+    const styles = window.getComputedStyle(el);
+    const height = el.offsetWidth;
+    const borderTopWidth = parseFloat(styles.borderTopWidth);
+    const borderBottomWidth = parseFloat(styles.borderBottomWidth);
+    const paddingTop = parseFloat(styles.paddingTop);
+    const paddingBottom = parseFloat(styles.paddingBottom);
+    return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
+}
+
+export function height() {
+    const [el] = this;
+    if (el === window) return el.document.documentElement.clientHeight;
+    if (!el) return undefined;
+    const styles = window.getComputedStyle(el);
+    const width = el.offsetHeight;
+    const borderLeftWidth = parseFloat(styles.borderLeftWidth);
+    const borderRightWidth = parseFloat(styles.borderRightWidth);
+    const paddingLeft = parseFloat(styles.paddingLeft);
+    const paddingRight = parseFloat(styles.paddingRight);
+    return width - borderLeftWidth - borderRightWidth - paddingLeft - paddingRight;
+}
+
+export function position() {
+    const [el] = this;
+    if (!el) return;
+    let $el = $(el);
+    let offsetParent;
+    let offset;
+    let doc;
+    let parentOffset = { top: 0, left: 0 };
+    // position:fixed elements are offset from the viewport, which itself always has zero offset
+    if ($el.css('position') === 'fixed') {
+        // Assume position:fixed implies availability of getBoundingClientRect
+        offset = el.getBoundingClientRect();
+    } else {
+        offset = $el.offset();
+        // Account for the *real* offset parent, which can be the document or its root element
+        // when a statically positioned element is identified
+        doc = el.ownerDocument;
+        offsetParent = el.offsetParent || doc.documentElement;
+        const $parentOffset = $(offsetParent);
+        const parentOffsetElementPosition = $parentOffset.css('position') || 'static';
+        while ( offsetParent && (offsetParent === doc.body || offsetParent === doc.documentElement) && parentOffsetElementPosition === 'static') {
+            offsetParent = offsetParent.parentNode;
+        }
+        if (offsetParent && offsetParent !== el && offsetParent.nodeType === 1) {
+            // Incorporate borders into its offset, since they are outside its content origin
+            const offsetParentStyles = window.getComputedStyle(offsetParent);
+            const borderTopWidth = parseFloat(offsetParentStyles.borderTopWidth) || 0;
+            const borderLeftWidth = parseFloat(offsetParentStyles.borderLeftWidth) || 0;
+            parentOffset = $parentOffset.offset();
+            parentOffset.top += borderTopWidth;
+            parentOffset.left += borderLeftWidth;
+        }
+    }
+    const marginTop = parseFloat(window.getComputedStyle(el).marginTop) || 0;
+    const marginLeft = parseFloat(window.getComputedStyle(el).marginLeft) || 0;
+    // Subtract parent offsets and element margins
+    return {
+        top: offset.top - parentOffset.top - marginTop,
+        left: offset.left - parentOffset.left - marginLeft
+    };
+}
+
+export function offset(coordinates) {
+    const [el] = this;
+    //  Getter
+    if (coordinates === undefined) {
+        if (!el) return null;
+        if (!el.getClientRects().length) {
+            return { top: 0, left: 0 };
+        }
+        const rect = el.getBoundingClientRect();
+        return {
+            top: rect.top + window.scrollY,
+            left: rect.left + window.scrollX
+        };
+    }
+    // Setter
+    if (!el) return this;
+    const currentStyle = window.getComputedStyle(el);
+    if (currentStyle.position === 'static') {
+        this.css('position', 'relative');
+    }
+    const currentOffset = this.offset();
+    const topDifference = coordinates.top - currentOffset.top;
+    const leftDifference = coordinates.left - currentOffset.left;
+    this.css({
+        top: (parseFloat(currentStyle.top) || 0) + topDifference + 'px',
+        left: (parseFloat(currentStyle.left) || 0) + leftDifference + 'px'
+    });
+    return this;
+}
+

package/src/mvc/Dom/props.mjs

@@ -0,0 +1,77 @@
+const propertySetters = {
+    outerWidth: 'offsetWidth',
+    outerHeight: 'offsetHeight',
+    innerWidth: 'clientWidth',
+    innerHeight: 'clientHeight',
+    scrollLeft: 'scrollLeft',
+    scrollTop: 'scrollTop',
+    val: 'value',
+    text: 'textContent',
+};
+
+const propertiesMap = {
+    disabled: 'disabled',
+    value: 'value',
+    text: 'textContent',
+};
+
+function prop(name, value) {
+    if (!name) throw new Error('no property provided');
+    if (arguments.length === 1) {
+        const [el] = this;
+        if (!el) return null;
+        return el[name];
+    }
+    if (value === undefined) return this;
+    for (let i = 0; i < this.length; i++) {
+        this[i][name] = value;
+    }
+    return this;
+}
+
+function attr(name, value) {
+    let attributes;
+    if (typeof name === 'string') {
+        if (value === undefined) {
+            const [el] = this;
+            if (!el) return null;
+            return el.getAttribute(name);
+        } else {
+            attributes = { [name]: value };
+        }
+    } else if (!name) {
+        throw new Error('no attributes provided');
+    } else {
+        attributes = name;
+    }
+    for (let attr in attributes) {
+        if (attributes.hasOwnProperty(attr)) {
+            const value = attributes[attr];
+            if (propertiesMap[attr]) {
+                this.prop(propertiesMap[attr], value);
+                continue;
+            }
+            for (let i = 0; i < this.length; i++) {
+                if (value === null) {
+                    this[i].removeAttribute(attr);
+                } else {
+                    this[i].setAttribute(attr, value);
+                }
+            }
+        }
+    }
+    return this;
+}
+
+const methods = {
+    prop,
+    attr
+};
+
+Object.keys(propertySetters).forEach(methodName => {
+    methods[methodName] = function(...args) {
+        return this.prop(propertySetters[methodName], ...args);
+    };
+});
+
+export default methods;

package/src/mvc/Dom/vars.mjs

@@ -0,0 +1,5 @@
+import Data from '../Data.mjs';
+
+export const dataPriv = new Data();
+
+export const dataUser = new Data();