[Koha-bugs] [Bug 23837] detail.pl contains a lot of whitespace in the td.status cell

[bugzilla-daemon at bugs.koha-community.org]

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=23837

--- Comment #7 from Christopher Brannon <cbrannon at cdalibrary.org> ---
(In reply to Owen Leonard from comment #6)
> Does this come down to lacking specific classes in the markup to target with
> jQuery?

I think developers have made huge strides in adding the classes that are
currently there.  If you saw the attachment above, you can see what we have
done to dress up the statuses and make them stand out better for different
statuses.  Here is the code I use to achieve this:

  //Item Status Enhancement on detail.pl (v22.05)
  if ($('#catalog_detail').length) {
    $('td.status').wrapInner('<ul class="fa-ul"></ul>');
    //Fix missing status classes (v22.05);
    $('.status span:contains("Available")').addClass('available');
    //END Fix missing status classes
    $('#holdings_table span.available').addClass('label
label-success').unwrap().wrap('<h3></h3>');
    $('.status span.holdonitem').wrapInner('<li class="holdonitem"></li>');
    $('.status li.holdonitem').unwrap().prepend('<i class="fa-li fa
fa-info-circle"></i>');
    $('.status span.intransit').wrapInner('<li class="intransit" style="color:
darkorange;"></li>');
    $('.status li.intransit').unwrap().prepend('<i class="fa-li fa
fa-truck"></i>');
    $('.status span.waitingat').wrapInner('<li class="waitingat" style="color:
darkorange;"></li>');
    $('.status li.waitingat').unwrap().prepend('<i class="fa-li fa
fa-clock-o"></i>');
    $('.status span.heldfor').wrapInner('<li class="heldfor" style="color:
darkorange;"></li>');
    $('.status li.heldfor').unwrap().prepend('<i class="fa-li fa
fa-caret-right"></i>');
    $('.status li.heldfor').wrap('<ul class="fa-ul"></ul>');
    $('.status li.heldfor').each(function() {
      $(this).parent('ul').next('a').appendTo(this);
    });
    var status_triangle = ['lost','dmg','notforloan','wdn'];
    status_triangle.forEach(function(item) {
      $('.status span.' + item).wrapInner('<li class="' + item + '"></li>');
      $('.status li.' + item).unwrap().prepend('<i class="fa-li fa
fa-exclamation-triangle"></i>');
    });
    $('.status span.datedue').wrapInner('<li class="datedue"></li>');
    $('.status li.datedue').unwrap().prepend('<i class="fa-li fa
fa-id-card-o"></i>');

    $('.status li.datedue').each(function() {
      var UnwrappedText = $(this).contents().filter(function() {
        return this.nodeType == 3 && this.nodeValue.trim();
      }).wrap('<span class="datedue_text"></span>').end();
      $('span.datedue_text').each(function() {
        var cleantext = $(this).html().replace(/(?:(?:\r\n|\r|\n)\s*)/gm, " ");
        $(this).html(cleantext);
        if (cleantext.includes(': due')) {
          $(this).addClass('patrondue');
        }
      });
    });
    $('.status span.patrondue').wrapInner('<li class="patrondue"></li>');
    $('.status li.patrondue').unwrap().wrap('<ul class="fa-ul"></ul>');
    $('.status li.patrondue').each(function() {
      $(this).text($(this).text().replace(/.: due/g, "Due"));
      $(this).prepend('<i class="fa-li fa fa-caret-right"></i>');
    });
    $('#catalog_detail .shelvingloc:contains("Recently
Returned")').each(function() {
      $(this).html($(this).html().replace(/\(Recently Returned\)/g, '<span
class="label label-default recentlyreturned">Recently Returned</span>'));
    });
  }
  //END Item Status Enhancement on detail.pl

I think the issue is that there are a lot of elements within the status that
are challenging to isolate.  The whitespace is one hurdle, but isolating
specific sections of the status remains a challenge.

I think classes to each part would be helpful, but I don't know if I am asking
too much.  I do there is enough data being pumped into the single status cell
that it would warrant some granular classes.  Again, it just might be me.  I
think the end result of what I do works and looks great, but not everyone
cares.  I guess it is up to any developer that thinks it is worth adding
classes to each section or not.

-- 
You are receiving this mail because:
You are the assignee for the bug.
You are watching all bug changes.