Mosaico upgraded to 0.17.5
Work started on confirmation dialogs displayed when one navigates from a page with unsaved changes
This commit is contained in:
Tomas Bures
parent
4f77272042
commit
48dcf2c701
399 changed files with 4032 additions and 77702 deletions
198
client/static/mosaico/index.html
Normal file
198
client/static/mosaico/index.html
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue