瀏覽代碼

[core] Add ko binding for spinner

Johan Ahlen 9 年之前
父節點
當前提交
c6389477d3

+ 39 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2401,3 +2401,42 @@ body {
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
   transition: opacity .3s;
 }
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.hue-spinner {
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
+  -moz-animation: fadein 2s; /* Firefox < 16 */
+  -ms-animation: fadein 2s; /* Internet Explorer */
+  -o-animation: fadein 2s; /* Opera < 12.1 */
+  animation: fadein 2s;
+  margin: auto 0;
+  vertical-align: center;
+}
+
+.hue-spinner-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -8px;
+  margin-top: -8px;
+}
+
+.hue-spinner-center.hue-spinner-large {
+  margin-left: -13px !important;
+  margin-top: -13px !important;
+}
+
+.hue-spinner-large {
+  font-size: 26px !important;
+}
+
+.hue-spinner i {
+  font-size: 16px;
+  color: #aaa;
+}

+ 50 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -66,6 +66,56 @@
     }
   };
 
+  /**
+   * Binding for adding a spinner to the page
+   *
+   * Example:
+   *
+   * <!-- ko hueSpinner: loading --><!-- /ko -->
+   *
+   * Or with options:
+   *
+   * <!-- ko hueSpinner: { spin: loading, center: true, size: 'large' } --><!-- /ko -->
+   *
+   */
+  ko.bindingHandlers.hueSpinner = {
+    update: function (element, valueAccessor) {
+      var value = ko.unwrap(valueAccessor);
+
+      var options = {
+        size: 'default',
+        center: false
+      };
+
+      var spin = false;
+      if (ko.isObservable(valueAccessor())) {
+        spin = value();
+      } else {
+        var value = valueAccessor();
+        $.extend(options, value);
+        spin = ko.isObservable(value.spin) ? value.spin() : value.spin;
+      }
+
+      ko.virtualElements.emptyNode(element);
+
+      if (spin) {
+        var container = document.createElement('DIV');
+        container.className = 'hue-spinner';
+        var spinner = document.createElement('I');
+        spinner.className = 'fa fa-spinner fa-spin';
+        if (options.size === 'large') {
+          spinner.className += ' hue-spinner-large';
+        }
+        if (options.center) {
+          spinner.className += ' hue-spinner-center';
+        }
+        container.appendChild(spinner);
+        ko.virtualElements.prepend(element, container);
+      }
+    }
+  };
+  ko.virtualElements.allowedBindings.hueSpinner = true;
+
   ko.bindingHandlers.visibleOnHover = {
     init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
       var options = valueAccessor();