测试

frontend/node_modules/resize-detector/CHANGELOG.md

@@ -0,0 +1,45 @@
+## 0.3.0
+
+* Run through buble for ESM output.
+* Update deps.
+
+## 0.2.2
+
+* Stop resize triggers from triggering pointer events.
+
+## 0.2.1
+
+* Callback now receives the target element as the first argument.
+
+## 0.2.0
+
+* Support removing listeners without callbacks to remove all listeners on an element.
+* Fix removing listeners in IE.
+
+## 0.1.10
+
+* Check for listeners before running callbacks.
+
+## 0.1.9
+
+* Check for listeners before destroy.
+
+## 0.1.8
+
+* Fix compatibility issue for `getComputedStyle` in older versions of Firefox.
+
+## 0.1.7
+
+* Add initial size diff for `ResizeObserver`.
+
+## 0.1.6
+
+* When attaching `ResizeObserver`, do not skip first callback for initially hidden elements.
+
+## 0.1.5
+
+* Fix documentation.
+
+## 0.1.4
+
+* Skip first callback when using `ResizeObserver`.

frontend/node_modules/resize-detector/LICENSE

@@ -0,0 +1,43 @@
+MIT License
+
+Copyright (c) 2018-present, GU Yiling.
+
+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.
+
+
+The MIT License (MIT)
+
+Copyright (c) 2013 Sebastián Décima
+
+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.

frontend/node_modules/resize-detector/README.md

