Dropbox OAuth implementation and Cloud framework

index.html

@@ -1995,7 +1995,7 @@
 
           <div data-tip="Burg mean annual temperature and real-world city for comparison">
             <div class="label">Temperature:</div>
-            <span id="burgTemperature"></span>, like in 
+            <span id="burgTemperature"></span>, like in
             <span id="burgTemperatureLikeIn"></span>
           </div>
 
@@ -3490,26 +3490,29 @@
         <button onclick="quickSave()" data-tip="Save the project to browser storage (quick save). It can be unreliable. Shortcut: F6">browser</button>
       </div>
       <p style="font-style: italic">Maps are saved in <i>.map</i> format, that can be loaded back via 'Load' in menu. Please keep noted that we do not keep any data on our side. There is no way to restore the progress if .map file is lost. Please keep old .map files on your machine or cloud storage as backups.</p>
-      <p style="font-style: italic">Saving to Dropbox may not be allowed for big files. In this case open <a href="https://www.dropbox.com/home/FMG" target="_blank">Dropbox</a>, download the .map file and upload it manually.</p>
-
-      <div style="margin-top: .3em" data-tip="Select .map file on dropbox and share a sharable link">
-        <strong>Create sharable link</strong>
-        <button onclick="createSharableDropboxLink()">select file</button>
-        <div id="sharableLinkContainer" style="display: none">
-          <a id="sharableLink" target="_blank"></a>
-          <i data-tip="Copy link to the clipboard" onclick="copyLinkToClickboard()" class="icon-clone pointer"></i>
-        </div>
-      </div>
     </div>
 
     <div id="loadMapData" style="display: none" class="dialog">
       <div style="margin-bottom: .3em">Load map from</div>
       <div>
         <button onclick="mapToLoad.click()" data-tip="Load .map file from local disk">local disk</button>
-        <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Dropbox</button>
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>
+      <div id="loadFromDropbox">
+        <p>From your Dropbox account:</p>
+        <select>
+        </select>
+        <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Open</button>
+        <button onclick="createSharableDropboxLink()" data-tip="Select .map file on dropbox and share a sharable link">Create link</button>
+
+        <div style="margin-top: .3em">
+          <div id="sharableLinkContainer" style="display: none">
+            <a id="sharableLink" target="_blank"></a>
+            <i data-tip="Copy link to the clipboard" onclick="copyLinkToClickboard()" class="icon-clone pointer"></i>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div id="saveTilesScreen" style="display: none" class="dialog">
@@ -3527,7 +3530,7 @@
       <div data-tip="Image scale relative to image size (e.g. 5x)" style="margin-bottom: .3em">
         <div class="label">Scale:</div>
         <input id="tileScaleInput" data-stored="tileScale" type="range" min=1 max=4 value=1 style="width: 11em">
-        <input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1 
+        <input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1
         >
       </div>
       <div data-tip="Calculated size of image if combined" style="margin-bottom: .3em">
@@ -4255,6 +4258,7 @@
   <script defer src="modules/ui/style.js"></script>
   <script defer src="modules/save.js"></script>
   <script defer src="modules/load.js"></script>
+  <script defer src="modules/cloud.js"></script>
   <script defer src="main.js"></script>
   <script defer src="modules/relief-icons.js"></script>
   <script defer src="modules/ui/tools.js"></script>
@@ -4295,6 +4299,7 @@
   <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
   <script defer src="libs/pell.min.js"></script>
   <script defer src="libs/jszip.min.js"></script>
-  <script defer src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="pdr9ae64ip0qno4"></script>
+  <!--<script defer src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="pdr9ae64ip0qno4"></script>-->
+  <script type="text/javascript" src="https://unpkg.com/dropbox@10.8.0/dist/Dropbox-sdk.min.js"></script>
 </body>
 </html>