Commit 3009a3b8 authored by  JosephK's avatar JosephK

Banner showInfos

parent 6fd16b7a
Pipeline #42752 passed with stages
in 1 minute and 5 seconds
......@@ -49,6 +49,12 @@
<pre><code>data-sense3="300x250;;;dioGafam"</code></pre>
</div>
<p class="clearfix">… this one can be useful</p>
<div class="text-center">
<script type="text/javascript" src="/sense3/sense3.js" data-sense3="728x90;;;showInfos"></script>
<pre><code>data-sense3="728x90;;;showInfos"</code></pre>
</div>
<h3>Color</h3>
<p>Colors on text banners can be customized.<br>Default colors are:</p>
<div class="col-sm-6 clearfix" style="margin:0 auto; float:none;">
......
......@@ -143,6 +143,53 @@
margin: 25px;
}
}
table {
width: 300px;
height: 123px;
margin-left: auto;
margin-right: auto;
border-spacing: 0;
border-collapse: collapse;
}
table > thead > tr > th,
table > tbody > tr > th,
table > thead > tr > td,
table > tbody > tr > td {
padding: 4px;
line-height: 1.42857143;
vertical-align: top;
border: 1px solid #ddd;
font-size: 12px;
text-align: center;
}
table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
table img {
width: 24px;
height: 24px;
}
.form-control {
display: block;
width: calc(100% - 14px);
height: 20px;
padding: 3px 6px;
font-size: 10px;
line-height: 1.3;
color: #555;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 3px;
}
@media (width: 728px) {
table {
float:left;
width: 364px;
height: 90px;
}
}
</style>
<script type="text/javascript" src="bowser.min.js"></script>
</head>
......
......@@ -10,10 +10,20 @@
en: {
close: 'Close',
notad: 'This is NOT an advertising',
os: 'System',
browser: 'Browser',
adblock: 'Adblock',
ua: 'User-Agent',
referrer: 'Referrer',
},
fr: {
close: 'Fermer',
notad: 'Ceci n’est PAS une publicité',
os: 'Plateforme',
browser: 'Navigateur',
adblock: 'Adblock',
ua: 'User-Agent',
referrer: 'Référent',
},
};
......@@ -106,10 +116,7 @@
chrome: {
condition: (bowser.chrome || bowser.chromium),
format: ['txt', '300x250', '728x90'],
link: {
en: 'https://www.mozilla.org/en-US/firefox/',
fr: 'https://www.mozilla.org/fr-FR/firefox/',
},
link: { xx: 'https://www.mozilla.org/firefox/' },
text: {
en: ['Drop Google Chrome', 'Surf 2x faster with Firefox Quantum'],
fr: ['Laisser tomber Google Chrome', 'Surfez 2x plus vite avec Firefox Quantum'],
......@@ -119,10 +126,7 @@
firefox: {
condition: (bowser.firefox && bowser.version <= 56),
format: ['txt', '300x250', '728x90'],
link: {
en: 'https://www.mozilla.org/en-US/firefox/',
fr: 'https://www.mozilla.org/fr-FR/firefox/',
},
link: { xx: 'https://www.mozilla.org/firefox/' },
text: {
en: ['Firefox Quantum', 'Internet for people, not profit.'],
fr: ['Passez à Firefox Quantum', 'La dernière version ultra-rapide de Mozilla'],
......@@ -133,7 +137,7 @@
ublock: {
condition: !s.is.adblock(),
format: ['txt', '300x250', '728x90'],
link: { xx: 'https://www.ublock.org/' },
link: { xx: 'https://github.com/gorhill/uBlock' },
text: {
en: ['Relieve the Internet (and your eyes)', ' Use an ad blocker'],
fr: ['Soulagez Internet (et vos yeux)', 'Utilisez un bloqueur de pub'],
......@@ -143,7 +147,7 @@
green: {
condition: (!s.is.adblock() && (s.is.referrer('lilo.org') || s.is.referrer('ecosia.org'))),
format: ['txt', '300x250', '728x90'],
link: { xx: 'https://www.ublock.org/' },
link: { xx: 'https://github.com/gorhill/uBlock' },
text: {
en: ['', ''],
fr: ['Un geste écolo et simple', 'Bloquer la pub réduit le trafic web de ~60%'],
......@@ -285,31 +289,34 @@
[lg, tags, colors, id] = window.location.hash.replace(/^#/, '').split(';');
document.getElementsByTagName('html')[0].setAttribute('lang', lg);
const d = s.data();
// List contextual banners
const banner = []; let i = 0;
Object.keys(d).forEach((k) => {
avalaibleTags.push(d[k].tags);
avalaibleId.push(k);
if (d[k].condition &&
d[k].format.indexOf(`${w}x${h}`) !== -1
&& s.is.inTags(d[k].tags, tags.split(','))) {
banner[i] = k;
i += 1;
if (id !== 'showInfos') {
const d = s.data();
// List contextual banners
const banner = []; let i = 0;
Object.keys(d).forEach((k) => {
avalaibleTags.push(d[k].tags);
avalaibleId.push(k);
if (d[k].condition &&
d[k].format.indexOf(`${w}x${h}`) !== -1
&& s.is.inTags(d[k].tags, tags.split(','))) {
banner[i] = k;
i += 1;
}
});
// Choose a random banner or 'vangogh'
if (id === '') {
id = (banner.length !== 0) ? banner[Math.floor(Math.random() * (banner.length))] : 'vangogh';
}
});
// Choose a random banner or 'vangogh'
if (id === '') {
id = (banner.length !== 0) ? banner[Math.floor(Math.random() * (banner.length))] : 'vangogh';
}
s.showBanner(id, lg, w, h);
s.showBanner(id, lg, w, h);
// Add style if exist in params or in data{}
colors = d[id].colors || colors;
s.customize(colors);
// Add style if exist in params or in data{}
colors = d[id].colors || colors;
s.customize(colors);
} else {
s.showInfos(lg);
}
},
showBanner(id, lg, w, h) {
......@@ -361,6 +368,62 @@
}
},
showInfos(lg) {
const browsers = [
'android', 'chrome', 'chromium', 'firefox', 'ios',
'kMeleon', 'msedge', 'msie', 'opera', 'qupzilla',
'safari', 'sailfish', 'samsungBrowser', 'seamonkey',
'sleipnir', 'tizen', 'vivaldi',
];
const os = [
'android', 'blackberry', 'chromeos', 'firefoxos',
'ios', 'linux', 'mac', 'tizen', 'webos',
'windowsphone', 'windows',
];
const params = window.location.hash.replace(/#/, '').split(';');
const referrer = params[(params.length - 1)];
const img = {
os: (os.indexOf(bowser.osname.toLowerCase()) !== -1) ? `${bowser.osname.toLowerCase()}.png` : 'unknown.png',
browser: (browsers.indexOf(bowser.name.toLowerCase()) !== -1) ? `${bowser.name.toLowerCase()}.png` : 'unknown.png',
adblock: s.is.adblock() ? 'ublock-on.png' : 'ublock-off.png',
};
const html = `
<table>
<thead>
<tr>
<th>${i18n[lg].os}</th>
<th>${i18n[lg].browser}</th>
<th>${i18n[lg].adblock}</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/icons/os/${img.os}" alt="" /><br>${bowser.osname} ${(bowser.osversion || '')}</td>
<td><img src="img/icons/browsers/${img.browser}" alt="" /><br>${bowser.name} ${(bowser.version || '')}</td>
<td><img src="img/icons/ublock/${img.adblock}" alt="" /></td>
<tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th><label for="ua">${i18n[lg].ua}</label></th>
<td>
<input type="text" class="form-control" id="ua" value="${window.navigator.userAgent}" readonly>
</td>
</tr>
<tr>
<th><label for="referrer">${i18n[lg].referrer}</label></th>
<td>
<input type="text" class="form-control" id="referrer" value="${referrer}" readonly>
</td>
</tr>
</tbody>
</table>`;
document.getElementsByTagName('body')[0].innerHTML = html;
},
customize(param) {
const [bg, h1, h2, p, btn, bdr] = param.replace(' ', '').toLowerCase().split(',');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment