Skip to content

GitLab

Commit db511611 authored by Marco Kellershoff's avatar Marco Kellershoff
Browse files

Working now. TODO need to port the onmeda.de template

parent 522577ed
Hide whitespace changes
Inline Side-by-side
app.js
View file @ db511611
(function(window, document){
var _APP = null;
var _OUTPUT = null;
var _INPUTCOUNTER = 0;
var query = function(sel) {
return document.querySelector(sel);
......@@ -52,7 +53,7 @@
var createTemplateEl = function(data) {
var node_name = 'input';
var node = null;
var node_container = createEl('div');
var node_container = createEl('div', null, [['class', 'inputbox']]);
var label = null;
var nodeid = '';
switch(data.type) {
......@@ -85,13 +86,13 @@
default:
break;
}
node_container.appendChild(node);
if (data.label) {
label = createEl('label', data.label, [
['for', nodeid]
]);
node_container.appendChild(label);
}
node_container.appendChild(node);
_INPUTCOUNTER = _INPUTCOUNTER+1;
return node_container;
};
......@@ -123,13 +124,30 @@
inputs.forEach(inputsCallback);
return map;
};
var download = function(filename, contents) {
var el = createEl('a', 'tempdl', [
['href', 'data:text/html;charset=utf-8,' + encodeURIComponent(contents)],
['download', filename],
['style', 'display:none;']
]);
document.body.appendChild(el);
el.click();
document.body.removeChild(el);
};
var generateSignature = function(evt) {
var mode = evt.target.value;
var values = getValues();
var template = null;
getData('./templates/gofeminin.html', function(html){
template = ejs.render(html, values);
console.log(template);
if (mode === 'show') {
_OUTPUT.style.border = '1px solid #000';
_OUTPUT.style.overflow = 'auto';
_OUTPUT.innerHTML = template;
} else {
download('signature.html', template);
}
}, {dataType: 'text'});
};
var renderPortalSelection = function() {
......@@ -153,6 +171,7 @@
};
var cb = function(json) {
_APP = query('#app');
_OUTPUT = query('#output');
json.portals.forEach(portalsCallback);
var select = createEl('select', portals);
select.addEventListener('change', selectChangeCallback);
......
data/gofeminin.de.json
View file @ db511611
......@@ -19,7 +19,7 @@
"type": "input",
"name": "email",
"label": "E-Mail",
"value": "",
"value": "vorname.nachname@gofeminin.de",
"placeholder": ""
},
{
......
index.html
View file @ db511611
......@@ -4,11 +4,15 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Signature Generator</title>
<style type="text/css" media="screen">
</style>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="intro">
<h1>Signatur-Generator</h1>
<p>Name und Jobtitel und der ganze Kram.. und ab geht die Post <img alt="Embedded Image" width="20" height="24" src="data:image/gif;base64,R0lGODlhFAAYANUDAP/mIEA0EFVACP////bKAP/aFI1dAPraEP/iHPK2APrWDPK+AO6qAP/eGG1MBFlACPrSCO6yAHFVBN6VAPLGAOadAKVpBMKNAPbCAOqhAKVxBM6NAGVQHEAUEPLCALKNAPbOBM6FAN62ANalAJVhBK6BBOaZAKp1BOKVAO6uAG1QBOalAO66AKVtAJlxBK6JBLp1AMqFAN6uAJlpBK6FAK59AOqqAMqlAPbGAJ19BNauAGFMGAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/iREZXNpZ24gYnkgQWl3YW4gKHd3dy5rb2xvYm9rLndyZy5ydSkAIfkEBWQAPAAsAAAAABQAGAAABtxAnnBILBqPQwPSqBQ2l0Wl9Al1GqhVnmDLzQokLx2OMiqpBEtBDqQ4HBQQAsuFNj5uikYjEEDwCQsXD0UCH3l+AwMBiQEECSd1QhIgDYh8l4oYNg5DhQoIAIuXfIoEERp1AiIHoIuMiaUJG6kUrAChfLgBBY4TtJ+3wcEFB6a+QgIyEA3CwgUKGAwhqTQEts0FvAkZLZESC9aVtwgNvAsMKJydNeAQu8QKAQspFRaRQg8XCR4EowkMFWAMMiJgxooICfgwyDCBxD1CDjRsqGAihgUHD49w6ZKlI48gACH5BAUPADwALAYACAAJAAYAAAYeQB4PgeA1DkIeYLksQJTMppMXEAKE1SizUIBem7wgACH5BAkyADwALAAAAAAUABgAAAY1QJ5wSCwaj8ikcslsOp/Q6DMQ4FGdgcEgu2VmqeDuciCs8shL7lYrVoKtV6l8Tq/b7/j8MQgAIfkECQoAPAAsAQABABIAFgAABs9AnnBIFBqKSN7RmEwen8vm0ECVDgXYrFUgeelwlFFJJUgKciBFIKCAEFiuMvFxWwcGg0DjQFhcHlcfd3l4eQVuCSdyEnd2eWsFHBAYNg48Ah8cdo1rHAV8ERpYIgcIAKd2p54ECRtYFKWnsrIFBawTrwqms7SguAIyEA28tAoYDCFYNASxszu1rBktZRILzA27erYLDCiWlzXWmwcKfSkVFnI8DxcJHmsEBB4JDBUwgEQCMysRCQkRDDJMIKEunwMNGyqYiGHBQUEkWbQUCQIAIfkEBQ8APAAsAQACABIAFQAABslAnnBIFBqKSN7RmEwen8umYEptCgWSVyBAGZVUgqRgGxgMAhACyxUmPspn8/lAWFwew/F5uw8UOAQJJ20SHGRlZBwFEBg2DjwCHwoIAJVklRx0ERpTIgeUlaGVBQWBG1MUn6KipIETqJOrlR0Fmq8CMhANsgC0ChgMIVM0BKqifqUJGS1hEgvFDYcNpQsMKI+QNc8QB1sHCnUpFRZtPA8XCR4E6wQeCQwVMHhEAjMrEQkJEQwZEyTl9Bxo2FDBRAwLDgAioVKlSBAAIfkEBTIAPAAsBwAHAAYADAAABh9AHgDAKwoBBOOQoSQwjdCotCOFdoidLBExRBgLBWMQACH5BAkKADwALAEAAgASABUAAAYuQJ5wSCwaj8ikcslsGgcDpxAadQ4CAek1K+16jQBvWDpmAs7cJRYrZX/f8LgwCAAh+QQFCgA8ACwBAAEAEgAWAAAGzUCecEjkGYpI4/CYRB6fzObSEJXyBNisVSB56XCUUUklSApyoEDgoCawXGXi46YIDAZ2PGFxeQwFH3V4amp6CSdxEiANdoSFARAYNg5XgQh5eHd4BwQRGlgiBwgAhKRqBQUECRtYFKIAsLGwqKoTrQqjsrEFnBG2AjIQDbq7ChgMIVg0BK+6tAkZLWUSC8wBuZepCwwolFc11RCOCnspFRZxPA8XCR4EbR4JDBUwfkQCMysRCQkRDBkTSKS750DDhgomYlhwMBBJFi1FggAAOw%3D%3D"></p>
</div>
<div id="app"></div>
<div id="output"></div>
<script src="lib/ejs.min.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>
</body>
......
index.php deleted 100644 → 0
View file @ 522577ed
<?php
header('Content-Type:text/html; charset=utf-8');
header_remove('X-UA-Compatible');
?><!DOCTYPE html>
<html>
<head>
<title>Signatur-Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Signatur-Generator</h1>
<p>Name und Jobtitel und der ganze Kram.. und ab geht die Post <img alt="Embedded Image" width="20" height="24" src="data:image/gif;base64,R0lGODlhFAAYANUDAP/mIEA0EFVACP////bKAP/aFI1dAPraEP/iHPK2APrWDPK+AO6qAP/eGG1MBFlACPrSCO6yAHFVBN6VAPLGAOadAKVpBMKNAPbCAOqhAKVxBM6NAGVQHEAUEPLCALKNAPbOBM6FAN62ANalAJVhBK6BBOaZAKp1BOKVAO6uAG1QBOalAO66AKVtAJlxBK6JBLp1AMqFAN6uAJlpBK6FAK59AOqqAMqlAPbGAJ19BNauAGFMGAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/iREZXNpZ24gYnkgQWl3YW4gKHd3dy5rb2xvYm9rLndyZy5ydSkAIfkEBWQAPAAsAAAAABQAGAAABtxAnnBILBqPQwPSqBQ2l0Wl9Al1GqhVnmDLzQokLx2OMiqpBEtBDqQ4HBQQAsuFNj5uikYjEEDwCQsXD0UCH3l+AwMBiQEECSd1QhIgDYh8l4oYNg5DhQoIAIuXfIoEERp1AiIHoIuMiaUJG6kUrAChfLgBBY4TtJ+3wcEFB6a+QgIyEA3CwgUKGAwhqTQEts0FvAkZLZESC9aVtwgNvAsMKJydNeAQu8QKAQspFRaRQg8XCR4EowkMFWAMMiJgxooICfgwyDCBxD1CDjRsqGAihgUHD49w6ZKlI48gACH5BAUPADwALAYACAAJAAYAAAYeQB4PgeA1DkIeYLksQJTMppMXEAKE1SizUIBem7wgACH5BAkyADwALAAAAAAUABgAAAY1QJ5wSCwaj8ikcslsOp/Q6DMQ4FGdgcEgu2VmqeDuciCs8shL7lYrVoKtV6l8Tq/b7/j8MQgAIfkECQoAPAAsAQABABIAFgAABs9AnnBIFBqKSN7RmEwen8vm0ECVDgXYrFUgeelwlFFJJUgKciBFIKCAEFiuMvFxWwcGg0DjQFhcHlcfd3l4eQVuCSdyEnd2eWsFHBAYNg48Ah8cdo1rHAV8ERpYIgcIAKd2p54ECRtYFKWnsrIFBawTrwqms7SguAIyEA28tAoYDCFYNASxszu1rBktZRILzA27erYLDCiWlzXWmwcKfSkVFnI8DxcJHmsEBB4JDBUwgEQCMysRCQkRDDJMIKEunwMNGyqYiGHBQUEkWbQUCQIAIfkEBQ8APAAsAQACABIAFQAABslAnnBIFBqKSN7RmEwen8umYEptCgWSVyBAGZVUgqRgGxgMAhACyxUmPspn8/lAWFwew/F5uw8UOAQJJ20SHGRlZBwFEBg2DjwCHwoIAJVklRx0ERpTIgeUlaGVBQWBG1MUn6KipIETqJOrlR0Fmq8CMhANsgC0ChgMIVM0BKqifqUJGS1hEgvFDYcNpQsMKI+QNc8QB1sHCnUpFRZtPA8XCR4E6wQeCQwVMHhEAjMrEQkJEQwZEyTl9Bxo2FDBRAwLDgAioVKlSBAAIfkEBTIAPAAsBwAHAAYADAAABh9AHgDAKwoBBOOQoSQwjdCotCOFdoidLBExRBgLBWMQACH5BAkKADwALAEAAgASABUAAAYuQJ5wSCwaj8ikcslsGgcDpxAadQ4CAek1K+16jQBvWDpmAs7cJRYrZX/f8LgwCAAh+QQFCgA8ACwBAAEAEgAWAAAGzUCecEjkGYpI4/CYRB6fzObSEJXyBNisVSB56XCUUUklSApyoEDgoCawXGXi46YIDAZ2PGFxeQwFH3V4amp6CSdxEiANdoSFARAYNg5XgQh5eHd4BwQRGlgiBwgAhKRqBQUECRtYFKIAsLGwqKoTrQqjsrEFnBG2AjIQDbq7ChgMIVg0BK+6tAkZLWUSC8wBuZepCwwolFc11RCOCnspFRZxPA8XCR4EbR4JDBUwfkQCMysRCQkRDBkTSKS750DDhgomYlhwMBBJFi1FggAAOw%3D%3D" /></p>
<form name="sigform" method="post" action="sig.php" charset="UTF-8">
<label>
<input autofocus="true" class="input_text" type="text" name="firstname" value="" />
Vorname
</label>
<label>
<input class="input_text" type="text" name="lastname" value="" />
Nachname
</label>
<label>
<input type="email" class="input_text" name="email" value="NAME@gofeminin.de" />
E-Mail
</label>
<label>
<input type="text" class="input_text" name="jobtitle" value="" />
Jobtitel
</label>
<label>
<input type="tel" class="input_text" name="telephone" value="+49 (0) 221 / 28 325-" />
Telefon
</label>
<label>
<input type="tel" class="input_text" name="corp_telephone" placeholder="+49 175 1337 187" />
Dienstliche Handynummer
</label>
<label>
<input type="tel" class="input_text" name="fax" value="+49 (0) 22 1 / 28 325-555" />
Fax
</label>
<label>
<input type="checkbox" class="radio" name="dmexco2015" value="true" />
Dmexco Zusatzinfo
</label>
<label>
<input type="checkbox" class="radio" name="newsgif" value="true" />
News GIF
</label>
<label>
<input type="checkbox" class="radio" name="boxstories" value="true" />
BoxStories.de Banner
</label>
<fieldset>
Portal
<label>
<input type="radio" class="radio" name="portal" value="gofeminin" checked="checked" />
gofeminin.de
</label>
<label>
<input type="radio" class="radio" name="portal" value="onmeda" />
Onmeda
</label>
</fieldset>
<fieldset>
Signatur Datei Erstellen?
<label>
<input type="radio" class="radio" name="genfile" value="true" checked="checked"/>
Ja, klar
</label>
<label>
<input type="radio" class="radio" name="genfile" value="false" />
Nein, gib mir nur den Code
</label>
</fieldset>
<button type="submit">Ich bin soweit!</button>
</form>
<div contenteditable="true" id="code"></div>
<div id="preview"></div>
<iframe name="hidden_iframe" src="about:blank"></iframe>
</div>
<script src="magic.js"></script>
</body>
</html>
magic.js deleted 100644 → 0
View file @ 522577ed
(function(){
var $ = function(s){return document.querySelectorAll(s);},
preview = $('#preview')[0],
gen_file = $('input[type="radio"]')[$('input[type="radio"]').length-2],
code = $('#code')[0],
form = $('form')[0],
iframe = $('iframe')[0],
headlines = {
code: document.createElement('h2'),
preview: document.createElement('h2')
},
submit_btn = $('button')[0];
headlines.code.innerHTML = 'Code';
headlines.preview.innerHTML = 'Preview';
iframe.onload = function() {
var contents;
if ( this.contentDocument ) {
contents = this.contentDocument.getElementsByTagName('body')[0];
} else if ( iFrame.contentWindow ) {
contents = this.contentWindow.document.getElementsByTagName('body')[0];
}
preview.parentNode.insertBefore(headlines.preview, preview.previousSibling);
preview.innerHTML = contents.outerHTML;
code.parentNode.insertBefore(headlines.code, code.previousSibling);
code.innerHTML = contents.outerHTML.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
return '&#'+i.charCodeAt(0)+';';
});
code.style.display = 'block';
preview.style.display = 'block';
window.location.href='#code';
};
submit_btn.onclick = function ( ev ) {
ev.preventDefault();
if ( gen_file.checked ) {
form.target = '_self';
} else {
form.target = 'hidden_iframe';
}
form.submit();
};
}());
sig.php deleted 100644 → 0
View file @ 522577ed
<?php
function get_post_data_by_key ( $key ) {
if ( isset ($_POST[ $key ] ) )
return $_POST[ $key ];
else
return '';
};
define('FILENAME','signature.html');
define('PORTAL', get_post_data_by_key('portal'));
$newsContent = "";
$news = false;
switch ( PORTAL ) {
case 'onmeda':
$template_contents = file_get_contents('templates/onmeda.de.html');
break;
default:
if ( get_post_data_by_key('dmexco2015') === 'true' ) {
$template_contents = file_get_contents('templates/gofeminin_dmexco_2016.html');
if ( get_post_data_by_key('newsgif') !== '' ) {
$newsContent = "<tr><td width=\"100%\" style=\"max-widht:600px;\" align=\"left\"><a href=\"http://www.gofeminin.de/\" target=\"_blank\"><img src=\"http://www.gofeminin.de/reloaded/emailSignature.gif\" border=\"0\" /></a></td></tr>";
}
} else if ( get_post_data_by_key('newsgif') === '' && get_post_data_by_key('boxstories') === '' ) {
$template_contents = file_get_contents('templates/gofeminin_without_newsgif.html');
} else if ( get_post_data_by_key('newsgif') === '' && get_post_data_by_key('boxstories') === 'true' ) {
$template_contents = file_get_contents('templates/gofeminin_without_newsgif_boxstories.html');
} else if ( get_post_data_by_key('newsgif') === 'true' && get_post_data_by_key('boxstories') === 'true' ) {
$template_contents = file_get_contents('templates/gofeminin_boxstories.html');
} else {
$template_contents = file_get_contents('templates/gofeminin.html');
}
break;
}
$corp_phone = get_post_data_by_key('corp_telephone');
$corp_phone = ($corp_phone == '') ? '' : 'Mobil: ' . $corp_phone . '<br>';
$template_contents = str_replace(
array(
'{{firstname}}',
'{{lastname}}',
'{{jobtitle}}',
'{{email}}',
'{{telephone}}',
'{{corp_telephone}}',
'{{fax}}',
'<!-- NEWS_GIF -->'
),
array(
get_post_data_by_key('firstname'),
get_post_data_by_key('lastname'),
get_post_data_by_key('jobtitle'),
get_post_data_by_key('email'),
get_post_data_by_key('telephone'),
$corp_phone,
get_post_data_by_key('fax'),
$newsContent
),
$template_contents
);
if( $_POST['genfile'] === "true" ) {
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Content-Type: application/force-download, charset=utf-8');
header('Content-Description: File Transfer');
header('Content-Disposition: attachment; filename='.FILENAME);
header('Content-Transfer-Encoding: binary');
echo "\xEF\xBB\xBF"; // UTF-8 BOM
} else {
header('Content-Disposition: inline; filename='.FILENAME);
header('Content-Type: text/html, charset=utf-8');
}
echo $template_contents;
?>
style.css
View file @ db511611
......@@ -6,38 +6,18 @@ html,body {
background-color: #fff;
}
.container {
#intro,#app,#output {
padding: 20px;
margin: 20px auto;
max-width: 550px;
}
#code {
display: none;
border: 1px solid #000;
max-width: 100%;
height: 100px;
overflow: auto;
}
#preview {
display: none;
max-width: 100%;
overflow: auto;
}
iframe {
display: none;
}
fieldset {
border: 0 none;
display: block;
.inputbox {
padding: 10px;
}
label {
display: block;
padding: 10px;
padding-left: 10px;
}
input {
......@@ -54,46 +34,13 @@ input:focus {
background-color: #ffa;
}
textarea {
border: 1px solid #000;
width: 320px;
height: 60px;
border-radius:5px;
padding: 10px;
}
textarea:hover {
background-color: #ffd;
}
textarea[disabled]:hover {
background-color: #D4D0C8;
}
textarea:focus {
background-color: #ffa;
}
input.input_text {
input[type="text"] {
width: 220px;
}
input.input_integer {
width: 50px;
}
input.radio {
border: none;
}
button {
border: 1px solid #000;
border-radius:5px;
padding: 20px;
font-weight: bold;
}
#preview_sigpic {
height: 18px;
border: 0;
}
templates/gofeminin.html
View file @ db511611
......@@ -17,7 +17,7 @@
<br>
<% if (mobile) { %>
<font color="#68696b"><%= mobile %></font>
<% } %>
<% } -%>
<font color="#68696b">Fax <%= fax %></font>
</font>
</td>
......
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