avatar and site background image uploads for settings plugged in

This commit is contained in:
Ro 2019-01-03 11:17:02 -05:00
parent 750a55ef1c
commit 2f439d11ff
11 changed files with 139 additions and 39 deletions

View file

@ -85,6 +85,7 @@ router.post("/sync", (req, res, next) =>
obj.description = payload.descriptions; obj.description = payload.descriptions;
obj.private = payload.private; obj.private = payload.private;
obj.theme = payload.theme; obj.theme = payload.theme;
obj.background = payload.background;
fs.writeJson('site-settings.json', obj).then(() => fs.writeJson('site-settings.json', obj).then(() =>
{ {
res.json( res.json(
@ -197,7 +198,7 @@ router.post('/add-feature-background', function(req, res, next)
var postImage = req.files[0].path; var postImage = req.files[0].path;
return res.json( return res.json(
{ {
message: DataEvent.FEATURE_IMAGE_ADDED, message: DataEvent.SITE_BACKGROUND_UPLOADED,
url: postImage.substr(7, postImage.length) url: postImage.substr(7, postImage.length)
}); });
} }

View file

@ -20,6 +20,7 @@ export const POSTS_SYNCED = 'postsSynced';
export const LOCAL_DB_READY = 'localDBReady'; export const LOCAL_DB_READY = 'localDBReady';
export const SETTINGS_UPDATED = 'settingsUpdated'; export const SETTINGS_UPDATED = 'settingsUpdated';
export const AVATAR_UPLOADED = 'avatarUploaded'; export const AVATAR_UPLOADED = 'avatarUploaded';
export const SITE_BACKGROUND_UPLOADED = 'siteBackgroundUploaded';
class DataEvent class DataEvent
{ {

View file

@ -1,6 +1,6 @@
{ {
"name": "fipamo", "name": "fipamo",
"version": "0.0.5", "version": "0.0.1",
"private": true, "private": true,
"description": "The most chill blog framework ever.", "description": "The most chill blog framework ever.",
"repository": "https://code.playvicio.us/Are0h/Fipamo", "repository": "https://code.playvicio.us/Are0h/Fipamo",

View file

@ -1895,16 +1895,6 @@ svg.icons {
width: 320px; width: 320px;
height: 45px; height: 45px;
} }
#settings-index #settings-index-wrapper #member-avatar-drop img {
width: 200px;
border: 5px solid #f2f1ef;
border-radius: 150px;
overflow: hidden;
cursor: pointer;
}
#settings-index #settings-index-wrapper #member-avatar-drop input {
visibility: hidden;
}
#settings-index #settings-index-wrapper #member-settings, #settings-index #settings-index-wrapper #member-settings,
#settings-index #settings-index-wrapper #site-settings, #settings-index #settings-index-wrapper #site-settings,
#settings-index #settings-index-wrapper #theme-settings { #settings-index #settings-index-wrapper #theme-settings {
@ -1925,6 +1915,58 @@ svg.icons {
height: 30px; height: 30px;
padding: 10px; padding: 10px;
} }
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop {
display: inline-block;
}
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop img,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop img,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop img {
width: 110px;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
}
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop input,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop input,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop input {
visibility: hidden;
display: none;
}
#settings-index #settings-index-wrapper #member-settings #site-background,
#settings-index #settings-index-wrapper #site-settings #site-background,
#settings-index #settings-index-wrapper #theme-settings #site-background {
margin: 0 0 10px 0;
}
#settings-index #settings-index-wrapper #member-settings #site-background img,
#settings-index #settings-index-wrapper #site-settings #site-background img,
#settings-index #settings-index-wrapper #theme-settings #site-background img {
width: 100%;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
#settings-index #settings-index-wrapper #member-settings #site-background input,
#settings-index #settings-index-wrapper #site-settings #site-background input,
#settings-index #settings-index-wrapper #theme-settings #site-background input {
visibility: hidden;
display: none;
}
#settings-index #settings-index-wrapper #member-settings #member-info,
#settings-index #settings-index-wrapper #site-settings #member-info,
#settings-index #settings-index-wrapper #theme-settings #member-info {
vertical-align: top;
display: inline-block;
margin: 0 0 0 10px;
width: 79%;
}
#settings-index #settings-index-wrapper #member-settings #member-info input,
#settings-index #settings-index-wrapper #site-settings #member-info input,
#settings-index #settings-index-wrapper #theme-settings #member-info input {
width: 94%;
margin: 0 5px 10px 0;
}
#settings-index #settings-index-wrapper #member-settings textarea, #settings-index #settings-index-wrapper #member-settings textarea,
#settings-index #settings-index-wrapper #site-settings textarea, #settings-index #settings-index-wrapper #site-settings textarea,
#settings-index #settings-index-wrapper #theme-settings textarea { #settings-index #settings-index-wrapper #theme-settings textarea {

File diff suppressed because one or more lines are too long

View file

@ -197,7 +197,7 @@ exports.default = _default;
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
value: true value: true
}); });
exports.default = exports.AVATAR_UPLOADED = exports.SETTINGS_UPDATED = exports.LOCAL_DB_READY = exports.POSTS_SYNCED = exports.POST_DELETED = exports.POST_UPDATED = exports.POST_ADDED = exports.POST_ERROR = exports.FEATURE_IMAGE_ADDED = exports.POST_IMAGE_ADDED = exports.PROJECTS_SORTED = exports.PROJECT_ADDED = exports.PROJECT_UPDATED = exports.ARCHIVES_ENTRY_LOADED = exports.ARCHIVES_PAGE_LOADED = exports.ARCHIVES_JSON_LOADED = exports.HTML_LOADED = exports.SETTINGS_LOADED = exports.IMG_REQUEST_LAME = exports.IMG_REQUEST_GOOD = exports.REQUEST_LAME = exports.REQUEST_GOOD = void 0; exports.default = exports.SITE_BACKGROUND_UPLOADED = exports.AVATAR_UPLOADED = exports.SETTINGS_UPDATED = exports.LOCAL_DB_READY = exports.POSTS_SYNCED = exports.POST_DELETED = exports.POST_UPDATED = exports.POST_ADDED = exports.POST_ERROR = exports.FEATURE_IMAGE_ADDED = exports.POST_IMAGE_ADDED = exports.PROJECTS_SORTED = exports.PROJECT_ADDED = exports.PROJECT_UPDATED = exports.ARCHIVES_ENTRY_LOADED = exports.ARCHIVES_PAGE_LOADED = exports.ARCHIVES_JSON_LOADED = exports.HTML_LOADED = exports.SETTINGS_LOADED = exports.IMG_REQUEST_LAME = exports.IMG_REQUEST_GOOD = exports.REQUEST_LAME = exports.REQUEST_GOOD = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -245,6 +245,8 @@ var SETTINGS_UPDATED = 'settingsUpdated';
exports.SETTINGS_UPDATED = SETTINGS_UPDATED; exports.SETTINGS_UPDATED = SETTINGS_UPDATED;
var AVATAR_UPLOADED = 'avatarUploaded'; var AVATAR_UPLOADED = 'avatarUploaded';
exports.AVATAR_UPLOADED = AVATAR_UPLOADED; exports.AVATAR_UPLOADED = AVATAR_UPLOADED;
var SITE_BACKGROUND_UPLOADED = 'siteBackgroundUploaded';
exports.SITE_BACKGROUND_UPLOADED = SITE_BACKGROUND_UPLOADED;
var DataEvent = function DataEvent() { var DataEvent = function DataEvent() {
_classCallCheck(this, DataEvent); _classCallCheck(this, DataEvent);
@ -8346,6 +8348,7 @@ function () {
var title = document.getElementById('settings-title').value; var title = document.getElementById('settings-title').value;
var desc = document.getElementById('settings-desc').innerHTML; var desc = document.getElementById('settings-desc').innerHTML;
var privacy = document.getElementById('privacy-toggle').getAttribute('data-private'); var privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
var background = document.getElementById('background').src;
var selected = ""; var selected = "";
var selects = document.querySelectorAll('.theme-select'); var selects = document.querySelectorAll('.theme-select');
@ -8359,6 +8362,7 @@ function () {
url: url, url: url,
title: title, title: title,
descriptions: desc, descriptions: desc,
background: background,
private: privacy, private: privacy,
theme: selected theme: selected
}; };
@ -8434,9 +8438,15 @@ function () {
document.getElementById('avatar').addEventListener('click', function (e) { document.getElementById('avatar').addEventListener('click', function (e) {
document.getElementById('avatar-upload').click(); document.getElementById('avatar-upload').click();
}); });
document.getElementById('background').addEventListener('click', function (e) {
document.getElementById('background-upload').click();
});
document.getElementById('avatar-upload').addEventListener('change', function (e) { document.getElementById('avatar-upload').addEventListener('change', function (e) {
self.handleImageUpload(e.target.id, e.target.files); self.handleImageUpload(e.target.id, e.target.files);
}, false); }, false);
document.getElementById('background-upload').addEventListener('change', function (e) {
self.handleImageUpload(e.target.id, e.target.files);
}, false);
} //-------------------------- } //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
@ -8447,8 +8457,7 @@ function () {
var url = ""; var url = "";
var eventType = ""; var eventType = "";
var self = this; var self = this;
type == "avatar-upload" ? url = "/api/settings/add-avatar" : url = "/api/settings/add-feature-background"; //(type == "featured-image-upload") ? eventType = DataEvent.FEATURE_IMAGE_ADDED: eventType = DataEvent.POST_IMAGE_ADDED type == "avatar-upload" ? url = "/api/settings/add-avatar" : url = "/api/settings/add-feature-background";
var imageData = new FormData(); var imageData = new FormData();
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++) {
@ -8466,6 +8475,8 @@ function () {
if (r.message == DataEvent.AVATAR_UPLOADED) { if (r.message == DataEvent.AVATAR_UPLOADED) {
document.getElementById('avatar').src = r.url; document.getElementById('avatar').src = r.url;
} else {
document.getElementById('background').src = r.url;
} }
}).catch(function (err) {//console.log(err) }).catch(function (err) {//console.log(err)
}); });
@ -8669,7 +8680,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname; var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "62875" + '/'); var ws = new WebSocket(protocol + '://' + hostname + ':' + "54297" + '/');
ws.onmessage = function (event) { ws.onmessage = function (event) {
var data = JSON.parse(event.data); var data = JSON.parse(event.data);

File diff suppressed because one or more lines are too long

View file

@ -2,15 +2,21 @@ extends frame
block main-content block main-content
#settings-index #settings-index
#settings-index-wrapper #settings-index-wrapper
#member-avatar-drop
img#avatar(src=member.avi, for="avatar-upload")
input(id="avatar-upload" type="file" name="avatar-upload")
#member-settings #member-settings
input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus) label YOU
input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus) br
#member-avatar-drop
img#avatar(src=member.avi, for="avatar-upload")
input(id="avatar-upload" type="file" name="avatar-upload")
#member-info
input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus)
#site-settings #site-settings
label OPTIONS label OPTIONS
br br
#site-background
img#background(src=settings.background, alt="image for site background", for="background-upload")
input(id="background-upload" type="file" name="backgrond-upload")
input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus) input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus)
input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus) input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus)
textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus) textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus)

