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

package/dist/es/map/navigator.js

@@ -0,0 +1,175 @@
+import {
+    deepExtend,
+    addClass,
+    keys,
+    setDefaultOptions
+} from '../common';
+
+import {
+    Observable
+} from './scroller/observable';
+
+import {
+    proxy,
+    on,
+    off,
+    setDefaultEvents,
+    convertToHtml
+} from './utils';
+
+var PAN = "pan";
+
+var 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) {
+    var 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 var Navigator = (function (Observable) {
+    function Navigator(element, options) {
+        Observable.call(this);
+
+        this.element = element;
+        this._initOptions(options);
+
+        var navigateUpButton = createButton("up");
+        var navigateRightlButton = createButton("right");
+        var navigateDownButton = createButton("down");
+        var 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));
+
+        var 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);
+    }
+
+    if ( Observable ) Navigator.__proto__ = Observable;
+    Navigator.prototype = Object.create( Observable && Observable.prototype );
+    Navigator.prototype.constructor = Navigator;
+
+    Navigator.prototype.destroy = function destroy () {
+        this.dispose();
+    };
+
+    // originates from the kendo.jquery version
+    Navigator.prototype.dispose = function dispose () {
+        off(this._keyroot, "keydown", this._keydownHandler);
+    };
+
+    Navigator.prototype._tabindex = function _tabindex (target) {
+        var targetElement = target || this.wrapper || this.element;
+
+        var element = this.element,
+            TABINDEX = "tabindex",
+            tabindex = targetElement.getAttribute(TABINDEX) || element.getAttribute(TABINDEX);
+
+        element.removeAttribute(TABINDEX);
+
+        targetElement.setAttribute(TABINDEX, !isNaN(tabindex) ? tabindex : 0);
+    };
+
+    Navigator.prototype._initOptions = function _initOptions (options) {
+        this.options = deepExtend({}, this.options, options);
+    };
+
+    Navigator.prototype._pan = function _pan (x, y) {
+        var panStep = this.options.panStep;
+
+        this.trigger(PAN, {
+            x: x * panStep,
+            y: y * panStep
+        });
+    };
+
+    Navigator.prototype._click = function _click (e) {
+        var x = 0;
+        var y = 0;
+        var 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 */
+    Navigator.prototype._keydown = function _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;
+        }
+    };
+
+    return Navigator;
+}(Observable));
+
+setDefaultOptions(Navigator, {
+    name: 'Navigator',
+    panStep: 1
+});
+
+
+setDefaultEvents(Navigator, [
+    PAN
+]);

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

