Call function inside module on javascript? - javascript

I'm starting a project that uses three.js library, and I will use also a parallax library. The 3D effects will be only decorative, but parallax will trigger it.
I modified this example and works fine for me:
demo: https://threejs.org/examples/#webgl_geometry_text_shapes
code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text_shapes.html
...but I need to send the title of every section (when the user enter on it by scrolling down) to the 3D script code, and it is closed inside a module.
...How to to it? I'm newbie into three.js and modules, and want to keep the parallax as is (outside module, because it's a well-known library and part of developed yet project)
Maybe the right way is transform the sample code, without modules... but I'm lost with it... for example, the starting part of JS in module, are:
import * as THREE from 'three';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { SVGLoader } from './jsm/loaders/SVGLoader.js';
import { FontLoader } from './jsm/loaders/FontLoader.js';
...how to do it without modules / import?
Thanks in advance
==================================
I add an example (maximum simplified) about what I need (and not works):
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - simple text from json</title>
</head>
<body>
<script type="module">
init();
function init() {
function hi( text) {
alert(text);
}
} // end init
</script>
<script>
init().hi("hi world");
</script>
</body>
</html>

I solved this turning the code into regular JS, not module JS.
In the library three.js, there is for each control a version for module (into /jsm folder) and normal JS version (/js folder).
Also changed the main file three.module.js for three.js file.
Thank you

Related

How do I nest this React component in another React component?

Kind of embarrassing, since I worked as a React developer for over a year. But the system was set up when I came in, and when I created new components I just followed the syntax for the existing components and everything worked. But trying to do even simple React stuff on my home system has been really challenging. I'm not sure the problem is in my syntax, but maybe in my javascript environment.
Here is a simple thing that works:
react-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-test-2</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="React_Components/AAA.js"></script>
<script>
$(document).ready(function() {
const domContainer = document.querySelector('#react-container');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(AAA));
});
</script>
</head>
<body>
<div id="react-container"></div>
</body>
</html>
AAA.jsx
function AAA(){
return (<div>AAA</div>);
}
The .jsx files are in React_Components_JSX, which is watched by the Babel preprocessor, which makes analogous .js files in React_Components. When I navigate to the html page, it renders the expected "AAA" on the page.
Now I'm just trying to nest another component inside the AAA component. So I update the file AAA.jsx and create a file BBB.jsx, something like the following (although I have tried various syntaxes hoping to make this work). I am expecting to see a webpage that renders "AAABBB".
AAA.jsx
import BBB from '../React_Components_JSX/BBB.jsx';
function AAA(){
return (<div>AAA<BBB/></div>);
}
BBB.jsx
export default function BBB(){
return (<div>BBB</div>);
}
The main error I am getting is "Cannot use import statement outside a module". Which I know explains the problem, but I don't really understand what that means on a fundamental level, as far as how I have to set my application up.

Import statement desynchronises code execution

