Вариант редактора статей, схожий с Ghost

2015-09-23 11:00:15 +03:00 · 2015-09-23 11:00:15 +03:00 · 42edd409f6
parent 81623a0034
commit 42edd409f6
7 changed files with 341 additions and 141 deletions
--- a/ground/classes/Helper.php
+++ b/ground/classes/Helper.php
@ -53,7 +53,7 @@ class Helper
 		return $string;
 	}

-	public static function replaceImgs($string, $replaceType = 'clear')
+	public static function replaceImgs($string, $replaceType = 'clear', $size = 'middle')
 	{
 		preg_match_all("(\[img[\|]#(\d+)\])", $string, $images);
 		$images = isset($images[0]) ? $images[0] : FALSE;
@ -70,7 +70,7 @@ class Helper
 					switch ($replaceType) {
 						case 'html':
 							$imgObj->caption = $linkTitle = str_replace('"', 'ʺ', $imgObj->caption);
-							$imgTag = '<div style="text-align: center;"><img src="/photos/articles/middle/' . $imgObj->name . '" title="' . $imgObj->caption . '" class="imageInArticle" /></div>';
+							$imgTag = '<div style="text-align: center;"><img src="/photos/articles/'.$size.'/' . $imgObj->name . '" title="' . $imgObj->caption . '" class="imageInArticle" /></div>';
 							$string = str_replace($img, $imgTag, $string);
 							break;
 						default:
--- a/ground/controllers/ArticlesController.php
+++ b/ground/controllers/ArticlesController.php
@ -36,17 +36,19 @@ class ArticlesController extends Controller

 		$articleId = (int) App::getParam('id');

-		self::$layout = 'layoutPage.php';
+		self::$layout = 'layoutClear.php';
 		self::addScript('/js/jquery-2.1.0.min.js');
 		self::addScript('/js/jquery-ui-1.10.4.custom.min.js');
 		self::addScript('/js/bootstrap.min.js');
 		self::addScript('/js/app.js?ver=' . App::getConfig('version'));
+		self::addScript('/js/articleEdit.js?ver=' . App::getConfig('version'));
 		self::addScript('http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js');
 		self::addStyle('/css/style.css?ver=' . App::getConfig('version'));
 		self::addStyle('/css/pageStyle.css?ver=' . App::getConfig('version'));
 		self::addStyle('/css/bootstrap.min.css');
 		self::addStyle('/css/bootstrap-theme.min.css');
 		self::addStyle('http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css');
+		self::addStyle('/css/articleEdit.css?ver=' . App::getConfig('version'));

 		$article = Article::model()->getByPK($articleId);

@ -120,7 +122,7 @@ class ArticlesController extends Controller
 			}
 		}

-		App::redirect('/articles');
+		App::redirect('/articles/edit/id/'.$article->id);
 	}

 	static function actionMarkdown()
@ -131,7 +133,7 @@ class ArticlesController extends Controller
 			$html = Markdown::processing($html);
 			$html = nl2br($html);
 			$html = Helper::replaceLinks($html, 'html');
-			$html = Helper::replaceImgs($html, 'html');
+			$html = Helper::replaceImgs($html, 'html', 'small');

 			print $html;
 		}
