diff --git a/example-integration.html b/example-integration.html index 00ad33577..031d47801 100644 --- a/example-integration.html +++ b/example-integration.html @@ -24,7 +24,7 @@

Ce simulateur calcule vos cotisations sociales pour vous permettre de jongler entre les différents types de salaire en France.

- +
diff --git a/iframe.html b/iframe.html deleted file mode 100644 index b1744a81e..000000000 --- a/iframe.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - Simulateur d'embauche - - - - - - -
- - - - diff --git a/source/components/pages/Header.js b/source/components/pages/Header.js index 555a3c8b3..d751a901e 100644 --- a/source/components/pages/Header.js +++ b/source/components/pages/Header.js @@ -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 diff --git a/source/components/themeColours.js b/source/components/themeColours.js index 2a053303a..fbdcb13c4 100644 --- a/source/components/themeColours.js +++ b/source/components/themeColours.js @@ -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 => diff --git a/source/containers/Layout.css b/source/containers/Layout.css index b0324b560..a07aacf0e 100644 --- a/source/containers/Layout.css +++ b/source/containers/Layout.css @@ -7,6 +7,7 @@ body { margin: 0; height: 100%; font-size: calc(8px + 0.35vw); + background: white; } #js, #js > div { diff --git a/source/containers/Layout.js b/source/containers/Layout.js index 648c7aaca..29da40d87 100644 --- a/source/containers/Layout.js +++ b/source/containers/Layout.js @@ -29,7 +29,6 @@ export default class Layout extends Component { render() { // track the initial pageview ReactPiwik.push(['trackPageView']) - return ( <> @@ -48,7 +47,6 @@ export default class Layout extends Component { - diff --git a/source/entry.js b/source/entry.js index b0a18e37d..af010aff9 100644 --- a/source/entry.js +++ b/source/entry.js @@ -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(, anchor) diff --git a/source/entry-iframe.js b/source/iframe-script.js similarity index 50% rename from source/entry-iframe.js rename to source/iframe-script.js index add7a3cd2..896b9bcdd 100644 --- a/source/entry-iframe.js +++ b/source/iframe-script.js @@ -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(` +}?couleur=${couleur}&iframe" style="border: none; width: 100%; display: block; margin: 0 auto; height: 45em" allowfullscreen webkitallowfullscreen mozallowfullscreen> `) diff --git a/source/reducers.js b/source/reducers.js index 7e183ee2f..4286eaf52 100644 --- a/source/reducers.js +++ b/source/reducers.js @@ -167,6 +167,8 @@ export default reduceReducers( done: (state = null) => state, + iframe: (state = false) => state, + themeColours, explainedVariable diff --git a/source/utils.js b/source/utils.js index e38a9a5a3..46f503eb0 100644 --- a/source/utils.js +++ b/source/utils.js @@ -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) -} diff --git a/source/webpack.config.js b/source/webpack.config.js index c07471906..6fc902862 100644 --- a/source/webpack.config.js +++ b/source/webpack.config.js @@ -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: {