1. Atom-M CMS Avatar Atom-M CMS
  2. Atom-M CMS
  3. CMS

Wiki

Clone wiki

CMS / Окна atmWnd

View History

Начиная с Atom-M версии 4 в движок интегрированы обновлённые aJax окошки. AtmWnd 3.0 теперь используют современный XMLHttpRequest для отправки запросов, слушают ответ и в зависимости от ситуации показывают сообщение, перенаправляют или возвращают работу другой функции. Также теперь окошки могут показывать не только переданную строку, но и элемент страницы или другую страницу сайта.

Создание окна

Примечание: при создании окна, у которого имя совпадает с существующим, существующее окно обновит контент на версию из нового окна и, если было скрыто, появится.

Простое создание окна

Новое окно создается следующим кодом:

atmWnd(name, title, content, params)

  • name - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами.
  • title - заголовок окошка. Отображается в шапке.
  • content - текст, выводимый в окне.
  • params - дополнительные параметры. Список ниже. Необязательное поле.

Создание окна из другого источника

Как уже было написано, atmWnd теперь могут выводить не только переданную строку, но и элемент страницы или другую страницу сайта.

atmWndData(name, title, data, params)

  • name - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами.
  • title - заголовок окошка. Отображается в шапке.
  • data - массив, указывающий, откуда брать информацию.
  • params - дополнительные параметры. Список ниже. Необязательное поле.

Массив data должен состоять из двух пунктов:

  • type
  • source

На данный момент type поддерживается двух видов:

  • dom - вывести элемент со страницы.
  • url - вывести содержимое какой-либо страницы сайта.

source должен содержать собственно значение для того, что указано в type.

Например,

{type: 'url', source: '/path/to/file.htm'}

или

{type: 'dom', source: '.login_form'}

(🆕 Atom-M 6) В случае, если type = url, массив data может дополнительно содержать следующие параметры:

  • ajax_type - тип отправляемого запроса: POST (по-умолчанию) или GET
  • data - массив отправляемых данных, которые будут добавлены при запросе адреса, указанного в source.

Отправка формы

Функция отправляет форму на сервер и открывает окно со статусом выполненного действия.

Кроме того, можно использовать как инструмент показа содержимого страницы по переданному адресу в ajax окне, для этого нужно вызвать функцию sendu() из ссылки, имеющей атрибут href

sendu(e, title, params)

  • e - передаёт информацию, с какой формой работаем. Если передаём по событию прямо из тега формы, можно написать this, иначе необходимо явно указать id формы, например, 'mainformid'
  • title - заголовок окошка. Отображается в шапке.
  • params - дополнительные параметры. Список ниже. Необязательное поле.

Важно: в любом случае форма должна иметь атрибут name, уникальный на странице.

Параметры

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

  • close - показывать ( true ) или скрывать ( false ) кнопку закрытия окна. По-умолчанию true.
  • overlay - затемнять ( true ) или нет ( false ) фон. По-умолчанию false. Эта опция появилась в Atom-M 5.
  • time - время в милисекундах, после которого окно закроется. По-умолчанию 0 (не закрывать).
  • align - задает выравнивание контента ( left, center, right ). По-умолчанию left.
  • css - массив со стилями окна.
  • callback - (🆕 Atom-M 7) после получения ответа сервера будет вызвана переданная функция с параметрами [полученные_данные, статус]. Вернуть функция должна html код для сообщения внутри окна.

Пример: 

#!text
{close: false, overlay: true, time: 3000, align: 'center', css: {opacity: "0.5"}}

Действия над окнами

Скрыть окно

atmWnd.hide(name)

  • name - уникальное имя окна.

Показать окно

atmWnd.show(name)

  • name - уникальное имя окна.

Cменить заголовок окна

atmWnd.title(name, content)

  • name - уникальное имя окна.
  • title - новый заголовок окошка.

Cменить контент окна

atmWnd.content(name, content)

  • name - уникальное имя окна.
  • content - текст, выводимый в окне.

Cменить параметры окна

atmWnd.param(name, param)

  • name - уникальное имя окна.
  • param - дополнительные параметры.

Cменить тип окна

atmWnd.param(name, param)

  • name - уникальное имя окна.
  • type - на данный момент alert или error.

Представляет из себя заготовку стиля окна.

Кастомизация:

Возвращает HTML окошка

atmWnd.html(id,title,content)

  • name - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами.
  • title - заголовок окошка. Отображается в шапке.
  • content - текст, выводимый в окне.

Дополнительная обработка URL запроса к серверу

sendu.parseurl(url)

  • url - URL запроса.

Обязательно должна возвращать URL после обработки или без обработки

