Even more development
This commit is contained in:
parent
15a4020d12
commit
bd2e0d0fff
11 changed files with 1238 additions and 24 deletions
|
|
@ -69,7 +69,7 @@ export default class ArticleRoutes {
|
||||||
.then(res => { newBanner = res })
|
.then(res => { newBanner = res })
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if (ctx.req.files.media && false) {
|
if (ctx.req.files.media) {
|
||||||
promises.push(
|
promises.push(
|
||||||
this.upload(ctx.req.files.media)
|
this.upload(ctx.req.files.media)
|
||||||
.then(res => { newMedia = res })
|
.then(res => { newMedia = res })
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,72 @@
|
||||||
|
:root {
|
||||||
|
--primary-bg: #01579b;
|
||||||
|
--primary-fg: white;
|
||||||
|
--primary-fg-url: #FFC7C7;
|
||||||
|
--primary-light-bg: #3D77C7; // #4f83cc;
|
||||||
|
--primary-light-fg: white;
|
||||||
|
--primary-dark-bg: #002f6c;
|
||||||
|
--primary-dark-fg: white;
|
||||||
|
|
||||||
|
--secondary-bg: #f57c00;
|
||||||
|
--secondary-fg: black;
|
||||||
|
--secondary-light-bg: #ffad42;
|
||||||
|
--secondary-light-fg: black;
|
||||||
|
--secondary-dark-bg: #bb4d00;
|
||||||
|
--secondary-dark-fg: white;
|
||||||
|
|
||||||
|
--table-fg: #333;
|
||||||
|
--border: #ccc;
|
||||||
|
--border-fg: black;
|
||||||
|
--border-fg-url: #8f3c00;
|
||||||
|
--title-fg: #555;
|
||||||
|
--meta-fg: #757575; // #999
|
||||||
|
--meta-light-fg: #999999;
|
||||||
|
|
||||||
|
--main-bg: white;
|
||||||
|
--main-fg: black;
|
||||||
|
--input-bg: white;
|
||||||
|
--input-border: #333;
|
||||||
|
--input-fg: black;
|
||||||
|
|
||||||
|
--newsitem-bg: transparent;
|
||||||
|
--newsitem-border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkmodeon {
|
||||||
|
--primary-bg: #013b68;
|
||||||
|
--primary-fg: white;
|
||||||
|
--primary-fg-url: #FFC7C7;
|
||||||
|
--primary-light-bg: #28518B;
|
||||||
|
--primary-light-fg: white;
|
||||||
|
--primary-dark-bg: #002f6c;
|
||||||
|
--primary-dark-fg: white;
|
||||||
|
|
||||||
|
--secondary-bg: #e05e00;
|
||||||
|
--secondary-fg: black;
|
||||||
|
--secondary-light-bg: #ffad42;
|
||||||
|
--secondary-light-fg: black;
|
||||||
|
--secondary-dark-bg: #e05e00;
|
||||||
|
--secondary-dark-fg: white;
|
||||||
|
--secondary-darker-fg: #fe791b;
|
||||||
|
|
||||||
|
--table-fg: #333;
|
||||||
|
--border: #343536;
|
||||||
|
--border-fg: #d7dadc;;
|
||||||
|
--border-fg-url: #e05e00;
|
||||||
|
--title-fg: #808080;
|
||||||
|
--meta-fg: hsl(0, 0%, 55%);
|
||||||
|
--meta-light-fg: #999999;
|
||||||
|
|
||||||
|
--main-bg: black;
|
||||||
|
--main-fg: #d7dadc;
|
||||||
|
--input-bg: #272729;
|
||||||
|
--input-border: #343536;
|
||||||
|
--input-fg: white;
|
||||||
|
|
||||||
|
--newsitem-bg: #1a1a1b;
|
||||||
|
--newsitem-border: 1px solid #343536;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
$primary-bg: #01579b;
|
$primary-bg: #01579b;
|
||||||
$primary-fg: white;
|
$primary-fg: white;
|
||||||
|
|
|
||||||
|
|
@ -38,3 +38,111 @@
|
||||||
@import 'pages';
|
@import 'pages';
|
||||||
@import 'articles';
|
@import 'articles';
|
||||||
@import 'staff';
|
@import 'staff';
|
||||||
|
|
||||||
|
|
||||||
|
.date-selector-wrapper {
|
||||||
|
width: 200px;
|
||||||
|
padding: 3px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 1px 1px 10px 1px #5c5c5c;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
/* user-select: none; */
|
||||||
|
}
|
||||||
|
.cal-header, .cal-row {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.cal-cell, .cal-nav {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.cal-day-names {
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
.cal-day-names .cal-cell {
|
||||||
|
cursor: default;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.cal-cell-prev, .cal-cell-next {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.cal-months .cal-row, .cal-years .cal-row {
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
.cal-nav-prev, .cal-nav-next {
|
||||||
|
flex: 0.15;
|
||||||
|
}
|
||||||
|
.cal-nav-current {
|
||||||
|
flex: 0.75;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.cal-months .cal-cell, .cal-years .cal-cell {
|
||||||
|
flex: 0.25;
|
||||||
|
}
|
||||||
|
.cal-days .cal-cell {
|
||||||
|
flex: 0.143;
|
||||||
|
}
|
||||||
|
.cal-value {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #286090;
|
||||||
|
}
|
||||||
|
.cal-cell:hover, .cal-nav:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
.cal-value:hover {
|
||||||
|
background-color: #204d74;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* time footer */
|
||||||
|
.cal-time {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: 27px;
|
||||||
|
line-height: 27px;
|
||||||
|
}
|
||||||
|
.cal-time-label, .cal-time-value {
|
||||||
|
flex: 0.12;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.cal-time-slider {
|
||||||
|
flex: 0.77;
|
||||||
|
background-image: linear-gradient(to right, #d1d8dd, #d1d8dd);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 1px;
|
||||||
|
background-position: left 50%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.cal-time-slider input {
|
||||||
|
width: 100%;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 100%;
|
||||||
|
outline: 0;
|
||||||
|
user-select: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-block__content,
|
||||||
|
.ce-toolbar__content { max-width:calc(100% - 120px) !important; }
|
||||||
|
.cdx-block { max-width: 100% !important; }
|
||||||
|
|
||||||
|
.codex-editor {
|
||||||
|
border: 1px solid var(--input-border);
|
||||||
|
background: var(--input-bg);
|
||||||
|
color: var(--input-fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.codex-editor:hover,
|
||||||
|
.codex-editor:active {
|
||||||
|
border-color: var(--secondary-bg);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
|
|
||||||
article.editarticle {
|
article.editarticle {
|
||||||
text-align: center;
|
|
||||||
background: white;
|
background: white;
|
||||||
padding: 0 0 20px;
|
padding: 0 0 20px;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: $secondary-bg;
|
background: $secondary-bg;
|
||||||
|
|
||||||
|
|
|
||||||
950
app/admin/dtsel.js
Normal file
950
app/admin/dtsel.js
Normal file
|
|
@ -0,0 +1,950 @@
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var BODYTYPES = ["DAYS", "MONTHS", "YEARS"];
|
||||||
|
|
||||||
|
/** @typedef {Object.<string, Function[]>} Handlers */
|
||||||
|
/** @typedef {function(String, Function): null} AddHandler */
|
||||||
|
/** @typedef {("DAYS"|"MONTHS"|"YEARS")} BodyType */
|
||||||
|
/** @typedef {string|number} StringNum */
|
||||||
|
/** @typedef {Object.<string, StringNum>} StringNumObj */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The local state
|
||||||
|
* @typedef {Object} InstanceState
|
||||||
|
* @property {Date} value
|
||||||
|
* @property {Number} year
|
||||||
|
* @property {Number} month
|
||||||
|
* @property {Number} day
|
||||||
|
* @property {Number} time
|
||||||
|
* @property {Number} hours
|
||||||
|
* @property {Number} minutes
|
||||||
|
* @property {Number} seconds
|
||||||
|
* @property {BodyType} bodyType
|
||||||
|
* @property {Boolean} visible
|
||||||
|
* @property {Number} cancelBlur
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} Config
|
||||||
|
* @property {String} dateFormat
|
||||||
|
* @property {String} timeFormat
|
||||||
|
* @property {Boolean} showDate
|
||||||
|
* @property {Boolean} showTime
|
||||||
|
* @property {Boolean} showSeconds
|
||||||
|
* @property {Number} paddingX
|
||||||
|
* @property {Number} paddingY
|
||||||
|
* @property {BodyType} defaultView
|
||||||
|
* @property {"TOP"|"BOTTOM"} direction
|
||||||
|
* @property {Array} months
|
||||||
|
* @property {Array} monthsShort
|
||||||
|
* @property {Array} weekdaysShort
|
||||||
|
* @property {Array} timeDescr
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @class
|
||||||
|
* @param {HTMLElement} elem
|
||||||
|
* @param {Config} config
|
||||||
|
*/
|
||||||
|
function DTS(elem, config) {
|
||||||
|
var config = config || {};
|
||||||
|
|
||||||
|
/** @type {Config} */
|
||||||
|
var defaultConfig = {
|
||||||
|
defaultView: BODYTYPES[0],
|
||||||
|
dateFormat: "yyyy-mm-dd",
|
||||||
|
timeFormat: "HH:MM:SS",
|
||||||
|
showDate: true,
|
||||||
|
showTime: false,
|
||||||
|
showSeconds: true,
|
||||||
|
paddingX: 5,
|
||||||
|
paddingY: 5,
|
||||||
|
direction: 'TOP',
|
||||||
|
months: [
|
||||||
|
"January", "February", "March", "April", "May", "June",
|
||||||
|
"July", "August", "September", "October", "November", "December"
|
||||||
|
],
|
||||||
|
monthsShort: [
|
||||||
|
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||||
|
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
|
||||||
|
],
|
||||||
|
weekdaysShort: [
|
||||||
|
"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"
|
||||||
|
],
|
||||||
|
timeDescr: [
|
||||||
|
"HH:", "MM:", "SS:"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!elem) {
|
||||||
|
throw TypeError("input element or selector required for contructor");
|
||||||
|
}
|
||||||
|
if (Object.getPrototypeOf(elem) === String.prototype) {
|
||||||
|
var _elem = document.querySelectorAll(elem);
|
||||||
|
if (!_elem[0]){
|
||||||
|
throw Error('"' + elem + '" not found.');
|
||||||
|
}
|
||||||
|
elem = _elem[0];
|
||||||
|
}
|
||||||
|
this.config = setDefaults(config, defaultConfig);
|
||||||
|
this.dateFormat = this.config.dateFormat;
|
||||||
|
this.timeFormat = this.config.timeFormat;
|
||||||
|
this.dateFormatRegEx = new RegExp("yyyy|yy|mm|dd", "gi");
|
||||||
|
this.timeFormatRegEx = new RegExp("hh|mm|ss|a", "gi");
|
||||||
|
this.inputElem = elem;
|
||||||
|
this.dtbox = null;
|
||||||
|
this.setup();
|
||||||
|
}
|
||||||
|
DTS.prototype.setup = function () {
|
||||||
|
var handler = this.inputElemHandler.bind(this);
|
||||||
|
this.inputElem.addEventListener("focus", handler, false)
|
||||||
|
this.inputElem.addEventListener("blur", handler, false);
|
||||||
|
}
|
||||||
|
DTS.prototype.inputElemHandler = function (e) {
|
||||||
|
if (e.type == "focus") {
|
||||||
|
if (!this.dtbox) {
|
||||||
|
this.dtbox = new DTBox(e.target, this);
|
||||||
|
}
|
||||||
|
this.dtbox.visible = true;
|
||||||
|
} else if (e.type == "blur" && this.dtbox && this.dtbox.visible) {
|
||||||
|
var self = this;
|
||||||
|
setTimeout(function () {
|
||||||
|
if (self.dtbox.cancelBlur > 0) {
|
||||||
|
self.dtbox.cancelBlur -= 1;
|
||||||
|
} else {
|
||||||
|
self.dtbox.visible = false;
|
||||||
|
self.inputElem.blur();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @class
|
||||||
|
* @param {HTMLElement} elem
|
||||||
|
* @param {DTS} settings
|
||||||
|
*/
|
||||||
|
function DTBox(elem, settings) {
|
||||||
|
/** @type {DTBox} */
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
/** @type {Handlers} */
|
||||||
|
var handlers = {};
|
||||||
|
|
||||||
|
/** @type {InstanceState} */
|
||||||
|
var localState = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} key
|
||||||
|
* @param {*} default_val
|
||||||
|
*/
|
||||||
|
function getterSetter(key, default_val) {
|
||||||
|
return {
|
||||||
|
get: function () {
|
||||||
|
var val = localState[key];
|
||||||
|
return val === undefined ? default_val : val;
|
||||||
|
},
|
||||||
|
set: function (val) {
|
||||||
|
var prevState = self.state;
|
||||||
|
var _handlers = handlers[key] || [];
|
||||||
|
localState[key] = val;
|
||||||
|
for (var i = 0; i < _handlers.length; i++) {
|
||||||
|
_handlers[i].bind(self)(localState, prevState);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/** @type {AddHandler} */
|
||||||
|
function addHandler(key, handlerFn) {
|
||||||
|
if (!key || !handlerFn) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!handlers[key]) {
|
||||||
|
handlers[key] = [];
|
||||||
|
}
|
||||||
|
handlers[key].push(handlerFn);
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.defineProperties(this, {
|
||||||
|
visible: getterSetter("visible", false),
|
||||||
|
bodyType: getterSetter("bodyType", settings.config.defaultView),
|
||||||
|
value: getterSetter("value"),
|
||||||
|
year: getterSetter("year", 0),
|
||||||
|
month: getterSetter("month", 0),
|
||||||
|
day: getterSetter("day", 0),
|
||||||
|
hours: getterSetter("hours", 0),
|
||||||
|
minutes: getterSetter("minutes", 0),
|
||||||
|
seconds: getterSetter("seconds", 0),
|
||||||
|
cancelBlur: getterSetter("cancelBlur", 0),
|
||||||
|
addHandler: {value: addHandler},
|
||||||
|
month_long: {
|
||||||
|
get: function () {
|
||||||
|
return self.settings.config.months[self.month];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
month_short: {
|
||||||
|
get: function () {
|
||||||
|
return self.settings.config.monthsShort[self.month]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
get: function () {
|
||||||
|
return Object.assign({}, localState);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
get: function() {
|
||||||
|
var hours = self.hours * 60 * 60 * 1000;
|
||||||
|
var minutes = self.minutes * 60 * 1000;
|
||||||
|
var seconds = self.seconds * 1000;
|
||||||
|
return hours + minutes + seconds;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.el = {};
|
||||||
|
this.settings = settings;
|
||||||
|
this.elem = elem;
|
||||||
|
this.setup();
|
||||||
|
}
|
||||||
|
DTBox.prototype.setup = function () {
|
||||||
|
Object.defineProperties(this.el, {
|
||||||
|
wrapper: { value: null, configurable: true },
|
||||||
|
header: { value: null, configurable: true },
|
||||||
|
body: { value: null, configurable: true },
|
||||||
|
footer: { value: null, configurable: true }
|
||||||
|
});
|
||||||
|
this.setupWrapper();
|
||||||
|
if (this.settings.config.showDate) {
|
||||||
|
this.setupHeader();
|
||||||
|
this.setupBody();
|
||||||
|
}
|
||||||
|
if (this.settings.config.showTime) {
|
||||||
|
this.setupFooter();
|
||||||
|
}
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
this.addHandler("visible", function (state, prevState) {
|
||||||
|
if (state.visible && !prevState.visible){
|
||||||
|
document.body.appendChild(this.el.wrapper);
|
||||||
|
|
||||||
|
var parts = self.elem.value.split(/\s*,\s*/);
|
||||||
|
var startDate = undefined;
|
||||||
|
var startTime = 0;
|
||||||
|
if (self.settings.config.showDate) {
|
||||||
|
startDate = parseDate(parts[0], self.settings);
|
||||||
|
}
|
||||||
|
if (self.settings.config.showTime) {
|
||||||
|
startTime = parseTime(parts[parts.length-1], self.settings);
|
||||||
|
startTime = startTime || 0;
|
||||||
|
}
|
||||||
|
if (!(startDate && startDate.getTime())) {
|
||||||
|
startDate = new Date();
|
||||||
|
startDate = new Date(
|
||||||
|
startDate.getFullYear(),
|
||||||
|
startDate.getMonth(),
|
||||||
|
startDate.getDate()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
var value = new Date(startDate.getTime() + startTime);
|
||||||
|
self.value = value;
|
||||||
|
self.year = value.getFullYear();
|
||||||
|
self.month = value.getMonth();
|
||||||
|
self.day = value.getDate();
|
||||||
|
self.hours = value.getHours();
|
||||||
|
self.minutes = value.getMinutes();
|
||||||
|
self.seconds = value.getSeconds();
|
||||||
|
|
||||||
|
if (self.settings.config.showDate) {
|
||||||
|
self.setHeaderContent();
|
||||||
|
self.setBodyContent();
|
||||||
|
}
|
||||||
|
if (self.settings.config.showTime) {
|
||||||
|
self.setFooterContent();
|
||||||
|
}
|
||||||
|
} else if (!state.visible && prevState.visible) {
|
||||||
|
document.body.removeChild(this.el.wrapper);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
DTBox.prototype.setupWrapper = function () {
|
||||||
|
if (!this.el.wrapper) {
|
||||||
|
var el = document.createElement("div");
|
||||||
|
el.classList.add("date-selector-wrapper");
|
||||||
|
Object.defineProperty(this.el, "wrapper", { value: el });
|
||||||
|
}
|
||||||
|
var self = this;
|
||||||
|
var htmlRoot = document.getElementsByTagName('html')[0];
|
||||||
|
function setPosition(e){
|
||||||
|
var minTopSpace = 300;
|
||||||
|
var box = getOffset(self.elem);
|
||||||
|
var config = self.settings.config;
|
||||||
|
var paddingY = config.paddingY || 5;
|
||||||
|
var paddingX = config.paddingX || 5;
|
||||||
|
var top = box.top + self.elem.offsetHeight + paddingY;
|
||||||
|
var left = box.left + paddingX;
|
||||||
|
var bottom = htmlRoot.clientHeight - box.top + paddingY;
|
||||||
|
|
||||||
|
self.el.wrapper.style.left = `${left}px`;
|
||||||
|
if (box.top > minTopSpace && config.direction != 'BOTTOM') {
|
||||||
|
self.el.wrapper.style.bottom = `${bottom}px`;
|
||||||
|
self.el.wrapper.style.top = '';
|
||||||
|
} else {
|
||||||
|
self.el.wrapper.style.top = `${top}px`;
|
||||||
|
self.el.wrapper.style.bottom = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handler(e) {
|
||||||
|
self.cancelBlur += 1;
|
||||||
|
setTimeout(function(){
|
||||||
|
self.elem.focus();
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
setPosition();
|
||||||
|
this.setPosition = setPosition;
|
||||||
|
this.el.wrapper.addEventListener("mousedown", handler, false);
|
||||||
|
this.el.wrapper.addEventListener("touchstart", handler, false);
|
||||||
|
window.addEventListener('resize', this.setPosition);
|
||||||
|
}
|
||||||
|
DTBox.prototype.setupHeader = function () {
|
||||||
|
if (!this.el.header) {
|
||||||
|
var row = document.createElement("div");
|
||||||
|
var classes = ["cal-nav-prev", "cal-nav-current", "cal-nav-next"];
|
||||||
|
row.classList.add("cal-header");
|
||||||
|
for (var i = 0; i < 3; i++) {
|
||||||
|
var cell = document.createElement("div");
|
||||||
|
cell.classList.add("cal-nav", classes[i]);
|
||||||
|
cell.onclick = this.onHeaderChange.bind(this);
|
||||||
|
row.appendChild(cell);
|
||||||
|
}
|
||||||
|
row.children[0].innerHTML = "<";
|
||||||
|
row.children[2].innerHTML = ">";
|
||||||
|
Object.defineProperty(this.el, "header", { value: row });
|
||||||
|
tryAppendChild(row, this.el.wrapper);
|
||||||
|
}
|
||||||
|
this.setHeaderContent();
|
||||||
|
}
|
||||||
|
DTBox.prototype.setHeaderContent = function () {
|
||||||
|
var content = this.year;
|
||||||
|
if ("DAYS" == this.bodyType) {
|
||||||
|
content = this.month_long + " " + content;
|
||||||
|
} else if ("YEARS" == this.bodyType) {
|
||||||
|
var start = this.year + 10 - (this.year % 10);
|
||||||
|
content = start - 10 + "-" + (start - 1);
|
||||||
|
}
|
||||||
|
this.el.header.children[1].innerText = content;
|
||||||
|
}
|
||||||
|
DTBox.prototype.setupBody = function () {
|
||||||
|
if (!this.el.body) {
|
||||||
|
var el = document.createElement("div");
|
||||||
|
el.classList.add("cal-body");
|
||||||
|
Object.defineProperty(this.el, "body", { value: el });
|
||||||
|
tryAppendChild(el, this.el.wrapper);
|
||||||
|
}
|
||||||
|
var toAppend = null;
|
||||||
|
function makeGrid(rows, cols, className, firstRowClass, clickHandler) {
|
||||||
|
var grid = document.createElement("div");
|
||||||
|
grid.classList.add(className);
|
||||||
|
for (var i = 1; i < rows + 1; i++) {
|
||||||
|
var row = document.createElement("div");
|
||||||
|
row.classList.add("cal-row", "cal-row-" + i);
|
||||||
|
if (i == 1 && firstRowClass) {
|
||||||
|
row.classList.add(firstRowClass);
|
||||||
|
}
|
||||||
|
for (var j = 1; j < cols + 1; j++) {
|
||||||
|
var col = document.createElement("div");
|
||||||
|
col.classList.add("cal-cell", "cal-col-" + j);
|
||||||
|
col.onclick = clickHandler;
|
||||||
|
row.appendChild(col);
|
||||||
|
}
|
||||||
|
grid.appendChild(row);
|
||||||
|
}
|
||||||
|
return grid;
|
||||||
|
}
|
||||||
|
if ("DAYS" == this.bodyType) {
|
||||||
|
toAppend = this.el.body.calDays;
|
||||||
|
if (!toAppend) {
|
||||||
|
toAppend = makeGrid(7, 7, "cal-days", "cal-day-names", this.onDateSelected.bind(this));
|
||||||
|
for (var i = 0; i < 7; i++) {
|
||||||
|
var cell = toAppend.children[0].children[i];
|
||||||
|
cell.innerText = this.settings.config.weekdaysShort[i];
|
||||||
|
cell.onclick = null;
|
||||||
|
}
|
||||||
|
this.el.body.calDays = toAppend;
|
||||||
|
}
|
||||||
|
} else if ("MONTHS" == this.bodyType) {
|
||||||
|
toAppend = this.el.body.calMonths;
|
||||||
|
if (!toAppend) {
|
||||||
|
toAppend = makeGrid(3, 4, "cal-months", null, this.onMonthSelected.bind(this));
|
||||||
|
for (var i = 0; i < 3; i++) {
|
||||||
|
for (var j = 0; j < 4; j++) {
|
||||||
|
var monthShort = this.settings.config.monthsShort[4 * i + j];
|
||||||
|
toAppend.children[i].children[j].innerText = monthShort;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.el.body.calMonths = toAppend;
|
||||||
|
}
|
||||||
|
} else if ("YEARS" == this.bodyType) {
|
||||||
|
toAppend = this.el.body.calYears;
|
||||||
|
if (!toAppend) {
|
||||||
|
toAppend = makeGrid(3, 4, "cal-years", null, this.onYearSelected.bind(this));
|
||||||
|
this.el.body.calYears = toAppend;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
empty(this.el.body);
|
||||||
|
tryAppendChild(toAppend, this.el.body);
|
||||||
|
this.setBodyContent();
|
||||||
|
}
|
||||||
|
DTBox.prototype.setBodyContent = function () {
|
||||||
|
var grid = this.el.body.children[0];
|
||||||
|
var classes = ["cal-cell-prev", "cal-cell-next", "cal-value"];
|
||||||
|
if ("DAYS" == this.bodyType) {
|
||||||
|
var oneDayMilliSecs = 24 * 60 * 60 * 1000;
|
||||||
|
var start = new Date(this.year, this.month, 1);
|
||||||
|
var adjusted = new Date(start.getTime() - oneDayMilliSecs * start.getDay());
|
||||||
|
|
||||||
|
grid.children[6].style.display = "";
|
||||||
|
for (var i = 1; i < 7; i++) {
|
||||||
|
for (var j = 0; j < 7; j++) {
|
||||||
|
var cell = grid.children[i].children[j];
|
||||||
|
var month = adjusted.getMonth();
|
||||||
|
var date = adjusted.getDate();
|
||||||
|
|
||||||
|
cell.innerText = date;
|
||||||
|
cell.classList.remove(classes[0], classes[1], classes[2]);
|
||||||
|
if (month != this.month) {
|
||||||
|
if (i == 6 && j == 0) {
|
||||||
|
grid.children[6].style.display = "none";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
cell.classList.add(month < this.month ? classes[0] : classes[1]);
|
||||||
|
} else if (isEqualDate(adjusted, this.value)){
|
||||||
|
cell.classList.add(classes[2]);
|
||||||
|
}
|
||||||
|
adjusted = new Date(adjusted.getTime() + oneDayMilliSecs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if ("YEARS" == this.bodyType) {
|
||||||
|
var year = this.year - (this.year % 10) - 1;
|
||||||
|
for (i = 0; i < 3; i++) {
|
||||||
|
for (j = 0; j < 4; j++) {
|
||||||
|
grid.children[i].children[j].innerText = year;
|
||||||
|
year += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
grid.children[0].children[0].classList.add(classes[0]);
|
||||||
|
grid.children[2].children[3].classList.add(classes[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {Event} e */
|
||||||
|
DTBox.prototype.onTimeChange = function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (e.type == 'mousedown') {
|
||||||
|
this.cancelBlur += 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (e.type == 'mouseup') {
|
||||||
|
var self = this;
|
||||||
|
setTimeout(function(){
|
||||||
|
self.elem.focus();
|
||||||
|
}, 50);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var el = e.target;
|
||||||
|
this[el.name] = parseInt(el.value) || 0;
|
||||||
|
this.setupFooter();
|
||||||
|
this.setInputValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
DTBox.prototype.setupFooter = function() {
|
||||||
|
if (!this.el.footer) {
|
||||||
|
var footer = document.createElement("div");
|
||||||
|
var handler = this.onTimeChange.bind(this);
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
function makeRow(label, name, range, changeHandler) {
|
||||||
|
var row = document.createElement("div");
|
||||||
|
row.classList.add('cal-time');
|
||||||
|
|
||||||
|
var labelCol = row.appendChild(document.createElement("div"));
|
||||||
|
labelCol.classList.add('cal-time-label');
|
||||||
|
labelCol.innerText = label;
|
||||||
|
|
||||||
|
var valueCol = row.appendChild(document.createElement("div"));
|
||||||
|
valueCol.classList.add('cal-time-value');
|
||||||
|
valueCol.innerText = '00';
|
||||||
|
|
||||||
|
var inputCol = row.appendChild(document.createElement("div"));
|
||||||
|
var slider = inputCol.appendChild(document.createElement("input"));
|
||||||
|
Object.assign(slider, {step:1, min:0, max:range, name:name, type:'range'});
|
||||||
|
Object.defineProperty(footer, name, {value: slider});
|
||||||
|
inputCol.classList.add('cal-time-slider');
|
||||||
|
slider.onchange = changeHandler;
|
||||||
|
slider.oninput = changeHandler;
|
||||||
|
slider.onmousedown = changeHandler;
|
||||||
|
slider.onmouseup = changeHandler;
|
||||||
|
self[name] = self[name] || parseInt(slider.value) || 0;
|
||||||
|
footer.appendChild(row)
|
||||||
|
}
|
||||||
|
makeRow(this.settings.config.timeDescr[0], 'hours', 23, handler);
|
||||||
|
makeRow(this.settings.config.timeDescr[1], 'minutes', 59, handler);
|
||||||
|
if (this.settings.config.showSeconds) {
|
||||||
|
makeRow(this.settings.config.timeDescr[2], 'seconds', 59, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.classList.add("cal-footer");
|
||||||
|
Object.defineProperty(this.el, "footer", { value: footer });
|
||||||
|
tryAppendChild(footer, this.el.wrapper);
|
||||||
|
}
|
||||||
|
this.setFooterContent();
|
||||||
|
}
|
||||||
|
|
||||||
|
DTBox.prototype.setFooterContent = function() {
|
||||||
|
if (this.el.footer) {
|
||||||
|
var footer = this.el.footer;
|
||||||
|
footer.hours.value = this.hours;
|
||||||
|
footer.children[0].children[1].innerText = padded(this.hours, 2);
|
||||||
|
footer.minutes.value = this.minutes;
|
||||||
|
footer.children[1].children[1].innerText = padded(this.minutes, 2);
|
||||||
|
if (this.settings.config.showSeconds) {
|
||||||
|
footer.seconds.value = this.seconds;
|
||||||
|
footer.children[2].children[1].innerText = padded(this.seconds, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
DTBox.prototype.setInputValue = function() {
|
||||||
|
var date = new Date(this.year, this.month, this.day);
|
||||||
|
var strings = [];
|
||||||
|
if (this.settings.config.showDate) {
|
||||||
|
strings.push(renderDate(date, this.settings));
|
||||||
|
}
|
||||||
|
if (this.settings.config.showTime) {
|
||||||
|
var joined = new Date(date.getTime() + this.time);
|
||||||
|
strings.push(renderTime(joined, this.settings));
|
||||||
|
}
|
||||||
|
this.elem.value = strings.join(', ');
|
||||||
|
}
|
||||||
|
|
||||||
|
DTBox.prototype.onDateSelected = function (e) {
|
||||||
|
var row = e.target.parentNode;
|
||||||
|
var date = parseInt(e.target.innerText);
|
||||||
|
if (!(row.nextSibling && row.nextSibling.nextSibling) && date < 8) {
|
||||||
|
this.month += 1;
|
||||||
|
} else if (!(row.previousSibling && row.previousSibling.previousSibling) && date > 7) {
|
||||||
|
this.month -= 1;
|
||||||
|
}
|
||||||
|
this.day = parseInt(e.target.innerText);
|
||||||
|
this.value = new Date(this.year, this.month, this.day);
|
||||||
|
this.setInputValue();
|
||||||
|
this.setHeaderContent();
|
||||||
|
this.setBodyContent();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {Event} e */
|
||||||
|
DTBox.prototype.onMonthSelected = function (e) {
|
||||||
|
var col = 0;
|
||||||
|
var row = 2;
|
||||||
|
var cell = e.target;
|
||||||
|
if (cell.parentNode.nextSibling){
|
||||||
|
row = cell.parentNode.previousSibling ? 1: 0;
|
||||||
|
}
|
||||||
|
if (cell.previousSibling) {
|
||||||
|
col = 3;
|
||||||
|
if (cell.nextSibling) {
|
||||||
|
col = cell.previousSibling.previousSibling ? 2 : 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.month = 4 * row + col;
|
||||||
|
this.bodyType = "DAYS";
|
||||||
|
this.setHeaderContent();
|
||||||
|
this.setupBody();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {Event} e */
|
||||||
|
DTBox.prototype.onYearSelected = function (e) {
|
||||||
|
this.year = parseInt(e.target.innerText);
|
||||||
|
this.bodyType = "MONTHS";
|
||||||
|
this.setHeaderContent();
|
||||||
|
this.setupBody();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {Event} e */
|
||||||
|
DTBox.prototype.onHeaderChange = function (e) {
|
||||||
|
var cell = e.target;
|
||||||
|
if (cell.previousSibling && cell.nextSibling) {
|
||||||
|
var idx = BODYTYPES.indexOf(this.bodyType);
|
||||||
|
if (idx < 0 || !BODYTYPES[idx + 1]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.bodyType = BODYTYPES[idx + 1];
|
||||||
|
this.setupBody();
|
||||||
|
} else {
|
||||||
|
var sign = cell.previousSibling ? 1 : -1;
|
||||||
|
switch (this.bodyType) {
|
||||||
|
case "DAYS":
|
||||||
|
this.month += sign * 1;
|
||||||
|
break;
|
||||||
|
case "MONTHS":
|
||||||
|
this.year += sign * 1;
|
||||||
|
break;
|
||||||
|
case "YEARS":
|
||||||
|
this.year += sign * 10;
|
||||||
|
}
|
||||||
|
if (this.month > 11 || this.month < 0) {
|
||||||
|
this.year += Math.floor(this.month / 11);
|
||||||
|
this.month = this.month > 11 ? 0 : 11;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setHeaderContent();
|
||||||
|
this.setBodyContent();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} elem
|
||||||
|
* @returns {{left:number, top:number}}
|
||||||
|
*/
|
||||||
|
function getOffset(elem) {
|
||||||
|
var box = elem.getBoundingClientRect();
|
||||||
|
var left = window.pageXOffset !== undefined ? window.pageXOffset :
|
||||||
|
(document.documentElement || document.body.parentNode || document.body).scrollLeft;
|
||||||
|
var top = window.pageYOffset !== undefined ? window.pageYOffset :
|
||||||
|
(document.documentElement || document.body.parentNode || document.body).scrollTop;
|
||||||
|
return { left: box.left + left, top: box.top + top };
|
||||||
|
}
|
||||||
|
function empty(e) {
|
||||||
|
for (; e.children.length; ) e.removeChild(e.children[0]);
|
||||||
|
}
|
||||||
|
function tryAppendChild(newChild, refNode) {
|
||||||
|
try {
|
||||||
|
refNode.appendChild(newChild);
|
||||||
|
return newChild;
|
||||||
|
} catch (e) {
|
||||||
|
console.trace(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @class */
|
||||||
|
function hookFuncs() {
|
||||||
|
/** @type {Handlers} */
|
||||||
|
this._funcs = {};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {string} key
|
||||||
|
* @param {Function} func
|
||||||
|
*/
|
||||||
|
hookFuncs.prototype.add = function(key, func){
|
||||||
|
if (!this._funcs[key]){
|
||||||
|
this._funcs[key] = [];
|
||||||
|
}
|
||||||
|
this._funcs[key].push(func)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {String} key
|
||||||
|
* @returns {Function[]} handlers
|
||||||
|
*/
|
||||||
|
hookFuncs.prototype.get = function(key){
|
||||||
|
return this._funcs[key] ? this._funcs[key] : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Array.<string>} arr
|
||||||
|
* @param {String} string
|
||||||
|
* @returns {Array.<string>} sorted string
|
||||||
|
*/
|
||||||
|
function sortByStringIndex(arr, string) {
|
||||||
|
return arr.sort(function(a, b){
|
||||||
|
var h = string.indexOf(a);
|
||||||
|
var l = string.indexOf(b);
|
||||||
|
var rank = 0;
|
||||||
|
if (h < l) {
|
||||||
|
rank = -1;
|
||||||
|
} else if (l < h) {
|
||||||
|
rank = 1;
|
||||||
|
} else if (a.length > b.length) {
|
||||||
|
rank = -1;
|
||||||
|
} else if (b.length > a.length) {
|
||||||
|
rank = 1;
|
||||||
|
}
|
||||||
|
return rank;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove keys from array that are not in format
|
||||||
|
* @param {string[]} keys
|
||||||
|
* @param {string} format
|
||||||
|
* @returns {string[]} new filtered array
|
||||||
|
*/
|
||||||
|
function filterFormatKeys(keys, format) {
|
||||||
|
var out = [];
|
||||||
|
var formatIdx = 0;
|
||||||
|
for (var i = 0; i<keys.length; i++) {
|
||||||
|
var key = keys[i];
|
||||||
|
if (format.slice(formatIdx).indexOf(key) > -1) {
|
||||||
|
formatIdx += key.length;
|
||||||
|
out.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @template {StringNumObj} FormatObj
|
||||||
|
* @param {string} value
|
||||||
|
* @param {string} format
|
||||||
|
* @param {FormatObj} formatObj
|
||||||
|
* @param {function(Object.<string, hookFuncs>): null} setHooks
|
||||||
|
* @returns {FormatObj} formatObj
|
||||||
|
*/
|
||||||
|
function parseData(value, format, formatObj, setHooks) {
|
||||||
|
var hooks = {
|
||||||
|
canSkip: new hookFuncs(),
|
||||||
|
updateValue: new hookFuncs(),
|
||||||
|
}
|
||||||
|
var keys = sortByStringIndex(Object.keys(formatObj), format);
|
||||||
|
var filterdKeys = filterFormatKeys(keys, format);
|
||||||
|
var vstart = 0; // value start
|
||||||
|
if (setHooks) {
|
||||||
|
setHooks(hooks);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < keys.length; i++) {
|
||||||
|
var key = keys[i];
|
||||||
|
var fstart = format.indexOf(key);
|
||||||
|
var _vstart = vstart; // next value start
|
||||||
|
var val = null;
|
||||||
|
var canSkip = false;
|
||||||
|
var funcs = hooks.canSkip.get(key);
|
||||||
|
|
||||||
|
vstart = vstart || fstart;
|
||||||
|
|
||||||
|
for (var j = 0; j < funcs.length; j++) {
|
||||||
|
if (funcs[j](formatObj)){
|
||||||
|
canSkip = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (fstart > -1 && !canSkip) {
|
||||||
|
var sep = null;
|
||||||
|
var stop = vstart + key.length;
|
||||||
|
var fnext = -1;
|
||||||
|
var nextKeyIdx = i + 1;
|
||||||
|
_vstart += key.length; // set next value start if current key is found
|
||||||
|
|
||||||
|
// get next format token used to determine separator
|
||||||
|
while (fnext == -1 && nextKeyIdx < keys.length){
|
||||||
|
var nextKey = keys[nextKeyIdx];
|
||||||
|
nextKeyIdx += 1;
|
||||||
|
if (filterdKeys.indexOf(nextKey) === -1) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
fnext = nextKey ? format.indexOf(nextKey) : -1; // next format start
|
||||||
|
}
|
||||||
|
if (fnext > -1){
|
||||||
|
sep = format.slice(stop, fnext);
|
||||||
|
if (sep) {
|
||||||
|
var _stop = value.slice(vstart).indexOf(sep);
|
||||||
|
if (_stop && _stop > -1){
|
||||||
|
stop = _stop + vstart;
|
||||||
|
_vstart = stop + sep.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
val = parseInt(value.slice(vstart, stop));
|
||||||
|
|
||||||
|
var funcs = hooks.updateValue.get(key);
|
||||||
|
for (var k = 0; k < funcs.length; k++) {
|
||||||
|
val = funcs[k](val, formatObj, vstart, stop);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
formatObj[key] = { index: vstart, value: val };
|
||||||
|
vstart = _vstart; // set next value start
|
||||||
|
}
|
||||||
|
return formatObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} value
|
||||||
|
* @param {DTS} settings
|
||||||
|
* @returns {Date} date object
|
||||||
|
*/
|
||||||
|
function parseDate(value, settings) {
|
||||||
|
/** @type {{yyyy:number=, yy:number=, mm:number=, dd:number=}} */
|
||||||
|
var formatObj = {yyyy:null, yy:null, mm:null, dd:null};
|
||||||
|
var format = ((settings.dateFormat) || '').toLowerCase();
|
||||||
|
if (!format) {
|
||||||
|
throw new TypeError('dateFormat not found (' + settings.dateFormat + ')');
|
||||||
|
}
|
||||||
|
var formatObj = parseData(value, format, formatObj, function(hooks){
|
||||||
|
hooks.canSkip.add("yy", function(data){
|
||||||
|
return data["yyyy"].value;
|
||||||
|
});
|
||||||
|
hooks.updateValue.add("yy", function(val){
|
||||||
|
return 100 * Math.floor(new Date().getFullYear() / 100) + val;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
var year = formatObj["yyyy"].value || formatObj["yy"].value;
|
||||||
|
var month = formatObj["mm"].value - 1;
|
||||||
|
var date = formatObj["dd"].value;
|
||||||
|
var result = new Date(year, month, date);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} value
|
||||||
|
* @param {DTS} settings
|
||||||
|
* @returns {Number} time in milliseconds <= (24 * 60 * 60 * 1000) - 1
|
||||||
|
*/
|
||||||
|
function parseTime(value, settings) {
|
||||||
|
var format = ((settings.timeFormat) || '').toLowerCase();
|
||||||
|
if (!format) {
|
||||||
|
throw new TypeError('timeFormat not found (' + settings.timeFormat + ')');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @type {{hh:number=, mm:number=, ss:number=, a:string=}} */
|
||||||
|
var formatObj = {hh:null, mm:null, ss:null, a:null};
|
||||||
|
var formatObj = parseData(value, format, formatObj, function(hooks){
|
||||||
|
hooks.updateValue.add("a", function(val, data, start, stop){
|
||||||
|
return value.slice(start, start + 2);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
var hours = formatObj["hh"].value;
|
||||||
|
var minutes = formatObj["mm"].value;
|
||||||
|
var seconds = formatObj["ss"].value;
|
||||||
|
var am_pm = formatObj["a"].value;
|
||||||
|
var am_pm_lower = am_pm ? am_pm.toLowerCase() : am_pm;
|
||||||
|
if (am_pm && ["am", "pm"].indexOf(am_pm_lower) > -1){
|
||||||
|
if (am_pm_lower == 'am' && hours == 12){
|
||||||
|
hours = 0;
|
||||||
|
} else if (am_pm_lower == 'pm') {
|
||||||
|
hours += 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var time = hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000;
|
||||||
|
return time;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Date} value
|
||||||
|
* @param {DTS} settings
|
||||||
|
* @returns {String} date string
|
||||||
|
*/
|
||||||
|
function renderDate(value, settings) {
|
||||||
|
var format = settings.dateFormat.toLowerCase();
|
||||||
|
var date = value.getDate();
|
||||||
|
var month = value.getMonth() + 1;
|
||||||
|
var year = value.getFullYear();
|
||||||
|
var yearShort = year % 100;
|
||||||
|
var formatObj = {
|
||||||
|
dd: date < 10 ? "0" + date : date,
|
||||||
|
mm: month < 10 ? "0" + month : month,
|
||||||
|
yyyy: year,
|
||||||
|
yy: yearShort < 10 ? "0" + yearShort : yearShort
|
||||||
|
};
|
||||||
|
var str = format.replace(settings.dateFormatRegEx, function (found) {
|
||||||
|
return formatObj[found];
|
||||||
|
});
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Date} value
|
||||||
|
* @param {DTS} settings
|
||||||
|
* @returns {String} date string
|
||||||
|
*/
|
||||||
|
function renderTime(value, settings) {
|
||||||
|
var Format = settings.timeFormat;
|
||||||
|
var format = Format.toLowerCase();
|
||||||
|
var hours = value.getHours();
|
||||||
|
var minutes = value.getMinutes();
|
||||||
|
var seconds = value.getSeconds();
|
||||||
|
var am_pm = null;
|
||||||
|
var hh_am_pm = null;
|
||||||
|
if (format.indexOf('a') > -1) {
|
||||||
|
am_pm = hours >= 12 ? 'pm' : 'am';
|
||||||
|
am_pm = Format.indexOf('A') > -1 ? am_pm.toUpperCase() : am_pm;
|
||||||
|
hh_am_pm = hours == 0 ? '12' : (hours > 12 ? hours%12 : hours);
|
||||||
|
}
|
||||||
|
var formatObj = {
|
||||||
|
hh: am_pm ? hh_am_pm : (hours < 10 ? "0" + hours : hours),
|
||||||
|
mm: minutes < 10 ? "0" + minutes : minutes,
|
||||||
|
ss: seconds < 10 ? "0" + seconds : seconds,
|
||||||
|
a: am_pm,
|
||||||
|
};
|
||||||
|
var str = format.replace(settings.timeFormatRegEx, function (found) {
|
||||||
|
return formatObj[found];
|
||||||
|
});
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* checks if two dates are equal
|
||||||
|
* @param {Date} date1
|
||||||
|
* @param {Date} date2
|
||||||
|
* @returns {Boolean} true or false
|
||||||
|
*/
|
||||||
|
function isEqualDate(date1, date2) {
|
||||||
|
if (!(date1 && date2)) return false;
|
||||||
|
return (date1.getFullYear() == date2.getFullYear() &&
|
||||||
|
date1.getMonth() == date2.getMonth() &&
|
||||||
|
date1.getDate() == date2.getDate());
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Number} val
|
||||||
|
* @param {Number} pad
|
||||||
|
* @param {*} default_val
|
||||||
|
* @returns {String} padded string
|
||||||
|
*/
|
||||||
|
function padded(val, pad, default_val) {
|
||||||
|
var default_val = default_val || 0;
|
||||||
|
var valStr = '' + (parseInt(val) || default_val);
|
||||||
|
var diff = Math.max(pad, valStr.length) - valStr.length;
|
||||||
|
return ('' + default_val).repeat(diff) + valStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @template X
|
||||||
|
* @template Y
|
||||||
|
* @param {X} obj
|
||||||
|
* @param {Y} objDefaults
|
||||||
|
* @returns {X|Y} merged object
|
||||||
|
*/
|
||||||
|
function setDefaults(obj, objDefaults) {
|
||||||
|
var keys = Object.keys(objDefaults);
|
||||||
|
for (var i=0; i<keys.length; i++) {
|
||||||
|
var key = keys[i];
|
||||||
|
if (!Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||||
|
obj[key] = objDefaults[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.dtsel = Object.create({},{
|
||||||
|
DTS: { value: DTS },
|
||||||
|
DTObj: { value: DTBox },
|
||||||
|
fn: {
|
||||||
|
value: Object.defineProperties({}, {
|
||||||
|
empty: { value: empty },
|
||||||
|
appendAfter: {
|
||||||
|
value: function (newElem, refNode) {
|
||||||
|
refNode.parentNode.insertBefore(newElem, refNode.nextSibling);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
getOffset: { value: getOffset },
|
||||||
|
parseDate: { value: parseDate },
|
||||||
|
renderDate: { value: renderDate },
|
||||||
|
parseTime: {value: parseTime},
|
||||||
|
renderTime: {value: renderTime},
|
||||||
|
setDefaults: {value: setDefaults},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
@ -1,12 +1,9 @@
|
||||||
const Authentication = require('../authentication')
|
require('./dtsel')
|
||||||
const FileUpload = require('../widgets/fileupload')
|
const FileUpload = require('../widgets/fileupload')
|
||||||
const Staff = require('../api/staff')
|
|
||||||
const Froala = require('./froala')
|
|
||||||
const Page = require('../api/page')
|
const Page = require('../api/page')
|
||||||
const File = require('../api/file')
|
|
||||||
const Fileinfo = require('../widgets/fileinfo')
|
const Fileinfo = require('../widgets/fileinfo')
|
||||||
const Article = require('../api/article')
|
|
||||||
const common = require('../api/common')
|
const common = require('../api/common')
|
||||||
|
const Editor = require('./editor')
|
||||||
|
|
||||||
const EditArticle = {
|
const EditArticle = {
|
||||||
|
|
||||||
|
|
@ -24,6 +21,8 @@ const EditArticle = {
|
||||||
this.addPageTree('', Page.Tree)
|
this.addPageTree('', Page.Tree)
|
||||||
this.newBanner = null
|
this.newBanner = null
|
||||||
this.newMedia = null
|
this.newMedia = null
|
||||||
|
this.dateInstance = null
|
||||||
|
this.editor = null
|
||||||
|
|
||||||
this.fetchArticle(vnode)
|
this.fetchArticle(vnode)
|
||||||
},
|
},
|
||||||
|
|
@ -86,6 +85,7 @@ const EditArticle = {
|
||||||
},
|
},
|
||||||
|
|
||||||
updateValue: function(name, e) {
|
updateValue: function(name, e) {
|
||||||
|
console.log(name, e.currentTarget.value)
|
||||||
if (name === 'is_featured') {
|
if (name === 'is_featured') {
|
||||||
this.data.article[name] = e.currentTarget.checked
|
this.data.article[name] = e.currentTarget.checked
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -287,20 +287,22 @@ const EditArticle = {
|
||||||
oninput: this.updateValue.bind(this, 'path'),
|
oninput: this.updateValue.bind(this, 'path'),
|
||||||
}),
|
}),
|
||||||
m('label', 'Description'),
|
m('label', 'Description'),
|
||||||
(
|
m(Editor, {
|
||||||
this.loadedFroala ?
|
|
||||||
m('div', {
|
}),
|
||||||
oncreate: (div) => {
|
|
||||||
console.log(div.dom)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
: null
|
|
||||||
),
|
|
||||||
m('label', 'Published at'),
|
m('label', 'Published at'),
|
||||||
m('input', {
|
m('input', {
|
||||||
type: 'datetime-local',
|
type: 'text',
|
||||||
value: this.data.article.publish_at,
|
oncreate: (div) => {
|
||||||
oninput: this.updateValue.bind(this, 'publish_at'),
|
if (!this.dateInstance) {
|
||||||
|
this.dateInstance = new dtsel.DTS(div.dom, {
|
||||||
|
dateFormat: 'yyyy-mm-dd',
|
||||||
|
timeFormat: 'HH:MM:SS',
|
||||||
|
showTime: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: this.data.article.publish_at.toISOString().replace('T', ', ').split('.')[0],
|
||||||
}),
|
}),
|
||||||
m('label', 'Published by'),
|
m('label', 'Published by'),
|
||||||
m('select', {
|
m('select', {
|
||||||
|
|
|
||||||
37
app/admin/editor.js
Normal file
37
app/admin/editor.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
const Editor = {
|
||||||
|
oninit: function(vnode) {
|
||||||
|
this.editor = null
|
||||||
|
},
|
||||||
|
|
||||||
|
oncreate: function(vnode) {
|
||||||
|
this.editor = new window.EditorJS({
|
||||||
|
holder: vnode.dom,
|
||||||
|
inlineToolbar: ['link', 'bold', 'inlineCode', 'italic'],
|
||||||
|
tools: {
|
||||||
|
inlineCode: {
|
||||||
|
class: window.InlineCode, //<span class="inline-code"></span>
|
||||||
|
shortcut: 'CMD+SHIFT+M',
|
||||||
|
},
|
||||||
|
header: window.Header,
|
||||||
|
image: window.SimpleImage,
|
||||||
|
quote: window.Quote,
|
||||||
|
code: window.CodeTool,
|
||||||
|
list: {
|
||||||
|
class: window.List,
|
||||||
|
inlineToolbar: true,
|
||||||
|
config: {
|
||||||
|
defaultStyle: 'unordered'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delimiter: window.Delimiter,
|
||||||
|
htmlraw: window.RawTool,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
view: function(vnode) {
|
||||||
|
return m('div')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Editor
|
||||||
|
|
@ -197,7 +197,7 @@ input[type="reset"]::-moz-focus-inner {
|
||||||
border: 0 none !important;
|
border: 0 none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import 'froala';
|
@import 'editor';
|
||||||
|
|
||||||
@import 'menu/menu';
|
@import 'menu/menu';
|
||||||
@import 'footer/footer';
|
@import 'footer/footer';
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
.fr-view {
|
.ce-block__content {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
.clearfix::after {
|
.clearfix::after {
|
||||||
|
|
@ -16,7 +16,8 @@
|
||||||
"dev": "npm-watch dev:server",
|
"dev": "npm-watch dev:server",
|
||||||
"watch:sass:public": "sass --watch app/app.scss public/assets/app.css",
|
"watch:sass:public": "sass --watch app/app.scss public/assets/app.css",
|
||||||
"watch:sass:admin": "sass --watch app/admin.scss public/assets/admin.css",
|
"watch:sass:admin": "sass --watch app/admin.scss public/assets/admin.css",
|
||||||
"prod": "npm run build && npm start"
|
"prod": "npm run build && npm start",
|
||||||
|
"temp": "asbundle"
|
||||||
},
|
},
|
||||||
"watch": {
|
"watch": {
|
||||||
"dev:server": {
|
"dev:server": {
|
||||||
|
|
@ -31,7 +32,7 @@
|
||||||
"patterns": [
|
"patterns": [
|
||||||
"app/*"
|
"app/*"
|
||||||
],
|
],
|
||||||
"extensions": "js,mjs",
|
"extensions": "js,mjs,scss",
|
||||||
"quiet": true,
|
"quiet": true,
|
||||||
"inherit": true
|
"inherit": true
|
||||||
}
|
}
|
||||||
|
|
@ -47,6 +48,7 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/nfp-projects/nfp_moe",
|
"homepage": "https://github.com/nfp-projects/nfp_moe",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@editorjs/quote": "^2.4.0",
|
||||||
"bencode": "^2.0.3",
|
"bencode": "^2.0.3",
|
||||||
"dot": "^2.0.0-beta.1",
|
"dot": "^2.0.0-beta.1",
|
||||||
"flaska": "^1.3.0",
|
"flaska": "^1.3.0",
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue