integrated date chooser with entry RTE

brain/routes/back/index.js

@@ -122,14 +122,14 @@ router.get('/entries/edit/:id', function (req, res) {
                 featured = featured_img[0].substr(7, featured_img[0].length);
             let pretty = hljs.highlight('markdown', entry.entry_plaintext).value;
 
-            let newdate = new Date(entry.created_at);
+            //let newdate = new Date(entry.created_at);
-            let formattedDate = newdate.getFullYear()+"-"+newdate.getMonth()+"-"+newdate.getDate();
+            //let formattedDate = newdate.getFullYear()+"-"+newdate.getMonth()+"-"+newdate.getDate();
-            console.log(DateUtils.getDate('null', 'full'));
+            let sexydate = DateUtils.getDate('stamp', entry.created_at)
             res.render('dash/entry-edit', {
                 title: 'Edit Entry',
                 mode: 'admin',
                 post: entry,
-                date:formattedDate,
+                date:sexydate,
                 colored: pretty,
                 html: entry.entry_plaintext,
                 feature: featured,

brain/utils/DateUtils.js

@@ -1,5 +1,5 @@
 module.exports = {
-    decodeHTML: function(string, quote_style) {
+    decodeHTML: function (string, quote_style) {
         var optTemp = 0,
             i = 0,
             noquotes = false;
@@ -41,8 +41,8 @@ module.exports = {
         string = string.replace(/&/g, '&');
         return string;
     },
-    cleanString: function(str) {
+    cleanString: function (str) {
-        return (str + '').replace(/\\(.?)/g, function(s, n1) {
+        return (str + '').replace(/\\(.?)/g, function (s, n1) {
             switch (n1) {
                 case '\\':
                     return '\\';
@@ -55,25 +55,30 @@ module.exports = {
             }
         });
     },
-    
+
-    cleanString: function(string) {
+    cleanString: function (string) {
         var clean = string.replace(/(^\-+|[^a-zA-Z0-9\/_| -]+|\-+$)/g, '').toLowerCase().replace(/[\/_| -]+/g, '-');
         return clean;
     },
 
 
-    getDate: function(type, rawdate) { 
+    getDate: function (type, rawdate) {
         var day = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCDate()) : String(new Date().getUTCDate()));
-        var month = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCMonth()+1) : String(new Date().getUTCMonth()+1));
+        var month = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCMonth() + 1) : String(new Date().getUTCMonth() + 1));
         var year = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCFullYear()) : String(new Date().getUTCFullYear()));
         var hour = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCHours()) : String(new Date().getUTCHours()));
         var minute = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCMinutes()) : String(new Date().getUTCMinutes()));
         var seconds = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCSeconds()) : String(new Date().getUTCSeconds()));
         var millisecond = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCMilliseconds()) : String(new Date().getUTCMilliseconds()));
+        var offset = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getTimezoneOffset()) : String(new Date().getTimezoneOffset()));
         if (day.length == 1)
             day = String("0" + day);
         if (month.length == 1)
             month = String("0" + month);
+        offset = String(offset / 60);
+        if (offset.length == 1)
+            offset = String("0" + offset);
+            
         switch (type) {
             case "day":
                 return day;
@@ -85,11 +90,11 @@ module.exports = {
                 return year;
                 break;
             case "stamp":
-                return String(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds+"."+millisecond);
+                return String(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds + "." + millisecond + "-" + (offset));
                 break
             default:
                 return String(year + "-" + month + "-" + day + " : " + hour + "-" + minute + "-" + seconds);
                 break;
         }
     }
-};
+};

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.5",
   "private": true,
   "description": "The most chill blog framework ever.",
