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 // 3. Add a "pager-count" div where page count is shown.
   9 // For ex: "1 of 10" when showing first page of 10 pages.
  10
  11 $(document).on('click', '.modal .pager-next', function() {
  12     var $modal = $(this).parents('.modal');
  13     $modal.data('page', ($modal.data('page') || 0) + 1).trigger('pager:render');
  14     return false;
  15 }).on('click', '.modal .pager-prev', function() {
  16     var $modal = $(this).parents('.modal');
  17     $modal.data('page', ($modal.data('page') || 1) - 1).trigger('pager:render');
  18     return false;
  19 }).on('ready ajax:success', function() {
  20     $('.modal').trigger('pager:render');
  21 }).on('pager:render', '.modal', function() {
  22     var $modal = $(this);
  23     var page = $modal.data('page') || 0;
  24     var $panes = $('.modal-body', $modal);
  25     if (page >= $panes.length) {
  26         // Somehow moved past end
  27         page = $panes.length - 1;
  28         $modal.data('page', page);
  29     } else if (page < 0) {
  30         page = 0;
  31     }
  32
  33     var $pager_count = $('.pager-count', $modal);
  34     $pager_count.text((page+1) + " of " + $panes.length);
  35
  36     var selected = $panes.hide().eq(page).show();
  37     enableButton($('.pager-prev', $modal), page > 0);
  38     enableButton($('.pager-next', $modal), page < $panes.length - 1);
  39     function enableButton(btn, ok) {
  40         btn.prop('disabled', !ok).
  41             toggleClass('btn-primary', ok).
  42             toggleClass('btn-default', !ok);
  43     }
  44 });