@oriun/timenjoy.js
v1.1.2
Published
This README would normally document whatever steps are necessary to get your application up and running.
Downloads
13
Readme
README
This README would normally document whatever steps are necessary to get your application up and running.
Installation
yarn add @oriun/timenjoy.js
# or with npm
npm i @oriun/timenjoy.jsUsage
<html>
<head>...</head>
<body>
...
<div id='tnj'>
<!-- le widget s'insérera ici -->
Quelque chose à afficher au cas où une erreur empêche le widget de s'afficher.
</div>
...
</body>
</html>// Import du package dans un fichier js
import TimenjoyJS from '@oriun/timenjoy.js';
// Objet avec les options de personnalisation
const TNJOptions = {
type: "PageView",
app_secret: "[app_secret]",
city: "Paris",
distance: "50",
topevents: "false",
categories: "SPECTACLE"
}
// Initialisation d'un widget dans un element avec l'id tnj
const TNJwidget = new TimenjoyJS(
document.querySelector('#tnj'),
TNJOptions
)Dans un projet React
L'idéal est d'appeler la fonction une fois par widget, en la plaçant dans un componentDidMount ou un useEffect, puis d'arrêter le widget lorsque le composant est démonté. L'arrêt est facultatif.
Composant en classe
class MonComposant extends React.Component{
constructor(props){
...
this.tnjwidget = null;
}
componentDidMount(){
...
this.tnjwidget = new TimenjoyJS(
document.querySelector('#tnj'),
{/*options*/}
);
}
componentWillUnmount(){
...
this.tnjwidget.kill();
}
render(){
return (
<>
...
<div id="tnj">
...
</>
)
}
}Composant en fonction
const MonComposant = (props) => {
...
useEffect(()=> {
const tnjwidget = new TimenjoyJS(
document.querySelector('#tnj'),
{/*options*/}
)
return tnjwidget.kill
},[])
return <>
...
<div id="tnj">
...
</>
}Dans un projet Angular
L'idéal est d'appeler la fonction une fois par widget, en la plaçant dans un ngOnInit, puis d'arrêter le widget lorsque le composant est démonté dans un ngOnDestroy. L'arrêt est facultatif.
Template
<div>
...
<div id='tnj'>
<!-- le widget s'insérera ici -->
Quelque chose à afficher au cas où une erreur empêche le widget de s'afficher.
</div>
...
</div>Component
class MonComposant extends OnInit, OnDestroy {
tnjwidget = null
ngOnInit():void {
...
this.tnjwidget = new TimenjoyJS(
document.querySelector('#tnj'),
{/*options*/}
)
}
ngOnDestroy():void {
...
this.tnjwidget.kill()
}
...
}Dans un projet Vue
Vue2
<template>
<div class="hello">
<p>
...
</p>
<div id="tnj-tnj" style='width:80vw;height:500px'>TimenjoyJS renders here</div>
</div>
</template>
<script>
import TimenjoyJS from "@oriun/timenjoy-js";
let tnjwidget = null;
export default {
name: "MonComposant",
mounted: function() {
console.log('mounted')
tnjwidget = new TimenjoyJS(
document.querySelector("#tnj-tnj"),
{/*options*/}
)
},
unmounted: function(){
tnjwidget.kill()
}
};
</script>
Dans un projet svelte
:warning: L'utilisation de la dépendance crypto-js produit une erreur dans svelte, empêchant le lancement du projet. L'utilisation du package devrait ressembler au code ci-dessous :
<main>
...
<div id='tnj'></div>
...
</main>
<script>
import TimenjoyJS from "@oriun/timenjoy.js";
import { onMount, onDestroy } from "svelte";
let tnjwidget = null ;
onMount(() => {
tnjwidget = new TimenjoyJS(document.querySelector("#tnj"), {
type: "PageView",
app_secret: "[app_secret]",
city: "Nice",
distance: "50",
topevents: "false",
wmark: "true",
categories: "SPECTACLE",
});
});
onDestroy(()=>{
tnjwidget.kill()
});
</script>