Wiki
Clone wikiCMS / Окна atmWnd
Начиная с 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>
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