chore(error): create buildingNotification method

Author: adamdbradley

bin/ion-dev.js

@@ -173,31 +173,9 @@ window.IonicDevServer = {
 
  if (msg.type === 'started') {
  status = 'active';
-
- var toastEle = document.getElementById('ion-diagnostics-toast');
- if (!toastEle) {
- toastEle = document.createElement('div');
- toastEle.id = 'ion-diagnostics-toast';
- var c = []
- c.push('<div class="ion-diagnostics-toast-content">');
- c.push(' <div class="ion-diagnostics-toast-message">Building...</div>');
- c.push(' <div class="ion-diagnostics-toast-spinner">');
- c.push(' <svg viewBox="0 0 64 64"><circle transform="translate(32,32)" r="26"></circle></svg>');
- c.push(' </div>');
- c.push('</div>');
- toastEle.innerHTML = c.join('');
- document.body.insertBefore(toastEle, document.body.firstChild);
- }
-
- this.toastTimerId = setTimeout(function() {
- var toastEle = document.getElementById('ion-diagnostics-toast');
- if (toastEle) {
- toastEle.classList.add('ion-diagnostics-toast-active');
- }
- }, 50);
+ this.buildingNotification(true);
 
  } else {
- clearTimeout(this.toastTimerId);
 
  if (msg.data.reloadApp) {
  this.reloadApp();
@@ -206,10 +184,7 @@ window.IonicDevServer = {
 
  status = msg.data.diagnosticsHtml ? 'error' : 'success';
 
- var toastEle = document.getElementById('ion-diagnostics-toast');
- if (toastEle) {
- toastEle.classList.remove('ion-diagnostics-toast-active');
- }
+ this.buildingNotification(false);
 
  var diagnosticsEle = document.getElementById('ion-diagnostics');
  if (diagnosticsEle && !msg.data.diagnosticsHtml) {
@@ -272,6 +247,38 @@ window.IonicDevServer = {
  }
  },
 
+ buildingNotification: function(showToast) {
+ clearTimeout(this.toastTimerId);
+
+ var toastEle = document.getElementById('ion-diagnostics-toast');
+
+ if (showToast) {
+ if (!toastEle) {
+ toastEle = document.createElement('div');
+ toastEle.id = 'ion-diagnostics-toast';
+ var c = []
+ c.push('<div class="ion-diagnostics-toast-content">');
+ c.push(' <div class="ion-diagnostics-toast-message">Building...</div>');
+ c.push(' <div class="ion-diagnostics-toast-spinner">');
+ c.push(' <svg viewBox="0 0 64 64"><circle transform="translate(32,32)" r="26"></circle></svg>');
+ c.push(' </div>');
+ c.push('</div>');
+ toastEle.innerHTML = c.join('');
+ document.body.insertBefore(toastEle, document.body.firstChild);
+ }
+
+ this.toastTimerId = setTimeout(function() {
+ var toastEle = document.getElementById('ion-diagnostics-toast');
+ if (toastEle) {
+ toastEle.classList.add('ion-diagnostics-toast-active');
+ }
+ }, 16);
+
+ } else if (!showToast && toastEle) {
+ toastEle.classList.remove('ion-diagnostics-toast-active');
+ }
+ },
+
  toggleOptionsMenu: function() {
  var optsEle = document.getElementById('ion-diagnostics-options');
  this.optionsMenu(!optsEle);