Userscript for pixel perfect testing

script.js

// ==UserScript==
// @name         Test makets
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       yoksel
// @match        http://localhost:3001/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

var url = document.location.pathname;
var pageId = url === '/' ? 'index' : url.slice(1, -5);
var maketsList = ['']; // ADD HERE MAKETS
var blendModesList = ['normal', 'difference'];

var currents = {
    maket: localStorage.maket ? localStorage.maket : maketsList[0],
    blendMode: localStorage.blendMode ? localStorage.blendMode : blendModesList[0],
    bodyClass: {
        maket: '',
        blendMode: ''
    }
};

var style = document.createElement('style');
document.head.appendChild(style);

// Add glass
var bodyFirstChild = document.body.firstChild;
var glassElem = document.createElement('div');
var glassElemClass = 'maket-glass';
glassElem.setAttribute('style', 'opacity: .2;');
glassElem.classList.add(glassElemClass);
document.body.insertBefore(glassElem, bodyFirstChild);

// Set class with maket to body
setBodyClass();

// Add styles for controls
setStyles();

// Add styles for background images
maketsList.forEach( function(item, i, arr){
    setBgImgs( item );
});

// Add container for controls
var maketSelector = document.createElement('div');
maketSelector.classList.add('maket-selector');
document.body.insertBefore(maketSelector, bodyFirstChild);

// Add makets switcher
var paramsMakets = {
    listName: 'makets',
    itemName: 'maket',
    type: 'radio',
    list: maketsList
};

createInputsSet(paramsMakets);

// Add blendModes switcher
var paramsModes = {
    listName: 'blendModes',
    itemName: 'blendMode',
    type: 'radio',
    list: blendModesList
};
createInputsSet(paramsModes);


// Add opacity range
var paramsOpacity = {
    itemName: 'opacity',
    type: 'range',
    targetElem: glassElem,
    setAttr: 'style',
    attrs: {
        min: 0,
        max: 1,
        step: .1,
        value: .2
    }
};
createInputsRange(paramsOpacity);


// Functions
// ------------------------------------------

function createInputsSet(params) {
    var listName = params['listName'];
    var itemName = params['itemName'];
    var type = params['type'];
    var list = params['list'];
    
    var itemsSet = document.createElement('div');
    itemsSet.classList.add( 'maket-selector__item',
                            'maket-selector__item--' + listName);

    list.forEach(function(item, i, arr) {
        
        var id = itemName + '-' + item;
        var input = document.createElement('input');
        input.setAttribute('type', type);
        input.setAttribute('id', id);
        input.setAttribute('name', listName);
        input.setAttribute('data-content', item);

        if (item == currents[itemName]) {
            input.setAttribute('checked', '');
        }

        var label = document.createElement('label');
        label.setAttribute('for', itemName + '-' + item);
        label.innerHTML = item;

        itemsSet.appendChild(input);
        itemsSet.appendChild(label);

        input.onclick = function() {
            currents[itemName] = this.dataset.content;
            localStorage[itemName] = currents[itemName];
            //console.log( currents[itemName] );
            setBodyClass( itemName );
            
        }
    });

    maketSelector.appendChild(itemsSet);
}

// ------------------------------------------

function createInputsRange(params) {
    var itemName = params['itemName'];
    var attrs = params['attrs'];
    var type = params['type'];
    var targetElem = params['targetElem'];
    var setAttr = params['setAttr'];
    
    var itemsSet = document.createElement('div');
    itemsSet.classList.add( 'maket-selector__item',
                            'maket-selector__item--' + itemName);
    
    var id = itemName;
    var input = document.createElement('input');
    input.setAttribute('type', type);
    input.setAttribute('id', id);
    
    for (var attr in attrs) {
        input.setAttribute(attr, attrs[ attr ]);
    }

    var label = document.createElement('label');
    label.setAttribute('for', itemName);
    label.innerHTML = itemName;

    itemsSet.appendChild(input);
    itemsSet.appendChild(label);

    input.oninput = function() {
        currents[itemName] = this.value;
        localStorage[itemName] = currents[itemName];
        
        if ( setAttr === 'style'){
            targetElem.setAttribute(setAttr, itemName + ':' + currents[itemName]);
        }
        else {
            setBodyClass( itemName );
        }
    }
    
    maketSelector.appendChild(itemsSet);
}

