Общие сведения

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

Технически, javascript, активирующий микроразметку располагается в файле /resource/js/jquery.rs.admindebug.js

Рассмотрим классы и поведение, которое они присваивают:

AJAX зоны

С помощью перечисленных ниже классов можно быстро создать обновляемые с помощью ajax запросов зоны в административной панели.

updatable

Определяет границу обновляемой зоны. Если внутри неё будут клики по ссылкам с классом .call-update, то в данную зону будет помещен загруженный через AJAX контент. В атрибуте data-url следует указывать текущий URL для случая, когда вызывается обновление контента, но не передается URL. Это может быть после успешного создания нового объекта(через crud-add) или после редактирования существующего объекта(crud-edit)

<div class="updatable" data-url="Текущий URL">
    //Здесь некоторый контент, который будет обновлен после нажатия на ссылку "Обновить".
    
    <a data-update-url="http://ссылка" class="call-update">Обновить</a>
    или
    <a href="http://ссылка" class="call-update">Обновить</a>
</div>

В случае, если на экране расположены несколько .updatable зон, необходимо присваивать им идентификаторы через атрибут data-update-block-id

<div class="updatable" data-url="Текущий URL" data-update-replace data-update-block-id="zone1">
    //В случае наличия атрибута data-update-replace, элемент .updatable будет заменен результатом AJAX запроса.
    
    <a data-update-url="http://ссылка" class="call-update">Обновить</a>
</div>
<div class="updatable" data-url="Текущий URL" data-update-block-id="zone2">
    //Здесь некоторый контент, который будет обновлен после нажатия на ссылку "Обновить".
    
    <a data-update-url="http://ссылка" class="call-update">Обновить</a>
</div>

default-updatable

Обновляемая по-умолчанию зона, если была нажата ссылка с классом .call-update, расположенная вне какого-либо контейнера .updatable

<div class="default-updatable">
    <div class="updatable" data-url="Текущий URL">
        <a href="http://ссылка" class="call-update">Обновить ближайшую зону</a>    
    </div>
    
    <div class="some-other-class">
        <a href="http://ссылка" class="call-update">Обновить зону по умолчанию, потому что другой зоны нет</a>    
    </div>
</div>    

call-update

Класс, присваиваемый к ссылке. При нажатии на такую ссылку произойдет загрузка контента по ссылке через AJAX и обновление ближайшей обновляемой зоны. Можно указывать ссылку в атрибуте href или в атрибуте data-update-url. Это будет влиять на возможность или невозможность открыть ссылку в новом окне без AJAX. Если к ссылке добавить класс no-update-hash, то URL не будет изменяться, при нажатии на ссылку.

<div class="updatable" data-url="Текущий URL">
    //Здесь некоторый контент, который будет обновлен после нажатия на ссылку "Обновить".
    
    <a href="http://ссылка 1" class="call-update">Обновить 1</a>
    <a href="http://ссылка 2" class="call-update">Обновить 2</a>
    <a href="http://ссылка 3" class="call-update no-update-hash">Обновить 3</a>
    //Если добавлен класс no-update-hash, то URL не будет изменяться 
</div>

form-call-update

Класс, присваиваемый к элементу form, означает, что текущую форму нужно отправить через ajax и обновить ближайшую обновляемую зону.

<div class="updatable" data-url="Текущий URL">
    <form class="form-call-update" action="http://ссылка1" method="POST">
        <label>Ваше имя</label>
        <input type="text" name="name">
        <input type="submit" value="Отправить">
    </form>
    
    <form class="form-call-update" action="http://ссылка2" method="GET">
        <label>Ваше имя</label>
        <input type="text" name="name">
        <input type="submit" value="Отправить">        
    </form>    
    
    
    //Здесь какой-либо контент, который будет перезагружен после обновления updatable    
</div>

CRUD действия

ReadyScript предоставляет набор классов для простой организации наиболее востребованных функций в административной панели. К таким операциям относятся: открытие форм, отправка форм, выполнение AJAX запроса и обновление рабочей зоны, отправка отмеченных элементов таблицы в POST запросе и др.

crud-ajax-group

Данный класс определяет границы AJAX группы. Это означает, что кнопки с классами .crud-form-save, .crud-form-apply могут находиться за пределами формы .crud-form. При нажатии на такие кнопки, будет происходить поиск формы в границах элементах crud-ajax-group.

<div class="crud-ajax-group">
    <form class="crud-form" action="" method="POST">
        //Здесь ваша форма
    </form>
    
    <a class="crud-form-save">Сохранить</a>
    <a class="crud-form-cancel">Отмена</a>
</div>

crud-add

