projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

avatar and site background image uploads for settings plugged in

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
brain/api/content/settings.js
View file

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

1
brain/tools/events/DataEvent.js
View file

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

2
package.json
View file

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

62
themes/dash/assets/css/dash.css
View file

@ -1895,16 +1895,6 @@ svg.icons {
width: 320px;
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 #site-settings,
#settings-index #settings-index-wrapper #theme-settings {
@ -1925,6 +1915,58 @@ svg.icons {
height: 30px;
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 #site-settings textarea,
#settings-index #settings-index-wrapper #theme-settings textarea {

2
themes/dash/assets/css/dash.css.map
View file

File diff suppressed because one or more lines are too long

19
themes/dash/assets/js/dash.min.js vendored
View file

@ -197,7 +197,7 @@ exports.default = _default;
Object.defineProperty(exports, "__esModule", {
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"); } }
@ -245,6 +245,8 @@ var SETTINGS_UPDATED = 'settingsUpdated';
exports.SETTINGS_UPDATED = SETTINGS_UPDATED;
var AVATAR_UPLOADED = 'avatarUploaded';
exports.AVATAR_UPLOADED = AVATAR_UPLOADED;
var SITE_BACKGROUND_UPLOADED = 'siteBackgroundUploaded';
exports.SITE_BACKGROUND_UPLOADED = SITE_BACKGROUND_UPLOADED;
var DataEvent = function DataEvent() {
_classCallCheck(this, DataEvent);
@ -8346,6 +8348,7 @@ function () {
var title = document.getElementById('settings-title').value;
var desc = document.getElementById('settings-desc').innerHTML;
var privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
var background = document.getElementById('background').src;
var selected = "";
var selects = document.querySelectorAll('.theme-select');
@ -8359,6 +8362,7 @@ function () {
url: url,
title: title,
descriptions: desc,
background: background,
private: privacy,
theme: selected
};
@ -8434,9 +8438,15 @@ function () {
document.getElementById('avatar').addEventListener('click', function (e) {
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) {
self.handleImageUpload(e.target.id, e.target.files);
}, false);
document.getElementById('background-upload').addEventListener('change', function (e) {
self.handleImageUpload(e.target.id, e.target.files);
}, false);
} //--------------------------
// event handlers
//--------------------------
@ -8447,8 +8457,7 @@ function () {
var url = "";
var eventType = "";
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();
for (var i = 0; i < files.length; i++) {
@ -8466,6 +8475,8 @@ function () {
if (r.message == DataEvent.AVATAR_UPLOADED) {
document.getElementById('avatar').src = r.url;
} else {
document.getElementById('background').src = r.url;
}
}).catch(function (err) {//console.log(err)
});
@ -8669,7 +8680,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 + ':' + "62875" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54297" + '/');
ws.onmessage = function (event) {
var data = JSON.parse(event.data);

2
themes/dash/assets/js/dash.min.map
View file

File diff suppressed because one or more lines are too long

16
themes/dash/settings.pug
View file

@ -2,15 +2,21 @@ extends frame
block main-content
#settings-index
#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
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)
label YOU
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
label OPTIONS
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-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)

2
themes/dash/src/com/actions/SettingsActions.js
View file

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

11
themes/dash/src/com/controllers/SettingsIndex.js
View file

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

58
themes/dash/src/styles/main/_settings.styl
View file

@ -11,31 +11,58 @@
width 320px
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
label
font-family 'Apercu-Mono'
color $white
width 80%
margin-bottom 40px
input
width 44%
margin-right 5px
height 30px
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
background $primary - 60%
width 91.5%
@ -64,7 +91,8 @@
background $secondary
color $primary
border-radius 3px
svg
svg
fill $primary
display inline-block
float right