Merge pull request #204 from sgmap/es15

ES2015

Author: laem

.eslintrc

@@ -23,6 +23,8 @@ rules:
  space-before-blocks: 2
  no-console: 1
 
+parser: babel-eslint
+
 env:
  browser: true
  commonjs: true

dist/bootstrap-compat.js

@@ -1,14 +1,9 @@
-var MAPPING = {
+const MAPPING = {
 	'.SGMAPembauche form > div': 'form-inline',
 	'.SGMAPembauche input, .SGMAPembauche select': 'form-control',
 }
 
-
-for (var selector in MAPPING) {
-	if (! MAPPING.hasOwnProperty(selector))
-		continue
-
-	Array.prototype.forEach.call(document.querySelectorAll(selector), function(element) {
-		element.classList.add(MAPPING[selector])
-	})
-}
+Object.keys(MAPPING).forEach(selector => {
+	[ ...document.querySelectorAll(selector) ]
+		.forEach(element => element.classList.add(MAPPING[selector]))
+})

dist/cout-embauche-widget.js

@@ -1,18 +1,18 @@
-var UI = require('./ui.js'),
-	OpenFisca = require('./openfisca.js'),
-	debounce = require('../lib/debounce.js')
+import UI from './ui.js'
+import OpenFisca from './openfisca.js'
+import debounce from '../lib/debounce.js'
 
 
 /** Handle events from the given form to update data.
 */
 function bindToForm(form) {
 	form.addEventListener('change', UI.reflectParameterChange)
 
-	var handleBasicFormChanges = debounce(OpenFisca.update.bind(form), 300)
+	const handleBasicFormChanges = debounce(OpenFisca.update.bind(form), 300)
 
 	handleBasicFormChanges()
 
-	var handleFormChanges = function(event) {
+	const handleFormChanges = event => {
 		switch (event.target.name) {
 		case 'code_postal_entreprise':
 			handleCodePostalInput(event.target.value, handleBasicFormChanges)
@@ -37,52 +37,44 @@ function handleCodePostalInput(codePostal, next) {
 	if (codePostal.length !== 5)
 		return UI.displayCommunesFetchResults()
 
-	var request = new XMLHttpRequest()
-	request.onload = function() {
-		try {
-			if (request.status !== 200)	throw new Error(request.responseText)
-
-			var data = JSON.parse(request.responseText)
-			if (data.length === 0) {
-				UI.displayCommunesFetchResults('Aucune commune correspondante trouvée')
-				return
+	fetch(`https://apicarto.sgmap.fr/codes-postaux/communes/${codePostal}`)
+		.then(response => {
+			if (!response.ok) {
+				const error = new Error(response.statusText)
+				error.response = response
+				throw error
 			}
-			UI.displayCommunesFetchResults('', data)
-		} catch (err) {
+			return response.json()
+		})
+		.then(json => {
+			if (json.length === 0)
+				UI.displayCommunesFetchResults('Aucune commune correspondante trouvée')
+			else
+				UI.displayCommunesFetchResults('', json)
+		})
+		.catch(error => {
 			UI.displayCommunesFetchResults('Le code postal n\'a pas pu être pris en compte')
-			console.error(err)
-		} finally {
-			next()
-		}
-	}
-
-	request.onerror = function() {
-		UI.displayCommunesFetchResults('Le code postal n\'a pas pu être pris en compte (réseau faible ?)')
-		next()
-	}
-
-	request.open('GET', 'https://apicarto.sgmap.fr/codes-postaux/communes/' + codePostal)
-	request.send()
+			console.error(error)
+		})
+		.then(next)
 }
 
 /*
 contrat_de_travail <select> value can trigger the display
 of the heures_remunerees_volume <input> field.
 */
 function handleTempsPartielSelect(contrat, next) {
-	var container = document.querySelector('#temps_partiel_container')
+	const container = document.querySelector('#temps_partiel_container')
 	if (contrat === 'temps_plein')
 		container.setAttribute('hidden', true)
 	else container.removeAttribute('hidden')
 
 	next()
 }
 
-bindToForm(document.querySelector('.SGMAPembauche form'))
-
-var jsNodes = document.querySelectorAll('.SGMAPembauche .js-only')
+bindToForm(document.querySelector('.SGMAPembauche form'));
 
-for (var i = 0; i < jsNodes.length; i++)
-	jsNodes[i].className = jsNodes[i].className.replace('js-only', '')
+[ ...document.querySelectorAll('.SGMAPembauche .js-only') ]
+	.forEach(jsNode => jsNode.className = jsNode.className.replace('js-only', ''))
 
-module.exports.OpenFisca = OpenFisca
+export {OpenFisca}

js/compat/bootstrap.js

@@ -1,65 +1,56 @@
-var UI = require('./ui')
-
+import UI from './ui'
 
 var buffer
 
-module.exports = {
+export default {
 	buildURL: buildOpenFiscaQueryURL,
-	get: get,
-	update: update,
-	getLastResults: function() { return buffer },
+	get,
+	update,
+	getLastResults: () => buffer,
 }
 
 
-function serialize(form) {
-	var result = [],
-		elements = form.elements
-
-	Array.prototype.forEach.call(elements, function(element) {
-		if (! element.name)
-			return
-
-		var value = element.value
+const serialize = form =>
+	[ ...form.elements ]
+		.map(element => {
+			if (! element.name)
+				return null
 
-		if (element.type == 'number')
-			value = Number(element.value.replace(',', '.'))	// IE doesn't support locale number formats
+			let value = element.value
 
-		/* We are simulating a recruitment,
-		hence requesting salaries with the new size of the entreprise */
-		if (element.name == 'effectif_entreprise')
-			value ++
+			if (element.type == 'number')
+				value = Number(element.value.replace(',', '.'))	// IE doesn't support locale number formats
 
-		/* In the case of a `temps partiel`, we are asking hours per week,
-		the most common way to reason about it. But OpenFisca needs hours per month */
-		if (element.name == 'heures_remunerees_volume') {
-			var dureeLegaleMensuelle = 151.66,
-				dureeLegaleHebdomadaire = 35
-			value = value * (dureeLegaleMensuelle / dureeLegaleHebdomadaire)
-		}
+			/* We are simulating a recruitment,
+			hence requesting salaries with the new size of the entreprise */
+			if (element.name == 'effectif_entreprise')
+				value ++
 
-		result.push(encodeURI(element.name + '=' + value))
-	})
+			/* In the case of a `temps partiel`, we are asking hours per week,
+			the most common way to reason about it. But OpenFisca needs hours per month */
+			if (element.name == 'heures_remunerees_volume') {
+				const dureeLegaleMensuelle = 151.66,
+					dureeLegaleHebdomadaire = 35
+				value = value * (dureeLegaleMensuelle / dureeLegaleHebdomadaire)
+			}
 
-	return result.join('&')
-}
+			return encodeURI(element.name + '=' + value)
+		})
+		.filter(value => value != null)
+		.join('&')
 
 
-var BOOLEAN_PARAMETERS = {
+const BOOLEAN_PARAMETERS = {
 	employee: [ 'stagiaire', 'apprenti' ],
 }
 
-function getAdditionalParameters() {
-	var result = {}
-
-	for (var provider in BOOLEAN_PARAMETERS) {
-		var key = document.querySelector('[data-provides="' + provider + '"]').value
-
+const getAdditionalParameters = () =>
+	Object.keys(BOOLEAN_PARAMETERS).reduce((memo, provider) => {
+		const key = document.querySelector('[data-provides="' + provider + '"]').value
 		if (BOOLEAN_PARAMETERS[provider].indexOf(key) > -1)
-			result[key] = true
-	}
-
-	return result
-}
+			memo[key] = true
+		return memo
+	}, {})
 
 /** Serializes a shallow object into a series of query string parameters.
 * A naive and shallow implementation.
@@ -68,31 +59,23 @@ function getAdditionalParameters() {
 *@returns	{String}	The source object as a query string (with no leading '?').
 *@private
 */
-function serializeObject(source) {
-	var result = []
-
-	for (var key in source) {
-		if (key && source.hasOwnProperty(key))
-			result.push(encodeURI(key + '=' + source[key]))
-	}
-
-	return result.join('&')
-}
+const serializeObject = source =>
+	Object.keys(source)
+		.map(key => encodeURI(key + '=' + source[key]))
+		.join('&')
 
 /** Creates an OpenFisca URL to the /formula endpoint, based on the current main form state and the given additional parameters.
 *
 *@param		{Object}	[additionalParameters]	An object whose properties will be appended to the URL as query-string parameters.
 *@returns	{String}	The URL for the OpenFisca query.
 */
 function buildOpenFiscaQueryURL(additionalParameters) {
-	var form = document.querySelector('#input form'),
+	const form = document.querySelector('#input form'),
 		queryStringBlocks = [
 			serialize(form),
 			serializeObject(getAdditionalParameters()),
 			serializeObject(additionalParameters),
-		].filter(function(element) {
-			return element !== ''}
-		)
+		].filter(element => element !== '')
 
 	return form.action + '?' + queryStringBlocks.join('&')
 }
@@ -108,28 +91,27 @@ function get(additionalParameters, callback) {
 		additionalParameters = null
 	}
 
-	var request = new XMLHttpRequest()
-
-	request.onload = function openFiscaOnloadHandler() {
-		try {
-			var data = JSON.parse(request.responseText)
-		} catch (err) {
-			callback(err)
-		}
-
-		callback(request.status != 200 && request, data.values, data)
-	}
-
-	request.onerror = callback.bind(null, request)
-
-	request.open('GET', buildOpenFiscaQueryURL(additionalParameters))
-	request.send()
+	const url = buildOpenFiscaQueryURL(additionalParameters)
+
+	fetch(url)
+		.then( response => {
+			if (!response.ok) {
+				let error = new Error(response.statusText)
+				error.response = response
+				throw error
+			}
+			return response.json()
+		})
+		.then( json => callback(false, json.values, json))
+		.catch( error => {
+			callback(error)
+		})
 }
 
 /** Updates the displayed values.
 */
 function update() {
-	var today = new Date(),
+	const today = new Date(),
 		mm = ('0' + (today.getMonth() + 1)).slice(-2)
 
 	get({

js/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	display: display,
 	showError: showError,
 	reflectParameterChange: reflectParameterChange,
@@ -8,16 +8,16 @@ module.exports = {
 
 function display(data) {
 	Object.keys(data).forEach(function(toSet) {
-		var target = document.querySelector('[data-source="' + toSet + '"]'),
-			value  = data[toSet]
+		const target = document.querySelector('[data-source="' + toSet + '"]')
+		let value  = data[toSet]
 
 		if (! target)
 			return
 
 		/* Only display the second result text, "cout du travail",
 		if it is different from "salaire super brut" */
 		if (toSet == 'cout_du_travail') {
-			var container = document.querySelector('#cout_du_travail_container')
+			const container = document.querySelector('#cout_du_travail_container')
 			if (data['salaire_super_brut'] == value)
 				container.setAttribute('hidden', true)
 			else container.removeAttribute('hidden')
@@ -37,18 +37,18 @@ function display(data) {
 
 function displayCommunesFetchResults(info, values) {
 	// Inform the user
-	var label = document.querySelector('label[for="depcom_entreprise"]')
+	const label = document.querySelector('label[for="depcom_entreprise"]')
 	label.textContent = info || ''
 
 	// Clear the <select>
-	var depcomElement = document.querySelector('#depcom_entreprise')
+	const depcomElement = document.querySelector('#depcom_entreprise')
 	depcomElement.innerHTML = ''
 
 	// Update the commune <select> options
 	if (!values) return depcomElement.setAttribute('hidden', '')
 
 	values.forEach(function(value) {
-		var optionElement = document.createElement('option')
+		const optionElement = document.createElement('option')
 		optionElement.value = value.codeInsee
 		optionElement.textContent = value.nomCommune
 		depcomElement.appendChild(optionElement)
@@ -66,21 +66,21 @@ function showError(data) {
 }
 
 function setErrorVisible(shouldBeVisible) {
-	var element = document.getElementById('error')
+	const element = document.getElementById('error')
 	if (! shouldBeVisible)
 		element.setAttribute('hidden', true)
 	else element.removeAttribute('hidden')
 }
 
 function reflectParameterChange(event) {
 	if (event.target.attributes['data-sets']) {
-		var modifier = event.target.attributes['data-sets'].value.split('@')	// example: '#salaire@name'; first part is selector, second is attribute to set
+		const modifier = event.target.attributes['data-sets'].value.split('@');	// example: '#salaire@name'; first part is selector, second is attribute to set
+
+		[ ...document.querySelectorAll(modifier[0]) ]
+			.forEach(elementToUpdate => elementToUpdate[modifier[1]] = event.target.value)
 
-		Array.prototype.forEach.call(document.querySelectorAll(modifier[0]), function(elementToUpdate) {
-			elementToUpdate[modifier[1]] = event.target.value
-		})
 	} else {
-		var data = {},
+		const data = {},
 			name = event.target.name || event.target.attributes['data-provides'].value
 
 		data[name] = event.target.value