{{ attach_library('ui_patterns/layout_page.page_lib') }}

<h2>Altcom Toggle Examples</h2>

<p>
  The Page behavior comes with some useful JS functions triggered but data attributes.
  You can use these instead of crating your own behaviors to do similar things.<br>
  The key data attribute is <code>data-alt-toggle</code>. Below are some examples and
  explanations.
</p>

<p>
  The main parameters are :
</p>

<pre>
  <code>data-alt-toggle</code>  The function to use (all functions have this).
  <code>data-alt-target</code>  The main target of the function (most functions have this).
  <code>data-alt-once</code>    Whether to remove the function after it's run (most functions have this).
  <code>data-alt-delay</code>   The delay offset in calling the function (some functions have this).
</pre>

<h3>Auto</h3>
<p>
  <b>Auto</b> allows this elements click handler will be triggered when the page loads.<br>
  <em>@note</em> this is 'click' and not 'mousedown'.
</p>
<p>
  In the example below, we just have the <code>data-alt-toggle="auto"</code> attribute set,
  which triggers it's in-line 'onclick' event.
</p>
{%- set snippet -%}
<a data-alt-toggle="auto" onclick="this.innerText='My Text had changed'">Original text</a>
{%- endset -%}
<pre><code>{{ snippet|escape }}</code></pre>
<a class="btn btn-primary btn-sm" data-alt-toggle="auto" onclick="this.innerText='My Text had changed'">Original text</a>
<hr>

<h3>Clicker</h3>
<p>
  <b>Clicker</b> allows another elements click handler will be triggered when this element is clicked.<br>
  <em>@note</em> this is 'click' and not 'mousedown'.
</p>
<p>
  In the example below, we have the <code>data-alt-toggle="clicker"</code> and the
  <code>data-alt-target="#sibling"</code> attribute set. If you click 'A' then 'B's click handler
  is also triggered.
</p>
{%- set snippet -%}
<a data-alt-toggle="clicker"
   data-alt-target="clicker-b"
   id="clicker-a"
   class="btn btn-primary btn-sm">
   Change my sibling
</a>
{%- endset -%}
<pre><code>{{ snippet|escape }}</code></pre>
<a id="clicker-a"
   class="btn btn-primary btn-sm"
   data-alt-toggle="clicker"
   data-alt-target="clicker-b" >
  Change my sibling
</a>
<a id="clicker-b"
   class="btn btn-secondary btn-sm"
   onclick="this.innerText='My sibling changed my text'">
   Original text
</a>
<hr>

<h3 id="scroll-to-section">Scroll To</h3>
<p>
  <b>Scroll To</b> allows an element to be scrolled to when it is clicked, or scrolls the page
  to a target element.<br>
  <em>@note</em> this is 'click' and not 'mousedown'.
</p>
<p>
  In the two examples below, we have the <code>data-alt-toggle="scrollto"</code> and the attribute set.
  We also have one example with  <code>data-alt-target="self"</code> and  <code>data-alt-target="#target-id"</code>
  The 'self' option scrolls the page to the triggering element.<br>
  <em>@note</em> there is a site-wide page offset (120px approx) set in the page behavior and theme settings.
</p>
{%- set snippet -%}
<a data-alt-toggle="scrollto"
   data-alt-target="self"
   class="btn btn-primary btn-sm">
   Scroll to me
</a>
<a data-alt-toggle="scrollto"
   data-alt-target="scroll-to-section"
   class="btn btn-primary btn-sm">
   Scroll to section header
</a>
{%- endset -%}
<pre><code>{{ snippet|escape }}</code></pre>
<a data-alt-toggle="scrollto"
   data-alt-target="self"
   class="btn btn-primary btn-sm">
   Scroll to me
</a>
<a data-alt-toggle="scrollto"
   data-alt-target="scroll-to-section"
   class="btn btn-primary btn-sm">
   Scroll to section header
</a>
<hr>

<h3>State</h3>
<p>
  <b>State</b> allows an elements collapse state to be remembered and re-applied after context change.<br>
  This means if you open a BS Collapsible (or Tab), then the area it's in is reloaded via ajax, it's collapse
  state will be re-applied.
