Spinner now configureable in the Settings

client/components/lists/listBody.jade

@@ -24,7 +24,7 @@ template(name="listBody")
 
 template(name="spinnerList")
   .sk-spinner.sk-spinner-list(
-    class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.spinnerName}}"
+    class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.getSpinnerNameLC}}"
     id="showMoreResults")
     +spinnerRaw
 

client/components/main/spinner.js

@@ -1,17 +1,37 @@
-function getSpinnerName() {
-  return 'Bounce'
-}
+import Settings from '/models/settings';
 
 Spinner = {
   getSpinnerTemplate() {
-    return 'spinner' + getSpinnerName()
+    return 'spinner' + this.getSpinnerName();
   },
 
   getSpinnerTemplateRaw() {
-    return 'spinner' + getSpinnerName() + 'Raw';
+    return 'spinner' + this.getSpinnerName() + 'Raw';
   },
 
-  spinnerName: getSpinnerName().toLowerCase(),
+  currentSetting: new ReactiveVar(),
+
+  currentSettings() {
+    return this.currentSetting.get();
+  },
+
+  getSpinnerName() {
+    let ret = 'Bounce';
+    if (this.currentSettings()) {
+      ret = this.currentSettings().spinnerName;
+    }
+    return ret;
+  },
+
+  getSpinnerNameLC() {
+    return this.getSpinnerName().toLowerCase();
+  },
 }
 
 Blaze.registerHelper('Spinner', Spinner);
+
+Meteor.subscribe('setting', {
+  onReady() {
+    Spinner.currentSetting.set(Settings.findOne());
+  },
+});

client/components/settings/settingBody.jade

@@ -173,6 +173,9 @@ template(name='layoutSettings')
     li.layout-form
       .title {{_ 'default-authentication-method'}}
       +selectAuthenticationMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod)
+    li.layout-form
+      .title {{_ 'spinner-names'}}
+      +selectSpinnerName(spinnerName=currentSetting.spinnerName)
     li.layout-form
       .title {{_ 'custom-product-name'}}
       .form-group
@@ -222,3 +225,11 @@ template(name='selectAuthenticationMethod')
         option(value="{{value}}" selected) {{_ value}}
       else
         option(value="{{value}}") {{_ value}}
+
+template(name='selectSpinnerName')
+  select#spinnerName
+    each spinner in spinners
+      if isSelected spinner
+        option(value="{{spinner}}" selected) {{spinner}}
+      else
+        option(value="{{spinner}}") {{spinner}}

client/components/settings/settingBody.js

@@ -199,6 +199,8 @@ BlazeComponent.extendComponent({
       $('input[name=displayAuthenticationMethod]:checked').val() === 'true';
     const defaultAuthenticationMethod = $('#defaultAuthenticationMethod').val();
 
+    const spinnerName = $('#spinnerName').val();
+
     try {
       Settings.update(Settings.findOne()._id, {
         $set: {
@@ -213,6 +215,7 @@ BlazeComponent.extendComponent({
           displayAuthenticationMethod,
           defaultAuthenticationMethod,
           automaticLinkedUrlSchemes,
+          spinnerName,
         },
       });
     } catch (e) {
@@ -384,3 +387,12 @@ Template.selectAuthenticationMethod.helpers({
     return Template.instance().data.authenticationMethod === match;
   },
 });
+
+Template.selectSpinnerName.helpers({
+  spinners() {
+    return ['Bounce', 'Wave']
+  },
+  isSelected(match) {
+    return Template.instance().data.spinnerName === match;
+  },
+});

models/settings.js

@@ -46,6 +46,10 @@ Settings.attachSchema(
       type: String,
       optional: false,
     },
+    spinnerName: {
+      type: String,
+      optional: true,
+    },
     hideLogo: {
       type: Boolean,
       optional: true,

server/publications/settings.js

@@ -23,6 +23,7 @@ Meteor.publish('setting', () => {
         customHTMLbeforeBodyEnd: 1,
         displayAuthenticationMethod: 1,
         defaultAuthenticationMethod: 1,
+        spinnerName: 1,
       },
     },
   );