scratch-v3.html

<!-- The following code will select all <p> tags and apply the css rules defined in the <css> tag. Note that the <css> tag is a child of the <select-all> tag, and that the <select-all> tag has a 'targets' attribute. This attribute tells the library to select all elements that match the selector in the 'targets' attribute. In this case, we're selecting all <p> tags. -->

<when event="load" media="(min-width:768px)">
    <select-all targets="p">
        <css>
            <color>red</color>
            <font-size>16px</font-size>
        </css>
        <attr>
            <aria-hidden>true</aria-hidden>
        </attr>
    </select-all>
</when>



<select-all>
    <targets select-all="p">
        <prev>h2</prev>
    </targets>
    <css>
        <color>red</color>
        <font-size>16px</font-size>
    </css>
    <attr>
        <aria-hidden>true</aria-hidden>
    </attr>

</select-all>



<!--
this code will make all h3s that precede a p tag red with font-size 16px.

-->
<select-all>
    <targets select-all="p">
        <prev>h3</prev>
    </targets>
    <css>
        <color>orange</color>
        <font-style>italic</font-style>
    </css>
</select-all>

<!--

The following code will select all elements with the class 'myClass' and apply the jQuery method 'addClass' with the value of 'newClass'. Note that the <add-class> tag is a child of the <select-all> tag, and that the <select-all> tag has a 'targets' attribute. This attribute tells the library to select all elements that match the selector in the 'targets' attribute. In this case, we're selecting all elements with the class 'myClass'.

-->
<select-all targets=".myClass">
    <add-class>otherClass</add-class>
</select-all>

<if day="tuesday">
    <else>
        <select-all targets=".show-tuesday">
            <hide></hide>
        </select-all>
    </else>
</if>



<!-- here's a more complex example of a notification bar built with Hijinx. -->

<!-- the actual markup -->
<div id="notification-bar">
    This is a notification. <button id="close-button">Close</button>
</div>

<!-- Hijinx -->


<!-- when we click #close-button -->
<select-all targets="#close-button">

    <on-click>

        <!-- hide the notification bar -->
        <select-all targets="#notification-bar">
            <hide></hide>
        </select-all>

        <!-- set the value of 'notificationBar' to 'closed'-->
        <store>
            <notificationBar>closed</notificationBar>
        </store>

    </on-click>

</select-all>


<!-- If the value of 'notificationBar' is 'closed' -->
<if store="notificationBar" is value="closed">
    <!-- hide the notification bar -->
    <select-all targets="#notification-bar">
        <hide></hide>
    </select-all>
</if>






<!-- Setting -->

<!-- Here's an example that uses 'set' to define a jQuery object. elLinks is a collection of links found within .card elements (sets will run first), and we can use their values inside other operations, like wrapping .card elements in a link that references the href of the appropriate item in the collection. -->


<set name="elLinks">
    <select-all targets=".card">
        <find>a</find>
        <attr>href</attr>
    </select-all>
</set>


<select-all targets=".card">
    <wrap>
        <a href="[elLinks]"></a>
    </wrap>
</select-all>

<!-- accessibility example: getting post titles, then adding a sr-only span to each link with its post's title. -->

<!-- create a group called postTitles, which are the texts of all the .post titles -->
<set name="postTitles">
    <select-all targets=".post">
        <find>.post-title</find>
        <text></text>
    </select-all>
</set>

<!--  append a span with the text of the appropriate postTitle to each post link -->
<select-all targets=".post a">
    <append>
        <span class="sr-only">about [postTitles]</span>
    </append>
</select-all>




<!--

    This will use this document's HTML syntax to add local navigation to a page

    1. Look through all .prose elements and find all h2 elements. Get their text and store it, along with a url-friendly version of the text, in sets called 'localNavItemsText' and 'localNavItemsUrl'.

    2. Create a <nav> element with the class 'local-nav' and append it to the .prose element. Then, for each item in the localNavItems set, append an <a> element with the text of the item and a href of '#item-url-friendly-text'.

    3. Then, for each .prose element, find all h2 elements and wrap each of them in an <a> element with a href of '#item-url-friendly-text'.

-->

<!-- create a set called 'localNavItems' that contains the text of all h2 elements in .prose elements -->
<set name="localNavItemsText">
    <select-all targets=".prose">
        <find>h2</find>
        <text></text>
    </select-all>
</set>


<!-- create a set called 'localNavItemsUrl' that contains the url-friendly text of all h2 elements in .prose elements -->
<set name="localNavItemsUrl">
    <select-all targets="[localNavItemsText]">
        <!-- urlify is a custom method that converts text to a url-friendly format with a '#' at the beginning -->
        <urlify></urlify>
    </select-all>
</set>

<!-- This is optional, .local-nav can already be in the DOM -->
<select-all targets=".prose">
    <append>
        <nav class="local-nav"></nav>
    </append>
</select-all>

