From 0b914fcdb5ffe1b6cb062d6ddc8894bb98272770 Mon Sep 17 00:00:00 2001 From: Ro Date: Fri, 4 Sep 2020 13:40:35 -0700 Subject: [PATCH] open graph meta edits, logout made public, improved notifications --- brain/data/Render.js | 13 +++- brain/routes/dash/index.js | 9 ++- brain/views/frame.pug | 12 +++- brain/views/partials/dash-nav.pug | 3 + public/assets/css/dash.css | 25 ++++++-- public/assets/scripts/dash.min.js | 99 ++++++++++++++++++++----------- 6 files changed, 113 insertions(+), 48 deletions(-) diff --git a/brain/data/Render.js b/brain/data/Render.js index 2e53947..3c3116f 100644 --- a/brain/data/Render.js +++ b/brain/data/Render.js @@ -103,9 +103,12 @@ export default class Render { } buffed = new StringUtils().decodeHTML(buffed); let html = md.render(buffed, { html: true, xhtmlOut: true }); + //add open graph meta variables let file = pug.renderFile(template, { title: page.metadata.title, default_bg: page.metadata.feature, + image: page.metadata.feature, + keywords: page.metadata.tags, content: html, tags: tags, menu: config.menu, @@ -139,7 +142,7 @@ export default class Render { type: DataEvent.PAGES_RENDERED, message: 'All Pages Rendered. Sweet.' }; - //utils.moveAssets(); + //move theme assets to public when pages are rendered new Utils().moveAssets(); resolve(response); } @@ -174,6 +177,10 @@ export default class Render { }); }); } + /** + * Method to extract, group and render tags in page + * @parameter pages: payload for site pages + */ publishTags(pages) { let self = this; return new Promise((resolve, reject) => { @@ -241,6 +248,10 @@ export default class Render { }); }); } + /** + * Method to build page that lists all active pages, organized by year and month + * @parameter pages: payload for site pages + */ publishArchive(archive) { settings .load(SETTINGS_FILE) diff --git a/brain/routes/dash/index.js b/brain/routes/dash/index.js index 1b582c8..beaa0ac 100644 --- a/brain/routes/dash/index.js +++ b/brain/routes/dash/index.js @@ -54,10 +54,9 @@ router.get('/', function (req, res) { //-------------------------- // Logout //-------------------------- -router.post('/logout', function (req, res) { - req.logout(); - return res.json({ - message: 'LOGGED OUT' - }); +router.get('/logout', (req, res) => { + //req.logout(); + req.session.destroy(); + res.redirect('/@/dashboard'); }); module.exports = router; diff --git a/brain/views/frame.pug b/brain/views/frame.pug index 65f715b..5d299ff 100644 --- a/brain/views/frame.pug +++ b/brain/views/frame.pug @@ -12,11 +12,17 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en") //meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png") link(rel='stylesheet', href="/assets/css/dash.css", type='text/css') body - #notifications.notifications + #notifications.notifications.notify-close #notifyMessage.notifyMessage - .notify-icon + .notify-icon#notify-good svg(viewBox="0 0 20 20" class="icons") - use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-bell') + use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt') + .notify-icon#notify-lame + svg(viewBox="0 0 20 20" class="icons") + use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-sad') + .notify-icon#notify-working + svg(viewBox="0 0 20 20" class="icons") + use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-cog') p#message-text This is a message .main-container#main-content section#dash-index-content diff --git a/brain/views/partials/dash-nav.pug b/brain/views/partials/dash-nav.pug index e966ec9..a52be7c 100644 --- a/brain/views/partials/dash-nav.pug +++ b/brain/views/partials/dash-nav.pug @@ -2,3 +2,6 @@ a#settings(href="/@/dashboard/settings") Settings | . a#navigation(href="/@/dashboard/navigation") Navigation + | . + + a#navigation(href="/@/dashboard/logout") Log Out diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css index 024f0c7..572f65c 100644 --- a/public/assets/css/dash.css +++ b/public/assets/css/dash.css @@ -1559,6 +1559,7 @@ body { background-color: #161d23; font: 400 1em Helvetica, Arial, sans-serif; height: 100%; + perspective: 1000px; } a { font: 300 1em Helvetica, Arial, sans-serif; @@ -1581,21 +1582,27 @@ svg.icons { z-index: 2000; height: 10%; width: 100%; - display: none; + display: block; align-items: center; justify-content: center; padding: 0; margin: 0; + transform-origin: 50% 0; + transition: all 0.5s cubic-bezier(0.83, 0.05, 0.28, 1); } #notifications #notifyMessage { - margin-top: 0px; - padding-top: -125px; + margin: 0 auto; height: 50px; width: 500px; display: flex; align-items: center; justify-content: center; - opacity: 0; + opacity: 1; +} +#notifications #notifyMessage #notify-good, +#notifications #notifyMessage #notify-lame, +#notifications #notifyMessage #notify-working { + display: none; } #notifications #notifyMessage .notify-icon { background: #32302f; @@ -1608,7 +1615,7 @@ svg.icons { } #notifications #notifyMessage p { color: #f2f1ef; - background: #fc6399; + background: #161d23; width: 400px; height: 28px; padding: 15px 0 0 5px; @@ -1619,6 +1626,14 @@ svg.icons { #notifications #notifyMessage .icons { fill: #f2f1ef; } +.notify-close { + transform-style: preserve-3d; + transform: rotateX(-120deg); +} +.notify-open { + transform-style: preserve-3d; + transform: rotateX(0deg); +} .blog-container { width: 100%; } diff --git a/public/assets/scripts/dash.min.js b/public/assets/scripts/dash.min.js index ee42b0a..e61ef8c 100644 --- a/public/assets/scripts/dash.min.js +++ b/public/assets/scripts/dash.min.js @@ -3617,8 +3617,10 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } var notifcation = document.getElementById('notifications'); -var message = document.getElementById('notifyMessage'); var messageText = document.getElementById('message-text'); +var iconGood = document.getElementById('notify-good'); +var iconLame = document.getElementById('notify-lame'); +var iconWorking = document.getElementById('notify-working'); var Notfications = /*#__PURE__*/function () { //-------------------------- @@ -3634,47 +3636,67 @@ var Notfications = /*#__PURE__*/function () { _createClass(Notfications, [{ key: "alert", value: function alert(text, status) { - messageText.innerHTML = text; - notifcation.style.display = 'flex'; + //notifcation.style.display = 'flex'; + iconWorking.style.display = 'none'; + iconGood.style.display = 'none'; + iconLame.style.display = 'none'; var color = ''; - status ? color = '#32cd32' : color = '#F64747'; + + if (status !== null) { + if (status) { + color = '#32cd32'; + iconWorking.style.display = 'none'; + iconGood.style.display = 'block'; + } else { + color = '#F64747'; + iconWorking.style.display = 'none'; + iconLame.style.display = 'block'; + } + } else { + color = '#200317'; + iconWorking.style.display = 'block'; + } + + notifcation.classList.remove('notify-close'); + notifcation.classList.add('notify-open'); + messageText.innerHTML = text; (0, _animeEs.default)({ targets: messageText, backgroundColor: color, easing: 'easeInOutQuint', - duration: 500, + duration: 700, complete: function complete() { - setTimeout(function () { - (0, _animeEs.default)({ - targets: messageText, - backgroundColor: '#374857', - easing: 'easeOutQuint', - duration: 500 - }); - }, 1000); + if (status !== null) { + setTimeout(function () { + notifcation.classList.add('notify-close'); + notifcation.classList.remove('notify-open'); + }, 1000); + } } }); - (0, _animeEs.default)({ - targets: message, - marginTop: '-20px', - easing: 'easeInOutQuint', - duration: 500, - opacity: 1, - complete: function complete() { - setTimeout(function () { - (0, _animeEs.default)({ - targets: message, - marginTop: '-125px', - easing: 'easeOutQuint', - duration: 500, - opacity: 0, - complete: function complete() { - notifcation.style.display = 'none'; - } - }); - }, 1000); - } + /* + anime({ + targets: message, + marginTop: '-20px', + easing: 'easeInOutQuint', + duration: 500, + opacity: 1, + complete: () => { + setTimeout(() => { + anime({ + targets: message, + marginTop: '-125px', + easing: 'easeOutQuint', + duration: 500, + opacity: 0, + complete: () => { + notifcation.style.display = 'none'; + } + }); + }, 1000); + } }); + */ } //-------------------------- // event handlers //-------------------------- @@ -3839,6 +3861,7 @@ var PostEditor = /*#__PURE__*/function () { var task = ''; e === EditorEvent.EDITOR_SAVE ? task = _FipamoAdminAPI.TASK_PAGE_CREATE : task = _FipamoAdminAPI.TASK_PAGE_EDIT; new _PageActions.default().collectInfo(document.getElementById('featured-image-upload').files[0]).then(function (page) { + notify.alert('Writing down changes', null); admin.pageActions(task, page).then(function (r) { if (r.type === DataEvent.PAGE_ERROR || r.type === DataEvent.API_REQUEST_LAME) { notify.alert(r.message, false); @@ -4207,6 +4230,7 @@ var SettingsIndex = /*#__PURE__*/function () { document.getElementById('save-toggle').addEventListener('click', function () { return new _SettingsActions.default().getInfo().then(function (data) { + notify.alert('Saving Settings', null); admin.syncSettings(data).then(function (r) { if (r.type == DataEvent.SETTINGS_UPDATED) { notify.alert(r.message, true); @@ -4348,6 +4372,7 @@ var SettingsIndex = /*#__PURE__*/function () { }, { key: "handleImageUpload", value: function handleImageUpload(type, files) { + notify.alert('Uploading Image... ', null); admin.imageUpload(type, files).then(function (r) { if (r.type == DataEvent.AVATAR_UPLOADED) { notify.alert(r.message, true); @@ -4367,6 +4392,7 @@ var SettingsIndex = /*#__PURE__*/function () { var task = { task: 'publish all pages' }; + notify.alert('Publishing site...', null); admin.publishSite(task).then(function (r) { notify.alert(r.message, true); }).catch(function (err) { @@ -4378,6 +4404,7 @@ var SettingsIndex = /*#__PURE__*/function () { value: function handleBackup(e) { e.preventDefault(); e.stopPropagation(); + notify.alert('Creating backup', null); admin.handleBackup(e.target.id, e.target.files).then(function (r) { notify.alert(r.message, true); }).catch(function (err) { @@ -8210,6 +8237,7 @@ var NavIndex = /*#__PURE__*/function () { _sortablejs.default.create(document.getElementById('nav-pages'), { onUpdate: function onUpdate() { new _NavActions.default().syncMenu().then(function (data) { + notify.alert('Updating Menu', null); admin.syncNav(data).then(function (r) { if (r.type == DataEvent.MENU_UPDATED) { notify.alert(r.message, true); @@ -8243,6 +8271,7 @@ var NavIndex = /*#__PURE__*/function () { new _NavActions.default().removeItem(id); new _NavActions.default().syncMenu().then(function (data) { data.remove = e.target.getAttribute('data-uuid'); + notify.alert('Editing Menu', null); admin.syncNav(data).then(function (r) { if (r.type == DataEvent.MENU_UPDATED) { notify.alert(r.message, true); @@ -8427,10 +8456,12 @@ var Base = /*#__PURE__*/function () { e.stopPropagation(); e.preventDefault(); var authForm = data.formDataToJSON(document.getElementById('login')); + notify.alert('Looking, hold up', null); api.login(authForm).then(function (response) { if (response.type === DataEvent.REQUEST_LAME) { notify.alert(response.message, false); } else { + notify.alert(response.message, true); e.target.innerHTML = response.message; setTimeout(function () { window.location = '/@/dashboard'; @@ -8541,7 +8572,7 @@ var parent = module.bundle.parent; if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { var hostname = "" || location.hostname; var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; - var ws = new WebSocket(protocol + '://' + hostname + ':' + "59699" + '/'); + var ws = new WebSocket(protocol + '://' + hostname + ':' + "53859" + '/'); ws.onmessage = function (event) { checkedAssets = {};