View file

@ -33,6 +33,7 @@ export default class SettingsActions
let title = document.getElementById('settings-title').value; let title = document.getElementById('settings-title').value;
let desc = document.getElementById('settings-desc').innerHTML; let desc = document.getElementById('settings-desc').innerHTML;
let privacy = document.getElementById('privacy-toggle').getAttribute('data-private'); let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
let background = document.getElementById('background').src;
let selected = ""; let selected = "";
let selects = document.querySelectorAll('.theme-select'); let selects = document.querySelectorAll('.theme-select');
for (var i = 0, length = selects.length; i < length; i++) for (var i = 0, length = selects.length; i < length; i++)
@ -45,6 +46,7 @@ export default class SettingsActions
url: url, url: url,
title: title, title: title,
descriptions: desc, descriptions: desc,
background: background,
private: privacy, private: privacy,
theme: selected theme: selected
} }

View file

@ -37,10 +37,18 @@ export default class SettingsIndex
{ {
document.getElementById('avatar-upload').click(); document.getElementById('avatar-upload').click();
}) })
document.getElementById('background').addEventListener('click', e =>
{
document.getElementById('background-upload').click();
})
document.getElementById('avatar-upload').addEventListener('change', e => document.getElementById('avatar-upload').addEventListener('change', e =>
{ {
self.handleImageUpload(e.target.id, e.target.files); self.handleImageUpload(e.target.id, e.target.files);
}, false); }, false);
document.getElementById('background-upload').addEventListener('change', e =>
{
self.handleImageUpload(e.target.id, e.target.files);
}, false);
} }
//-------------------------- //--------------------------
// event handlers // event handlers
@ -51,7 +59,6 @@ export default class SettingsIndex
let eventType = ""; let eventType = "";
let self = this; let self = this;
(type == "avatar-upload") ? url = "/api/settings/add-avatar": url = "/api/settings/add-feature-background"; (type == "avatar-upload") ? url = "/api/settings/add-avatar": url = "/api/settings/add-feature-background";
//(type == "featured-image-upload") ? eventType = DataEvent.FEATURE_IMAGE_ADDED: eventType = DataEvent.POST_IMAGE_ADDED
var imageData = new FormData(); var imageData = new FormData();
for (var i = 0; i < files.length; i++) for (var i = 0; i < files.length; i++)
{ {
@ -69,6 +76,8 @@ export default class SettingsIndex
if(r.message == DataEvent.AVATAR_UPLOADED) if(r.message == DataEvent.AVATAR_UPLOADED)
{ {
document.getElementById('avatar').src = r.url; document.getElementById('avatar').src = r.url;
}else{
document.getElementById('background').src = r.url;
} }
}).catch((err) => }).catch((err) =>

View file

@ -11,31 +11,58 @@
width 320px width 320px
height 45px height 45px
#member-avatar-drop
img
width 200px
border 5px solid $white
border-radius 150px
overflow hidden
cursor pointer
input
visibility hidden
#member-settings, #site-settings, #theme-settings #member-settings, #site-settings, #theme-settings
label label
font-family 'Apercu-Mono' font-family 'Apercu-Mono'
color $white color $white
width 80%
margin-bottom 40px
input input
width 44% width 44%
margin-right 5px margin-right 5px
height 30px height 30px
padding 10px padding 10px
width 80%
margin-bottom 40px
#member-avatar-drop
display inline-block
img
width 110px
// border 5px solid $white
border-radius 10px
overflow hidden
cursor pointer
input
visibility hidden
display none
#site-background
margin 0 0 10px 0
img
width 100%
// border 5px solid $white
border-radius 5px
overflow hidden
cursor pointer
input
visibility hidden
display none
#member-info
vertical-align top
display inline-block
margin 0 0 0 10px
width 79%
input
width 94%
margin 0 5px 10px 0
textarea textarea
background $primary - 60% background $primary - 60%
width 91.5% width 91.5%
@ -64,6 +91,7 @@
background $secondary background $secondary
color $primary color $primary
border-radius 3px border-radius 3px
svg svg
fill $primary fill $primary
display inline-block display inline-block