I'm Watching You

staci comes shipped with a few attribute observers to make life easier for common tasks. You can place signals within these attributes to modify the behaviour of elements.

st-cloak

st-cloak allows us to determine an element's visibility. Note: this is different than an element's display.

Use st-cloak when you want to hide an element from view, but wish to perserve it's place in the overall layut of the page.

The code for the above example:

 1<div>
 2    <script>
 3        staci.set('isCloaked', true);
 4        staci.event('cloakToggle', () => {
 5            let [isCloaked, setIsCloaked] = staci.get('isCloaked');
 6            setIsCloaked(!isCloaked);
 7        })
 8    </script>
 9    <button st-click='cloakToggle'>Click to Toggle</button>
10    <p st-cloak="{| isCloaked |}">My placement was perserved!</p>
11</div>

st-hide

st-hide allows us to determine an elements display. Note: this is different than an elements visibility.

Use st-hide when you want an element, along with its placement in the DOM (its padding, margin, ect), to be removed from view.

The code for the above example:

 1<div>
 2    <script>
 3        staci.set('isHidden', true);
 4        staci.event('hideToggle', () => {
 5            let [isHidden, setIsHidden] = staci.get('isHidden');
 6            setIsHidden(!isHidden);
 7        })
 8    </script>
 9    <button st-click='hideToggle'>Click to Toggle</button>
10    <p st-hide="{| isHidden |}">My placement was not perserved!</p>
11</div>