Script d'intégration pour chacun des 4 modules
Mael
parent
3ea4a5b0e2
commit
f1e9c63c01
|
|
@ -1,41 +1,3 @@
|
|||
#integration p {
|
||||
margin-top: 3em;
|
||||
vertical-align: top;
|
||||
}
|
||||
#integration i {
|
||||
margin-right: 0.6em;
|
||||
color: #3c4963;
|
||||
}
|
||||
#integration code {
|
||||
display: inline-block;
|
||||
font-size: 80%;
|
||||
width: 90%;
|
||||
padding: 1em;
|
||||
background: #f8f8f8;
|
||||
margin: auto;
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), -1px 1px 1px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
#integration code em {
|
||||
font-weight: 300;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#integration code:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 0 16px 16px 0;
|
||||
border-style: solid;
|
||||
border-color: #e8e8e8 white;
|
||||
}
|
||||
|
||||
#scriptColor {
|
||||
color: #2975d1;
|
||||
}
|
||||
|
||||
section#integrations a {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import cciLogo from './images/cci.png'
|
|||
import minTraLogo from './images/min-tra.jpg'
|
||||
import poleEmploiLogo from './images/pole-emploi.png'
|
||||
import './Integration.css'
|
||||
import { IntegrationCode } from '../../pages/Dev/IntegrationTest'
|
||||
|
||||
export default function Integration() {
|
||||
const [opened, setOpened] = useState(false)
|
||||
|
|
@ -23,21 +24,7 @@ export default function Integration() {
|
|||
<div>
|
||||
<h1>Intégrez le module Web</h1>
|
||||
<p>En ajoutant une ligne à votre page Web :</p>
|
||||
<code>
|
||||
<span>{'<'}</span>
|
||||
<em>
|
||||
script
|
||||
<br />
|
||||
id
|
||||
</em>
|
||||
="script-simulateur-embauche" <em>data-couleur</em>="
|
||||
<span id="scriptColor">#2975D1</span>" <em>src</em>
|
||||
="https://mon-entreprise.fr/simulateur-iframe-integration.js">
|
||||
<span>{'<'}</span>
|
||||
<span>/</span>
|
||||
<em>script</em>
|
||||
<span>></span>
|
||||
</code>
|
||||
<IntegrationCode />
|
||||
<p>
|
||||
Vous pouvez{' '}
|
||||
<strong>choisir la couleur principale du module</strong> pour le
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react'
|
||||
import React, { Suspense } from 'react'
|
||||
let LazyColorPicker = React.lazy(() => import('./ColorPicker'))
|
||||
|
||||
const integrableModuleNames = [
|
||||
'simulateur-embauche',
|
||||
|
|
@ -11,26 +12,107 @@ export default function IntegrationTest() {
|
|||
const [currentModule, setCurrentModule] = React.useState(
|
||||
integrableModuleNames[0]
|
||||
)
|
||||
const [colour, setColour] = React.useState('#005aa1')
|
||||
const [version, setVersion] = React.useState(0)
|
||||
const domNode = React.useRef(null)
|
||||
React.useEffect(() => {
|
||||
const script = document.createElement('script')
|
||||
script.id = 'script-monentreprise'
|
||||
script.src = window.location.origin + '/simulateur-iframe-integration.js'
|
||||
script.dataset.module = currentModule
|
||||
script.dataset.couleur = '#005aa1'
|
||||
script.dataset.couleur = colour
|
||||
domNode.current.innerHTML = ''
|
||||
domNode.current.appendChild(script)
|
||||
}, [currentModule])
|
||||
}, [version])
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Les 4 simulateurs mon-entreprise.fr sont disponibles à l'intégration sur
|
||||
un site tiers. Ils sont hébergés chez nous, et il suffit de placer un
|
||||
simple bout de code Javascript dans votre code HTML.
|
||||
</p>
|
||||
<p>Choisissez d'abord le module et la couleur qui vous conviennent.</p>
|
||||
<h2>Quel module ?</h2>
|
||||
<select onChange={event => setCurrentModule(event.target.value)}>
|
||||
{integrableModuleNames.map(name => (
|
||||
<option key={name}>{name}</option>
|
||||
))}
|
||||
</select>
|
||||
<div style={{ border: '2px solid blue' }}>
|
||||
<div ref={domNode} />
|
||||
|
||||
<h2>Quelle couleur ?</h2>
|
||||
<Suspense fallback={<div>Chargement...</div>}>
|
||||
<LazyColorPicker colour={colour} onChange={setColour} />
|
||||
</Suspense>
|
||||
|
||||
<button
|
||||
className="ui__ button plain"
|
||||
onClick={() => setVersion(version + 1)}>
|
||||
{!version ? 'Visualiser le module' : 'Valider les changements'}
|
||||
</button>
|
||||
|
||||
<div
|
||||
css={`
|
||||
display: ${version > 0 ? 'block' : 'none'};
|
||||
`}>
|
||||
<p>Code d'intégration </p>
|
||||
<IntegrationCode colour={colour} module={currentModule} />
|
||||
<div style={{ border: '2px dashed blue' }}>
|
||||
<div ref={domNode} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export let IntegrationCode = ({
|
||||
module = 'simulateur-embauche',
|
||||
colour = '#2975D1'
|
||||
}) => (
|
||||
<code
|
||||
css={`
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
width: 90%;
|
||||
padding: 1em;
|
||||
background: #f8f8f8;
|
||||
margin: auto;
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05),
|
||||
-1px 1px 1px rgba(0, 0, 0, 0.02);
|
||||
|
||||
em {
|
||||
font-weight: 300;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 0 16px 16px 0;
|
||||
border-style: solid;
|
||||
border-color: #e8e8e8 white;
|
||||
}
|
||||
#scriptColor {
|
||||
color: #2975d1;
|
||||
}
|
||||
`}>
|
||||
<span>{'<'}</span>
|
||||
<em>
|
||||
script
|
||||
<br />
|
||||
id
|
||||
</em>
|
||||
="script-simulateur-embauche"
|
||||
<em>data-module</em>="
|
||||
<span>{module}</span>"<em>data-couleur</em>="
|
||||
<span id="scriptColor">{colour}</span>" <em>src</em>
|
||||
="https://mon-entreprise.fr/simulateur-iframe-integration.js">
|
||||
<span>{'<'}</span>
|
||||
<span>/</span>
|
||||
<em>script</em>
|
||||
<span>></span>
|
||||
</code>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue