JS | Wiki | PWODEV

highlight.js — лучшая подсветка синтаксиса кода

Paul Osmachko — Fri, 09 Aug 2019 13:25:44 +0000

Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса:

Хотя….

Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в сайт. Надо также чтобы отображалось красиво, как в нашем ide, типа PHPStorm или любом другом. Чтобы так, один раз поставил и забыл.

Отлично, я свой выбор сделал и тебе советую: highlight.js

Зацени как клево смотрится официальный сайт

Итак краткая инструкция по установке:

Добавляем в это:

Тут мы добавили css, js скрипт и запустили обработку этого скрипта.

Подсветка синтаксиса кода работает. По умолчанию скрипт применяется к такой html конструкции:

...

class=»html» — это не обязательно, но если хочется, можно написать язык кода, чтобы упростить распознавание скриптом, типа кода.

Тебе надо подсветить код в WordPress и ты ищешь какой-то вордпрессовский плагин? Не советую мусорить в Вордпрессе дополнительными плагинами. Просто добавь highlight.js в head и не заморачивайся. А вот тебе сразу инструкция: Как правильно добавлять скрипты в WordPress.

Более подробная документация по скрипту и дополнительные опции можно найти в официальной документации highlight.js. Там же можно найти много различных тем и стилей подсветки кода.

Всем удачи в вашем не простом, но очень интересном деле. Не забывайте регистрироваться и писать комментарии.

Сообщение highlight.js — лучшая подсветка синтаксиса кода появились сначала на Wiki | PWODEV.

Спецсимволы для использования в HTML коде

Paul Osmachko — Mon, 13 Aug 2018 12:18:07 +0000

В этой статье будем собирать спецсимволы которые иногда нужны в коде.

Спецсимволы:

			неразрывный пробел
	`¡`	¡	перевернутый восклицательный знак
`€`	`€`	€	евро
`§`	`§`	§	параграф
`©`	`©`	©	знак копирайтов copyright

Сообщение Спецсимволы для использования в HTML коде появились сначала на Wiki | PWODEV.

Google jQuery WordPress — как правильно подключить

Paul Osmachko — Thu, 02 Aug 2018 11:59:38 +0000

Скрипт как правильно подключить из CDN Google библиотеку jQuery WordPress:

add_action('wp_enqueue_scripts', 'front_scripts');
function front_scripts(){
	// add jQuery to footer and from Google
	global $google_jQuery;
	if(!$google_jQuery) {
		$google_jQuery = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';

		wp_deregister_script('jquery-core');
		wp_register_script('jquery-core', $google_jQuery, false, null, true);

 		wp_deregister_script('jquery');
		wp_register_script('jquery', false, array('jquery-core'), null, true);
	}

	// add ajaxurl
	global $ajaxurl;
	if(!$ajaxurl){
		$ajaxurl = admin_url('admin-ajax.php');
		wp_localize_script( 'jquery', 'ajaxurl', admin_url('admin-ajax.php'));
	}
}

Последняя версия jQuery от Google

В этом скрипте я также добавил сразу подключение ajaxurl.

Этот скрипт для фронтенда, если нужен для админки — добавляем:

add_action('admin_enqueue_scripts', 'admin_scripts');

А теперь немного пред истории:

В вордпресе есть локальная версия jQuery, также и все остальные сопутствующие скрипты, дело это хорошее, но все-же лучше всего подключать библиотеку jQuery WordPress лежащую в гугле. Перенаправить или заменить стандартный скрипт джейквери (jQuery), лежащий в ядре вп или Вордпресс, не достаточно, потому что там немного сложный механизм. Есть 2 названия одного и того-же подключения стандартного скрипта jQuery в вродпресе: jquery и jquery-core. Дело в том что при вызове первого скрипта происходит ссылка на второй. В ядре мы можем найти следующий код который немного это объяснит:

if ( $handle === 'jquery' )
    $handle = 'jquery-core';

Немного странно… Вообщем чтобы в wp jQuery подключить из гугла правильно, приходится немного попотеть. Получается если нужно дописать какой-то скрипт, типа как ajax url используя функцию:

wp_localize_script( 'jquery', 'ajaxurl', admin_url('admin-ajax.php'));

