diff --git a/app/assets/javascripts/mailjet.js b/app/assets/javascripts/mailjet.js deleted file mode 100644 index 42ba7b513..000000000 --- a/app/assets/javascripts/mailjet.js +++ /dev/null @@ -1,132 +0,0 @@ -if (typeof wScriptAlreadyLoaded === "undefined") { - var wScriptAlreadyLoaded = true; - - // Array of popin translations - var i8nMessages = []; - i8nMessages['en_US'] = []; - i8nMessages['fr_FR'] = []; - i8nMessages['de_DE'] = []; - i8nMessages['es_ES'] = []; - i8nMessages['en_US']['iframe-error'] = 'Your browser does not support the IFrame element'; - i8nMessages['en_US']['close-popin'] = 'Close'; - i8nMessages['fr_FR']['iframe-error'] = 'Votre navigateur ne supporte pas l\'élément iframe'; - i8nMessages['fr_FR']['close-popin'] = 'Fermer'; - i8nMessages['de_DE']['iframe-error'] = 'Ihr navigator verträgt kein Element iframe'; - i8nMessages['de_DE']['close-popin'] = 'Schließen'; - i8nMessages['es_ES']['iframe-error'] = 'Su navegante no soporta el elemento iframe'; - i8nMessages['es_ES']['close-popin'] = 'Cerrarse'; - - window.onload = function() { - // Display popin when click event occure on widget button - Array.prototype.forEach.call(document.getElementsByClassName("mj-w-btn"), function(btnNode) { - btnNode.style.cursor = "pointer"; - btnNode.addEventListener("click", function(event) { - mjOpenPopin(event, this); - }); - }); - - mjOpenPopin = function(event, element) { - event.preventDefault(); - //event.stopPropagation(); - - //var token = str.substring(btnNode.id.lastIndexOf("-") + 1, btnNode.id.length - btnNode.id.lastIndexOf("-")); - var token = element.getAttribute("data-token"); - - //Register parameters - var widgetPopinData = document.querySelector(".mj-w-data[data-token='" + token + "']"); - if (widgetPopinData) { - var apiKey = widgetPopinData.getAttribute("data-apikey"); - var wId = widgetPopinData.getAttribute("data-w-id"); - var locale = widgetPopinData.getAttribute("data-lang"); - var base = widgetPopinData.getAttribute("data-base"); - var width = widgetPopinData.getAttribute("data-width"); - var height = widgetPopinData.getAttribute("data-height"); - var statics = widgetPopinData.getAttribute("data-statics"); - - // Call to Mailjet CSS file - var cssFile = document.createElement("link"); - cssFile.setAttribute("rel", "stylesheet"); - cssFile.setAttribute("type", "text/css"); - if (statics) { - base += "/" + statics; - } - cssFile.setAttribute("href", base + "/css/w-popin-less.css"); - document.getElementsByTagName("head")[0].appendChild(cssFile); - - var htmlCode = "
" + - "
" + - "
" + - "\""" + - "" + - "
" + - "
"; - - widgetPopinData.innerHTML = htmlCode; - - document.getElementById("mj-w-iframe").onload = function() { - - document.getElementById("mj-w-iframe").style.height= height + "px"; - document.getElementById('mj-w-close-img').style.display = "block"; - document.getElementById("mj-w-loader").style.display = "none"; - document.getElementById("mj-w-popin-block").style.border = "none"; - if (window.matchMedia("(max-width: 767px)").matches) { - document.getElementById("mj-w-iframe").style.width = '100%'; - document.getElementById("mj-w-popin-block").style.height = 'auto'; - document.getElementById("mj-w-popin-block").style.width = '90%'; - } - }; - - var closeImgNode = document.getElementById("mj-w-close-img"); - closeImgNode.addEventListener("click", function(event) { - closePopin(); - event.preventDefault(); - }); - - document.addEventListener("keydown", escapeEvent); - document.getElementById("mj-w-iframe").onclick=function(event){ - event.stopPropagation(); - }; - //document.addEventListener("click"); - - document.getElementById("mj-w-overlay").style.display = "block"; - document.getElementById("mj-w-overlay").addEventListener("click", function(event){ - closePopin(); - event.preventDefault(); - }); - } - } - - // Escape event : close popin - function escapeEvent(e) { - if (e.keyCode == 27) { // Escape key - closePopin(); - } - } - - // Close popin (remove popin HTML code) - function closePopin() { - var rootContainer = document.getElementById("mj-w-overlay"); - if(rootContainer) { - rootContainer.parentNode.removeChild(rootContainer); - } - document.removeEventListener("keypress", escapeEvent); - } - - window.onresize = function(event) { - if (window.matchMedia("(max-width: 767px)").matches) { - var popin = document.getElementById("mj-w-popin-block"); - var iframe = document.getElementById("mj-w-iframe"); - if (popin) { - popin.style.height = 'auto'; - popin.style.width = '90%'; - } - if (iframe) { - iframe.style.width = '100%'; - } - } - } - - }; -} diff --git a/app/javascript/packs/mailjet.js b/app/javascript/packs/mailjet.js new file mode 100644 index 000000000..30b85a446 --- /dev/null +++ b/app/javascript/packs/mailjet.js @@ -0,0 +1,159 @@ +// This file is copied from mailjet. We serve here a copy of it ourselves +// to avoid loading javascript files from other domains on the frontpage. + +// Array of popin translations +const i8nMessages = []; +i8nMessages['en_US'] = []; +i8nMessages['fr_FR'] = []; +i8nMessages['de_DE'] = []; +i8nMessages['es_ES'] = []; +i8nMessages['en_US']['iframe-error'] = + 'Your browser does not support the IFrame element'; +i8nMessages['en_US']['close-popin'] = 'Close'; +i8nMessages['fr_FR']['iframe-error'] = + "Votre navigateur ne supporte pas l'élément iframe"; +i8nMessages['fr_FR']['close-popin'] = 'Fermer'; +i8nMessages['de_DE']['iframe-error'] = + 'Ihr navigator verträgt kein Element iframe'; +i8nMessages['de_DE']['close-popin'] = 'Schließen'; +i8nMessages['es_ES']['iframe-error'] = + 'Su navegante no soporta el elemento iframe'; +i8nMessages['es_ES']['close-popin'] = 'Cerrarse'; + +function mjOpenPopin(event, element) { + event.preventDefault(); + //event.stopPropagation(); + + //var token = str.substring(btnNode.id.lastIndexOf("-") + 1, btnNode.id.length - btnNode.id.lastIndexOf("-")); + var token = element.getAttribute('data-token'); + + //Register parameters + var widgetPopinData = document.querySelector( + ".mj-w-data[data-token='" + token + "']" + ); + if (widgetPopinData) { + var apiKey = widgetPopinData.getAttribute('data-apikey'); + var wId = widgetPopinData.getAttribute('data-w-id'); + var locale = widgetPopinData.getAttribute('data-lang'); + var base = widgetPopinData.getAttribute('data-base'); + var width = widgetPopinData.getAttribute('data-width'); + var height = widgetPopinData.getAttribute('data-height'); + var statics = widgetPopinData.getAttribute('data-statics'); + + // Call to Mailjet CSS file + var cssFile = document.createElement('link'); + cssFile.setAttribute('rel', 'stylesheet'); + cssFile.setAttribute('type', 'text/css'); + if (statics) { + base += '/' + statics; + } + cssFile.setAttribute('href', base + '/css/w-popin-less.css'); + document.getElementsByTagName('head')[0].appendChild(cssFile); + + var htmlCode = + ''; + + widgetPopinData.innerHTML = htmlCode; + + document.getElementById('mj-w-iframe').onload = function() { + document.getElementById('mj-w-iframe').style.height = height + 'px'; + document.getElementById('mj-w-close-img').style.display = 'block'; + document.getElementById('mj-w-loader').style.display = 'none'; + document.getElementById('mj-w-popin-block').style.border = 'none'; + if (window.matchMedia('(max-width: 767px)').matches) { + document.getElementById('mj-w-iframe').style.width = '100%'; + document.getElementById('mj-w-popin-block').style.height = 'auto'; + document.getElementById('mj-w-popin-block').style.width = '90%'; + } + }; + + var closeImgNode = document.getElementById('mj-w-close-img'); + closeImgNode.addEventListener('click', function(event) { + closePopin(); + event.preventDefault(); + }); + + document.addEventListener('keydown', escapeEvent); + document.getElementById('mj-w-iframe').onclick = function(event) { + event.stopPropagation(); + }; + //document.addEventListener("click"); + + document.getElementById('mj-w-overlay').style.display = 'block'; + document + .getElementById('mj-w-overlay') + .addEventListener('click', function(event) { + closePopin(); + event.preventDefault(); + }); + } +} + +// Escape event : close popin +function escapeEvent(e) { + if (e.keyCode == 27) { + // Escape key + closePopin(); + } +} + +// Close popin (remove popin HTML code) +function closePopin() { + var rootContainer = document.getElementById('mj-w-overlay'); + if (rootContainer) { + rootContainer.parentNode.removeChild(rootContainer); + } + document.removeEventListener('keypress', escapeEvent); +} + +addEventListener('load', () => { + // Display popin when click event occure on widget button + for (let btnNode of document.getElementsByClassName('mj-w-btn')) { + btnNode.style.cursor = 'pointer'; + btnNode.addEventListener('click', function(event) { + mjOpenPopin(event, this); + }); + } +}); + +addEventListener('resize', () => { + if (window.matchMedia('(max-width: 767px)').matches) { + const popin = document.getElementById('mj-w-popin-block'); + const iframe = document.getElementById('mj-w-iframe'); + if (popin) { + popin.style.height = 'auto'; + popin.style.width = '90%'; + } + if (iframe) { + iframe.style.width = '100%'; + } + } +}); + +window.mjOpenPopin = mjOpenPopin; diff --git a/app/views/layouts/_mailjet_newsletter.html.haml b/app/views/layouts/_mailjet_newsletter.html.haml index e290caf30..58930a243 100644 --- a/app/views/layouts/_mailjet_newsletter.html.haml +++ b/app/views/layouts/_mailjet_newsletter.html.haml @@ -1,2 +1,2 @@ %data.mj-w-data{ "data-apikey" => "1v5T", "data-base" => "https://app.mailjet.com", "data-height" => "328", "data-lang" => "fr_FR", "data-statics" => "statics", "data-token" => "11c89e7ddb46fbcdcb7f8fe5fdfca818", "data-w-id" => "39b", "data-width" => "640", "value" => "mj" } -= javascript_include_tag 'mailjet', "data-turbolinks-eval": false += javascript_pack_tag 'mailjet', defer: true, 'data-turbolinks-eval': false diff --git a/config/application.rb b/config/application.rb index 6e5f62433..7d54fd628 100644 --- a/config/application.rb +++ b/config/application.rb @@ -25,7 +25,7 @@ module TPS config.autoload_paths += %W(#{config.root}/lib #{config.root}/app/validators #{config.root}/app/facades) config.assets.paths << Rails.root.join('app', 'assets', 'javascript') config.assets.paths << Rails.root.join('app', 'assets', 'fonts') - config.assets.precompile += %w(.woff mailjet.js) + config.assets.precompile += %w(.woff) if Rails.env.production? URL = "https://www.demarches-simplifiees.fr/"