Открывает в диалоговом окне форму создания объекта. Класс навешивается на ссылку. Необходимо обязательно указывать у ссылки атрибут href или data-url, в котором должна быть представлена ссылка на необходимый метод контроллера, который вернет форму. После успешного сохранения объекта, будет автоматически обновлена рабочая область updatable, ссылка из которой была нажата.

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
        //Здесь список объектов, например товаров
        
        <a href="/admin/catalog-ctrl/?do=add" class="crud-add">Создать товар</a>
    </div>
</div>

crud-edit

Открывает в диалоговом окне форму редактирования объекта. В настоящее время поведение идентично поведению класса crud-add.

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
        <div class="list">
            <div class="item">
               Элемент 1
               <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-edit">редактировать</a>
            </div>
            <div class="item">
               Элемент 2
               <a href="/admin/catalog-ctrl/?do=edit&id=2" class="crud-edit">редактировать</a>
            </div>
            <div class="item">
               Элемент 3
               <a href="/admin/catalog-ctrl/?do=edit&id=3" class="crud-edit">редактировать</a>
            </div>          
        </div>
    </div>
</div>

crud-list-form

Отмечает элемент как форму, внутри зоны .updatable. Должен быть присвоен элементу form. Именно данные этой формы будут отправляться при нажатии на элементы с классами .crud-post, .crud-remove, .crud-multiedit. Внутри формы должны быть input[name="chk[]"], value которых должно содержать ID элементов, с которыми нужно производить действия.

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
        <form class="crud-list-form">
           <div class="item">
                <input type="checkbox" name="chk[]" value="1">
                Элемент ID:1
            </div>
            <div class="item">
                Элемент ID:2
                <input type="checkbox" name="chk[]" value="2">
            </div>                
        </form>
        
        <a href="/admin/catalog-ctrl/?do=multidelete" class="crud-remove" data-confirm-text="Вы действительно желаете удалить выбранные элементы?">Удалить выбранное</a>
        <a href="/admin/catalog-ctrl/?do=some-custom" class="crud-post">Выполнить произвольное действие с выбранными элементами</a>
        <a href="/admin/catalog-ctrl/?do=multiedit" class="crud-multiedit">Редактировать массово выбранные элементы</a>     
    </div>
</div>

crud-remove

Выполняет запрос на удаление выбранных элементов списка, перед этим спрашивает подтверждение от пользователя, указанное в атрибуте data-confirm-text. Данный класс необходимо ставить кнопке в панели действий.

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
         <form class="crud-form list">
             <div class="item">
                <input type="checkbox" name="chk[]" value="1">
                Элемент ID:1
             </div>
             <div class="item">
                Элемент ID:2
                <input type="checkbox" name="chk[]" value="2">
             </div>          
         </form>
         
         <a href="/admin/catalog-ctrl/?do=multidelete" class="crud-remove" data-confirm-text="Вы действительно желаете удалить выбранные элементы?">Удалить выбранное</a>
     </div>
</div>

crud-post

Отправляет форму .crud-list-form с отмеченными элементами на заданный URL методом POST. URL должен быть указан в атрибуте data-url или href.

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
        <form class="crud-list-form">
           <div class="item">
                <input type="checkbox" name="chk[]" value="1">
                Элемент ID:1
            </div>
            <div class="item">
                Элемент ID:2
                <input type="checkbox" name="chk[]" value="2">
            </div>                
        </form>
        
        <a data-url="/admin/catalog-ctrl/?do=some-custom" class="crud-post">Выполнить произвольное действие с выбранными элементами</a>     
    </div>
</div>    

crud-remove-one

Отправляет GET запрос на удаление одного элемента в списке и обновляет зону .updatable. URL для удаления элемента должен быть указан в атрибуте data-url или href.

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
        <div class="list">
            <div class="item">
               Элемент 1
               <a href="/admin/catalog-ctrl/?do=del&id=1" class="crud-remove-one">удалить</a>
            </div>
            <div class="item">
               Элемент 2
               <a href="/admin/catalog-ctrl/?do=del&id=2" class="crud-remove-one">удалить</a>
            </div>
            <div class="item">
               Элемент 3
               <a href="/admin/catalog-ctrl/?do=del&id=3" class="crud-remove-one">удалить</a>
            </div>          
        </div>
    </div>
</div>

crud-multiedit

