first commit

assets/global/js/demo_pages/components_buttons.js

@@ -0,0 +1,82 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Buttons and button dropdowns
+ *
+ *  Demo JS code for components_buttons.html page
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var Buttons = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Progress buttons
+    var _componentLadda = function() {
+        if (typeof Ladda == 'undefined') {
+            console.warn('Warning - ladda.min.js is not loaded.');
+            return;
+        }
+
+        // Button with spinner
+        Ladda.bind('.btn-ladda-spinner', {
+            dataSpinnerSize: 16,
+            timeout: 2000
+        });
+
+        // Button with progress
+        Ladda.bind('.btn-ladda-progress', {
+            callback: function(instance) {
+                var progress = 0;
+                var interval = setInterval(function() {
+                    progress = Math.min(progress + Math.random() * 0.1, 1);
+                    instance.setProgress(progress);
+
+                    if( progress === 1 ) {
+                        instance.stop();
+                        clearInterval(interval);
+                    }
+                }, 200);
+            }
+        });
+    };
+
+    // Loading button
+    var _componentLoadingButton = function() {
+        $('.btn-loading').on('click', function () {
+            var btn = $(this),
+                initialText = btn.data('initial-text'),
+                loadingText = btn.data('loading-text');
+            btn.html(loadingText).addClass('disabled');
+            setTimeout(function () {
+                btn.html(initialText).removeClass('disabled');
+            }, 3000)
+        });
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _componentLadda();
+            _componentLoadingButton();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    Buttons.init();
+});