Commit ddea9536 authored by  JosephK's avatar JosephK
Browse files

Cleaner code (destructuring assignment & prevent undefined params) + demo.css...

Cleaner code (destructuring assignment & prevent undefined params) + demo.css + fix is.referrer (always the last param)
parent 2fd98189
Pipeline #42608 passed with stages
in 47 seconds
body {
background: #eee;
}
iframe.sense3 {
border: none;
overflow: hidden;
}
h1 {
text-align: center;
}
.container {
padding: 30px;
margin-right: auto;
margin-left: auto;
box-shadow: 0px 3px 4px rgba(50, 50, 50, 0.2);
background: #fff;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
table {
width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
border-spacing: 0;
border-collapse: collapse;
}
table > thead > tr > th,
table > tbody > tr > th,
table > thead > tr > td,
table > tbody > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border: 1px solid #ddd;
}
table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
pre {
display: block;
padding: 9.5px;
margin: 10px auto;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-width: 707px;
text-align:left;
word-break: break-all;
word-wrap: break-word;
}
pre code {
max-width: 728px;
white-space: pre-wrap;
}
.text-center {
text-align:center;
}
@media (min-width: 768px) {
.col-sm-6 {
float: left;
padding: 0 15px;
width: calc(50% - 30px);
}
}
h2, h3, h4, .clearfix {
clear: left;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
......@@ -5,88 +5,7 @@
<meta name="robots" content="noindex, follow" />
<title>Sense3 - Examples</title>
<link rel="icon" type="image/png" href="favicon.png">
<style>
body {
background: #eee;
}
iframe.sense3 {
border: none;
overflow: hidden;
}
h1 {
text-align: center;
}
.container {
padding: 30px;
margin-right: auto;
margin-left: auto;
box-shadow: 0px 3px 4px rgba(50, 50, 50, 0.2);
background: #fff;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
table {
width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
border-spacing: 0;
border-collapse: collapse;
}
table > thead > tr > th,
table > tbody > tr > th,
table > thead > tr > td,
table > tbody > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border: 1px solid #ddd;
}
table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
pre {
display: block;
padding: 9.5px;
margin: 10px auto;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-width: 707px;
text-align:left;
word-break: break-all;
word-wrap: break-word;
}
pre code {
max-width: 728px;
white-space: pre-wrap;
}
.text-center {
text-align:center;
}
@media (min-width: 768px) {
.col-sm-6 {
float: left;
padding: 0 15px;
width: calc(50% - 30px);
}
}
h2, h3, h4, .clearfix {
clear: left;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
</style>
<link href="css/demo.css" media="all" rel="stylesheet">
</head>
<body>
<div class="container">
......
<!DOCTYPE html>
<html lang="xx">
<html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, follow" />
......
......@@ -94,7 +94,7 @@
mastodon: {
condition: s.is.referrer('twitter.com'),
format: ['txt', '300x250', '728x90'],
style: '#282c37,#9baec8,#d9e1e8,#2b90d9,#2b90d9,#9baec8',
colors: '#282c37,#9baec8,#d9e1e8,#2b90d9,#2b90d9,#9baec8',
link: { xx: 'https://joinmastodon.org' },
text: {
en: ['Join Mastodon', 'A free social network in 500 characters'],
......@@ -250,17 +250,21 @@
const scripts = document.getElementsByTagName('script');
for (let i = 0; i < scripts.length; i += 1) {
if (scripts[i].getAttribute('data-sense3')) {
const config = scripts[i].getAttribute('data-sense3').split(/x|;/);
for (let j = 0; j < 5; j += 1) {
if (config[j] === undefined) { config[j] = ''; }
}
let [format, tags, colors, id] = scripts[i].getAttribute('data-sense3').split(';');
format = format || '300x250';
tags = tags || '';
colors = colors || '#FFFFFF,#963425,#333333,#757575,#963425,#CCCCCC';
id = id || '';
const [w, h] = format.split('x');
sense3Baseurl = s.l(scripts[i].getAttribute('src').replace('sense3.js', './'));
const referrer = (document.referrer.split('/')[2] !== undefined) ? document.referrer.split('/')[2] : '';
const iframe = document.createElement('iframe');
iframe.style = `width: ${config[0]}px; height: ${config[1]}px;`;
iframe.src = `${sense3Baseurl}sense3.html#${s.pageLang()};${config[2]};${config[3]};${config[4]};${referrer}`;
iframe.width = w;
iframe.height = h;
iframe.style = `width: ${w}px; height: ${h}px;`;
iframe.src = `${sense3Baseurl}sense3.html#${s.pageLang()};${tags};${colors};${id};${referrer}`;
iframe.className = 'sense3';
iframe.id = `sense3_${i}`;
if (!document.getElementById(`sense3_${i}`)) {
......@@ -273,13 +277,15 @@
selectBanner() {
const w = window.innerWidth;
const h = window.innerHeight;
const lg = window.location.hash.replace(/#/, '').split(';')[0];
const tags = window.location.hash.split(';')[1].split(',');
// Import params from hash
let lg = ''; let tags = ''; let id; let colors;
[lg, tags, colors, id] = window.location.hash.replace(/^#/, '').split(';');
document.getElementsByTagName('html')[0].setAttribute('lang', lg);
let id = 'vangogh';
const d = s.data();
// List contextual banners
const banner = []; let i = 0;
Object.keys(d).forEach((k) => {
avalaibleTags.push(d[k].tags);
......@@ -287,26 +293,21 @@
if (d[k].condition &&
d[k].format.indexOf(`${w}x${h}`) !== -1
&& s.is.inTags(d[k].tags, tags)) {
&& s.is.inTags(d[k].tags, tags.split(','))) {
banner[i] = k;
i += 1;
}
});
if (banner.length !== 0) {
id = banner[Math.floor(Math.random() * (banner.length))];
}
if (window.location.hash.split(';')[3] !== '') {
id = window.location.hash.split(';')[3]; // eslint-disable-line prefer-destructuring
// Choose a random banner or 'vangogh'
if (id === '') {
id = (banner.length !== 0) ? banner[Math.floor(Math.random() * (banner.length))] : 'vangogh';
}
// console.log(banner);
s.showBanner(id, lg, w, h);
if (d[id].style !== undefined) {
s.customize(d[id].style);
}
s.customize(window.location.hash.split(';')[2]);
// Add style if exist in params or in data{}
colors = d[id].colors || colors;
s.customize(colors);
},
showBanner(id, lg, w, h) {
......@@ -359,39 +360,37 @@
},
customize(param) {
// color = [ background, h1, h2, p, button, border ] only in #hexa
const color = param.replace(' ', '').toLowerCase().split(',');
if (color.length === 6) {
const style = document.createElement('style');
style.innerHTML = `
#text {
background: ${color[0].substr(0, 7)};
border-color: ${color[5].substr(0, 7)};
}
#text h1 {
color: ${color[1].substr(0, 7)};
}
#text h2 {
color: ${color[2].substr(0, 7)};
}
#text p {
color: ${color[3].substr(0, 7)};
}
#text button {
background: ${color[4].substr(0, 7)};
}
#text ~ #about,
#text ~ #close {
background: ${color[5].substr(0, 7)};
}
`;
document.getElementsByTagName('head')[0].appendChild(style);
}
const [bg, h1, h2, p, btn, bdr] = param.replace(' ', '').toLowerCase().split(',');
const style = document.createElement('style');
style.innerHTML = `
#text {
background: ${bg.substr(0, 7)};
border-color: ${bdr.substr(0, 7)};
}
#text h1 {
color: ${h1.substr(0, 7)};
}
#text h2 {
color: ${h2.substr(0, 7)};
}
#text p {
color: ${p.substr(0, 7)};
}
#text button {
background: ${btn.substr(0, 7)};
}
#text ~ #about,
#text ~ #close {
background: ${bdr.substr(0, 7)};
}
`;
document.getElementsByTagName('head')[0].appendChild(style);
},
/** Generic fonctions ******************************************* */
......@@ -446,7 +445,8 @@
},
referrer(url) {
return (window.location.hash.replace(/#/, '').split(';')[3] === url);
const params = window.location.hash.replace(/#/, '').split(';');
return (params[(params.length - 1)] === url);
},
adblock() {
......
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