--- a/ground/views/articles/edit.php
+++ b/ground/views/articles/edit.php
@ -1,101 +1,56 @@
-<script>
-	function updatePhotobank() {
-		if (document.getElementById("hiddenframe").contentWindow.document.body.innerText == 'error') {
-			alert('Ошибка при загрузке.');
-			return false;
-		}
-
-		$('#photo').val('');
-		$('#caption').val('');
-		$.getJSON("/json/getmyartphotos", function (data) {
-			$('#photobank').html('');
-			$.each(data, function (key, val) {
-				$("<img/> ", {
-					"class": "my-new-list",
-					src: '/photos/articles/small/' + val.name,
-					title: 'img #' + val.id + ' :: ' + val.caption,
-					photoId: val.id
-				}).appendTo('#photobank');
-			});
-
-			$("#photobank img").on("click", function () {
-				articleText = document.getElementById('articleText');
-				imgText = '\n[img|#' + $(this).attr('photoid') + ']\n';
-				insertAtCursor(articleText, imgText);
-				markdown();
-			});
-		});
-	}
-
-	function insertAtCursor(myField, myValue) {
-		//IE support
-		if (document.selection) {
-			myField.focus();
-			sel = document.selection.createRange();
-			sel.text = myValue;
-		}
-		//MOZILLA and others
-		else if (myField.selectionStart || myField.selectionStart == '0') {
-			var startPos = myField.selectionStart;
-			var endPos = myField.selectionEnd;
-			myField.value = myField.value.substring(0, startPos)
-					+ myValue
-					+ myField.value.substring(endPos, myField.value.length);
-		} else {
-			myField.value += myValue;
-		}
-	}
-</script>
-<div id="pageSmoothBackground" style="background-image: url(<?= $randomPoint->getImg('middle') ?>);"></div>
-
-<div class="container" style="background-color: rgba(255,255,255, 0.8);margin-top: -10px;padding-bottom: 30px; width: 100%;">
-	<div class="row">
-		<div class="col-md-12">
-			<h1 style="text-align: right;">Редактирование статьи</h1>
-			<div class="coords-container">
-				Вернуться: <a href="/articles">к списку статей</a> / <a href="/">на карту</a>.
-			</div>
-			<div style="text-align: justify;">
-				<form method="POST" action="/articles/save">
+<form method="POST" action="/articles/save"  style="height: 100%;">
 	<input type="hidden" name="id" value="<?= $article->id ?>" />
+	<input type="hidden" name="allowComments" value="1" />
+<!--	<input type="checkbox" name="allowComments" id="articleComments" <?= $article->allowComments ? 'checked' : '' ?> />Разрешить комментарии-->

-					<div class="form-group">
-						<label for="articleTitle">Название статьи</label>
-						<input type="text" name="title" id="articleTitle" class="form-control" value="<?= $article->title ?>" placeholder="" />
+	<table style="height: 100%; width: 100%">
+		<tr  style="height: 1%;">
+			<td colspan="2">
+				<div class="form-group" style="margin-bottom: -1px;">
+					<div class="col-md-12 nopaddingx">
+						<input type="text" name="title" id="articleTitle" class="form-control" value="<?= $article->title ?>" placeholder="Заголовок..." />
+					</div>
 				</div>
-
-					<div class="form-group">
-						<table class="col-md-12" >
-							<tr>
-								<td style="width: 50%;">
-									<label for="articleText">Текст статьи</label>
-									<textarea name="text" id="articleText" class="form-control"  onscroll="monitor.scrollTop=scrollTop" style="height: 250px; resize: none;" ><?= $article->text ?></textarea>
-								</td>
-								<td style="width: 50%; padding-left: 3px;">
-									<label for="monitor">Предпросмотр</label>
-									<div id="monitor" style="height: 250px; width: 100%; background-color: white; overflow-y: scroll; padding: 5px 10px; border: solid 1px #ccc; border-radius: 4px;"></div>
 			</td>
 		</tr>
+		<tr  style="height: 1%;">
+			<td colspan="2" style="padding: 5px 10px 0 10px;">
+				<div class="btn-group pull-right" role="group">
+					<?php if ($article->id): ?>
+						<a href="/article/<?= $article->id ?>" target="_blank" class="btn btn-sm btn-default" title="Просмотр последней сохраненой версии"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> предпросмотр</a>
+					<?php endif; ?>
+					<a href="/articles/" class="btn btn-sm btn-danger" title="Выйти без сохранения"><span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"></span> не сохранять</a>
+				</div>
+				<div class="btn-group" role="group" aria-label="...">
+					<button type="submit" id="submitButton" class="btn btn-sm btn-success" title="Сохранить"><span class="glyphicon glyphicon-floppy-saved" aria-hidden="true"></span> сохранить</button>
+				</div>
+				<div class="btn-group" role="group" aria-label="...">
+					<button type="button" class="btn btn-default btn-sm" title="Жирый" onclick="markBold()"><span class="glyphicon glyphicon-bold" aria-hidden="true"></span></button>
+					<button type="button" class="btn btn-default btn-sm" title="Курсив" onclick="markItalic()"><span class="glyphicon glyphicon-italic" aria-hidden="true"></span></button>
+					<button type="button" class="btn btn-default btn-sm" title="Фото или картинка" onclick="togglePhotobank()"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></button>
+					<button type="button" class="btn btn-default btn-sm" title="Ссылка на точку" onclick="insertPoint()"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
+					<button type="button" class="btn btn-default btn-sm" title="Подсказка по разметке" onclick="$('#articleInfoModal').modal('show');"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> разметка</button>
+				</div>
+			</td>
+		</tr>
+		<tr>
+			<td style="width: 50%;">
+				<textarea name="text" id="articleText" class="form-control"  onscroll="monitor.scrollTop=scrollTop" style="height: 100%; min-height: 100px; padding-top: 4px; resize: none;" ><?= $article->text ?></textarea>
+			</td>
+			<td style="width: 50%;"><div id="monitor" style=""></div></td>
+		</tr>
 	</table>
