betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Simplification de l'architecture iframe 

Le mode plein écran a un fond noir sur Firefox au moins
pull/132/head
mama 2018-01-15 21:01:05 +01:00
parent 518d8ead5d
commit 4285f74bab
11 changed files with 24 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example-integration.html
View File

@ -24,7 +24,7 @@
<p>Ce simulateur calcule vos cotisations sociales pour vous permettre de jongler entre les différents types de salaire en France.</p>
</section>
<section id="module">
<script id="script-simulateur-embauche" src="dist/simulateur.js" data-couleur="#333"></script><!-- Exemples de couleur : #1F4382 - #3570B8 - #2975D1 - #4A9DED-->
<script id="script-simulateur-embauche" src="/dist/simulateur.js" data-couleur="#768567"></script><!-- Exemples de couleur : #1F4382 - #3570B8 - #2975D1 - #4A9DED-->
</section>
</body>

31
iframe.html
View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<!-- See how this iframe must be used in ./example-integration.html -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Simulateur d'embauche</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="js" />
<script type="text/javascript">
var couleur = window.location.search
.substring(1) //get rid of "?" in querystring
.split('=')[1]
var scriptEl = document.createElement('script')
scriptEl.setAttribute('type', 'text/javascript')
scriptEl.setAttribute('src', 'dist/bundle.js')
scriptEl.setAttribute('couleur', '#' + couleur)
scriptEl.setAttribute('iframe', true)
document.body.appendChild(scriptEl)
</script>
<script src="https://use.fontawesome.com/1da10bbdec.js"></script>
</body>
</html>

5
source/components/pages/Header.js
View File

@ -1,9 +1,12 @@
import React, { Component } from 'react'
import 'Components/pages/Header.css'
import { Link } from 'react-router-dom'
import { getJsScriptAttribute } from '../../utils'
import screenfull from 'screenfull'
import { connect } from 'react-redux'
@connect(state => ({
iframe: state.iframe
}))
export default class Header extends Component {
state = {
mobileNavVisible: false

6
source/components/themeColours.js
View File

@ -1,11 +1,9 @@
import findContrastedTextColour from './findContrastedTextColour'
import { getJsScriptAttribute } from '../utils'
export default forcedThemeColour => {
let scriptColour = getJsScriptAttribute('couleur'),
// Use the default theme colour if the host page hasn't made a choice
let // Use the default theme colour if the host page hasn't made a choice
defaultColour = '#2975D1',
colour = forcedThemeColour || scriptColour() || defaultColour,
colour = forcedThemeColour || defaultColour,
textColour = findContrastedTextColour(colour, true), // the 'simple' version feels better...
inverseTextColour = textColour === '#ffffff' ? '#000' : '#fff',
lightenTextColour = textColour =>

1
source/containers/Layout.css
View File

@ -7,6 +7,7 @@ body {
margin: 0;
height: 100%;
font-size: calc(8px + 0.35vw);
background: white;
}
#js,
#js > div {

2
source/containers/Layout.js
View File

@ -29,7 +29,6 @@ export default class Layout extends Component {
render() {
// track the initial pageview
ReactPiwik.push(['trackPageView'])
return (
<Router history={piwik.connectToHistory(this.history)}>
<>
@ -48,7 +47,6 @@ export default class Layout extends Component {
<Route path="/contribuer" component={Contribution} />
<Redirect from="/simu/" to="/" />
<Redirect from="/simulateur" to="/" />
<Redirect from="/iframe.html" to="/" />
<Redirect from="/couleur.html" to="/" />
<Route component={Route404} />
</Switch>

11
source/entry.js
View File

@ -5,9 +5,18 @@ import App from './containers/App'
import reducers from './reducers'
import DevTools from './DevTools'
import { AppContainer } from 'react-hot-loader'
import computeThemeColours from './components/themeColours'
let store = createStore(reducers, compose(DevTools.instrument()))
let url = window.location.href.toString(),
urlColour = url.includes('couleur=')
let initialStore = {
iframe: url.includes('iframe'),
themeColours: computeThemeColours(
urlColour && url.split('couleur=')[1].split('&')[0]
)
}
let store = createStore(reducers, initialStore, compose(DevTools.instrument()))
let anchor = document.querySelector('#js')
render(<App store={store} />, anchor)

4
source/entry-iframe.js → source/iframe-script.js
View File

@ -1,10 +1,10 @@
// Get the "couleur" parameter passed to this script
let script = document.getElementById('script-simulateur-embauche'),
couleur = script.dataset['couleur'].replace('#', ''),
couleur = script.dataset['couleur'],
src = script.getAttribute('src')
document.write(`
<iframe id="simulateurEmbauche" src="${
src.split('dist')[0]
}iframe.html?couleur=${couleur}" style="border: none; width: 60em; display: block; margin: 0 auto; height: 45em" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
}?couleur=${couleur}&iframe" style="border: none; width: 100%; display: block; margin: 0 auto; height: 45em" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
`)

2
source/reducers.js
View File

@ -167,6 +167,8 @@ export default reduceReducers(
done: (state = null) => state,
iframe: (state = false) => state,
themeColours,
explainedVariable

5
source/utils.js
View File

@ -1,6 +1 @@
export let capitalise0 = name => name[0].toUpperCase() + name.slice(1)
export let getJsScriptAttribute = attribute => () => {
let script =
document.currentScript || [...document.getElementsByTagName('script')].pop()
return script && script.getAttribute(attribute)
}

3
source/webpack.config.js
View File

@ -14,7 +14,8 @@ module.exports = {
'react-hot-loader/patch',
'./source/entry.js'
],
simulateur: './source/entry-iframe.js',
// le nom "simulateur" est là pour des raisons historiques
simulateur: './source/iframe-script.js',
'colour-chooser': ['@babel/polyfill', './source/entry-colour-chooser.js']
},
output: {