implemented progress upload indicator in notifications

brain/views/dash/_frame.twig

@@ -19,9 +19,14 @@
                     <svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/></svg>
                 </div>
                 <div id="notify-working" class="notify-icon">
-                    <svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg>
+                    <svg id="notify-working-icon" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg>
                 </div>
-                <p id="message-text"></p>
+               
+                <div id="notify-text">
+                    <div id="notify-progress"></div>
+                    <p id="message-text">MESSAGE TEXT</p>
+                </div>
+                
             </div>
         </div>
         <div id="main-content" class="main-container">

brain/views/dash/forms/login.twig

@@ -1,7 +1,7 @@
 <div id="dash-login">
     <div id="dash-form" class="dash-form">
         <img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
-        <form id="login" class='login' name="login" action="/@/dashboard/login" method="POST">
+        <form id="login" class='login' name="login" action="/dashboard/login" method="POST">
             <input type="text" name="handle" class="form-control" placeholder="Handle" required ">
                 <input type="password" name="password" class="form-control" placeholder="Password" required">
                     <button id="login-btn" class='login-btn' type='submit'>

brain/views/dash/page-edit.twig

@@ -32,7 +32,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=cvbupoyn">
+  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=qwert">
   {% endblock %}
 
   {% block mainContent %}

brain/views/dash/reset-password.twig

@@ -14,7 +14,7 @@
 				<div id="dash-login">
 					<div id="dash-reset" class="dash-reset">
 						<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
-						<form id="reset" class='login' name="reset" action="/@/dashboard/login" method="POST">
+						<form id="reset" class='login' name="reset" action="/dashboard/login" method="POST">
 								
 								<input type="password" id="new_password"name="new_password" class="form-control" placeholder="New Password" required">
 								<input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required">

brain/views/dash/start.twig

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dafdfa">
+    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfd">
     {% endblock %}
 
     {% block mainContent %}

public/assets/css/dash.css

@@ -1941,13 +1941,14 @@ svg.icons {
   justify-content: center;
   opacity: 1;
   transform-style: preserve-3d;
-  transform: rotateX(-120deg);
+  transform: rotateX(120deg);
   transform-origin: 50% 0;
+  overflow: hidden;
 }
 #notifications #notifyMessage #notify-good, #notifications #notifyMessage #notify-lame, #notifications #notifyMessage #notify-working {
   display: block;
 }
-#notifications #notifyMessage #notify-working-box {
+#notifications #notifyMessage #notify-working-icon {
   -webkit-animation: spin 2s linear infinite;
   -moz-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
@@ -1977,15 +1978,29 @@ svg.icons {
   text-align: center;
   border: 2px solid #EFEBE3;
 }
-#notifications #notifyMessage p {
+#notifications #notifyMessage #notify-text {
   color: #EFEBE3;
-  background: black;
+  background: #32302f;
   width: 400px;
   height: 28px;
-  padding: 15px 0 0 5px;
+  padding: 15px 0 0 0;
   border-radius: 0 5px 5px 0;
   border: 2px solid #EFEBE3;
   text-align: center;
+  overflow: hidden;
+  position: relative;
+}
+#notifications #notifyMessage #notify-text #notify-progress {
+  width: 0;
+  background: #fc6399;
+  height: 43px;
+  position: absolute;
+  top: 0px;
+}
+#notifications #notifyMessage #notify-text p {
+  top: -15px;
+  display: block;
+  position: relative;
 }
 #notifications #notifyMessage .icons {
   fill: #EFEBE3;

src/com/controllers/PageEditor.js

