• Как показать значение input в div блоке?

    mizutsune
    @mizutsune
    Frontend Developer
    document.addEventListener("DOMContentLoaded", () => { 
       const input = document.querySelector("input");
       const targetElement = document.querySelector("#res");
       
        targetElement.innerHTML = input.value;
    })
    Ответ написан
    Комментировать
  • Как оптимизировать движок форума?

    mizutsune
    @mizutsune
    Frontend Developer
    Основной проблемой из-за которой в phpBB появляются тормоза, является большое количество установленных модов и/или расширений, которые в свою очередь написаны на коленке. Разумеется пытаться оптимизировать весь этот зоопарк, особого смысла нет. Да и вообще в большинстве плагинов, присутствует куча лишнего функционала, который возможно даже не используется на сайте.

    Для решения задачи по оптимизации, нужно достаточно хорошо изучить документацию, набраться опыта, а дальше лично создавать кастомные расширения под свои нужды, при этом стоит понимать, что некоторые решения можно реализовать без php, то есть средствами JavaScript + CSS.
    Ответ написан
    Комментировать
  • Можно ли ставить after прямо на input а не на form?

    mizutsune
    @mizutsune
    Frontend Developer
    Не у всех HTML тегов есть собственное содержимое, поэтому не во всех случаях стоит ждать корректного результата при использовании псевдоэлементов на следующих тегах <img>, <input type="text">, <input type="email">, <input type="password">, <input type="datetime">, etc.

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

    <div class="inputbox">
       <input type="text">
    </div>


    .inputbox::after { 
      /* ...стили для псевдоэлемента */ 
    }
    Ответ написан
    3 комментария
  • Как на форумном движке добавлять статьи и вести блог?

    mizutsune
    @mizutsune
    Frontend Developer
    Есть конечно всякие расширения и моды в стиле Ultimate Blog для phpBB, но большинство из них либо заброшены, либо вообще написаны на коленке.

    Естественно phpBB является форумным движком и поэтому мало кому нужна реализация блога на этой CMS. Но, если сделать немного манипуляций, вполне возможно превратить форум на phpBB в более менее нормальный блог. Правда не стоит забывать про недостатки CMS, ведь у phpBB они тоже есть.

    Например некоторые из основных минусов:

    1. ЧПУ. Разработчики phpBB считают это абсолютно ненужной фичей, быть может даже вредной.
    2. Отсутствие многих функций из коробки. Например лайк/дизлайк или загрузка картинок.
    3. Неадекватно написанные плагины. А их много, очень даже много...
    4. Отсутствие Ajax там где казалось бы он очень нужен.

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

    mizutsune
    @mizutsune
    Frontend Developer
    Вот так выглядит код для создания темы в phpBB без использования графического интерфейса:

    <?php
    define('IN_PHPBB', true);
    $phpbb_root_path = './';
    $phpEx = substr(strrchr(__FILE__, '.'), 1);
    include($phpbb_root_path . 'common.' . $phpEx);
    include($phpbb_root_path . 'includes/functions_posting.' . $phpEx);
    
    
    $user_id = 2; // ID пользователя
    $forum_id = 2; // ID форума 
    $subject = 'Welcome to Wonderland'; // Заголовок темы
    $text = 'Lorem ipsum dolor sit amet.'; // Контент темы
    
    $user->session_create($user_id);
    $auth->acl($user->data);
    $user->setup();
    
    $poll = $uid = $bitfield = $flags = '';
    
    generate_text_for_storage($text, $uid, $bitfield, $flags, true, true, true);
    
    $data = array(
        'forum_id'      => $forum_id,
        'topic_id'       => 0,
        'icon_id'       => false,
        'enable_bbcode'     => true,
        'enable_smilies'    => true,
        'enable_urls'       => true,
        'enable_sig'        => true,
        'message'       => $text,
        'message_md5'   => md5($text),
        'bbcode_bitfield'   => $bitfield,
        'bbcode_uid'        => $uid,
        'post_edit_locked'  => 0,
        'topic_title'       => $subject,
        'notify_set'        => false,
        'notify'            => false,
        'post_time'         => 0,
        'forum_name'        => "",
        'enable_indexing'   => true,
        'force_approved_state'    => true,
        'force_visibility'            => true,
    );
    
    $result = submit_post('post', $subject, '', POST_NORMAL, $poll, $data);
    
    if ($result === FALSE) {
        echo "Error sending post";
    } else {
        echo "Post sent successfully, URL is: $result";
    }
    
    $user->session_kill(false);


    При желании и наличии опыта, можете переписать код под свои нужды, плюс улучшив безопасность и прочее.
    Ответ написан
    Комментировать
  • Как установить расширение в phpBB3?

    mizutsune
    @mizutsune
    Frontend Developer
    Читать документацию конечно же мы не любим.

    И в общем-то по дефолту, многие расширения устанавливаются стандартным способом. Распаковываем архив с расширением в папку ext, после чего идём в админку и активируем расширение.
    Ответ написан
    Комментировать
  • Не удается получить дочерний элемент родителя, в чем проблема?

    mizutsune
    @mizutsune
    Frontend Developer
    Свойство children хранит в себе псевдомассив дочерних элементов. Дочерними элементами считаются все теги, которые непосредственно расположены внутри блока. Подробнее можно прочитать в документации.

    Ну, а так... интересная конечно строка:

    var parent = this.closest('div').className;

    Как вы думаете что содержит в себе переменная parent? HTMLElement или строку содержащую селектор класса выбранного элемента?

    В общем правильнее сделать так:

    const parent = this.closest('.parent-selector');
    const child = parent.querySelector(".b24-form-control-label");


    И вообще, пора бы уже использовать const/let вместо устаревшего var.
    Ответ написан
    Комментировать
  • Закрытое сообщение для пользователя?

    mizutsune
    @mizutsune
    Frontend Developer
    Можно сделать так:

    <!-- IF S_REGISTERED_USER -->
       <!-- IF S_USERNAME eq "RISARO" -->
          Welcome home, good hunter...
       <!-- ENDIF -->
    <!-- ENDIF -->


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

    Как это работает?

    1. Если пользователь авторизован и не является "ботом":

    <!-- IF S_REGISTERED_USER --><!-- ENDIF -->

    2. Если имя пользователя === RISARO:

    <!-- IF S_USERNAME eq "RISARO" --><!-- ENDIF -->

    Однако вышеописанный метод, работает только для "имени" пользователя, а вот если нужно сделать проверку по UID, тогда придётся сделать некоторые дополнительные манипуляции. Дело в том что в phpBB нет глобальной переменной шаблона S_USER_ID, с помощью который вы могли бы сделать проверку по UID. Однако вы можете добавить эту переменную, например через расширение.

    Есть конечно и более простой способ.

    1. Открываем: /includes/functions.php
    2. Находим: $template->assign_vars(array(
    3. Добавляем: 'S_USER_ID' => $user->data['user_id'];

    Теперь переменная S_USER_ID доступна для использования в шаблонах. Но, такой способ не рекомендуется использовать по многим причинам. Для подобных модификаций отлично подходят расширения.
    Ответ написан
    Комментировать
  • Как в форуме phpBB3 создать пользователя?

    mizutsune
    @mizutsune
    Frontend Developer
    Для этого можно использовать расширение adduser, которое даёт возможность добавлять пользователей на форум, прямо из админки сайта.

    После установки расширения, в админке во вкладке Пользователи и группы, появится новый пункт: ACP Add User.

    633b1df2dea1d148799986.png

    Правда, для работы расширения придётся добавить свой языковый пакет, потому что расширение доступно по дефолту только на Английском языке.
    Ответ написан
    Комментировать
  • Аналог function.php дочерней темы вордпресс в phpbb3.2?

    mizutsune
    @mizutsune
    Frontend Developer
    В phpBB это работает по другому.

    Для расширения функционала и/или добавления своих функций, рекомендуется использовать расширения, которые основаны на событиях.

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

    Обычно тема содержит JS скрипты, CSS стили, HTML файлы с шаблонами, ну и например какие-нибудь картинки/svg иконки/файл с конфигом/etc. Проще говоря, тема в phpBB это больше Frontend и никаких function.php в папке с темой нет.
    Ответ написан
    1 комментарий
  • Проверка на пустоту в input после заполнения?

    mizutsune
    @mizutsune
    Frontend Developer
    Как вариант:

    const debounce = (fn, ms = 300) => {
         let timer;
         return (...args) => {
              clearTimeout(timer);
              timer = setTimeout(() => {
                   fn.apply(this, args);
              }, ms);
         };
    }
    
    const inputbox = document.querySelector(".input");
    
    const checkForEmpty = ({ value: v }) => v === "" && console.log("Empty");
    
    const processChanges = debounce(() => checkForEmpty(inputbox), 500);
    
    inputbox.addEventListener("input", processChanges);
    Ответ написан
    Комментировать
  • Как добавить класс по клику на кнопку внутри карточки товара?

    mizutsune
    @mizutsune
    Frontend Developer
    const container = document.querySelector('.box');
    
    container.addEventListener("click", ({ target: t }) => {
       if(t.classList.contains("btn")) {
           const card = t.closest(".item");
           card && card.classList.add("active");
       }
    })


    А так касательно кода из вопроса, то тут всё достаточно просто. Чтобы решить задачу, вам нужно добавлять обработчик клика кнопке которая является дочерним элементом карточки, плюс можно заменить цикл for на forEach, что сделает код более читабельным.

    document.querySelectorAll('.item').forEach(v => {
       v.querySelector(".btn").addEventListener('click', () => {
          v.classList.add('active');
       });
    });


    Однако в целом такой подход не очень. То есть я хочу сказать что добавление обработчиков в цикле, имеет свои подводные камни, про которые можно найти достаточно информации.
    Ответ написан
    1 комментарий
  • Как расположить карточки в ряд?

    mizutsune
    @mizutsune
    Frontend Developer
    Можно конечно сделать и так как вам подсказали в соседнем ответе:

    .container{ 
      display: flex;
      justify-content: space-around;
    }
    
    .card { 
       width: fit-content; 
    }


    Но в таком случае, если какая-нибудь карточка будет больше по ширине, тогда равномерного расположения по центру уже не будет.

    63397efd5efe3045799569.png

    Можно сделать по другому, например используя CSS Grid:



    Суть в том что в этой строке:

    grid-template-columns: repeat(auto-fill, minmax(310px, 310px));


    Указываем минимальную и максимальную ширину карточек, тем самым запрещаем растягиваться элементам, что обеспечит корректную работу свойства: justify-content: space-between;
    Ответ написан
    Комментировать
  • Не работает псевдоэлменет при наведение на текст?

    mizutsune
    @mizutsune
    Frontend Developer
    Вот здесь:

    .title:hover ~ .title::after {
        transform: rotate(180deg);
    }


    При наведении на элемент .title, вы пытаетесь применить трансформацию псевдоэлементу :after, используя при этом селектор следующего элемента, который работает совсем по другому.

    Чтобы менять стили псевдоэлементов, при наведении на родительский элемент, используется такая комбинация:

    <element>:hover::after { /* ... style */ }

    То есть для решения проблемы, нужно сделать так:

    .title:hover::after {
        transform: rotate(180deg);
    }
    Ответ написан
    Комментировать
  • Как работает наследственность стилей в этом случае?

    mizutsune
    @mizutsune
    Frontend Developer
    Если это касается именно Swiper, то решается это дело без !important и других лишних действий. Достаточно указать для кнопок управления слайдером кастомные селекторы и назначить нужные стили:

    new Swiper('.swiper', {
      navigation: {
        nextEl: '.my-awesome-slider-button-next',
        prevEl: '.my-awesome-slider-button-prev',
      },
    });


    .my-awesome-slider-button-prev { /* ...styles */ };
    .my-awesome-slider-button-next { /* ...styles */ };
    Ответ написан
    1 комментарий
  • Как правильно реализовать модальное подтверждением удаления элементов?

    mizutsune
    @mizutsune
    Frontend Developer
    Не пойму в чем дело, разъясните пожалуйста.


    Действительно, что-то тут не так...

    Немного об оригинальном коде из вопроса...


    Для начала поставьте console.log в определенном месте своего кода:

    document.querySelector('.list').addEventListener('click', (event) => {
      const target = event.target
      if (target.classList.contains('delete')) {
        const task = document.querySelector(`[data-id="${target.dataset.delete}"]`)
        // Посмотрим что будет выводиться в консоль?
        console.log(target.dataset.id)
        deleteTask(task)
      }
    })


    И попробуйте проделать все описанные в вопросе действия, после чего посмотрите сколько идентификаторов текущего "таска" - выводятся в консоль. Что-то тут не так... Разобраться конечно в этом можно, но нужно разбираться и тратить время...


    Ну, а вообще, если как-то по простому решить проблему + немного подчистить код, то можно сделать например вот так:

    const modal = document.querySelector(".modal");
    const listbox = document.querySelector(".list");
    const modalCancelButton = modal.querySelector(".cancel");
    const modalConfirmButton = modal.querySelector(".confirm");
    
    let currentTaskID = null;
    
    listbox.addEventListener("click", ({ target: t }) => {
      if (t.classList.contains("delete")) {
        currentTaskID = t.dataset.delete;
        modal.classList.remove("hidden");
      }
    });
    
    modalCancelButton.addEventListener("click", () => {
      modal.classList.add("hidden");
      currentTaskID = null;
    });
    
    modalConfirmButton.addEventListener("click", () => {
      modal.classList.add("hidden");
      deleteTask(currentTaskID);
    });
    
    const deleteTask = id => id && listbox.querySelector(`[data-id="${id}"]`).remove();
    Ответ написан
    Комментировать
  • Есть ли хорошие конверторы из jquery в js?

    mizutsune
    @mizutsune
    Frontend Developer
    Есть такая штука - replace-jquery, которая в той или иной степени может помочь в некоторых случаях, но это не 100-процентный конвертер или что-то в этом духе.

    Вообще самым лучшим способом будет ручное переписывание кода. Статей описывающих как и чем заменить методы Jquery , достаточно чтобы справиться со столь "сложной" задачей. Да, количество кода на нативном JS будет больше и ручная "конвертация" займёт время, но это не столь критично. Я бы сказал бы что будет даже полезно, но это смотря с какой стороны смотреть на это всё.

    ИМХО, но в большинстве случаев, разгребать тонну кода, ради простого функционала, бессмысленно, ведь можно написать всё с нуля, возможно даже лучше... просто нужно понять, что нужно сделать и какой результат ожидается.

    Но вылазит то один баг, то другой. Уже нервишки здают...


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

    Есть ли хорошие конвертеры из jquery в js?


    Нет и не будет, потому что JQuery это всего лишь библиотека написанная на JS, а не какой-то там инопланетный артефакт.
    Ответ написан
    Комментировать
  • Как добавить черный цвет в футер?

    mizutsune
    @mizutsune
    Frontend Developer
    - <footer class"footer">
    + <footer class="footer">

    - background-color: # #0A0A0A;
    + background-color: #0A0A0A;
    Ответ написан
    1 комментарий
  • Как лучше сверстать такой блок?

    mizutsune
    @mizutsune
    Frontend Developer
    Ответ написан
    Комментировать