48dcf2c701
Work started on confirmation dialogs displayed when one navigates from a page with unsaved changes
198 lines
8 KiB
HTML
198 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=480, initial-scale=1">
|
|
<title>Free responsive email template editor | Mosaico</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<link rel="stylesheet" href="rs/mosaico-libs-and-tinymce.min.css?v=0.17.5" />
|
|
<link rel="stylesheet" href="rs/mosaico-material.min.css?v=0.17.5" />
|
|
|
|
<script src="rs/mosaico-libs-and-tinymce.min.js?v=0.17.5"></script>
|
|
<script>
|
|
var initialEdits = [];
|
|
if (localStorage.getItem('edits')) {
|
|
var editKeys = JSON.parse(localStorage.getItem('edits'));
|
|
var md;
|
|
for (var i = 0; i < editKeys.length; i++) {
|
|
md = localStorage.getItem('metadata-'+editKeys[i]);
|
|
if (typeof md == 'string') {
|
|
initialEdits.push(JSON.parse(md));
|
|
} else {
|
|
console.log("Ignoring saved key", editKeys[i], "type", typeof md, md);
|
|
}
|
|
}
|
|
|
|
initialEdits.sort(function(a, b) {
|
|
var lastA = a.changed ? a.changed : a.created;
|
|
var lastB = b.changed ? b.changed : b.created;
|
|
if (lastA < lastB) return 1;
|
|
if (lastA > lastB) return -1;
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
var viewModel = {
|
|
showSaved: ko.observable(false),
|
|
edits: ko.observableArray(initialEdits),
|
|
templates: [{
|
|
name: 'versafix-1', desc: 'The versatile template'
|
|
},{
|
|
name: 'tedc15', desc: 'The TEDC15 template'
|
|
},{
|
|
name: 'tutorial', desc: 'The Tutorial'
|
|
}]
|
|
};
|
|
|
|
viewModel.edits.subscribe(function(newEdits) {
|
|
var keys = [];
|
|
for (var i = 0; i < newEdits.length; i++) {
|
|
keys.push(newEdits[i].key);
|
|
localStorage.setItem('metadata-'+newEdits[i].key, ko.toJSON(newEdits[i]));
|
|
}
|
|
localStorage.setItem('edits', ko.toJSON(keys));
|
|
});
|
|
|
|
viewModel.dateFormat = function(unixdate) {
|
|
if (typeof unixdate == 'undefined') return 'DD-MM-YYYY';
|
|
var d = new Date();
|
|
d.setTime(ko.utils.unwrapObservable(unixdate));
|
|
var m = ""+(d.getMonth()+1);
|
|
var h = ""+(d.getHours());
|
|
var i = ""+(d.getMinutes());
|
|
return d.getDate()+"/"+(m.length == 1 ? '0' : '')+m+"/"+d.getFullYear()+" "+(h.length == 1 ? '0' : '')+h+":"+(i.length == 1 ? '0' : '')+i;
|
|
};
|
|
|
|
viewModel.newEdit = function(shorttmplname) {
|
|
console.log("new", this, template);
|
|
var d = new Date();
|
|
var rnd = Math.random().toString(36).substr(2, 7);
|
|
var template = 'templates/'+shorttmplname+'/template-'+shorttmplname+'.html';
|
|
viewModel.edits.unshift({ created: Date.now(), key: rnd, name: shorttmplname, template: template });
|
|
document.location = 'editor.html?0.17.5#'+rnd;
|
|
// { data: 'AAAA-MM-GG', key: 'ABCDE' }
|
|
// viewModel.edits.push(template);
|
|
};
|
|
viewModel.renameEdit = function(index) {
|
|
var newName = window.prompt("Modifica nome", viewModel.edits()[index].name);
|
|
if (newName) {
|
|
var newItem = JSON.parse(ko.toJSON(viewModel.edits()[index]));
|
|
newItem.name = newName;
|
|
viewModel.edits.splice(index, 1, newItem);
|
|
}
|
|
return false;
|
|
};
|
|
viewModel.deleteEdit = function(index) {
|
|
var confirm = window.confirm("Are you sure you want to delete this content?");
|
|
if (confirm) {
|
|
var res = viewModel.edits.splice(index, 1);
|
|
console.log("removing template ", res);
|
|
localStorage.removeItem('template-'+res[0].key);
|
|
}
|
|
return false;
|
|
};
|
|
viewModel.list = function(clean) {
|
|
for (var i = localStorage.length - 1; i >= 0; i--) {
|
|
var key = localStorage.key(i);
|
|
if (clean) {
|
|
console.log("removing ", key, localStorage.getItem(key));
|
|
localStorage.removeItem(key);
|
|
} else {
|
|
console.log("ls ", key, localStorage.getItem(key));
|
|
}
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded',function(){
|
|
ko.applyBindings(viewModel);
|
|
});
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: "trebuchet ms",arial,sans-serif;
|
|
font-size: 13.6px;
|
|
}
|
|
|
|
a, a:link, a:visited {
|
|
color: #A00000;
|
|
text-decoration: none;
|
|
}
|
|
.template {
|
|
margin: 10px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.template a {
|
|
display: block;
|
|
outline: 2px solid #333332;
|
|
padding: 2px;
|
|
width: 340px;
|
|
height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
.template a:hover {
|
|
outline: 5px solid #900000;
|
|
transition: outline .2s;
|
|
}
|
|
#savedTable tbody tr:nth-child(odd) td {
|
|
background-color: white;
|
|
}
|
|
#savedTable td {
|
|
padding: 2px 5px ;
|
|
}
|
|
.operationButton, .resumeButton {
|
|
background-color: #333332;
|
|
color: white !important;
|
|
padding: 5px 8px;
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
}
|
|
.operationButton i {
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body style="overflow: auto; text-align: center; background-color: #3f3d33; padding: 0; margin: 0; display: none;" data-bind="visible: true">
|
|
<div style="background-color: #d2cbb1; padding: 10px;">
|
|
<table class="logoWrapper" valign="bottom" align="center"><tr><td valign="bottom"><img class="logoImage" alt="Mosaico" style="display: block;" src="rs/img/mosaicologo.png" /><div class="logoContainer"></div></td></tr></table>
|
|
</div>
|
|
<!-- ko if: edits().length -->
|
|
<div style="overflow-y: auto; max-height: 200px; z-index: 10; position: relative; padding: 1em; background-color: #f1eee6;">
|
|
<!-- ko ifnot: $root.showSaved --><span>You have saved contents in this browser! <a class="resumeButton" href="#" data-bind="click: $root.showSaved.bind(undefined, true);"><i class="fa fa-plus-square"></i> Show</a></span><!-- /ko -->
|
|
<!-- ko if: $root.showSaved -->
|
|
<table id="savedTable" align="center" cellspacing="0" cellpadding="8" style="padding: 5px; ">
|
|
<caption>Email contents saved in your browser <a href="#" class="resumeButton" data-bind="click: $root.showSaved.bind(undefined, false);"><i class="fa fa-minus-square"></i> Hide</a></caption>
|
|
<thead><tr>
|
|
<th>Id</th><th>Name</th><th>Created</th><th>Last changed</th><th>Operations</th>
|
|
</tr></thead>
|
|
<tbody data-bind="foreach: edits">
|
|
<tr>
|
|
<td align="left"><a href="#" data-bind="attr: { href: 'editor.html?0.17.5#'+key }"><code>#<span data-bind="text: key">key</span></code></a></td>
|
|
<td style="font-weight: bold" align="left"><a href="#" data-bind="attr: { href: 'editor.html?0.17.5#'+key }"><span data-bind="text: name">versamix</span></a></td>
|
|
<td><span data-bind="text: typeof created !== 'undefined' ? $root.dateFormat(created) : '-'">YYYY-MM-DD</span></td>
|
|
<td><span style="font-weight: bold" data-bind="text: typeof changed !== 'undefined' ? $root.dateFormat(changed) : '-'">YYYY-MM-DD</span></td>
|
|
<td>
|
|
<a class="operationButton" href="#" data-bind="attr: { href: 'editor.html?0.17.5#'+key }" title="edit"><i class="fa fa-pencil"></i></a>
|
|
<!--(<a href="#" data-bind="click: $root.renameEdit.bind(undefined, $index())" title="rinomina"><i class="fa fa-trash-o"></i></a>)-->
|
|
<a class="operationButton" href="#" data-bind="click: $root.deleteEdit.bind(undefined, $index())" title="delete"><i class="fa fa-trash-o"></i></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- /ko -->
|
|
</div>
|
|
<!-- /ko -->
|
|
<div class="content" style="background-color: white; margin-top: -20px; padding-top: 15px; background-origin: border; padding-bottom: 2em">
|
|
<h3>Choose a master template</h3>
|
|
<div data-bind="foreach: templates">
|
|
<div class="template template-xx" style="" data-bind="attr: { class: 'template template-'+name }">
|
|
<div class="description" style="padding-bottom:5px"><b data-bind="text: name">xx</b>: <span data-bind="text: desc">xx</span></div>
|
|
<a href="#" data-bind="click: $root.newEdit.bind(undefined, name), attr: { href: 'editor.html?0.17.5#templates/'+name+'/template-'+name+'.html' }">
|
|
<img src width="100%" alt="xx" data-bind="attr: { src: 'templates/'+name+'/edres/_full.png' }">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|