Merge branch 'master' of https://github.com/Azgaar/Fantasy-Map-Generator

modules/cloud.js

@@ -0,0 +1,141 @@
+"use strict";
+
+/*
+Cloud provider implementations (Dropbox only as now)
+
+provider Interface:
+
+name: name of the provider
+async auth(): authenticate and get access tokens from provider
+async save(filename): save map file to provider as filename
+async load(filename): load filename from provider
+async list(): list available filenames at provider
+async getLink(filePath): get shareable link for file
+restore(): restore access tokens from storage if possible
+
+*/
+
+window.Cloud = (function () {
+
+  // helpers to use in providers for token handling
+  const lSKey = x => `auth-${x}`
+  const setToken = (prov, key) => localStorage.setItem(lSKey(prov), key)
+  const getToken = prov => localStorage.getItem(lSKey(prov))
+
+  /**********************************************************/
+  /* Dropbox provider                                       */
+  /**********************************************************/
+
+  const DBP = {
+    name: 'dropbox',
+    clientId: 'sp7tzwm27u2w5ns',
+    authWindow: undefined,
+    token: null, // Access token
+    api: null,
+
+    restore() {
+      this.token = getToken(this.name)
+      if (this.token) this.connect(this.token)
+    },
+
+    async call(name, param) {
+      try {
+        return await this.api[name](param)
+      } catch (e) {
+        if (e.name !== "DropboxResponseError") throw(e)
+        // retry with auth
+        await this.auth()
+        return await this.api[name](param)
+      }
+    },
+
+    connect(token) {
+      const clientId = this.clientId
+      const auth = new Dropbox.DropboxAuth({ clientId })
+      auth.setAccessToken(token)
+      this.api = new Dropbox.Dropbox({ auth })
+    },
+
+    async save(fileName, contents) {
+      if (!this.api) await this.auth()
+      const resp = this.call('filesUpload', { path: '/' + fileName, contents })
+      console.log("Dropbox response:", resp)
+      return true
+    },
+
+    async load(path) {
+      if (!this.api) await this.auth()
+      const resp = await this.call('filesDownload', { path })
+      const blob = resp.result.fileBlob
+      if (!blob) throw(new Error('Invalid response from dropbox.'))
+      return blob
+    },
+
+    async list() {
+      if (!this.api) return null
+      const resp = await this.call('filesListFolder', { path: '' })
+      return resp.result.entries.map(e => ({ name: e.name, path: e.path_lower }))
+    },
+
+    auth() {
+        const url = window.location.origin + window.location.pathname + 'dropbox.html'
+        this.authWindow = window.open(url, 'auth', 'width=640,height=480')
+        // child window expected to call
+        // window.opener.Cloud.providers.dropbox.setDropBoxToken (see below)
+        return new Promise((resolve, reject) => {
+          const watchDog = () => {
+            this.authWindow.close()
+            reject(new Error("Timeout. No auth for dropbox."))
+          }
+          setTimeout(watchDog, 120*1000)
+          window.addEventListener('dropboxauth', e => {
+            clearTimeout(watchDog)
+            resolve()
+          })
+        })
+    },
+
+    // Callback function for auth window.
+    setDropBoxToken(token) {
+      console.log('Access token got:', token)
+      setToken(this.name, token)
+      this.connect(token)
+      this.authWindow.close()
+      window.dispatchEvent(new Event('dropboxauth'))
+    },
+
+    async getLink(path) {
+      if (!this.api) await this.auth()
+      let resp
+
+      // already exists?
+      resp = await this.call('sharingListSharedLinks', { path })
+      if (resp.result.links.length)
+        return resp.result.links[0].url
+
+      // create new
+      resp = await this.call('sharingCreateSharedLinkWithSettings', {
+        path,
+        settings: {
+          require_password: false,
+          audience: 'public',
+          access: 'viewer',
+          requested_visibility: 'public',
+          allow_download: true,
+        }
+      })
+      console.log("dropbox link object:", resp.result)
+      return resp.result.url
+    },
+  }
+
+  // register providers here:
+  const providers = {
+    dropbox: DBP,
+  }
+
+  // restore all providers at startup
+  for (const p of Object.values(providers)) p.restore()
+
+  return { providers }
+})()

modules/load.js

