new page and draft

bl-kernel/admin/themes/grizzly/css/bludit.css

@@ -22,6 +22,14 @@ body.login {
 	font-size: 14px;
 	border-bottom: 1px solid #f0f0f0;
 	text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
+}
+
+#toolbar .selected {
+	color: rgba(36, 122, 43, 0.77);
+}
+
+#draft-button,
+#delete-button {
 	cursor: pointer;
 }
 
@@ -35,13 +43,13 @@ div.editor-container {
 	background: #fdfdfd;
 }
 
-/* TAGS */
-div.tags-list {
+/* SIDEBAR */
+div.sidebar {
 	background: #333;
 	font-size: 0.9em;
 }
 
-#currentTags li.list-group-item {
+div.sidebar li.list-group-item {
 	background: none;
 	color: #ccc;
 	border: none;
@@ -49,11 +57,11 @@ div.tags-list {
 	padding: 5px 15px;
 }
 
-#currentTags li.list-group-item:hover {
+div.sidebar li.list-group-item:hover {
 	color: #fff;
 }
 
-#currentTags li.tagSelected {
+div.sidebar li.tagSelected {
 	background: #334E6A;
 	color: #fff;
 }

bl-kernel/admin/themes/grizzly/html/main.php

@@ -1,12 +1,13 @@
 <div id="toolbar" class="d-flex p-1">
+	<i class="align-self-center fa fa-terminal pr-1"></i>
 	<div id="message" class="mr-auto"></div>
-  <div class="pr-2">Draft</div>
-  <div>Delete</div>
+	<div id="draft-button" class="pr-2 selected">Draft</div>
+	<div id="delete-button" class="pr-2">Delete</div>
 </div>
 <script>
 var _options = {
 	'alertTimeout': 5, // Second in dissapear the alert
-	'autosaveTimeout': 5 // Second to activate before call the autosave
+	'autosaveTimeout': 3 // Second to activate before call the autosave
 };
 
 function showAlert(text) {
@@ -24,7 +25,7 @@ var _key = null; // Current page key in the editor
 var _tags = []; // Current tags from the content
 var _content = ""; // Current content, this variable helps to know when the content was changed
 var _autosaveTimer = null; // Timer object for the autosave
-
+var _draft = true;
 
 function editorInitialize(content) {
 	_editor = new EasyMDE({
@@ -42,11 +43,6 @@ function editorInitialize(content) {
 
 	// Editor event change
 	_editor.codemirror.on("change", function(){
-		// If the content doesn't changed is not need to autosave
-		if (_content == editorGetContent()) {
-			return true;
-		}
-
 		// Reset timer
 		if (_autosaveTimer != null) {
 			clearTimeout(_autosaveTimer);
@@ -54,22 +50,8 @@ function editorInitialize(content) {
 
 		// Activate timer
 		_autosaveTimer = setTimeout(function() {
-			log('Autosave running', '');
-			_content = editorGetContent();
-			var tags = parser.tags(_content);
-			var title = parser.title(_content);
-			var newContent = parser.removeFirstLine(_content);
-
-			// Update the page because was a change in the content
-			ajax.updatePage(_key, title, newContent, tags);
-
-			// Check if there are new tags in the editor
-			// If there are new tags get the new tags for the sidebar
-			if (JSON.stringify(_tags) != JSON.stringify(tags)) {
-				_tags = tags;
-				displayTags();
-			}
-		}, _options['autosaveTimeout']*1000);
+			updatePage("Saved");
+		}, _options["autosaveTimeout"]*1000);
 	});
 }
 
@@ -77,7 +59,30 @@ function editorGetContent() {
 	return _editor.value();
 }
 
+function updatePage(alertMessage) {
+	log('Updating page...', '');
+	_content = editorGetContent();
+	var tags = parser.tags(_content);
+	var title = parser.title(_content);
+	var newContent = parser.removeFirstLine(_content);
+
+	// Update the page because was a change in the content
+	ajax.updatePage(_key, title, newContent, tags, _draft).then(function(key) {
+		_key = key;
+		showAlert(alertMessage);
+	});
+
+	// Check if there are new tags in the editor
+	// If there are new tags get the new tags for the sidebar
+	if (JSON.stringify(_tags) != JSON.stringify(tags)) {
+		_tags = tags;
+		displayTags();
+	}
+}
+
 function createPage() {
+	// New pages is draft by default
+	setDraft(true);
 	let response = ajax.createPage();
 	response.then(function(key) {
 		// Log
@@ -87,8 +92,32 @@ function createPage() {
 	});
 }
 
+function setDraft(value) {
+	let message = "";
+	if (value) {
+		_draft = true;
+		$("#draft-button").addClass("selected");
+		message = "Page saved as draft";
+	} else {
+		_draft = false;
+		$("#draft-button").removeClass("selected");
+		message = "Page published";
+	}
+
+	updatePage(message);
+}
+
 // MAIN
 $(document).ready(function() {
+	// Click on draft button
+	$(document).on("click", "#draft-button", function() {
+		if (_draft) {
+			setDraft(false);
+		} else {
+			setDraft(true);
+		}
+	});
+
 	showAlert("Welcome to Bludit");
 });
 

bl-kernel/admin/themes/grizzly/html/tags.php

@@ -1,5 +1,8 @@
-<div class="tags-list col-lg-2 p-0 pt-4">
-	<ul id="currentTags" class="list-group list-group-flush">
+<div class="sidebar col-lg-2 p-0 pt-4">
+	<ul id="menu" class="list-group list-group-flush">
+		<li id="newPage" class="list-group-item" data-action="untagged"><i class="fa fa-edit"></i> New page</li>
+	</ul>
+	<ul id="currentTags" class="list-group list-group-flush pt-4">
 	</ul>
 </div>
 <script>
@@ -53,6 +56,11 @@ $(document).ready(function() {
 		}
 	});
 
+	// Click on new page
+	$(document).on("click", "#newPage", function() {
+		createPage();
+	});
+
 	// Retrive and show the tags
 	displayTags();
 });

bl-kernel/admin/themes/grizzly/js/ajax.js

@@ -22,14 +22,15 @@ class Ajax {
 	}
 
 	async createPage() {
-		var url = this.apiURL+"pages";
+		let url = this.apiURL+"pages";
 		try {
 			const response = await fetch(url, {
 				credentials: 'same-origin',
 				method: "POST",
 				body: JSON.stringify({
 					token: this.token,
-					authentication: this.authentication
+					authentication: this.authentication,
+					type: "draft"
 				}),
 				headers: new Headers({
 					'Content-Type': 'application/json'
@@ -44,9 +45,16 @@ class Ajax {
 		}
 	}
 
-	updatePage(key, title, content, tags) {
+	updatePage(key, title, content, tags, draft) {
 		log('this.updatePage()', key);
-		var url = this.apiURL+"pages/"+key;
+
+		// Type
+		let type = "published";
+		if (draft) {
+			type = "draft";
+		}
+
+		let url = this.apiURL+"pages/"+key
 		return fetch(url, {
 			credentials: 'same-origin',
 			method: "PUT",
@@ -55,7 +63,8 @@ class Ajax {
 				authentication: this.authentication,
 				title: title,
 				content: content,
-				tags: tags
+				tags: tags,
+				type: type
 			}),
 			headers: new Headers({
 				'Content-Type': 'application/json'
@@ -69,7 +78,7 @@ class Ajax {
 		})
 		.catch(err => {
 			console.log(err);
-			return false;
+			return true;
 		});
 	}
 

bl-kernel/functions.php

@@ -304,7 +304,7 @@ function createPage($args) {
 		// Add to syslog
 		$syslog->add(array(
 			'dictionaryKey'=>'new-content-created',
-			'notes'=>$args['title']
+			'notes'=>(empty($args['title'])?$key:$args['title'])
 		));
 
 		Alert::set( $L->g('new-content-created') );