writefreely
/
writefreely
mirror of https://github.com/writefreely/writefreely.git
2
0
Fork 0
Code Issues Releases 25 Wiki Activity
A clean, Markdown-based publishing platform made for writers. Write together, and build a community. https://writefreely.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
797 Commits
45 Branches
234 MiB
 
 
 
 
 
Tree: f846cada4b
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'f846cada4b'
${ noResults }
writefreely/templates/pad.tmpl

368 lines
13 KiB
Raw Blame History 

  1. {{define "pad"}}<!DOCTYPE HTML>

  2. <html>

  3. 	<head>

  4. 

  5. 		<title>{{if .Editing}}Editing {{if .Post.Title}}{{.Post.Title}}{{else}}{{.Post.Id}}{{end}}{{else}}New Post{{end}} &mdash; {{.SiteName}}</title>

  6. 		

  7. 		<link rel="stylesheet" type="text/css" href="/css/write.css" />

  8. 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

  9. 

  10. 		<meta name="google" value="notranslate">

  11. 	</head>

  12. 	<body id="pad" class="light">

  13. 

  14. 		<div id="overlay"></div>

  15. 		

  16. 		<textarea id="writer" placeholder="Write..." class="{{.Post.Font}}" autofocus>{{if .Post.Title}}# {{.Post.Title}}

  17. 

  18. {{end}}{{.Post.Content}}</textarea>

  19. 		

  20. 		<header id="tools">

  21. 			<div id="clip">

  22. 				{{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}}

  23. 				<nav id="target" {{if .SingleUser}}style="margin-left:0"{{end}}><ul>

  24. 						{{if .Editing}}<li>{{if .EditCollection}}<a href="{{.EditCollection.CanonicalURL}}">{{.EditCollection.Title}}</a>{{else}}<a>Draft</a>{{end}}</li>

  25. 						{{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>

  26. 						<ul>

  27. 							<li class="menu-heading">Publish to...</li>

  28. 							{{if .Blogs}}{{range $idx, $el := .Blogs}}

  29. 								<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>

  30. 							{{end}}{{end}}

  31. 							<li class="target" id="blog-anonymous"><a href="#anonymous"><i class="material-icons md-18">description</i> <em>Draft</em></a></li>

  32. 							<li id="user-separator" class="separator"><hr /></li>

  33. 						{{ if .SingleUser }}

  34. 							<li><a href="/"><i class="material-icons md-18">launch</i> View Blog</a></li>

  35. 							<li><a href="/me/c/{{.Username}}"><i class="material-icons md-18">palette</i> Customize</a></li>

  36. 							<li><a href="/me/c/{{.Username}}/stats"><i class="material-icons md-18">trending_up</i> Stats</a></li>

  37. 						{{ else }}

  38. 							<li><a href="/me/c/"><i class="material-icons md-18">library_books</i> View Blogs</a></li>

  39. 						{{ end }}

  40. 							<li><a href="/me/posts/"><i class="material-icons md-18">view_list</i> View Drafts</a></li>

  41. 							<li><a href="/me/logout"><i class="material-icons md-18">power_settings_new</i>  Log out</a></li>

  42. 						</ul>

  43. 					</li>{{end}}

  44. 				</ul></nav>

  45. 				<nav id="font-picker" class="if-room room-3 hidden" style="margin-left:-1em"><ul>

  46. 						<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>

  47. 						<ul style="text-align: center">

  48. 							<li class="menu-heading">Font</li>

  49. 							<li class="selected"><a class="font norm" href="#norm">Serif</a></li>

  50. 							<li><a class="font sans" href="#sans">Sans-serif</a></li>

  51. 							<li><a class="font wrap" href="#wrap">Monospace</a></li>

  52. 						</ul>

  53. 					</li>

  54. 				</ul></nav>

  55. 				<span id="wc" class="hidden if-room room-4">0 words</span>

  56. 			</div>

  57. 			<noscript style="margin-left: 2em;"><strong>NOTE</strong>: for now, you'll need Javascript enabled to post.</noscript>

  58. 			<div id="belt">

  59. 				{{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}}

  60. 				<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>

  61. 				<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>

  62. 				<div class="tool"><a href="#publish" title="Publish" id="publish"><img class="ic-24dp" src="/img/ic_send_dark@2x.png" /></a></div>

  63. 			</div>

  64. 		</header>

  65. 

  66. 		<script src="/js/h.js"></script>

  67. 		<script>

  68. 		function toggleTheme() {

  69. 			var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));

  70. 			var newTheme = '';

  71. 			if (document.body.classList.contains('light')) {

  72. 				newTheme = 'dark';

  73. 				document.body.className = document.body.className.replace(/(?:^|\s)light(?!\S)/g, newTheme);

  74. 				for (var i=0; i<btns.length; i++) {

  75. 					btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');

  76. 				}

  77. 			} else {

  78. 				newTheme = 'light';

  79. 				document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme);

  80. 				for (var i=0; i<btns.length; i++) {

  81. 					btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');

  82. 				}

  83. 			}

  84. 			H.set('padTheme', newTheme);

  85. 		}

  86. 		if (H.get('padTheme', 'light') != 'light') {

  87. 			toggleTheme();

  88. 		}

  89. 		var $writer = H.getEl('writer');

  90. 		var $btnPublish = H.getEl('publish');

  91. 		var $wc = H.getEl("wc");

  92. 		var updateWordCount = function() {

  93. 			var words = 0;

  94. 			var val = $writer.el.value.trim();

  95. 			if (val != '') {

  96. 				words = $writer.el.value.trim().replace(/\s+/gi, ' ').split(' ').length;

  97. 			}

  98. 			$wc.el.innerText = words + " word" + (words != 1 ? "s" : "");

  99. 		};

  100. 		var setButtonStates = function() {

  101. 			if (!canPublish) {

  102. 				$btnPublish.el.className = 'disabled';

  103. 				return;

  104. 			}

  105. 			if ($writer.el.value.length === 0 || (draftDoc != 'lastDoc' && $writer.el.value == origDoc)) {

  106. 				$btnPublish.el.className = 'disabled';

  107. 			} else {

  108. 				$btnPublish.el.className = '';

  109. 			}

  110. 		};

  111. 		{{if .Post.Id}}var draftDoc = 'draft{{.Post.Id}}';

  112. 		var origDoc = '{{.Post.Content}}';{{else}}var draftDoc = 'lastDoc';{{end}}

  113. 		H.load($writer, draftDoc, true);

  114. 		updateWordCount();

  115. 		

  116. 		var typingTimer;

  117. 		var doneTypingInterval = 200;

  118. 

  119. 		var posts;

  120. 		{{if and .Post.Id (not .Post.Slug)}}

  121. 		var token = null;

  122. 		var curPostIdx;

  123. 		posts = JSON.parse(H.get('posts', '[]'));

  124. 		for (var i=0; i<posts.length; i++) {

  125. 			if (posts[i].id == "{{.Post.Id}}") {

  126. 				token = posts[i].token;

  127. 				break;

  128. 			}

  129. 		}

  130. 		var canPublish = token != null;

  131. 		{{else}}var canPublish = true;{{end}}

  132. 		var publishing = false;

  133. 		var justPublished = false;

  134. 		var silenced = {{.Silenced}};

  135. 		var publish = function(content, font) {

  136. 			if (silenced === true) {

  137. 				alert("Your account is silenced, so you can't publish or update posts.");

  138. 				return;

  139. 			}

  140. 			{{if and (and .Post.Id (not .Post.Slug)) (not .User)}}

  141. 			if (!token) {

  142. 				alert("You don't have permission to update this post.");

  143. 				return;

  144. 			}

  145. 			if ($btnPublish.el.className == 'disabled') {

  146. 				return;

  147. 			}

  148. 			{{end}}

  149. 			$btnPublish.el.children[0].textContent = 'more_horiz';

  150. 			publishing = true;

  151. 			var xpostTarg = H.get('crosspostTarget', '[]');

  152. 

  153. 			var http = new XMLHttpRequest();

  154. 			var lang = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);

  155. 			lang = lang.substring(0, 2);

  156. 			var post = H.getTitleStrict(content);

  157. 

  158. 			var params = {

  159. 				body: post.content,

  160. 				title: post.title,

  161. 				font: font,

  162. 				lang: lang

  163. 			};

  164. 			{{ if .Post.Slug }}

  165. 			var url = "/api/collections/{{.EditCollection.Alias}}/posts/{{.Post.Id}}";

  166. 			{{ else if .Post.Id }}

  167. 			var url = "/api/posts/{{.Post.Id}}";

  168. 			if (typeof token === 'undefined' || !token) {

  169. 				token = "";

  170. 			}

  171. 			params.token = token;

  172. 			{{ else }}

  173. 			var url = "/api/posts";

  174. 			var postTarget = H.get('postTarget', 'anonymous');

  175. 			if (postTarget != 'anonymous') {

  176. 				url = "/api/collections/" + postTarget + "/posts";

  177. 			}

  178. 			params.crosspost = JSON.parse(xpostTarg);

  179. 			{{ end }}

  180. 

  181. 			http.open("POST", url, true);

  182. 

  183. 			// Send the proper header information along with the request

  184. 			http.setRequestHeader("Content-type", "application/json");

  185. 

  186. 			http.onreadystatechange = function() {

  187. 				if (http.readyState == 4) {

  188. 					publishing = false;

  189. 					if (http.status == 200 || http.status == 201) {

  190. 						data = JSON.parse(http.responseText);

  191. 						id = data.data.id;

  192. 						nextURL = '{{if .SingleUser}}/d{{end}}/'+id;

  193. 

  194. 						{{ if not .Post.Id }}

  195. 							// Post created

  196. 							if (postTarget != 'anonymous') {

  197. 							  nextURL = {{if not .SingleUser}}'/'+postTarget+{{end}}'/'+data.data.slug;

  198. 							}

  199. 							editToken = data.data.token;

  200. 

  201. 							{{ if not .User }}if (postTarget == 'anonymous') {

  202. 								// Save the data

  203. 								var posts = JSON.parse(H.get('posts', '[]'));

  204. 

  205. 								{{if .Post.Id}}var newPost = H.createPost("{{.Post.Id}}", token, content);

  206. 								for (var i=0; i<posts.length; i++) {

  207. 									if (posts[i].id == "{{.Post.Id}}") {

  208. 										posts[i].title = newPost.title;

  209. 										posts[i].summary = newPost.summary;

  210. 										break;

  211. 									}

  212. 								}

  213. 								nextURL = "/pad/posts";{{else}}posts.push(H.createPost(id, editToken, content));{{end}}

  214. 

  215. 								H.set('posts', JSON.stringify(posts));

  216. 							}

  217. 							{{ end }}

  218. 						{{ end }}

  219. 

  220. 						justPublished = true;

  221. 						if (draftDoc != 'lastDoc') {

  222. 							H.remove(draftDoc);

  223. 							{{if .Editing}}H.remove('draft{{.Post.Id}}font');{{end}}

  224. 						} else {

  225. 							H.set(draftDoc, '');

  226. 						}

  227. 

  228. 						{{if .EditCollection}}

  229. 						window.location = '{{.EditCollection.CanonicalURL}}{{.Post.Slug}}';

  230. 						{{else}}

  231. 						window.location = nextURL;

  232. 						{{end}}

  233. 					} else {

  234. 						$btnPublish.el.children[0].textContent = 'send';

  235. 						alert("Failed to post. Please try again.");

  236. 					}

  237. 				}

  238. 			}

  239. 			http.send(JSON.stringify(params));

  240. 		};

  241. 

  242. 		setButtonStates();

  243. 		$writer.on('keyup input', function() {

  244. 			setButtonStates();

  245. 			clearTimeout(typingTimer);

  246. 			typingTimer = setTimeout(doneTyping, doneTypingInterval);

  247. 		}, false);

  248. 		$writer.on('keydown', function(e) {

  249. 			clearTimeout(typingTimer);

  250. 			if (e.keyCode == 13 && (e.metaKey || e.ctrlKey)) {

  251. 				$btnPublish.el.click();

  252. 			}

  253. 		});

  254. 		$btnPublish.on('click', function(e) {

  255. 			e.preventDefault();

  256. 			if (!publishing && $writer.el.value) {

  257. 				var content = $writer.el.value;

  258. 				publish(content, selectedFont);

  259. 			}

  260. 		});

  261. 

  262. 		H.getEl('toggle-theme').on('click', function(e) {

  263. 			e.preventDefault();

  264. 			var newTheme = 'light';

  265. 			if (document.body.className == 'light') {

  266. 				newTheme = 'dark';

  267. 			}

  268. 			toggleTheme();

  269. 		});

  270. 

  271. 		var targets = document.querySelectorAll('#target li.target a');

  272. 		for (var i=0; i<targets.length; i++) {

  273. 			targets[i].addEventListener('click', function(e) {

  274. 				e.preventDefault();

  275. 				var targetName = this.href.substring(this.href.indexOf('#')+1);

  276. 				H.set('postTarget', targetName);

  277. 

  278. 				document.querySelector('#target li.target.selected').classList.remove('selected');

  279. 				this.parentElement.classList.add('selected');

  280. 				var newText = this.innerText.split(' ');

  281. 				newText.shift();

  282. 				document.getElementById('target-name').innerText = newText.join(' ');

  283. 			});

  284. 		}

  285. 		var postTarget = H.get('postTarget', '{{if .Blogs}}{{$blog := index .Blogs 0}}{{$blog.Alias}}{{else}}anonymous{{end}}');

  286. 		if (location.hash != '') {

  287. 			postTarget = location.hash.substring(1);

  288. 			// TODO: pushState to /pad (or whatever the URL is) so we live on a clean URL

  289. 			location.hash = '';

  290. 		}

  291. 		var pte = document.querySelector('#target li.target#blog-'+postTarget+' a');

  292. 		if (pte != null) {

  293. 			pte.click();

  294. 		} else {

  295. 			postTarget = 'anonymous';

  296. 			H.set('postTarget', postTarget);

  297. 		}

  298. 

  299. 		var sansLoaded = false;

  300. 		WebFontConfig = {

  301. 			custom: { families: [ 'Lora:400,700:latin' ], urls: [ '/css/fonts.css' ] }

  302. 		};

  303. 		var loadSans = function() {

  304. 		  if (sansLoaded) return;

  305. 		  sansLoaded = true;

  306. 		  WebFontConfig.custom.families.push('Open+Sans:400,700:latin');

  307. 		  try {

  308. 			  (function() {

  309. 				var wf=document.createElement('script');

  310. 				wf.src = '/js/webfont.js';

  311. 				wf.type='text/javascript';

  312. 				wf.async='true';

  313. 				var s=document.getElementsByTagName('script')[0];

  314. 				s.parentNode.insertBefore(wf, s);

  315. 			  })();

  316. 		  } catch (e) {}

  317. 		};

  318. 		var fonts = document.querySelectorAll('nav#font-picker a.font');

  319. 		for (var i=0; i<fonts.length; i++) {

  320. 			fonts[i].addEventListener('click', function(e) {

  321. 				e.preventDefault();

  322. 				selectedFont = this.href.substring(this.href.indexOf('#')+1);

  323. 				$writer.el.className = selectedFont;

  324. 				document.querySelector('nav#font-picker li.selected').classList.remove('selected');

  325. 				this.parentElement.classList.add('selected');

  326. 				H.set('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', selectedFont);

  327. 				if (selectedFont == 'sans') {

  328. 					loadSans();

  329. 				}

  330. 			});

  331. 		}

  332. 		var selectedFont = H.get('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', '{{.Post.Font}}');

  333. 		var sfe = document.querySelector('nav#font-picker a.font.'+selectedFont);

  334. 		if (sfe != null) {

  335. 			sfe.click();

  336. 		}

  337. 

  338. 		var doneTyping = function() {

  339. 			if (draftDoc == 'lastDoc' || $writer.el.value != origDoc) {

  340. 				H.save($writer, draftDoc);

  341. 				updateWordCount();

  342. 			}

  343. 		};

  344. 		window.addEventListener('beforeunload', function(e) {

  345. 			if (draftDoc != 'lastDoc' && $writer.el.value == origDoc) {

  346. 				H.remove(draftDoc);

  347. 			} else if (!justPublished) {

  348. 				doneTyping();

  349. 			}

  350. 		});

  351. 

  352. 		try {

  353. 		  (function() {

  354. 			var wf=document.createElement('script');

  355. 			wf.src = '/js/webfont.js';

  356. 			wf.type='text/javascript';

  357. 			wf.async='true';

  358. 			var s=document.getElementsByTagName('script')[0];

  359. 			s.parentNode.insertBefore(wf, s);

  360. 		  })();

  361. 		} catch (e) {

  362. 		  // whatevs

  363. 		}

  364. 		</script>

  365. 		<link href="/css/icons.css" rel="stylesheet">

  366. 	</body>

  367. </html>{{end}}