@progress/kendo-charts 1.22.0 → 1.23.0-dev.202201170838

package/dist/es2015/map/navigator.js

@@ -0,0 +1,170 @@
+import {
+    deepExtend,
+    addClass,
+    keys,
+    setDefaultOptions
+} from '../common';
+
+import {
+    Observable
+} from './scroller/observable';
+
+import {
+    proxy,
+    on,
+    off,
+    setDefaultEvents,
+    convertToHtml
+} from './utils';
+
+const PAN = "pan";
+
+const directionsMap = {
+    up: {
+        className: "k-navigator-n",
+        iconClass: "k-i-arrow-n"
+    },
+    down: {
+        className: "k-navigator-s",
+        iconClass: "k-i-arrow-s"
+    },
+    right: {
+        className: "k-navigator-e",
+        iconClass: "k-i-arrow-e"
+    },
+    left: {
+        className: "k-navigator-w",
+        iconClass: "k-i-arrow-w"
+    }
+};
+
+function createButton(direction) {
+    const html =
+        '<button class="k-button k-button-square k-rounded-full k-button-flat k-button-flat-base k-icon-button ' +
+            directionsMap[direction].className +
+            '" aria-label="move ' + direction + '">' +
+            '<span class="k-icon ' + directionsMap[direction].iconClass + '" />' +
+        '</button>';
+
+    return convertToHtml(html);
+}
+
+export class Navigator extends Observable {
+    constructor(element, options) {
+        super();
+
+        this.element = element;
+        this._initOptions(options);
+
+        const navigateUpButton = createButton("up");
+        const navigateRightlButton = createButton("right");
+        const navigateDownButton = createButton("down");
+        const navigateLeftButton = createButton("left");
+
+        this.element.appendChild(navigateUpButton);
+        this.element.appendChild(navigateRightlButton);
+        this.element.appendChild(navigateDownButton);
+        this.element.appendChild(navigateLeftButton);
+
+        addClass(this.element, 'k-widget k-navigator');
+
+        on(this.element, "click", ".k-button", proxy(this._click, this));
+
+        let parentElement = this.element.parentNode.closest("[data-role]");
+
+        this._keyroot = parentElement ? parentElement : this.element;
+        this._tabindex(this._keyroot);
+
+        this._keydownHandler = proxy(this._keydown, this);
+        on(this._keyroot, "keydown", this._keydownHandler);
+    }
+
+    destroy() {
+        this.dispose();
+    }
+
+    // originates from the kendo.jquery version
+    dispose() {
+        off(this._keyroot, "keydown", this._keydownHandler);
+    }
+
+    _tabindex(target) {
+        const targetElement = target || this.wrapper || this.element;
+
+        let element = this.element,
+            TABINDEX = "tabindex",
+            tabindex = targetElement.getAttribute(TABINDEX) || element.getAttribute(TABINDEX);
+
+        element.removeAttribute(TABINDEX);
+
+        targetElement.setAttribute(TABINDEX, !isNaN(tabindex) ? tabindex : 0);
+    }
+
+    _initOptions(options) {
+        this.options = deepExtend({}, this.options, options);
+    }
+
+    _pan(x, y) {
+        let panStep = this.options.panStep;
+
+        this.trigger(PAN, {
+            x: x * panStep,
+            y: y * panStep
+        });
+    }
+
+    _click(e) {
+        let x = 0;
+        let y = 0;
+        let button = e.currentTarget;
+
+        if (button.matches('.k-navigator-n')) {
+            y = 1;
+        } else if (button.matches('.k-navigator-s')) {
+            y = -1;
+        } else if (button.matches('.k-navigator-e')) {
+            x = 1;
+        } else if (button.matches('.k-navigator-w')) {
+            x = -1;
+        }
+
+        this._pan(x, y);
+
+        e.preventDefault();
+    }
+
+    /* eslint-disable indent */
+    _keydown(e) {
+        switch (e.which) {
+            case keys.UP:
+                this._pan(0, 1);
+                e.preventDefault();
+                break;
+            case keys.DOWN:
+                this._pan(0, -1);
+                e.preventDefault();
+                break;
+            case keys.RIGHT:
+                this._pan(1, 0);
+                e.preventDefault();
+                break;
+            case keys.LEFT:
+                this._pan(-1, 0);
+                e.preventDefault();
+                break;
+            default:
+                break;
+        }
+    }
+    /* eslint-enable indent */
+}
+
+setDefaultOptions(Navigator, {
+    name: 'Navigator',
+    panStep: 1
+});
+
+
+setDefaultEvents(Navigator, [
+    PAN
+]);