currently learning Javascript and building a simple web application. Here, I am trying to display a chart using apex charts. When I do not include the import statement highlighted, then the chart displays fine on the webpage, when an import (or any other code within that file) is included, the chart no longer appears on the webpage. I am only starting to understand the asynchronous nature of JS so I have assumed it has got to do something with that. Any help is appreciated!
import { datapoints } from "./main.js"; // When this line is commented out or removed, the chart renders fine
var options = {
chart: {
type: 'candlestick'
},
series: [{
data: [
[1147651200000,67.37,68.38,67.12,67.79],
[1147737600000,68.10,68.25,64.75,64.98],
[1147824000000,64.70,65.70,64.07,65.26],
[1147910400000,65.68,66.26,63.12,63.18],
[1147996800000,63.26,64.88,62.82,64.51],
[1148256000000,63.87,63.99,62.77,63.38],
[1148342400000,64.86,65.19,63.00,63.15],
[1148428800000,62.99,63.65,61.56,63.34],
[1148515200000,64.26,64.45,63.29,64.33],
[1148601600000,64.31,64.56,63.14,63.55],
[1148947200000,63.29,63.30,61.22,61.22],
[1149033600000,61.76,61.79,58.69,59.77]
]
}]
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Browsers support the import statement, but only when enabled in a module script. You can enable a module script by adding type="module" to your HTML script tag. Here's a simple example of setting up import statements for the browser:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<script type="module" src="./script.js" defer></script>
</head>
<body>
<!-- ... -->
</body>
</html>
// script.js
import { datapoints } from "./main.js"; // this should work without errors
// ...
Note that if you do plan to scale an application, you may want to consider using a framework or a bundler such as Webpack, Parcel, or Vite.

Integrate Salvattore inside my Aurelia application

I tried to integrate Salvattore (Masonry alternative in CSS) inside my Aurelia app but unfortunately it doesn't work. After trying a lot of things I'm disappointed and think maybe it is not possible at all to have Salvattore working inside an Aurelia app.
Here is what I did: I created a new Aurelia project thanks to the CLI au new and inside this project I created an html page inside my Aurelia project with this code:
<div id="grid" data-columns>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
<div>Item #4</div>
</div>
With this css:
#grid[data-columns]::before {
content: '3 .column.size-1of3';
}
/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }
At first, I tried simply to reference Salvattore's js code inside my index.html page (just above the close body tag) like this:
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height />
</head>
<body aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script src="javascript/salvattore.min.js"></script>
</body>
</html>
It doesn't work, I got errors in the console.
I also tried to install Salvattore through npm install salvattore --save and I add it in the aurelia.json. In main.ts I tried to reference it: import 'salvattore'; but it doesn't work neither. I mean, no errors this time but nothing happened. Finally I tried to inject the Salvattore js script directly inside my page at the end thanks to the scriptinjector component. Once again, it dosn't work, nothing happened.
Do I have to draw the conclusion that Salvattore is simply not compatible with any Aurelia projects ? In that case, do you know any alternative ?
Below sample codepen using Salvattore in a basic html page (not Aurelia)
https://codepen.io/mitour/pen/wWMOvw
You have to understand cli bundler is an AMD bundler. Your <script src="javascript/salvattore.min.js"></script> is below vendor-bundle, so an AMD loader (requirejs/systemjs) is already in place when browser reads salvattore.min.js. That's why salvattore tries to load itself as an AMD module instead of creating a global var.
You can move salvattore.min.js to above vendor-bundle script tag.
Or using prepend in aurelia.json, add salvattore before requirejs in the prepend list.
The other thing you can try is to use it as a module. Don't add script tag in html, don't add it prepend. But add this line in your main.js or main.ts.
import "salvattore"; // this will load it as an AMD module
Here is the solution:
In package.json add "salvattore": "^1.0.9"
In aurelia.json add "salvattore"
In your typescript page (.ts):
import * as salvattore from 'salvattore';
export class MyPage {
attached() {
salvattore.init();
}
}

How to import or use external JS files and functions in my angular web application

I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}

Phaser state manager can't find certain states?

My index.html file seems to include all of the necessary JS files, and then defines their state. This is what I've seen people do online and it works fine for them.
<html>
<head>
<meta charset = "UTF-8"/>
<title>Test</title>
<script src = "phaser.js"></script>
<script src = "Boot.js"></script>
<script src = "Preload.js"></script>
<script src = "MainMenu.js>"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var game = new Phaser.Game(800,600,Phaser.AUTO,'');
game.state.add('Boot',Game.Boot);
game.state.add('Preload',Game.Preload);
game.state.add('MainMenu',Game.MainMenu);
game.state.start('Boot');
}
</script>
</body>
</html>
My problem is that while this code successfully changes state from Boot.js to Preload.js, it claims that there is "No state found with the key: MainMenu". I'm super confused, and I'm using Phaser version 2.6.1
For the sake of your weary eyes, I've included the Boot.js file, the Preload.js and the MainMenu.js file in one concatenated Pastebin here: http://pastebin.com/sJYTsCdY .
Sorry if I've made any etiquette mistakes, this is my first time posting to StackOverflow. Any help would be appreciated, thanks!!
Try changing Game.MainMenu to Game.MainMenu.prototype at row 76 in the pastebin.
What I supposе is happening is Phaser tries to add MainMenu as a new state and when it tries to instantiate it, it fails because there is no function to act as constructor (that it needs when using new and that's what Phaser uses internally when adding a state). You define Game.MainMenu = function() { } which acts as a constructor at first, but then you override it (you assign something else to the same Game.MainMenu) and it happens that Phaser can no longer create an instance of MainMenu.

Categories