401 lines
14 KiB
Cheetah
401 lines
14 KiB
Cheetah
{{define "pad"}}<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
|
|
<title>{{if .Editing}}Editing {{if .Post.Title}}{{.Post.Title}}{{else}}{{.Post.Id}}{{end}}{{else}}New Post{{end}} — {{.SiteName}}</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="/css/write.css" />
|
|
<link rel="stylesheet" type="text/css" href="/css/prose.css" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<meta name="google" value="notranslate">
|
|
</head>
|
|
<body id="pad" class="light classic">
|
|
|
|
<div id="overlay"></div>
|
|
|
|
<!-- <div style="text-align: center"> -->
|
|
<!-- <label style="border-right: 1px solid silver"> -->
|
|
<!-- Markdown <input type=radio name=inputformat value=markdown checked> </label> -->
|
|
<!-- <label> <input type=radio name=inputformat value=prosemirror> WYSIWYM</label> -->
|
|
<!-- </div> -->
|
|
<input type="text" id="title" name="title" placeholder="Title..." {{if .Post.Title}}value="{{.Post.Title}}"{{end}} autofocus />
|
|
<div id="editor" style="margin-bottom: 0"></div>
|
|
|
|
<div style="display: none"><textarea id="content"{{if .Post.Content }} value={{.Post.Content}}>{{.Post.Content}}{{else}}>{{end}}</textarea></div>
|
|
|
|
<header id="tools">
|
|
<div id="clip">
|
|
{{if not .SingleUser}}<h1><a href="/me/c/" title="View blogs"><img class="ic-24dp" src="/img/ic_blogs_dark@2x.png" /></a></h1>{{end}}
|
|
<nav id="target" {{if .SingleUser}}style="margin-left:0"{{end}}><ul>
|
|
{{if .Editing}}<li>{{if .EditCollection}}<a href="{{.EditCollection.CanonicalURL}}">{{.EditCollection.Title}}</a>{{else}}<a>Draft</a>{{end}}</li>
|
|
{{else}}<li><a id="publish-to"><span id="target-name">Draft</span> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
|
|
<ul>
|
|
<li class="menu-heading">Publish to...</li>
|
|
{{if .Blogs}}{{range $idx, $el := .Blogs}}
|
|
<li class="target{{if eq $idx 0}} selected{{end}}" id="blog-{{$el.Alias}}"><a href="#{{$el.Alias}}"><i class="material-icons md-18">public</i> {{if $el.Title}}{{$el.Title}}{{else}}{{$el.Alias}}{{end}}</a></li>
|
|
{{end}}{{end}}
|
|
<li class="target" id="blog-anonymous"><a href="#anonymous"><i class="material-icons md-18">description</i> <em>Draft</em></a></li>
|
|
<li id="user-separator" class="separator"><hr /></li>
|
|
{{ if .SingleUser }}
|
|
<li><a href="/"><i class="material-icons md-18">launch</i> View Blog</a></li>
|
|
<li><a href="/me/c/{{.Username}}"><i class="material-icons md-18">palette</i> Customize</a></li>
|
|
<li><a href="/me/c/{{.Username}}/stats"><i class="material-icons md-18">trending_up</i> Stats</a></li>
|
|
{{ else }}
|
|
<li><a href="/me/c/"><i class="material-icons md-18">library_books</i> View Blogs</a></li>
|
|
{{ end }}
|
|
<li><a href="/me/posts/"><i class="material-icons md-18">view_list</i> View Drafts</a></li>
|
|
<li><a href="/me/logout"><i class="material-icons md-18">power_settings_new</i> Log out</a></li>
|
|
</ul>
|
|
</li>{{end}}
|
|
</ul></nav>
|
|
<nav id="font-picker" class="if-room room-3 hidden" style="margin-left:-1em"><ul>
|
|
<li><a href="#" id="" onclick="return false"><img class="ic-24dp" src="/img/ic_font_dark@2x.png" /> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
|
|
<ul style="text-align: center">
|
|
<li class="menu-heading">Font</li>
|
|
<li class="selected"><a class="font norm" href="#norm">Serif</a></li>
|
|
<li><a class="font sans" href="#sans">Sans-serif</a></li>
|
|
<li><a class="font wrap" href="#wrap">Monospace</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul></nav>
|
|
<span id="wc" class="hidden if-room room-4">0 words</span>
|
|
</div>
|
|
<noscript style="margin-left: 2em;"><strong>NOTE</strong>: for now, you'll need Javascript enabled to post.</noscript>
|
|
<div id="belt">
|
|
{{if .Editing}}<div class="tool hidden if-room"><a href="{{if .EditCollection}}{{.EditCollection.CanonicalURL}}{{.Post.Slug}}/edit/meta{{else}}/{{if .SingleUser}}d/{{end}}{{.Post.Id}}/meta{{end}}" title="Edit post metadata" id="edit-meta"><img class="ic-24dp" src="/img/ic_info_dark@2x.png" /></a></div>{{end}}
|
|
<div class="tool hidden if-room room-2"><a href="#theme" title="Toggle theme" id="toggle-theme"><img class="ic-24dp" src="/img/ic_brightness_dark@2x.png" /></a></div>
|
|
<div class="tool if-room room-1"><a href="{{if not .User}}/pad/posts{{else}}/me/posts/{{end}}" title="View posts" id="view-posts"><img class="ic-24dp" src="/img/ic_list_dark@2x.png" /></a></div>
|
|
<div class="tool"><a href="#publish" title="Publish" id="publish"><img class="ic-24dp" src="/img/ic_send_dark@2x.png" /></a></div>
|
|
</div>
|
|
</header>
|
|
|
|
<script src="/js/h.js"></script>
|
|
<script>
|
|
function toggleTheme() {
|
|
var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
|
|
var newTheme = '';
|
|
if (document.body.classList.contains('light')) {
|
|
newTheme = 'dark';
|
|
document.body.className = document.body.className.replace(/(?:^|\s)light(?!\S)/g, newTheme);
|
|
for (var i=0; i<btns.length; i++) {
|
|
btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
|
|
}
|
|
} else {
|
|
TextnewTheme = 'light';
|
|
document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme);
|
|
for (var i=0; i<btns.length; i++) {
|
|
btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
|
|
}
|
|
}
|
|
H.set('padTheme', newTheme);
|
|
}
|
|
if (H.get('padTheme', 'light') != 'light') {
|
|
toggleTheme();
|
|
}
|
|
var $title = H.getEl('title');
|
|
var $writer = H.getQEl('div.ProseMirror');
|
|
var $content = H.getEl('content');
|
|
var $btnPublish = H.getEl('publish');
|
|
var $wc = H.getEl("wc");
|
|
var updateWordCount = function() {
|
|
var words = 0;
|
|
var val = $content.el.value.trim();
|
|
if (val != '') {
|
|
words = $content.el.value.trim().replace(/\s+/gi, ' ').split(' ').length;
|
|
}
|
|
val = $title.el.value.trim();
|
|
if (val != '') {
|
|
words += $title.el.value.trim().replace(/\s+/gi, ' ').split(' ').length;
|
|
}
|
|
$wc.el.innerText = words + " word" + (words != 1 ? "s" : "");
|
|
};
|
|
var setButtonStates = function() {
|
|
if (!canPublish) {
|
|
$btnPublish.el.className = 'disabled';
|
|
return;
|
|
}
|
|
if ($content.el.value.length === 0 || (draftDoc != 'lastDoc' && $content.el.value == origDoc)) {
|
|
$btnPublish.el.className = 'disabled';
|
|
} else {
|
|
$btnPublish.el.className = '';
|
|
}
|
|
};
|
|
{{if .Post.Id}}var draftDoc = 'draft{{.Post.Id}}';
|
|
var origDoc = '{{.Post.Content}}';{{else}}var draftDoc = 'lastDoc';{{end}}
|
|
|
|
// ProseMirror editor
|
|
window.draftKey = draftDoc;
|
|
|
|
// H.loadClassic($title, $writer, draftDoc, true);
|
|
updateWordCount();
|
|
|
|
var typingTimer;
|
|
var doneTypingInterval = 200;
|
|
|
|
var posts;
|
|
{{if and .Post.Id (not .Post.Slug)}}
|
|
var token = null;
|
|
var curPostIdx;
|
|
posts = JSON.parse(H.get('posts', '[]'));
|
|
for (var i=0; i<posts.length; i++) {
|
|
if (posts[i].id == "{{.Post.Id}}") {
|
|
token = posts[i].token;
|
|
break;
|
|
}
|
|
}
|
|
var canPublish = token != null;
|
|
{{else}}var canPublish = true;{{end}}
|
|
var publishing = false;
|
|
var justPublished = false;
|
|
var silenced = {{.Silenced}};
|
|
var publish = function(title, content, font) {
|
|
if (silenced === true) {
|
|
alert("Your account is silenced, so you can't publish or update posts.");
|
|
return;
|
|
}
|
|
{{if and (and .Post.Id (not .Post.Slug)) (not .User)}}
|
|
if (!token) {
|
|
alert("You don't have permission to update this post.");
|
|
return;
|
|
}
|
|
if ($btnPublish.el.className == 'disabled') {
|
|
return;
|
|
}
|
|
{{end}}
|
|
$btnPublish.el.children[0].textContent = 'more_horiz';
|
|
publishing = true;
|
|
var xpostTarg = H.get('crosspostTarget', '[]');
|
|
|
|
var http = new XMLHttpRequest();
|
|
var lang = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
|
|
lang = lang.substring(0, 2);
|
|
var post = H.getTitleStrict(content);
|
|
|
|
var params = {
|
|
body: post.content,
|
|
title: title,
|
|
font: font,
|
|
lang: lang
|
|
};
|
|
{{ if .Post.Slug }}
|
|
var url = "/api/collections/{{.EditCollection.Alias}}/posts/{{.Post.Id}}";
|
|
{{ else if .Post.Id }}
|
|
var url = "/api/posts/{{.Post.Id}}";
|
|
if (typeof token === 'undefined' || !token) {
|
|
token = "";
|
|
}
|
|
params.token = token;
|
|
{{ else }}
|
|
var url = "/api/posts";
|
|
var postTarget = H.get('postTarget', 'anonymous');
|
|
if (postTarget != 'anonymous') {
|
|
url = "/api/collections/" + postTarget + "/posts";
|
|
}
|
|
params.crosspost = JSON.parse(xpostTarg);
|
|
{{ end }}
|
|
|
|
http.open("POST", url, true);
|
|
|
|
// Send the proper header information along with the request
|
|
http.setRequestHeader("Content-type", "application/json");
|
|
|
|
http.onreadystatechange = function() {
|
|
if (http.readyState == 4) {
|
|
publishing = false;
|
|
if (http.status == 200 || http.status == 201) {
|
|
data = JSON.parse(http.responseText);
|
|
id = data.data.id;
|
|
nextURL = '{{if .SingleUser}}/d{{end}}/'+id;
|
|
|
|
{{ if not .Post.Id }}
|
|
// Post created
|
|
if (postTarget != 'anonymous') {
|
|
nextURL = {{if not .SingleUser}}'/'+postTarget+{{end}}'/'+data.data.slug;
|
|
}
|
|
editToken = data.data.token;
|
|
|
|
{{ if not .User }}if (postTarget == 'anonymous') {
|
|
// Save the data
|
|
var posts = JSON.parse(H.get('posts', '[]'));
|
|
|
|
{{if .Post.Id}}var newPost = H.createPost("{{.Post.Id}}", token, content);
|
|
for (var i=0; i<posts.length; i++) {
|
|
if (posts[i].id == "{{.Post.Id}}") {
|
|
posts[i].title = newPost.title;
|
|
posts[i].summary = newPost.summary;
|
|
break;
|
|
}
|
|
}
|
|
nextURL = "/pad/posts";{{else}}posts.push(H.createPost(id, editToken, content));{{end}}
|
|
|
|
H.set('posts', JSON.stringify(posts));
|
|
}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
justPublished = true;
|
|
if (draftDoc != 'lastDoc') {
|
|
H.remove(draftDoc);
|
|
{{if .Editing}}H.remove('draft{{.Post.Id}}font');{{end}}
|
|
} else {
|
|
H.set(draftDoc, '');
|
|
}
|
|
|
|
{{if .EditCollection}}
|
|
window.location = '{{.EditCollection.CanonicalURL}}{{.Post.Slug}}';
|
|
{{else}}
|
|
window.location = nextURL;
|
|
{{end}}
|
|
} else {
|
|
$btnPublish.el.children[0].textContent = 'send';
|
|
alert("Failed to post. Please try again.");
|
|
}
|
|
}
|
|
}
|
|
http.send(JSON.stringify(params));
|
|
};
|
|
|
|
setButtonStates();
|
|
$title.on('keydown', function(e) {
|
|
if (e.keyCode == 13) {
|
|
if (e.metaKey || e.ctrlKey) {
|
|
$btnPublish.el.click();
|
|
} else {
|
|
e.preventDefault();
|
|
$writer.el.focus();
|
|
}
|
|
}
|
|
});
|
|
/*
|
|
$writer.on('keyup input', function() {
|
|
setButtonStates();
|
|
clearTimeout(typingTimer);
|
|
typingTimer = setTimeout(doneTyping, doneTypingInterval);
|
|
}, false);
|
|
$writer.on('keydown', function(e) {
|
|
clearTimeout(typingTimer);
|
|
if (e.keyCode == 13 && (e.metaKey || e.ctrlKey)) {
|
|
$btnPublish.el.click();
|
|
}
|
|
});
|
|
*/
|
|
$btnPublish.on('click', function(e) {
|
|
e.preventDefault();
|
|
if (!publishing && $content.el.value) {
|
|
var title = $title.el.value;
|
|
var content = $content.el.value;
|
|
publish(title, content, selectedFont);
|
|
}
|
|
});
|
|
|
|
H.getEl('toggle-theme').on('click', function(e) {
|
|
e.preventDefault();
|
|
var newTheme = 'light';
|
|
if (document.body.className == 'light') {
|
|
newTheme = 'dark';
|
|
}
|
|
toggleTheme();
|
|
});
|
|
|
|
var targets = document.querySelectorAll('#target li.target a');
|
|
for (var i=0; i<targets.length; i++) {
|
|
targets[i].addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
var targetName = this.href.substring(this.href.indexOf('#')+1);
|
|
H.set('postTarget', targetName);
|
|
|
|
document.querySelector('#target li.target.selected').classList.remove('selected');
|
|
this.parentElement.classList.add('selected');
|
|
var newText = this.innerText.split(' ');
|
|
newText.shift();
|
|
document.getElementById('target-name').innerText = newText.join(' ');
|
|
});
|
|
}
|
|
var postTarget = H.get('postTarget', '{{if .Blogs}}{{$blog := index .Blogs 0}}{{$blog.Alias}}{{else}}anonymous{{end}}');
|
|
if (location.hash != '') {
|
|
postTarget = location.hash.substring(1);
|
|
// TODO: pushState to /pad (or whatever the URL is) so we live on a clean URL
|
|
location.hash = '';
|
|
}
|
|
var pte = document.querySelector('#target li.target#blog-'+postTarget+' a');
|
|
if (pte != null) {
|
|
pte.click();
|
|
} else {
|
|
postTarget = 'anonymous';
|
|
H.set('postTarget', postTarget);
|
|
}
|
|
|
|
var sansLoaded = false;
|
|
WebFontConfig = {
|
|
custom: { families: [ 'Lora:400,700:latin' ], urls: [ '/css/fonts.css' ] }
|
|
};
|
|
var loadSans = function() {
|
|
if (sansLoaded) return;
|
|
sansLoaded = true;
|
|
WebFontConfig.custom.families.push('Open+Sans:400,700:latin');
|
|
try {
|
|
(function() {
|
|
var wf=document.createElement('script');
|
|
wf.src = '/js/webfont.js';
|
|
wf.type='text/javascript';
|
|
wf.async='true';
|
|
var s=document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(wf, s);
|
|
})();
|
|
} catch (e) {}
|
|
};
|
|
var fonts = document.querySelectorAll('nav#font-picker a.font');
|
|
for (var i=0; i<fonts.length; i++) {
|
|
fonts[i].addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
selectedFont = this.href.substring(this.href.indexOf('#')+1);
|
|
// TODO: don't change classes on the editor window
|
|
//$title.el.className = selectedFont;
|
|
//$writer.el.className = selectedFont;
|
|
document.querySelector('nav#font-picker li.selected').classList.remove('selected');
|
|
this.parentElement.classList.add('selected');
|
|
H.set('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', selectedFont);
|
|
if (selectedFont == 'sans') {
|
|
loadSans();
|
|
}
|
|
});
|
|
}
|
|
var selectedFont = H.get('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', '{{.Post.Font}}');
|
|
var sfe = document.querySelector('nav#font-picker a.font.'+selectedFont);
|
|
if (sfe != null) {
|
|
sfe.click();
|
|
}
|
|
|
|
var doneTyping = function() {
|
|
if (draftDoc == 'lastDoc' || $content.el.value != origDoc) {
|
|
H.saveClassic($title, $content, draftDoc);
|
|
updateWordCount();
|
|
}
|
|
};
|
|
window.addEventListener('beforeunload', function(e) {
|
|
if (draftDoc != 'lastDoc' && $content.el.value == origDoc) {
|
|
H.remove(draftDoc);
|
|
} else if (!justPublished) {
|
|
doneTyping();
|
|
}
|
|
});
|
|
|
|
try {
|
|
(function() {
|
|
var wf=document.createElement('script');
|
|
wf.src = '/js/webfont.js';
|
|
wf.type='text/javascript';
|
|
wf.async='true';
|
|
var s=document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(wf, s);
|
|
})();
|
|
} catch (e) {
|
|
// whatevs
|
|
}
|
|
</script>
|
|
<script src="/js/prose.bundle.js"></script>
|
|
<link href="/css/icons.css" rel="stylesheet">
|
|
</body>
|
|
</html>{{end}}
|