package/dist/es2015/map/scroller/draggable.js

@@ -0,0 +1,418 @@
+import {
+    Class,
+    elementOffset
+} from '../../common';
+
+import {
+    Observable
+} from './observable';
+
+import {
+    getEventMap,
+    proxy,
+    getSupportedFeatures
+} from '../utils';
+
+const extend = Object.assign;
+
+const CHANGE = 'change';
+
+export class TapCapture extends Observable {
+    constructor(element, options) {
+        super();
+        let that = this,
+            domElement = element[0] || element;
+
+        that.capture = false;
+
+        const eventMap = getEventMap(navigator.userAgent);
+
+        if (domElement.addEventListener) {
+            eventMap.down.split(' ').forEach(function(event) {
+                domElement.addEventListener(event, proxy(that._press, that), true);
+            });
+            eventMap.up.split(' ').forEach(function(event) {
+                domElement.addEventListener(event, proxy(that._release, that), true);
+            });
+        } else {
+            eventMap.down.split(' ').forEach(function(event) {
+                domElement.attachEvent(event, proxy(that._press, that));
+            });
+            eventMap.up.split(' ').forEach(function(event) {
+                domElement.attachEvent(event, proxy(that._release, that));
+            });
+        }
+
+        that.bind([
+            'press',
+            'release'
+        ], options || {});
+    }
+
+    captureNext() {
+        this.capture = true;
+    }
+
+    cancelCapture() {
+        this.capture = false;
+    }
+
+    _press(e) {
+        let that = this;
+
+        that.trigger('press');
+
+        if (that.capture) {
+            e.preventDefault();
+        }
+    }
+
+    _release(e) {
+        let that = this;
+
+        that.trigger('release');
+
+        if (that.capture) {
+            e.preventDefault();
+            that.cancelCapture();
+        }
+    }
+}
+
+export class PaneDimension extends Observable {
+    constructor(options) {
+        super();
+        let that = this;
+        that.forcedEnabled = false;
+        extend(that, options);
+        that.scale = 1;
+
+        if (that.horizontal) {
+            that.measure = 'offsetWidth';
+            that.scrollSize = 'scrollWidth';
+            that.axis = 'x';
+        } else {
+            that.measure = 'offsetHeight';
+            that.scrollSize = 'scrollHeight';
+            that.axis = 'y';
+        }
+    }
+
+    makeVirtual() {
+        extend(this, {
+            virtual: true,
+            forcedEnabled: true,
+            _virtualMin: 0,
+            _virtualMax: 0
+        });
+    }
+
+    virtualSize(min, max) {
+        if (this._virtualMin !== min || this._virtualMax !== max) {
+            this._virtualMin = min;
+            this._virtualMax = max;
+            this.update();
+        }
+    }
+
+    outOfBounds(offset) {
+        return offset > this.max || offset < this.min;
+    }
+
+    forceEnabled() {
+        this.forcedEnabled = true;
+    }
+
+    getSize() {
+        return this.container[this.measure];
+    }
+
+    getTotal() {
+        return this.element[this.scrollSize];
+    }
+
+    rescale(scale) {
+        this.scale = scale;
+    }
+
+    update(silent) {
+        let that = this,
+            total = that.virtual ? that._virtualMax : that.getTotal(),
+            scaledTotal = total * that.scale,
+            size = that.getSize();
+
+        if (total === 0 && !that.forcedEnabled) {
+            return;
+        }
+
+        that.max = that.virtual ? -that._virtualMin : 0;
+        that.size = size;
+        that.total = scaledTotal;
+        that.min = Math.min(that.max, size - scaledTotal);
+        that.minScale = size / total;
+        that.centerOffset = (scaledTotal - size) / 2;
+        that.enabled = that.forcedEnabled || scaledTotal > size;
+
+        if (!silent) {
+            that.trigger(CHANGE, that);
+        }
+    }
+}
+
+export class PaneDimensions extends Observable {
+    constructor(options) {
+        super();
+        let that = this;
+
+        that.x = new PaneDimension(extend({
+            horizontal: true
+        }, options));
+
+        that.y = new PaneDimension(extend({
+            horizontal: false
+        }, options));
+
+        that.container = options.container;
+        that.forcedMinScale = options.minScale;
+        that.maxScale = options.maxScale || 100;
+        that.bind(CHANGE, options);
+    }
+
+    rescale(newScale) {
+        this.x.rescale(newScale);
+        this.y.rescale(newScale);
+        this.refresh();
+    }
+
+    centerCoordinates() {
+        return {
+            x: Math.min(0, -this.x.centerOffset),
+            y: Math.min(0, -this.y.centerOffset)
+        };
+    }
+
+    refresh() {
+        let that = this;
+        that.x.update();
+        that.y.update();
+        that.enabled = that.x.enabled || that.y.enabled;
+        that.minScale = that.forcedMinScale || Math.min(that.x.minScale, that.y.minScale);
+        that.fitScale = Math.max(that.x.minScale, that.y.minScale);
+        that.trigger(CHANGE);
+    }
+}
+
+export class PaneAxis extends Observable {
+    constructor(options) {
+        super();
+        extend(this, options);
+    }
+
+    outOfBounds() {
+        return this.dimension.outOfBounds(this.movable[this.axis]);
+    }
+
+    dragMove(delta) {
+        let that = this,
+            dimension = that.dimension,
+            axis = that.axis,
+            movable = that.movable,
+            position = movable[axis] + delta;
+
+        if (!dimension.enabled) {
+            return;
+        }
+
+        let dragDelta = delta;
+
+        if (position < dimension.min && delta < 0 || position > dimension.max && delta > 0) {
+            dragDelta *= that.resistance;
+        }
+
+        movable.translateAxis(axis, dragDelta);
+        that.trigger(CHANGE, that);
+    }
+}
+
+export class Pane extends Class {
+    constructor(options) {
+        super();
+
+        let that = this,
+            x, y,
+            resistance,
+            movable;
+
+        extend(that, {
+            elastic: true
+        }, options);
+
+        resistance = that.elastic ? 0.5 : 0;
+        movable = that.movable;
+
+        that.x = x = new PaneAxis({
+            axis: 'x',
+            dimension: that.dimensions.x,
+            resistance: resistance,
+            movable: movable
+        });
+
+        that.y = y = new PaneAxis({
+            axis: 'y',
+            dimension: that.dimensions.y,
+            resistance: resistance,
+            movable: movable
+        });
+
+        that.userEvents.bind([
+            'press',
+            'move',
+            'end',
+            'gesturestart',
+            'gesturechange'
+        ], {
+            gesturestart(e) {
+                that.gesture = e;
+
+                that.offset = elementOffset(that.dimensions.container);
+            },
+            press(e) {
+                const closestAnchor = e.event.target.closest('a');
+
+                if (closestAnchor && closestAnchor.matches('[data-navigate-on-press=true]')) {
+                    e.sender.cancel();
+                }
+            },
+            gesturechange(e) {
+                let previousGesture = that.gesture,
+                    previousCenter = previousGesture.center,
+                    center = e.center,
+                    scaleDelta = e.distance / previousGesture.distance,
+                    minScale = that.dimensions.minScale,
+                    maxScale = that.dimensions.maxScale,
+                    coordinates;
+                if (movable.scale <= minScale && scaleDelta < 1) {
+                    scaleDelta += (1 - scaleDelta) * 0.8;
+                }
+
+                if (movable.scale * scaleDelta >= maxScale) {
+                    scaleDelta = maxScale / movable.scale;
+                }
+
+                let offsetX = movable.x + that.offset.left,
+                    offsetY = movable.y + that.offset.top;
+                coordinates = {
+                    x: (offsetX - previousCenter.x) * scaleDelta + center.x - offsetX,
+                    y: (offsetY - previousCenter.y) * scaleDelta + center.y - offsetY
+                };
+
+                movable.scaleWith(scaleDelta);
+
+                x.dragMove(coordinates.x);
+                y.dragMove(coordinates.y);
+
+                that.dimensions.rescale(movable.scale);
+                that.gesture = e;
+
+                e.preventDefault();
+            },
+            move(e) {
+                if (e.event.target.tagName.match(/textarea|input/i)) {
+                    return;
+                }
+
+                if (x.dimension.enabled || y.dimension.enabled) {
+                    x.dragMove(e.x.delta);
+                    y.dragMove(e.y.delta);
+                    e.preventDefault();
+                } else {
+                    e.touch.skip();
+                }
+            },
+            end(e) {
+                e.preventDefault();
+            }
+        });
+    }
+}
+
+let translate = function(x, y, scale) {
+    return 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + scale + ')';
+};
+
+export class Movable extends Observable {
+    constructor(element) {
+        super();
+
+        let that = this;
+
+        that.support = getSupportedFeatures();
+        this.transformStyle = this.support.transitions.prefix + 'Transform';
+        that.element = element;
+        that.element.style.webkitTransformOrigin = 'left top';
+        that.x = 0;
+        that.y = 0;
+        that.scale = 1;
+
+        const coordinates = translate(that.x, that.y, that.scale);
+        that.element.style[this.transformStyle] = coordinates;
+
+        that._saveCoordinates(coordinates);
+    }
+
+    translateAxis(axis, by) {
+        this[axis] += by;
+        this.refresh();
+    }
+
+    scaleTo(scale) {
+        this.scale = scale;
+        this.refresh();
+    }
+
+    scaleWith(scaleDelta) {
+        this.scale *= scaleDelta;
+        this.refresh();
+    }
+
+    translate(coordinates) {
+        this.x += coordinates.x;
+        this.y += coordinates.y;
+        this.refresh();
+    }
+
+    moveAxis(axis, value) {
+        this[axis] = value;
+        this.refresh();
+    }
+
+    moveTo(coordinates) {
+        extend(this, coordinates);
+        this.refresh();
+    }
+
+    refresh() {
+        let that = this,
+            x = that.x,
+            y = that.y,
+            newCoordinates;
+
+        if (that.round) {
+            x = Math.round(x);
+            y = Math.round(y);
+        }
+
+        newCoordinates = translate(x, y, that.scale);
+
+        if (newCoordinates !== that.coordinates) {
+            that.element.style[this.transformStyle] = newCoordinates;
+
+            that._saveCoordinates(newCoordinates);
+            that.trigger(CHANGE);
+        }
+    }
+
+    _saveCoordinates(coordinates) {
+        this.coordinates = coordinates;
+    }
+}

