Merge pull request #13 from neptunelabs/api-sample

Api sample

.github/workflows/publish-pages.yml

@@ -29,8 +29,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
@@ -39,11 +39,11 @@ jobs:
           npm install
           npm run build
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: 'dist'
+          path: 'build'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/test-on-pull.yml

@@ -10,8 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'

.gitignore

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

README.md

@@ -13,7 +13,7 @@ Clicking on an image will open it in FSI Viewer, where every detail can be explo
 
 This repository contains examples of how to use and build your own applications.
 
-![Project Image](project.apng)
+[![Project Image](project.apng)][GHPages]
 
 ## Getting Started
 

package.json

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

project.yml

@@ -1,6 +1,7 @@
 ---
 title: 'FSI Showcase'
 projectURL: https://www.neptunelabs.com/fsi-showcase/
+schema: overview-taupe
 originAssetPath:
 playground:
   stackblitz: fsi-showcase-samples

samples/javascript-api/README.md

@@ -0,0 +1,103 @@
+# Product Detail Page - Using FSI Showcase for Thumbnail Image Zoom
+
+This readme describes how the detail page example is achieved with _FSI Showcase_.
+The aim of the demo is to show how you can easily integrate images with thumbnail zoom by simply adding
+two simple custom tags.
+
+To display the Showcase, simply add the following scripts to the head of your website:
+
+```html
+<script src="//fsi.domain.tld/fsi/viewer/applications/viewer/js/fsiviewer.js"></script>
+<script src="//fsi.domain.tld/fsi/viewer/applications/thumbbar/js/fsithumbbar.js"></script>
+```
+
+Normally you would need to place the *<fsi-viewer>* and <fsi-thumbbar> tag in your source code where you want the viewer to be displayed.
+
+In this example, we only want to display the viewer in a modal 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="thumbImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/living-room-7547558.jpg&width=600&height=600&effects=pad(CC,FFFFFF)" width="600" alt="">
+  <button type="button" id="thumbBtn" class="btn btn-lg btn-outline-dark" data-bs-target="#myModal" data-bs-toggle="modal">Show Zoom</button>
+</div>
+<div
+  id="myModal"
+  class="modal fade bd-example-modal-xl"
+  data-bs-backdrop="static"
+  data-bs-keyboard="false"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myExtraLargeModalLabel"
+  aria-hidden="true"
+>
+  <div class="modal-dialog modal-xl" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="display-5 modal-title fs-5" id="myModalToggleLabel"><b>Emma</b> - Bedside Table, Natural Wood</h2>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="showcase"
+             id="showcase"
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+`productContainer` is the div that contains all the elements.
+`thumbImg` is the image that will be displayed on load and replaced by the viewer.
+The `thumbBtn` button is used to switch from the image to the viewer.
+In the Bootstrap modal, the `showcase` div will contain the FSI viewer..
+
+The function itself can be found in the corresponding **script.js**.
+```javascript
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('thumbBtn').addEventListener('click', () => {
+
+    const container = document.getElementById('showcase');
+    if (container.firstChild) return; // viewers already setup
+
+    container.appendChild(
+      $FSI.createNode("fsi-viewer", {
+        id: "zoomViewer",
+        width: 1100,
+        height: 600,
+        skin: 'white',
+        debug: true
+      })
+    )
+
+    container.appendChild(
+      $FSI.createNode("fsi-thumbbar", {
+        src: "images/samples/ssi/furniture/living-room-7547558.jpg",
+        width: "100%",
+        height: 200,
+        debug: true,
+        imagesources: "images/samples/ssi/furniture/living-room-7547558.jpg, images/samples/ssi/furniture/living-room-7547559.jpg,images/samples/ssi/furniture/home-7547557.jpg",
+        useTouchZoom: false,
+        elementWidth: "350px",
+        elementSpacing: "4px",
+        alignment: 0.5,
+        paddingTop: 0,
+        autoCrop: "cc",
+        viewerSelector: "#zoomViewer"
+      })
+    );
+
+  })
+})
+
+```
+
+A click on the `thumbBtn` element will initialise a new FSI Viewer and a new FSI ThumbBar element in the `showcase` element.
+
+The viewers itself are created with `$FSI.createNode("fsi-viewer",{parameters})` and `$FSI.createNode("fsi-thumbbar",{parameters})`.
+
+It's important to put the ID of the FSI Viewer in the ` viewerSelector: "#zoomViewer"` to ensure it is used by the ThumbBar.

samples/javascript-api/config.yml

