Voyager Launcher component, initial version

package.json

@@ -5,7 +5,7 @@
     "scripts": {
         "start": "npm run server",
         "server": "nodemon services/server/bin/index.js",
-        "watch": "APP_VERSION=$(git describe --tags); concurrently \"cd source/client && webpack --watch --app=all --vers=$APP_VERSION\" \"tsc -b source/server -w\" \"nodemon services/server/bin/index.js\"",
+        "watch": "APP_VERSION=$(git describe --tags); concurrently \"cd source/client && webpack --watch --app=launcher --vers=$APP_VERSION\" \"tsc -b source/server -w\" \"nodemon services/server/bin/index.js\"",
         "build": "concurrently \"npm run build-server\" \"npm run build-dev\"",
         "build-all": "npm run build-dev; npm run build-prod",
         "build-dev": "APP_VERSION=$(git describe --tags); cd source/client; webpack --mode=development --app=all --vers=$APP_VERSION; cd ../..",

source/client/applications/LauncherApplication.ts

@@ -0,0 +1,17 @@
+/**
+ * 3D Foundation Project
+ * Copyright 2019 Smithsonian Institution
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+

source/client/story.hbs

@@ -21,7 +21,7 @@
         <script src="/libs/quill.js"></script>
             {{else}}
         <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
         <link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
             {{/if}}
@@ -33,7 +33,7 @@
         <script src="/libs/quill.min.js"></script>
             {{else}}
         <script src="https://code.jquery.com/pep/0.4.3/pep.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
         <link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css" rel="stylesheet">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
             {{/if}}

source/client/ui/launcher/MainView.ts

@@ -0,0 +1,57 @@
+/**
+ * 3D Foundation Project
+ * Copyright 2019 Smithsonian Institution
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import CustomElement, { customElement } from "@ff/ui/CustomElement";
+
+import MiniApplication, { IMiniApplicationProps } from "../../applications/MiniApplication";
+
+import ContentView from "../mini/ContentView";
+
+import "./styles.scss";
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Voyager Launcher custom DOM element. Displays a 2D or 3D thumbnail.
+ * When clicked displays experience in Voyager Explorer (in-place or fullscreen).
+ */
+@customElement("voyager-launcher")
+export default class MainView extends CustomElement
+{
+    application: MiniApplication;
+
+    protected firstConnected()
+    {
+        super.firstConnected();
+
+        this.classList.add("voyager-launcher");
+
+        const props: IMiniApplicationProps = {
+            root: this.getAttribute("root"),
+            document: this.getAttribute("document"),
+            model: this.getAttribute("model"),
+            geometry: this.getAttribute("geometry"),
+            texture: this.getAttribute("texture"),
+            quality: this.getAttribute("quality") || "Thumb",
+        };
+
+        this.application = new MiniApplication(null, props);
+
+        const system = this.application.system;
+        new ContentView(system).appendTo(this);
+    }
+}

source/client/ui/launcher/styles.scss

@@ -0,0 +1,22 @@
+/**
+ * 3D Foundation Project
+ * Copyright 2019 Smithsonian Institution
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../styles";
+
+.voyager-launcher {
+  display: block;
+}

source/client/viewer.hbs

@@ -33,15 +33,15 @@
             <script src="/libs/three.js"></script>
         {{else}}
             <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
         {{/if}}
     {{else}}
         {{#if htmlWebpackPlugin.options.isLocal}}
             <script src="/libs/pep.min.js"></script>
             <script src="/libs/three.min.js"></script>
         {{else}}
             <script src="https://code.jquery.com/pep/0.4.3/pep.min.js"></script>
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
         {{/if}}
     {{/if}}
 

source/client/webpack.config.js

@@ -52,6 +52,12 @@ const apps = {
         title: "Voyager Mini",
         template: "viewer.hbs",
     },
+    "launcher": {
+        name: "voyager-launcher",
+        entryPoint: "client/ui/launcher/MainView.ts",
+        title: "Voyager Launcher",
+        template: "viewer.hbs",
+    },
     "story": {
         name: "voyager-story",
         entryPoint: "client/ui/story/MainView.ts",
@@ -84,6 +90,7 @@ module.exports = function(env, argv) {
         return [
             createAppConfig(apps.explorer, version, dirs, isDevMode, isLocal),
             createAppConfig(apps.mini, version, dirs, isDevMode, isLocal),
+            createAppConfig(apps.launcher, version, dirs, isDevMode, isLocal),
             createAppConfig(apps.story, version, dirs, isDevMode, isLocal),
             createAppConfig(apps.demo, version, dirs, isDevMode, isLocal),
         ];