Merge branch 'release/0.4.25'

CHANGELOG.md

@@ -5,6 +5,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [0.4.25] - 2019-01-10
+### Changed
+- Update dependencies
+
+### Fixed
+- Auto-scroll to more proper position
+
 ## [0.4.24] - 2019-01-06
 ### Changed
 - Update dependencies
@@ -175,7 +182,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 ### Added
 - First release
 
-[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.24...HEAD
+[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.25...HEAD
+[0.4.25]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.24...v0.4.25
 [0.4.24]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.23...v0.4.24
 [0.4.23]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.22...v0.4.23
 [0.4.22]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.21...v0.4.22

package.json

@@ -1,8 +1,8 @@
 {
   "name": "piping-ui",
-  "version": "0.4.24",
+  "version": "0.4.25",
   "private": true,
-  "author": "Ryo Ota <nwtgck@gmail.com> (https://github.com/nwtgck)",
+  "author": "Ryo Ota <nwtgck@nwtgck.org> (https://github.com/nwtgck)",
   "scripts": {
     "serve": "npm run generate-version && npm run copy-openpgp && vue-cli-service serve",
     "build": "npm run generate-version && npm run generate-sitemap && npm run generate-robots-txt && npm run copy-openpgp && vue-cli-service build",
@@ -21,9 +21,9 @@
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "binconv": "github:nwtgck/binconv-npm#v0.1.1",
     "clipboard": "^2.0.4",
-    "core-js": "^3.6.1",
+    "core-js": "^3.6.2",
     "file-saver": "^2.0.2",
-    "file-type": "^12.4.2",
+    "file-type": "^13.0.3",
     "filepond": "^4.9.3",
     "jszip": "^3.2.2",
     "jwk-thumbprint": "^0.1.2",
@@ -48,7 +48,7 @@
     "@types/chai": "^4.2.7",
     "@types/clipboard": "^2.0.1",
     "@types/file-saver": "^2.0.1",
-    "@types/jszip": "^3.1.6",
+    "@types/jszip": "^3.1.7",
     "@types/mocha": "^5.2.7",
     "@types/openpgp": "^4.4.8",
     "@types/react": "^16.9.17",
@@ -73,7 +73,7 @@
     "license-checker": "^25.0.1",
     "material-design-icons-iconfont": "^5.0.1",
     "react": "^16.12.0",
-    "sass": "^1.24.2",
+    "sass": "^1.24.4",
     "sass-loader": "^7.3.1",
     "typescript": "^3.7.4",
     "vue-cli-plugin-vuetify": "^2.0.3",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app id="app">
-    <v-app-bar app>
+    <v-app-bar app ref="app_bar">
       <v-toolbar-title style="margin-right: 0.6em;">
         <!-- Show version on app title -->
         <v-tooltip bottom>
@@ -51,12 +51,15 @@ import { Component, Vue } from 'vue-property-decorator';
 const PipingUI = () => import('@/components/PipingUI.vue');
 const MenuContent = () => import('@/components/MenuContent.vue');
 const Licenses = () => import("@/components/Licenses.vue");
+import {makePromise} from "@/utils";
 import {VERSION} from '@/version';
 import {globalStore} from "@/vue-global";
 import {strings} from "@/strings";
 import {mdiCached, mdiDotsVertical} from "@mdi/js";
 import enableDarkTheme from "@/enable-dark-theme";
 
+const {promise: _appBarPromise, resolve: appBarPromiseResolver} = makePromise<Element>();
+export const appBarPromise = _appBarPromise;
 
 @Component({
   components: {
@@ -96,6 +99,11 @@ export default class App extends Vue {
     this.$vuetify.theme.dark = enableDarkTheme();
   }
 
+  mounted() {
+    // Resolve app bar element
+    appBarPromiseResolver((this.$refs['app_bar'] as Vue).$el);
+  }
+
   // TODO: Remove any
   showRefreshUI (e: any) {
     this.pwa.registration = e.detail;

src/components/DataDownloader.vue

@@ -101,8 +101,8 @@ export default class DataDownloader extends Vue {
 
   async mounted() {
     // Scroll to this element
-    // (base: https://stackoverflow.com/a/22292000/2885946)
-    this.$el.scrollIntoView({behavior: 'smooth'});
+    // NOTE: no need to add `await`
+    pipingUiUtils.scrollTo(this.$el);
 
     // Key exchange
     const keyExchangeRes = await pipingUiUtils.keyExchangeAndReceiveVerified(

src/components/DataUploader.vue

@@ -236,8 +236,8 @@ export default class DataUploader extends Vue {
 
   async mounted() {
     // Scroll to this element
-    // (base: https://stackoverflow.com/a/22292000/2885946)
-    this.$el.scrollIntoView({behavior: 'smooth'});
+    // NOTE: no need to add `await`
+    pipingUiUtils.scrollTo(this.$el);
 
     switch (this.props.protection.type) {
       case 'raw':

src/components/DataViewer.vue

@@ -160,7 +160,7 @@ import urlJoin from 'url-join';
 import linkifyHtml from 'linkifyjs/html';
 const FileSaverAsync = () => import('file-saver');
 import Clipboard from 'clipboard';
-import fileType from 'file-type';
+import * as fileType from 'file-type/browser';
 import {blobToUint8Array} from 'binconv/dist/src/blobToUint8Array';
 import {uint8ArrayToBlob} from 'binconv/dist/src/uint8ArrayToBlob';
 import {mdiAlert, mdiCheck, mdiChevronDown, mdiContentSave, mdiCloseCircle, mdiEye, mdiEyeOff, mdiKey, mdiFeatureSearchOutline} from "@mdi/js";
@@ -295,8 +295,8 @@ export default class DataViewer extends Vue {
 
   async mounted() {
     // Scroll to this element
-    // (base: https://stackoverflow.com/a/22292000/2885946)
-    this.$el.scrollIntoView({behavior: 'smooth'});
+    // NOTE: no need to add `await`
+    pipingUiUtils.scrollTo(this.$el);
 
     // Setting for copying to clipboard
     new Clipboard((this.$refs.text_copy_button as Vue).$el, {
@@ -378,7 +378,7 @@ export default class DataViewer extends Vue {
       this.text = await utils.readBlobAsText(this.blob);
     } else {
       // Detect type of blob
-      const fileTypeResult = fileType(firstChunk);
+      const fileTypeResult = await fileType.fromBlob(new Blob([firstChunk]));
       if (fileTypeResult !== undefined) {
         const blobUrl = URL.createObjectURL(this.blob);
         if (fileTypeResult.mime.startsWith("image/")) {

src/piping-ui-utils.ts

@@ -15,6 +15,7 @@ const swDownloadAsync = () => import("@/sw-download");
 const utilsAsync = () => import("@/utils");
 const jwkThumbprintAsync  = () => import("jwk-thumbprint");
 const uint8ArrayToStringAsync = () => import('binconv/dist/src/uint8ArrayToString').then(p => p.uint8ArrayToString);
+import {appBarPromise} from "@/App.vue";
 
 // Decrypt & Download
 export async function decryptingDownload(
@@ -223,3 +224,13 @@ export async function keyExchangeAndReceiveVerified(serverUrl: string, secretPat
     }
   }
 }
+
+/**
+ * Scroll to the specific element considering the app bar
+ * @param element
+ */
+export async function scrollTo(element: Element): Promise<void> {
+  const appBar = await appBarPromise;
+  const moveTop = element.getBoundingClientRect().y - appBar.clientHeight;
+  window.scrollBy({ top: moveTop, left: 0, behavior: 'smooth' });
+}

src/utils.ts

@@ -127,3 +127,16 @@ export async function sha256(input: string): Promise<string> {
 export function uint8ArrayToBase64(arr: Uint8Array): string {
   return btoa(String.fromCharCode(...arr));
 }
+
+/***
+ * Make a promise which can be resolved and rejected outside of the Promise constructor
+ */
+export function makePromise<T>(): {promise: Promise<T>, resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void} {
+  let resolve = (value?: T | PromiseLike<T>) => {};
+  let reject = () => {};
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve;
+    reject  = _reject;
+  });
+  return {promise, resolve, reject};
+}