123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- (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) {
- if ($.contains(document.body, this)) {
- 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);
|