Skip to content
  • azul's avatar
    ujs links with toggling icons and spinner in between · fc9f74ae
    azul authored
    Links with icons to toggle between two states and show a spinner in between.
    The link send POST and DELETE requests depending on the state.
    
    Usage:
    
    set data-toggle on a link like this
    
    link_to label, url,
      remote: true,
      icon: :current
      data: { toggle: { current_icon_class: other_icon_class } },
      method: :post
    
    When the link is clicked the current_icon_class will change to spinner_icon.
    Once the request returns it will...
     * switch to other_icon_class if the request was successful
     * return to current_icon_class if the request failed.
    
    It will also switch the method on successful clicks so it alternates between
    create and destroy actions
    
    This only uses browser js - it does not rely on prototype to ease the
    migration to jquery (which it also does not rely on).
    In order to enable this without altering class strings in plain js we
    use the classList property of HTML5. This is present in all recent
    browsers but IE. So for IE we have a shim.
    fc9f74ae