completed add new post and delete post functionality, removed data requessts from RTE

This commit is contained in:
Ro 2018-11-08 20:45:37 -05:00
parent 7b6d849b10
commit 4d222719c8
15 changed files with 521 additions and 257 deletions

View file

@ -95,11 +95,12 @@ router.get('/entries/:page?', function (req, res) {
//--------------------------
// BLOG POST ADD DISPLAY
//--------------------------
router.get('/entries/add/', function (req, res) {
router.get('/entries/add/new', function (req, res) {
if (req.session.user) {
res.render('dash/entry-edit', {
title: 'Add Entry',
title: 'Add New Entry',
mode: 'admin',
date: DateUtils.getDate('year', new Date())+"-"+DateUtils.getDate('month', new Date())+"-"+DateUtils.getDate('day', new Date()),
edit: false
});
} else {

View file

@ -2100,7 +2100,7 @@ textarea {
button,
input[type=submit] {
background: #fc6399;
color: #fb1e6c;
color: #f2f1ef;
font: 1em 'Apercu-Mono';
border-radius: 3px;
position: relative;
@ -2151,18 +2151,26 @@ select {
vertical-align: top;
padding: 3px;
}
#entries-index #entries-index-wrapper a svg {
#entries-index #entries-index-wrapper a.add-new-post {
background: #fc6399;
border-radius: 3px;
padding: 3px;
color: #f2f1ef;
width: 110px;
margin-bottom: 10px;
}
#entries-index #entries-index-wrapper a.add-new-post svg {
display: inline-block;
vertical-align: top;
}
#entries-index #entries-index-wrapper a label {
#entries-index #entries-index-wrapper a.add-new-post label {
padding: 5px;
}
#entries-index #entries-index-wrapper a span {
#entries-index #entries-index-wrapper a.add-new-post span {
font-size: 0.8em;
color: #62809b;
}
#entries-index #entries-index-wrapper a:hover {
#entries-index #entries-index-wrapper a.add-new-post:hover {
background: #344453;
}
#entries-index #entries-index-wrapper #entries-list {
@ -2197,9 +2205,10 @@ select {
background: #354554;
font-family: 'Apercu';
width: 100%;
height: 150px;
height: 140px;
font-size: 1.5em;
color: #f2f1ef;
padding: 5px;
}
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #entry-date {
background: #32414e;
@ -2207,7 +2216,7 @@ select {
width: 105px;
font-family: 'Apercu';
color: #fc6399;
height: 35px;
height: 30px;
vertical-align: top;
text-align: center;
}
@ -2216,15 +2225,16 @@ select {
border-radius: 3px 0 0 3px;
display: inline-block;
padding: 5px;
color: #4c6479;
line-height: 35px;
color: #b2cce5;
line-height: 30px;
}
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags {
background: #354554;
font-family: 'Apercu';
width: 100%;
height: 150px;
color: #1c242c;
height: 140px;
color: #b2cce5;
padding: 5px;
}
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click,
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
@ -2590,24 +2600,28 @@ select {
**/
#edit-control {
top: 1px;
padding: 2px;
border-radius: 3px;
background: rgba(50,65,78,0.5);
width: 100%;
z-index: 2000;
}
#edit-control button {
margin: 3px;
#edit-control button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
#edit-control #post-sumbit-btn {
#edit-control button {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
height: 30px;
width: 30px;
margin: 0;
border-radius: 0;
}
#edit-control button:hover {
background: #75a4d0;
}
#edit-control #option-update {
height: 35px;
width: 35px;
padding: 5px 5px 1px 5px;
border-radius: 20px;
display: inline-block;
vertical-align: top;
text-align: center;
@ -2639,28 +2653,29 @@ select {
fill: #f2f1ef;
}
#edit-control .content-editor-btn-icon {
height: 30px;
width: 30px;
height: 35px;
width: 40px;
background: #b2cce5;
padding: 5px 5px 1px 5px;
border-radius: 20px;
color: #374857;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0;
}
#edit-control .content-editor-btn-icon svg {
fill: #374857;
}
#edit-control .content-editor-btn-text {
width: 30px;
width: 40px;
height: 35px;
background: #b2cce5;
padding: 5px;
border-radius: 20px;
color: #374857;
vertical-align: top;
display: inline-block;
text-align: center;
margin: 0;
}
#edit-control #option-bold {
font-weight: bold;

File diff suppressed because one or more lines are too long

View file

