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

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 // Usage:
   6 //
   7 // 1. Add some buttons to your modal, one with class="pager-next" and
   8 // one with class="pager-prev".
   9 //
  10 // 2. Put multiple .modal-body sections in your modal.
  11 //
  12 // 3. Add a "pager-count" div where page count is shown.
  13 // For ex: "1 of 10" when showing first page of 10 pages.
  14
  15 $(document).on('click', '.modal .pager-next', function() {
  16     var $modal = $(this).parents('.modal');
  17     $modal.data('page', ($modal.data('page') || 0) + 1).trigger('pager:render');
  18     return false;
  19 }).on('click', '.modal .pager-prev', function() {
  20     var $modal = $(this).parents('.modal');
  21     $modal.data('page', ($modal.data('page') || 1) - 1).trigger('pager:render');
  22     return false;
  23 }).on('ready ajax:success', function() {
  24     $('.modal').trigger('pager:render');
  25 }).on('pager:render', '.modal', function() {
  26     var $modal = $(this);
  27     var page = $modal.data('page') || 0;
  28     var $panes = $('.modal-body', $modal);
  29     if (page >= $panes.length) {
  30         // Somehow moved past end
  31         page = $panes.length - 1;
  32         $modal.data('page', page);
  33     } else if (page < 0) {
  34         page = 0;
  35     }
  36
  37     var $pager_count = $('.pager-count', $modal);
  38     $pager_count.text((page+1) + " of " + $panes.length);
  39
  40     var selected = $panes.hide().eq(page).show();
  41     enableButton($('.pager-prev', $modal), page > 0);
  42     enableButton($('.pager-next', $modal), page < $panes.length - 1);
  43     function enableButton(btn, ok) {
  44         btn.prop('disabled', !ok).
  45             toggleClass('btn-primary', ok).
  46             toggleClass('btn-default', !ok);
  47     }
  48 });