Framework test

.gitignore

@@ -9,6 +9,7 @@ yarn.lock
 
 node_modules
 dist
+build
 .cache
 
 env.yml

README.md

@@ -5,12 +5,12 @@
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)][License]
 
 
-The JavaScript-based viewer provides a minimalist, highly customisable user interface that is easily adaptable via CSS, supported by lightning-fast real-time image delivery from the FSI Server.
+The zoom viewer provides a minimalist, highly customisable user interface that is easily adaptable via CSS, supported by lightning-fast real-time image delivery from the FSI Server.
 FSI Viewer can be created and controlled as a simple HTML tag and/or via the JavaScript API.
 
 This repository contains examples on how to use and build your own applications.
 
-![Project Image](project.apng)
+[![Project Image](project.apng)][GHPages]
 
 ## Getting Started
 

package.json

@@ -3,26 +3,23 @@
     "name": "NeptuneLabs GmbH",
     "url": "https://www.neptunelabs.com/"
   },
-  "version": "23.11.24",
-  "homepage": "https://www.neptunelabs.com/fsi-viewer",
+  "version": "24.03.19",
+  "homepage": "https://neptunelabs.com/fsi-viewer",
   "repository": {
     "type": "git",
     "url": "https://github.com/neptunelabs/fsi-viewer-samples"
   },
   "license": "Apache-2.0",
   "private": true,
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=6.0.0"
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
   },
   "dependencies": {
-    "@neptunelabs/fsi-samples-framework": "^1.1.0"
-  },
-  "devDependencies": {
-    "prettier": "^3.0.1"
+    "@neptunelabs/fsi-samples-framework": "^2.0.18"
   },
   "scripts": {
-    "start": "start-sample",
-    "build": "start-sample --build"
+    "start": "workbench",
+    "build": "workbench --build"
   }
 }

project.yml

@@ -2,5 +2,6 @@
 title: 'FSI Viewer'
 projectURL: https://www.neptunelabs.com/fsi-viewer/
 originAssetPath: viewer
+schema: overview-taupe
 playground:
   stackblitz: fsi-viewer-samples

samples/custom-product-detail-page/config.yml

@@ -7,29 +7,20 @@ overview:
     - JS built FSI Viewer
     - zoom and pan
     - custom UI
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/misc-menu.yml
-      hero: false
-      featured: true
-      footer:
-        credits:
-          photos:
-            - author: Brandon Atchison
-              link: https://unsplash.com/@b_atchison98?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: false
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: misc-menu.yml
+  featured: true
+  footer:
+    credits:
+      photos:
+        - author: Brandon Atchison
+          link: https://unsplash.com/@b_atchison98?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: false

samples/external-buttons/config.yml

@@ -7,32 +7,24 @@ overview:
     - JS built FSI Viewer
     - external UI
     - zoom and pan
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/clothing-menu.yml
-      featured:
-        template: data/clothing-featured.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            - author: Kate Skumen
-              link: https://unsplash.com/@skumen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      hero: false
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: true
-      jquery: true
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: clothing-menu.yml
+  featured:
+    data: clothing-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Kate Skumen
+          link: https://unsplash.com/@skumen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  hero: false
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
+

samples/external-slider/config.yml

@@ -7,35 +7,27 @@ overview:
     - JS built FSI Viewer
     - external slider
     - zoom and pan
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/misc-menu.yml
-      highlight: DEAL OF THE DAY
-      featured: true
-      footer:
-        credits:
-          photos:
-            - author: Jonny Caspari
-              link: https://unsplash.com/@jonnysplsh?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-            - author: max fuchs
-              link: https://unsplash.com/@designfuchs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-            - author: William Moreland
-              link: https://unsplash.com/@relentlessjpg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: false
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: misc-menu.yml
+  highlight: DEAL OF THE DAY
+  featured: true
+  footer:
+    credits:
+      photos:
+        - author: Jonny Caspari
+          link: https://unsplash.com/@jonnysplsh?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+        - author: max fuchs
+          link: https://unsplash.com/@designfuchs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+        - author: William Moreland
+          link: https://unsplash.com/@relentlessjpg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: false

samples/javascript-api/README.md

