Всем привет!
Очень давно не писал — просто некогда. В отличие от времени когда я работал админом, сейчас, работая веб программистом свободного времени практически нет — всегда есть работа, которую нужно работать 🙂

Само по себе решение дружбы JQuery Styler и Vue JS конечно не лучший вариант, в идеале вообще нужно выкинуть JQuery и реализовать фронт на чистом Vue…
Но когда вёрстка собрана на JQuery + Styler, соответственно со стилями «подогнанными» под Styler то на подбор нужных компонентов и их стилизация потребуется довольно много времени (по крайней мере у меня т.к. готовых подобных решений я не нашел).

Проблема — при обновлении поля значение в модели не обновляется, хотя поле прикручено к модели через v-model.
Решение — в vue mounted() вешаем на изменения объекта styler-а vue метод обновления значения поля в модели + в моей реализации далее прокидываем из дочернего компонента родителю с помощью $emit

В реализации API 1С Битрикс компонент оборачиваем в BX.Vue.component()

Пример реализации для чекбокса

Далее уже в шаблоне основного компонента используем пользовательский vue тег данного компонента с штатной директивой v-model для связывания поля ввода и с переменной

На авторство не претендую — компоненты реализованы в одном из проектов веб студии Слон, где я в данный момент удалённо работаю.

PS
Добавлю реализацию для выбора даты

С многомерными массивами в javascript беда, а уж с передачей многомерного массива AJAX запросом — тем более.
Не буду долго рассказывать о своих страданиях 🙂 сразу готовое, красивое решение

Для реализации задуманного я выбрал плагин intl-tel-input
Вроде всё в нём замечательно, кроме отсутствия очевидно необходимого maskedinput — то есть в поле для ввода телефона, скрипт спокойно даёт вводить буквы и прочую ересь.
Для решения этой задачи я выбрал jquery плагин maskedinput

А вот с реализацией объединения оказалось не всё так тривиально, но и тут мне повезло — нашел готовое решение на блоге похожем по типу изложения с моим — сисадмин, программист потихонечку ведёт блог о том с чем сталкивается по жизни 🙂

То что получилось можно посмотреть тут

Столкнувшись с проблемой чистки ящика Яндекс.Почты нашел интересную статью, в которой предлагалось автоматизировать работу с ящиком открыв консоль и вызвав там самописную стороннюю фукнцию, выполнявшуюся в бесконечном цикле!

Идея работы с реальным контентом сайта самописным кодом, да ещё в бесконечном цикле мне очень понравилась, пока не знаю где применю — но однозначно в закладки!!!

(function(){
Console.log(‘тут мутим с селекторами — чекаем удаляем и т.д. и т.п.’);
setTimeout(arguments.callee,5000);
})();

Код автора, для удаления писем. Уже не актуальный — Яша видимо вёрстку сменил, но смысл ясен — пометили письма, нажали удалить и так в цикле!

(function(){
$('.block-messages-list-box.b-layout__first-pane input[type=checkbox]:not(:first)').trigger('click').trigger('click');
$('a.b-toolbar__item.b-toolbar__item_delete.daria-action').click();
setTimeout(arguments.callee,5000);
})();


Не претендую на авторство, вырвал из видеоурока по вёрстке
Очень простая реализация табов — буквально несколько строчек.


$(".tabs li").click(function() {
var tabName = $(this).attr("data-tab-name");
$(this)
.addClass("active")
.siblings()
.removeClass("active");
$(".tab-content." + tabName)
.addClass("active")
.siblings()
.removeClass("active");
});


У лишек должен быть атрибут data-tab-name одноимённый с классом содержащим контент.

Рабочий код с минимальной стилизацией — ссылка.

