Иконка ресурса

Создаём модальное окно 1.0.0

Нет прав для скачивания
Совместимость с XenForo
  1. 2.0
Приветствую.
Представим ситуацию что нам необходимо вызывать по ссылке модальное окно с какой-то своей информацией.

Наш пример:
Нужно при клике на ссылку "Изменить статус", которая возле правил в шапке, вызывать окно, где можно изменить свой статус.

Приступим:

Можно прицепить метод к уже существующему контроллеру и через него оперировать, но мы создадим новый путь для примера.
Я надеюсь что Вы знаете как создавать плагины и как они в общем работают. Если нет, можете поискать по сайту, например, этот ресурс (надеюсь он оживёт).
Тут же опишу только основные моменты.

Добавляем путь:
XML:
<route route_type="public" route_prefix="TModalWindow" sub_name="change-status" format=":int&lt;user_id,username&gt;/change-status" controller="Werewolf\TModalWindow:Main" action_prefix="change"/>
Т. е. генерация ссылки {{ link("TModalWindow/change-status", $xf.visitor) }} создаст что-то вроде , обрабатывать будет публичный контроллер Main по методу actionChange, куда аргументом передадут ParameterBag (что-то типа массива на стероидах), внутри которого будет user_id с значением 1 (значение берётся из ссылки).

Добавляем навигацию/ссылку для активации окна:
XML:
<navigation_entry navigation_id="TModalWindow" display_order="1" navigation_type_id="basic" enabled="1"><![CDATA[{"link":"{{ link('TModalWindow/change-status', $xf.visitor) }}","display_condition":"","extra_attributes":{"data-xf-click":"overlay"}}]]></navigation_entry>
Главное тут - это аттрибут data-xf-click='overlay'.
Установив этот аттрибут на элемент, у которого есть href (ссылка), движок XF автоматически запросит ответ по адресу ссылки асинхронно и покажет результат в модальном окне!
Ничего не надо делать с нуля, просто добавь воды.

Обработчик:
PHP:
class Main extends AbstractController {

    public function actionChange(ParameterBag $params) {

        $user = $this->em()->find('XF:User', $params->user_id);

        return $this->view('', 'TModalWindowMain', ["beneficiary" => $user]);

    }

}
Как можем заметить, в $params уже есть user_id, который мы декларировали в роуте. Удобно, чо! =)
Тут нет проверок на ошибки и прочее, это домашнее задание.

Шаблон:
HTML:
<xf:title>{{ phrase('update_your_status') }}</xf:title>

<div class="block-container">
  <div class="block-body">
    <div style="padding: 10px;">
      {{ phrase('TModalWindowUpdateStatusExplain', {"username": $beneficiary.username}) }}
   </div>

    <xf:if is="$xf.visitor.canPostOnProfile()">
      <xf:form action="{{ link('members/post', $xf.visitor) }}" ajax="true"
        data-redirect="off"
        data-reset-complete="true"
        data-no-auto-focus="true"
        class="menu-footer">

        <xf:textarea name="message" rows="1" autosize="true"
          maxlength="{$xf.options.profilePostMaxLength}"
          placeholder="{{ phrase('update_your_status...') }}"
          data-xf-init="focus-trigger user-mentioner" data-display="< :next" />
        <div class="u-hidden u-hidden--transition u-inputSpacer">
          <xf:button type="submit" class="button--primary">{{ phrase('post_verb') }}</xf:button>
        </div>
      </xf:form>
    <xf:else />
      {{ phrase('TModalWindowYouCannotPostHere') }}
    </xf:if>
  </div>
</div>

При добавлении тэга <xf:title></xf:title>, у окна будет установленный заголовок.
Контент надобно обернуть в <div class="block-container"><div class="block-body"></div></div>, дабы выглядел он пристойно.

Скриншот:
Снимок1.PNG


Всё.

Сам рабочий аддон я приложил, можете посмотреть сами.
Автор
_Werewolf_
Скачивания
21
Просмотры
1,334
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя _Werewolf_

Поделиться ресурсом

Назад
Сверху Снизу