Integrate Salvattore inside my Aurelia application - javascript

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();
}
}

Related

Call function inside module on 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

Exclude Vue Component from stylesheet of existing application

We build a Vue component(using vuetify) into an existing .net MVC application.
The application loads the webpack into a div.
The problem is that the vue component inherits all the CSS of the existing application.
A simplified HTML version looks like this:
<html>
<head>
</head>
<body>
...
<div class="VUE_CLASS">
//vue component...
</div>
...
</body>
</html>
The Style is written in css.less.
I tried to exclude the VUE_CLASS from all CSS Rules of the existing application by applying a :not(.VUE_CLASS) and a div:not(.VUE_CLASS). I also tried to wrap it around all rules in the css.less:
*:not(.VUE_CLASS){
//...css rules of the existing application
}
It doesn't work
I read about some other strategies (https://kloudless.com/blog/2019/02/05/creating-a-reusable-vuetify-component-to-use-in-other-apps/). Using an iframe is not an option because we can't access our backed from an iframe. I can't use Web components as well, because we have to support ie11.
Is it possible to exclude the div and all its child elements using less?
Thank you & Best regards,
Finn
What if you just reset all CSS styles for VUE_CLASS selector?
Try adding this rule at the end of the <style> tag:
.VUE_CLASS {
all: unset !important;
/* Write the other styles for this component below */
}

How to activate Material Design JS?

import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
#import "#material/textfield/mdc-text-field";
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
I'm learning to work with Material Design. I thought it worked like bootstrap, meaning there is a CDN and then you just add the classes you need, so I got the CDN from this link:
https://material.io/develop/web/docs/getting-started/
After I added the CDN I got the css working, but not JavaScript. In the instructions it says:
…and instantiate JavaScript:
mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
How do I instantiate Javascript?
I tried to put this code between script tags, but that didn't work. I think I'm missing some code here.
Update: The JS CDN seem to work but in each compenente I get an instruction for JavaScript Instantiation for example in this link:
https://material.io/develop/web/components/input-controls/text-field/
import {MDCTextField} from '#material/textfield'; const textField =
new MDCTextField(document.querySelector('.mdc-text-field'))
My question is where do i insert this code for the component to work.
you need to add mdc.{component}.MDC{component} instead if you use cdn
const textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<span class="mdc-floating-label" id="my-label-id">Hint text</span>
<input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
<span class="mdc-line-ripple"></span>
</label>
Please also mention how your code looks like right now.
Based on your question, it seems like you may have missed to mention script tag with material design URL in your HTML head tag. Add following code and see if it helps.
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
Because the browser doesn’t understand ES6 modules just yet, we need tools to make them work today. A JavaScript bundler takes in our Modules and compiles them into a single JavaScript file or multiple bundles for different parts of your application.
There are few popular bundlers like webpack, Browserify, Rollup, JSPM etc.
In your case, you are just starting off on how to use modules, you may face difficulties implementing boilerplate for importing modules ES2015 way.
However, you may want to clone Material Design repo because it gives you boilerplate that enables to you to use import module function right away, this will be straight forward and clear to you
https://codelabs.developers.google.com/codelabs/mdc-101-web/#1
Prior to get started on this, you need to install GIT, Node, and NPM on your machine.
Clone their starter repo and cd into cloned directory
git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter
Now, install all the dependancies listed in package.json with following command
npm install
and then run
npm start
it should start up development server. Now you can change index.html and create or change existing js files according to your requirement
For React users, make sure that you put the instantiate code in the Mounting phase, which means put new MDCTextField(Element) in the componentDidMount() function.
import './textfield.scss';
import React from 'react';
import { MDCTextField } from '#material/textfield';
export default class TextField extends React.Component {
// initialize the component after all DOM elements are well rendered
componentDidMount() {
const textfield = new MDCTextField(document.querySelector('.mdc-text-field'));
}
render() {
return (
<label className="mdc-text-field mdc-text-field--outlined">
<span className="mdc-notched-outline">
<span className="mdc-notched-outline__leading"></span>
<span className="mdc-notched-outline__notch">
<span className="mdc-floating-label" id="my-label-id">Your Name</span>
</span>
<span className="mdc-notched-outline__trailing"></span>
</span>
<input type="text" className="mdc-text-field__input" aria-labelledby="my-label-id"/>
</label>
);
}
}
I think the CDN JavaScript source might rely on jQuery in order to run. If my assumptions are correct, you will need to add a script tag referencing jquery before you load the material.io scripts.
jQuery CDN

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();
}

Unable to import one Svelte component into another

I've been really intrigued by Svelte when I went through the documentation yesterday, but I'm struggling to set up even a pretty basic project and I can't seem to figure out what I'm doing wrong.
I'm starting out with the following HTML :
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
Then, I create the following App.html component :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
export default {}
</script>
I run svelte compile --format iife App.html > App.js, and everything works fine.
So far, so good!
Now, I create a Line.html component with the following content :
<div class="line">{{value}}</div>
<script>
export default {}
</script>
I modify my App.html component like this :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
import Line from './Line.html';
export default {
oncreate() {
const line = new Line({
target: document.querySelector( 'lines' ),
data: {
value: 'test'
}
});
}
}
</script>
I would expect this code to add something like <div class="line">test</div> to the DOM as a child of <div class="lines"></div>.
However, I get the following warning when I compile this code :
No name was supplied for imported module './Line.html'.
Guessing 'Line', but you should use options.globals
And when I try to run the compiled code, I just get the following output in my console :
App.js:250 Uncaught ReferenceError: Line is not defined at App.js:250
index.html:10 Uncaught TypeError: App is not a constructor at index.html:10
What am I doing wrong here?
Note
I also raised this issue on Github.
Copying the answer from GitHub:
svelte-cli works on individual files — you would need to compile Line.html separately, and include it on the page like so:
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='Line.js'></script> <!-- one for each component! -->
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
It will guess that Line.js is defining a global variable called Line, which is how App.js is able to reference it — but it prefers that you're explicit about that, by using the --globals option.
Needless to say, this is a huge pain — it doesn't scale at all past a certain point. For that reason we recommend that you use a build tool with Svelte integrated. That way, you don't have to worry about juggling all the different imported files, and as a bonus Svelte is able to generate more compact code (because it can deduplicate some helper functions between components).
The easiest way to get started — and I keep meaning to write a very short blog post about this — is to click the 'download' button in the REPL. That will give you a basic project setup that you can get running with npm run dev and npm start. Under the hood it uses Rollup to create a bundle that can run in the browser.
Here's your test app running in the REPL. Notice that the way we use the <Line> component is by declaring it using components, and just writing it into the template, rather than manually instantiating it with oncreate.

Categories