В первом параметре этой функции мы говорим что скрипт должен запуститься сразу перед подключением скрипта ‘jquery’, но так как мы видели из кода выше скрипт всеравно будет искать ‘jquery-core’. Это означает что он будет подключаться не там где надо или если мы переписали или отменили ‘jquery-core’ то он вообще не подключится.

Подключить jQuery WordPress из CDN Google

Чтобы решить эту проблему я методом долгих проб и ошибок нашел лучшее решение этой проблемы.

Итак задача:

Подключить jQuery WordPress из CDN Google, но чтобы при этом работали оба варианта подключения jquery и jquery-core. И также чтобы работало подключение других остальных скриптов.

Решение:

1. Сначала обнуляем jquery и jquery-core

wp_deregister_script('jquery-core'); 
wp_deregister_script('jquery');

2. Затем регистрируем ‘jquery-core’ скрипт

wp_register_script('jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true);

3. Регистрируем ‘jquery’ скрипт как ссылку на первый

wp_register_script('jquery', false, array('jquery-core'), null, true);

Вот и вся фишка моего решения. Теперь, при обращении к jquery или jquery-core, будет вызываться, все равно, скрипт подключенный в jquery-core.

Если кто знает лучшее решение, напишите его в комментариях.

Возможно кому интересно — на днях обновил статью на тему: как установить WordPress с помощью терминала на маке.

Сообщение Google jQuery WordPress — как правильно подключить появились сначала на Wiki | PWODEV.

is email? javascript verification function

Paul Osmachko — Wed, 06 Jun 2018 10:08:46 +0000

Есть форма, в ней поле input в котором нужно ввести email. Как верифицировать форму, проверить строку на наличие email адреса? Как понять что поле email заполнено правильно? is email — JS функция проверки строки, на корректность email. Верификация email адреса.

Вот сама js функция is email:

function is_email(email) {
	var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	return regex.test(email);
}

Функция вернет TRUE или FALSE.

javascript verification function

Эту функцию лучше всего поставить перед отправкой формы, как-бы валидация формы. Если все сходится, и функция вернет TRUE, отправляем форму дальше стандартными средствами или с помощью ajax. Еще будет нужно чтобы форма не отправлялась по событию submit. Как это сделать я мы уже писали в статье: Как отменить отправку формы с помощью js.

На данный момент нам нужна была только javascript функция. Варианты на других языках программирования предлагайте в комментариях, добавим. А чтобы добавить комментарий — регистрируйтесь. Будем рады всем!

Сообщение is email? javascript verification function появились сначала на Wiki | PWODEV.

Клик вне элемента — jQuery click outside

Paul Osmachko — Thu, 11 Jan 2018 11:40:53 +0000

Сегодня поступила задача получить событие клика на странице, за пределами определенного элемента. Другими словами клик вне элемента или jQuery click out или outside click. Что-то похожее на событие hover out или mouse leave или mouse out но по клику.

Отследить клик за пределами определенного элемента пригодится например чтобы закрыть открывшееся меню, или закрыть попап (close popup by outside click). Либо для любых других ваших задач.

Как реализовать это? Как отследить клик вне элемента?

jQuery(document).on('click',function (e) {
 var el = '.element';
 if (jQuery(e.target).closest(el).length) return;
 // дальше пишем код который нужно выполнить по клику вне элемента
});

На этом все. Надеюсь эта статья была вам полезна. Напишите в комментариях возможно другие решения этого вопроса, либо если вы нашли более простое решение. Также регистрируйтесь если хотите также писать статьи.

Сообщение Клик вне элемента — jQuery click outside появились сначала на Wiki | PWODEV.

Full page jQuery plugin scrolling

Paul Osmachko — Mon, 04 Dec 2017 10:56:34 +0000

Раньше мы рассматривали как получить высоту экрана, а сегодня рассмотрим Full page плагин ссылка — https://alvarotrigo.com/fullPage/, который делает это самостоятельно.

Очень полезный плагин для того чтобы реализовать сайт в полный экран с прокруткой до блока.

Документация на русском языке

Как работает Full page плагин:

1. Для начала скачиваем последнюю версию плагина с официального сайта.

2. Нас интересует 2 файла — jquery.fullpage.min.css и jquery.fullpage.min.js

3. Кладем файлы в нужные папки и подключаем скрипты к нашему сайту:

4. Далее в коде где будем использовать создаем такую структуру

5. И последнее подключаем скрипт к контейнеру:

jQuery(document).ready(function () {
     jQuery('.scroll_slider').fullpage();
});

Готово, наш скрипт работает.

Если нужно поменять селекторы контейнеров делаем это так:

jQuery('.scroll_slider').fullpage({
 sectionSelector: '.section',
 slideSelector: '.slide'
});

Полный список параметров:

jQuery(document).ready(function() {
 jQuery('.scroll_slider').fullpage({
 //Navigation
 menu: '#menu',
 lockAnchors: false,
 anchors:['firstPage', 'secondPage'],
 navigation: false,
 navigationPosition: 'right',
 navigationTooltips: ['firstSlide', 'secondSlide'],
 showActiveTooltip: false,
 slidesNavigation: false,
 slidesNavPosition: 'bottom',

 //Scrolling
 css3: true,
 scrollingSpeed: 700,
 autoScrolling: true,
 fitToSection: true,
 fitToSectionDelay: 1000,
 scrollBar: false,
 easing: 'easeInOutCubic',
 easingcss3: 'ease',
 loopBottom: false,
 loopTop: false,
 loopHorizontal: true,
 continuousVertical: false,
 continuousHorizontal: false,
 scrollHorizontally: false,
 interlockedSlides: false,
 dragAndMove: false,
 offsetSections: false,
 resetSliders: false,
 fadingEffect: false,
 normalScrollElements: '#element1, .element2',
 scrollOverflow: false,
 scrollOverflowReset: false,
 scrollOverflowOptions: null,
 touchSensitivity: 15,
 normalScrollElementTouchThreshold: 5,
 bigSectionsDestination: null,

 //Accessibility
 keyboardScrolling: true,
 animateAnchor: true,
 recordHistory: true,

 //Design
 controlArrows: true,
 verticalCentered: true,
 sectionsColor : ['#ccc', '#fff'],
 paddingTop: '3em',
 paddingBottom: '10px',
 fixedElements: '#header, .footer',
 responsiveWidth: 0,
 responsiveHeight: 0,
 responsiveSlides: false,
 parallax: false,
 parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

 //Custom selectors
 sectionSelector: '.section',
 slideSelector: '.slide',

 lazyLoading: true,

 //events
 onLeave: function(index, nextIndex, direction){},
 afterLoad: function(anchorLink, index){},
 afterRender: function(){},
 afterResize: function(){},
 afterResponsive: function(isResponsive){},
 afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
 onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
 });
});

Если у вас есть дополнения или новые идеи к этой статье, пишите их в комментариях. Также для того чтобы написать на нашем сайте свою статью — у нас открыта регистрация по ссылке http://wiki.pwodev.com/wp-admin

Сообщение Full page jQuery plugin scrolling появились сначала на Wiki | PWODEV.

Организация JavaScript файлов, модульный подход

Paul Osmachko — Thu, 16 Nov 2017 13:27:58 +0000

Не так давно столкнулся с одним сайтом где один javascript файл содержал больше чем 15 тысяч строк. В нем лежали все модули которые использовал сайт, часть кода была сжатая а другая часть читабельная. При попытке отформатировать код в PHPStorm, в коде появлялось неисчислимое количество ошибок. Было принято решение переделать всю структуру JS кода на сайте. Но как часто бывает, времени на это было очень мало, и поэтому быстрый фикс был — хардкод. Но с оговоркой что когда-нибудь вернемся и все переделаем. И вот наконец-то время это пришло.

Для начала было решено разбить код на части, на отдельные файлы, и каждый кусок функционала выносить в отдельный файл. Так же пригодился модульный подход при работе с JS. Полностью писать статью о том как это все делалось времени не хватит, ибо работы много. Вам лишь приведу в пример заготовку, шаблон, темплейт каждого отдельного JS файла.

Пример JS кода:

/**
 * =====================================================================================================================
 * App
 * =====================================================================================================================
 */
var App = (function (r, $) {
 "use strict";

 /**
  * private options
  * =================================================================================================================
  */
 var private_option_1;
 var private_option_2;

 /**
  * private method 1
  * =================================================================================================================
  */
 function private_method_1() {
 // code
 }

 /**
  * private method 2
  * =================================================================================================================
  */
 function private_method_2() {
 // code
 }

 /**
  * public options
  * =================================================================================================================
  */
 r.public_option_1 = 'public_option_1';
 r.public_option_2 = 'public_option_2';

 /**
  * public method 1
  * =================================================================================================================
  */
 r.public_method_1 = function() {
 // code
 };

 /**
  * public method 2
  * =================================================================================================================
  */
 r.public_method_2 = function() {
 // code
 };

 /**
  * return
  * =================================================================================================================
  */
 return r;

})(App || {}, jQuery);

console.log(App);

Если имеются дополнения пишите в комментариях, будем добавлять.

Сообщение Организация JavaScript файлов, модульный подход появились сначала на Wiki | PWODEV.

preventDefault или как отменить переход по ссылке

Paul Osmachko — Tue, 24 Oct 2017 07:15:02 +0000

Сегодня поговорим о функции preventDefault. Часто бывает нужно отключить стандартное поведение ссылки по клику. Убрать стандартное поведение ссылки. Как не переходить по ссылке по событию on click, или просто не отправлять форму по клику на submit. То-есть браузер просто не будет реагировать на ссылку. Это нужно например для того чтобы отправить форму с помощью jQuery или JavaScript или Аякс (ajax) или добавить свой js обработчик к форме или ссылке, заменить url перед переходом и тд.

Решение:

Отключить событие перехода по ссылке по клику на ссылку очень просто, достаточно в самом начале функции обработчика события клика вставить следующий код:

jQuery('a').on('click', function (e) {
    e.preventDefault(); // этот код предотвращает стандартное поведение браузера по клику
    // остальной код
});

Теперь браузер не будет переходить по ссылке.

Сообщение preventDefault или как отменить переход по ссылке появились сначала на Wiki | PWODEV.

jQuery touch swipe или как отследить жесты

Paul Osmachko — Tue, 24 Oct 2017 06:58:09 +0000

Что такое жесты и какие они бывают:

Swipe — пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню.
hold — событие долгому длинному нажатию

Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку jquery.touchSwipe.min.js. Дальше привязываем событие к нужному нам элементу:

jQuery('body').swipe({
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 console.log(direction);
 }
});