-  "repository": "https://code.playvicio.us/Are0h/thetwelfthhouse",
+  "repository": "https://code.playvicio.us/Are0h/Fipamo",
   "theme": "default",
   "scripts": {
     "start": "forever start init.js",
@@ -49,6 +49,7 @@
     "scrape-metadata": "^2.0.0",
     "sequelize": "^4.37.6",
     "serve-favicon": "latest",
+    "tiny-date-picker": "^3.2.6",
     "uuid": "^3.2.1"
   },
   "devDependencies": {

themes/dash/assets/css/dash.css

@@ -2268,6 +2268,7 @@ select {
   padding: 5px;
   border-radius: 5px;
   background: rgba(137,126,113,0.75);
+  z-index: 2000;
 }
 #edit-control button {
   margin: 5px;
@@ -2325,6 +2326,315 @@ select {
   text-decoration: line-through;
   font-style: italic;
 }
+.dp-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(46,42,38,0.75);
+  z-index: 2000;
+}
+.dp {
+  position: relative;
+  background: #968c80;
+  box-shadow: 2px 2px 16px rgba(0,0,0,0.25);
+  line-height: 1.4;
+  border-radius: 4px;
+  max-height: 400px;
+  z-index: 5000;
+  padding-top: 6px;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+}
+.dp:before {
+  content: ' ';
+  height: 6px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #cd898d;
+}
+.dp-permanent .dp {
+  padding-top: 0;
+  border: 1px solid #eee;
+  box-shadow: none;
+}
+.dp-permanent .dp:before {
+  display: none;
+}
+.dp-cal {
+  min-height: 300px;
+}
+.dp-below {
+  position: absolute;
+  font-size: 0.8em;
+  width: 400px;
+  max-width: 100vw;
+}
+.dp-permanent {
+  position: relative;
+  font-size: 0.8em;
+  width: 400px;
+  max-width: 100vw;
+}
+.dp-permanent .dp {
+  z-index: 0;
+}
+.dp-modal .dp {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 600px;
+  width: calc(100% - 4em);
+  transform: translate(-50%, -50%);
+  animation: slide-up 0.3s forwards;
+}
+.dp-months {
+  padding: 24px;
+}
+.dp-years {
+  box-sizing: border-box;
+  max-height: 400px;
+  padding: 8px 0;
+  overflow: auto !important /* HACK for Chrome on Android */;
+}
+.dp-cal-month,
+.dp-cal-year,
+.dp-day,
+.dp-month,
+.dp-year {
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  position: relative;
+  color: #eee;
+  border-radius: 2px;
+  border: 0;
+  background: transparent;
+}
+.dp-cal-header {
+  position: relative;
+  text-align: center;
+  padding-bottom: 16px;
+  background: #897e71;
+}
+.dp-next,
+.dp-prev {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+  top: 14px;
+  color: #4c463f;
+  border-radius: 2px;
+  border: 0;
+  background: transparent;
+}
+.dp-next:focus,
+.dp-prev:focus,
+.dp-next:hover,
+.dp-prev:hover {
+  outline: none;
+  color: inherit;
+}
+.dp-prev {
+  left: 24px;
+}
+.dp-next {
+  right: 24px;
+}
+.dp-prev:before,
+.dp-next:before {
+  content: '';
+  border: 2px solid;
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  transform: rotate(-45deg);
+  transition: border-color 0.2s;
+  margin: 9px 0 40px 4px;
+}
+.dp-prev:before {
+  border-right: 0;
+  border-bottom: 0;
+}
+.dp-next:before {
+  border-left: 0;
+  border-top: 0;
+  margin-left: 0;
+  margin-right: 4px;
+}
+.dp-cal-month,
+.dp-cal-year {
+  display: inline-block;
+  font-size: 1.4em;
+  padding: 16px 8px 8px;
+  outline: none;
+}
+.dp-cal-footer {
+  text-align: center;
+  background: #897e71;
+}
+.dp-day-today:after {
+  content: '';
+  height: 0;
+  width: 0;
+  border: 7px solid #cd898d;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.dp-close,
+.dp-clear,
+.dp-today {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 33%;
+  padding: 8px;
+  text-decoration: none;
+  color: #4c463f;
+  border: 0;
+  background: transparent;
+}
+.dp-permanent .dp-close,
+.dp-permanent .dp-clear {
+  display: none;
+}
+.dp-close:active,
+.dp-clear:active,
+.dp-today:active,
+.dp-next:active,
+.dp-prev:active,
+.dp-cal-month:active,
+.dp-cal-year:active {
+  background: #cd898d;
+  color: #eee;
+}
+@media screen and (min-device-width: 1200px) {
+  .dp-close:hover,
+  .dp-close:focus,
+  .dp-clear:hover,
+  .dp-clear:focus,
+  .dp-today:hover,
+  .dp-today:focus,
+  .dp-next:hover,
+  .dp-next:focus,
+  .dp-prev:hover,
+  .dp-prev:focus,
+  .dp-cal-month:focus,
+  .dp-cal-month:hover,
+  .dp-cal-year:hover,
+  .dp-cal-year:focus {
+    background: #cd898d;
+    color: #eee;
+  }
+}
+.dp-col-header,
+.dp-day {
+  width: 14.28571429%;
+  display: inline-block;
+  padding: 8px;
+  text-align: center;
+}
+.dp-col-header {
+  color: #aaa;
+  text-transform: uppercase;
+  font-weight: 300;
+  font-size: 0.8em;
+  padding: 8px 0;
+}
+.dp-month {
+  width: 33%;
+  display: inline-block;
+  padding: 8px;
+}
+.dp-year {
+  display: block;
+  padding: 8px 40px;
+  width: 100%;
+}
+.dp-edge-day {
+  color: #aaa;
+}
+.dp-day:hover,
+.dp-month:hover,
+.dp-year:hover,
+.dp-current:focus,
+.dp-current,
+.dp-day:focus,
+.dp-month:focus,
+.dp-year:focus {
+  outline: none;
+  background: #7c4a3e;
+  color: #eee;
+}
+.dp-selected:hover,
+.dp-selected:focus,
+.dp-selected {
+  background: #643c32;
+  color: #eee;
+}
+.dp-day-disabled {
+  background: transparent;
+  color: #ddd;
+}
+.dp-day-disabled:focus,
+.dp-day-disabled:hover {
+  background: #ddd;
+}
+.dp-focuser {
+  position: absolute;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+}
+@media (max-width: 480px), (max-height: 480px) {
+  .dp-modal .dp {
+    font-size: 0.9em;
+    width: auto;
+    width: 100%;
+  }
+  .dp-day-of-week,
+  .dp-day {
+    padding: 8px;
+  }
+}
+@-moz-keyframes slide-up {
+  0% {
+    transform: translate(-50%, 100%);
+  }
+  100% {
+    transform: translate(-50%, -50%);
+  }
+}
+@-webkit-keyframes slide-up {
+  0% {
+    transform: translate(-50%, 100%);
+  }
+  100% {
+    transform: translate(-50%, -50%);
+  }
+}
+@-o-keyframes slide-up {
+  0% {
+    transform: translate(-50%, 100%);
+  }
+  100% {
+    transform: translate(-50%, -50%);
+  }
+}
+@keyframes slide-up {
+  0% {
+    transform: translate(-50%, 100%);
+  }
+  100% {
+    transform: translate(-50%, -50%);
+  }
+}
 .hljs {
   display: block;
   overflow-x: auto;

themes/dash/entry-edit.pug

@@ -63,7 +63,8 @@ block main-content
                     button#option-image.content-editor-btn-icon(for="post-image")
                         svg#option-link(viewBox="0 0 20 20" class="icons")
                             use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
-                    button#option-date.editor-button
+                    input(id="option-date" type="text" value=post_date)
+                    //button#option-date.editor-button
                         svg#option-date(viewBox="0 0 20 20" class="icons")
                             use(xlink:href='/dash/assets/images/sprite.svg#entypo-calendar')
                         =post_date

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

@@ -7,6 +7,7 @@ import DataUtils, {
     CONTENT_TYPE_FORM
 } from './DataUtils';
 import * as DataEvent from '../events/DataEvent';
+import TinyDatePicker from 'tiny-date-picker';
 import {
     position,
     offset
@@ -22,6 +23,9 @@ class TextEditor {
         hljs.initHighlightingOnLoad();
         this.dataUtils = new DataUtils();
         this.url = '';
+        TinyDatePicker(document.getElementById('option-date', {
+            mode: 'dp-modal'
+        }));
         window.addEventListener("scroll", f => {
             var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight
             if (window.pageYOffset >= fixLimit) {

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

@@ -1,25 +1,28 @@
 #edit-control
     margin 10px 0 0 0
     top 1px
-    padding: 5px
+    padding 5px
-    border-radius: 5px
+    border-radius 5px
-    background-opacity($primary - 10%, .75)
+    background-opacity($primary - 10%, 0.75)
-
+    z-index 2000
 
     button
         margin 5px
+
     #post-sumbit-btn
         height 30px
-        background: #65b16c
+        background #65b16c
         color #65b16c - 30%
-        //float right
+        // float right
+
     #option-date
         height 30px
-        padding-top: 6px;
+        padding-top 6px
+
         svg
-            margin -13px 5px 0 0 
+            margin -13px 5px 0 0
-            display: inline-block;
+            display inline-block
-            vertical-align: top;
+            vertical-align top
             fill $white
 
     .content-editor-btn-icon
@@ -58,4 +61,247 @@
     #option-strikethrough
         font-weight bold
         text-decoration line-through
-        font-style italic
+        font-style italic
+
+// TINY DATE
+
+.dp-modal
+    position fixed
+    top 0
+    left 0
+    right 0
+    bottom 0
+    //background rgba(255, 255, 255, 0.75)
+    background-opacity($primary - 70%, .75);
+    z-index 2000
+
+.dp
+    position relative
+    background $primary //#FFF
+    box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
+    line-height 1.4
+    border-radius 4px
+    max-height 400px
+    z-index 5000
+    padding-top 6px
+    overflow hidden
+    -webkit-tap-highlight-color transparent
+
+.dp:before
+    content ' '
+    height 6px
+    position absolute
+    top 0
+    left 0
+    right 0
+    background $highlight
+    //background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
+
+.dp-permanent .dp
+    padding-top 0
+    border 1px solid #EEE
+    box-shadow none
+
+.dp-permanent .dp:before
+    display none
+
+.dp-cal
+    min-height 300px
+
+.dp-below
+    position absolute
+    font-size 0.8em
+    width 400px
+    max-width 100vw
+
+.dp-permanent
+    position relative
+    font-size 0.8em
+    width 400px
+    max-width 100vw
+
+.dp-permanent .dp
+    z-index 0
+
+.dp-modal .dp
+    position absolute
+    top 50%
+    left 50%
+    max-width 600px
+    width calc(100% - 4em)
+    transform translate(-50%, -50%)
+    animation slide-up 0.3s forwards
+
+.dp-months
+    padding 24px
+
+.dp-years
+    box-sizing border-box
+    max-height 400px
+    padding 8px 0
+    overflow auto !important /* HACK for Chrome on Android */
+
+.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
+    box-sizing border-box
+    text-align center
+    text-decoration none
+    position relative
+    color $white
+    border-radius 2px
+    border 0
+    background transparent
+
+.dp-cal-header
+    position relative
+    text-align center
+    padding-bottom 16px
+    background $primary - 10%
+
+.dp-next, .dp-prev
+    position absolute
+    width 30px
+    height 30px
+    overflow hidden
+    top 14px
+    color $primary - 50%
+    border-radius 2px
+    border 0
+    background transparent
+
+.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
+    outline none
+    color inherit
+
+.dp-prev
+    left 24px
+
+.dp-next
+    right 24px
+
+.dp-prev:before, .dp-next:before
+    content ''
+    border 2px solid
+    width 10px
+    height 10px
+    display inline-block
+    transform rotate(-45deg)
+    transition border-color 0.2s
+    margin 9px 0 40px 4px
+
+.dp-prev:before
+    border-right 0
+    border-bottom 0
+
+.dp-next:before
+    border-left 0
+    border-top 0
+    margin-left 0
+    margin-right 4px
+
+.dp-cal-month, .dp-cal-year
+    display inline-block
+    font-size 1.4em
+    padding 16px 8px 8px
+    outline none
+
+.dp-cal-footer
+    text-align center
+    background $primary - 10%
+
+.dp-day-today:after
+    content ''
+    height 0
+    width 0
+    border 7px solid $highlight
+    border-bottom-color transparent
+    border-left-color transparent
+    position absolute
+    top 0
+    right 0
+
+.dp-close, .dp-clear, .dp-today
+    box-sizing border-box
+    display inline-block
+    width 33%
+    padding 8px
+    text-decoration none
+    color $primary - 50%
+    border 0
+    background transparent
+
+.dp-permanent .dp-close, .dp-permanent .dp-clear
+    display none
+
+.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
+    background $highlight
+    color $white
+
+@media screen and (min-device-width: 1200px)
+    .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
+        background $highlight
+        color $white
+
+.dp-col-header, .dp-day
+    width 14.28571429%
+    display inline-block
+    padding 8px
+    text-align center
+
+.dp-col-header
+    color #AAA
+    text-transform uppercase
+    font-weight 300
+    font-size 0.8em
+    padding 8px 0
+
+.dp-month
+    width 33%
+    display inline-block
+    padding 8px
+
+.dp-year
+    display block
+    padding 8px 40px
+    width 100%
+
+.dp-edge-day
+    color #AAA
+
+.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
+    outline none
+    background $secondary + 10%
+    color $white
+
+.dp-selected:hover, .dp-selected:focus, .dp-selected
+    background $secondary
+    color $white
+
+.dp-day-disabled
+    background transparent
+    color #DDD
+
+.dp-day-disabled:focus, .dp-day-disabled:hover
+    background #DDD
+
+.dp-focuser
+    position absolute
+    z-index 0
+    top 50%
+    left 50%
+
+/* Responsive overrides */
+@media (max-width: 480px), (max-height: 480px)
+    .dp-modal .dp
+        font-size 0.9em
+        width auto
+        width 100%
+
+    .dp-day-of-week, .dp-day
+        padding 8px
+
+@keyframes slide-up
+    0%
+        transform translate(-50%, 100%)
+
+    100%
+        transform translate(-50%, -50%)