SOURCE CODE: UizeSite.Widgets.TourBar.Html (view docs)

<%@
  input ({
    idPrefix:'string',
    tour:'string',
    pageUrl:'string'
  });

  required (
    'UizeSite.Examples',
    'Uize.Url'
  );
%>
<%
  var
    _tour = input.tour,
    _tourExamples = UizeSite.Examples ()
  ;

  /*** if tour is not "all", find all pages for this specific tour ***/
    if (_tour.toLowerCase () != 'all') {
      var
        _examples = _tourExamples,
        _keywordsMatchRegExp = new RegExp ('\\b' + _tour + '\\b','i')
      ;
      _tourExamples = [];
      for (var _exampleNo = -1, _examplesLength = _examples.length; ++_exampleNo < _examplesLength;) {
        var _example = _examples [_exampleNo];
        _keywordsMatchRegExp.test (_example.keywords) && _tourExamples.push (_example);
      }
    }

  var
    _tourExamplesLength = _tourExamples.length,
    _tourExampleUrlSuffix = '?tour=' + _tour,
    _pageNo = Uize.indexIn (
      Uize.map (_tourExamples,function (_tourExample) {return Uize.Url.from (_tourExample.path).fileName}),
      Uize.Url.from (input.pageUrl).fileName
    )
  ;

  function _getExamplePageLink (_example) {
    return _example.path.match (/[\\\/]([^\\\/]+)$/) [1] + _tourExampleUrlSuffix;
  }
%>

<div id="<% .idPrefix %>" class="<%= m.rootNodeCssClasses () %>">
  <div class="<%= m.cssClass ('buttonShell') %> <%= m.cssClass ('buttonPreviousShell') %>"><%
    var _previousExample = _pageNo > 0 ? _tourExamples [_pageNo - 1] : null;
    if (_previousExample) {
    %><a href="<%= _getExamplePageLink (_previousExample) %>" class="<%= m.cssClass ('button') %> <%= m.cssClass ('buttonPrevious') %>"></a><%
    }
  %></div>
  <div class="<%= m.cssClass ('pagesShell') %>">
    <table class="<%= m.cssClass ('pages') %>">
      <tr><%
        for (var _tourExampleNo = -1; ++_tourExampleNo < _tourExamplesLength;) {
          var _tourExample = _tourExamples [_tourExampleNo];
        %><td>
          <a href="<%= _getExamplePageLink (_tourExample) %>" class="<%= m.cssClass ('page') + (_tourExampleNo == _pageNo ? ' ' + m.cssClass ('currentPage') : '') %>"></a>
        </td><%
        }
      %></tr>
    </table>
  </div>
  <div class="<%= m.cssClass ('buttonShell') %> <%= m.cssClass ('buttonNextShell') %>"><%
    var _nextExample = _pageNo < _tourExamplesLength - 1 ? _tourExamples [_pageNo + 1] : null;
    if (_nextExample) {
    %><a href="<%= _getExamplePageLink (_nextExample) %>" class="<%= m.cssClass ('button') %> <%= m.cssClass ('buttonNext') %>"></a><%
    }
  %></div>
</div>