Контакты

Наибольший вклад в теги

Все теги (14)

Лучшие ответы пользователя

Все ответы (19)
  • Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

    @vladdimir
    Верстальщик
    Алгоритм
    1. Вешаем обработчик на галерею addEventListener('click', onClickGallery)
    2. пишем функцию onClickGallery.
    Что она должна делать?
    - Если клик по превью, то изменить адрес большого изображения. И добавить индикатор текущего изображения у превью (синяя точка под последней прьвюшкой).
    - Если клик по стрелке, то показать следующее/предыдущее изображение.
    - Если клик по активному изображению или в другом месте, выйти из функции.

    Дал бы готовый код, но мне лень, а вам надеюсь хочется сделать и самому)

    Еще можно оптимизировать, чтобы в превью стояли картинки маленького разрешения, а в большую ставить полномасштабные варианты. Это ускорит загрузку сайта)
    Ответ написан
  • Как реализовать поиск на сайте?

    @vladdimir
    Верстальщик
    Вам логику поиска надо делать или отображение уже готовых результатов, которые получаете от апи?
    Если второе и апи на том же домене, аджакс подойдет. На вскидку, не особо вникая, делал бы как-то так.
    На форму обработчик изменения, который отправляет пользовательский ввод в функцию поиска через аджакс.
    Получаем джейсон-файл с результатами, ставим заголовки в подсказки сразу, а результаты по энтеру и клику на кнопке искать.

    Чтобы делать прям подсказки-подсказки, а не грузить заголовки найденных статей, нужно реализовывать какое-то хранилище поисковых запросов на бекенде, иначе откуда эти самые подсказки брать.
    Ответ написан
  • Посмотрите, пожалуйста, как вам шапка сайта?

    @vladdimir
    Верстальщик
    Рыбка понравилась) Мне кажется, в слогане (... как наслаждение творить.) слово «чем» легче зайдет вместо «как». Ссылки дугой заметил не сразу, это задумано так?
    Ответ написан
  • Как сократить такое условие?

    @vladdimir
    Верстальщик
    Наверное можно и без сравнения с null, ведь условие преобразуется в логический тип, а null в js преобразуется в false:
    if (element.previousSibling) { 
     // ... остальной код Дмитрия Дерепко
    }
    
    // Или без вложенных циклов
    // сначала проверить:  если у элемента нет предшествующего элемента
    if (!element.previousSibling) { 
      return element;  
      // вернуть элемент, чтобы другая функция что-то с ним могла сделать. 
      // Или вернуть false, не суть. Важно просто обработать сценарий, когда элемент 
      // идет первым в родителе. Можно просто выйти из функции.
    }
    // Дальше, если предшественник есть, делаем как в коде Дмитрия
    const targetTags = ['h1', 'h2', ...],
        lowerName = element.previousSibling.nodeName.toLowerCase();
    
    if (!targetTags.includes(lowerName)) { 
      // do samething
    }
    
    // Кстати, можно targetTags передавать сразу аргументом в функцию, чтобы код был чуть 
    // более универсальным.
    function doSomethingEpic(element, targetTargs) {
     // code
    }
    
    const someElem = document.querySelector('.epicElement');
    const tags = ['h1', 'h2', ...],
    doSomethingEpic(someElement, tags);


    Важно: метод includes не поддерживается в IE, полифилл есть на сайте MDN
    Ответ написан
  • Sass не компилируется с css gulp4, в чем проблема?

    @vladdimir
    Верстальщик
    Мне тоже не совсем понятно, что вы делаете, что должно происходить и как это работать должно?
    Я установил Gulp 4 подключил sass и все работает, но только когда я перезапускаю gulp через терминал, до этого момента не браузер не файл css не обновляется, сижу целый день, не могу понять в чем проблема.

    В общем не могу я понять вашу проблему. Вот в тексте сказано, что при каких-то условиях сборка работает, а при других нет. Какие условия не ясно. Быстрее всего искать проблемы, сравнивая отличия. Почему работает в одних условия, что изменяется в других условиях запуска, что перестает работать.

    По самому файлу, ну слежение у вас настроено странновато

    gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', gulp.parallel('sass'));

    Тут вроде норм, отслеживаете изменения в файле, запускаете задачу на сборку. Только вот вы отслеживаете только основной файл. Это значит, что блоки, которые вы подключаете в него, наблюдатель просмотрит только один раз, сразу после подключения директивой import, после этого все изменения в подключаемых в файле импортах наблюдатель не заменит и основной файл не пересоберет. Нужно указать путь к файлам, которые нужно отслеживать: 'catalog/view/theme/apple/stylesheet/**/*.sass', например. Хотя если у вас весь код в одном файле, без использования import, то и так норм.

    Далее по сборщику
    gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/apple/template/**/*.twig', browserSync.reload);
    gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
    gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);

    Этими правилами вы говорите Галпу: «Смотри за всеми этими файлами, а если они изменятся, перезагрузи страницу и все». То есть, никакой сборки не происходит, просто перезагрузка. Хотя если так и надо или где-то в другом месте что-то делается, то значит так и надо, наверное.

    Еще заметил что у вас две задачи с одинаковым именем 'sass'. Стало интересно, что делает Галп в таких случаях: ругается или переопределяет задачу?

    Больше каких либо проблем беглым взглядом не вижу, непривычно такую сборку смотреть, очень хаотично на мой взгляд. Например, browserSync я организую в одной задаче и не приходится добавлять reload в другие задачи:
    const watcher = () => {
      watch(options.scripts.src, scripts);
      watch(options.html.watch, html);
      watch(options.styles.watch, styles);
      watch(options.copy.src, copy);
    };
    
    const server = () => {
      browserSync.init({
        server: {
          baseDir: output,
        },
      });
    
      browserSync.watch(`${output}/**/*.*`).on('change', browserSync.reload);
    };

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