new page and draft

This commit is contained in:
Diego Najar 2019-02-20 23:13:59 +01:00
parent a5180135f6
commit c39922d95d
5 changed files with 94 additions and 40 deletions

View File

@ -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;
}

View File

@ -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");
});

View File

@ -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();
});

View File

@ -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;
});
}

View File

@ -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') );