Блог Чуденкова Алексея, заметки с тегом: js

JS: Рисуем логотип

Sat, 29 Feb 2020 11:50:49 +0300

Я бродил по Codepen в поисках интересных решений для анимаций форм и объектов на CSS и наткнулся на клёвую реализацию анимации SVG логотипа. Принцип прост — указываем для каждого элемента path в SVG класс и он будет анимирован. Можно на прелоадер поставить, будет эффектно.

See the Pen Animated SVG Logo by Alexey Chudenkov (@alexey-chudenkov) on CodePen.

jQuery: запретить вводить пробелы в E-Mail

Mon, 10 Feb 2020 14:05:01 +0300

Защита от дурака, который может скопировать и вставить почту с пробелами или хуже того ещё и написать её с пробелами.

$("#input_Id").change(function()
     $(this).val($(this).val().replace(/ +/g, ''))
});

Shopify: check user age before shopping

Fri, 31 Jan 2020 03:26:16 +0300

Есть продукты, которые можно продавать в США только лицам старше 21 года, да и то, не во всех штатах. Сам шопифай такого решения разумеется не имеет, поэтому появилось следующее решение, которое работает так: если нет соответствующей куки, то показываем пользователю предупреждение (предупреждение сами верстаем), а если кука есть, то не показываем пользователю предупреждение N-дней. Если пользователю нет 21 года, то отправляем его в магазин лего и куку не присваиваем.

Я запихал текст предупреждения в переменные, чтобы их можно было просто отредактировать.

{% capture warning_header %}
THE SITE IS ONLY AVAILABLE TO PERSONS OVER 21 YEARS OF AGE.
{% endcapture %}

{% capture warning_question %}
ARE YOU'RE 21 YEARS OLD?
{% endcapture %}

Далее вёрстка самого предупреждения, который нужно запихать в theme.liquid сразу после body. Рекомендую подключить сниппетом, чтобы не засорять шаблон кучей строк.

<div class="warning" id="warning">
    <div class="warning-popup" id="popup">
        <div class="logo">
            <img src="https://cdn.shopify.com/s/files/logo.svg" alt="logo">
        </div>
        <div>{{ warning_header }}</div>
        <div class="warning-question">{{ warning_question }}</div>
        <div class="btns">
            <a href="https://lego.com/"><button class="btn">No</button></a>
            <button class="btn" onclick="ageCheck()">Yes</button>
        </div>
    </div>
</div>

Далее сам скрипт, логику работы описал выше.

<script>
 function ageCheck() {
     var days = 14; //количество дней, через которое спросим возраст снова
     var date = new Date();
     date.setTime(date.getTime()+(days*24*60*60*1000));
     var expires = "; expires="+date.toGMTString();
     document.cookie = 'isAnAdult=true;'+expires+"; path=/";
     location.reload();
   };
  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  };
  var isAnAdult = readCookie('isAnAdult');
  if (isAnAdult) {
    document.write("<style> #warning { display: none; overflow:hidden; }</style>");
  };
</script>

JS: Определяем включён Caps Lock или нет

Wed, 15 Jan 2020 22:46:54 +0300

На W3C нашёл простой и отличный способ определения капса. Для чего? Всё для UI/UX! Особенно, если аудитория слегка деревянная. Итак, реализация:

var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function(event) {
  if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
});

SimplaCMS: Подсчёт количества введённых символов в поля SEO-параметров

Tue, 14 Jan 2020 13:58:34 +0300

Сеошники знают, что есть правила, которые ограничивают нам ввод длинных title или description. Чтобы не кидать каждый раз в Sublime для подсчёта символов, я набросал простенький скрипт, который показывает текущее значение каждого поля SEO-параметров.

Потестить можно на категориях, для которых в первую очередь и писался сам скрипт. Для этого откроем /simpla/design/html/category.tpl и заменим блок

на код ниже:

<div class="block layer">
<h2>Параметры страницы</h2>
<ul>
	<li><label id="url_count"class=property>Адрес</label><div class="page_url">/catalog/</div><input name="url" class="page_url" type="text" value="{$category->url|escape}" id="url_source" /></li>
	<li><label id="title_count" class=property>Заголовок</label><input name="meta_title" class="simpla_inp" type="text" value="{$category->meta_title|escape}" id="title_source" /></li>
	<li><label id="keys_count" class=property>Ключевые слова</label><input name="meta_keywords" class="simpla_inp" type="text" value="{$category->meta_keywords|escape}" id="keys_source" /></li>
	<li><label id="description_count" class=property>Описание</label><textarea name="meta_description" class="simpla_inp" id="description_source" >{$category->meta_description|escape}</textarea></li>
			</ul>
