diff sites/all/modules/ctools/js/auto-submit.js @ 0:ff03f76ab3fe

initial version
author danieleb <danielebarchiesi@me.com>
date Wed, 21 Aug 2013 18:51:11 +0100
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sites/all/modules/ctools/js/auto-submit.js	Wed Aug 21 18:51:11 2013 +0100
@@ -0,0 +1,100 @@
+(function($){
+/**
+ * To make a form auto submit, all you have to do is 3 things:
+ *
+ * ctools_add_js('auto-submit');
+ *
+ * On gadgets you want to auto-submit when changed, add the ctools-auto-submit
+ * class. With FAPI, add:
+ * @code
+ *  '#attributes' => array('class' => array('ctools-auto-submit')),
+ * @endcode
+ *
+ * If you want to have auto-submit for every form element,
+ * add the ctools-auto-submit-full-form to the form. With FAPI, add:
+ * @code
+ *   '#attributes' => array('class' => array('ctools-auto-submit-full-form')),
+ * @endcode
+ *
+ * If you want to exclude a field from the ctool-auto-submit-full-form auto submission,
+ * add the class ctools-auto-submit-exclude to the form element. With FAPI, add:
+ * @code
+ *   '#attributes' => array('class' => array('ctools-auto-submit-exclude')),
+ * @endcode
+ *
+ * Finally, you have to identify which button you want clicked for autosubmit.
+ * The behavior of this button will be honored if it's ajaxy or not:
+ * @code
+ *  '#attributes' => array('class' => array('ctools-use-ajax', 'ctools-auto-submit-click')),
+ * @endcode
+ *
+ * Currently only 'select', 'radio', 'checkbox' and 'textfield' types are supported. We probably
+ * could use additional support for HTML5 input types.
+ */
+
+Drupal.behaviors.CToolsAutoSubmit = {
+  attach: function(context) {
+    // 'this' references the form element
+    function triggerSubmit (e) {
+      var $this = $(this);
+      if (!$this.hasClass('ctools-ajaxing')) {
+        $this.find('.ctools-auto-submit-click').click();
+      }
+    }
+
+    // the change event bubbles so we only need to bind it to the outer form
+    $('form.ctools-auto-submit-full-form', context)
+      .add('.ctools-auto-submit', context)
+      .filter('form, select, input:not(:text, :submit)')
+      .once('ctools-auto-submit')
+      .change(function (e) {
+        // don't trigger on text change for full-form
+        if ($(e.target).is(':not(:text, :submit, .ctools-auto-submit-exclude)')) {
+          triggerSubmit.call(e.target.form);
+        }
+      });
+
+    // e.keyCode: key
+    var discardKeyCode = [
+      16, // shift
+      17, // ctrl
+      18, // alt
+      20, // caps lock
+      33, // page up
+      34, // page down
+      35, // end
+      36, // home
+      37, // left arrow
+      38, // up arrow
+      39, // right arrow
+      40, // down arrow
+       9, // tab
+      13, // enter
+      27  // esc
+    ];
+    // Don't wait for change event on textfields
+    $('.ctools-auto-submit-full-form input:text, input:text.ctools-auto-submit', context)
+      .filter(':not(.ctools-auto-submit-exclude)')
+      .once('ctools-auto-submit', function () {
+        // each textinput element has his own timeout
+        var timeoutID = 0;
+        $(this)
+          .bind('keydown keyup', function (e) {
+            if ($.inArray(e.keyCode, discardKeyCode) === -1) {
+              timeoutID && clearTimeout(timeoutID);
+            }
+          })
+          .keyup(function(e) {
+            if ($.inArray(e.keyCode, discardKeyCode) === -1) {
+              timeoutID = setTimeout($.proxy(triggerSubmit, this.form), 500);
+            }
+          })
+          .bind('change', function (e) {
+            if ($.inArray(e.keyCode, discardKeyCode) === -1) {
+              timeoutID = setTimeout($.proxy(triggerSubmit, this.form), 500);
+            }
+          });
+      });
+  }
+}
+})(jQuery);