@@ -12,16 +12,34 @@ function quickLoad() {
   });
 }
 
-function loadFromDropbox() {
-  const options = {
-    success: function (files) {
-      const url = files[0].link;
-      loadMapFromURL(url);
-    },
-    linkType: "direct",
-    extensions: [".map"]
-  };
-  Dropbox.choose(options);
+async function loadFromDropbox(fileName) {
+  const map = document.querySelector("#loadFromDropbox select").value;
+  console.log('loading dropbox map', map);
+  const blob = await Cloud.providers.dropbox.load(map);
+  uploadMap(blob);
+}
+
+async function createSharableDropboxLink() {
+  const mapFile = document.querySelector("#loadFromDropbox select").value;
+  const sharableLink = document.getElementById("sharableLink");
+  const sharableLinkContainer = document.getElementById("sharableLinkContainer");
+  let url
+  try {
+    url = await Cloud.providers.dropbox.getLink(mapFile);
+  } catch {
+    tip("Dropbox API error. Can not create link.", true, "error", 2000);
+    return
+  }
+
+  const fmg = window.location.href.split("?")[0];
+  const reallink= `${fmg}?maplink=${url}`;
+  // voodoo magic required by the yellow god of CORS
+  const link = reallink.replace('www.dropbox.com/s/', 'dl.dropboxusercontent.com/1/view/')
+  const shortLink = link.slice(0, 50) + "...";
+
+  sharableLinkContainer.style.display = "block";
+  sharableLink.innerText = shortLink;
+  sharableLink.setAttribute("href", link);
 }
 
 function loadMapPrompt(blob) {

modules/save.js

@@ -435,42 +435,19 @@ function dowloadMap() {
   window.URL.revokeObjectURL(URL);
 }
 
-function saveToDropbox() {
+async function saveToDropbox() {
+  const sharableLinkContainer = document.getElementById("sharableLinkContainer");
   if (customization) return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
   closeDialogs("#alert");
-
   const mapData = getMapData();
-  const URL = "data:text/plain; base64," + btoa(encodeURIComponent(mapData));
   const filename = getFileName() + ".map";
-  const options = {
-    success: () => tip("Map is saved to your Dropbox", true, "success", 8000),
-    error: function (errorMessage) {
-      tip("Cannot save .map to your Dropbox", true, "error", 8000);
-      console.error(errorMessage);
-    }
-  };
-  Dropbox.save(URL, filename, options);
-}
-
-function createSharableDropboxLink() {
-  const sharableLink = document.getElementById("sharableLink");
-  const sharableLinkContainer = document.getElementById("sharableLinkContainer");
-
-  const options = {
-    success: function (files) {
-      const url = files[0].link;
-      const fmg = window.location.href.split("?")[0];
-      const link = `${fmg}/?maplink=${url}`;
-      const shortLink = link.slice(0, 50) + "...";
-
-      sharableLinkContainer.style.display = "block";
-      sharableLink.innerText = shortLink;
-      sharableLink.setAttribute("href", link);
-    },
-    linkType: "direct",
-    extensions: [".map"]
-  };
-  Dropbox.choose(options);
+  try {
+    await Cloud.providers.dropbox.save(filename, mapData);
+    tip("Map is saved to your Dropbox", true, "success", 8000);
+  } catch (msg) {
+    console.error(msg);
+    tip("Cannot save .map to your Dropbox", true, "error", 8000);
+  }
 }
 
 function saveGeoJSON_Cells() {

modules/ui/options.js

@@ -695,7 +695,7 @@ function showExportPane() {
   });
 }
 
-function showLoadPane() {
+async function showLoadPane() {
   $("#loadMapData").dialog({
     title: "Load map",
     resizable: false,
@@ -707,6 +707,19 @@ function showLoadPane() {
       }
     }
   });
+
+  const dpx = document.getElementById("loadFromDropbox");
+  const dpf = dpx.querySelector("select");
+  const files = await Cloud.providers.dropbox.list();
+  dpx.style.display = files? "block" : "none";
+  if (!files) return;
+  while(dpf.firstChild) dpf.removeChild(dpf.firstChild);
+  files.forEach(f => {
+    const opt = document.createElement('option');
+    opt.innerText = f.name;
+    opt.value = f.path;
+    dpf.appendChild(opt);
+  });
 }
 
 function loadURL() {