From c532780facd79aae64a0bf58831afe2dc7f7ec42 Mon Sep 17 00:00:00 2001 From: Matthijs Laan Date: Thu, 26 Sep 2024 15:11:30 +0200 Subject: [PATCH] Update files to match tailormap-viewer repo --- .eslintrc.json | 26 +- angular.json | 17 +- jest.base.config.js | 4 +- projects/app/src/polyfills.ts | 7 +- .../drag-drop-touch/DragDropTouch.js | 452 ++++++++++++++++++ .../app/src/polyfills/drag-drop-touch/LICENSE | 21 + .../src/polyfills/drag-drop-touch/README.md | 76 +++ proxy.config.js | 10 +- setup-jest.ts | 11 +- tsconfig.json | 5 +- 10 files changed, 603 insertions(+), 26 deletions(-) create mode 100644 projects/app/src/polyfills/drag-drop-touch/DragDropTouch.js create mode 100644 projects/app/src/polyfills/drag-drop-touch/LICENSE create mode 100644 projects/app/src/polyfills/drag-drop-touch/README.md diff --git a/.eslintrc.json b/.eslintrc.json index 77fb4c1..d516a70 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -13,7 +13,8 @@ ], "plugins": [ "rxjs", - "import" + "import", + "@stylistic/ts" ], "extends": [ "eslint:recommended", @@ -30,7 +31,16 @@ ] }, "rules": { + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "tm", + "style": "kebab-case" + } + ], "@typescript-eslint/no-explicit-any": "off", + "@stylistic/ts/no-explicit-any": "off", "@angular-eslint/directive-selector": [ "error", { @@ -62,7 +72,7 @@ "always" ], "comma-dangle": "off", - "@typescript-eslint/comma-dangle": [ + "@stylistic/ts/comma-dangle": [ "error", "always-multiline" ], @@ -73,8 +83,8 @@ "import/order": "off", "arrow-body-style": "off", "semi": "off", - "@typescript-eslint/semi": "error", - "@typescript-eslint/member-ordering": "off", + "@stylistic/ts/semi": "error", + "@stylistic/ts/member-ordering": "off", "@typescript-eslint/naming-convention": [ "error", { @@ -98,7 +108,7 @@ } ], "space-before-function-paren": "off", - "@typescript-eslint/space-before-function-paren": [ + "@stylistic/ts/space-before-function-paren": [ "error", { "anonymous": "always", @@ -152,7 +162,7 @@ "variables": true } ], - "@typescript-eslint/member-delimiter-style": [ + "@stylistic/ts/member-delimiter-style": [ "error", { "multiline": { @@ -179,8 +189,8 @@ "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "off", "rxjs/finnish": "off", - "@typescript-eslint/ban-ts-comment": "off", - "@typescript-eslint/no-empty-function": "off" + "@stylistic/ts/ban-ts-comment": "off", + "@stylistic/ts/no-empty-function": "off" } }, { diff --git a/angular.json b/angular.json index e16bff5..e1cccdf 100644 --- a/angular.json +++ b/angular.json @@ -28,6 +28,13 @@ "node_modules/@tailormap-viewer/shared/assets/locale/messages.shared.nl.xlf", "node_modules/@tailormap-admin/admin-core/assets/locale/messages.admin-core.nl.xlf" ] + }, + "de": { + "translation": [ + "node_modules/@tailormap-viewer/core/assets/locale/messages.core.de.xlf", + "node_modules/@tailormap-viewer/shared/assets/locale/messages.shared.de.xlf", + "node_modules/@tailormap-admin/admin-core/assets/locale/messages.admin-core.de.xlf" + ] } } }, @@ -38,7 +45,7 @@ "outputPath": "dist/app", "index": "projects/app/src/index.html", "main": "projects/app/src/main.ts", - "polyfills": ["projects/app/src/polyfills.ts"], + "polyfills": ["projects/app/src/polyfills.ts", "@angular/localize/init"], "tsConfig": "projects/app/tsconfig.app.json", "assets": [ { @@ -79,7 +86,10 @@ "earcut", "svgpath", "lerc", - "color-name" + "color-name", + "localforage", + "fastpriorityqueue", + "color-convert" ], "i18nMissingTranslation": "error" }, @@ -134,6 +144,9 @@ }, "nl": { "buildTarget": "app:build:development,nl" + }, + "de": { + "buildTarget": "app:build:development,de" } }, "options": { diff --git a/jest.base.config.js b/jest.base.config.js index 70de885..be85053 100644 --- a/jest.base.config.js +++ b/jest.base.config.js @@ -1,3 +1,5 @@ +process.env.TZ = 'GMT'; + module.exports = { preset: 'jest-preset-angular', setupFilesAfterEnv: ['/../../setup-jest.ts'], @@ -11,5 +13,5 @@ module.exports = { }, ], }, - transformIgnorePatterns: ['node_modules/(?!(.*\\.mjs$|ol|observable-fns|quick-lru|nanoid))'], + transformIgnorePatterns: ['node_modules/(?!(.*\\.mjs$|ol|observable-fns|quick-lru|nanoid|earcut|pbf|rbush|@tinyhttp/|@stardazed|color-(space|parse|rgba|name)/))'], }; diff --git a/projects/app/src/polyfills.ts b/projects/app/src/polyfills.ts index 9194e82..98f132e 100644 --- a/projects/app/src/polyfills.ts +++ b/projects/app/src/polyfills.ts @@ -1,7 +1,3 @@ -/*************************************************************************************************** - * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. - */ -import '@angular/localize/init'; /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. @@ -55,3 +51,6 @@ import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ + +// Drag-drop polyfill to support HTML5 drag and drop on touch devices. Used to reorder tree nodes. +import './polyfills/drag-drop-touch/DragDropTouch.js'; diff --git a/projects/app/src/polyfills/drag-drop-touch/DragDropTouch.js b/projects/app/src/polyfills/drag-drop-touch/DragDropTouch.js new file mode 100644 index 0000000..789179b --- /dev/null +++ b/projects/app/src/polyfills/drag-drop-touch/DragDropTouch.js @@ -0,0 +1,452 @@ +var DragDropTouch; +(function (DragDropTouch_1) { + 'use strict'; + /** + * Object used to hold the data that is being dragged during drag and drop operations. + * + * It may hold one or more data items of different types. For more information about + * drag and drop operations and data transfer objects, see + * HTML Drag and Drop API. + * + * This object is created automatically by the @see:DragDropTouch singleton and is + * accessible through the @see:dataTransfer property of all drag events. + */ + var DataTransfer = (function () { + function DataTransfer() { + this._dropEffect = 'move'; + this._effectAllowed = 'all'; + this._data = {}; + } + Object.defineProperty(DataTransfer.prototype, "dropEffect", { + /** + * Gets or sets the type of drag-and-drop operation currently selected. + * The value must be 'none', 'copy', 'link', or 'move'. + */ + get: function () { + return this._dropEffect; + }, + set: function (value) { + this._dropEffect = value; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(DataTransfer.prototype, "effectAllowed", { + /** + * Gets or sets the types of operations that are possible. + * Must be one of 'none', 'copy', 'copyLink', 'copyMove', 'link', + * 'linkMove', 'move', 'all' or 'uninitialized'. + */ + get: function () { + return this._effectAllowed; + }, + set: function (value) { + this._effectAllowed = value; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(DataTransfer.prototype, "types", { + /** + * Gets an array of strings giving the formats that were set in the @see:dragstart event. + */ + get: function () { + return Object.keys(this._data); + }, + enumerable: true, + configurable: true + }); + /** + * Removes the data associated with a given type. + * + * The type argument is optional. If the type is empty or not specified, the data + * associated with all types is removed. If data for the specified type does not exist, + * or the data transfer contains no data, this method will have no effect. + * + * @param type Type of data to remove. + */ + DataTransfer.prototype.clearData = function (type) { + if (type != null) { + delete this._data[type.toLowerCase()]; + } + else { + this._data = {}; + } + }; + /** + * Retrieves the data for a given type, or an empty string if data for that type does + * not exist or the data transfer contains no data. + * + * @param type Type of data to retrieve. + */ + DataTransfer.prototype.getData = function (type) { + return this._data[type.toLowerCase()] || ''; + }; + /** + * Set the data for a given type. + * + * For a list of recommended drag types, please see + * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types. + * + * @param type Type of data to add. + * @param value Data to add. + */ + DataTransfer.prototype.setData = function (type, value) { + this._data[type.toLowerCase()] = value; + }; + /** + * Set the image to be used for dragging if a custom one is desired. + * + * @param img An image element to use as the drag feedback image. + * @param offsetX The horizontal offset within the image. + * @param offsetY The vertical offset within the image. + */ + DataTransfer.prototype.setDragImage = function (img, offsetX, offsetY) { + var ddt = DragDropTouch._instance; + ddt._imgCustom = img; + ddt._imgOffset = { x: offsetX, y: offsetY }; + }; + return DataTransfer; + }()); + DragDropTouch_1.DataTransfer = DataTransfer; + /** + * Defines a class that adds support for touch-based HTML5 drag/drop operations. + * + * The @see:DragDropTouch class listens to touch events and raises the + * appropriate HTML5 drag/drop events as if the events had been caused + * by mouse actions. + * + * The purpose of this class is to enable using existing, standard HTML5 + * drag/drop code on mobile devices running IOS or Android. + * + * To use, include the DragDropTouch.js file on the page. The class will + * automatically start monitoring touch events and will raise the HTML5 + * drag drop events (dragstart, dragenter, dragleave, drop, dragend) which + * should be handled by the application. + * + * For details and examples on HTML drag and drop, see + * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations. + */ + var DragDropTouch = (function () { + /** + * Initializes the single instance of the @see:DragDropTouch class. + */ + function DragDropTouch() { + this._lastClick = 0; + // enforce singleton pattern + if (DragDropTouch._instance) { + throw 'DragDropTouch instance already created.'; + } + // detect passive event support + // https://github.com/Modernizr/Modernizr/issues/1894 + var supportsPassive = false; + document.addEventListener('test', function () { }, { + get passive() { + supportsPassive = true; + return true; + } + }); + // listen to touch events + if (navigator.maxTouchPoints) { + var d = document, + ts = this._touchstart.bind(this), + tm = this._touchmove.bind(this), + te = this._touchend.bind(this), + opt = supportsPassive ? { passive: false, capture: false } : false; + d.addEventListener('touchstart', ts, opt); + d.addEventListener('touchmove', tm, opt); + d.addEventListener('touchend', te); + d.addEventListener('touchcancel', te); + } + } + /** + * Gets a reference to the @see:DragDropTouch singleton. + */ + DragDropTouch.getInstance = function () { + return DragDropTouch._instance; + }; + // ** event handlers + DragDropTouch.prototype._touchstart = function (e) { + var _this = this; + if (this._shouldHandle(e)) { + // raise double-click and prevent zooming + if (Date.now() - this._lastClick < DragDropTouch._DBLCLICK) { + if (this._dispatchEvent(e, 'dblclick', e.target)) { + e.preventDefault(); + this._reset(); + return; + } + } + // clear all variables + this._reset(); + // get nearest draggable element + var src = this._closestDraggable(e.target); + if (src) { + // give caller a chance to handle the hover/move events + if (!this._dispatchEvent(e, 'mousemove', e.target) && + !this._dispatchEvent(e, 'mousedown', e.target)) { + // get ready to start dragging + this._dragSource = src; + this._ptDown = this._getPoint(e); + this._lastTouch = e; + e.preventDefault(); + // show context menu if the user hasn't started dragging after a while + setTimeout(function () { + if (_this._dragSource == src && _this._img == null) { + if (_this._dispatchEvent(e, 'contextmenu', src)) { + _this._reset(); + } + } + }, DragDropTouch._CTXMENU); + if (DragDropTouch._ISPRESSHOLDMODE) { + this._pressHoldInterval = setTimeout(function () { + _this._isDragEnabled = true; + _this._touchmove(e); + }, DragDropTouch._PRESSHOLDAWAIT); + } + } + } + } + }; + DragDropTouch.prototype._touchmove = function (e) { + if (this._shouldCancelPressHoldMove(e)) { + this._reset(); + return; + } + if (this._shouldHandleMove(e) || this._shouldHandlePressHoldMove(e)) { + // see if target wants to handle move + var target = this._getTarget(e); + if (this._dispatchEvent(e, 'mousemove', target)) { + this._lastTouch = e; + e.preventDefault(); + return; + } + // start dragging + if (this._dragSource && !this._img && this._shouldStartDragging(e)) { + this._dispatchEvent(e, 'dragstart', this._dragSource); + this._createImage(e); + this._dispatchEvent(e, 'dragenter', target); + } + // continue dragging + if (this._img) { + this._lastTouch = e; + e.preventDefault(); // prevent scrolling + this._dispatchEvent(e, 'drag', this._dragSource); + if (target != this._lastTarget) { + this._dispatchEvent(this._lastTouch, 'dragleave', this._lastTarget); + this._dispatchEvent(e, 'dragenter', target); + this._lastTarget = target; + } + this._moveImage(e); + this._isDropZone = this._dispatchEvent(e, 'dragover', target); + } + } + }; + DragDropTouch.prototype._touchend = function (e) { + if (this._shouldHandle(e)) { + // see if target wants to handle up + if (this._dispatchEvent(this._lastTouch, 'mouseup', e.target)) { + e.preventDefault(); + return; + } + // user clicked the element but didn't drag, so clear the source and simulate a click + if (!this._img) { + this._dragSource = null; + this._dispatchEvent(this._lastTouch, 'click', e.target); + this._lastClick = Date.now(); + } + // finish dragging + this._destroyImage(); + if (this._dragSource) { + if (e.type.indexOf('cancel') < 0 && this._isDropZone) { + this._dispatchEvent(this._lastTouch, 'drop', this._lastTarget); + } + this._dispatchEvent(this._lastTouch, 'dragend', this._dragSource); + this._reset(); + } + } + }; + // ** utilities + // ignore events that have been handled or that involve more than one touch + DragDropTouch.prototype._shouldHandle = function (e) { + return e && + !e.defaultPrevented && + e.touches && e.touches.length < 2; + }; + + // use regular condition outside of press & hold mode + DragDropTouch.prototype._shouldHandleMove = function (e) { + return !DragDropTouch._ISPRESSHOLDMODE && this._shouldHandle(e); + }; + + // allow to handle moves that involve many touches for press & hold + DragDropTouch.prototype._shouldHandlePressHoldMove = function (e) { + return DragDropTouch._ISPRESSHOLDMODE && + this._isDragEnabled && e && e.touches && e.touches.length; + }; + + // reset data if user drags without pressing & holding + DragDropTouch.prototype._shouldCancelPressHoldMove = function (e) { + return DragDropTouch._ISPRESSHOLDMODE && !this._isDragEnabled && + this._getDelta(e) > DragDropTouch._PRESSHOLDMARGIN; + }; + + // start dragging when specified delta is detected + DragDropTouch.prototype._shouldStartDragging = function (e) { + var delta = this._getDelta(e); + return delta > DragDropTouch._THRESHOLD || + (DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD); + } + + // clear all members + DragDropTouch.prototype._reset = function () { + this._destroyImage(); + this._dragSource = null; + this._lastTouch = null; + this._lastTarget = null; + this._ptDown = null; + this._isDragEnabled = false; + this._isDropZone = false; + this._dataTransfer = new DataTransfer(); + clearInterval(this._pressHoldInterval); + }; + // get point for a touch event + DragDropTouch.prototype._getPoint = function (e, page) { + if (e && e.touches) { + e = e.touches[0]; + } + return { x: page ? e.pageX : e.clientX, y: page ? e.pageY : e.clientY }; + }; + // get distance between the current touch event and the first one + DragDropTouch.prototype._getDelta = function (e) { + if (DragDropTouch._ISPRESSHOLDMODE && !this._ptDown) { return 0; } + var p = this._getPoint(e); + return Math.abs(p.x - this._ptDown.x) + Math.abs(p.y - this._ptDown.y); + }; + // get the element at a given touch event + DragDropTouch.prototype._getTarget = function (e) { + var pt = this._getPoint(e), el = document.elementFromPoint(pt.x, pt.y); + while (el && getComputedStyle(el).pointerEvents == 'none') { + el = el.parentElement; + } + return el; + }; + // create drag image from source element + DragDropTouch.prototype._createImage = function (e) { + // just in case... + if (this._img) { + this._destroyImage(); + } + // create drag image from custom element or drag source + var src = this._imgCustom || this._dragSource; + this._img = src.cloneNode(true); + this._copyStyle(src, this._img); + this._img.style.top = this._img.style.left = '-9999px'; + // if creating from drag source, apply offset and opacity + if (!this._imgCustom) { + var rc = src.getBoundingClientRect(), pt = this._getPoint(e); + this._imgOffset = { x: pt.x - rc.left, y: pt.y - rc.top }; + this._img.style.opacity = DragDropTouch._OPACITY.toString(); + } + // add image to document + this._moveImage(e); + document.body.appendChild(this._img); + }; + // dispose of drag image element + DragDropTouch.prototype._destroyImage = function () { + if (this._img && this._img.parentElement) { + this._img.parentElement.removeChild(this._img); + } + this._img = null; + this._imgCustom = null; + }; + // move the drag image element + DragDropTouch.prototype._moveImage = function (e) { + var _this = this; + requestAnimationFrame(function () { + if (_this._img) { + var pt = _this._getPoint(e, true), s = _this._img.style; + s.position = 'absolute'; + s.pointerEvents = 'none'; + s.zIndex = '999999'; + s.left = Math.round(pt.x - _this._imgOffset.x) + 'px'; + s.top = Math.round(pt.y - _this._imgOffset.y) + 'px'; + } + }); + }; + // copy properties from an object to another + DragDropTouch.prototype._copyProps = function (dst, src, props) { + for (var i = 0; i < props.length; i++) { + var p = props[i]; + dst[p] = src[p]; + } + }; + DragDropTouch.prototype._copyStyle = function (src, dst) { + // remove potentially troublesome attributes + DragDropTouch._rmvAtts.forEach(function (att) { + dst.removeAttribute(att); + }); + // copy canvas content + if (src instanceof HTMLCanvasElement) { + var cSrc = src, cDst = dst; + cDst.width = cSrc.width; + cDst.height = cSrc.height; + cDst.getContext('2d').drawImage(cSrc, 0, 0); + } + // copy style (without transitions) + var cs = getComputedStyle(src); + for (var i = 0; i < cs.length; i++) { + var key = cs[i]; + if (key.indexOf('transition') < 0) { + dst.style[key] = cs[key]; + } + } + dst.style.pointerEvents = 'none'; + // and repeat for all children + for (var i = 0; i < src.children.length; i++) { + this._copyStyle(src.children[i], dst.children[i]); + } + }; + DragDropTouch.prototype._dispatchEvent = function (e, type, target) { + if (e && target) { + var evt = document.createEvent('Event'), t = e.touches ? e.touches[0] : e; + evt.initEvent(type, true, true); + evt.button = 0; + evt.which = evt.buttons = 1; + this._copyProps(evt, e, DragDropTouch._kbdProps); + this._copyProps(evt, t, DragDropTouch._ptProps); + evt.dataTransfer = this._dataTransfer; + target.dispatchEvent(evt); + return evt.defaultPrevented; + } + return false; + }; + // gets an element's closest draggable ancestor + DragDropTouch.prototype._closestDraggable = function (e) { + for (; e; e = e.parentElement) { + if (e.hasAttribute('draggable') && e.draggable) { + return e; + } + } + return null; + }; + return DragDropTouch; + }()); + /*private*/ DragDropTouch._instance = new DragDropTouch(); // singleton + // constants + DragDropTouch._THRESHOLD = 5; // pixels to move before drag starts + DragDropTouch._OPACITY = 0.5; // drag image opacity + DragDropTouch._DBLCLICK = 500; // max ms between clicks in a double click + DragDropTouch._CTXMENU = 900; // ms to hold before raising 'contextmenu' event + DragDropTouch._ISPRESSHOLDMODE = false; // decides of press & hold mode presence + DragDropTouch._PRESSHOLDAWAIT = 400; // ms to wait before press & hold is detected + DragDropTouch._PRESSHOLDMARGIN = 25; // pixels that finger might shiver while pressing + DragDropTouch._PRESSHOLDTHRESHOLD = 0; // pixels to move before drag starts + // copy styles/attributes from drag source to drag image element + DragDropTouch._rmvAtts = 'id,class,style,draggable'.split(','); + // synthesize and dispatch an event + // returns true if the event has been handled (e.preventDefault == true) + DragDropTouch._kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(','); + DragDropTouch._ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY,offsetX,offsetY'.split(','); + DragDropTouch_1.DragDropTouch = DragDropTouch; +})(DragDropTouch || (DragDropTouch = {})); diff --git a/projects/app/src/polyfills/drag-drop-touch/LICENSE b/projects/app/src/polyfills/drag-drop-touch/LICENSE new file mode 100644 index 0000000..906cb40 --- /dev/null +++ b/projects/app/src/polyfills/drag-drop-touch/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Bernardo Castilho + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/projects/app/src/polyfills/drag-drop-touch/README.md b/projects/app/src/polyfills/drag-drop-touch/README.md new file mode 100644 index 0000000..9c202a2 --- /dev/null +++ b/projects/app/src/polyfills/drag-drop-touch/README.md @@ -0,0 +1,76 @@ +# DragDropTouch + +Polyfill that enables HTML5 drag drop support on mobile (touch) devices. + +The HTML5 specification includes support for drag and drop operations. +Unfortunately, most mobile browsers do not implement it, so applications +that rely on HTML5 drag and drop have reduced functionality when running +on mobile devices. + +The DragDropTouch class is a polyfill that translates touch events into +standard HTML5 drag drop events. If you add the polyfill to your pages, +drag and drop operations should work on mobile devices just like they +do on the desktop. + +## Demo + +- [Run Demo](http://bernardo-castilho.github.io/DragDropTouch/demo/index.htm) + +The demo should work on desktop as well as on mobile devices, including +iPads and Android tablets. + +The top section of the demo is based on a well-known HTML5 drag and drop +sample available here: + +The following sections demonstrate how the polyfill works with +standards-based components that use HTML5 drag and drop. You can use +touch to resize and reorder grid columns, data groups, and pivot +fields. + +## Install + +Add the DragDropTouch.js polyfill to your page to enable drag and drop on mobile devices: + +```html + +``` + +Or reference it directly from github: + +```html + +``` + +## Polyfill behaviour + +The **DragDropTouch** polyfill attaches listeners to the document's touch events: + +- On **touchstart**, it checks whether the target element has the draggable attribute + or is contained in an element that does. If that is the case, it saves a reference + to the "drag source" element and prevents the default handling of the event. +- On **touchmove**, it checks whether the touch has moved a certain threshold distance + from the origin. If that is the case, it raises the **dragstart** event and continues + monitoring moves to fire **dragenter** and **dragleave**. +- On **touchend**, it raises the **dragend** and **drop** events. + +To avoid interfering with the automatic browser translation of some touch events into +mouse events, the polyfill performs a few additional tasks: + +- Raise the **mousemove**, **mousedown**, **mouseup**, and **click** events when the + user touches a draggable element but doesn't start dragging, +- Raise the **dblclick** event when there's a new touchstart right after a click, and +- Raise the **contextmenu** event when the touch lasts a while but the user doesn't + start dragging the element. + +## Thanks + +Thanks to Eric Bidelman for the great tutorial on HTML5 drag and drop: [Native HTML5 Drag and Drop](http://www.html5rocks.com/en/tutorials/dnd/basics/). + +Thanks also to Chris Wilson and Paul Kinlan for their article on mouse and touch events: [Touch And Mouse](http://www.html5rocks.com/en/mobile/touchandmouse/). + +Finally, thanks to Tim Ruffles for his iOS shim code which was inspiring: [iOS DragDrop Shim](https://github.com/timruffles/ios-html5-drag-drop-shim). + +## License + +[MIT License](LICENSE) + diff --git a/proxy.config.js b/proxy.config.js index 880b6d8..fcb1740 100644 --- a/proxy.config.js +++ b/proxy.config.js @@ -11,11 +11,15 @@ module.exports = { "Host": "snapshot.tailormap.nl" }, onProxyRes(proxyRes, req) { - const host = req.headers.host; + const defaultLocation = 'http://localhost:4200'; if(proxyRes.headers['location']) { // Rewrite the Location response header for redirects on login/logout (like the Apache ProxyPassReverse directive) - const hostDestination = host.indexOf('localhost:4201') ? 'http://localhost:4201' : 'http://localhost:4200'; - proxyRes.headers['location'] = proxyRes.headers['location'].replace('https://snapshot.tailormap.nl', hostDestination); + proxyRes.headers['location'] = proxyRes.headers['location'].replace('https://snapshot.tailormap.nl', defaultLocation); + } + const origin = req.headers.origin || ''; + if (origin.indexOf(defaultLocation) === -1 && origin.indexOf('localhost') !== -1) { + proxyRes.headers["Access-Control-Allow-Origin"] = req.headers.origin; + proxyRes.headers["Access-Control-Allow-Credentials"] = "true"; } }, } diff --git a/setup-jest.ts b/setup-jest.ts index 825d645..d60bfea 100644 --- a/setup-jest.ts +++ b/setup-jest.ts @@ -1,11 +1,8 @@ import 'jest-preset-angular/setup-jest'; +import '@angular/localize/init'; import './projects/app/src/polyfills'; import '@testing-library/jest-dom'; +import * as failOnConsole from 'jest-fail-on-console'; + +failOnConsole(); -window.ResizeObserver = - window.ResizeObserver || - jest.fn().mockImplementation(() => ({ - disconnect: jest.fn(), - observe: jest.fn(), - unobserve: jest.fn(), - })); diff --git a/tsconfig.json b/tsconfig.json index 203b12b..cb5178a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ { "compileOnSave": false, "compilerOptions": { + "allowSyntheticDefaultImports": true, "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, @@ -17,12 +18,14 @@ "moduleResolution": "node", "importHelpers": true, "skipLibCheck": true, + "resolveJsonModule": true, "target": "ES2022", "module": "es2020", "lib": [ "es2020", "dom" - ] + ], + "useDefineForClassFields": false }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false,