Bug 23837

That will not be the only place where you will see something like this. When writing TT syntax, it leaves 'whitespace' in the code, unless you do something like [%- ... -%].

See:
http://www.template-toolkit.org/docs/manual/Syntax.html#section_Chomping_Whitespace

It will not hurt the output either way. HTML doesn't care about extra spaces.

(In reply to Katrin Fischer from comment #1)
> That will not be the only place where you will see something like this. When
> writing TT syntax, it leaves 'whitespace' in the code, unless you do
> something like [%- ... -%].
> 
> See:
> http://www.template-toolkit.org/docs/manual/Syntax.
> html#section_Chomping_Whitespace
> 
> It will not hurt the output either way. HTML doesn't care about extra spaces.

It doesn't hurt the output, until you try to manipulate it with jQuery.  Then it becomes a nightmare.

(In reply to Christopher Brannon from comment #2)
> (In reply to Katrin Fischer from comment #1)
> > That will not be the only place where you will see something like this. When
> > writing TT syntax, it leaves 'whitespace' in the code, unless you do
> > something like [%- ... -%].
> > 
> > See:
> > http://www.template-toolkit.org/docs/manual/Syntax.
> > html#section_Chomping_Whitespace
> > 
> > It will not hurt the output either way. HTML doesn't care about extra spaces.
> 
> It doesn't hurt the output, until you try to manipulate it with jQuery. 
> Then it becomes a nightmare.

Let's check that then - what are you trying to do with jQuery?

I am pondering if this is a WONTFIX because I don't think we can easily fix it. Adding Owen.

Created attachment 159776 [details]
Modifying statuses exmple

Katrin, in response to your question (which I never saw, sorry), we modify the look of the statuses so they stand out better.

Does this come down to lacking specific classes in the markup to target with jQuery?

(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.