Commit c39aa093 authored by  JosephK's avatar JosephK

Code generator

parent 0792471d
Pipeline #42857 passed with stages
in 47 seconds
......@@ -19,7 +19,7 @@
<script type="text/javascript" src="/sense3/sense3.js" data-sense3="728x90;;;wikipedia"></script>
<pre><code>&lt;script type="text/javascript" src="sense3.js" data-sense3="728x90"&gt;&lt;/script&gt;</code></pre>
</div>
<!--
<h3>Medium rectangle (350 x 200)</h3>
<div class="text-center">
<script type="text/javascript" src="sense3.js" data-sense3="300x250;;;vangogh"></script>
......
......@@ -11,6 +11,21 @@
adblock: 'Adblock',
ua: 'User-Agent',
referrer: 'Referrer',
banner: 'Banner',
format: 'Format',
leaderboard: 'Leaderboard (728 x 90)',
medium: 'Medium rectangle (350 x 200)',
fbanner: 'Static banner',
none: 'None',
tags: 'Tags',
colors: 'Colors',
background: 'Background',
text1: 'Text 1',
text2: 'Text 2',
link: 'Link',
button: 'Button',
border: 'Border',
generate: 'Get the code',
},
fr: {
close: 'Fermer',
......@@ -20,6 +35,21 @@
adblock: 'Adblock',
ua: 'User-Agent',
referrer: 'Référent',
banner: 'Bannière',
format: 'Format',
leaderboard: 'Entête large (728 x 90)',
medium: 'Rectangle moyen (350 x 200)',
fbanner: 'Forcer une bannière',
none: 'Aucune',
tags: 'Mots-clés',
colors: 'Couleurs',
background: 'Arrière-plan',
text1: 'Texte 1',
text2: 'Texte 2',
link: 'Lien',
button: 'Bouton',
border: 'Bordure',
generate: 'Obtenir le code',
},
};
let d = {};
......@@ -244,6 +274,9 @@
});
} else {
s.addIframes();
document.addEventListener('DOMContentLoaded', () => {
s.showGenerator();
});
}
},
......@@ -360,6 +393,40 @@
}
},
customize(param) {
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);
},
showInfos(lg) {
const browsers = [
'android', 'chrome', 'chromium', 'firefox', 'ios',
......@@ -416,38 +483,121 @@
document.getElementsByTagName('body')[0].innerHTML = html;
},
customize(param) {
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)};
showGenerator() {
const scripts = document.getElementsByTagName('script');
for (let i = 0; i < scripts.length; i += 1) {
if (scripts[i].getAttribute('data-sense3-generator')) {
sense3Baseurl = s.l(scripts[i].getAttribute('src').replace('sense3.js', './'));
const lg = s.pageLang();
s.data();
const tags = s.list('tags'); const ids = s.list('ids');
let htmlTags = ''; let htmlIds = '';
Object.keys(tags[0]).forEach((k) => {
htmlTags = `${htmlTags}
<label class="col-xs-6 col-sm-4 col-md-2 btn-xs btn-default">
<input type="checkbox" value="${k}"> ${k} <span class="badge">${tags[0][k]}</span>
</label>`;
});
for (let j = 0; j < ids.length; j += 1) {
htmlIds = `${htmlIds}
<option>${ids[j]}</option>`;
}
#text ~ #about,
#text ~ #close {
background: ${bdr.substr(0, 7)};
const html = `
<form class="form-horizontal" id="sense3_generator" onsubmit="document.getElementById('sense3_code').className = ''; sense3Generate(); return false;">
<input type="hidden" id="sense3Baseurl" value="${sense3Baseurl}">
<fieldset id="banner">
<legend>${i18n[lg].banner}</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="format" class="col-sm-4 control-label">${i18n[lg].format}</label>
<div class="col-sm-8">
<select id="format" class="form-control">
<option value="728x90">${i18n[lg].leaderboard}</option>
<option value="300x250">${i18n[lg].medium}</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="force" class="col-sm-4 control-label">${i18n[lg].fbanner}</label>
<div class="col-sm-8">
<select id="force" class="form-control">
<option value="">${i18n[lg].none}</option>
${htmlIds}
</select>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset id="tags">
<legend>${i18n[lg].tags}</legend>
${htmlTags}
</fieldset>
<fieldset id="colors">
<legend>${i18n[lg].colors}</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="bg" class="col-sm-4 control-label">${i18n[lg].background}</label>
<div class="col-sm-8">
<input id="bg" value="#ffffff" class="form-control" type="color">
</div>
</div>
<div class="form-group">
<label for="h1" class="col-sm-4 control-label">${i18n[lg].text1}</label>
<div class="col-sm-8">
<input id="h1" value="#963425" class="form-control" type="color">
</div>
</div>
<div class="form-group">
<label for="h2" class="col-sm-4 control-label">${i18n[lg].text2}</label>
<div class="col-sm-8">
<input id="h2" value="#333333" class="form-control" type="color">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="p" class="col-sm-4 control-label">${i18n[lg].link}</label>
<div class="col-sm-8">
<input id="p" value="#757575" class="form-control" type="color">
</div>
</div>
<div class="form-group">
<label for="btn" class="col-sm-4 control-label">${i18n[lg].button}</label>
<div class="col-sm-8">
<input id="btn" value="#963425" class="form-control" type="color">
</div>
</div>
<div class="form-group">
<label for="bdr" class="col-sm-4 control-label">${i18n[lg].border}</label>
<div class="col-sm-8">
<input id="bdr" value="#CCCCCC" class="form-control" type="color">
</div>
</div>
</div>
</div>
</fieldset>
<div id="sense3_code" class="hidden">
<div id="preview" class="text-center"></div>
<pre style="max-width:600px;margin:10px auto;"><code></code></pre>
</div>
<p class="text-right"><button class="btn btn-primary" type="submit">${i18n[lg].generate}</button></p>
</form>
`;
const div = document.createElement('div');
div.innerHTML = html;
div.id = 'sense3_generator';
if (!document.getElementById('sense3_generator')) {
scripts[i].parentNode.insertBefore(div, scripts[i].nextSibling);
}
`;
document.getElementsByTagName('head')[0].appendChild(style);
}
}
},
list(type) {
......@@ -459,11 +609,12 @@
list.push(d[k].tags[i]);
}
});
list.sort();
list.forEach((x) => { count[x] = (count[x] || 0) + 1; });
list = [];
list.push(count);
break;
case 'id':
case 'ids':
Object.keys(d).forEach((k) => {
list.push(k);
});
......@@ -569,3 +720,25 @@
};
s.init();
}());
function sense3Generate() { // eslint-disable-line no-unused-vars
const sense3Baseurl = $('#sense3Baseurl').val() || '';
const force = $('#force').val() || '';
const tags = []; const colors = [];
if (force === '') {
$('#tags input:checked').each((i) => {
tags.push($('#tags input:checked').eq(i).val());
});
}
$('#colors input').each((i) => {
colors.push($('#colors input').eq(i).val());
});
let params = $('#format').val();
params = `${params};${tags.join()};${colors.join()};${force}`;
params = params.replace('#ffffff,#963425,#333333,#757575,#963425,#cccccc', '').replace(/(;+)$/, '');
const code = `<script type="text/javascript" src="${sense3Baseurl}sense3.js" data-sense3="${params}"></script>`;
$('#sense3_generator code').text(code);
$('#sense3_generator #preview').html(code);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, follow" />
<title>WIP Generator</title>
<script type="text/javascript" src="http://localhost/nav/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bowser.min.js"></script>
</head>
<body class="apropos">
<script type="text/javascript" src="../nav/nav.js"></script>
<div class="container ombre">
<h1>Veggie ipsum</h1>
<hr class="trait" role="presentation">
<h2>Veggies es bonus vobis</h2>
<script type="text/javascript" src="sense3.js" data-sense3-generator="true"></script>
</div>
</body>
</html>
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