Merge pull request #4441 from himdel/npm-spinjs

bower to npm - spin.js

app/assets/javascripts/application.js

@@ -65,8 +65,6 @@
 //= require bower_components/codemirror/mode/shell/shell
 //= require bower_components/codemirror/mode/xml/xml
 //= require bower_components/codemirror/mode/yaml/yaml
-//= require bower_components/spin.js/spin
-//= require bower_components/spin.js/jquery.spin
 //= require jquery-hotkeys
 //= require ./miq_formatters
 //= require ./miq_grid

app/assets/javascripts/miq_application.js

@@ -1018,33 +1018,48 @@ function miqQsEnterEscape(e) {
 
 // Start/stop the JS spinner
 function miqSpinner(status) {
-  var opts = {
-    lines: 15, // The number of lines to draw
-    length: 18, // The length of each line
-    width: 4, // The line thickness
-    radius: 25, // The radius of the inner circle
-    color: '#fff', // #rgb or #rrggbb
-    trail: 60, // Afterglow percentage
-    className: 'miq-spinner', // The CSS class to assign to the spinner
-  };
+  if (! miqSpinner.spinner) {
+    miqSpinner.spinner = new Spinner({
+      lines: 15, // The number of lines to draw
+      length: 18, // The length of each line
+      width: 4, // The line thickness
+      radius: 25, // The radius of the inner circle
+      color: '#fff', // #rgb or #rrggbb
+      trail: 60, // Afterglow percentage
+      className: 'miq-spinner', // The CSS class to assign to the spinner
+    });
+  }
 
-  $('#spinner_div').spin(status ? opts : false);
+  if (status) {
+    var target = document.querySelector('#spinner_div');
+    miqSpinner.spinner.spin(target);
+  } else {
+    miqSpinner.spinner.stop();
+  }
 }
 
 // Start/stop the search spinner
 function miqSearchSpinner(status) {
-  var opts = {
-    lines: 13, // The number of lines to draw
-    length: 20, // The length of each line
-    width: 10, // The line thickness
-    radius: 30, // The radius of the inner circle
-    color: '#000', // #rgb or #rrggbb or array of colors
-    trail: 60, // Afterglow percentage
-    className: 'miq-spinner', // The CSS class to assign to the spinner
-  };
+  if (! miqSearchSpinner.spinner) {
+    miqSearchSpinner.spinner = new Spinner({
+      lines: 13, // The number of lines to draw
+      length: 20, // The length of each line
+      width: 10, // The line thickness
+      radius: 30, // The radius of the inner circle
+      color: '#000', // #rgb or #rrggbb or array of colors
+      trail: 60, // Afterglow percentage
+      className: 'miq-spinner', // The CSS class to assign to the spinner
+    });
+  }
 
   $('#search_notification').toggle(!! status);
-  $('#searching_spinner_center').spin(status ? opts : false);
+
+  if (status) {
+    var target = document.querySelector('#searching_spinner_center');
+    miqSearchSpinner.spinner.spin(target);
+  } else {
+    miqSearchSpinner.spinner.stop();
+  }
 }
 
 function miqProcessObserveQueue() {

app/javascript/packs/application-common.js

@@ -53,3 +53,8 @@ window.http = http;
 // for Automate > Simulate
 require('xml_display/XMLDisplay.js');
 require('xml_display/XMLDisplay.css');
+
+// miqSpinner, miqSearchSpinner
+import {Spinner} from 'spin.js';
+import 'spin.js/spin.css';
+window.Spinner = Spinner;

bower.json

@@ -42,8 +42,7 @@
     "patternfly-bootstrap-treeview": "~2.1.5",
     "patternfly-timeline": "~1.0.5",
     "phantomjs-polyfill": "~0.0.2",
-    "qs": "~0.3.10",
-    "spin.js": "~2.3.2"
+    "qs": "~0.3.10"
   },
   "resolutions": {
     "d3": "~3.5.0",

package.json

@@ -49,6 +49,7 @@
     "redux-thunk": "^2.3.0",
     "rxjs": "~5.6.0-forward-compat.2",
     "spice-html5-bower": "~1.7.2",
+    "spin.js": "~4.0.0",
     "sprintf-js": "~1.1.1",
     "text-encoder-lite": "git://github.com/coolaj86/TextEncoderLite.git#e1e031b",
     "ui-select": "0.19.8",