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

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

parent 522577ed
(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);
......
......@@ -19,7 +19,7 @@
"type": "input",
"name": "email",
"label": "E-Mail",
"value": "",
"value": "vorname.nachname@gofeminin.de",
"placeholder": ""
},
{
......
......@@ -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>
......
<?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>
(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();
};
}());
<?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;
?>
......@@ -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;
}
......@@ -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