Работая над заданием по ускорению работы сайта пришлось покопаться в чужом коде, где выявил довольно много косяков — которые решил пофиксить, вот один из них:
common.js подгружается в шаблоне для всех страниц сайта, и соответственно все элементы с которыми происходит работа в этом файле должны присутствовать на странице — иначе в консоль выводятся разные сообщения об ошибках
В идеале нужно вынести работу с такими элементами в отдельный файл, найти именно те страницы и подключать этот файл именно на них.

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

// Способ первый - стандартный:
if($("#findID").length>0) {
// exists
}
//еще проще:
if($("#findID").length) {
// exists
}
// Еще вариант:
if($('#findID')[0]) {
// exists
}
// Способ второй - удобный (создадим пользовательскую функцию exists() ):
// Один раз объявляем функцию, потом используем так, как в примере
jQuery.fn.exists = function() {
return $(this).length;
}
// Пример использования:
if($("#findID").exists()) {
// exists
}
// Можно и так:
jQuery.exists = function(selector) {
return ($(selector).length > 0);
}
// Пример использования:
if ($.exists(selector)) {
// exists
}


Скорость загрузки сайта была улучшена с 7.9 секунд до 1.45 секунды!
Кому интересно — читаем 🙂

Преамбула — обратился ко мне клиент с просьбой ускорить загрузку сайта, т.к. ну уж очень медленно всё — более 7 секунд!!! на загрузку главной страницы
изначальная версия главной (для тестирования обновляем страницу со сбросом кэша браузера)
Реклама крутится — бабки ввалены, а с такой скоростью врят ли стоит чего то ловить…
Сайт — очень красивая лендинг простыня, с кучей красивой графики и всяких не менее красивых эффектов появления другой графики — в общем полный треш в плане веса страницы, со всеми вытекающими …
Причём именно для этого сайта тормознутость загрузки очень явно видна т.к. пока не прогрузится вся страничка на видимой части не всплывёт непосредственно главное содержание странички — заголовки и футболист! До этого страничка будет выглядеть пустой.

Все обычные советы — сжать и обрезать картинки, объединить и сжать css и js, поместить в конец страницы и прочие — всё это как слону дробина при таких объёмах графики на странице.
Начал изучать и нашел на хабре среди обычных один довольно интересный совет

Читать полностью »

Нарыл сегодня мега полезный скрипт преобразования таблички Excel из буфера обмена (любой формат xls xlsx и т.д.) в простой html без лишних классов! Однозначно репост! Чуть позже оформлю так же — для возможности онлайн преобразования.

jQuery(document).ready(function(){
jQuery('#convert').click(function() {
var arrayOfLines = jQuery('#input').val().split('\n');
var firstTH = false;
if(jQuery('#useth').attr('checked'))
firstTH = true;
var result = '

';
jQuery('#output').html(result);
jQuery('#thetable').html(result);
});
});


Всем привет!

Закончил сегодня довольно интересный (для меня) проектик, который делал для товарища.
Потыкать можно тут

В 2х словах о ТЗ:
тематика «продажа фотообоев» — расширение стандартного функционала до возможности выбрать из картинки произвольную область, с обсчётом стоимости работы
вся информация должна передаваться в корзину и быть доступна в оформленном заказе

фронтенд реализовал на Jquery плагине ImgAreaSelect
к Битриксу привязал написанием своего компонента детального просмотра и передачей в корзину методом CSaleBasket::Add
(ни в коем случае не пробовать Add2BasketByProductID — пару дней убил на него впустую)

Пост абсолютно не информативный, а даже наоборот — просьба о помощи 🙂

Собственно, ИЩУ кликабельный! JQuery слайдер для вертикальных изображений!

Слайдеров куча, но 99% под горизонтально ориентированные картинки, а та малая часть, что мне подошла — некликабельны 🙁

Слайдер подбирается для морды сайта «Корейские обои для стен«.

В данные момент поставил более менее подходящий для вертикальных картинок — но он не кликабелен 🙁

Исходник слайдера тут

Думал ещё такой слайдер поставить — но он тоже некликабелен 🙁