@@ -0,0 +1,29 @@
+overview:
+  title: JavaScript API
+  image: logo.png
+  description: Learn how to use the JavaScript ThumbBar API with a simple demo.
+  facts:
+    - Horizontal showcase
+    - With FSI ThumbBar and FSI Viewer assigned
+    - Modal
+  order: 10
+schema: bootstrap-taupe
+sample:
+  menu:
+    data: furniture-menu.yml
+  featured:
+    data: furniture-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        author: various artists
+        link: https://pixabay.com/
+        platform: Pixabay
+      viewer:
+        link: https://www.neptunelabs.com/fsi-showcase/
+  fsi:
+    viewer: true
+    thumbBar: true
+  bootstrap:
+    icons: true

samples/javascript-api/container.html

@@ -0,0 +1,63 @@
+<div class="container">
+  <div class="row row-cols-1 row-cols-lg-2 g-3 py-3 px-5">
+    <div class="col productContainer" id="productContainer">
+      <img id="thumbImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/living-room-7547558.jpg&width=600&height=600&effects=pad(CC,FFFFFF)" width="600" alt="">
+      <button type="button" id="thumbBtn" class="btn btn-lg btn-outline-dark" data-bs-target="#myModal" data-bs-toggle="modal">Show Zoom</button>
+    </div>
+    <div class="col mx-auto">
+      <div class="p-3 text-left">
+        <h2 class="display-5">Emma</h2>
+        <p>Bedside Table, Natural Wood</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>Convenient and stylish at the same time.</p>
+        <p>
+          With its elegant design, this bedside table is a timeless addition to your interior. Engineered wood is an exceptional quality material with a smooth surface that is characterised by strength, stability and moisture resistance.
+          The metal frame ensures sturdiness and stability and provides plenty of storage space to keep various everyday items well organised and within easy reach.
+        </p>
+        <p>
+          <small>Dispatched in 4 working days</small>
+        </p>
+        <div class="btn-group py-3">
+          <button type="button" class="btn btn-lg btn-outline-dark">Learn more</button>
+        </div>
+        <div class="btn-group py-3">
+          <button type="button" class="btn btn-lg btn-outline-dark">Add to basket</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    id="myModal"
+    class="modal fade bd-example-modal-xl"
+    data-bs-backdrop="static"
+    data-bs-keyboard="false"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="myExtraLargeModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-xl" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 class="display-5 modal-title fs-5" id="myModalToggleLabel"><b>Emma</b> - Bedside Table, Natural Wood</h2>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="showcase"
+            id="showcase"
+          >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

samples/javascript-api/script.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('thumbBtn').addEventListener('click', () => {
+
+    const container = document.getElementById('showcase');
+    if (container.firstChild) return; // viewers already setup
+
+    container.appendChild(
+      $FSI.createNode("fsi-viewer", {
+        id: "zoomViewer",
+        width: 1100,
+        height: 600,
+        skin: 'white',
+        debug: true
+      })
+    )
+
+    container.appendChild(
+      $FSI.createNode("fsi-thumbbar", {
+        src: "images/samples/ssi/furniture/living-room-7547558.jpg",
+        width: "100%",
+        height: 200,
+        debug: true,
+        imagesources: "images/samples/ssi/furniture/living-room-7547558.jpg, images/samples/ssi/furniture/living-room-7547559.jpg,images/samples/ssi/furniture/home-7547557.jpg",
+        useTouchZoom: false,
+        elementWidth: "350px",
+        elementSpacing: "4px",
+        alignment: 0.5,
+        paddingTop: 0,
+        autoCrop: "cc",
+        viewerSelector: "#zoomViewer"
+      })
+     );
+
+  })
+})

samples/javascript-api/style.css

@@ -0,0 +1,65 @@
+fsi-thumbbar div.fsi-thumbbar-container .fsi-thumbbar-thumbnail img {
+  border: 1px solid transparent;
+}
+
+fsi-thumbbar div.fsi-thumbbar-container .fsi-thumbbar-thumbnail.fsi-selected-thumb img {
+  border-color: #355d5d;
+}
+
+@media (max-width: 992px) {
+  .viewer {
+    height: 400px !important;
+  }
+}
+
+@media (max-height: 400px) {
+  .viewer {
+    height: 200px !important;
+  }
+}
+
+.productContainer {
+  position: relative;
+  height: 600px;
+  width: 600px;
+  padding: 0px;
+  margin: 0px;
+}
+
+.productContainer .img {
+  z-index: 10;
+  position: absolute;
+}
+
+.showcase {
+  width: 100%;
+  height: 100%;
+  display: flex !important;
+  flex-direction: column !important;
+  flex-wrap: nowrap !important;
+}
+
+
+.productContainer .btn {
+  position: absolute;
+  z-index: 15;
+  bottom: 2%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  background-color: white;
+  color: #555;
+  border: 1px solid #555;
+  font-size: 16px;
+  padding: 12px 24px;
+  cursor: pointer;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.productContainer .btn:hover {
+  background-color: #33b1aa;
+  color: white;
+  border: 1px solid #33b1aa;
+}
+