-
-						<i>*текст*</i> <b>**текст**</b> <b><i>***текст***</i></b> <a href="#">http://ссылка.ру</a> # заголвок1 ## заголовк2 ### заголовк3 [#512|ссылка на точку 512]
-					</div>
-
-					<div class="checkbox">
-						<label>
-							<input type="checkbox" name="allowComments" id="articleComments" <?= $article->allowComments ? 'checked' : '' ?> />Разрешить комментарии
-						</label>
-					</div>
-
-					<button type="submit" class="btn btn-default">Сохранить</button>
 </form>
-			</div>
-		</div>
-		<div class="col-md-12" style="margin: 20px 0; border-top: solid 1px #bbb; border-bottom: solid 1px #bbb;">
+
+<div id="photobankContainer">
+<div style="margin: 5px 10px;">
 	<form enctype="multipart/form-data" id="articlePhotoloader" action="/images/loadPhoto" method="POST" name="loadavatar" target="hiddenframe"  class="form-inline">
 		<input type="hidden" name="MAX_FILE_SIZE" value="5242880" />
 		<div class="form-group">
-					<label for="photo">Загрузить новое изображение (MAX 5MB) (jpg, png)</label>
+			<label style="color: white;">Загрузить новое изображение (MAX 5MB) (jpg, png)</label>
+		</div>
+		<br/>
+		<div class="form-group">
 			<input id="photo" name="photo" type="file" class="form-control" accept=".jpg,.png,.jpeg" />
 		</div>
 		<div class="form-group">
@ -107,36 +62,6 @@
 	</form>
 </div>
 <div class="col-md-12" id="photobank"></div>
-		<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px" onload="updatePhotobank()"></iframe>
 </div>
