apps/workbench/app/assets/javascripts/modal_pager.js

   1 // Usage:
   2 //
   3 // 1. Add some buttons to your modal, one with class="pager-next" and
   4 // one with class="pager-prev".
   5 //
   6 // 2. Put multiple .modal-body sections in your modal.
   7
   8 $(document).on('click', '.modal .pager-next', function() {
   9     var $modal = $(this).parents('.modal');
  10     $modal.data('page', ($modal.data('page') || 0) + 1).trigger('pager:render');
  11     return false;
  12 }).on('click', '.modal .pager-prev', function() {
  13     var $modal = $(this).parents('.modal');
  14     $modal.data('page', ($modal.data('page') || 1) - 1).trigger('pager:render');
  15     return false;
  16 }).on('ready ajax:success', function() {
  17     $('.modal').trigger('pager:render');
  18 }).on('pager:render', '.modal', function() {
  19     var $modal = $(this);
  20     var page = $modal.data('page') || 0;
  21     var $panes = $('.modal-body', $modal);
  22     if (page >= $panes.length) {
  23         // Somehow moved past end
  24         page = $panes.length - 1;
  25         $modal.data('page', page);
  26     } else if (page < 0) {
  27         page = 0;
  28     }
  29     var selected = $panes.hide().eq(page).show();
  30     enableButton($('.pager-prev', $modal), page > 0);
  31     enableButton($('.pager-next', $modal), page < $panes.length - 1);
  32     function enableButton(btn, ok) {
  33         btn.prop('disabled', !ok).
  34             toggleClass('btn-primary', ok).
  35             toggleClass('btn-default', !ok);
  36     }
  37 });