#3 Add notifcation to inform injection init

cubbles · May 24, 2019 · 013218b · 013218b
1 parent c4b1370
commit 013218b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/css/sidebar_style.css b/css/sidebar_style.css
@@ -60,4 +60,39 @@ body {
 
 .btn-container {
   padding-bottom: 0.5em;
+}
+
+#toast {
+  visibility: hidden;
+  margin-left: -125px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 30px;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;} 
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;} 
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
 }
diff --git a/cubx_injector_sidebar.html b/cubx_injector_sidebar.html
@@ -13,6 +13,7 @@
   </head>
 
   <body>
+    <div id="toast" class="alert alert-primary" role="alert"></div>
     <div id="mainContainer">
       <h5>Load/Save config</h5>
       <div class="form-check form-check-inline">

diff --git a/lib/cubx_injector_sidebar.js b/lib/cubx_injector_sidebar.js
@@ -23,6 +23,7 @@
     htmlSnippetName: 'htmlSnippetName',
     positionGroupName: 'whereToInsertRB',
     loadAfterLoadCB: 'loadAfterLoadCB',
+    toast: 'toast',
   };
   const ELEMENTS_CLASSES = {
     urlInput: 'url-input',
@@ -77,6 +78,9 @@
         '<script type="text/javascript" data-cubx-startevent="cubblesInjectionReady" src="https://cubbles.world/shared/[email protected]/crc-loader/js/main.js" data-crcinit-loadcif="true"></script>',
     },
   ];
+  const MESSAGES = {
+    performingInjection: 'Performing injection'
+  };
   const DEFAULT_POSITION = 'end';
 
   let currentAction = '';
@@ -98,6 +102,7 @@
   }
 
   function startInjection() {
+    showNotification(MESSAGES.performingInjection);
     window.postMessageToBackgroundScript(MESSAGES_IDS.injectionPending);
     chrome.devtools.inspectedWindow.reload();
   }
@@ -544,6 +549,16 @@
     document.getElementById(ELEMENTS_IDS.loadAfterLoadCB).checked = shouldAutoInject();
   }
 
+  function showNotification(message) {
+    const DURATION = 4000; // ms
+    let toast = document.getElementById(ELEMENTS_IDS.toast);
+    toast.classList.add('show');
+    toast.innerText = message;
+    setTimeout(function(){
+      toast.classList.remove('show');
+    }, DURATION);
+  }
+
   function addListeners () {
     document.getElementById(ELEMENTS_IDS.addScriptBtn).addEventListener('click', addNewScript);