Добавляет ID выбранных элементов к URL с целью открытия диалога массового редактирования. URL должен быть указан в атрибуте data-url или href. Если выбран один элемент, то происходит поиск элемента на странице по селектору .crud-edit[data-id="ID выбранного элемента"], если он находится то по этому элементу эмитируется нажатие. Если элемент по такому селектору не найден, то выдается сообщение "Выберите как минимум 2 элемента для мультиредактирования".

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
        <form class="crud-list-form">
           <div class="item">
                <input type="checkbox" name="chk[]" value="1">
                Элемент ID:1
                <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-edit" data-id="1">редактировать</a>                
            </div>
            <div class="item">
                Элемент ID:2
                <input type="checkbox" name="chk[]" value="2">
                <a href="/admin/catalog-ctrl/?do=edit&id=2" class="crud-edit" data-id="2">редактировать</a>
            </div>                
        </form>
        
        <a data-url="/admin/catalog-ctrl/?do=multiedit" class="crud-multiedit">Редактировать</a>     
    </div>
</div>    

crud-form

Отмечает элемент как форму редактирования одного объекта. Должен быть присвоен элементу form. Данные именно с этой формы будут отправлены при нажатии на кнопки с классами .crud-form-save, .crud-form-apply. Этот элемент необходим для корректной работы кнопки .crud-form-cancel.

<div class="crud-ajax-group">
     <form class="crud-form">
        //Здесь ваша форма                       
     </form>
</div>

crud-form-save

Класс, который наделяет кнопку поведением "Сохранить и закрыть". Применется в формах создания и редактирования объектов. При нажатии на такую кнопку будет отправлена форма .crud-form и в случае успешного ответа, диалоговое окно будет закрыто. Если действие происходит на отдельной странице, то произойдет переход на страницу к списку объектов.

<div class="crud-ajax-group">
     <form class="crud-form">
        //Здесь ваша форма                       
     </form>
     
     <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-save">Сохранить и закрыть</a>
</div>

crud-form-apply

Класс, который наделяет кнопку поведением "Сохранить". Применется в формах редактирования объектов. При нажатии на такую кнопку будет отправлена форма .crud-form и в случае успешного ответа, диалоговое окно не будет закрыто. Если действие происходит на отдельной странице, то над формой отобразится надпись "Изменения успешно сохранены".

<div class="crud-ajax-group">
     <form class="crud-form">
        //Здесь ваша форма                       
     </form>
     
     <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-apply">Сохранить</a>
</div>

crud-form-cancel

Закрывает диалоговое окно без сохранения изменений. В случае, если редактирование происходит на отдельной странице, то переходит на страницу со списком объектов. Используется в формах редактирования объектов.

<div class="crud-ajax-group">
     <form class="crud-form">
        //Здесь ваша форма                       
     </form>
     
     <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-apply">Сохранить</a>
     <a href="/admin/catalog-ctrl/" class="crud-form-cancel">Сохранить</a>
</div>

crud-dialog

Открывает диалоговое окно с произвольным контентом, полученным из заданного URL с помощью AJAX запроса. URL должен быть указан в атрибуте href или data-url.

<a href="/admin/modulename-customctrl/" class="crud-dialog">Открыть диалоговое окно</a>

crud-sm-dialog

Применяется совместно с классами .crud-dialog, .crud-add, .crud-edit. Если данный класс указан, то диалоговое окно будет иметь небольшой размер 500x500 px.

<a href="/admin/modulename-customctrl/" class="crud-dialog crud-sm-dialog">Открыть диалоговое окно</a>

crud-switch

Класс необходимо устанавливать переключателям, совместно с классом rs-switch. Позволяет выполнять запрос на URL, указанный в атрибуте data-url без отображения индикатора загрузки.

<div class="toggle-switch rs-switch crud-switch on" data-url="/admin/catalog-ctrl/?id=1&do=ajaxTogglePublic">
    <label class="ts-helper"></label>
</div> 

crud-get

Выполняет GET запрос на URL, заданный в атрибуте data-url или href. После выполнения запроса обновляет ближайшую зону .updatable. Может использоваться для выполнения любых произвольных действий для объекта.

<div class="crud-ajax-group">
    <div class="updatable" data-url="Текущий URL">
        //Здесь произвольный контент
                
        <a href="/admin/modulename-customctrl/" class="crud-get">Выполнить действие</a>
    </div>
</div>

crud-form-error

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

<div class="crud-ajax-group">
     <div class="crud-form-error"></div>
     <form class="crud-form">
        //Здесь ваша форма                       
     </form>
     
     <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-save">Сохранить и закрыть</a>
</div>

crud-form-success

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

<div class="crud-ajax-group">
     <div class="crud-form-error"></div>
     <div class="crud-form-success"></div>
     <form class="crud-form">
        //Здесь ваша форма                       
     </form>
     
     <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-save">Сохранить и закрыть</a>
</div>

Оглавление