Autodesk-Forge · CharlieWinters · Oct 2, 2018 · Oct 17, 2018 · Feb 26, 2019 · Feb 26, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode
diff --git a/README.md b/README.md
@@ -4,12 +4,18 @@
 
 This sample is part of the [Learn Forge](http://learnforge.autodesk.io) tutorials.
 
+# Live Demo
+
+https://autodesk-forge.github.io/learn.forge.viewmodels/ ([Demo Screencast](https://tiny.cc/dbgmmz))
+
 ### Languages
 
 The `master` branch contains the client-side UI: `html`, `js` and `css` files. To download the project for each language, please use:
 
 - [Nodejs](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/nodejs)
-- [.NET](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/net)
+- [.NET Framework](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/net)
+- [.NET Core](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/netcore)
 - [Go](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/go)
 - [PHP](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/php)
-- [Java](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/java)
+- [Java](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/java)
+- [Serverless Live Demo](//github.com/Autodesk-Forge/learn.forge.viewmodels/tree/gh-pages)
diff --git a/img/GitHub-Mark-32px.png b/img/GitHub-Mark-32px.png
diff --git a/img/GitHub-Mark-Light-32px.png b/img/GitHub-Mark-Light-32px.png
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/index.html b/index.html
@@ -4,15 +4,16 @@
 <head>
   <title>Autodesk Forge Tutorial</title>
   <meta charset="utf-8" />
+  <link rel="shortcut icon" href="https://github.com/Autodesk-Forge/learn.forge.viewmodels/raw/master/img/favicon.ico">
   <!-- Common packages: jQuery, Bootstrap, jsTree -->
   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" />
   <!-- Autodesk Forge Viewer files -->
-  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v6.0" type="text/css">
-  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.0"></script>
+  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
+  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
   <!-- this project files -->
   <link href="css/main.css" rel="stylesheet" />
   <script src="js/ForgeTree.js"></script>
@@ -23,13 +24,20 @@
   <!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
   <nav class="navbar navbar-default navbar-fixed-top">
     <div class="container-fluid">
-      <ul class="nav navbar-nav left">
+      <ul class="nav navbar-nav navbar-left">
         <li>
           <a href="http://developer.autodesk.com" target="_blank">
             <img alt="Autodesk Forge" src="//developer.static.autodesk.com/images/logo_forge-2-line.png" height="20">
           </a>
         </li>
       </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li>
+            <a href="https://github.com/Autodesk-Forge/learn.forge.viewmodels" target="_blank">
+                <img src="/img/GitHub-Mark-32px.png" alt="Fork on GitHub" style="height:22px;">
+            </a>
+        </li>
+      </ul>
     </div>
   </nav>
   <!-- End of navbar -->
@@ -68,9 +76,12 @@
           <h4 class="modal-title" id="myModalLabel">Create new bucket</h4>
         </div>
         <div class="modal-body">
-          <input type="text" id="newBucketKey" class="form-control"> For demonstration purpouses, objects (files) 
+          <input type="text" id="newBucketKey" class="form-control"> For demonstration purposes, objects (files)
           are NOT automatically translated. After you upload, right click on
-          the object and select "Translate".
+          the object and select "Translate". Note: Technically your bucket name is required to be globally unique across
+          the entire platform - to keep things simple with this tutorial your client ID will be prepended by default to
+          your bucket name and in turn masked by the UI so you only have to make sure your bucket name is unique within
+          your current Forge app.
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

diff --git a/js/ForgeTree.js b/js/ForgeTree.js
@@ -1,4 +1,22 @@
-$(document).ready(function () {
+/////////////////////////////////////////////////////////////////////
+// Copyright (c) Autodesk, Inc. All rights reserved
+// Written by Forge Partner Development
+//
+// Permission to use, copy, modify, and distribute this software in
+// object code form for any purpose and without fee is hereby granted,
+// provided that the above copyright notice appears in all copies and
+// that both that copyright notice and the limited warranty and
+// restricted rights notice below appear in all supporting
+// documentation.
+//
+// AUTODESK PROVIDES THIS PROGRAM "AS IS" AND WITH ALL FAULTS.
+// AUTODESK SPECIFICALLY DISCLAIMS ANY IMPLIED WARRANTY OF
+// MERCHANTABILITY OR FITNESS FOR A PARTICULAR USE.  AUTODESK, INC.
+// DOES NOT WARRANT THAT THE OPERATION OF THE PROGRAM WILL BE
+// UNINTERRUPTED OR ERROR FREE.
+/////////////////////////////////////////////////////////////////////
+
+$(document).ready(function () {
   prepareAppBucketTree();
   $('#refreshBuckets').click(function () {
     $('#appBuckets').jstree(true).refresh();
@@ -11,11 +29,44 @@
   $('#createBucketModal').on('shown.bs.modal', function () {
     $("#newBucketKey").focus();
   })
+
+  $('#hiddenUploadField').change(function () {
+    var node = $('#appBuckets').jstree(true).get_selected(true)[0];
+    var _this = this;
+    if (_this.files.length == 0) return;
+    var file = _this.files[0];
+    switch (node.type) {
+      case 'bucket':
+        var formData = new FormData();
+        formData.append('fileToUpload', file);
+        formData.append('bucketKey', node.id);
+
+        $.ajax({
+          url: '/api/forge/oss/objects',
+          data: formData,
+          processData: false,
+          contentType: false,
+          type: 'POST',
+          success: function (data) {
+            $('#appBuckets').jstree(true).refresh_node(node);
+            _this.value = '';
+          }
+        });
+        break;
+    }
+  });
 });
 
 function createNewBucket() {
   var bucketKey = $('#newBucketKey').val();
   var policyKey = $('#newBucketPolicyKey').val();
+
+  const regex = /^[\-_.a-z0-9]{3,128}$/g;
+  if (!bucketKey.match(regex)) {
+      alert('The bucket name can only contain characters -_.a-z0-9 and it must be between 3 and 128 characters long.');
+      return;
+  }
+
   jQuery.post({
     url: '/api/forge/oss/buckets',
     contentType: 'application/json',
@@ -72,7 +123,7 @@ function prepareAppBucketTree() {
           url: 'https://developer.api.autodesk.com/modelderivative/v2/designdata/' + urn + '/manifest',
           headers: { 'Authorization': 'Bearer ' + access_token },
           success: function (res) {
-            if (res.status === 'success') launchViewer(urn);
+            if (res.progress === 'success' || res.progress === 'complete') launchViewer(urn);
             else $("#forgeViewer").html('The translation job still running: ' + res.progress + '. Please try again in a moment.');
           },
           error: function (err) {
@@ -96,8 +147,7 @@ function autodeskCustomMenu(autodeskNode) {
         uploadFile: {
           label: "Upload file",
           action: function () {
-            var treeNode = $('#appBuckets').jstree(true).get_selected(true)[0];
-            uploadFile(treeNode);
+            uploadFile();
           },
           icon: 'glyphicon glyphicon-cloud-upload'
         }
@@ -120,30 +170,8 @@ function autodeskCustomMenu(autodeskNode) {
   return items;
 }
 
-function uploadFile(node) {
+function uploadFile() {
   $('#hiddenUploadField').click();
-  $('#hiddenUploadField').change(function () {
-    if (this.files.length == 0) return;
-    var file = this.files[0];
-    switch (node.type) {
-      case 'bucket':
-        var formData = new FormData();
-        formData.append('fileToUpload', file);
-        formData.append('bucketKey', node.id);
-
-        $.ajax({
-          url: '/api/forge/oss/objects',
-          data: formData,
-          processData: false,
-          contentType: false,
-          type: 'POST',
-          success: function (data) {
-            $('#appBuckets').jstree(true).refresh_node(node);
-          }
-        });
-        break;
-    }
-  });
 }
 
 function translateObject(node) {

diff --git a/js/ForgeViewer.js b/js/ForgeViewer.js
@@ -1,49 +1,34 @@
-var viewerApp;
+var viewer;
 
 function launchViewer(urn) {
   var options = {
     env: 'AutodeskProduction',
-    getAccessToken: getForgeToken
+    getAccessToken: getForgeToken,
   };
-  var documentId = 'urn:' + urn;
-  Autodesk.Viewing.Initializer(options, function onInitialized() {
-    viewerApp = new Autodesk.Viewing.ViewingApplication('forgeViewer');
-    viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
-    viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
+
+  Autodesk.Viewing.Initializer(options, () => {
+    viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
+    viewer.start();
+    var documentId = 'urn:' + urn;
+    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
   });
 }
 
 function onDocumentLoadSuccess(doc) {
-  // We could still make use of Document.getSubItemsWithProperties()
-  // However, when using a ViewingApplication, we have access to the **bubble** attribute,
-  // which references the root node of a graph that wraps each object from the Manifest JSON.
-  var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
-  if (viewables.length === 0) {
-    console.error('Document contains no viewables.');
-    return;
-  }
-
-  // Choose any of the avialble viewables
-  viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail);
-}
-
-function onDocumentLoadFailure(viewerErrorCode) {
-  console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
-}
-
-function onItemLoadSuccess(viewer, item) {
-  // item loaded, any custom action?
+  var viewables = doc.getRoot().getDefaultGeometry();
+  viewer.loadDocumentNode(doc, viewables).then(i => {
+    // documented loaded, any action?
+  });
 }
 
-function onItemLoadFail(errorCode) {
-  console.error('onItemLoadFail() - errorCode:' + errorCode);
+function onDocumentLoadFailure(viewerErrorCode, viewerErrorMsg) {
+  console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode + '\n- errorMessage:' + viewerErrorMsg);
 }
 
 function getForgeToken(callback) {
-  jQuery.ajax({
-    url: '/api/forge/oauth/token',
-    success: function (res) {
-      callback(res.access_token, res.expires_in)
-    }
+  fetch('/api/forge/oauth/token').then(res => {
+    res.json().then(data => {
+      callback(data.access_token, data.expires_in);
+    });
   });
-}
+}