From 84653f31fbfb0f80411711461385f4d42819d3ff Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Wed, 17 Apr 2019 10:51:54 -0400
Subject: [PATCH] Move swiper initialization to webpack bundle

Currently most of doccano's Javascript is in webpack bundles, except for
a few snippets like swiper. To increase consistency, this change moves
the swiper code also into a webpack bundle.

In addition to increasing consistency, this also has the advantages of:

1) Giving developers a single location/directory to look for all the
   Javascript.

2) Making the swiper dependency explicit by listing it in the
   package.json manifest

3) Ensuring that swiper gets built and minified in the same way as other
   dependencies.

4) Making swiper available when developing offline.

In the future, it would also be worth considering to move all the CSS
includes into webpack.
---
 app/server/package-lock.json    | 22 ++++++++++++++++++++++
 app/server/package.json         |  1 +
 app/server/static/js/index.js   | 14 ++++++++++++++
 app/server/templates/index.html | 19 +++----------------
 app/server/webpack.config.js    |  1 +
 5 files changed, 41 insertions(+), 16 deletions(-)
 create mode 100644 app/server/static/js/index.js

diff --git a/app/server/package-lock.json b/app/server/package-lock.json
index 271bf963..8ef3e0cb 100644
--- a/app/server/package-lock.json
+++ b/app/server/package-lock.json
@@ -1771,6 +1771,14 @@
         "esutils": "2.0.2"
       }
     },
+    "dom7": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
+      "integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
+      "requires": {
+        "ssr-window": "1.0.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -6280,6 +6288,11 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
@@ -6422,6 +6435,15 @@
         "has-flag": "3.0.0"
       }
     },
+    "swiper": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.3.3.tgz",
+      "integrity": "sha512-hLjeei+E2EioFUBI4XzqUDkvZu9d6TAOWVFbrCXSrOhY9bzgXYC28dfMRHOs8IgU5WAZ7bbMR8lF706TzKf9nw==",
+      "requires": {
+        "dom7": "2.1.3",
+        "ssr-window": "1.0.1"
+      }
+    },
     "symbol-observable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
diff --git a/app/server/package.json b/app/server/package.json
index eb77a8a5..f1febec2 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "chart.js": "^2.7.2",
     "marked": "^0.3.19",
+    "swiper": "^4.3.3",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.4.0",
     "vue-debounce": "^1.1.0",
diff --git a/app/server/static/js/index.js b/app/server/static/js/index.js
new file mode 100644
index 00000000..d4d7ca11
--- /dev/null
+++ b/app/server/static/js/index.js
@@ -0,0 +1,14 @@
+import Swiper from 'swiper';
+
+new Swiper('.swiper-container', {
+  // Optional parameters
+  loop: true,
+  autoplay: {
+    delay: 5000,
+  },
+  // Navigation arrows
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+});
diff --git a/app/server/templates/index.html b/app/server/templates/index.html
index 4e2a342a..6c1ecd38 100644
--- a/app/server/templates/index.html
+++ b/app/server/templates/index.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 
 {% block header %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
@@ -215,19 +216,5 @@
 {% endblock %}
 
 {% block footer %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
-<script>
-  new Swiper('.swiper-container', {
-    // Optional parameters
-    loop: true,
-    autoplay: {
-      delay: 5000,
-    },
-    // Navigation arrows
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-  })
-</script>
-{% endblock %}
\ No newline at end of file
+{% render_bundle 'index' 'js' %}
+{% endblock %}
diff --git a/app/server/webpack.config.js b/app/server/webpack.config.js
index a552747a..c59b01ea 100644
--- a/app/server/webpack.config.js
+++ b/app/server/webpack.config.js
@@ -8,6 +8,7 @@ const hotReload = process.env.HOT_RELOAD === '1';
 module.exports = {
     mode: devMode ? 'development' : 'production',
     entry: {
+        'index': './static/js/index.js',
         'sequence_labeling': './static/js/sequence_labeling.js',
         'document_classification': './static/js/document_classification.js',
         'seq2seq': './static/js/seq2seq.js',