Merge pull request #758 from cmho/754-add-avatar-preview

[754] Adds preview for avatar image prior to submit

public/js/activity.js

@@ -1 +0,0 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=1)}({1:function(e,t,n){e.exports=n("hUgz")},hUgz:function(e,t){$(document).ready(function(){$(".pagination").hide();var e=document.querySelector(".notification-page .list-group");new InfiniteScroll(e,{path:".pagination__next",append:".notification-page .list-group",status:".page-load-status",history:!0})})}});

public/js/timeline.js

@@ -1 +0,0 @@
-!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=3)}({3:function(e,t,n){e.exports=n("KqaD")},KqaD:function(e,t){$(document).ready(function(){$(".pagination").hide(),$(".container.timeline-container").removeClass("d-none");var e=document.querySelector(".timeline-feed"),t=e.getAttribute("data-timeline");$('.timeline-sidenav .nav-link[data-type="'+t+'"]').addClass("active"),pixelfed.readmore(),pixelfed.fetchLikes(),$("video").on("play",function(){activated=this,$("video").each(function(){this!=activated&&this.pause()})}),new InfiniteScroll(e,{path:".pagination__next",append:".timeline-feed",status:".page-load-status",history:!1}).on("append",function(e,t,n){pixelfed.hydrateLikes(),$(".status-card > .card-footer").each(function(){var e=$(this);e.hasClass("d-none")||e.find('input[name="comment"]').val()||$(this).addClass("d-none")}),$("video").on("play",function(){activated=this,$("video").each(function(){this!=activated&&this.pause()})})})}),$(document).on("DOMContentLoaded",function(){var e=!1,t=function(){if(pixelfed.readmore(),!1===e){e=!0;var t=[].slice.call(document.querySelectorAll("img.lazy"));t.forEach(function(e){e.getBoundingClientRect().top<=window.innerHeight&&e.getBoundingClientRect().bottom>=0&&"none"!==getComputedStyle(e).display&&(e.src=e.dataset.src,e.srcset=e.dataset.srcset,e.classList.remove("lazy"),t=t.filter(function(t){return t!==e}))}),e=!1}};document.addEventListener("scroll",t),window.addEventListener("resize",t),window.addEventListener("orientationchange",t)})}});

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/activity.js": "/js/activity.js?id=7915246c3bc2b7e9770e",
-    "/js/app.js": "/js/app.js?id=ea57709b5a7ef8657ff4",
-    "/css/app.css": "/css/app.css?id=0d2d3f52adde32658692",
-    "/js/components.js": "/js/components.js?id=f6de7bd1e3ec76ab599a",
-    "/js/timeline.js": "/js/timeline.js?id=83c85c7144756ee9a72e"
+    "/js/components.js": "/js/components.js?id=e2f19ce19c3be557c4d8",
+    "/js/app.js": "/js/app.js?id=64e1dbb38f4fbf6202e4",
+    "/css/app.css": "/css/app.css?id=f222eb0627d08ba55261",
+    "/js/timeline.js": "/js/timeline.js?id=21dfbf9e0a261c9a77b7",
+    "/js/activity.js": "/js/activity.js?id=2b27ba75791b911c6691"
 }

resources/assets/js/components.js

@@ -43,6 +43,7 @@ require('./components/commentform');
 require('./components/searchform');
 require('./components/bookmarkform');
 require('./components/statusform');
+require('./components/settingspage');
 //require('./components/embed');
 //require('./components/notifications');
 

resources/assets/js/components/settingspage.js

@@ -0,0 +1,14 @@
+$(document).ready(function () {
+    $('#avatarInput').on('change', function(e) {
+        var file = document.getElementById('avatarInput').files[0];
+        var reader = new FileReader();
+
+        reader.addEventListener("load", function() {
+            $('#previewAvatar').html('<img src="' + reader.result + '" class="rounded-circle box-shadow" />');
+        }, false);
+
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+    });
+});

resources/assets/sass/custom.scss

@@ -455,3 +455,10 @@ details summary::-webkit-details-marker {
 .notification-tooltip .arrow::before {
   border-bottom-color:#dc3545 !important;
 }
+
+#previewAvatar {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}

resources/views/settings/home.blade.php

@@ -22,6 +22,7 @@
             <label class="custom-file-label" for="avatarInput">Select a profile photo</label>
           </div>
           <p><span class="small font-weight-bold">Must be a jpeg or png. Max avatar size: <span id="maxAvatarSize"></span></span></p>
+          <div id="previewAvatar"></div>
           <p class="mb-0"><button type="submit" class="btn btn-primary px-4 py-0 font-weight-bold">Upload</button></p>
         </div>
         </form>