@@ -0,0 +1,215 @@
+# Resize Detector
+
+This project is basically a modified version of [sdecima/javascript-detect-element-resize](#sdecimajavascript-detect-element-resize) including these changes:
+
+* Try to utilize native `ResizeObserver` first.
+* Adopt Mutation-based approach to track detaching/attaching in both DOM trees and render trees (see [que-etc/resize-observer-polyfill](//github.com/que-etc/resize-observer-polyfill)).
+* Use ES Modules.
+* Put most CSS content inside a separate `.css` file.
+* Drop support for IE8 and below.
+* Make the package available from npm.
+
+## Installation
+
+```bash
+$ npm i --save resize-detector
+```
+
+## Usage
+
+```js
+import { addListener, removeListener } from 'resize-detector'
+
+// adding listener
+addListener(elem, callback)
+
+// removing listener, callback can be omitted to indicate that
+// all event listeners should be removed
+removeListener(elem, callback)
+```
+
+*`this` inside `callback` function is the element whose size has been changed, also `callback` receive element as first argument.*
+
+### Heads up
+
+As `resize-detector` is published in both ES Module & CommonJS format and when you use webpack to bundle your app, the ESM version will be imported. It is not transpiled by Babel or similar tools so you have to transpile it in your build process.
+
+For webpack with babe-loader you need to add it to the `include` field of the options:
+
+```js
+// ...
+{
+  test: /\.js$/,
+  loader: 'babel-loader',
+  include: [
+    // other stuff to be transpiled
+    // ...
+    path.resolve('node_modules/resize-detector')
+  ]
+}
+// ...
+```
+
+If you are using other toolchain, just configure your bundler similarly so that `resize-detector` will be transpiled during build process.
+
+---
+
+## Limitations and caveats
+
+- **Is polyfill?**
+
+  No.
+
+- **Native first**
+
+  Yes.
+
+- **Strategy**
+
+  Scroll-based + Mutation-based.
+
+- **Pros**
+
+  * Small size.
+  * Minimal limitations.
+
+- **Side effects**
+
+  * Targets with `position: static` will become `position: relative`.
+  * Several hidden elements will be injected into the target elements.
+
+## Comparison with other projects
+
+### [sdecima/javascript-detect-element-resize](//github.com/sdecima/javascript-detect-element-resize)
+
+- **Is polyfill?**
+
+  No.
+
+- **Native first**
+
+  No.
+
+- **Strategy**
+
+  Scroll-based.
+
+- **Pros**
+
+  * Small size.
+  * Higher performance comparing to hidden `<object>`s.
+  * Compatible with down to IE7.
+
+- **Side effects**
+
+  * Targets with `position: static` will become `position: relative`.
+  * Several hidden elements will be injected into the target elements.
+
+- **Limitations**
+
+  * Cannot track detach/attach or visibility change on IE10 and below.
+
+### [que-etc/resize-observer-polyfill](//github.com/que-etc/resize-observer-polyfill)
+
+- **Is polyfill**
+
+  Yes.
+
+- **Native first**
+
+  Yes.
+
+- **Fallback Strategy**
+
+  Use `MutationObserver` to observe every mutation in a document. For IE9/10, use Mutation Events instead.
+
+- **Pros**
+
+  * Small size.
+  * Minimal side effects on target elements.
+  * Can track detaching/attaching in both DOM trees and render trees as soon as it's triggered by DOM mutation.
+
+- **Limitations**
+
+  * Need extra transition event handling to catch size change from user interaction pseudo classes like `:hover`.
+  * Delayed transitions will receive only one notification with the latest dimensions of an element.
+
+### [developit/simple-element-resize-detector](//github.com/developit/simple-element-resize-detector)
+
+- **Is polyfill**
+
+  No.
+
+- **Native first**
+
+  No.
+
+- **Strategy**
+
+  Listen to `resize` events via hidden `<iframe>`s.
+
+- **Pros**
+
+  Dead simple.
+
+- **Side effects**
+
+  * Targets with `position: static` will become `position: relative`.
+  * Several hidden elements will be injected into the target elements.
+  * Relatively low performance.
+
+- **Limitations**
+
+  * Inapplicable for void elements.
+  * Cannot track detach/attach or visibility change.
+
+### [pelotoncycle/resize-observer](//github.com/pelotoncycle/resize-observer)
+
+- **Is polyfill?**
+
+  Yes.
+
+- **Native first**
+
+  Yes.
+
+- **Fallback Strategy**
+
+  Long polling through `requestAnimationFrame` or `setTimeout`.
+
+- **Pros**
+
+  Dead simple.
+
+- **Side effects**
+
+  * Might be not so performant by checking rendered sizes in each animation frame.
+
+### [wnr/element-resize-detector](//github.com/wnr/element-resize-detector)
+
+- **Is polyfill?**
+
+  No.
+
+- **Native first**
+
+  No.
+
+- **Strategy**
+
+  Either hidden `<object>`s or scroll-based.
+
+- **Pros**
+
+  Two approaches available (Really, why?) with scroll-based approach being much faster than hidden `<object>`s.
+
+- **Side effects**
+
+  * Targets with `position: static` will become `position: relative`.
+  * Several hidden elements will be injected into the target elements.
+
+- **Limitations**
+
+  * Package size is relatively large.
+  * Inapplicable for void elements.
+  * Cannot track detach/attach or visibility change.

frontend/node_modules/resize-detector/demo/index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<title>Resize Detector</title>
+<style>
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 12px;
+  color: #999;
+}
+
+#container {
+  width: 600px;
+}
+
+#pusher {
+  float: left;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  background: #eee;
+  cursor: pointer;
+  transition: width 2s, background-color .3s;
+}
+
+#pusher:hover {
+  width: 300px;
+}
+
+:checked + #pusher {
+  width: 400px;
+  background: #eec;
+}
+
+#el {
+  position: relative;
+  overflow: hidden;
+  height: 100px;
+  background: #9ca;
+  line-height: 100px;
+  text-align: center;
+  color: #fff;
+  font-weight: 700;
+}
+
+#wrapper {
+  width: 300px;
+  height: 200px;
+  transition: width .5s;
+}
+
+#wrapper.expanded {
+  width: 450px;
+}
+
+#r1,
+#r2 {
+  width: 100%;
+  height: 100px;
+}
+
+#r1 {
+  background: #acc;
+}
+#r2 {
+  background: #cca;
+}
+
+#output {
+  white-space: pre-wrap;
+}
+
+.log {
+  display: inline-block;
+  padding: 2px 5px;
+  margin: 0 1px 1px 0;
+  background-color: #cce;
+}
+</style>
+</head>
+<body>
+<p><label id="attach"><input type="checkbox" checked> Attached</button></label></p>
+<p><label id="display"><input type="checkbox"><code>display: none</code></label></p>
+<div id="container">
+  <input id="push" type="checkbox" style="display: none">
+  <label id="pusher" for="push">Hover or Click</label>
+  <div id="el">&rarr; Resize Detector Enabled &larr;</div>
+</div>
+<section id="wrapper">
+  <div id="r1"></div>
+  <div id="r2"></div>
+</section>
+<pre id="output"></pre>
+<script src="../dist/index.js"></script>
+<script>
+var el = document.getElementById('el')
+var container = document.getElementById('container')
+var attach = document.getElementById('attach')
+var wrapper = document.getElementById('wrapper')
+var r1 = document.getElementById('r1')
+var r2 = document.getElementById('r2')
+var display = document.getElementById('display')
+var output = document.getElementById('output')
+
+function log (msg) {
+  output.innerHTML += `<span class="log">${msg}</span>`
+}
+
+resizeDetector.addListener(el, function () {
+  log(el.offsetWidth + '×' + el.offsetHeight)
+})
+
+attach.addEventListener('change', function () {
+  var input = attach.firstElementChild
+  if (input.checked) {
+    container.appendChild(el)
+  } else {
+    container.removeChild(el)
+  }
+})
+
+display.addEventListener('change', function () {
+  var input = display.firstElementChild
+  if (input.checked) {
+    el.style.display = 'none'
+  } else {
+    el.style.display = ''
+  }
+})
+
+wrapper.addEventListener('click', function () {
+  wrapper.classList.toggle('expanded')
+})
+
+resizeDetector.addListener(r1, function () {
+  log('r1: resize')
+})
+
+resizeDetector.addListener(r2, function () {
+  log('r2: resize')
+})
+</script>
+</body>
+</html>

