AdBlockBlock

by joplomacedo

HTML

<div class="abb-layer">

    <div class="abb-modal">
        <div class="abb-modal_core">
            <div class="abb-slide abb-slide--id_initial is-active">
                <div class="abb-intro">
                    <p class="abb-headline">Hello there 👋</p>
                    <p class="abb-p">We know they might be inconvenient, but ads are what help keep our website running. If you like our website as much as we like working on it, would you consider doing us a huge favor and disabling AdBlock just for our website?</p>
                </div>

                <div class="abb-actions">

                    <div class="abb-action_row">
                        <span class="abb-action_btn abb-action_btn--positive" data-e-click="switch_to_select_ab">
                            <span class="abb-action_btn__emoji">
                                👍
                            </span>
                            Yes. Show me how to disable Ad-Block just for this website.
                        </span>
                    </div>

                    <div class="abb-action_row">
                        <span class="abb-action_btn abb-action_btn--negative" data-e-click="remind_later">
                            <span class="abb-action_btn__emoji">
                                👎
                            </span>
                            I'm not ready yet. Maybe later.
                        </span>
                    </div>
                </div>
            </div>

            <div class="abb-slide abb-slide--id_select_ab is-inactive">

                <div class="abb-intro">
                    <p class="abb-headline">Yay! We owe you big!</p>
                    <p class="abb-p">Select the AdBlock you use to see it's specific instructions.</p>
                </div>

                <ul class="abb-adblocker_list">
                    <li class="abb-adblocker_list__item">
                        <span data-e-click="switch_to_instructions_tab"...

CSS

@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800,900&display=swap');


*,
*:after,
*:before {
    box-sizing: border-box;
    font: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    outline: none;
    color: inherit;
    text-decoration: none;
}

ul,
ol,
li {
    list-style: none;
}

input,
select,
textarea {
    max-width: 100%;
}


:root {
	--bgc: #2e2ee2;
	--c: #fff;
	--bbc: rgba(255,255,255,.5);
}


html {
    font-family: nunito, helveticaneue;
    -webkit-font-smoothing: antialiased;
}


.abb-layer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.abb-modal {
    background-color: var(--bgc);
    color: var(--c);
    padding: 3em;
    line-height: 1.45;
    border-radius: 5px 5px 0 0;
    max-width: 40em;
    margin: auto;
    pointer-events: all;
}

.abb-modal_core {
    max-width: 50em;
}

.abb-slide.is-inactive {
    display: none;
}

.abb-intro {
    margin-bottom: 1em;
}

.abb-headline {
    font-weight: 700;
    font-size: 1.5em;
    margin-bottom: .5em;
}

.abb-action_row:not(:last-child) {
    margin-bottom: 1em;
}

.abb-action_btn,
.abb-action_btn__emoji {
	transition: .2s;
}

.abb-action_btn {
    display: inline;
    border-bottom: 1px solid var(--bbc);
    cursor: pointer;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.2;
}

.abb-action_btn--positive {}

.abb-action_btn--negative {}


.abb-action_btn:hover {
	border-bottom: 1px solid var(--c);
}

.abb-action_btn__emoji {
	display: inline-block;
}

JavaScript

/* options
	
	style
		center
		top
		bottom
		
		bg_color
		text_color
		
		
		font
			inherit from website
			common fonts
			custom font
				import: ____
				font-family-rule:
			
		
		font-size
			inherit from website
			common fonts
			custom font
				import
				font-family-rule:

	
	behavior
	
		recommended (
			optional
			only after a total of 180secs on website and 2nd visit
			remind again after 3 visits
		)
		
		main
			block content (agressive)
			optional (chill)
		
		display
			only after ___ visit
			on ___ page

			remind again
			after ___ visits
			on ___ page


		API
			_abb_.show();
			_abb_.hide();
			_abb_.disable(); alias for _abb_.hide();


*/

var _abb_ = (function() {

    function activate($el) {
        $el.removeClass('is-inactive').addClass('is-active');
    }

    function deactivate($el) {
        $el.removeClass('is-active').addClass('is-inactive');
    }

    var $els = {
        slideS: $('.abb-slide'),
        slide_initial: $('.abb-slide--id_initial'),
        slide_select_ab: $('.abb-slide--id_select_ab'),
        slide_instructions: $('.abb-slide--id_instructions')
    };

    var methods = {
        remind_later: function(e) {

        },

        switch_to_select_ab: function(e) {
            deactivate($els.slideS);
            activate($els.slide_select_ab);
        },

        switch_to_instructions_tab: function(e) {
            var $el = $(e.currentTarget),
                which = $el.data('which');

            deactivate($els.slideS);
            activate($els.slide_instructions);

        }
    };


    function start() {

        //attach events
        $('[data-e-click]').on('click', function(e) {
            methods[$(this).data('e-click')](e);
        });

    }



    var API = {
        show: function() {

        },

        hide: function() {

        },

        disable: function() {

        }
    };


    start();

    return API;

})();

/*

	Dont let unethical adblockers steal your website's...