JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<article class="topic topic-nsfw">
    <div class="topic-content text">
        <a href="#">
            <img src="http://world-blog.ru/wp-content/uploads/2014/04/IQzRR2FKq91.jpg" />
        </a>
    </div>
    <div class="topic-footer"></div>
</article>

CSS

.icon-ok:before {
    content: "» ";
    color: green;
}

JavaScript

var PIXELATENSFW_VALUE = 0.2,
    PIXELATENSFW_REVEAL = false,
    PIXELATENSFW_REVEALONCLICK = false
;

$(window).on('load', function () {
    var topics_nsfw = $('.topic-nsfw'),
        initialized = false,
        need_pixelate = $.cookie('pixelatensfw') == null ? true : !!parseInt($.cookie('pixelatensfw'))
    ;

    function init_pixelate() {
        $('.topic-content img', topics_nsfw).each(function () {
            var img = $(this);
            if (img.prop('complete')) {
                console.log(img.prop('complete'));
                // Ошибка NS_ERROR_NOT_AVAILABLE в Firefox  возникает в любом случае. Хз как это обойти.
                img.pixelate({
                    value: PIXELATENSFW_VALUE,
                    reveal:PIXELATENSFW_REVEAL,
                    revealonclick: PIXELATENSFW_REVEALONCLICK
                });
            }
            else {
                img.load(function () {
                    img.pixelate({
                        value: PIXELATENSFW_VALUE,
                        reveal:PIXELATENSFW_REVEAL,
                        revealonclick: PIXELATENSFW_REVEALONCLICK
                    });
                });
            }
        });

        $('img', topics_nsfw)
            .on('mouseenter', function () {
                var self = $(this);
                if (!self.data('unfolded')) {
                    self.find('canvas').hide().next('img').show();
                }
            })
            .on('mouseleave', function () {
                var self = $(this);
                if (!self.data('unfolded')) {
                    self.find('canvas').show().next('img').hide();
                }
            })
        ;

        $('canvas:not(.unfoldable > canvas)', topics_nsfw).on('mouseenter', function () {
            $(this).hide().next('img').show();
        });
        $('canvas:not(.unfoldable > canvas) + img', topics_nsfw).on('mouseleave', function () {
            $(this).hide().prev('canvas').show();
        });
 ...