crazyyy/.jshintrc

JS snippents

Color console.log

console.log('%c Auth ', 
            'color: white; background-color: #2274A5', 
            'Login page rendered');
console.log('%c GraphQL ', 
            'color: white; background-color: #95B46A', 
            'Get user details');
console.log('%c Error ', 
            'color: white; background-color: #D33F49', 
            'Error getting user details');

input events

  input.addEventListener('focus', funcElementFocusIn, true);
  input.addEventListener('blur', funcElementFocusOut, true);
  input.addEventListener("keypress", funcElementKeyPress, false);

  funcElementFocusIn(event){
    const target = event.target
  }

jQuery Document ready

jQuery('document').ready(function ($) {
  $('.cart-button').click(function () {
    $('.product-cart-modal').toggleClass('active')
  })
})

Check current ViewPort

const ViewPort = {
    width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
    init: function() {
        this.update();
        window.onresize = function() {
            ViewPort.update()
        }
    },
    update: function() {
        console.log(`prev / next = ${this.width} / ${Math.max(document.documentElement.clientWidth, window.innerWidth || 0)}`)
        this.width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    },
    isSizeXS: function() {
        return (this.width >= 320) && (this.width <= 575);
    },
    isSizeSM: function() {
        return (this.width >= 576) && (this.width <= 767);
    },
    isSizeMD: function() {
        return (this.width >= 768) && (this.width <= 991);
    },
    isSizeLG: function() {
        return (this.width >= 992) && (this.width <= 1199);
    },
    isSizeXL: function() {
        return (this.width >= 1200);
    },
    isMobile: function() {
        return (this.width <= 767);
    },
    isDesktop: function() {
        return (this.width >= 992);
    },
    is: function(taskname) {
        let statement = this[taskname]();
        if (statement) {
            console.log(`%c ${taskname} => %ctrue`, "font-size:12px; color: white", "font-size:12px; color: green");
        } else {
            console.log(`%c ${taskname} => %cfalse`, "font-size:12px; color: gray", "font-size:12px; color: red");
        }
    },
    showAll: function() {
        ['isMobile', 'isDesktop', 'isSizeXS', 'isSizeSM', 'isSizeMD', 'isSizeLG', 'isSizeXL'].map((taskname) => {
            this.is(taskname)
        })
    }
}

ViewPort.init();
ViewPort.showAll();
ViewPort.is('isMobile');
ViewPort.is('isSizeXS');
if (ViewPort.isSizeXL() === true) { /*...*/ }

create element

  // source from https://github.com/jelastic/jelastic-widget/blob/master/assets/js/jlcwidget.js
  // main function
  function CreateElement(tagName, attrs, text) {
    const element = document.createElement(tagName);
    if (attrs) {
      for (let attribute in attrs) {
        let value = attrs[attribute];
        if (attribute === 'className') {
          attribute = 'class';
        }
        let element_attribute = document.createAttribute(attribute);
        element_attribute.value = value;
        element.setAttributeNode(element_attribute);
      }
    }
    if (text) {
      let element_content = document.createTextNode(text);
      element.appendChild(element_content);
    }
    return element;
  }

  // create simple element with class 
  const elNew = CreateElement('div', {
    className: 'element-class'
  });

  // appent element inside another 
  const wrapper = document.querySelector('.wrapper');
  wrapper.appendChild(elNew);

  // create element with content, button for example 
  const elButton = CreateElement('button', {
    className: 'button-class'
  }, 'Button Text');
  wrapper.appendChild(elButton);

  // create element with attributes
  const elInput = CreateElement('input', {
    className: 'input-class',
    placeholder: '[email protected]',
    type: 'email',
    required: 'true'
  });
  wrapper.appendChild(elInput);

Debug snippets

Console: Поиск обработчиков событий, привязанных к элементу

// В процессе отладки может понадобиться найти обработчики событий, привязанные к элементам. С помощью консоли сделать это очень просто. Достаточно воспользоваться такой командой:
getEventListeners($('selector'))

// В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.
// Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:
getEventListeners($('selector')).eventName[0].listener

// Эта команда выведет код функции-обработчика события. Здесь eventName[0] – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:
getEventListeners($('#firstName')).click[0].listener

