a Collection of Helpers and Effects and Tricks that you might need in your project.
item remover is an element that when click on it removes its parent from the DOM and you can simply do that by given the class name remove-item to any element you want and for more advanced options you can use the data attributes for targeting specific element by an id selector data-target=”ID” or you can remove the closest element like the grandparent or siblings by a CSS Selector added to the attribute data- closest =”Class or ID or tagName” that’s it.
<!-- Example -->
<div class="target-element">
<a href="#" class="remove-item">Remove</a>
</div>
<!-- Example Target -->
<a href="#" class="remove-item" data-target="target-element">Remove</a>
<div id="target-element"></div>
<!-- Example Closest -->
<div class="target-element">
<div class="sub-element">
<a href="#" class="remove-item" data-closest=".target-element">Remove</a>
</div>
</div>
viewport detector is a function that check for certain element if its visible right now on the screen or not and when its show up to be visible you can do stuff to it like interring animations to make your elements fancy it comes with options to add CSS animation name and set a duration and a delay for it with data attributes
and to use that effect you can add a class name [ view-status ] and for css animation use attribute [ data-animation ] with a css animation name you can use tornado built-in animations for that and you can add a duration with [ data-duration=”0.5s” ] and you can delay your animation by [ data-delay=”1s” ] and also you can use the activation class to do your own effects with class name [ view-active ].
<div class="view-status" data-animation="fadeIn">...</div>
in order to use the tooltip you can easily by give your element class name tooltip then add a data-title attribute with your tip/hint text in it for an example Hover Me and see the code below.
<a href="#" class="tooltip" data-title="Default Tooltip Example">Hover Me</a>
you can change the position of a tooltip by changing the class to **tooltip-**position here is example of the 4 positions Default Position and Bottom Position and Start Position and End Position
<span class="tooltip" data-title="Default Position">Default</span>
<span class="tooltip-bottom" data-title="Bottom Position">Bottom</span>
<span class="tooltip-start" data-title="Direction Start Position">Start</span>
<span class="tooltip-end" data-title="Direction End Position">End</span>
for a responsive position of tooltip and avoid overflow elements you can do that by adding class name tooltip-responsive and it works like that if you have a default positioned tooltip and the element is closer to the top edge of the window will change the position to bottom position tooltip and the same thing applied to any other position.
<a href="#" class="tooltip-start tooltip-responsive" data-title="Direction Start Position">Start</a>
in order to create a responsive element upon Aspect Ratio you will need to create a wrapper element with class name responsive-element and inside of it you can create iframe or video or custom element with class name element-content , and the default size is 4:3 screen size for other sizes you can use one of this class names hd-size, classic-size, cinema-size, square-size