frontend/node_modules/resize-detector/dist/index.js

@@ -0,0 +1 @@
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((e=e||self).resizeDetector={})}(this,(function(e){"use strict";var r=null;var t=null;function i(e,r){void 0===r&&(r={});var t=document.createElement(e);return Object.keys(r).forEach((function(e){t[e]=r[e]})),t}function _(e,r,t){return(window.getComputedStyle(e,t||null)||{display:"none"})[r]}function n(e){if(!document.documentElement.contains(e))return{detached:!0,rendered:!1};for(var r=e;r!==document;){if("none"===_(r,"display"))return{detached:!1,rendered:!1};r=r.parentNode}return{detached:!1,rendered:!0}}var s=0,o=null;function d(){var e=n(this),r=e.rendered,t=e.detached;r!==this.__resize_rendered__&&(!t&&this.__resize_triggers__&&(c(this),this.addEventListener("scroll",a,!0)),this.__resize_rendered__=r,l(this))}function a(){var e,i,_=this;c(this),this.__resize_raf__&&(e=this.__resize_raf__,t||(t=(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}).bind(window)),t(e)),this.__resize_raf__=(i=function(){var e,r,t,i,n,s,o=(r=(e=_).__resize_last__,t=r.width,i=r.height,n=e.offsetWidth,s=e.offsetHeight,n!==t||s!==i?{width:n,height:s}:null);o&&(_.__resize_last__=o,l(_))},r||(r=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){return setTimeout(e,16)}).bind(window)),r(i))}function l(e){e&&e.__resize_listeners__&&e.__resize_listeners__.forEach((function(r){r.call(e,e)}))}function c(e){var r=e.__resize_triggers__,t=r.expand,i=r.expandChild,_=r.contract,n=_.scrollWidth,s=_.scrollHeight,o=t.offsetWidth,d=t.offsetHeight,a=t.scrollWidth,l=t.scrollHeight;_.scrollLeft=n,_.scrollTop=s,i.style.width=o+1+"px",i.style.height=d+1+"px",t.scrollLeft=a,t.scrollTop=l}e.addListener=function(e,r){if(e.__resize_mutation_handler__||(e.__resize_mutation_handler__=d.bind(e)),!e.__resize_listeners__)if(e.__resize_listeners__=[],window.ResizeObserver){var t=e.offsetWidth,h=e.offsetHeight,u=new ResizeObserver((function(){(e.__resize_observer_triggered__||(e.__resize_observer_triggered__=!0,e.offsetWidth!==t||e.offsetHeight!==h))&&l(e)})),f=n(e),z=f.detached,v=f.rendered;e.__resize_observer_triggered__=!1===z&&!1===v,e.__resize_observer__=u,u.observe(e)}else if(e.attachEvent&&e.addEventListener)e.__resize_legacy_resize_handler__=function(){l(e)},e.attachEvent("onresize",e.__resize_legacy_resize_handler__),document.addEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);else if(s||(o=function(e){var r=document.createElement("style");return r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e)),(document.querySelector("head")||document.body).appendChild(r),r}('.resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}')),function(e){var r=_(e,"position");r&&"static"!==r||(e.style.position="relative");e.__resize_old_position__=r,e.__resize_last__={};var t=i("div",{className:"resize-triggers"}),n=i("div",{className:"resize-expand-trigger"}),s=i("div"),o=i("div",{className:"resize-contract-trigger"});n.appendChild(s),t.appendChild(n),t.appendChild(o),e.appendChild(t),e.__resize_triggers__={triggers:t,expand:n,expandChild:s,contract:o},c(e),e.addEventListener("scroll",a,!0),e.__resize_last__={width:e.offsetWidth,height:e.offsetHeight}}(e),e.__resize_rendered__=n(e).rendered,window.MutationObserver){var g=new MutationObserver(e.__resize_mutation_handler__);g.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.__resize_mutation_observer__=g}e.__resize_listeners__.push(r),s++},e.removeListener=function(e,r){var t=e.__resize_listeners__;if(t){if(r&&t.splice(t.indexOf(r),1),!t.length||!r){if(e.detachEvent&&e.removeEventListener)return e.detachEvent("onresize",e.__resize_legacy_resize_handler__),void document.removeEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);e.__resize_observer__?(e.__resize_observer__.unobserve(e),e.__resize_observer__.disconnect(),e.__resize_observer__=null):(e.__resize_mutation_observer__&&(e.__resize_mutation_observer__.disconnect(),e.__resize_mutation_observer__=null),e.removeEventListener("scroll",a),e.removeChild(e.__resize_triggers__.triggers),e.__resize_triggers__=null),e.__resize_listeners__=null}!--s&&o&&o.parentNode.removeChild(o)}},Object.defineProperty(e,"__esModule",{value:!0})}));

