These look cool https://github.com/hakimel/Ladda
Two options for integrating:
1. html
Requires a class and a data-style attribute to be added to all form buttons:
<button class="ladda-button" data-style="expand-right"><span class="ladda-label">Submit</span></button>
2. JavaScript:
Ladda.bind( 'input[type=submit]' );
// Or stop after 10 seconds:
Ladda.bind( 'input[type=submit]', { timeout: 10000 } );
Or jQuery:
$( 'input[type=submit]' ).ladda( 'bind', { timeout: 10000 } );
Propsoed solution
I'm not sure which of these would really be better for this module. It seems slightly easier to safely choose which forms to add/not-to-add at the php layer in a form_alter so I'm thinking of using the html method as long as it's relatively easy to add the attributes to all buttons on a form.
Comments
Comment #1
roball commentedThat would really be cool (see the examples at http://lab.hakim.se/ladda/). Any progress on this?
Comment #2
gregglesAny progress would be in this issue, so no.
I don't plan to work on it myself, but if someone else did I'd be happy to review and commit.
Comment #3
roball commentedShould such code go into 7.x-2.x or would it be better to create a new branch such as 7.x-3.x for it?
Comment #4
gregglesAs long as it's backwards compatible, I think it's fine to add it to the 7.x-2.x branch.
Comment #5
gregglesComment #6
roball commentedComment #7
rymcveighI have been spending some time looking into implementing the ladda.js library into this module and have discovered one important fact. The ladda library relies on the submit inputs to be buttons. Unfortunately we can not guaranty all the submit inputs are buttons. I can think of a couple ways of getting around this. One would be to perform a
$('input.form-submit, button.form-submit').replaceWith('<button/>')in the JS then do aLadda.bind()on that button, another would be to change the input type to button with in thehook_form_alter, and another would be to customize the library to fit our needs by dissecting out the necessary code to get a similar behavior. In any case, adding a spinner image to an submit input isn't trivial since you can not place in image within an input[type="submit"]'s value attribute.Being that my strength is in JS I'm leaning toward the last option where we roll our own version of our own ladda.js to fit our needs. Does anyone else have any ideas on how to achieve adding this library to this module?
Comment #8
rymcveighI decided to go with changing the submit input to a button element using js since this implementation is reliant on js to begin with. I've added the ability to add a data-style and data-spinner-color to the element via the admin ui, the question is, do we want to also have the ability to add more of the library's custom options like data-color, data-size, data-spinner-size, and data-spinner-lines? Thoughts?
Comment #9
rymcveighComment #10
rymcveighComment #11
rymcveighI just discovered a glitch in my last patch. When dealing with views ui all visible forms in the DOM submit when using ladda library. I am working on a fix for that. I'm thinking I'll need to implement the library on click.
Comment #12
rymcveighHere's my new patch, I've included some logic that removes the hide_submit code from views_ui pages which resolves issues I was seeing with the ladda library and will resolve other issues this module is having with the views_ui.
Comment #13
mike.roberts commentedTested this and it's working, just have a few comments, some which I'm not sure can/need to be resolved.
1.) Typo in comment,
// Add a timeout to rerset the buttons (if needed).(this one should be fixed).2.) Breaks default Drupal styles, which is due to selector specificity in Drupal's css with
input.form-submitinstead of just.form-submitso I don't think there's anything you can do. You could add a css file that uses.form-submitthat just copies Drupal default theme's button styles so that it's pretty easy to override in a theme.3.) This isn't necessary since Ladda is MIT license, but perhaps it should be loaded through a library? Perhaps it's not worth the extra work and reliance on libraries module as well.
Comment #14
rymcveighThanks mike.roberts!
Comment #15
rymcveighmike.roberts, the styles I believe you are referring to in #2 are defined by the theme (ie Seven or Barktik) on both the admin and the front facing side of the site, not by core. This creates a bit of a wildcard regarding styling. I'd like to leave things in the css as-is and make no assumptions regarding the theme level's base styling and selectors. Instead I think I'll add the commonly used button class to the newly generated buttons so that it inherits any styles the theme has given that class. How does that sound?
Comment #16
rymcveighThis patch resolves the issues mike.roberts found in the last patch. I chose not to address any issues with css since the issue dealt with the Seven admin theme & the Barktik theme, and none of the other themes that ship with core. We can add the button/input styles from the Seven and Barktik theme if needed but I think we should avoid it since it relies on the assumption that the site is using one of these themes to style their submit buttons/inputs.
In this patch's current state, when the Ladda option is selected the submit inputs on forms are transformed into buttons so that we can add a spinner within them. The two core themes select the inputs via an element selector instead of just a class so the styles for the submit input do not carry over to the button element.
Being that this is determined by the theme I do not feel we should adjust any button css within our styles unless it is needed to achieve our effects.
Comment #17
kscheirerNormally we don't like 3rd party licensed code on d.o, but it looks like the MIT license is OK, see https://www.drupal.org/node/422996#comment-9654015. However, in that comment they still ask that you make an official exemption request.
You've also introduced 3 new variables that should be removed in hook_uninstall.
Otherwise, patch looks great!
Comment #18
rymcveighNice spot @ksheirer. Based on the thread ksheirer points out I recommend we pull Ladda out of the module and make it a library. Then disable the ladda option in the ui until the library is available. We shouldn't need to add the library module as a dependency since the module will still work without ladda or the library module. Does this option sound reasonable?
I'll visit the hook_uninstall suggestion kscheirer recommends and upload a new version of the patch after including the hook and altering things to look for the library. Thanks for the review kscheirer.
Comment #20
gregglesI reviewed now and had a few small changes including the variable deletes and bringing back some of the permission stuff with an exception for uid 1 so that uid 1 will basically always see it.
I also filed the exception request at https://www.drupal.org/node/2705657
Now committed with credit to you, Ryan :)
Thanks for the reviews, Mike and Karl!
Comment #21
c4rl commentedPatch seems mis-applied, see #2645506: Duplicate CSS files
Comment #23
greggles@c4rl re https://www.drupal.org/node/2705657#comment-11083767
Yes :) Libraries module seems great for things that might need to be loaded twice in a single page request or that are large and complex sets of code. This is a small number of simple files that are very unlikely to be needed twice in a single page request. In cases like that I think Libraries is overkill and painful for module users. As a module maintainer, Libraries support would mean I have to support not just this module, but also it's integration with Libraries and the proper functioning of downloading a file and sticking it in the right spot. Doesn't seem worth it.
Comment #24
roball commentedThis feature addition makes the module much more powerful - thanks a lot! Can we get a new release, so it can actually be used on production sites?
Comment #25
greggles@roball - sure, that will be at https://www.drupal.org/node/2708471 within 10 minutes or so.
Comment #26
roball commentedHm, after updating the Hide submit button module from 7.x-2.2 to 7.x-2.3 I see no changed configuration. In addition, I see no longer any effect on submitting forms :-(
Comment #27
rymcveigh@roball - Hmmm did you run db update and clear your js/css cache?
Comment #28
roball commented@rymcveigh, yes, I ran
drush updb, but there were No database updates required. Flushing all caches didn't make any difference. Where are the new settings supposed to appear?Comment #29
rymcveigh@roball, looks like the .module file was not updated with the latest greatest so browsers are looking in the wrong directory for the js file. Looking into it.
It is worth noting that this release includes new permissions where hide_submit will be disabled by default for all user with admin permissions.
Comment #31
gregglesSorry about that.
Should be fixed now https://www.drupal.org/node/2710943
Comment #32
rymcveighWorks on simplytest.me. Thanks @greggles!
Comment #33
roball commentedThanks for releasing Hide submit button 7.x-2.4, which finally works great with the new Blocking method "Built-in loading indicator.".