Sequences - Xref - Sequences - range

<h4>Orders</h4>

{fragment 'order-list'}
  <ul>
    {sequence '101..103', name='number'}<li>Order {$number}</li>{/sequence}
  </ul>
{/fragment}

<p>The page goes on here.</p>

<p>{sequence '1..8'}{$sequence} {/sequence}</p>
<p>{sequence fibonacci, rows=8}{$sequence} {/sequence}</p>
<p>{sequence prime, from=10, rows=6}{$sequence} {/sequence}</p>
<p>{sequence 'A..F'}{$sequence} {/sequence}</p>

<p>Stylesheets this page needs:</p>
<ul>{stack 'styles'}</ul>

{sequence '1..3', name='n'}
  {push 'styles', once='badge'}<li>badge.css</li>{/push}
  <span class="badge">badge {$n}</span>
{/sequence}

{push 'styles'}<li>footer.css</li>{/push}

<table border='1'>
  {sequence '10..30', increment=10, name='row'}
    <tr>
      {sequence '1..5', name='column'}
        <td>{$row | + $column}</td>      
      {/sequence}
    </tr>
  {/sequence}
</table>

{block}
  $xxx variables are set once at the beginning of a level<br>
  %xxx variables are set on every occurence inside a level<br>
{/block}

{page 'miscellaneous/level_and_occurrence_variables'}

<p>
  {block}
    PAD is data driven, the PAD data concepts are named Level and Occurence
    <br><br>
    Below example: <br>
    - Is two levels deep <br>
    - The level 'row' has 3 occurences<br>
    - The level 'column' has 5 occurences<br><br>
  {/block}
  {example 'lvl_occ/1', skipNames, center}
</p>

{block}
  If not specifield for a PAD tag then default it has 1 occurence.
  <br><br><hr><br>
  Just for fun, below the above example implemented in a few different ways.
  <br>
  Hopefully all this magic will be explained in this manual.
{/block}

<p> 
{sequence '2..12', name='xxx'}
  {example 'lvl_occ/{$xxx}', skipNames{notFirst},skipOpen,skipHeader{/notFirst}{notLast},skipClose{/notLast}}
{/sequence}
</p>

{meta title='Response fragments'}

<p>A search result, a page of a list, a counter: a part of a page that the browser wants to refresh on its own. <code>{fragment 'name'}...{/fragment}</code> names such a part. A normal request renders the whole page, the fragment in its place:</p>

{example 'fragments/response_fragments_1'}

<p>A request that adds <code>&amp;padFragment=order-list</code> to the URL gets that fragment and nothing else - the same template serves the full page and the update:</p>

{example 'fragments/response_fragments_2'}

<h2>How it works</h2>

<ul>
  <li>The page renders up to the end of the fragment, and the fragment's rendering - closing pipe included - is the whole response. What comes after it is not rendered at all.</li>
  <li>The response is bare, like a <code>padInclude</code> request: no wrapper, no tidy.</li>
  <li>The first fragment of that name to finish rendering is the one sent. Keep a fragment unconditional and put conditions inside it: a request for a fragment that never rendered is an error under the strict check, and an empty 404 otherwise.</li>
  <li>The page's PHP may decide too: <code>$padFragmentOnly = 'order-list';</code> - for instance when the request carries an <code>HX-Request</code> header.</li>
</ul>

<h2>With ajax and HTMX</h2>

<ul>
  <li><code>{ajax 'orders', fragment='order-list'}</code> fetches only that fragment of the page into its div.</li>
  <li>HTMX: <code><div hx-get="?orders&amp;padFragment=order-list" hx-trigger="every 5s"></code> swaps in the fresh list.</li>
  <li>An HTMX request needs no <code>padFragment</code> when it swaps an element named like the fragment: <code>hx-target="#order-list"</code> sends <code>HX-Target: order-list</code>, and a page with a fragment of that name answers it alone. A page without one renders whole, as it would otherwise. See {manual 'htmx'}.</li>
</ul>

{meta title='Sequences'}

<p>The <code>{sequence}</code> tag generates values instead of reading them: a
range, a mathematical series, letters - 122 types, each iterated like any data
tag:</p>

{example 'fragments/sequences_1'}

<p>That is the smallest corner of a whole subsystem: plays that keep, remove or flag terms,
stores that pass a sequence from one tag to the next, actions that transform it, and random
draws with their own rules. It has an application of its own, which is its manual:</p>