frontend/node_modules/resize-detector/esm/index.js

@@ -0,0 +1,314 @@
+var raf = null;
+function requestAnimationFrame (callback) {
+  if (!raf) {
+    raf = (
+      window.requestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      function (callback) {
+        return setTimeout(callback, 16)
+      }
+    ).bind(window);
+  }
+  return raf(callback)
+}
+
+var caf = null;
+function cancelAnimationFrame (id) {
+  if (!caf) {
+    caf = (
+      window.cancelAnimationFrame ||
+      window.webkitCancelAnimationFrame ||
+      window.mozCancelAnimationFrame ||
+      function (id) {
+        clearTimeout(id);
+      }
+    ).bind(window);
+  }
+
+  caf(id);
+}
+
+function createStyles (styleText) {
+  var style = document.createElement('style');
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = styleText;
+  } else {
+    style.appendChild(document.createTextNode(styleText));
+  }
+  (document.querySelector('head') || document.body).appendChild(style);
+  return style
+}
+
+function createElement (tagName, props) {
+  if ( props === void 0 ) props = {};
+
+  var elem = document.createElement(tagName);
+  Object.keys(props).forEach(function (key) {
+    elem[key] = props[key];
+  });
+  return elem
+}
+
+function getComputedStyle (elem, prop, pseudo) {
+  // for older versions of Firefox, `getComputedStyle` required
+  // the second argument and may return `null` for some elements
+  // when `display: none`
+  var computedStyle = window.getComputedStyle(elem, pseudo || null) || {
+    display: 'none'
+  };
+
+  return computedStyle[prop]
+}
+
+function getRenderInfo (elem) {
+  if (!document.documentElement.contains(elem)) {
+    return {
+      detached: true,
+      rendered: false
+    }
+  }
+
+  var current = elem;
+  while (current !== document) {
+    if (getComputedStyle(current, 'display') === 'none') {
+      return {
+        detached: false,
+        rendered: false
+      }
+    }
+    current = current.parentNode;
+  }
+
+  return {
+    detached: false,
+    rendered: true
+  }
+}
+
+var css_248z = ".resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:\"\";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}";
+
+var total = 0;
+var style = null;
+
+function addListener (elem, callback) {
+  if (!elem.__resize_mutation_handler__) {
+    elem.__resize_mutation_handler__ = handleMutation.bind(elem);
+  }
+
+  var listeners = elem.__resize_listeners__;
+
+  if (!listeners) {
+    elem.__resize_listeners__ = [];
+    if (window.ResizeObserver) {
+      var offsetWidth = elem.offsetWidth;
+      var offsetHeight = elem.offsetHeight;
+      var ro = new ResizeObserver(function () {
+        if (!elem.__resize_observer_triggered__) {
+          elem.__resize_observer_triggered__ = true;
+          if (elem.offsetWidth === offsetWidth && elem.offsetHeight === offsetHeight) {
+            return
+          }
+        }
+        runCallbacks(elem);
+      });
+
+      // initially display none won't trigger ResizeObserver callback
+      var ref = getRenderInfo(elem);
+      var detached = ref.detached;
+      var rendered = ref.rendered;
+      elem.__resize_observer_triggered__ = detached === false && rendered === false;
+      elem.__resize_observer__ = ro;
+      ro.observe(elem);
+    } else if (elem.attachEvent && elem.addEventListener) {
+      // targeting IE9/10
+      elem.__resize_legacy_resize_handler__ = function handleLegacyResize () {
+        runCallbacks(elem);
+      };
+      elem.attachEvent('onresize', elem.__resize_legacy_resize_handler__);
+      document.addEventListener('DOMSubtreeModified', elem.__resize_mutation_handler__);
+    } else {
+      if (!total) {
+        style = createStyles(css_248z);
+      }
+      initTriggers(elem);
+
+      elem.__resize_rendered__ = getRenderInfo(elem).rendered;
+      if (window.MutationObserver) {
+        var mo = new MutationObserver(elem.__resize_mutation_handler__);
+        mo.observe(document, {
+          attributes: true,
+          childList: true,
+          characterData: true,
+          subtree: true
+        });
+        elem.__resize_mutation_observer__ = mo;
+      }
+    }
+  }
+
+  elem.__resize_listeners__.push(callback);
+  total++;
+}
+
+function removeListener (elem, callback) {
+  var listeners = elem.__resize_listeners__;
+  if (!listeners) {
+    return
+  }
+
+  if (callback) {
+    listeners.splice(listeners.indexOf(callback), 1);
+  }
+
+  // no listeners exist, or removing all listeners
+  if (!listeners.length || !callback) {
+    // targeting IE9/10
+    if (elem.detachEvent && elem.removeEventListener) {
+      elem.detachEvent('onresize', elem.__resize_legacy_resize_handler__);
+      document.removeEventListener('DOMSubtreeModified', elem.__resize_mutation_handler__);
+      return
+    }
+
+    if (elem.__resize_observer__) {
+      elem.__resize_observer__.unobserve(elem);
+      elem.__resize_observer__.disconnect();
+      elem.__resize_observer__ = null;
+    } else {
+      if (elem.__resize_mutation_observer__) {
+        elem.__resize_mutation_observer__.disconnect();
+        elem.__resize_mutation_observer__ = null;
+      }
+      elem.removeEventListener('scroll', handleScroll);
+      elem.removeChild(elem.__resize_triggers__.triggers);
+      elem.__resize_triggers__ = null;
+    }
+    elem.__resize_listeners__ = null;
+  }
+
+  if (!--total && style) {
+    style.parentNode.removeChild(style);
+  }
+}
+
+function getUpdatedSize (elem) {
+  var ref = elem.__resize_last__;
+  var width = ref.width;
+  var height = ref.height;
+  var offsetWidth = elem.offsetWidth;
+  var offsetHeight = elem.offsetHeight;
+  if (offsetWidth !== width || offsetHeight !== height) {
+    return {
+      width: offsetWidth,
+      height: offsetHeight
+    }
+  }
+  return null
+}
+
+function handleMutation () {
+  // `this` denotes the scrolling element
+  var ref = getRenderInfo(this);
+  var rendered = ref.rendered;
+  var detached = ref.detached;
+  if (rendered !== this.__resize_rendered__) {
+    if (!detached && this.__resize_triggers__) {
+      resetTriggers(this);
+      this.addEventListener('scroll', handleScroll, true);
+    }
+    this.__resize_rendered__ = rendered;
+    runCallbacks(this);
+  }
+}
+
+function handleScroll () {
+  var this$1 = this;
+
+  // `this` denotes the scrolling element
+  resetTriggers(this);
+  if (this.__resize_raf__) {
+    cancelAnimationFrame(this.__resize_raf__);
+  }
+  this.__resize_raf__ = requestAnimationFrame(function () {
+    var updated = getUpdatedSize(this$1);
+    if (updated) {
+      this$1.__resize_last__ = updated;
+      runCallbacks(this$1);
+    }
+  });
+}
+
+function runCallbacks (elem) {
+  if (!elem || !elem.__resize_listeners__) {
+    return
+  }
+  elem.__resize_listeners__.forEach(function (callback) {
+    callback.call(elem, elem);
+  });
+}
+
+function initTriggers (elem) {
+  var position = getComputedStyle(elem, 'position');
+  if (!position || position === 'static') {
+    elem.style.position = 'relative';
+  }
+
+  elem.__resize_old_position__ = position;
+  elem.__resize_last__ = {};
+
+  var triggers = createElement('div', {
+    className: 'resize-triggers'
+  });
+  var expand = createElement('div', {
+    className: 'resize-expand-trigger'
+  });
+  var expandChild = createElement('div');
+  var contract = createElement('div', {
+    className: 'resize-contract-trigger'
+  });
+  expand.appendChild(expandChild);
+  triggers.appendChild(expand);
+  triggers.appendChild(contract);
+  elem.appendChild(triggers);
+
+  elem.__resize_triggers__ = {
+    triggers: triggers,
+    expand: expand,
+    expandChild: expandChild,
+    contract: contract
+  };
+
+  resetTriggers(elem);
+  elem.addEventListener('scroll', handleScroll, true);
+
+  elem.__resize_last__ = {
+    width: elem.offsetWidth,
+    height: elem.offsetHeight
+  };
+}
+
+function resetTriggers (elem) {
+  var ref = elem.__resize_triggers__;
+  var expand = ref.expand;
+  var expandChild = ref.expandChild;
+  var contract = ref.contract;
+
+  // batch read
+  var csw = contract.scrollWidth;
+  var csh = contract.scrollHeight;
+  var eow = expand.offsetWidth;
+  var eoh = expand.offsetHeight;
+  var esw = expand.scrollWidth;
+  var esh = expand.scrollHeight;
+
+  // batch write
+  contract.scrollLeft = csw;
+  contract.scrollTop = csh;
+  expandChild.style.width = eow + 1 + 'px';
+  expandChild.style.height = eoh + 1 + 'px';
+  expand.scrollLeft = esw;
+  expand.scrollTop = esh;
+}
+
+export { addListener, removeListener };

frontend/node_modules/resize-detector/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace resizeDetector {
+  type ResizeCallback<E extends HTMLElement = HTMLElement> = (this: E, element: E) => void;
+
+  function addListener<E extends HTMLElement = HTMLElement>(elem: E, callback: ResizeCallback<E>): void;
+
+  function removeListener<E extends HTMLElement = HTMLElement>(elem: E, callback?: ResizeCallback<E>): void;
+}
+
+export = resizeDetector;

frontend/node_modules/resize-detector/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "resize-detector",
+  "version": "0.3.0",
+  "description": "Element resize detection, both modern way and cross browser.",
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "scripts": {
+    "build": "rollup -c",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "element",
+    "resize",
+    "observer"
+  ],
+  "author": "Justineo (justice360@gmail.com)",
+  "license": "MIT",
+  "repository": "Justineo/resize-detector",
+  "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.3",
+    "babel-eslint": "^8.2.6",
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "rollup": "^1.32.1",
+    "rollup-plugin-postcss": "^2.9.0",
+    "rollup-plugin-terser": "^5.3.1"
+  },
+  "dependencies": {}
+}