3DVista and Next.js

Brandon LeBoeuf — Thu, 30 Dec 2021 22:10:13 +0000

Use 3DVista in a Next.js app

The default export for 3DVista's Virtual Tour PRO is not supported for frameworks like React or Next.js. Below are the steps that need to be taken in order to get 3DVista working on next.js.

Tested it on:

Mac: Chrome/Safari/Firefox
PC: Chrome/Safari/Firefox
iPhone: Safari/Chrome
iPad: Safari/Chrome

1. Export from 3DVista

Click Publish
Select For Web / Mobile
Set the Destination to a New Folder called 3DVista (this will end up in you next.js projects /public directory)
Click Publish

2. Add to next.js project

Add the newly created 3DVista folder into the pages directory of your project

3. Move files/folders

Move these files from /pages/3DVista to /public:
- /lib
- /locale
- /media
- script_general.js
- script.js

4. Update CSS

Create a new file called 3dvista.css
Remove all declarations in the style tag in /pages/index.htm and place them in 3dvista.css
Remove all inline styles, replacing with a class, and putting these classes into 3dvista.css
import 3dvista.css file at the top of _app.js

5. Edit index.htm

Rename index.htm to index.jsx
Remove outer html and head tags and the !DOCTYPE declaration:

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>

Convert to a functional component

import Head from "next/head";

export default function index() {
  return (
    <div>
      <Head>
      ...
      </Head>
      <section>
      ...
      </section>
    <div>
  )

Convert script tag to dangerouslySetHtml:

<script type="text/javascript">
  var tour;
  var devicesUrl = {"general":"script_general.js?v=1640882506117"};

  (function() {
    var deviceType = ['general'];
...
  }
</script>

to (*see bonus for alternate strategy here)

<script
  type="text/javascript"
  dangerouslySetInnerHTML={{
    __html: `
      let tour;
      let devicesUrl = { general: "script_general.js" };

      (function () {
        let deviceType = ["general"];
      ...
      `
</script>

NOTE: Be sure to have the __html wrapped in backticks `` to avoid single/double quote conflicts

Remove this comment which is causing an error: `//Force hide. Some cases the transitionend event isn't dispatched with an iFrame.`
Remove the `isSafariDesktopV11orGreater()` function, as its causing an error
Replace all instances of `/Mobile\/\w+/` with `/Mobile/`, as they are causing a regex error
There are query parameters on the .txt, .js, and .jpg in the link and script tags that need to be removed. Locate this (looks something like this ?v=1640882506117) at the first link tag within the head tag. Remove All occurrences of this query parameter throughout the document (highlight, right click and select "Change All Occurrences")

THATS IT!

Hope this is helpful to someone else out there in the interwebz :)

Closures in JavaScript can...

Brandon LeBoeuf — Fri, 04 Sep 2020 18:38:25 +0000

An attempt to understand Closures in JavaScript

I gain more understanding of a topic when I get to talk/write about it... much to my wife's horror as she has zero interest in JavaScript (though she is kind and will still listen)!

In processing my current understanding of closures, I hope that you find it helpful as well!

Global Scope

When variables are declared in the global scope, they are accessible by any part of your application.

let val = 0;  
val += 1;

console.log(val); // 1

This data is exposed throughout the application...

You can isolate, or protect, the data from the rest of your application by using closures...

function() {
  let val = 0;
};  

val += 1;

console.log(val); // ReferenceError: val is not defined

val +=1 no longer has access to change val.

Execution Context

Within a function, a new execution context is initialized in which variables can be created, mutated, reassigned, and/or read. Unless something gets returned out of that function, it exists in that functions execution context and in that context alone.

After completion, everything that was created within the execution context is gone, and the only thing that remains is that which was returned.

Clousers allow you to isolate and protect data so that it can only be accessed by certain parts of your application, keeping that data isolated.

Closures

Here, nothing can change the data inside of assignValue due to closures, {}.

function assignValue() {
  let val = 0;
  return val += 1;
};

let newVal = assignValue();

console.log(newVal);  // 1

newVal is assigned the result of calling the function assignValue.

Once that execution context is completed, the only thing that remains from the function is that which was returned. Everything inside the execution context is gone, and only what was returned gets stored in newVal.

The data inside assignValue remains isolated from the rest of our applications.

NOTE
val +=1 would still throw a ReferenceError

Maintain State

What if we want part of our application to be able to interact with that data?

Instead of just incrementing a number and returning it, we will create a new function inside the execution context (which still accomplishes the same task as before) but then returns that new function instead.

function assignValue() { 
 let val = 0;
  
 function addOne() {
   return val += 1; 
 };

 return addOne;
};

const newVal = assignValue();

console.log(newVal()); // 1
console.log(newVal()); // 2
console.log(newVal()); // 3

Since the function addOne had access to the variables within the original execution context, we can still increment val, even though the initial execution context of assignValue is now gone.

We are able to maintain state, while still isolation the values inside assignValue from the rest of our application.

Final Thoughts

Closures can allow you to prevent other parts of your application from being able to interact with data.

You can use Closures to isolate state from the rest of your application.

DEV Community: Brandon LeBoeuf