Merge pull request #2325 from tchak/mailjet.js
Package mailjet widget with webpack
This commit is contained in:
Pierre de La Morinerie
GitHub
commit
54916e5a4c
4 changed files with 161 additions and 134 deletions
|
|
@ -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 = "<div id=\"mj-w-overlay\" style=\"display: none;\">" +
|
|
||||||
"<div id=\"mj-w-popin-block\" style=\"max-width:" + width + "px; max-height:" + height + "px\">" +
|
|
||||||
"<div id=\"mj-w-loader\"></div>" +
|
|
||||||
"<img id=\"mj-w-close-img\" alt=\"" + i8nMessages[locale]['close-popin'] + "\" title=\"" + i8nMessages[locale]['close-popin'] + "\" src=\"" + base + "/images/w-popin-close.png\" style=\"display:none;\" />" +
|
|
||||||
"<iframe id=\"mj-w-iframe\" src=\"" + base + "/widget/iframe/" + apiKey + "/" + wId + "\" scrolling=\"no\" width=\"100% \" frameborder=\"0\" allotransparency=\"true\" style=\"background-color:transparent; border-radius:3px;height: 0px;\">" +
|
|
||||||
"<p>" + i8nMessages[locale]['iframe-error'] + "</p>" +
|
|
||||||
"</iframe>" +
|
|
||||||
"</div>" +
|
|
||||||
"</div>";
|
|
||||||
|
|
||||||
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%';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
}
|
|
||||||
159
app/javascript/packs/mailjet.js
Normal file
159
app/javascript/packs/mailjet.js
Normal file
|
|
@ -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 =
|
||||||
|
'<div id="mj-w-overlay" style="display: none;">' +
|
||||||
|
'<div id="mj-w-popin-block" style="max-width:' +
|
||||||
|
width +
|
||||||
|
'px; max-height:' +
|
||||||
|
height +
|
||||||
|
'px">' +
|
||||||
|
'<div id="mj-w-loader"></div>' +
|
||||||
|
'<img id="mj-w-close-img" alt="' +
|
||||||
|
i8nMessages[locale]['close-popin'] +
|
||||||
|
'" title="' +
|
||||||
|
i8nMessages[locale]['close-popin'] +
|
||||||
|
'" src="' +
|
||||||
|
base +
|
||||||
|
'/images/w-popin-close.png" style="display:none;" />' +
|
||||||
|
'<iframe id="mj-w-iframe" src="' +
|
||||||
|
base +
|
||||||
|
'/widget/iframe/' +
|
||||||
|
apiKey +
|
||||||
|
'/' +
|
||||||
|
wId +
|
||||||
|
'" scrolling="no" width="100% " frameborder="0" allotransparency="true" style="background-color:transparent; border-radius:3px;height: 0px;">' +
|
||||||
|
'<p>' +
|
||||||
|
i8nMessages[locale]['iframe-error'] +
|
||||||
|
'</p>' +
|
||||||
|
'</iframe>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
@ -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" }
|
%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
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ module TPS
|
||||||
config.autoload_paths += %W(#{config.root}/lib #{config.root}/app/validators #{config.root}/app/facades)
|
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', 'javascript')
|
||||||
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
|
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?
|
if Rails.env.production?
|
||||||
URL = "https://www.demarches-simplifiees.fr/"
|
URL = "https://www.demarches-simplifiees.fr/"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue