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.js
Usage
<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
<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>