</p>
<p>
  In the example below, we have the <code>data-alt-toggle="state"</code> and the
  <code>data-alt-target="collapse"</code> attribute set. At present this only works for 'collapse' but can be made
  to work for Tabs and other BS elements easily. Collapse was the only use case so far i.e Journey Check.<br>
  You can test this by opening the tab, navigating away in Storybook, then coming back, as the page are loaded
  via JS.<br>
  <em>@note</em> this is applied to the collapse content pane, not the trigger.
</p>
{%- set snippet -%}
<div data-alt-toggle="state"
     data-alt-target="collapse"
     aria-labelledby="act-abc"
     id="aci-abc"
     class="collapse">
  Collapse content pane
</div>
{%- endset -%}
<pre><code>{{ snippet|escape }}</code></pre>
{% set content_attrs = create_attribute()
  .setAttribute('data-alt-toggle', 'state')
  .setAttribute('data-alt-target', 'collapse')
%}
<div class="row">
  <div class="col-md-6">
    {% include "@molecules/tm-bs/collapse/collapse.twig" with {
      "label": "Collapse trigger",
      "content": "Aliquid maxime officia nulla omnis...",
      "aiid": "abc",
      "toggle": "sign",
      "link_class": "aci-a-link",
      "content_class": "aci-a-content",
      "content_attributes": content_attrs,
    } %}
  </div>
</div>
<hr>

<h3>Form set and submit</h3>
<p>
  <b>Formsetsubmit</b> allows an element to set values on form inputs and submit the a form if requried.
</p>
<p>
  In the example below, we have the <code>data-alt-toggle="state"</code> and the
  <code>data-alt-target-data="..."</code> attribute set. The target data is a json string of target form inputs, the
  value parameter you want to set, and the actual value. This can be multiple. Finally, if you want to submit the form
  as well, you need the <code>data-alt-target-submit="my-form-id"</code><br>
  <em>@note</em> the json array of data will need to be escape!<br>
  For each item in the data array there are 3 attributes, <code>t</code>, <code>s</code> and <code>v</code>.
  These are Target ID (needs the hash), the type of value being set (most of the time this is 'value') and the Value.
</p>
{%- set snippet -%}
data = [{
    't': '#my-input-a',
    's': 'value',
    'v': 'New Value A',
  },
  {
    't': '#my-input-b',
    's': 'value',
    'v': 'New Value B',
}],;

<a data-alt-toggle="formsetsubmit"
   data-alt-target-data="[{"t":"#my-input-a","s":"value","v":"New Value A"},{"t":"#my-input-b","s":"value","v":"New Value B"}]"
   data-alt-target-submit="#my-submit" >
  Set form values & submit</a>
{%- endset -%}
<pre><code>{{ snippet|escape }}</code></pre>
<div class="row">
  <div class="col-md-6">
    {% set data = [
      {
        't': '#my-input-a',
        's': 'value',
        'v': 'New Value A',
      },
      {
        't': '#my-input-b',
        's': 'value',
        'v': 'New Value B',
      },
    ] %}
    {% set a_attrs = create_attribute()
      .setAttribute('data-alt-toggle', 'formsetsubmit')
      .setAttribute('data-alt-target-data', data|json_encode())
    %}
    <a {{ a_attrs }} class="btn btn-sm btn-secondary">Set form values</a>
    <a {{ a_attrs.setAttribute('data-alt-target-submit', '#my-submit') }}
      class="btn btn-sm btn-danger">Set form values & submit</a>
  </div>
  <form method="get" action="/" class="col-md-6">
    <div class="form-group">
      <label class="form-label" for="my-input-a">Label for A</label>
      <input class="form-control" id="my-input-a" name="my-input-a" type="text" value="empty">
    </div>
    <div class="form-group">
      <label class="form-label" for="my-input-b">Label for B</label>
      <input class="form-control" id="my-input-b" name="my-input-b" type="text" value="empty">
    </div>
    <div>
      <button class="btn btn-primary" id="my-submit" name="my-submit" type="submit" value="Submit">Submit</button>
    </div>
    <input type="hidden" id="path" name="path" value="=/story/templates-tm-utilities-altcom-toggle-altcom-toggle--altcom-toggle">
  </form>
</div>
<hr>