<p><b><a href="{$padHost}sequence/">The sequence application</a></b> - every type, play,
action and option, demonstrated live.</p>
<h2>Seeing and hearing them</h2>

<p>A sequence is data like any other, so {tag 'chart'} and {tag 'sparkline'} draw it
straight away with <code>sequence=</code>:</p>

{example 'fragments/sequences_2'}

<p>The sequence application has three pages built on that: the
<a href="{$padHost}sequence/?gallery">Gallery</a> draws every type beside the OEIS entry its
terms come from, <a href="{$padHost}sequence/?listen">Listen</a> plays a sequence as notes -
Recamán's is the famous one - in an audio file written into the page, and
<a href="{$padHost}sequence/?guess">Guess</a> shows the start of a sequence and asks for the
next term.</p>

{meta title='Stacks: push and stack'}

<p>A component knows which script or stylesheet it needs; the layout knows where those belong. <code>{push 'name'}</code> adds rendered text to a named stack where the component is used, and <code>{stack 'name'}</code> prints the stack - in the <code><head></code>, say, far above the components that fill it.</p>

{example 'fragments/stacks_1'}

<h2>Filled in at the end</h2>

<p>A page renders from top to bottom, so a <code>{stack}</code> in the head comes out before anything below it has pushed. It prints a marker instead, and the marker is replaced by the stack once the whole page has rendered: it gets every push of the page, made above it or below it, in the order they were made.</p>

<h2>once</h2>

<ul>
  <li><code>once='chart'</code> - the first push of that key is kept and a later one is skipped before its content renders, so a component used fifty times renders its script tag once. Keys are per stack.</li>
  <li><code>once</code> without a key - a push whose rendered text the stack already holds is dropped.</li>
</ul>

<h2>Where pushes come from</h2>

<ul>
  <li>The content of a push renders where the tag stands, with the variables of that spot - inside a loop, the row's.</li>
  <li>A plain <code>{page}</code> or <code>{code}</code> pass adds to the page's stacks; a sandbox, clean or reset pass keeps its own.</li>
  <li>A push inside a <code>{cache}</code> section is stored with the section and made again on every hit.</li>
  <li>From PHP: <code>padStackPush ( 'scripts', $html, $once )</code>.</li>
</ul>

{block}
<p>
Normally all the occurences for a level are retrieved and placed in an internal table before
the processing takes place.<br>
When this table is processed PAD knows for example when it is handling the last Occurence.<br>
The below example with the {tag 'sequence'} tag does do that:
</p>
{/block}

{page 'walk/1'}

{block}
<p>
  But some PAD tags use the PAD construct 'walking', then the occurences are processed one by one.<br>
  The tags {tag 'while'} &amp; {tag 'until'} are an example of this.<br>
  This 'walking' construct breaks those special pad tags like {tag 'last'} & {tag 'border'} that give information about a {tag 'tag'}<br>
  Also the 'Data Handling' options are broken since those work on the all occurences at once.
</p>
{/block}

{page 'walk/2'}

{block}
<p>
  To solve above breaking, place the result of a walking tag into the Data Store, and use it as a own tag.
</p>
{/block}

{page 'walk/3'}

{usesFragment 'walk/_lib/lib'}

<blockquote>

{block}

  {pad data='reference'}

    {sequence '1..{$lvl}'}
      <blockquote>
    {/sequence}

    <h3 id="{$type | slug}">{$type}</h3>

    <blockquote>

      {getReference '{$dir}', '{$xref}'}

        {if $dir}
          <a href="?dir{?xref}{?type}{?item}">{$item}</a>
        {elseif $pages}
          <a href="?pages{?xref}{?type}{?item}">{$item}</a>
        @else@
          {$item}
        {/if}

        &nbsp; 
        
      {/getReference}
            
    </blockquote>

    {sequence '1..{$lvl}'}
      </blockquote>
    {/sequence}

  {/pad}

{/block}

</blockquote>

<p>10 ways to show the same table</p>

{example 'tableFun/fun_0',   skipNames,skipClose}
{example 'tableFun/fun_1_a', skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_1_b', skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_2_a', skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_3_a', skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_3_b', skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_5_a', skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_5_b', skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_8',   skipNames,skipOpen,skipHeader,skipClose}
{example 'tableFun/fun_9',   skipNames,skipOpen,skipHeader}

<table border='1'>
  {sequence '10..30', increment=10}
    <tr>
      {sequence '1..5'}
        {cell $-2 + $-1}
      {/sequence}
    </tr>
  {/sequence}
</table>