Pistachio the front end framework and pattern library for graze.com

contents:


    animations

    Love Like Dislike

    This example use the product card as an example for the Love Like Dislike animations.

    The implementation is different from the way other JS modules are implemented. The events around this module are triggering other functionality that isn't directly linked to the animations. So in order to decouple the animations from element events eg. click - the module is initialised and then the element is passed to the module with the type of animation.

    <script>
        import Animations from './animations'
    
        let animation = new Animations
        let aniButton = document.getElementById('animation-button')
    
        aniButton.addEventListener('click', () => {
            // ... some unrelated functionality ...
            animation('love | like | dislike', aniButton)
        })
    </script>
    <ul class="grid ratings-cards" data-p-module="love-like-dislike">
        <li class="ratings-card-wrapper grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel grid__panel--list-xxs">
            <div class="ratings-card">
                <div class="ratings-card__image-wrapper">
                    <div class="disliked-overlay"><span class="fa fa-thumbs-down"></span></div>
                    <a href="#">
                        <img src="https://d25wfeb1dj765h.cloudfront.net/catalog/product/cache/small_image/450x375/beff4985b56e3afdbeabfc89641a4582/b/o/boston-baguettes-multipack-small-image-759.jpg" class="ratings-card__image">
                    </a>
                </div>
    
                <section class="love-like-dislike">
                    <div class="try-wrapper">
                        <label class="try">Deselect all</label>
                        <input type="radio" class="love-like-dislike__radio" name="lld-1" selected />
                    </div>
                    <div class="love-wrapper">
                        <label class="love"><span class="fa fa-heart-o"></span> love</label>
                        <input type="radio" class="love-like-dislike__radio" name="lld-1" />
                    </div>
                    <div class="like-wrapper">
                        <label class="like"><span class="fa fa-thumbs-o-up"></span> like</label>
                        <input type="radio" class="love-like-dislike__radio" name="lld-1" />
                    </div>
                    <div class="dislike-wrapper">
                        <label class="dislike"><span class="fa fa-thumbs-o-down"></span> dislike</label>
                        <input type="radio" class="love-like-dislike__radio" name="lld-1" />
                    </div>
                </section>
            </div>
        </li>
    </ul>
    • Ratings card full example

      • Product title

        From £4.99
      • Product title

        From £4.99
      • Product title

        From £4.99
      • Product title

        From £4.99