<h3>Tab close</h3>
<p>
  <b>Tabclose</b> allows an element to close a Tab in a Tabs component, and correctly trigger the BS tab close event.
  OK ok - This event doesnt quite exist, but sort of. If the Tabs as the Hider (a hidden tab use for closing all tabs)
  then it will trigger this. IF not (booo) it will just change the styles. This is because Tabs (unlike accordions) do
  not have an 'all closed' state, there should always be one open .
</p>
<p>
  In the example below, we have the <code>data-alt-toggle="tabclose"</code> and the
  <code>data-alt-target="my-target-tabs"</code> attribute set. We have two examples, one targeting a Tabs set that
  has the 'hider' tab, and one that doesnt.
</p>
{%- set snippet -%}
<a data-alt-toggle="tabclose"
   data-alt-target="collapse" >
   Close my tabs
</a>
{%- endset -%}
<pre><code>{{ snippet|escape }}</code></pre>
<div class="row">
  <div class="col-md-12">
    <a data-alt-toggle="tabclose"
       data-alt-target-tab="tbt-ai"
       data-alt-target-pane="tbi-ai"
       class="btn btn-sm btn-primary" >
      Close my tabs - Has Hider - All tabs at once
    </a>
    <a data-alt-toggle="tabclose"
       data-alt-target-tab="tbt-ax"
       data-alt-target-pane="tbi-ax"
       class="btn btn-sm btn-primary" >
      Close my tabs - No Hider - FAQ only
    </a>
  </div>
  <div class="col-md-6">
    {% include "@organisms/tm-bs/tabs/_tabs_items.twig" with {
      "items": [
        {
          "tbid": "ai",
          "title": "<i class=\"fas fa-question-circle\"></i> FAQs",
          "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Ut ornare lectus sit amet est placerat in egestas. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Tortor condimentum lacinia quis vel eros. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Scelerisque mauris pellentesque pulvinar pellentesque habitant. Blandit cursus risus at ultrices mi. Libero enim sed faucibus turpis in. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Commodo sed egestas egestas fringilla.",
          "first": true
        },
        {
          "tbid": "aii",
          "title": "<i class=\"far fa-newspaper\"></i> Commuter Club",
          "content": "<p>Integer vitae justo eget magna fermentum iaculis. Nunc sed augue lacus viverra vitae. Arcu cursus euismod quis viverra. Convallis aenean et tortor at. Felis eget nunc lobortis mattis aliquam faucibus. Dui faucibus in ornare quam viverra orci. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et malesuada fames ac turpis egestas integer eget. Et ultrices neque ornare aenean euismod elementum. Sed nisi lacus sed viverra. Euismod lacinia at quis risus sed. Sodales ut etiam sit amet. Pellentesque elit ullamcorper dignissim cras tincidunt. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Elit sed vulputate mi sit amet mauris commodo quis imperdiet.</p>",
          "first": false
        },
        {
          "tbid": "aiii",
          "title": "<i class=\"fas fa-compass\"></i> Season Direct",
          "content": "<p>Sed velit dignissim sodales ut eu sem integer vitae. Et egestas quis ipsum suspendisse. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Diam maecenas sed enim ut sem. Mauris augue neque gravida in. Purus gravida quis blandit turpis cursus in hac habitasse platea. Ut placerat orci nulla pellentesque dignissim enim. Convallis a cras semper auctor. Tempus iaculis urna id volutpat lacus laoreet. Lectus proin nibh nisl condimentum. In aliquam sem fringilla ut. Arcu risus quis varius quam. Sit amet volutpat consequat mauris nunc. Egestas purus viverra accumsan in nisl nisi scelerisque. Proin libero nunc consequat interdum.</p>",
          "first": false,
        }
      ],
      "pid": "abc",
      "allow_close": true,
      "wrapper_class": "tbw-a",
      "child_nav_classes": "tbn-a"
    } %}
  </div>
  <div class="col-md-6">
    {% include "@organisms/tm-bs/tabs/_tabs_items.twig" with {
      "items": [
        {
          "tbid": "ax",
          "title": "<i class=\"fas fa-question-circle\"></i> FAQs",
          "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Ut ornare lectus sit amet est placerat in egestas. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Tortor condimentum lacinia quis vel eros. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Scelerisque mauris pellentesque pulvinar pellentesque habitant. Blandit cursus risus at ultrices mi. Libero enim sed faucibus turpis in. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Commodo sed egestas egestas fringilla.",
          "first": true
        },
        {
          "tbid": "axx",
          "title": "<i class=\"far fa-newspaper\"></i> Commuter Club",
          "content": "<p>Integer vitae justo eget magna fermentum iaculis. Nunc sed augue lacus viverra vitae. Arcu cursus euismod quis viverra. Convallis aenean et tortor at. Felis eget nunc lobortis mattis aliquam faucibus. Dui faucibus in ornare quam viverra orci. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et malesuada fames ac turpis egestas integer eget. Et ultrices neque ornare aenean euismod elementum. Sed nisi lacus sed viverra. Euismod lacinia at quis risus sed. Sodales ut etiam sit amet. Pellentesque elit ullamcorper dignissim cras tincidunt. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Elit sed vulputate mi sit amet mauris commodo quis imperdiet.</p>",
          "first": false
        },
        {
          "tbid": "axxx",
          "title": "<i class=\"fas fa-compass\"></i> Season Direct",
          "content": "<p>Sed velit dignissim sodales ut eu sem integer vitae. Et egestas quis ipsum suspendisse. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Diam maecenas sed enim ut sem. Mauris augue neque gravida in. Purus gravida quis blandit turpis cursus in hac habitasse platea. Ut placerat orci nulla pellentesque dignissim enim. Convallis a cras semper auctor. Tempus iaculis urna id volutpat lacus laoreet. Lectus proin nibh nisl condimentum. In aliquam sem fringilla ut. Arcu risus quis varius quam. Sit amet volutpat consequat mauris nunc. Egestas purus viverra accumsan in nisl nisi scelerisque. Proin libero nunc consequat interdum.</p>",
          "first": false,
        }
      ],
      "pid": "abc",
      "wrapper_class": "tbw-a",
      "child_nav_classes": "tbn-a"
    } %}
  </div>
