le-kit 0.5.3 → 0.6.0

package/dist/collection/components/le-turntable/le-turntable.js

@@ -1,202 +0,0 @@
-import { h } from "@stencil/core";
-export class LeTurntable {
-    constructor() {
-        // transform origin
-        // gets the same values as transform-origin css property
-        this.center = 'center';
-        // transform rotate
-        this.value = 0;
-        /**
-         * Internal state
-         *
-         * using properties instead of @State decoratorm
-         * because we are only changing styles of the element and don't
-         * need the element to be rerendered
-         */
-        // indicates is the element being manually rotated right now
-        this.rotating = false;
-        this.currentAngle = 0;
-    }
-    updateValue(newValue) {
-        if (!this.rotating) {
-            this.currentAngle = parseFloat(newValue);
-            this.setAngle(this.currentAngle);
-        }
-    }
-    /**
-     * Event listeners
-     */
-    handleMouseDown(evt) {
-        // set rotating mode on
-        this.rotating = true;
-        // get start angle
-        //   getting pageX/Y, because when the element is transformed
-        //   relative values are useless
-        this.startAngle = this.getAngle(evt.pageX, evt.pageY);
-        // cancel the event to prevent text selection
-        evt.preventDefault();
-        evt.stopPropagation();
-        return false;
-    }
-    /**
-     * Fires when the mouse moves
-     * checks is the element rotating right now and if it is
-     * then calc the current angle and rotate the element
-     *
-     * TODO: attach events only after the dragStart?
-     */
-    handleMouseMove(evt) {
-        if (this.rotating) {
-            // calc angle update and rotate element
-            this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));
-            return false;
-        }
-    }
-    handleMouseUp(evt) {
-        if (this.rotating) {
-            const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);
-            this.setAngle(angle);
-            this.currentAngle = angle;
-            this.rotating = false;
-            return false;
-        }
-    }
-    // on window resize the center should be recalculated
-    handleWindowResize() {
-        this.getTransformOrigin();
-    }
-    /**
-     * Component lifecycles
-     */
-    componentDidLoad() {
-        this.el.style.transformOrigin = this.center;
-        this.currentAngle = this.value;
-        this.getTransformOrigin();
-        this.setAngle(this.currentAngle);
-    }
-    componentDidUpdate() {
-        this.getTransformOrigin();
-    }
-    /**
-     * Calculates the transform origin of the component
-     * and the page offset in pixels
-     *
-     * We'll need these values to calculate the angle of pointer event
-     */
-    getTransformOrigin() {
-        // transform origin
-        [this.centerX, this.centerY] = window
-            .getComputedStyle(this.el, null)
-            .transformOrigin.split(' ')
-            .map(val => Math.round(parseFloat(val)));
-        // page offset
-        let t = null;
-        const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;
-        const clientRects = this.el.getBoundingClientRect();
-        this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);
-        this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);
-    }
-    /**
-     * Calculates current angle
-     *
-     * @param {number} posX  horizontal mouse position
-     * @param {number} posY  vertical mouse position
-     */
-    getAngle(posX, posY) {
-        const x = posX - this.pageX - this.centerX;
-        const y = posY - this.pageY - this.centerY;
-        const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;
-        return angle;
-    }
-    setAngle(angle) {
-        this.el.style.transform = `rotate(${angle}deg)`;
-    }
-    render() {
-        return (h("div", { key: 'c3708c547602a5c0886d3e8d01e1393703f9dbd7', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, h("slot", { key: 'f124aeded59878dec8e7b9def2047c4381864994' })));
-    }
-    static get is() { return "le-turntable"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-turntable.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-turntable.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "center": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "center",
-                "defaultValue": "'center'"
-            },
-            "value": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "0"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "updateValue"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "mousemove",
-                "method": "handleMouseMove",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "mouseup",
-                "method": "handleMouseUp",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "resize",
-                "method": "handleWindowResize",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
-}
-//# sourceMappingURL=le-turntable.js.map

package/dist/collection/components/le-turntable/le-turntable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-turntable.js","sourceRoot":"","sources":["../../../src/components/le-turntable/le-turntable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Listen, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-turntable',\n  styleUrl: 'le-turntable.css',\n  shadow: true,\n})\nexport class LeTurntable {\n  // host element\n  @Element() el: HTMLElement;\n\n  // transform origin\n  // gets the same values as transform-origin css property\n  @Prop() center: string = 'center';\n\n  // transform rotate\n  @Prop() value: number = 0;\n\n  @Watch('value')\n  updateValue(newValue) {\n    if (!this.rotating) {\n      this.currentAngle = parseFloat(newValue);\n      this.setAngle(this.currentAngle);\n    }\n  }\n\n  /**\n   * Internal state\n   *\n   * using properties instead of @State decoratorm\n   * because we are only changing styles of the element and don't\n   * need the element to be rerendered\n   */\n\n  // indicates is the element being manually rotated right now\n  rotating = false;\n\n  // coordinates of the transform origin in pixels\n  centerX: number;\n  centerY: number;\n\n  // element page (body?) offset in pixels\n  pageX: number;\n  pageY: number;\n\n  currentAngle: number = 0;\n  // angle at the start of the drag\n  startAngle: number;\n\n  /**\n   * Event listeners\n   */\n  handleMouseDown(evt: MouseEvent) {\n    // set rotating mode on\n    this.rotating = true;\n\n    // get start angle\n    //   getting pageX/Y, because when the element is transformed\n    //   relative values are useless\n    this.startAngle = this.getAngle(evt.pageX, evt.pageY);\n\n    // cancel the event to prevent text selection\n    evt.preventDefault();\n    evt.stopPropagation();\n    return false;\n  }\n\n  /**\n   * Fires when the mouse moves\n   * checks is the element rotating right now and if it is\n   * then calc the current angle and rotate the element\n   *\n   * TODO: attach events only after the dragStart?\n   */\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(evt: MouseEvent) {\n    if (this.rotating) {\n      // calc angle update and rotate element\n      this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));\n      return false;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp(evt: MouseEvent) {\n    if (this.rotating) {\n      const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);\n      this.setAngle(angle);\n      this.currentAngle = angle;\n      this.rotating = false;\n      return false;\n    }\n  }\n\n  // on window resize the center should be recalculated\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Component lifecycles\n   */\n  componentDidLoad() {\n    this.el.style.transformOrigin = this.center;\n    this.currentAngle = this.value;\n\n    this.getTransformOrigin();\n    this.setAngle(this.currentAngle);\n  }\n\n  componentDidUpdate() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Calculates the transform origin of the component\n   * and the page offset in pixels\n   *\n   * We'll need these values to calculate the angle of pointer event\n   */\n  getTransformOrigin() {\n    // transform origin\n    [this.centerX, this.centerY] = window\n      .getComputedStyle(this.el, null)\n      .transformOrigin.split(' ')\n      .map(val => Math.round(parseFloat(val)));\n    // page offset\n    let t = null;\n    const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;\n    const clientRects = this.el.getBoundingClientRect();\n    this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);\n    this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);\n  }\n\n  /**\n   * Calculates current angle\n   *\n   * @param {number} posX  horizontal mouse position\n   * @param {number} posY  vertical mouse position\n   */\n  getAngle(posX: number, posY: number) {\n    const x = posX - this.pageX - this.centerX;\n    const y = posY - this.pageY - this.centerY;\n    const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;\n    return angle;\n  }\n\n  setAngle(angle) {\n    this.el.style.transform = `rotate(${angle}deg)`;\n  }\n\n  render() {\n    return (\n      <div class=\"turntable\" onMouseDown={this.handleMouseDown.bind(this)}>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}