@@ -0,0 +1,454 @@
+import {
+    Class,
+    elementOffset
+} from '../../common';
+
+import {
+    Observable
+} from './observable';
+
+import {
+    getEventMap,
+    proxy,
+    getSupportedFeatures
+} from '../utils';
+
+var extend = Object.assign;
+
+var CHANGE = 'change';
+
+export var TapCapture = (function (Observable) {
+    function TapCapture(element, options) {
+        Observable.call(this);
+        var that = this,
+            domElement = element[0] || element;
+
+        that.capture = false;
+
+        var 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 || {});
+    }
+
+    if ( Observable ) TapCapture.__proto__ = Observable;
+    TapCapture.prototype = Object.create( Observable && Observable.prototype );
+    TapCapture.prototype.constructor = TapCapture;
+
+    TapCapture.prototype.captureNext = function captureNext () {
+        this.capture = true;
+    };
+
+    TapCapture.prototype.cancelCapture = function cancelCapture () {
+        this.capture = false;
+    };
+
+    TapCapture.prototype._press = function _press (e) {
+        var that = this;
+
+        that.trigger('press');
+
+        if (that.capture) {
+            e.preventDefault();
+        }
+    };
+
+    TapCapture.prototype._release = function _release (e) {
+        var that = this;
+
+        that.trigger('release');
+
+        if (that.capture) {
+            e.preventDefault();
+            that.cancelCapture();
+        }
+    };
+
+    return TapCapture;
+}(Observable));
+
+export var PaneDimension = (function (Observable) {
+    function PaneDimension(options) {
+        Observable.call(this);
+        var 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';
+        }
+    }
+
+    if ( Observable ) PaneDimension.__proto__ = Observable;
+    PaneDimension.prototype = Object.create( Observable && Observable.prototype );
+    PaneDimension.prototype.constructor = PaneDimension;
+
+    PaneDimension.prototype.makeVirtual = function makeVirtual () {
+        extend(this, {
+            virtual: true,
+            forcedEnabled: true,
+            _virtualMin: 0,
+            _virtualMax: 0
+        });
+    };
+
+    PaneDimension.prototype.virtualSize = function virtualSize (min, max) {
+        if (this._virtualMin !== min || this._virtualMax !== max) {
+            this._virtualMin = min;
+            this._virtualMax = max;
+            this.update();
+        }
+    };
+
+    PaneDimension.prototype.outOfBounds = function outOfBounds (offset) {
+        return offset > this.max || offset < this.min;
+    };
+
+    PaneDimension.prototype.forceEnabled = function forceEnabled () {
+        this.forcedEnabled = true;
+    };
+
+    PaneDimension.prototype.getSize = function getSize () {
+        return this.container[this.measure];
+    };
+
+    PaneDimension.prototype.getTotal = function getTotal () {
+        return this.element[this.scrollSize];
+    };
+
+    PaneDimension.prototype.rescale = function rescale (scale) {
+        this.scale = scale;
+    };
+
+    PaneDimension.prototype.update = function update (silent) {
+        var 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);
+        }
+    };
+
+    return PaneDimension;
+}(Observable));
+
+export var PaneDimensions = (function (Observable) {
+    function PaneDimensions(options) {
+        Observable.call(this);
+        var 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);
+    }
+
+    if ( Observable ) PaneDimensions.__proto__ = Observable;
+    PaneDimensions.prototype = Object.create( Observable && Observable.prototype );
+    PaneDimensions.prototype.constructor = PaneDimensions;
+
+    PaneDimensions.prototype.rescale = function rescale (newScale) {
+        this.x.rescale(newScale);
+        this.y.rescale(newScale);
+        this.refresh();
+    };
+
+    PaneDimensions.prototype.centerCoordinates = function centerCoordinates () {
+        return {
+            x: Math.min(0, -this.x.centerOffset),
+            y: Math.min(0, -this.y.centerOffset)
+        };
+    };
+
+    PaneDimensions.prototype.refresh = function refresh () {
+        var 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);
+    };
+
+    return PaneDimensions;
+}(Observable));
+
+export var PaneAxis = (function (Observable) {
+    function PaneAxis(options) {
+        Observable.call(this);
+        extend(this, options);
+    }
+
+    if ( Observable ) PaneAxis.__proto__ = Observable;
+    PaneAxis.prototype = Object.create( Observable && Observable.prototype );
+    PaneAxis.prototype.constructor = PaneAxis;
+
+    PaneAxis.prototype.outOfBounds = function outOfBounds () {
+        return this.dimension.outOfBounds(this.movable[this.axis]);
+    };
+
+    PaneAxis.prototype.dragMove = function dragMove (delta) {
+        var that = this,
+            dimension = that.dimension,
+            axis = that.axis,
+            movable = that.movable,
+            position = movable[axis] + delta;
+
+        if (!dimension.enabled) {
+            return;
+        }
+
+        var dragDelta = delta;
+
+        if (position < dimension.min && delta < 0 || position > dimension.max && delta > 0) {
+            dragDelta *= that.resistance;
+        }
+
+        movable.translateAxis(axis, dragDelta);
+        that.trigger(CHANGE, that);
+    };
+
+    return PaneAxis;
+}(Observable));
+
+export var Pane = (function (Class) {
+    function Pane(options) {
+        Class.call(this);
+
+        var 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: function gesturestart(e) {
+                that.gesture = e;
+
+                that.offset = elementOffset(that.dimensions.container);
+            },
+            press: function press(e) {
+                var closestAnchor = e.event.target.closest('a');
+
+                if (closestAnchor && closestAnchor.matches('[data-navigate-on-press=true]')) {
+                    e.sender.cancel();
+                }
+            },
+            gesturechange: function gesturechange(e) {
+                var 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;
+                }
+
+                var 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: function 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: function end(e) {
+                e.preventDefault();
+            }
+        });
+    }
+
+    if ( Class ) Pane.__proto__ = Class;
+    Pane.prototype = Object.create( Class && Class.prototype );
+    Pane.prototype.constructor = Pane;
+
+    return Pane;
+}(Class));
+
+var translate = function(x, y, scale) {
+    return 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + scale + ')';
+};
+
+export var Movable = (function (Observable) {
+    function Movable(element) {
+        Observable.call(this);
+
+        var 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;
+
+        var coordinates = translate(that.x, that.y, that.scale);
+        that.element.style[this.transformStyle] = coordinates;
+
+        that._saveCoordinates(coordinates);
+    }
+
+    if ( Observable ) Movable.__proto__ = Observable;
+    Movable.prototype = Object.create( Observable && Observable.prototype );
+    Movable.prototype.constructor = Movable;
+
+    Movable.prototype.translateAxis = function translateAxis (axis, by) {
+        this[axis] += by;
+        this.refresh();
+    };
+
+    Movable.prototype.scaleTo = function scaleTo (scale) {
+        this.scale = scale;
+        this.refresh();
+    };
+
+    Movable.prototype.scaleWith = function scaleWith (scaleDelta) {
+        this.scale *= scaleDelta;
+        this.refresh();
+    };
+
+    Movable.prototype.translate = function translate (coordinates) {
+        this.x += coordinates.x;
+        this.y += coordinates.y;
+        this.refresh();
+    };
+
+    Movable.prototype.moveAxis = function moveAxis (axis, value) {
+        this[axis] = value;
+        this.refresh();
+    };
+
+    Movable.prototype.moveTo = function moveTo (coordinates) {
+        extend(this, coordinates);
+        this.refresh();
+    };
+
+    Movable.prototype.refresh = function refresh () {
+        var 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);
+        }
+    };
+
+    Movable.prototype._saveCoordinates = function _saveCoordinates (coordinates) {
+        this.coordinates = coordinates;
+    };
+
+    return Movable;
+}(Observable));