avatar and site background image uploads for settings plugged in

brain/api/content/settings.js

@@ -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)
                     });
                 }

brain/tools/events/DataEvent.js

@@ -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
 {
 

package.json

@@ -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",

themes/dash/assets/css/dash.css

@@ -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 {

themes/dash/assets/js/dash.min.js

@@ -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);

themes/dash/settings.pug

@@ -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)
+              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
               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)

themes/dash/src/com/actions/SettingsActions.js

@@ -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
         }

themes/dash/src/com/controllers/SettingsIndex.js

@@ -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) =>

themes/dash/src/styles/main/_settings.styl

@@ -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