</div>
<hr>

<h3>Class Add On</h3>
<p>
  <b>Classaddon</b> allows an element to have a class applied when it enters the viewport.<br>
  This is particularly helpful for things like animations that you want to trigger when some thing scrolls in to view.
</p>
<p>
  <em>@note</em> the <code>data-classadd-on="view"</code> does not do anything at present, but a value is required.<br>
  The intentions is to have 'bottom', 'middle' and 'top' options for when the class is applied
</p>
{%- set snippet -%}
<div data-classadd-on="view"
     data-classadd-class="my-new-class"
     class="my-old-class">
     See my class change
</div>
{%- endset -%}
<pre><code>{{ snippet|escape }}</code></pre>
<div class="row">
  <div class="col-md-6">
    <style>
      .my-old-class{
        background-color: red;
        height: 100px;
        width: 100px;
        padding: 1rem;
        text-align: center;
        color: white;
        transition: all 0.2s;
        margin-left: 0px;
      }
      .my-new-class{
        background-color: blue;
        margin-left: 50px;
      }
    </style>
    <div data-classadd-on="view"
         data-classadd-class="my-new-class"
         class="my-old-class">
      See my class change
    </div>
  </div>
</div>
<hr>


<h3>Trigger UI Elements</h3>
<p>
  <b>TriggerUIElements</b> is not a altcom data attribute, but it's probably worth documenting here as it's part of the
  page behavior JS. The TriggerUIElements takes the anchor or hash from the URL and if it is a BootStrap UI component,
  it tries to trigger it. This works with Tabs, Collapse and Modals.
</p>
<p>
  <a target="_blank"
     href="/iframe.html?id=templates-tm-utilities-altcom-toggle-altcom-toggle--altcom-toggle&args=&viewMode=story#aci-zzz"
     >Open in new window </a> to see #aci-zzz applied, and the collapse open on page load.
</p>
<div class="row">
  <div class="col-md-6">
    {% include "@molecules/tm-bs/collapse/collapse.twig" with {
      "label": "Collapse trigger",
      "content": "Aliquid maxime officia nulla omnis...",
      "aiid": "zzz",
      "toggle": "sign",
      "link_class": "aci-a-link",
      "content_class": "aci-a-content",
    } %}
  </div>
</div>
<hr>