Загружает страницу после отправки данных

sendu.update_page(xhr,url,callback)

  • xhr - обьект XMLHttpRequest после получения данных от сервера.
  • url - URL по которому быт отправлен запрос, в результате которого пришла полноценная страница.
  • callback - Функция, которую указали в третем параметре при вызове sendu(). Предполагается, что она будет обновлять страницу.

callback может быть равна bool типу true, таким образом сообщается что нужно использовать полную перезагрузку страницы, а не частичную или сменой html.

Показывает процесс загрузки файла

sendu.progress(event)

Принимает обьект события получения данных о процессе загрузки. Если event.lengthComputable не пустой(зависит от браузера), то:

  • event.loaded - количество загруженных частей
  • event.total - общее количество частей

Предопределенные переменные

  • atmWnd.loader_tpl - строка с HTML лоадера выводимого в окне
  • sendu.progress_tpl - строка с HTML прогрессбара

Примечание

Все функции перечисленные в пунктах Кастомизация и Действия с окнами анонимные функции в глобальной области видимости, поэтому вы можете переприсвоить их именам свои анонимные функции под свои нужды. Например вот так:

#!html
<script type="text/javascript">

// Для функций
atmWnd.html = function (id,title,content) {
 return '<div id="'+id+'" class="fps-fwin" style="display: none"> \
            <div class="drag_window"> \
              <div class="fps-title" onmousedown="drag_object(event, this.parentNode)">'+title+'</div> \
              <div onClick="atmWnd.hide(\''+id+'\')" class="fps-close"></div> \
              <div class="fps-cont">'+content+'</div> \
            </div> \
        </div>';
}

// Для глобальных переменных
atmWnd.loader_tpl = '<span id="loader"></span>';

</script>

Ну вот и всё. Как видите, всё довольно просто. Если возникнут вопросы, обращайтесь на форум.

Для работоспособности всего этого, должны быть подключены стандартные библиотеки Atom-M CMS. Например так

#!html
<script type="text/javascript" src="{{ www_root }}/data/js/jquery.js"></script>
<script type="text/javascript" src="{{ www_root }}/data/js/atom.js"></script>

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

#!html
<script type="text/javascript">
  atmWnd('test', 'Новое окно', 'Я создал окошко!', '')
</script>

Другой пример: создадим два блока, по нажатию на первый создадим окно, по нажатию на второй сменим у окна контент.

#!html
<div onclick="atmWnd('test2', 'Новое окно', 'Я открыл новое окошко!', '')">Открыть окно</div>
<div onclick="atmWnd.content('test2', 'Новый контент окошка')">Сменить контент</div>
Пример №3. Создание входа на сайт с помощью ajax окна

1.Для начала нужно отредактировать файл loginform.html (папка users используемого вами шаблона).

Это требуется для того чтобы убрать все лишнее и оставить лишь основную форму.

#!html

{% if ReadGET('ajax') == false %}
Выделяем сюда все что не нужно отображать в аякс окне (стили,шапку и т.д.)
 {% endif %}
<form name="loginForm" action="{{ context.action }}" method="POST" id="sendForm" onsubmit="sendu(this); return false">


<table>
    <tr>
        <td> <span class="siu_title"><strong>Логин:</strong></span></td>
        <td> <span class="siu_data"><input type="text" name="username" maxlength="30" value="" /></span></td>
    </tr>
    <tr>
        <td><span class="siu_title"><strong>Пароль:</strong></span></td>
        <td><span class="siu_data"><input type="password" name="password" maxlength="30" />{{ context.form_key }}</span></td>
    </tr>
</table>

            <br/>
            <span class="siu_title"><strong>Запомнить:</strong></span>
            <span class="siu_data"><input type="checkbox" name="autologin" value="1" /></span>

            <input type="submit" name="submitForm"value="Вход" /> {{ context.new_password }}
  </form>
          {% if ReadGET('ajax') == false %}
    Здесь выделяем то что не нужно внизу

(Нужно по итогу оставить лишь чистую форму для входа)
     {% endif %}

2.Добавляем данный код в нужное вам место (например в файл header, headmenu, footer) 

#!html

<a  onclick="atmWndData('test2', 'Новое окно', {type: 'url', source: '{{ www_root }}/users/login_form/?ajax=true'}, '')" rel="nofollow" title="Вход"></a>
С помощью данного способа можно реализовать очень много вещей облегчающих жизнь как администраторам так и обычным пользователям. Например добавление контента, редактирование и регистрацию пользователей, но все это реализовывается по такому же алгоритму действий как и со входом, по этому примеры думаю, можно и не наводить :)

Updated