package/dist/es2015/map/scroller/fx.js

@@ -0,0 +1,112 @@
+import {
+    Class
+} from '../../common';
+
+import {
+    proxy,
+    now
+} from '../utils';
+
+const extend = Object.assign;
+
+function animationFrame(callback) {
+    window.requestAnimationFrame(callback);
+}
+
+export class Animation extends Class {
+    constructor() {
+        super();
+        let that = this;
+
+        that._tickProxy = proxy(that._tick, that);
+        that._started = false;
+    }
+
+    tick() { }
+    done() { }
+    onEnd() { }
+    onCancel() { }
+
+    start() {
+        if (!this.enabled()) {
+            return;
+        }
+
+        if (!this.done()) {
+            this._started = true;
+            animationFrame(this._tickProxy);
+        } else {
+            this.onEnd();
+        }
+    }
+
+    enabled() {
+        return true;
+    }
+
+    cancel() {
+        this._started = false;
+        this.onCancel();
+    }
+
+    _tick() {
+        let that = this;
+
+        if (!that._started) {
+            return;
+        }
+
+        that.tick();
+
+        if (!that.done()) {
+            animationFrame(that._tickProxy);
+        } else {
+            that._started = false;
+            that.onEnd();
+        }
+    }
+}
+
+export class Transition extends Animation {
+    constructor(options) {
+        super();
+        extend(this, options);
+    }
+
+    done() {
+        return this.timePassed() >= this.duration;
+    }
+
+    timePassed() {
+        return Math.min(this.duration, now() - this.startDate);
+    }
+
+    moveTo(options) {
+        let that = this,
+            movable = that.movable;
+
+        that.initial = movable[that.axis];
+        that.delta = options.location - that.initial;
+        that.duration = typeof options.duration === 'number' ? options.duration : 300;
+        that.tick = that._easeProxy(options.ease);
+        that.startDate = now();
+        that.start();
+    }
+
+    _easeProxy(ease) {
+        let that = this;
+
+        return function() {
+            that.movable.moveAxis(that.axis, ease(that.timePassed(), that.initial, that.delta, that.duration));
+        };
+    }
+
+    static easeOutExpo(t, b, c, d) {
+        return t === d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
+    }
+
+    // static easeOutBack(t, b, c, d) {
+    //     let s = 1.70158;
+    //     return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+    // }
+}