<!-- for each item in the localNavItems set, append an <a> element with the text of the item and a href of '#item-url-friendly-text'. -->
<select-all targets=".local-nav">
    <append>
        <a href="[localNavItemsUrl]">[localNavItemsText]</a>
    </append>
</select-all>


<!-- for each .prose element, find all h2 elements and wrap each of them in an <a> element with a href of '#item-url-friendly-text'. -->
<select-all targets=".prose h2">
    <wrap>
        <a href="[localNavItemsUrl]"></a>
    </wrap>
</select-all>



<!-- This will use a custom <localnav> element to add local navigation to a page -->
<localnav targets=".prose" headings="h2, h3" destination=".local-nav"></localnav>

<!-- This will use a custom <localnav> element to add local navigation to a page with h3 headings -->
<localnav>
    <targets>.prose</targets>
    <headings>h2, h3</headings>
    <destination>.local-nav</destination>
    <scrollspy>true</scrollspy>
</localnav>



<!--
    we can also use hijinx to perform greensock animations, first by establishing a timeline, then by adding tweens to that timeline, like from and to tweens.

    for example, the following HTML syntax which passes 'to' properties as child tags of a <to> tag instead of as attributes

    -->

<to>
    <color>red</color>
    <duration>1</duration>
</to>

<!-- we can wrap those timelines in a scrolltrigger, which will fire the timeline when the element is scrolled into view. For example, using our above example, we can wrap the timeline in a scrolltrigger (a tag which has its own child tag properties like <start> and <end>) like so: -->






<scrolltrigger name="fades" users=".fades-parent">
    <start>top 50%</start>
    <end>bottom 50%</end>
    <scrub>true</scrub>
    <animation>
        <timeline>
            <to targets="p">
                <color>red</color>
                <duration>1</duration>
                <stagger>0.5</stagger>
            </to>
            <to targets="h2">
                <color>blue</color>
                <duration>1</duration>
                <stagger>0.5</stagger>
            </to>
        </timeline>
    </animation>
</scrolltrigger>



<!-- make p's red -->
<animation>
    <on-scroll targets="section">
        <start>top 50%</start>
        <end>bottom 50%</end>
        <scrub>true</scrub>
    </on-scroll>
    <timeline>
        <to targets="p">
            <color>red</color>
            <duration>1</duration>
            <stagger>0.5</stagger>
        </to>
    </timeline>
</animation>





<!-- we can also use GSAP's batch() method to animate a group of elements as they all collectively enter the viewport. Here's
the html for that, using a <batch> element and appropriate child tags for batch properties: -->

<batch>
    <targets>section</targets>
    <on-scroll>
        <start>top 50%</start>
        <end>bottom 50%</end>
        <scrub>true</scrub>
    </on-scroll>
    <timeline>
        <to targets="p">
            <color>red</color>
            <duration>1</duration>
            <stagger>0.5</stagger>
        </to>
    </timeline>






    <!-- Notes -->

    <!--

    -we'll want to perform an 'each' on the collection of elements that we're targeting.
    -we want to use arriveJS to watch for new elements that match the selector.
    -methods like insertBefore or insertAfter will need to be able to target elements that are not yet in the DOM, so we'll need to use arriveJS for that as well.
    -we want to be able to add a class to something AND select that element with select-all

    -consider skipping the select-all and allowing components (click handlers, animations) to be declared inside the HTML, e.g.

    -->


    <button>
        <span>Click Me</span>

        <on-click>

            <!-- hide the notification bar -->
            <select-all targets="#notification-bar">
                <hide></hide>
            </select-all>

            <!-- set the value of 'notificationBar' to 'closed'-->
            <store>
                <notificationBar>closed</notificationBar>
            </store>
        </on-click>

    </button>

    <!-- or -->

    <div>
        <p>Headline goes here!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa delectus nemo nostrum est, autem aut, non
            enim temporibus, vel omnis rem ipsum alias perferendis et sunt ratione reprehenderit natus.</p>
        <scrolltrigger>fades</scrolltrigger>
    </div>


    <!--
    -general lifecycle


    1.
    2. creating new elements
    3. adding attributes
    4.
    5.

-->


    <radio-group>

    </radio-group>

    <input-text>

    </input-text>

    <input-range id="" slider="true" persist="true">

    </input-range>

    <input-button-group>

    </input-button-group>

    {{hero-inner}} : `


    `

    Mobius section panel:

    {{hero-outer}}

    {{hero-inner}}

    {{/hero-outer}}



    Part panel:

    name = {{hero-outer}}

    content = <div>jkl;</div>

    {{myDiv}} : '<div></div>',
    {{myDiv}} : '<div></div>',



    <!--- {{mypart}} --->
    <div>mypartcontent</div>

    <!--- {{myotherpart}} --->
    <div>myotherpartcontent</div>

    <!--- {{mypart}} --->
    <div>mypartcontent</div>

    <!--- {{myotherpart}} --->
    <div>myotherpartcontent</div>

    <!--- {{mypart}} --->
    <div>mypartcontent</div>

    <!--- {{myotherpart}} --->
    <div>myotherpartcontent</div>