replace vanilla modale with tingle.js

2021-11-22 10:49:09 +01:00 · 2021-11-22 10:49:09 +01:00 · b7e873120f
parent 5389110973
commit b7e873120f
6 changed files with 150 additions and 257 deletions
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@ -1,5 +1,6 @@
@import "app/config";
@import "~wire.css/src/scss/wire";
+@import "~tingle.js/src/tingle.css";
@import 'app/prism';
@import 'app/alert';

@ -686,100 +687,20 @@ $links: (
    }
 }

-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2000;
-    display: none;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    outline: 0;
-}
+.tingle-modal-box--mesh {
+    .tingle-modal-box__content {
+        padding: 0;
+        line-height: 0;

-.modal-header {
-}
-
-.modal-dialog {
-    position: relative;
-    width: 90%;
-    margin: 100px auto;
-    pointer-events: none;
-
-    .modal-header {
-        .close {
-            cursor: pointer;
-            position: absolute;
-            right: 15px;
-            top: 13px;
-            width: 30px;
-            height: 30px;
-            z-index: 1000 + 4;
-
-            &:hover::before, &:hover::after {
-                background-color: #333;
-            }
-
-            &:before, &:after {
-                position: absolute;
-                left: 15px;
-                content: ' ';
-                height: 30px;
-                width: 2px;
-                background-color: #333;
-                z-index: 2001;
-                ransition-property: background-color;
-                transition-duration: 0.3s;
-            }
-
-            &:before {
-                transform: rotate(45deg);
-            }
-
-            &:after {
-                transform: rotate(-45deg);
-            }
+        iframe {
+            margin: 0;
+            padding: 0;
+            height: 90vh;
+            width: 100%;
        }
    }
 }

-.modal-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    pointer-events: auto;
-    background-color: #fff;
-    background-clip: padding-box;
-    outline: 0;
-}
-
-.modal-backdrop {
-    position: fixed;
-    display: none;
-    top: 0;
-    left: 0;
-    z-index: 1999;
-    width: 100vw;
-    height: 100vh;
-    background-color: #333;
-    opacity: 0.89;
-}
-
-.modal-body {
-    position: relative;
-    flex: 1 1 auto;
-    padding: 0;
-    height: calc(100vh - 300px);
-
-    iframe {
-        border: 0;
-        height: 100%;
-        width: 100%;
-    }
-}
-
 .meshes {
    padding: 0 20px 20px 20px;
 }
--- a/assets/js/app/mesh-viewer.js
+++ b/assets/js/app/mesh-viewer.js
@ -1,22 +1,11 @@
+const tingle = require('tingle.js/src/tingle.js')
+
 const MeshViewer = function (w) {
  this.window = w
 }

 MeshViewer.prototype.init = function () {
  const openers = this.window.document.querySelectorAll('*[data-modal]')
-  const backdrop = this.window.document.querySelector('.modal-backdrop')
-  const body = this.window.document.querySelector('body')
-  const that = this
-
-  body.addEventListener('keyup', (e) => {
-    if (e.keyCode === 27) {
-      const closer = that.window.document.querySelector('#mesh-viewer .close')
-
-      if (closer) {
-        closer.dispatchEvent(new Event('click'))
-      }
-    }
-  })

  for (let i = 0, len = openers.length; i < len; i++) {
    openers[i].addEventListener('click', (e) => {
@ -28,24 +17,16 @@ MeshViewer.prototype.init = function () {
        target = target.parentNode
      }

-      const modal = this.window.document.querySelector('#mesh-viewer')
-      const modalBody = modal.querySelector('.modal-body')
-
-      modal.style.display = 'block'
-      modal.classList.add('show')
-
-      modalBody.innerHTML = '<iframe src="' + target.getAttribute('href') + '"></iframe>'
-
-      body.classList.add('modal-open')
-      backdrop.style.display = 'block'
-
-      modal.querySelector('.close').addEventListener('click', () => {
-        modal.style.display = 'none'
-        modal.classList.remove('show')
-        body.classList.remove('modal-open')
-        backdrop.style.display = 'none'
-        modalBody.innerHTML = ''
+      const modal = new tingle.modal({
+        footer: false,
+        stickyFooter: false,
+        closeMethods: ['overlay', 'button', 'escape'],
+        closeLabel: 'Close',
+        cssClass: ['tingle-modal-box--mesh']
      })
+
+      modal.setContent('<iframe src="' + target.getAttribute('href') + '"></iframe>')
+      modal.open()
    })
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -1467,7 +1467,9 @@
            }
        },
        "@fortawesome/fontawesome-free": {
-            "version": "5.15.2"
+            "version": "5.15.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
+            "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
        },
        "@nodelib/fs.scandir": {
            "version": "2.1.5",
@ -1554,6 +1556,8 @@
        },
        "@symfony/stimulus-bridge": {
            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@symfony/stimulus-bridge/-/stimulus-bridge-2.0.2.tgz",
+            "integrity": "sha512-n3Ku/mLv825v6+O38WO2U0wkuYL2BA1175cBLg+v8OjE51ujWmXTS9dOBpHjQyo6ETexGpArWH9KcVkkCkA7GA==",
            "dev": true,
            "requires": {
                "acorn": "^8.0.5"
@ -1569,6 +1573,8 @@
        },
        "@symfony/webpack-encore": {
            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-1.1.2.tgz",
+            "integrity": "sha512-RkgMBfU3ZliPcvCI/68Rh2qCd1LHZ5HcwSUZifErTWaNigrdK+kSbOkA6JOPbO0DI6w0PiVK3GZU5hv2aC1z3A==",
            "dev": true,
            "requires": {
                "@babel/core": "^7.7.0",
@ -1732,90 +1738,6 @@
                }
            }
        },
-        "@typescript-eslint/parser": {
-            "version": "4.27.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.27.0.tgz",
-            "integrity": "sha512-XpbxL+M+gClmJcJ5kHnUpBGmlGdgNvy6cehgR6ufyxkEJMGP25tZKCaKyC0W/JVpuhU3VU1RBn7SYUPKSMqQvQ==",
-            "dev": true,
-            "requires": {
-                "@typescript-eslint/scope-manager": "4.27.0",
-                "@typescript-eslint/types": "4.27.0",
-                "@typescript-eslint/typescript-estree": "4.27.0",
-                "debug": "^4.3.1"
-            }
-        },
-        "@typescript-eslint/scope-manager": {
-            "version": "4.27.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.27.0.tgz",
-            "integrity": "sha512-DY73jK6SEH6UDdzc6maF19AHQJBFVRf6fgAXHPXCGEmpqD4vYgPEzqpFz1lf/daSbOcMpPPj9tyXXDPW2XReAw==",
-            "dev": true,
-            "requires": {
-                "@typescript-eslint/types": "4.27.0",
-                "@typescript-eslint/visitor-keys": "4.27.0"
-            }
-        },
-        "@typescript-eslint/types": {
-            "version": "4.27.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.27.0.tgz",
-            "integrity": "sha512-I4ps3SCPFCKclRcvnsVA/7sWzh7naaM/b4pBO2hVxnM3wrU51Lveybdw5WoIktU/V4KfXrTt94V9b065b/0+wA==",
-            "dev": true
-        },
-        "@typescript-eslint/typescript-estree": {
-            "version": "4.27.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.27.0.tgz",
-            "integrity": "sha512-KH03GUsUj41sRLLEy2JHstnezgpS5VNhrJouRdmh6yNdQ+yl8w5LrSwBkExM+jWwCJa7Ct2c8yl8NdtNRyQO6g==",
-            "dev": true,
-            "requires": {
-                "@typescript-eslint/types": "4.27.0",
-                "@typescript-eslint/visitor-keys": "4.27.0",
-                "debug": "^4.3.1",
-                "globby": "^11.0.3",
-                "is-glob": "^4.0.1",
-                "semver": "^7.3.5",
-                "tsutils": "^3.21.0"
-            },
-            "dependencies": {
-                "globby": {
-                    "version": "11.0.3",
-                    "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
-                    "integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
-                    "dev": true,
-                    "requires": {
-                        "array-union": "^2.1.0",
-                        "dir-glob": "^3.0.1",
-                        "fast-glob": "^3.1.1",
-                        "ignore": "^5.1.4",
-                        "merge2": "^1.3.0",
-                        "slash": "^3.0.0"
-                    }
-                },
-                "ignore": {
-                    "version": "5.1.8",
-                    "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-                    "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-                    "dev": true
-                },
-                "semver": {
-                    "version": "7.3.5",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-                    "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-                    "dev": true,
-                    "requires": {
-                        "lru-cache": "^6.0.0"
-                    }
-                }
-            }
-        },
-        "@typescript-eslint/visitor-keys": {
-            "version": "4.27.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.27.0.tgz",
-            "integrity": "sha512-es0GRYNZp0ieckZ938cEANfEhsfHrzuLrePukLKtY3/KPXcq1Xd555Mno9/GOgXhKzn0QfkDLVgqWO3dGY80bg==",
-            "dev": true,
-            "requires": {
-                "@typescript-eslint/types": "4.27.0",
-                "eslint-visitor-keys": "^2.0.0"
-            }
-        },
        "@vue/component-compiler-utils": {
            "version": "3.2.2",
            "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.2.tgz",
@ -2350,6 +2272,8 @@
        },
        "axios": {
            "version": "0.21.1",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+            "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
            "requires": {
                "follow-redirects": "^1.10.0"
            }
@ -2547,7 +2471,9 @@
            "dev": true
        },
        "bootstrap": {
-            "version": "4.6.0"
+            "version": "4.6.0",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+            "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
        },
        "brace-expansion": {
            "version": "1.1.11",
@ -2801,6 +2727,8 @@
        },
        "choices.js": {
            "version": "9.0.1",
+            "resolved": "https://registry.npmjs.org/choices.js/-/choices.js-9.0.1.tgz",
+            "integrity": "sha512-JgpeDY0Tmg7tqY6jaW/druSklJSt7W68tXFJIw0GSGWmO37SDAL8o60eICNGbzIODjj02VNNtf5h6TgoHDtCsA==",
            "requires": {
                "deepmerge": "^4.2.0",
                "fuse.js": "^3.4.5",
@ -3171,6 +3099,8 @@
        },
        "core-js": {
            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz",
+            "integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==",
            "dev": true
        },
        "core-js-compat": {
@ -4076,6 +4006,8 @@
        },
        "eslint": {
            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
+            "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
            "dev": true,
            "requires": {
                "@babel/code-frame": "7.12.11",
@ -4203,14 +4135,6 @@
            "integrity": "sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==",
            "dev": true
        },
-        "eslint-config-standard-with-typescript": {
-            "version": "20.0.0",
-            "dev": true,
-            "requires": {
-                "@typescript-eslint/parser": "^4.0.0",
-                "eslint-config-standard": "^16.0.0"
-            }
-        },
        "eslint-import-resolver-node": {
            "version": "0.3.4",
            "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
@ -4311,6 +4235,16 @@
                }
            }
        },
+        "eslint-plugin-es": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz",
+            "integrity": "sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==",
+            "dev": true,
+            "requires": {
+                "eslint-utils": "^2.0.0",
+                "regexpp": "^3.0.0"
+            }
+        },
        "eslint-plugin-import": {
            "version": "2.23.4",
            "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.4.tgz",
@ -4466,12 +4400,44 @@
                }
            }
        },
-        "eslint-plugin-standard": {
-            "version": "5.0.0",
+        "eslint-plugin-node": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
+            "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==",
+            "dev": true,
+            "requires": {
+                "eslint-plugin-es": "^3.0.0",
+                "eslint-utils": "^2.0.0",
+                "ignore": "^5.1.1",
+                "minimatch": "^3.0.4",
+                "resolve": "^1.10.1",
+                "semver": "^6.1.0"
+            },
+            "dependencies": {
+                "ignore": {
+                    "version": "5.1.9",
+                    "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.9.tgz",
+                    "integrity": "sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==",
+                    "dev": true
+                },
+                "semver": {
+                    "version": "6.3.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+                    "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+                    "dev": true
+                }
+            }
+        },
+        "eslint-plugin-promise": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-5.1.1.tgz",
+            "integrity": "sha512-XgdcdyNzHfmlQyweOPTxmc7pIsS6dE4MvwhXWMQ2Dxs1XAL2GJDilUsjWen6TWik0aSI+zD/PqocZBblcm9rdA==",
            "dev": true
        },
        "eslint-plugin-vue": {
            "version": "7.11.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.11.1.tgz",
+            "integrity": "sha512-lbw3vkEAGqYjqd1HpPFWHXtYaS8mILTJ5KOpJfRxO3Fo7o0wCf1zD7vSOasbm6nTA9xIgvZQ4VcyGIzQXxznHw==",
            "dev": true,
            "requires": {
                "eslint-utils": "^2.1.0",
@ -4797,6 +4763,8 @@
        },
        "file-loader": {
            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+            "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
            "dev": true,
            "requires": {
                "loader-utils": "^2.0.0",
@ -4865,7 +4833,9 @@
            }
        },
        "flag-icon-css": {
-            "version": "3.5.0"
+            "version": "3.5.0",
+            "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-3.5.0.tgz",
+            "integrity": "sha512-pgJnJLrtb0tcDgU1fzGaQXmR8h++nXvILJ+r5SmOXaaL/2pocunQo2a8TAXhjQnBpRLPtZ1KCz/TYpqeNuE2ew=="
        },
        "flat-cache": {
            "version": "3.0.4",
@ -4889,7 +4859,9 @@
            }
        },
        "flatpickr": {
-            "version": "4.6.9"
+            "version": "4.6.9",
+            "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.9.tgz",
+            "integrity": "sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw=="
        },
        "flatted": {
            "version": "3.1.1",
@ -5912,7 +5884,9 @@
            }
        },
        "jquery": {
-            "version": "3.6.0"
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
        },
        "js-base64": {
            "version": "2.6.4",
@ -6155,7 +6129,9 @@
            }
        },
        "lozad": {
-            "version": "1.16.0"
+            "version": "1.16.0",
+            "resolved": "https://registry.npmjs.org/lozad/-/lozad-1.16.0.tgz",
+            "integrity": "sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w=="
        },
        "lru-cache": {
            "version": "6.0.0",
@ -6556,6 +6532,8 @@
        },
        "node-sass": {
            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+            "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
            "dev": true,
            "requires": {
                "async-foreach": "^0.1.3",
@ -7013,10 +6991,14 @@
            "dev": true
        },
        "particles.js": {
-            "version": "2.0.0"
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/particles.js/-/particles.js-2.0.0.tgz",
+            "integrity": "sha1-IThsQyjWx/lngKIB6W7t/AnHNvY="
        },
        "particlesjs": {
-            "version": "2.2.3"
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/particlesjs/-/particlesjs-2.2.3.tgz",
+            "integrity": "sha512-f0rL80Agqdsrnv/uhlLewv+LMdiXHu9MYPzMv0ZLPM06nLx3zmAXMH882fxqO6Uzb91csli8WlWaYd2XPN0d/Q=="
        },
        "path-exists": {
            "version": "3.0.0",
@ -7153,7 +7135,9 @@
            }
        },
        "popper.js": {
-            "version": "1.16.1"
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
        },
        "portfinder": {
            "version": "1.0.28",
@ -8635,6 +8619,8 @@
        },
        "prismjs": {
            "version": "1.23.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
+            "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
            "requires": {
                "clipboard": "^2.0.0"
            }
@ -8692,7 +8678,9 @@
            "dev": true
        },
        "qrcodejs": {
-            "version": "1.0.0"
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/qrcodejs/-/qrcodejs-1.0.0.tgz",
+            "integrity": "sha1-r6tenoWFIfhZrjNtLtD5/S52zKc="
        },
        "qs": {
            "version": "6.7.0",
@ -9305,6 +9293,8 @@
        },
        "sass-loader": {
            "version": "11.0.1",
+            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.0.1.tgz",
+            "integrity": "sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==",
            "dev": true,
            "requires": {
                "klona": "^2.0.4",
@ -9569,6 +9559,8 @@
        },
        "simplemde": {
            "version": "1.11.2",
+            "resolved": "https://registry.npmjs.org/simplemde/-/simplemde-1.11.2.tgz",
+            "integrity": "sha1-ojo12XjSxA7wfewAjJLwcNjggOM=",
            "requires": {
                "codemirror": "*",
                "codemirror-spell-checker": "*",
@ -9655,7 +9647,9 @@
            }
        },
        "sortablejs": {
-            "version": "1.13.0"
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+            "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
        },
        "source-list-map": {
            "version": "2.0.1",
@ -9837,6 +9831,8 @@
        },
        "stimulus": {
            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/stimulus/-/stimulus-2.0.0.tgz",
+            "integrity": "sha512-xipy7BS5TVpg4fX6S8LhrYZp7cmHGjmk09WSAiVx1gF5S5g43IWsuetfUhIk8HfHUG+4MQ9nY0FQz4dRFLs/8w==",
            "dev": true,
            "requires": {
                "@stimulus/core": "^2.0.0",
@ -10225,7 +10221,9 @@
            "optional": true
        },
        "tinymce": {
-            "version": "5.7.1"
+            "version": "5.7.1",
+            "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.7.1.tgz",
+            "integrity": "sha512-1gY8RClc734srSlkYwY0MQzmkS1j73PuPC+nYtNtrrQVPY9VNcZ4bOiRwzTbdjPPD8GOtv6BAk8Ww/H2RiqKpA=="
        },
        "tmp": {
            "version": "0.2.1",
@ -10313,21 +10311,6 @@
                }
            }
        },