// В результате мы получим код функции, связанной с событием click элемента с идентификатором firstName.

Console: Мониторинг событий

// Если вы хотите понаблюдать за возникновением событий, привязанных к конкретному элементу DOM, консоль в этом поможет. Вот несколько команд, которые можно использовать для мониторинга событий.
monitorEvents($('selector'))

// Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName.
// Команда monitorEvents($(‘selector’),’eventName’) похожа на предыдущую, но она нацелена на конкретное событие. Здесь, помимо селектора элемента, функции передаётся и имя события. Такая команда позволит вывести в консоль данные о возникновении одного события. Например, команда monitorEvents($(‘#firstName’),’click’) выведет сведения только по событию click элемента с идентификатором firstName.
// Команда monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….]) позволяет наблюдать за несколькими выбранными событиями. Здесь в функцию передаётся строковой массив, который содержит имена событий. Например, такая команда: monitorEvents($(‘#firstName’),[‘click’,’focus’]) будет выводить в консоль сведения о событиях click и focus для элемента с идентификатором firstName.
// Команда unmonitorEvents($(‘selector’)) позволяет прекратить мониторинг и логирование событий в консоли.
unmonitorEvents($('selector'))

Console: Вывод списка свойств элемента

// Если надо просмотреть список свойств элемента, консоль поможет и в этом. Здесь используется такая команда:
dir($('selector'))
//  Она возвращает объект, содержащий свойства, связанные с заданным элементом DOM. Как и в прочих подобных случаях, содержимое этого объекта можно исследовать, просматривая его древовидную структуру.

Check if element in page

  const eForm = document.getElementById('form');

  if (typeof(eForm) != 'undefined' && eForm != null) {
    // element on page 
  } else {
    // nothing 
    // return false 
  }

  const errBlock = document.getElementById('error');
  if (typeof errBlock == 'undefined' && errBlock == null) {
    // form does not exist
    return false;
  }

load additional scripts in webpack

vendor.js

try {
    window.$ = window.jQuery = $ = require("jquery");
    window.Popper = require("popper.js");
    require("bootstrap");
    require("../../node_modules/jquery-validation/dist/jquery.validate.js");
    require("../../node_modules/jquery-validation/dist/additional-methods.js");
} catch (e) {
    console.log(e);
}

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.autoload({
        jquery: ['window.$', 'window.jQuery'],
        'popper.js/dist/umd/popper.js': ['Popper']
    })
    .js('resources/js/app.js', 'public/js')
    .js('resources/js/vendor.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false
    })
    .version();

if (process.env.MIX_BROWSER_SYNC_DOMAIN) {
    mix.browserSync('traffic-school.local');
}


if (!mix.inProduction()) {
    mix.sourceMaps()
        .webpackConfig({
            devtool: 'source-map'
        });
}```

Query selectors

const myNodeList = document.querySelectorAll('.my-selector');`

ES6 +

const nodeArray = Array(...nodeList);

ES5

const nodeArray = Array.from(myNodeList);

const nodeArray = Array.from(document.querySelectorAll('[data-time]'));

ALT 1

Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

ALT 2

for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

ALT 3

[...myNodeList].forEach((el) => {
  console.log(el);
});

/**
 * Define the chunk method in the prototype of an array
 * that returns an array with arrays of the given size.
 *
 * @param chunkSize {Integer} Size of every group
 */

Object.defineProperty(Array.prototype, 'chunk', {
  value: function value(chunkSize) {
    const that = this;
    return Array(Math.ceil(that.length / chunkSize)).fill().map((_, i) => that.slice(i * chunkSize, i * chunkSize + chunkSize));
  },
});

usage

const data = [1, 2, 3, 4, 5, 6, 7, 8];
const chunks = data.chunk(3);
console.log(chunks); // [[1, 2, 3], [4, 5, 6], [7, 8]]

	{
	"camelcase": true,
	"indent": 2,
	"undef": true,
	"quotmark": false,
	"maxlen": 120,
	"trailing": true,
	"curly": true,
	"strict": false,
	"browser": true,
	"devel": true,
	"jquery": true,
	"esversion": 9,
	"node": true
	}