Piwigo_Bratonien_Tools/js/public_selection.js

(function ($) {
  'use strict';

  var active = false;
  var selected = {};

  function candidateLinks() {
    return $('#thumbnails a[href], .thumbnails a[href]');
  }

  function imageIdFromHref(href) {
    if (!href) {
      return 0;
    }

    var patterns = [
      /(?:^|\/)picture(?:\.php)?\?\/(\d+)(?:[-/]|$)/i,
      /(?:^|\/)picture\/(\d+)(?:[-/]|$)/i,
      /(?:^|\/)image\/(\d+)(?:[-/]|$)/i,
      /[?&](?:image_id|image|picture_id|id)=(\d+)(?:&|$)/i
    ];

    for (var i = 0; i < patterns.length; i++) {
      var match = href.match(patterns[i]);
      if (match) {
        return parseInt(match[1], 10) || 0;
      }
    }

    return 0;
  }

  function imageIdFromLink($link) {
    var direct = $link.attr('data-image-id') || $link.data('image-id');
    if (direct) {
      return parseInt(direct, 10) || 0;
    }

    var $withId = $link.closest('[data-image-id]');
    if ($withId.length) {
      return parseInt($withId.attr('data-image-id'), 10) || 0;
    }

    return imageIdFromHref($link.attr('href') || '');
  }

  function itemFromLink($link) {
    // Prefer semantic list/card wrappers used by Piwigo themes and thumbnail
    // plugins. gdThumb is only one supported markup, not a dependency.
    var $item = $link.closest('li, .thumbnail, .thumbnailCategory, .gdthumb, .card');
    return $item.length ? $item.first() : $link;
  }

  function selectableLinks() {
    return candidateLinks().filter(function () {
      return imageIdFromLink($(this)) > 0;
    });
  }

  function refreshSelectableItems() {
    selectableLinks().each(function () {
      var $link = $(this);
      var imageId = imageIdFromLink($link);
      var $item = itemFromLink($link);
      $item.addClass('bratonien-selectable').attr('data-bratonien-image-id', imageId);
      if (selected[imageId]) {
        $item.addClass('bratonien-selected');
      }
    });
  }

  function updateBar() {
    var ids = Object.keys(selected);
    $('#bratonien-selection-count').text(ids.length);
    $('#bratonien-selection-download').prop('disabled', ids.length === 0);
  }

  function setActive(value) {
    active = value;
    $('body').toggleClass('bratonien-selection-active', active);
    $('#bratonien-selection-bar').prop('hidden', !active);
    $('#bratonien-selection-toggle').toggleClass('active', active);
    refreshSelectableItems();
    if (!active) {
      clearSelection();
    }
  }

  function clearSelection() {
    selected = {};
    $('.bratonien-selectable').removeClass('bratonien-selected');
    updateBar();
  }

  $(document).on('click', '#bratonien-selection-toggle', function (e) {
    e.preventDefault();
    setActive(!active);
  });

  $(document).on('click', '#thumbnails a[href], .thumbnails a[href]', function (e) {
    if (!active) {
      return;
    }

    var $link = $(this);
    var imageId = imageIdFromLink($link);
    if (!imageId) {
      return;
    }

    e.preventDefault();
    e.stopPropagation();

    var $item = itemFromLink($link);
    if (selected[imageId]) {
      delete selected[imageId];
      $item.removeClass('bratonien-selected');
    } else {
      selected[imageId] = true;
      $item.addClass('bratonien-selected');
    }
    updateBar();
  });

  $(document).on('click', '#bratonien-selection-clear', function () {
    clearSelection();
  });

  $(document).on('click', '#bratonien-selection-download', function () {
    var ids = Object.keys(selected);
    if (!ids.length || !window.BratonienSelectionConfig) {
      return;
    }

    var separator = window.BratonienSelectionConfig.downloadUrl.indexOf('?') === -1 ? '?' : '&';
    window.location.href = window.BratonienSelectionConfig.downloadUrl + separator + 'bratonien_selection=' + encodeURIComponent(ids.join(','));
  });

  // Some plugins append thumbnails after the initial page render. Refresh the
  // markers without depending on any particular thumbnail implementation.
  $(document).ajaxComplete(function () {
    if (active) {
      refreshSelectableItems();
    }
  });
})(jQuery);