writefreely
/
writefreely
의 미러 https://github.com/writefreely/writefreely.git
2
0
포크 0
코드 이슈 릴리즈 25 위키 활동
A clean, Markdown-based publishing platform made for writers. Write together, and build a community. https://writefreely.org
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
453 커밋
45 브랜치
187 MiB
 
 
 
 
 
트리: be93f91311
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from 'be93f91311'
${ noResults }
writefreely/templates/pad.tmpl

468 lines
18 KiB
Raw Blame 히스토리 

  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. 							<li class="target selected" id="anonymous"><a href="#anonymous"><i class="material-icons md-18">description</i> <em>Draft</em></a></li>

  29. 							{{if .Blogs}}{{range .Blogs}}

  30. 							<li class="target" id="blog-{{.Alias}}"><a href="#{{.Alias}}"><i class="material-icons md-18">public</i> {{if .Title}}{{.Title}}{{else}}{{.Alias}}{{end}}</a></li>

  31. 							{{end}}{{end}}

  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. 

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

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

  137. 			if (!token) {

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

  139. 				return;

  140. 			}

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

  142. 				return;

  143. 			}

  144. 			{{end}}

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

  146. 			publishing = true;

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

  148. 

  149. 			var http = new XMLHttpRequest();

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

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

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

  153. 

  154. 			var params = {

  155. 				body: post.content,

  156. 				title: post.title,

  157. 				font: font,

  158. 				lang: lang

  159. 			};

  160. 			{{ if .Post.Slug }}

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

  162. 			{{ else if .Post.Id }}

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

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

  165. 				token = "";

  166. 			}

  167. 			params.token = token;

  168. 			{{ else }}

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

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

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

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

  173. 			}

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

  175. 			{{ end }}

  176. 

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

  178. 

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

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

  181. 

  182. 			http.onreadystatechange = function() {

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

  184. 					publishing = false;

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

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

  187. 						id = data.data.id;

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

  189. 

  190. 						{{ if not .Post.Id }}

  191. 							// Post created

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

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

  194. 							}

  195. 							editToken = data.data.token;

  196. 

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

  198. 								// Save the data

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

  200. 

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

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

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

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

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

  206. 										break;

  207. 									}

  208. 								}

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

  210. 

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

  212. 							}

  213. 							{{ end }}

  214. 						{{ end }}

  215. 

  216. 						justPublished = true;

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

  218. 							H.remove(draftDoc);

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

  220. 						} else {

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

  222. 						}

  223. 

  224. 						{{if .EditCollection}}

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

  226. 						{{else}}

  227. 						window.location = nextURL;

  228. 						{{end}}

  229. 					} else {

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

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

  232. 					}

  233. 				}

  234. 			}

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

  236. 		};

  237. 

  238. 		setButtonStates();

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

  240. 			setButtonStates();

  241. 			clearTimeout(typingTimer);

  242. 			typingTimer = setTimeout(doneTyping, doneTypingInterval);

  243. 		}, false);

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

  245. 			clearTimeout(typingTimer);

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

  247. 				$btnPublish.el.click();

  248. 			}

  249. 		});

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

  251. 			e.preventDefault();

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

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

  254. 				publish(content, selectedFont);

  255. 			}

  256. 		});

  257. 

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

  259. 			e.preventDefault();

  260. 			var newTheme = 'light';

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

  262. 				newTheme = 'dark';

  263. 			}

  264. 			toggleTheme();

  265. 		});

  266. 

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

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

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

  270. 				e.preventDefault();

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

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

  273. 

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

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

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

  277. 				newText.shift();

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

  279. 			});

  280. 		}

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

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

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

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

  285. 			location.hash = '';

  286. 		}

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

  288. 		if (pte != null) {

  289. 			pte.click();

  290. 		} else {

  291. 			postTarget = 'anonymous';

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

  293. 		}

  294. 

  295. 		var sansLoaded = false;

  296. 		WebFontConfig = {

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

  298. 		};

  299. 		var loadSans = function() {

  300. 		  if (sansLoaded) return;

  301. 		  sansLoaded = true;

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

  303. 		  try {

  304. 			  (function() {

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

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

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

  308. 				wf.async='true';

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

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

  311. 			  })();

  312. 		  } catch (e) {}

  313. 		};

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

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

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

  317. 				e.preventDefault();

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

  319. 				$writer.el.className = selectedFont;

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

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

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

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

  324. 					loadSans();

  325. 				}

  326. 			});

  327. 		}

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

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

  330. 		if (sfe != null) {

  331. 			sfe.click();

  332. 		}

  333. 

  334. 		var doneTyping = function() {

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

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

  337. 				updateWordCount();

  338. 			}

  339. 		};

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

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

  342. 				H.remove(draftDoc);

  343. 			} else if (!justPublished) {

  344. 				doneTyping();

  345. 			}

  346. 		});

  347. 

  348. 		try {

  349. 		  (function() {

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

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

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

  353. 			wf.async='true';

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

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

  356. 		  })();

  357. 		} catch (e) {

  358. 		  // whatevs

  359. 		}

  360. 

  361. 		var allowedFileTypes = ["image/png", "image/jpeg"];

  362. 

  363.         // using getElementsByTagName instead of querySelector for

  364.         // more backward compatibility (and probably performance)

  365.         var dropbox = document.getElementsByTagName("body")[0];

  366.         dropbox.addEventListener("drop", drop, true);

  367.         dropbox.addEventListener("dragover", function(e){e.preventDefault()}, true)

  368.         // firefox needs this too in order to not show the floating cursor on linux

  369.         // see [blogpost] for why we don't want this

  370.         dropbox.addEventListener("dragenter", function(e){e.preventDefault()}, true)

  371. 

  372.         var textarea = document.getElementsByTagName("textarea")[0];

  373. 

  374.         function drop(e) {

  375.             e.preventDefault();

  376.             var files = e.dataTransfer.files;

  377.             for (var i = 0; i < files.length; i++) {

  378.                 var file = files[i];

  379.                 // from https://stackoverflow.com/a/1818400/400257

  380.                 description = file.name.substr(0, file.name.lastIndexOf('.')) || file.name;

  381.                 file.identifier = description+"_"+Math.random().toString(36).substring(2, 15);

  382.                 file.progress = 0;

  383.                 markdown = " [" + file.identifier + "](00%) ";

  384.                 // if we drop on a textarea, on firefox, we can get the position of the drop

  385.                 // by searching for the 'file://' uri that it appends to the textarea by default

  386.                 insertTextAtCursor(markdown, textarea);

  387.                 handleFile(file);

  388.             }

  389.         }

  390. 

  391.         function insertTextAtCursor(text, textarea){

  392.             if (textarea.nodeName == "TEXTAREA") {

  393.                 // save cursor position so that we can set it back after the operation on value

  394.                 var startingPosition = textarea.selectionStart;

  395.                 var textBeforeCursor = textarea.value.substring(0, textarea.selectionStart);

  396.                 var textAfterCursor = textarea.value.substring(textarea.selectionEnd, textarea.value.length);

  397.                 textarea.value = textBeforeCursor + text + textAfterCursor;

  398.                 // set the cursor to its original position

  399.                 textarea.selectionStart = textarea.selectionEnd = startingPosition + text.length;

  400.             } else throw "Element is not a textarea"

  401.         }

  402. 

  403.         function handleFile(file){

  404.             var ok = false;

  405.             for (var i in allowedFileTypes){

  406.                 if (file.type.match(allowedFileTypes[i])) {ok=true; break;}

  407.             }

  408.             if (!ok) throw "disallowed file type";

  409. 

  410.             // var reader = new FileReader();

  411.             // reader.readAsDataURL(file);

  412.             var xhr = new XMLHttpRequest();

  413.             // progressMgmt(xhr,file,img);

  414.             xhr.open("POST", "http://localhost/minimalist-ajax-upload/upload.php");

  415.             xhr.setRequestHeader("Cache-Control", "no-cache");

  416.             xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

  417.             xhr.setRequestHeader("X-File-Name", file.name);

  418.             xhr.setRequestHeader("X-File-Size", file.size);

  419. 

  420.             xhr.upload.onprogress = function(e) {

  421.                 if (e.lengthComputable) {

  422.                     var startingPosition = textarea.selectionStart;

  423.                     var loaded = Math.ceil((e.loaded / e.total)*100);

  424.                     if (file.progress + 5 < loaded){

  425.                         file.progress = loaded;

  426.                         textarea.value = textarea.value.replace(getMarkdownRegex(file.identifier), "["+ file.identifier +"]("+padLeft(loaded,2)+"%)");

  427.                         textarea.selectionStart = textarea.selectionEnd = startingPosition;

  428.                     }

  429.                 }

  430.             }

  431. 

  432.             var formData = new FormData();

  433.             formData.append('file', file);

  434.             xhr.send(formData);

  435.             xhr.onreadystatechange = function(){

  436.                 if(xhr.readyState == 4){

  437.                     if (xhr.status == 200){

  438.                         processResponse(xhr.responseText, file.identifier);

  439.                     } else {

  440.                         processFailure(file.identifier);

  441.                     }

  442.                 }

  443.             }

  444.         }

  445. 

  446.         function processResponse(responseText, identifier){

  447.             var response = JSON.parse(responseText);

  448.             description = response.name.substr(0, response.name.lastIndexOf('.')) || response.name;

  449.             textarea.value = textarea.value.replace(getMarkdownRegex(identifier), "["+ description +"]("+response.url+")");

  450.         }

  451. 

  452. 		function processFailure(identifier){

  453.             textarea.value = textarea.value.replace(getMarkdownRegex(identifier), "");

  454.         }

  455. 

  456.         function getMarkdownRegex(identifier){

  457.             return new RegExp('\\[' + identifier + '\\]\\(.*?\\)'); 

  458.         }

  459. 

  460.         function padLeft(number, padTo, str){

  461.             return Array(padTo-String(number).length+1).join(str||'0')+number;

  462.         }

  463. 

  464. 		</script>

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

  466. 	</body>

  467. </html>{{end}}