h5p-php-library/js/h5p-library-details.js

/* global H5PAdminIntegration H5PUtils */
var H5PLibraryDetails = H5PLibraryDetails || {};

(function ($) {

  H5PLibraryDetails.PAGER_SIZE = 20;
  /**
   * Initializing
   */
  H5PLibraryDetails.init = function () {
    H5PLibraryDetails.$adminContainer = H5P.jQuery(H5PAdminIntegration.containerSelector);
    H5PLibraryDetails.library = H5PAdminIntegration.libraryInfo;

    // currentContent holds the current list if data (relevant for filtering)
    H5PLibraryDetails.currentContent = H5PLibraryDetails.library.content;

    // The current page index (for pager)
    H5PLibraryDetails.currentPage = 0;

    // The current filter
    H5PLibraryDetails.currentFilter = '';

    // We cache the filtered results, so we don't have to do unneccessary searches
    H5PLibraryDetails.filterCache = [];

    // Append library info
    H5PLibraryDetails.$adminContainer.append(H5PLibraryDetails.createLibraryInfo());

    // Append node list
    H5PLibraryDetails.$adminContainer.append(H5PLibraryDetails.createContentElement());
  };

  /**
   * Create the library details view
   */
  H5PLibraryDetails.createLibraryInfo = function () {
    var $libraryInfo = $('<div class="h5p-library-info"></div>');

    $.each(H5PLibraryDetails.library.info, function (title, value) {
      $libraryInfo.append(H5PUtils.createLabeledField(title, value));
    });

    return $libraryInfo;
  };

  /**
   * Create the content list with searching and paging
   */
  H5PLibraryDetails.createContentElement = function () {
    if (H5PLibraryDetails.library.notCached !== undefined) {
      return H5PUtils.getRebuildCache(H5PLibraryDetails.library.notCached);
    }

    if (H5PLibraryDetails.currentContent === undefined) {
      H5PLibraryDetails.$content = $('<div class="h5p-content empty">' + H5PLibraryDetails.library.translations.noContent + '</div>');
    }
    else {
      H5PLibraryDetails.$content = $('<div class="h5p-content"><h3>' + H5PLibraryDetails.library.translations.contentHeader + '</h3></div>');
      H5PLibraryDetails.createSearchElement();
      H5PLibraryDetails.createPageSizeSelector();
      H5PLibraryDetails.createContentTable();
      H5PLibraryDetails.createPagerElement();
      return H5PLibraryDetails.$content;
    }
  };

  /**
   * Creates the content list
   */
  H5PLibraryDetails.createContentTable = function () {
    // Remove it if it exists:
    if (H5PLibraryDetails.$contentTable) {
      H5PLibraryDetails.$contentTable.remove();
    }

    H5PLibraryDetails.$contentTable = H5PUtils.createTable();

    var i = (H5PLibraryDetails.currentPage*H5PLibraryDetails.PAGER_SIZE);
    var lastIndex = (i+H5PLibraryDetails.PAGER_SIZE);

    if (lastIndex > H5PLibraryDetails.currentContent.length) {
      lastIndex = H5PLibraryDetails.currentContent.length;
    }
    for (; i<lastIndex; i++) {
      var content = H5PLibraryDetails.currentContent[i];
      H5PLibraryDetails.$contentTable.append(H5PUtils.createTableRow(['<a href="' + content.url + '">' + content.title + '</a>']));
    }

    // Appends it to the browser DOM
    H5PLibraryDetails.$contentTable.insertAfter(H5PLibraryDetails.$search);
  };

  /**
   * Creates the pager element on the bottom of the list
   */
  H5PLibraryDetails.createPagerElement = function () {
    H5PLibraryDetails.$previous = $('<button type="button" class="previous h5p-admin"><</button>');
    H5PLibraryDetails.$next = $('<button type="button" class="next h5p-admin">></button>');

    H5PLibraryDetails.$previous.on('click', function () {
      if (H5PLibraryDetails.$previous.hasClass('disabled')) {
        return;
      }

      H5PLibraryDetails.currentPage--;
      H5PLibraryDetails.updatePager();
      H5PLibraryDetails.createContentTable();
    });

    H5PLibraryDetails.$next.on('click', function () {
      if (H5PLibraryDetails.$next.hasClass('disabled')) {
        return;
      }

      H5PLibraryDetails.currentPage++;
      H5PLibraryDetails.updatePager();
      H5PLibraryDetails.createContentTable();
    });

    // This is the Page x of y widget:
    H5PLibraryDetails.$pagerInfo = $('<span class="pager-info"></span>');

    H5PLibraryDetails.$pager = $('<div class="h5p-content-pager"></div>').append(H5PLibraryDetails.$previous, H5PLibraryDetails.$pagerInfo, H5PLibraryDetails.$next);
    H5PLibraryDetails.$content.append(H5PLibraryDetails.$pager);

    H5PLibraryDetails.$pagerInfo.on('click', function () {
      var width = H5PLibraryDetails.$pagerInfo.innerWidth();
      H5PLibraryDetails.$pagerInfo.hide();

      // User has updated the pageNumber
      var pageNumerUpdated = function () {
        var newPageNum = $gotoInput.val()-1;
        var intRegex = /^\d+$/;

        $goto.remove();
        H5PLibraryDetails.$pagerInfo.css({display: 'inline-block'});

        // Check if input value is valid, and that it has actually changed
        if (!(intRegex.test(newPageNum) && newPageNum >= 0 && newPageNum < H5PLibraryDetails.getNumPages() && newPageNum != H5PLibraryDetails.currentPage)) {
          return;
        }

        H5PLibraryDetails.currentPage = newPageNum;
        H5PLibraryDetails.updatePager();
        H5PLibraryDetails.createContentTable();
      };

      // We create an input box where the user may type in the page number
      // he wants to be displayed.
      // Reson for doing this is when user has ten-thousands of elements in list,
      // this is the easiest way of getting to a specified page
      var $gotoInput = $('<input/>', {
        type: 'number',
        min : 1,
        max: H5PLibraryDetails.getNumPages(),
        on: {
          // Listen to blur, and the enter-key:
          'blur': pageNumerUpdated,
          'keyup': function (event) {
            if (event.keyCode === 13) {
              pageNumerUpdated();
            }
          }
        }
      }).css({width: width});
      var $goto = $('<span/>', {
        'class': 'h5p-pager-goto'
      }).css({width: width}).append($gotoInput).insertAfter(H5PLibraryDetails.$pagerInfo);

      $gotoInput.focus();
    });

    H5PLibraryDetails.updatePager();
  };

  /**
   * Calculates number of pages
   */
  H5PLibraryDetails.getNumPages = function () {
    return Math.ceil(H5PLibraryDetails.currentContent.length / H5PLibraryDetails.PAGER_SIZE);
  };

  /**
   * Update the pager text, and enables/disables the next and previous buttons as needed
   */
  H5PLibraryDetails.updatePager = function () {
    H5PLibraryDetails.$pagerInfo.css({display: 'inline-block'});

    if (H5PLibraryDetails.getNumPages() > 0) {
      var message = H5PUtils.translateReplace(H5PLibraryDetails.library.translations.pageXOfY, {
        '$x': (H5PLibraryDetails.currentPage+1),
        '$y': H5PLibraryDetails.getNumPages()
      });
      H5PLibraryDetails.$pagerInfo.html(message);
    }
    else {
      H5PLibraryDetails.$pagerInfo.html('');
    }

    H5PLibraryDetails.$previous.toggleClass('disabled', H5PLibraryDetails.currentPage <= 0);
    H5PLibraryDetails.$next.toggleClass('disabled', H5PLibraryDetails.currentContent.length < (H5PLibraryDetails.currentPage+1)*H5PLibraryDetails.PAGER_SIZE);
  };

  /**
   * Creates the search element
   */
  H5PLibraryDetails.createSearchElement = function () {

    H5PLibraryDetails.$search = $('<div class="h5p-content-search"><input placeholder="' + H5PLibraryDetails.library.translations.filterPlaceholder + '" type="search"></div>');

    var performSeach = function () {
      var searchString = $('.h5p-content-search > input').val();

      // If search string same as previous, just do nothing
      if (H5PLibraryDetails.currentFilter === searchString) {
        return;
      }

      if (searchString.trim().length === 0) {
        // If empty search, use the complete list
        H5PLibraryDetails.currentContent = H5PLibraryDetails.library.content;
      }
      else if (H5PLibraryDetails.filterCache[searchString]) {
        // If search is cached, no need to filter
        H5PLibraryDetails.currentContent = H5PLibraryDetails.filterCache[searchString];
      }
      else {
        var listToFilter = H5PLibraryDetails.library.content;

        // Check if we can filter the already filtered results (for performance)
        if (searchString.length > 1 && H5PLibraryDetails.currentFilter === searchString.substr(0, H5PLibraryDetails.currentFilter.length)) {
          listToFilter = H5PLibraryDetails.currentContent;
        }
        H5PLibraryDetails.currentContent = $.grep(listToFilter, function (content) {
          return content.title && content.title.match(new RegExp(searchString, 'i'));
        });
      }

      H5PLibraryDetails.currentFilter = searchString;
      // Cache the current result
      H5PLibraryDetails.filterCache[searchString] = H5PLibraryDetails.currentContent;
      H5PLibraryDetails.currentPage = 0;
      H5PLibraryDetails.createContentTable();

      // Display search results:
      if (H5PLibraryDetails.$searchResults) {
        H5PLibraryDetails.$searchResults.remove();
      }
      if (searchString.trim().length > 0) {
        H5PLibraryDetails.$searchResults = $('<span class="h5p-admin-search-results">' + H5PLibraryDetails.currentContent.length + ' hits on ' + H5PLibraryDetails.currentFilter + '</span>');
        H5PLibraryDetails.$search.append(H5PLibraryDetails.$searchResults);
      }
      H5PLibraryDetails.updatePager();
    };

    var inputTimer;
    $('input', H5PLibraryDetails.$search).on('change keypress paste input', function () {
      // Here we start the filtering
      // We wait at least 500 ms after last input to perform search
      if (inputTimer) {
        clearTimeout(inputTimer);
      }

      inputTimer = setTimeout( function () {
        performSeach();
      }, 500);
    });

    H5PLibraryDetails.$content.append(H5PLibraryDetails.$search);
  };

  /**
   * Creates the page size selector
   */
  H5PLibraryDetails.createPageSizeSelector = function () {
    H5PLibraryDetails.$search.append('<div class="h5p-admin-pager-size-selector">' + H5PLibraryDetails.library.translations.pageSizeSelectorLabel + ':<span data-page-size="10">10</span><span class="selected" data-page-size="20">20</span><span data-page-size="50">50</span><span data-page-size="100">100</span><span data-page-size="200">200</span></div>');

    // Listen to clicks on the page size selector:
    $('.h5p-admin-pager-size-selector > span', H5PLibraryDetails.$search).on('click', function () {
      H5PLibraryDetails.PAGER_SIZE = $(this).data('page-size');
      $('.h5p-admin-pager-size-selector > span', H5PLibraryDetails.$search).removeClass('selected');
      $(this).addClass('selected');
      H5PLibraryDetails.currentPage = 0;
      H5PLibraryDetails.createContentTable();
      H5PLibraryDetails.updatePager();
    });
  };

  // Initialize me:
  $(document).ready(function () {
    if (!H5PLibraryDetails.initialized) {
      H5PLibraryDetails.initialized = true;
      H5PLibraryDetails.init();
    }
  });

})(H5P.jQuery);