<script>
var urlname = document.getElementById("url_source");
var urlcount = document.getElementById("url_count");
var titlename = document.getElementById("title_source");
var titlecount = document.getElementById("title_count");
var keywordname = document.getElementById("keys_source");
var keywordscount = document.getElementById("keys_count"); 
var descriptionname = document.getElementById("description_source");
var descriptioncount = document.getElementById("description_count");                                   
window.onload = urlCount();
window.onload = titleCount();
window.onload = keywordsCount();
window.onload = descriptionCount();
urlname.oninput = urlCount;
titlename.oninput = titleCount;
keywordname.oninput = keywordsCount;
descriptionname.oninput = descriptionCount;                  
function urlCount() {
var x = urlname.value;
urlcount.innerHTML = "Адрес (" + x.length + ")";
}             
function titleCount() {
var y = titlename.value;
titlecount.innerHTML = "Заголовок (" + y.length + ")";
}                  
function keywordsCount() {
var z = keywordname.value;
keywordscount.innerHTML = "Ключевые слова (" + z.length + ")";
}
function descriptionCount() {
var xx = descriptionname.value;
descriptioncount.textContent = "Описание (" + xx.length + ")";
}                 
</script>
</div>

Tilda: Отслеживание целей в Яндекс Метрике и Google Analytics

Fri, 25 May 2018 22:42:42 +0300

Заходим в Метрику, создаем цели.
Заходим в Google Analytics, создаем цели.
Заходим на сайт, вставляем в footer / custom.js:

<script type="text/javascript">
$(document).ready(function(){
    $('#ID_BLOCK a').click(function(){ // Надо указать ID блока, в котором расположена ссылка
        yaCounterXXXXXXXX.reachGoal('ORDER');  // Надо указать название цели и номер счётчика Метрики
        gtag('event', 'OrderClick', { 'event_category': 'Order', 'event_action': 'Order Click', }); // Надо указать название и тип события для Analytics
        console.log('Data was sent'); // Это отладка для консоли. Если в консоли выводится, то всё ок, цели работают.
    });
});
</script>

JS: Одна всплывающая форма и разные заголовки

Sun, 06 May 2018 03:06:39 +0300

Каждый раз, создавая или оптимизируя сайты, всегда сталкиваюсь с задачами, которые можно и нужно оптимизировать, сокращать, минимизировать и так далее. Например, вы хотите сделать на лендинге 5 форм, у которых по сути отличается только заголовок. Неужели вы будете лепить все 5 форм? Не надо! Можно обойтись несколькими строчками кода.

Дадим заголовку вашей формы идентификатор

<h2 id="windowHeader">Ваш заголовок формы</h2>

Повесим на ваши кнопки названия заголовка каждой из них. Например, для обратного звонка — «Обратный звонок», для бесплатной консультации — «Бесплатная консультация»:

<a onClick="windowHeader('Бесплатная консультация');">Заказать бесплатную консультацию</a>
<a onClick="windowHeader('Обратный звонок');">Заказать звонок</a>

Создадим JS функцию, которая при нажатии той или иной кнопки будет подменять нам название формы:

function windowHeader(name) {
          document.getElementById('windowHeader').innerHTML = name;
}

Жамкаем по кнопкам, смотрим на форму.

JivoSite: отключить звук появления окна

Tue, 17 Apr 2018 01:11:21 +0300

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

Что ж, будем решать через DOM:

Открываем существующий код JivoSite и добавим в него пару строчек:

<script type='text/javascript'>
(function() { var widget_id = 'YOUR_ID'; var d = document; var w = window;
    function l() { var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = '//code.jivosite.com/script/widget/' + widget_id; var ss = document.getElementsByTagName('script')[0];
        ss.parentNode.insertBefore(s, ss); } if (d.readyState == 'complete') { l(); } else { if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })();

// Ниже код, который нужно добавить после вашего скрипта
function jivo_onLoadCallback() {
document.jivo_container.HTMLAudioElement.prototype.play = function () {};
}
</script>

После этого никакие звуки не будут раздражать вас и вашего пользователя.

JS: Настройки Fancybox 3

Mon, 16 Apr 2018 23:59:06 +0300

Чтобы не писать каждый раз, запишу здесь:

$("[data-fancybox]").fancybox({
    loop: true,
    gutter: 30,
    buttons: [
        "zoom",
        "share",
        "slideShow",
        "fullScreen",
        "thumbs",
        "close"
    ],
    protect: true,
    transitionEffect: "circular",
    slideShow: {
        autoStart: true,
        speed: 5000
    },
    lang: "ru",
    i18n: {
        ru: {
            CLOSE: "Закрыть",
            NEXT: "Вперед",
            PREV: "Назад",
            ERROR: "Ошибка загрузки. <br/> Повторите запрос позднее.",
            PLAY_START: "Начать демонстрацию",
            PLAY_STOP: "Приостановить демонстрацию",
            FULL_SCREEN: "На полный экран",
            THUMBS: "Миниатюры",
            DOWNLOAD: "Скачать",
            SHARE: "Поделиться",
            ZOOM: "Увеличить"
        },
    }
};

JS: Вешаем события GA через DOM для плагина Wordpress Contact Form 7

Wed, 04 Apr 2018 23:42:15 +0300

После опыта с LP Generator, нашёл такое же решение для самого популярного плагина Wordpress Contact Form 7. Согласно официальной документации плагина, начиная с версии 7.5.0 они убрали возможность установки событий onsubmit и onclick через интерфейс админки. И предлагают вешать его через скрипт. Пример:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    yaCounterXXXXXX.reachGoal('ORDER'); gtag('event', 'order', { 'event_category': 'ORDER', 'event_action': 'ORDER', });
}, false );
</script>

Зачем убрали — не понятно, но точно ясно, что усложнили жизнь новичкам.