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

brain/routes/back/index.js

@@ -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 {

themes/dash/assets/css/dash.css

@@ -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;
+  color: #b2cce5;
-  line-height: 35px;
+  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;
+  height: 140px;
-  color: #1c242c;
+  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 {
+#edit-control button:nth-child(1) {
-  margin: 3px;
+  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;
+  margin: 0;
-  width: 30px;
+  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;
+  height: 35px;
-  width: 30px;
+  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;

themes/dash/assets/js/dash.min.js

@@ -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();
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TextEditor).call(this));
-    hljs.initHighlightingOnLoad();
+    hljs.initHighlightingOnLoad(); //this.dataUtils = new DataUtils();
-    this.dataUtils = new _DataUtils.default();
+
-    this.dateUtils = new _DateUtils.default();
+    _this.dateUtils = new _DateUtils.default();
-    this.url = '';
+    _this.textEditor = textEditor;
-    var self = this;
+    _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 caret = (0, _caretPos.position)(this.textEditor).pos;
-      var spiffed = hljs.highlight('markdown', document.getElementById('edit-text-code').innerText).value;
+      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;
+      this.textEditor.innerHTML = temp.innerText;
-      (0, _caretPos.position)(document.getElementById('edit-text-code'), caret);
+      (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('option-update').classList.remove('submit-start');
-          document.getElementById('post-sumbit-btn').classList.add('submit-cool');
+          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('option-update').classList.add('submit-start');
-            document.getElementById('post-sumbit-btn').classList.remove('submit-cool');
+            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":
+          case "option-delete":
-            console.log("DATE UPDATE");
+            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.dataUtils = new _DataUtils.default();
-    this.editor = new _TextEditor.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", {

themes/dash/entries-index.pug

@@ -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++)

themes/dash/entry-edit.pug

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

themes/dash/partials/editor.pug

@@ -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')
+    button#option-image.content-editor-btn-icon.editor-button(title='insert image')
-        svg#option-link(viewBox="0 0 20 20" class="icons")
+        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')
+        button#option-update.post-sumbit-btn.submit-start.editor-button(data-action='blog-update' data-id=post.id type='submit')
-            svg#submit-save(viewBox="0 0 20 20" class="icons")
+            svg#submit-update(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)  
+                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')
+
+    

themes/dash/src/com/controllers/DashEntry.jsx

@@ -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.dataUtils = new DataUtils();
-        this.editor = new TextEditor();
         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 {

themes/dash/src/com/tasks/EntryTasks.jsx

@@ -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 == "") {

themes/dash/src/com/tools/events/EditorEvent.jsx

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

themes/dash/src/com/tools/utilities/TextEditor.jsx

@@ -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() {
+    constructor(textEditor, scrollLimit) {
-        this.setInputs();
+        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 caret = position(this.textEditor).pos;
-        var spiffed = hljs.highlight('markdown', document.getElementById('edit-text-code').innerText).value;
+        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;
+        this.textEditor.innerHTML = temp.innerText;
-        position(document.getElementById('edit-text-code'), caret)
+        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('option-update').classList.remove('submit-start');
-                document.getElementById('post-sumbit-btn').classList.add('submit-cool');
+                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('option-update').classList.add('submit-start');
-                    document.getElementById('post-sumbit-btn').classList.remove('submit-cool');
+                    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":
+                case "option-delete":
-                    console.log("DATE UPDATE")
+                    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

themes/dash/src/styles/main/_editor.styl

@@ -1,21 +1,25 @@
 #edit-control
-    //margin 10px
+    // margin 10px
     top 1px
-    padding 2px
     border-radius 3px
-    background-opacity($primary - 10%, 0.50)
+    // background-opacity($primary - 10%, 0.50)
-    width: 100%
+    width 100%
     z-index 2000
 
-    button
+    button:nth-child(1)
-        margin 3px
+        border-radius 3px 0 0 3px
 
-    #post-sumbit-btn
+    button
         object-transitions(0.3s)
-        height 30px
+        margin 0
-        width 30px
+        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
+            fill $white
-        // float right
 
     #option-date
         height 30px
@@ -46,28 +51,31 @@
             fill $white
 
     .content-editor-btn-icon
-        height 30px
+        height 35px
-        width 30px
+        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

themes/dash/src/styles/main/_entries.styl

@@ -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%
+                    color $secondary
-                    line-height 35px
+                    line-height 30px
 
             #entry-meta
                 #entry_tags
                     background $primary - 4%
                     font-family 'Apercu'
                     width 100%
-                    height 150px
+                    height 140px
-                    color $primary - 50%
+                    color $secondary
+                    padding 5px
 
                 #featured-click, #post-image
                     display none

themes/dash/src/styles/main/_forms.styl

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