-</div>
-<script>
-	var monitorTimeout;
-
-	function markdown()
-	{
-		$.post('/articles/markdown', {text: $('#articleText').val()}, function (data) {
-			$('#monitor').html(data);
-		});
-	}
-
-	$('#articleText').keyup(function () {
-		clearTimeout(monitorTimeout);
-		monitorTimeout = setTimeout(function () {
-			markdown();
-		}, 300);
-	}).keydown(function () {
-		clearTimeout(monitorTimeout)
-	}).scroll(function () {
-		monH = document.getElementById('monitor').scrollHeight - document.getElementById('monitor').clientHeight;
-		areH = document.getElementById('articleText').scrollHeight - document.getElementById('articleText').clientHeight;
-		areS = $('#articleText').scrollTop();
-		monS = Math.round((areS / areH) * monH);
-		$('#monitor').scrollTop(monS);
-	});
-
-	$(document).ready(function(){
-		markdown();
-	});
-
-</script>
+<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px" onload="$(document).ready(function(){updatePhotobank()})"></iframe>
+<?= self::renderPartial('modals/articleInfo.php', array(), true) ?>
--- a/ground/views/layoutClear.php
+++ b/ground/views/layoutClear.php
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      lang="ru"
+      prefix="og: http://ogp.me/ns#"
+      xmlns:fb="http://ogp.me/ns/fb#"
+      xmlns:og="http://ogp.me/ns#">
+	<head>
+		<title><?= App::getConfig('title') ?></title>
+
+		<script src="/js/jquery-2.1.0.min.js" type="text/javascript"></script>
+		<link href="/css/style.css?ver=<?= App::getConfig('version') ?>" media="all" rel="stylesheet" type="text/css" />
+
+<?php if (isset($data['og']) && $data['og']): ?>
+		<meta property="og:title" content="<?= $data['og']['title'] ?>" />
+		<meta property="og:description" content="<?= $data['og']['description'] ?>" />
+		<meta property="og:site_name" content="<?= $data['og']['site_name'] ?>" />
+		<meta property="og:type" content="<?= $data['og']['type'] ?>" />
+		<meta property="og:url" content="<?= $data['og']['url'] ?>" />
+		<meta property="og:image" content="<?= $data['og']['image'] ?>" />
+<?php endif; ?>
+
+<?php if ($vars): ?>
+		<script type="text/javascript">
+<?php foreach ($vars as $varName => $var): ?>
+			var <?= $varName ?> = '<?= $var ?>';
+<?php endforeach; ?>
+		</script>
+<?php endif; ?>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400&subset=Cyrillic">
+
+		<link rel="apple-touch-icon" href="/img/touch-icon-iphone.png" />
+		<link rel="apple-touch-icon" sizes="76x76" href="/img/touch-icon-ipad.png" />
+		<link rel="apple-touch-icon" sizes="120x120" href="/img/touch-icon-iphone-retina.png" />
+		<link rel="apple-touch-icon" sizes="152x152" href="/img/touch-icon-ipad-retina.png" />
+	</head>
+	<body>
+		<!--div class="header">
+			<a href="/"><img src="/img/logo.png" title="WIKIPOINTS.RU" /></a>
+		</div-->
+
+		<?= isset($content) && !empty($content) ? $content : 'No content =(' ?>
+		<?= self::renderPartial('metrika.php', array(), true) ?>
+		<?= self::renderPartial('ganalytics.php', array(), true) ?>
+
+	</body>
+
+<?php if ($scripts): ?>
+<?php foreach ($scripts as $script): ?>
+	<script src="<?= $script ?>" type="text/javascript"></script>
+<?php endforeach; ?>
+<?php endif; ?>
+
+<?php if ($styles): ?>
+<?php foreach ($styles as $style): ?>
+	<link href="<?= $style ?>" media="all" rel="stylesheet" type="text/css" />
+<?php endforeach; ?>
+<?php endif; ?>
+</html>
--- a/ground/views/modals/articleInfo.php
+++ b/ground/views/modals/articleInfo.php
@ -0,0 +1,77 @@
+<div class="modal fade" id="articleInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<h4 class="modal-title">Подсказка по синтаксису</h4>
+			</div>
+			<div class="modal-body">
+				<table class="table table-bordered">
+					<thead>
+						<tr>
+							<th>Пишем</th>
+							<th>Получаем</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td># Заголовок</td>
+							<td><h2>Заголовок</h2></td>
+						</tr>
+						<tr>
+							<td>## Заголовок 2</td>
+							<td><h3>Заголовок 2</h3></td>
+						</tr>
+						<tr>
+							<td>### Заголовок 3</td>
+							<td><h4>Заголовок 3</h4></td>
+						</tr>
+						<tr>
+							<td>*курсив*</td>
+							<td><i>курсив</i></td>
+						</tr>
+						<tr>
+							<td>**жирный**</td>
+							<td><b>жирный</b></td>
+						</tr>
+						<tr>
+							<td>--</td>
+							<td>—</td>
+						</tr>
+						<tr>
+							<td>[#19]</td>
+							<td><a href="/point/19" title="Старая Ладога"><span class="glyphicon glyphicon-link"></span></a> (это ссылка на точку №19)</td>
+						</tr>
+						<tr>
+							<td>[#19|текст ссылки]</td>
+							<td><a href="/point/19" title="Старая Ладога">текст ссылки</a> (это ссылка на точку №19)</td>
+						</tr>
+						<tr>
+							<td>[img|#19]</td>
+							<td><img src="/photos/articles/small/1_0497d.jpg" title="" class="imageInArticle"><br/>(это картинка №19)</td>
+						</tr>
+						<tr>
+							<td>http://wikipoints.ru</td>
+							<td><a href="http://wikipoints.ru" target="_blank">http://wikipoints.ru</a></td>
+						</tr>
+<!--						<tr>
+							<td></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td></td>
+							<td></td>
+						</tr>-->
+					</tbody>
+				</table>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
+			</div>
+		</div>
+	</div>
+</div>
--- a/public/css/articleEdit.css
+++ b/public/css/articleEdit.css
@ -0,0 +1,21 @@
+/*body {overflow-y: scroll;}*/
+#inputHeader {width: 100%;}
+#inputHeader div.form-group {width: 100%;}
+input#articleTitle {font-size: 30px;font-weight: 600;height: 45px; border-radius: 0;}
+#submitButton {}
+
+.nopaddingx {padding-left: 0;padding-right: 0;}
+.nopaddingy {padding-bottom: 0;padding-top: 0;}
+
+#articleText {border-radius:0;}
+#articleText {
+     width: 100%;
+     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+     box-sizing: border-box;         /* Opera/IE 8+ */
+}
+/*#monitor {background-color: white; overflow-y: scroll; padding: 5px 10px; border: solid 1px #ccc; border-radius: 0px;}*/
+#monitor {height: 100%; width: 100%; background-color: white; overflow-y: scroll; padding: 5px 10px; border: solid 1px #ccc; border-radius: 0px;}
+
+#photobankContainer {position: absolute; top: 0; right: 0px; width: 675px; background-color: rgba(55,55,55, 0.8); overflow-y: scroll; height: 100%;}
+#photobankContainer {display: none;}
--- a/public/js/articleEdit.js
+++ b/public/js/articleEdit.js
@ -0,0 +1,115 @@
+/*
+ *
+ */
+
+var monitorTimeout;
+
+function updatePhotobank() {
+	if (document.getElementById("hiddenframe").contentWindow.document.body.innerText == 'error') {
+		alert('Ошибка при загрузке.');
+		return false;
+	}
+
+	$('#photo').val('');
+	$('#caption').val('');
+	$.getJSON("/json/getmyartphotos", function (data) {
+		$('#photobank').html('');
+		$.each(data, function (key, val) {
+			$("<img/> ", {
+				"class": "my-new-list",
+				src: '/photos/articles/small/' + val.name,
+				title: 'img #' + val.id + ' :: ' + val.caption,
+				photoId: val.id
+			}).appendTo('#photobank');
+		});
+
+		$("#photobank img").on("click", function () {
+			imgText = '\n[img|#' + $(this).attr('photoid') + ']\n';
+			insertAtCursor('articleText', imgText);
+			markdown();
+			togglePhotobank();
+		});
+	});
+}
+
+function markBold()
+{
+	wrapText('articleText', '**', '**');
+	markdown();
+}
+
+function markItalic()
+{
+	wrapText('articleText', '*', '*');
+	markdown();
+}
+
+function insertPoint()
+{
+	insertAtCursor('articleText', '[#' + prompt('Укажите номер точки', '') + '|ссылка на точку]');
+	markdown();
+}
+
+function insertAtCursor(myFieldId, myValue) {
+	myField = document.getElementById(myFieldId);
+
+	//IE support
+	if (document.selection) {
+		myField.focus();
+		sel = document.selection.createRange();
+		sel.text = myValue;
+	}
+	//MOZILLA and others
+	else if (myField.selectionStart || myField.selectionStart == '0') {
+		var startPos = myField.selectionStart;
+		var endPos = myField.selectionEnd;
+		myField.value = myField.value.substring(0, startPos)
+				+ myValue
+				+ myField.value.substring(endPos, myField.value.length);
+	} else {
+		myField.value += myValue;
+	}
+}
+
+function wrapText(elementID, openTag, closeTag) {
+	var textArea = $('#' + elementID);
+	var len = textArea.val().length;
+	var start = textArea[0].selectionStart;
+	var end = textArea[0].selectionEnd;
+	var selectedText = textArea.val().substring(start, end);
+	var replacement = openTag + selectedText + closeTag;
+	textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
+}
+
+function markdown()
+{
+	$.post('/articles/markdown', {text: $('#articleText').val()}, function (data) {
+		$('#monitor').html(data);
+	});
+}
+
+$('#articleText').keyup(function () {
+	clearTimeout(monitorTimeout);
+	monitorTimeout = setTimeout(function () {
+		$('#submitButton').addClass('btn-info');
+		markdown();
+	}, 200);
+}).keydown(function () {
+	clearTimeout(monitorTimeout)
+}).scroll(function () {
+	monH = document.getElementById('monitor').scrollHeight - document.getElementById('monitor').clientHeight;
+	areH = document.getElementById('articleText').scrollHeight - document.getElementById('articleText').clientHeight;
+	areS = $('#articleText').scrollTop();
+	monS = Math.round((areS / areH) * monH);
+	$('#monitor').scrollTop(monS);
+});
+
+$(document).ready(function () {
+	markdown();
+	$('#articleText').focus();
+});
+
+function togglePhotobank()
+{
+	$('#photobankContainer').slideToggle(200);
+}