Update frontend code

Introduce webpack to bundle required dependencies instead of relying on global libraries. Those global libraries are deprecated and will be removed soon.

I tried to change the existing code as little as possible. However, the diff is huge because I fixed the indentation (tabs and spaces were mixed). Additionally, I tried to keep package.json and webpack.common.js as minimal as possible and took some inspiration from other official nextcloud apps.

Npm scripts:
- Production build: `npm run build`
- Development build: `npm run dev`
- Build and watch for changes: `npm run watch`

The build script should be run before pushing a release. The source files (inside src/), installed packages (inside node_modules/) and various js configs (webpack.*.js, package*.json and babel.config.json) can be omitted from a release. Webpack will output the generated code to js/.

Signed-off-by: Richard Steinmetz <steinmetz.richard@googlemail.com>

2 files changed, 156 insertions, 0 deletions

diff --git a/src/ChecksumTab.js b/src/ChecksumTab.js
new file mode 100644
index 0000000..e7b1bf6
--- /dev/null
+++ b/src/ChecksumTab.js
@@ -0,0 +1,103 @@
+import {translate as t} from '@nextcloud/l10n'
+import axios from '@nextcloud/axios'
+import {generateUrl, imagePath} from '@nextcloud/router'
+import $ from 'jquery'
+
+export default class ChecksumTab {
+  /**
+   * Instantiate a new tab.
+   */
+  constructor(el) {
+    this.$el = $(el)
+  }
+
+  /**
+   * Return associated file info object.
+   */
+  getFileInfo() {
+    return this.fileInfo
+  }
+
+  /**
+   * Renders this details view.
+   */
+  render(fileInfo) {
+    this.fileInfo = fileInfo
+    this._renderSelectList(this.$el)
+  }
+
+  _renderSelectList($el) {
+    $el.html('<div class="get-checksum">'
+      + '<select id="choose-algorithm">'
+        + '<option value="">' + t('checksum', 'Choose Algorithm') + '</option>'
+        + '<option value="md5">MD5</option>'
+        + '<option value="sha1">SHA1</option>'
+        + '<option value="sha256">SHA256</option>'
+        + '<option value="sha384">SHA384</option>'
+        + '<option value="sha512">SHA512</option>'
+        + '<option value="crc32">CRC32</option>'
+      + '</select></div>'
+    )
+    $el.find('#choose-algorithm').change((e) => this._onChangeEvent(e))
+  }
+
+  /**
+   * Ajax callback for generating checksum hash.
+   */
+  async check(fileInfo, algorithmType) {
+    // skip call if fileInfo is null
+    if(null == fileInfo) {
+      this.updateDisplay({
+        response: 'error',
+        msg: t('checksum', 'No fileinfo provided.')
+      })
+
+      return
+    }
+
+    const url = generateUrl('/apps/checksum/check')
+    const params = {source: fileInfo.path + fileInfo.name, type: algorithmType}
+    const {data} = await axios.get(url, {params})
+    this.updateDisplay(data, algorithmType)
+  }
+
+  /**
+   * Display message from ajax callback.
+   */
+  updateDisplay(data, algorithmType) {
+    let msg = ''
+    if('success' == data.response) {
+      msg = algorithmType + ': ' + data.msg
+    }
+    if('error' == data.response) {
+      msg = data.msg
+    }
+
+    msg += '<br><br><a id="reload-checksum" class="icon icon-history" style="display:block" href=""></a>'
+    this.$el.find('.get-checksum').html(msg)
+    this.$el.find('#reload-checksum').click((e) => this._onReloadEvent(e))
+  }
+
+  /**
+   * Handle algorithm change.
+   */
+  _onChangeEvent(ev) {
+    var algorithmType = $(ev.currentTarget).val()
+    if(algorithmType != '') {
+      this.$el.html('<div style="text-align:center word-wrap:break-word" class="get-checksum"><p><img src="'
+        + imagePath('core','loading.gif')
+        + '"><br><br></p><p>'
+        + t('checksum', 'Creating Checksum ...')
+        + '</p></div>')
+      this.check(this.getFileInfo(), algorithmType)
+    }
+  }
+
+  /**
+   * Handle form reset.
+   */
+  _onReloadEvent(ev) {
+    ev.preventDefault()
+    this._renderSelectList(this.$el)
+  }
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..dfd67b4
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,53 @@
+/**
+ * @copyright Copyright (C) 2020 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {translate as t} from '@nextcloud/l10n'
+import ChecksumTab from './ChecksumTab'
+
+let tabInstance = null
+const checksumTab = new OCA.Files.Sidebar.Tab({
+  id: 'checksumTabView',
+  name: t('checksum', 'Checksum'),
+  icon: 'icon-category-auth',
+
+  enabled(fileInfo) {
+    return fileInfo && !fileInfo.isDirectory()
+  },
+
+  mount(el, fileInfo, context) {
+    if (!tabInstance) {
+      tabInstance = new ChecksumTab(el)
+    }
+    tabInstance.render(fileInfo)
+  },
+
+  update(fileInfo) {
+    tabInstance.render(fileInfo)
+  },
+
+  destroy() {
+    tabInstance = null
+  },
+})
+
+window.addEventListener('DOMContentLoaded', function() {
+  if (OCA.Files && OCA.Files.Sidebar) {
+    OCA.Files.Sidebar.registerTab(checksumTab)
+  }
+})