// ------------------------------------------

function setStyles() {

    var stylesSet = [{
        elem: '.' + glassElemClass,
        rules: [
            'content: "";',
            'position: absolute;',
            'top: 0;',
            'right: 0;',
            'bottom: 0;',
            'left: 0;',
            'z-index: 10;',
            'min-height: 4000px;',
            'pointer-events: none;',
            'background-position: center top;',
            'background-repeat: no-repeat;',
        ],
        }, {
        elem: '.maket-selector',
        rules: [
            'position: absolute;',
            'z-index: 11;',
            'left: 10px;',
            'top: 10px;',
            'width: 260px;',
            'padding: 1rem;',
            'display: flex;',
            'justify-content: space-between;',
            'flex-wrap: wrap;',
            'background: rgba(255,255,255,.9);',
            'border: 1px solid #DDD;',
            'font: 14px/1.2 Arial, sans-serif;',
            'text-transform: none;'
        ]
        }, {
        elem: '.maket-selector__item',
        rules: [
            'display: flex;',
            'flex-basis: 45%;'
        ]
        }, {
        elem: '.maket-selector label',
        rules: [
            'display: block;',
            'padding: .3rem .5rem;',
            'cursor: pointer'
        ]
        }, {
        elem: '.maket-selector input',
        rules: [
            'display: none;'
        ]
        }, {
        elem: '.maket-selector__item--opacity',
        rules: [
            'flex-grow: 1;',
            'margin-top: 1em'
        ]
        }, {
        elem: '.maket-selector__item--opacity input',
        rules: [
            'display: block;',
            'width: 100%;',
            'cursor: pointer'
        ]
        }, {
        elem: '.maket-selector__item--opacity label',
        rules: [
            'display: none;'
        ]
        }, {    
        elem: '.maket-selector input:checked + label',
        rules: [
            'background: skyblue;',
            'color: #FFF;',
            'border-radius: 3px;'
        ]
        }, {    
        elem: '.blendMode--difference .' + glassElemClass,
        rules: [
            'mix-blend-mode: difference;'
        ]
    }];

    var styleStrings = '';
    stylesSet.forEach( function( item ){
        styleStrings += item.elem + '{' + item.rules.join('\n') + '}\n';
    });
    

    style.innerHTML += styleStrings;
}

// ------------------------------------------

function setBgImgs( maketItem ) {
    var screenSizes = {
        'mobile': '',
        'tablet': '768px',
        'desktop': '1200px',
    };
    var imgUrlBegin = maketItem + "-" + pageId;
    var bodyClass = '.' + getBodyClass('maket', maketItem);
    var styleStrings = [];
    
    for (var type in screenSizes) {
        var width = screenSizes[type];
        var bgiStr = 'background-image: url(../../img/' + imgUrlBegin + '-' + type +'.jpg);';
        var styleStr = bodyClass + ' .' + glassElemClass +'  { ' + bgiStr + ' }';
        
        if ( width ) {
            styleStr = '@media ( min-width: ' + width + ' ) { ' + styleStr + ' }';
        }
        styleStrings.push( styleStr );
    }
        
    style.innerHTML += styleStrings.join('\n');
}

// ------------------------------------------

function getBodyClass( key, item ) {
    var item = item ? item : currents[ key ];
    currents.bodyClass[ key ] = key + '--' + item;
    return currents.bodyClass[ key ];
}

// ------------------------------------------

function setBodyClass( key ) {
    
    if ( !key ){
        var keys = Object.keys( currents.bodyClass );
        keys.forEach(function( item ) {
            addClass( item );
        })
        return;
    }
    
    if ( currents.bodyClass[ key ] ) {
        document.body.classList.remove( currents.bodyClass[ key ] );
    }
    addClass( key );
}

// ------------------------------------------

function addClass( key ) {
    var newBodyClass = getBodyClass( key );
    document.body.classList.add( newBodyClass );
}