@@ -19,7 +19,10 @@ export default class PostEditor {
   constructor() {
     this.processing = false;
     let self = this;
-    this.admin = new FipamoAdminAPI(null);
+    this.admin = new FipamoAdminAPI(
+      null,
+      document.getElementById("notify-progress")
+    );
     this.mm = new Maintenance();
     this.urlPieces = document.URL.split("/");
     this.post = [];

src/com/ui/Notifications.js

@@ -2,6 +2,8 @@ import anime from "animejs/lib/anime.es.js";
 const notifcation = document.getElementById("notifications");
 const notify = document.getElementById("notifyMessage");
 const messageText = document.getElementById("message-text");
+const notifyText = document.getElementById("notify-text");
+const notifyProgress = document.getElementById("notify-progress");
 const iconGood = document.getElementById("notify-good");
 const iconLame = document.getElementById("notify-lame");
 const iconWorking = document.getElementById("notify-working");
@@ -22,6 +24,12 @@ export default class Notfications {
 
     var color = "";
     if (status !== null) {
+      anime({
+        targets: notifyProgress,
+        opacity: 0,
+        easing: "easeInOutQuint",
+        duration: 500
+      });
       if (status) {
         color = "#32cd32";
         iconWorking.style.display = "none";
@@ -34,6 +42,12 @@ export default class Notfications {
     } else {
       color = "#200317";
       iconWorking.style.display = "block";
+      anime({
+        targets: notifyProgress,
+        opacity: 1,
+        easing: "easeInOutQuint",
+        duration: 500
+      });
     }
     messageText.innerHTML = text;
 
@@ -50,7 +64,7 @@ export default class Notfications {
           duration: 700
         });
         anime({
-          targets: messageText,
+          targets: notifyText,
           backgroundColor: color,
           easing: "easeInOutQuint",
           duration: 700,

src/libraries/FipamoAdminAPI.js

@@ -44,10 +44,12 @@ class FipamoAdminAPI {
   /**
    * @constructor
    * @param {string} baseURL - url of site; uses local when empty
+   * @param {object} progressBar - element to be used to display upload progress
    */
-  constructor(baseURL = null) {
+  constructor(baseURL = null, progressBar = null) {
     this.percentComplete = 0; //for later
     this.baseURL = null;
+    this.progressBar = progressBar;
     this.status = false;
     if (baseURL) this.baseURL = baseURL;
     //asks server if a session is active
@@ -367,7 +369,9 @@ class FipamoAdminAPI {
     var self = this;
     return new Promise(function (resolve, reject) {
       var request = new XMLHttpRequest();
-      request.upload.onprogress = self.handleLoadProgress;
+      request.upload.addEventListener("progress", (e) =>
+        self.handleLoadProgress(e, self.progressBar)
+      );
       request.open(requestType, requestURL, true);
       request.onload = () => {
         if (request.status == 200) {
@@ -416,9 +420,12 @@ class FipamoAdminAPI {
   //--------------------------
   // event handlers
   //--------------------------
-  handleLoadProgress(e) {
+  handleLoadProgress(e, progressBar) {
-    this.percentComplete = Math.ceil((e.loaded / e.total) * 100);
+    let percent = Math.ceil((e.loaded / e.total) * 100);
-    //pass element to display request progress
+    //if a progress bar element is present, talk to it
+    if (progressBar != null) {
+      progressBar.style.width = percent + "%";
+    }
   }
 }
 

src/styles/main/_structure.sass

@@ -36,11 +36,12 @@ svg.icons
     justify-content: center
     opacity: 1
     transform-style: preserve-3d
-    transform: rotateX(-120deg)
+    transform: rotateX(120deg)
     transform-origin: 50% 0
+    overflow: hidden
     #notify-good, #notify-lame, #notify-working
       display: block
-    #notify-working-box
+    #notify-working-icon
       -webkit-animation: spin 2s linear infinite
       -moz-animation: spin 2s linear infinite
       animation: spin 2s linear infinite
@@ -55,6 +56,7 @@ svg.icons
         -webkit-transform: rotate(360deg)
         transform: rotate(360deg)
         
+    
     .notify-icon
       background: $black
       padding: 8px 5px 5px 5px
@@ -63,15 +65,27 @@ svg.icons
       width: 30px
       text-align: center
       border: 2px solid $white
-    p
+    #notify-text
       color: $white
-      background: color.adjust($primary, $lightness: -60%)
+      background: $black
       width: 400px
       height: 28px
-      padding: 15px 0 0 5px
+      padding: 15px 0 0 0
       border-radius: 0 5px 5px 0
       border: 2px solid $white
       text-align: center
+      overflow: hidden
+      position: relative
+      #notify-progress
+        width: 0
+        background: $highlight
+        height: 43px
+        position: absolute
+        top: 0px
+      p
+        top: -15px
+        display: block
+        position: relative
       
     .icons
       fill: $white