@oriun/timenjoy.js NPM

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

<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>

crypto-js

@everything-registry/sub-chunk-695 @infinitebrahmanuniverse/nolb-_ori

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago