integrated date chooser with entry RTE

This commit is contained in:
Ro 2018-11-02 16:25:47 -04:00
parent 1584afc522
commit 5229db1668
11 changed files with 8438 additions and 33 deletions

View file

@ -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 formattedDate = newdate.getFullYear()+"-"+newdate.getMonth()+"-"+newdate.getDate();
console.log(DateUtils.getDate('null', 'full'));
//let newdate = new Date(entry.created_at);
//let formattedDate = newdate.getFullYear()+"-"+newdate.getMonth()+"-"+newdate.getDate();
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,

View file

@ -70,10 +70,15 @@ module.exports = {
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,7 +90,7 @@ 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);

6626
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

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

View file

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

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

@ -1,25 +1,28 @@
#edit-control
margin 10px 0 0 0
top 1px
padding: 5px
border-radius: 5px
background-opacity($primary - 10%, .75)
padding 5px
border-radius 5px
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
#option-date
height 30px
padding-top: 6px;
padding-top 6px
svg
margin -13px 5px 0 0
display: inline-block;
vertical-align: top;
display inline-block
vertical-align top
fill $white
.content-editor-btn-icon
@ -59,3 +62,246 @@
font-weight bold
text-decoration line-through
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%)