-        "tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-            "dev": true
-        },
-        "tsutils": {
-            "version": "3.21.0",
-            "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-            "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-            "dev": true,
-            "requires": {
-                "tslib": "^1.8.1"
-            }
-        },
        "tunnel-agent": {
            "version": "0.6.0",
            "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@ -10571,7 +10554,9 @@
            }
        },
        "vanillajs-datepicker": {
-            "version": "1.1.4"
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/vanillajs-datepicker/-/vanillajs-datepicker-1.1.4.tgz",
+            "integrity": "sha512-XJhvRx+VqtRjqrPlgNCQntLpCntFKPMBd8ahxZhLkvrWX0bNdpP3kz5j13L2Q0xfTAY/QMfQtVZvBvRF0NilcA=="
        },
        "vary": {
            "version": "1.1.2",
@ -10597,7 +10582,9 @@
            }
        },
        "vue": {
-            "version": "2.6.14"
+            "version": "2.6.14",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
+            "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
        },
        "vue-eslint-parser": {
            "version": "7.6.0",
@ -10640,6 +10627,8 @@
        },
        "vue-loader": {
            "version": "15.9.7",
+            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.7.tgz",
+            "integrity": "sha512-qzlsbLV1HKEMf19IqCJqdNvFJRCI58WNbS6XbPqK13MrLz65es75w392MSQ5TsARAfIjUw+ATm3vlCXUJSOH9Q==",
            "dev": true,
            "requires": {
                "@vue/component-compiler-utils": "^3.1.0",
@ -10687,6 +10676,8 @@
        },
        "vue-template-compiler": {
            "version": "2.6.14",
+            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
+            "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==",
            "dev": true,
            "requires": {
                "de-indent": "^1.0.2",
@ -10945,6 +10936,8 @@
        },
        "webpack-notifier": {
            "version": "1.13.0",
+            "resolved": "https://registry.npmjs.org/webpack-notifier/-/webpack-notifier-1.13.0.tgz",
+            "integrity": "sha512-QLk6l/TZKGhyN6Hd1zobaiYno7S9YPX3wH86+YOSufHes77SegGhnGdj+4vrLDFK5A4ZKoQD5GRXXFnM0h0N8A==",
            "dev": true,
            "requires": {
                "node-notifier": "^9.0.0",
@ -11037,7 +11030,9 @@
            "dev": true
        },
        "wire.css": {
-            "version": "1.2.5"
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/wire.css/-/wire.css-1.2.5.tgz",
+            "integrity": "sha1-N23egdAV9bmWsA/Dhczn9mlfdt8="
        },
        "word-wrap": {
            "version": "1.2.3",
@ -11177,7 +11172,9 @@
            "dev": true
        },
        "zxcvbn": {
-            "version": "4.4.2"
+            "version": "4.4.2",
+            "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+            "integrity": "sha1-KOwXzwl0PtyrBW3dixsGJizHPDA="
        }
    }
 }
--- a/package.json
+++ b/package.json
@ -42,6 +42,7 @@
        "qrcodejs": "^1.0.0",
        "simplemde": "^1.11.2",
        "sortablejs": "^1.14.0",
+        "tingle.js": "^0.16.0",
        "tinymce": "^5.7.1",
        "vanillajs-datepicker": "^1.1.4",
        "vue": "^2.6.14",
--- a/templates/page/mesh/default.html.twig
+++ b/templates/page/mesh/default.html.twig
@ -65,24 +65,12 @@
        </div>
    </div>

-    <div class="modal" id="mesh-viewer">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <span class="close"></span>
-                </div>
-                <div class="modal-body">
-                </div>
-            </div>
-        </div>
-    </div>
-
    {% if pager.getPaginationData.pageCount > 1 %}
        <div class="col-12">
            <div class="body">
                <div class="pager align-right">
                    {% block pager %}
-           {{ include('module/_pager.html.twig', {
+                        {{ include('module/_pager.html.twig', {
                            route: _node.routeName,
                            routeParams: {},
                            pages: pager.paginationData.endPage,
--- a/yarn.lock
+++ b/yarn.lock
@ -6557,6 +6557,11 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

+tingle.js@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/tingle.js/-/tingle.js-0.16.0.tgz#1ac35f91315271c47cb6bb7299d0b327ac7539ea"
+  integrity sha512-xV4F2j7+QMxDfzuX59KhxiWKeAgI/QSC8o7k9rQu8hZD8TZefMTViq7l07DIcVDb30IlAPlyFRs6SnD1Fup6hA==
+
 tiny-emitter@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"