Теперь мы можем дополнять наш сайт жестами.

Если нам нужно чтобы событие жест сработал в реальном времени или через определенное количество пикселей пишем такую функцию:

jQuery('body').swipe( {
    swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection)
    {
        if (phase=="start"){
            // сработает в начале swipe
        } 
        if (phase=="end"){ 
            //сработает через 20 пикселей то число которое выбрали в threshold
            if (direction == 'left') {
                //сработает при движении влево
            }
            if (direction == 'right') {
                //сработает при движении вправо
            }
            if (direction == 'up') {
                //сработает при движении вверх
            }
            if (direction == 'down') {
                //сработает при движении вниз
            }
 },
 triggerOnTouchEnd:false,
 threshold:20 // сработает через 20 пикселей
});

Параметры:

event — стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт

jQuery(event.target)

phase

start — указывает начальную фазу события касания
move — указывает на событие перемещения
end — указывает на завершение события
cancel — указывает на отмену события

direction

left — указывает на передвижение влево
right — указывает на передвижение вправо
up — указывает на передвижение вверх
down — указывает на передвижение вниз
in — указывает на событие помещения в обьект
out — указывает на событие выхода из обьекта

distance — расстояние которое пользователь пролистал

duration — продолжительность пролистывания в миллисекундах

fingerCount — количество пальцев при таче

fingerData — координаты пальцев при событии тач

currentDirection — текущее направление движения тача

Сайт библиотеки плагина и документации к плагину

Сообщение jQuery touch swipe или как отследить жесты появились сначала на Wiki | PWODEV.

Height 100vh for mobile browsers iPhone and Android

Paul Osmachko — Wed, 18 Oct 2017 13:29:39 +0000

При высоте контейнера height:100vh; на мобильных устройствах, этот контейнер немного перекрывается адресной строкой вверху, либо панелью управления мобильного браузера внизу. Мобильном устройстве, при прокрутке страницы ниже, адресная строка и панель управления убираются, после чего наш контейнер показывается полностью.

Отследить правильный размер экрана нам поможет этот JS код:

window.innerHeight //показывает действительную высоту экрана

Запускать это лучше всего при загрузке страницы, а потом при скролле браузера.
Событие scroll:

window.onscroll = function () {
   // scroll event
};

Сообщение Height 100vh for mobile browsers iPhone and Android появились сначала на Wiki | PWODEV.