integrated date chooser with entry RTE

sql-version-freeze
Ro 6 years ago
parent 1584afc522
commit 5229db1668

@ -122,14 +122,14 @@ router.get('/entries/edit/:id', function (req, res) {
featured = featured_img[0].substr(7, featured_img[0].length); featured = featured_img[0].substr(7, featured_img[0].length);
let pretty = hljs.highlight('markdown', entry.entry_plaintext).value; 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', { res.render('dash/entry-edit', {
title: 'Edit Entry', title: 'Edit Entry',
mode: 'admin', mode: 'admin',
post: entry, post: entry,
date:formattedDate, date:sexydate,
colored: pretty, colored: pretty,
html: entry.entry_plaintext, html: entry.entry_plaintext,
feature: featured, feature: featured,

@ -70,10 +70,15 @@ module.exports = {
var minute = ((rawdate != null || rawdate != '') ? String(new Date(rawdate).getUTCMinutes()) : String(new Date().getUTCMinutes())); 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 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 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) if (day.length == 1)
day = String("0" + day); day = String("0" + day);
if (month.length == 1) if (month.length == 1)
month = String("0" + month); month = String("0" + month);
offset = String(offset / 60);
if (offset.length == 1)
offset = String("0" + offset);
switch (type) { switch (type) {
case "day": case "day":
return day; return day;
@ -85,7 +90,7 @@ module.exports = {
return year; return year;
break; break;
case "stamp": case "stamp":
return String(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds+"."+millisecond); return String(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds + "." + millisecond + "-" + (offset));
break break
default: default:
return String(year + "-" + month + "-" + day + " : " + hour + "-" + minute + "-" + seconds); return String(year + "-" + month + "-" + day + " : " + hour + "-" + minute + "-" + seconds);

6626
package-lock.json generated

File diff suppressed because it is too large Load Diff

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

@ -2268,6 +2268,7 @@ select {
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
background: rgba(137,126,113,0.75); background: rgba(137,126,113,0.75);
z-index: 2000;
} }
#edit-control button { #edit-control button {
margin: 5px; margin: 5px;
@ -2325,6 +2326,315 @@ select {
text-decoration: line-through; text-decoration: line-through;
font-style: italic; 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 { .hljs {
display: block; display: block;
overflow-x: auto; 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

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

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

@ -1,25 +1,28 @@
#edit-control #edit-control
margin 10px 0 0 0 margin 10px 0 0 0
top 1px 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 button
margin 5px margin 5px
#post-sumbit-btn #post-sumbit-btn
height 30px height 30px
background: #65b16c background #65b16c
color #65b16c - 30% color #65b16c - 30%
// float right // float right
#option-date #option-date
height 30px height 30px
padding-top: 6px; padding-top 6px
svg 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 fill $white
.content-editor-btn-icon .content-editor-btn-icon
@ -59,3 +62,246 @@
font-weight bold font-weight bold
text-decoration line-through 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%)
Loading…
Cancel
Save