@ -670,7 +670,7 @@ function () {
var postEventType;
if (edit) {
var postID = document.getElementById('post-sumbit-btn').getAttribute('data-id');
var postID = document.getElementById('option-update').getAttribute('data-id');
postURL = "/api/blog/update/" + postID;
postEventType = DataEvent.POST_UPDATED;
} else {
@ -689,6 +689,24 @@ function () {
});
});
}
}, {
key: "deletePost",
value: function deletePost() {
var self = this;
var postID = document.getElementById('option-update').getAttribute('data-id');
return new Promise(function (resolve, reject) {
self.dataUtils.request("/api/blog/delete/" + postID, DataEvent.POST_DELETED, _DataUtils.REQUEST_TYPE_POST, _DataUtils.CONTENT_TYPE_FORM).then(function (response) {
resolve({
response: response
});
}).catch(function (err) {
reject({
err: err
});
});
});
this.dataUtils.re;
}
}, {
key: "validateForm",
value: function validateForm() {
@ -710,7 +728,33 @@ function () {
}();
exports.default = EntryTasks;
},{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/utilities/StringUtils":"tools/utilities/StringUtils.jsx"}],"tools/utilities/DateUtils.jsx":[function(require,module,exports) {
},{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/utilities/StringUtils":"tools/utilities/StringUtils.jsx"}],"tools/events/EditorEvent.jsx":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.EDITOR_UPDATE = exports.EDITOR_SAVE = exports.EDITOR_UPLOAD_POST_IMAGE = exports.EDITOR_DELETE = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var EDITOR_DELETE = 'editorDelete';
exports.EDITOR_DELETE = EDITOR_DELETE;
var EDITOR_UPLOAD_POST_IMAGE = 'editorUploadImage';
exports.EDITOR_UPLOAD_POST_IMAGE = EDITOR_UPLOAD_POST_IMAGE;
var EDITOR_SAVE = 'editorSave';
exports.EDITOR_SAVE = EDITOR_SAVE;
var EDITOR_UPDATE = 'editorUpdate';
exports.EDITOR_UPDATE = EDITOR_UPDATE;
var EditorEvent = function EditorEvent() {
_classCallCheck(this, EditorEvent);
};
var _default = new EditorEvent();
exports.default = _default;
},{}],"tools/utilities/DateUtils.jsx":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -1293,43 +1337,66 @@ Object.defineProperty(exports, "__esModule", {
});
exports.default = void 0;
var _DataUtils = _interopRequireWildcard(require("./DataUtils"));
var DataEvent = _interopRequireWildcard(require("../events/DataEvent"));
var _DateUtils = _interopRequireDefault(require("./DateUtils"));
var _caretPos = require("caret-pos");
var _Animate = _interopRequireDefault(require("../effects/Animate"));
var _EventEmitter2 = _interopRequireDefault(require("../events/EventEmitter"));
var EditorEvent = _interopRequireWildcard(require("../events/EditorEvent"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var TextEditor =
/*#__PURE__*/
function () {
function (_EventEmitter) {
_inherits(TextEditor, _EventEmitter);
//--------------------------
// constructor
//--------------------------
function TextEditor() {
function TextEditor(textEditor, scrollLimit) {
var _this;
_classCallCheck(this, TextEditor);
this.setInputs();
hljs.initHighlightingOnLoad();
this.dataUtils = new _DataUtils.default();
this.dateUtils = new _DateUtils.default();
this.url = '';
var self = this;
_this = _possibleConstructorReturn(this, _getPrototypeOf(TextEditor).call(this));
hljs.initHighlightingOnLoad(); //this.dataUtils = new DataUtils();
_this.dateUtils = new _DateUtils.default();
_this.textEditor = textEditor;
_this.fixLimit = scrollLimit;
_this.caretPos = null;
_this.url = '';
var self = _assertThisInitialized(_assertThisInitialized(_this));
_this.setInputs();
window.addEventListener("scroll", function (f) {
var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight;
var fixLimit = _this.fixLimit;
if (window.pageYOffset >= fixLimit) {
document.getElementById('edit-control').style.position = "fixed";
@ -1337,7 +1404,10 @@ function () {
document.getElementById('edit-control').style.position = "relative";
}
});
this.refresh();
_this.refresh();
return _this;
} //--------------------------
// methods
//--------------------------
@ -1346,53 +1416,67 @@ function () {
_createClass(TextEditor, [{
key: "setInputs",
value: function setInputs() {
var _this = this;
var _this2 = this;
var self = this;
var editorButtons = document.querySelectorAll('.editor-button');
for (var i = 0, length = editorButtons.length; i < length; i++) {
editorButtons[i].addEventListener('click', function (e) {
return _this.handleEditorOption(e);
return _this2.handleEditorOption(e);
}, false);
}
document.getElementById('edit-text-code').addEventListener('input', function (f) {
this.textEditor.addEventListener('input', function (f) {
self.refresh();
});
document.getElementById('post-image').addEventListener('change', function (e) {
return _this.handlePostImageAdd(e);
}, false);
document.getElementById('option-image').addEventListener('click', function (e) {
document.getElementById('post-image').click();
});
}
}, {
key: "refresh",
value: function refresh() {
var caret = (0, _caretPos.position)(document.getElementById('edit-text-code')).pos;
var spiffed = hljs.highlight('markdown', document.getElementById('edit-text-code').innerText).value;
var caret = (0, _caretPos.position)(this.textEditor).pos;
var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
var temp = document.createElement("div");
temp.innerText = spiffed;
document.getElementById('edit-text-code').innerHTML = temp.innerText;
(0, _caretPos.position)(document.getElementById('edit-text-code'), caret);
this.textEditor.innerHTML = temp.innerText;
(0, _caretPos.position)(this.textEditor, caret);
}
}, {
key: "notify",
value: function notify(type) {
value: function notify(type, data) {
switch (type) {
case DataEvent.POST_UPDATED:
document.getElementById('submit-save').classList.add('icon-hide');
document.getElementById('submit-update').classList.add('icon-hide');
document.getElementById('submit-good').classList.remove('icon-hide');
document.getElementById('post-sumbit-btn').classList.remove('submit-start');
document.getElementById('post-sumbit-btn').classList.add('submit-cool');
document.getElementById('option-update').classList.remove('submit-start');
document.getElementById('option-update').classList.add('submit-cool');
setTimeout(function (f) {
document.getElementById('submit-save').classList.remove('icon-hide');
document.getElementById('submit-update').classList.remove('icon-hide');
document.getElementById('submit-good').classList.add('icon-hide');
document.getElementById('post-sumbit-btn').classList.add('submit-start');
document.getElementById('post-sumbit-btn').classList.remove('submit-cool');
document.getElementById('option-update').classList.add('submit-start');
document.getElementById('option-update').classList.remove('submit-cool');
}, 2000);
break;
case DataEvent.POST_ADDED:
window.location = "/@/dashboard/entries/edit/" + data;
break;
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
(0, _caretPos.position)(this.textEditor, this.caretPos);
var sel, range, pulled;
sel = window.getSelection(); //console.log(sel)
//console.log(note.message)
if (sel.rangeCount) {
range = sel.getRangeAt(0);
pulled = sel.getRangeAt(0).toString();
range.deleteContents();
range.insertNode(document.createTextNode("![image alt text](" + data + " 'image title')"));
}
this.refresh();
break;
}
} //--------------------------
// event handlers
@ -1436,12 +1520,27 @@ function () {
range.insertNode(document.createTextNode("### " + pulled));
break;
case "option-image":
this.caretPos = (0, _caretPos.position)(this.textEditor).pos;
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
break;
case "submit-save":
case "option-save":
this.emitEvent(EditorEvent.EDITOR_SAVE);
break;
case "submit-update":
case "option-update":
this.emitEvent(EditorEvent.EDITOR_UPDATE);
break;
case "option-link":
range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)"));
break;
case "option-date":
console.log("DATE UPDATE");
case "option-delete":
this.emitEvent(EditorEvent.EDITOR_DELETE);
break;
default:
@ -1452,53 +1551,14 @@ function () {
this.refresh();
}
}, {
key: "handlePostImageAdd",
value: function handlePostImageAdd(e) {
e.stopPropagation();
e.preventDefault();
var self = this;
var postData = new FormData();
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i]; // Check the file type.
if (!file.type.match('image.*')) {
continue;
}
postData.append('post_image', file, file.name);
}
var caret = (0, _caretPos.position)(document.getElementById('edit-text-code')).pos;
self.dataUtils.request("/api/blog/add-post-image", DataEvent.POST_IMAGE_ADDED, _DataUtils.REQUEST_TYPE_POST, _DataUtils.CONTENT_TYPE_FORM, postData).then(function (response) {
//console.log("01 "+response.request['response']);
(0, _caretPos.position)(document.getElementById('edit-text-code'), caret);
var sel, range, pulled;
sel = window.getSelection(); //console.log(sel)
//console.log(note.message)
if (sel.rangeCount) {
range = sel.getRangeAt(0);
pulled = sel.getRangeAt(0).toString();
range.deleteContents();
range.insertNode(document.createTextNode("![image alt text](" + JSON.parse(response.request['response']).url + " 'image title')"));
}
self.refresh();
}).catch(function (err) {
console.log(err);
});
}
}]);
return TextEditor;
}();
}(_EventEmitter2.default);
var _default = TextEditor;
exports.default = _default;
},{"./DataUtils":"tools/utilities/DataUtils.jsx","../events/DataEvent":"tools/events/DataEvent.jsx","./DateUtils":"tools/utilities/DateUtils.jsx","caret-pos":"../../../../node_modules/caret-pos/lib/esm2015/main.js","../effects/Animate":"tools/effects/Animate.jsx"}],"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js":[function(require,module,exports) {
},{"../events/DataEvent":"tools/events/DataEvent.jsx","./DateUtils":"tools/utilities/DateUtils.jsx","caret-pos":"../../../../node_modules/caret-pos/lib/esm2015/main.js","../events/EventEmitter":"tools/events/EventEmitter.jsx","../events/EditorEvent":"tools/events/EditorEvent.jsx"}],"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js":[function(require,module,exports) {
var define;
var global = arguments[3];
(function (global, factory) {
@ -2719,6 +2779,8 @@ var Ease = _interopRequireWildcard(require("../tools/effects/Animate"));
var _EntryTasks = _interopRequireDefault(require("../tasks/EntryTasks"));
var EditorEvent = _interopRequireWildcard(require("../tools/events/EditorEvent"));
var _TextEditor = _interopRequireDefault(require("../tools/utilities/TextEditor"));
var _tinyDatePicker = _interopRequireDefault(require("tiny-date-picker"));
@ -2742,14 +2804,33 @@ function () {
// constructor
//--------------------------
function Entry() {
var _this = this;
_classCallCheck(this, Entry);
reframe('iframe');
var self = this;
this.uploadFiles;
this.start();
this.editor = new _TextEditor.default();
this.dataUtils = new _DataUtils.default();
this.dateUtils = new _DateUtils.default();
if (document.getElementById('edit-text-code')) {
this.editor = new _TextEditor.default(document.getElementById('edit-text-code'), document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight);
this.editor.addListener(EditorEvent.EDITOR_DELETE, function (f) {
return _this.handleEditorOptions(EditorEvent.EDITOR_DELETE);
}, false);
this.editor.addListener(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, function (f) {
return _this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
}, false);
this.editor.addListener(EditorEvent.EDITOR_UPDATE, function (f) {
return _this.handleEditorOptions(EditorEvent.EDITOR_UPDATE);
}, false);
this.editor.addListener(EditorEvent.EDITOR_SAVE, function (f) {
return _this.handleEditorOptions(EditorEvent.EDITOR_SAVE);
}, false);
document.getElementById('post-image').addEventListener('change', function (e) {
return _this.handlePostImageAdd(e);
}, false);
(0, _tinyDatePicker.default)(document.getElementById('entry-date'), {
mode: 'dp-below',
format: function format(date) {
@ -2757,6 +2838,9 @@ function () {
return self.dateUtils.getDate('origin', date);
}
});
}
this.start();
} //--------------------------
// methods
//--------------------------
@ -2797,23 +2881,48 @@ function () {
document.getElementById('featured-click').click();
});
}
document.getElementById("post-sumbit-btn").addEventListener('click', function (f) {
f.preventDefault();
var edit = false;
if (f.target.getAttribute('data-action') == 'blog-update') edit = true;
new _EntryTasks.default().submitPost(edit, Entry.uploadFiles).then(function (response) {
var note = JSON.parse(response['response']['request'].response);
self.editor.notify(note.message);
}).catch(function (err) {
console.log(err);
});
});
}
} //--------------------------
// event handlers
//--------------------------
}, {
key: "handleEditorOptions",
value: function handleEditorOptions(e) {
var _this2 = this;
switch (e) {
case EditorEvent.EDITOR_SAVE:
case EditorEvent.EDITOR_UPDATE:
var edit = false;
if (e == EditorEvent.EDITOR_UPDATE) edit = true;
new _EntryTasks.default().submitPost(edit, Entry.uploadFiles).then(function (response) {
var note = JSON.parse(response['response']['request'].response);
_this2.editor.notify(note.message, note.postID);
}).catch(function (err) {
console.log(err);
});
break;
case EditorEvent.EDITOR_DELETE:
if (confirm('Aye! You know you\'re deleting this post, right?')) {
new _EntryTasks.default().deletePost().then(function (response) {
var note = JSON.parse(response['response']['request'].response);
window.location = "/@/dashboard/entries/"; //console.log(note);
}).catch(function (err) {
console.log(err);
});
} else {// Do nothing!
}
break;
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
document.getElementById('post-image').click();
break;
}
}
}, {
key: "handleDragOver",
value: function handleDragOver(e) {
@ -2882,6 +2991,31 @@ function () {
reader.readAsDataURL(f);
}
}
}, {
key: "handlePostImageAdd",
value: function handlePostImageAdd(e) {
e.stopPropagation();
e.preventDefault();
var self = this;
var postData = new FormData();
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i]; // Check the file type.
if (!file.type.match('image.*')) {
continue;
}
postData.append('post_image', file, file.name);
}
this.dataUtils.request("/api/blog/add-post-image", DataEvent.POST_IMAGE_ADDED, _DataUtils.REQUEST_TYPE_POST, _DataUtils.CONTENT_TYPE_FORM, postData).then(function (response) {
self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, JSON.parse(response.request['response']).url);
}).catch(function (err) {
console.log(err);
});
}
}]);
return Entry;
@ -2889,7 +3023,7 @@ function () {
exports.default = Entry;
Entry.uploadFiles = [];
},{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/effects/Animate":"tools/effects/Animate.jsx","../tasks/EntryTasks":"tasks/EntryTasks.jsx","../tools/utilities/TextEditor":"tools/utilities/TextEditor.jsx","tiny-date-picker":"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js","../tools/utilities/DateUtils":"tools/utilities/DateUtils.jsx"}],"controllers/DisplayManager.jsx":[function(require,module,exports) {
},{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/effects/Animate":"tools/effects/Animate.jsx","../tasks/EntryTasks":"tasks/EntryTasks.jsx","../tools/events/EditorEvent":"tools/events/EditorEvent.jsx","../tools/utilities/TextEditor":"tools/utilities/TextEditor.jsx","tiny-date-picker":"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js","../tools/utilities/DateUtils":"tools/utilities/DateUtils.jsx"}],"controllers/DisplayManager.jsx":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {

File diff suppressed because one or more lines are too long

View file

@ -3,6 +3,10 @@ block main-content
#entries-index
#entries-index-wrapper
h2 Entries
a.add-new-post(href="/@/dashboard/entries/add/new")
svg#new-upload-link(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-plus')
| NEW POST
#entries-list
- var index = 0;
- for ( index; index < items.length; index++)

View file

@ -6,7 +6,7 @@ block main-content
-var post_feature = 'null'
-var post_tags = ''
-var post_id = ''
-var post_date = 'NOW'
-var post_date = date
if(edit)
-post_title = post.title

View file

@ -14,17 +14,24 @@
| H2
button#option-header3.content-editor-btn-text.editor-button(title="header 3")
| H3
button#option-image.content-editor-btn-icon(for="post-image" title='insert image')
svg#option-link(viewBox="0 0 20 20" class="icons")
button#option-image.content-editor-btn-icon.editor-button(title='insert image')
svg#option-image(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
if(edit)
button#post-sumbit-btn.post-sumbit-btn.submit-start(data-action='blog-update' data-id=post.id type='submit')
svg#submit-save(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)
button#option-update.post-sumbit-btn.submit-start.editor-button(data-action='blog-update' data-id=post.id type='submit')
svg#submit-update(viewBox="0 0 20 20" class="icons")
use#submit-update(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)
svg#submit-good.icon-hide(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-up')
svg#submit-error.icon-hide(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-down')
button#option-delete.content-editor-btn-icon.editor-button(for="post-delete" title='insert image')
svg#option-delete(viewBox="0 0 20 20" class="icons")
use#option-delete(xlink:href='/dash/assets/images/sprite.svg#entypo-cross')
else
button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST
button#option-save.post-sumbit-btn.submit-start.editor-button(data-action='blog-add' type='submit')
svg#submit-save(viewBox="0 0 20 20" class="icons")
use#submit-save(xlink:href='/dash/assets/images/sprite.svg#entypo-plus' data-action='blog-add')

View file

@ -11,6 +11,7 @@ import * as DataEvent from '../tools/events/DataEvent';
import Animate from '../tools/effects/Animate';
import * as Ease from '../tools/effects/Animate';
import EntryTasks from '../tasks/EntryTasks';
import * as EditorEvent from '../tools/events/EditorEvent';
import TextEditor from '../tools/utilities/TextEditor';
import TinyDatePicker from 'tiny-date-picker';
import DateUtils from '../tools/utilities/DateUtils';
@ -24,10 +25,22 @@ class Entry {
reframe('iframe');
let self = this;
this.uploadFiles;
this.start();
this.editor = new TextEditor();
this.dataUtils = new DataUtils();
this.dateUtils = new DateUtils();
if (document.getElementById('edit-text-code')) {
this.editor = new TextEditor(document.getElementById('edit-text-code'),
document.getElementById('header').offsetHeight +
document.getElementById('entry-header').offsetHeight +
document.getElementById('entry-feature').offsetHeight
);
this.editor.addListener(EditorEvent.EDITOR_DELETE, f => this.handleEditorOptions(EditorEvent.EDITOR_DELETE), false)
this.editor.addListener(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, f => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE), false)
this.editor.addListener(EditorEvent.EDITOR_UPDATE, f => this.handleEditorOptions(EditorEvent.EDITOR_UPDATE), false)
this.editor.addListener(EditorEvent.EDITOR_SAVE, f => this.handleEditorOptions(EditorEvent.EDITOR_SAVE), false)
document.getElementById('post-image').addEventListener('change', e => this.handlePostImageAdd(e), false);
TinyDatePicker(document.getElementById('entry-date'), {
mode: 'dp-below',
format(date) {
@ -36,6 +49,8 @@ class Entry {
}
});
}
this.start();
}
//--------------------------
// methods
//--------------------------
@ -74,24 +89,50 @@ class Entry {
document.getElementById('featured-click').click();
})
}
document.getElementById("post-sumbit-btn").addEventListener('click', f => {
f.preventDefault();
let edit = false;
if (f.target.getAttribute('data-action') == 'blog-update')
edit = true;
new EntryTasks().submitPost(edit, Entry.uploadFiles).then((response) => {
let note = JSON.parse(response['response']['request'].response);
self.editor.notify(note.message);
}).catch((err) => {
console.log(err)
});
});
}
}
//--------------------------
// event handlers
//--------------------------
handleEditorOptions(e) {
switch (e) {
case EditorEvent.EDITOR_SAVE:
case EditorEvent.EDITOR_UPDATE:
let edit = false;
if (e == EditorEvent.EDITOR_UPDATE)
edit = true;
new EntryTasks().submitPost(edit, Entry.uploadFiles).then((response) => {
let note = JSON.parse(response['response']['request'].response);
this.editor.notify(note.message, note.postID);
}).catch((err) => {
console.log(err)
});
break;
case EditorEvent.EDITOR_DELETE:
if (confirm('Aye! You know you\'re deleting this post, right?')) {
new EntryTasks().deletePost().then((response) => {
let note = JSON.parse(response['response']['request'].response);
window.location = "/@/dashboard/entries/";
//console.log(note);
}).catch((err) => {
console.log(err)
});
} else {
// Do nothing!
}
break;
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
document.getElementById('post-image').click();
break;
}
}
handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
@ -164,6 +205,30 @@ class Entry {
}
}
handlePostImageAdd(e) {
e.stopPropagation();
e.preventDefault();
let self = this;
var postData = new FormData();
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
postData.append('post_image', file, file.name);
}
this.dataUtils.request("/api/blog/add-post-image", DataEvent.POST_IMAGE_ADDED, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, postData)
.then((response) => {
self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, JSON.parse(response.request['response']).url);
}).catch((err) => {
console.log(err)
})
}
}
Entry.uploadFiles = [];
export {

View file

@ -44,7 +44,7 @@ class EntryTasks {
let postURL;
let postEventType;
if (edit) {
let postID = document.getElementById('post-sumbit-btn').getAttribute('data-id');
let postID = document.getElementById('option-update').getAttribute('data-id');
postURL = "/api/blog/update/" + postID;
postEventType = DataEvent.POST_UPDATED;
@ -65,6 +65,24 @@ class EntryTasks {
});
}
deletePost(){
let self = this;
let postID = document.getElementById('option-update').getAttribute('data-id');
return new Promise(function(resolve, reject){
self.dataUtils.request("/api/blog/delete/" + postID, DataEvent.POST_DELETED, REQUEST_TYPE_POST, CONTENT_TYPE_FORM)
.then((response) => {
resolve({
response
})
}).catch((err) => {
reject({
err
});
})
})
this.dataUtils.re
}
validateForm() {
let valid = false;
if (this.entry_form.title.value == "" || this.entry_form.price.value == "" || this.entry_form.description == "") {

View file

@ -0,0 +1,19 @@
export const EDITOR_DELETE = 'editorDelete';
export const EDITOR_UPLOAD_POST_IMAGE = 'editorUploadImage';
export const EDITOR_SAVE = 'editorSave';
export const EDITOR_UPDATE = 'editorUpdate';
class EditorEvent
{
//--------------------------
// methods
//--------------------------
//--------------------------
// event handlers
//--------------------------
}
export default new EditorEvent

View file

@ -1,36 +1,32 @@
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from './DataUtils';
import * as DataEvent from '../events/DataEvent';
import DateUtils from './DateUtils';
import {
position,
offset
} from 'caret-pos';
import Animate from '../effects/Animate';
import EventEmitter from '../events/EventEmitter';
import * as EditorEvent from '../events/EditorEvent';
class TextEditor {
class TextEditor extends EventEmitter {
//--------------------------
// constructor
//--------------------------
constructor() {
this.setInputs();
constructor(textEditor, scrollLimit) {
super();
hljs.initHighlightingOnLoad();
this.dataUtils = new DataUtils();
//this.dataUtils = new DataUtils();
this.dateUtils = new DateUtils();
this.textEditor = textEditor;
this.fixLimit = scrollLimit;
this.caretPos = null;
this.url = '';
let self = this;
this.setInputs();
window.addEventListener("scroll", f => {
var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight
var fixLimit = this.fixLimit;
if (window.pageYOffset >= fixLimit) {
document.getElementById('edit-control').style.position = "fixed"
} else {
@ -48,39 +44,50 @@ class TextEditor {
for (var i = 0, length = editorButtons.length; i < length; i++) {
editorButtons[i].addEventListener('click', e => this.handleEditorOption(e), false);
}
document.getElementById('edit-text-code').addEventListener('input', f => {
this.textEditor.addEventListener('input', f => {
self.refresh();
})
document.getElementById('post-image').addEventListener('change', e => this.handlePostImageAdd(e), false);
document.getElementById('option-image').addEventListener('click', e => {
document.getElementById('post-image').click();
})
}
refresh() {
var caret = position(document.getElementById('edit-text-code')).pos;
var spiffed = hljs.highlight('markdown', document.getElementById('edit-text-code').innerText).value;
var caret = position(this.textEditor).pos;
var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
var temp = document.createElement("div");
temp.innerText = spiffed;
document.getElementById('edit-text-code').innerHTML = temp.innerText;
position(document.getElementById('edit-text-code'), caret)
this.textEditor.innerHTML = temp.innerText;
position(this.textEditor, caret)
}
notify(type) {
notify(type, data) {
switch (type) {
case DataEvent.POST_UPDATED:
document.getElementById('submit-save').classList.add('icon-hide');
document.getElementById('submit-update').classList.add('icon-hide');
document.getElementById('submit-good').classList.remove('icon-hide');
document.getElementById('post-sumbit-btn').classList.remove('submit-start');
document.getElementById('post-sumbit-btn').classList.add('submit-cool');
document.getElementById('option-update').classList.remove('submit-start');
document.getElementById('option-update').classList.add('submit-cool');
setTimeout(f => {
document.getElementById('submit-save').classList.remove('icon-hide');
document.getElementById('submit-update').classList.remove('icon-hide');
document.getElementById('submit-good').classList.add('icon-hide');
document.getElementById('post-sumbit-btn').classList.add('submit-start');
document.getElementById('post-sumbit-btn').classList.remove('submit-cool');
document.getElementById('option-update').classList.add('submit-start');
document.getElementById('option-update').classList.remove('submit-cool');
}, 2000);
break;
case DataEvent.POST_ADDED:
window.location = "/@/dashboard/entries/edit/" + data;
break;
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
position(this.textEditor, this.caretPos);
var sel, range, pulled;
sel = window.getSelection(); //console.log(sel)
//console.log(note.message)
if (sel.rangeCount) {
range = sel.getRangeAt(0);
pulled = sel.getRangeAt(0).toString();
range.deleteContents();
range.insertNode(document.createTextNode("![image alt text](" + data + " 'image title')"));
}
this.refresh();
break;
}
}
@ -116,11 +123,23 @@ class TextEditor {
case "option-header3":
range.insertNode(document.createTextNode("### " + pulled));
break;
case "option-image":
this.caretPos = position(this.textEditor).pos;
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
break;
case "submit-save":
case "option-save":
this.emitEvent(EditorEvent.EDITOR_SAVE);
break;
case "submit-update":
case "option-update":
this.emitEvent(EditorEvent.EDITOR_UPDATE);
break
case "option-link":
range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)"));
break;
case "option-date":
console.log("DATE UPDATE")
case "option-delete":
this.emitEvent(EditorEvent.EDITOR_DELETE);
break
default:
//range.insertNode(document.createTextNode("[" + self.url + "](PASTE URL HERE)"));
@ -129,42 +148,5 @@ class TextEditor {
}
this.refresh()
}
handlePostImageAdd(e) {
e.stopPropagation();
e.preventDefault();
let self = this;
var postData = new FormData();
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
postData.append('post_image', file, file.name);
}
var caret = position(document.getElementById('edit-text-code')).pos;
self.dataUtils.request("/api/blog/add-post-image", DataEvent.POST_IMAGE_ADDED, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, postData)
.then((response) => {
//console.log("01 "+response.request['response']);
position(document.getElementById('edit-text-code'), caret)
var sel, range, pulled;
sel = window.getSelection(); //console.log(sel)
//console.log(note.message)
if (sel.rangeCount) {
range = sel.getRangeAt(0);
pulled = sel.getRangeAt(0).toString();
range.deleteContents();
range.insertNode(document.createTextNode("![image alt text](" + JSON.parse(response.request['response']).url + " 'image title')"));
}
self.refresh();
}).catch((err) => {
console.log(err)
})
}
}
export default TextEditor

View file

@ -1,21 +1,25 @@
#edit-control
//margin 10px
// margin 10px
top 1px
padding 2px
border-radius 3px
background-opacity($primary - 10%, 0.50)
width: 100%
// background-opacity($primary - 10%, 0.50)
width 100%
z-index 2000
button
margin 3px
button:nth-child(1)
border-radius 3px 0 0 3px
#post-sumbit-btn
button
object-transitions(0.3s)
height 30px
width 30px
margin 0
border-radius 0
button:hover
background: $secondary - 20%
#option-update
height 35px
width 35px
padding 5px 5px 1px 5px
border-radius 20px
display inline-block
vertical-align top
text-align center
@ -26,14 +30,15 @@
.submit-start
background $white
svg
fill $highlight
.submit-cool
background: $eventCool
background $eventCool
svg
fill: $white
// float right
fill $white
#option-date
height 30px
@ -46,28 +51,31 @@
fill $white
.content-editor-btn-icon
height 30px
width 30px
height 35px
width 40px
background $secondary
padding 5px 5px 1px 5px
border-radius 20px
// border-radius 20px
color $primary
display inline-block
vertical-align top
text-align center
margin 0
svg
fill $primary
.content-editor-btn-text
width 30px
width 40px
height 35px
background $secondary
padding 5px
border-radius 20px
// border-radius 20px
color $primary
vertical-align top
display inline-block
text-align center
margin 0
#option-bold
font-weight bold
@ -88,6 +96,6 @@
max-width 900px
margin 0 auto
border-radius 5px
code
border-radius: 5px
code
border-radius 5px

View file

@ -11,6 +11,14 @@
vertical-align top
padding 3px
a.add-new-post
background $highlight
border-radius 3px
padding 3px
color $white
width 110px
margin-bottom: 10px
svg
display inline-block
vertical-align top
@ -59,34 +67,37 @@
background $primary - 4%
font-family 'Apercu'
width 100%
height 150px
height 140px
font-size 1.5em
color $white
padding 5px
#entry-date
background $primary - 10%
border-radius 0 3px 3px 0
width 105px
font-family 'Apercu'
color $highlight
height 35px
height 30px
vertical-align top
text-align: center
text-align center
label
background $primary - 15%
border-radius 3px 0 0 3px
display inline-block
padding 5px
color $primary + 15%
line-height 35px
color $secondary
line-height 30px
#entry-meta
#entry_tags
background $primary - 4%
font-family 'Apercu'
width 100%
height 150px
color $primary - 50%
height 140px
color $secondary
padding 5px
#featured-click, #post-image
display none

View file

@ -18,7 +18,7 @@ textarea
button, input[type=submit]
background $highlight
color $highlight - 20%
color $white
font 1em 'Apercu-Mono'
border-radius 3px
position relative