@@ -0,0 +1,110 @@
+# JS API Sample
+
+FSI Viewer contains an extensive JS API with methods and callbacks that you can use.
+You can find [an overview of all available parameters in the corresponding documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods).
+
+This example is a simple demonstration of how to use these methods and callbacks.
+
+To display zoom with FSI Viewer, all you need to do is add the following script to the top of your web page:
+
+```html
+<script
+  src='https://fsi.domain.tld/fsi/viewer/applications/viewer/js/fsiviewer.js'
+</script>
+```
+This will ensure that the FSI Viewer is loaded.
+
+Normally you would need to place the *<fsi-viewer>* tag in your source code where you want the viewer to be displayed.
+
+In this example, we only want to display the viewer in place of an image when a button is clicked.
+This means that the viewer is initialised by JavaScript.
+
+To do this, we have created this part in the body:
+
+```html
+<div class="col productContainer" id="productContainer">
+  <img id="zoomImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/Shoe/View2/sneaker-both-13.jpg&width=640&height=397&effects=pad(CC,FFFFFF)" height="397" alt="">
+  <div class="zoomContainer" id="zoomEle">
+  </div>
+  <button type="button" id="zoomBtn" class="btn btn-lg btn-outline-dark">Show Zoom</button>
+</div>
+```
+`productContainer` is the div that contains all the elements.
+`zoomImg` is the image that will be displayed on load and replaced by the viewer.
+The `zoomEle` div will contain the FSI viewer.
+The `zoomBtn` button is used to switch from the image to the viewer.
+
+In the corresponding `style.css` the image and button are placed  above the viewer div with `z-index`:
+
+```css
+.productContainer .img {
+  z-index: 10;
+  position: absolute;
+}
+
+.productContainer .btn {
+  position: absolute;
+  z-index: 15;
+}
+```
+
+The switch on button click is achieved via JS in the corresponding `script.js`:
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('zoomBtn').addEventListener('click', () => {
+
+    let showTeaser = true
+    const teaserZoomPercent = 10
+
+    const show = () => {
+      // show FSI Viewer instance and hide image
+      document.getElementById('zoomEle').style.visibility = 'visible'
+      document.getElementById('zoomImg').style.display = 'none'
+      document.getElementById('zoomBtn').style.display = 'none'
+      if (showTeaser) {
+        setTimeout(() => {
+          instance.setZoom(teaserZoomPercent, true, true)
+        }, 500)
+      }
+    }
+
+    const instance = $FSI.createNode("fsi-viewer", {
+      src: 'images/samples/Shoe/View2/sneaker-both-13.jpg',
+      debug: false,
+      plugins: 'fullScreen',
+      skin: 'example',
+      width: '640',
+      height: '427',
+      id : 'myViewer',
+      onReady : show,
+      onViewChanged: (view) => {
+        if (showTeaser) {
+          showTeaser = false
+          setTimeout(() => {
+            // reset viewer - the user can interact with the UI
+            instance.resetView()
+          }, 800)
+        }
+      },
+    })
+    document.getElementById('zoomEle').appendChild(instance)
+  })
+
+})
+
+```
+
+A click on the `zoomBtn` element will initialise a new FSI Viewer element in the `zoomEle` element.
+
+The viewer itself is created with `$FSI.createNode("fsi-viewer",{parameters})`.
+
+We create `show` that is called when the `onReady` callback is executed (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/callbacks#onready)) we ensure a smooth transition:
+Only when the viewer is ready will the viewer element will be set to visible, while the image and button are set to `display:none`.
+
+If `showTeaser` is true, the method `setZoom` will be executed: `instance.setZoom(teaserZoomPercent, true, true)` (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods#setzoom)).
+
+For initialization, we use `$FSI.createNode` which creates the <fsi-viewer> custom tag which is appended to the `zoomEle` element.
+
+The callback `onViewChanged` (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/callbacks#onviewchanged)) listens when the zoom is finished, sets `showTeaser` to false and uses the `resetView` method (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods#resetview)).

samples/javascript-api/config.yml

@@ -0,0 +1,27 @@
+overview:
+  title: JavaScript API
+  image: logo.png
+  description: Learn how to use the JavaScript Viewer API with a simple demo.
+  order: 97
+  facts:
+    - JS built FSI Viewer
+    - JS API Demonstration
+schema: bootstrap-taupe
+sample:
+  menu:
+    data: clothing-menu.yml
+  featured:
+    data: clothing-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Artem Bondarchuk
+          link: https://unsplash.com/@artembondarchuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true

samples/javascript-api/container.html

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row row-cols-1 row-cols-lg-2 g-3 pr-5 py-3">
+    <div class="col productContainer" id="productContainer">
+      <img id="zoomImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/Shoe/View2/sneaker-both-13.jpg&width=640&height=397&effects=pad(CC,FFFFFF)" height="397" alt="">
+      <div class="zoomContainer" id="zoomEle">
+      </div>
+      <button type="button" id="zoomBtn" class="btn btn-lg btn-outline-dark">Show Zoom</button>
+    </div>
+    <div class="col mx-auto">
+      <div class="p-3 text-left">
+        <h2 class="display-5">Camu</h2>
+        <p>Sneaker, Camouflage Suede</p>
+        <p></p>
+        <p>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-half"></i>
+          <small>(4664) Ratings</small>
+        </p>
+        <p>Sturdy, classy and minimal.</p>
+        <p>Nice shoe for any occasion. The minimal design fits a lot of outfits.</p>
+        <p>
+          <small>Dispatched in 4 working days</small>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+