forked from projects/fipamo
avatar and site background image uploads for settings plugged in
This commit is contained in:
parent
750a55ef1c
commit
2f439d11ff
11 changed files with 139 additions and 39 deletions
|
@ -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)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
{
|
{
|
||||||
|
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
19
themes/dash/assets/js/dash.min.js
vendored
19
themes/dash/assets/js/dash.min.js
vendored
|
@ -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
|
@ -2,15 +2,21 @@ extends frame
|
||||||
block main-content
|
block main-content
|
||||||
#settings-index
|
#settings-index
|
||||||
#settings-index-wrapper
|
#settings-index-wrapper
|
||||||
|
#member-settings
|
||||||
|
label YOU
|
||||||
|
br
|
||||||
#member-avatar-drop
|
#member-avatar-drop
|
||||||
img#avatar(src=member.avi, for="avatar-upload")
|
img#avatar(src=member.avi, for="avatar-upload")
|
||||||
input(id="avatar-upload" type="file" name="avatar-upload")
|
input(id="avatar-upload" type="file" name="avatar-upload")
|
||||||
#member-settings
|
#member-info
|
||||||
input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
|
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)
|
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)
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) =>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue