CMSBundle

  • Состояние Новая
  • Завершенность
    0%
  • Тип задачи Сделать
  • Категория -
  • Кому назначена: Никому
  • Операционная система All
  • Критичность Низко
  • Приоритет Обычный
  • Обнаружена в версии
  • Ожидается в версии Не решено
  • Ожидается к дате Не решено
  • Голосов за задачу
  • Частная задача
Принадлежит проекту: CMSBundle
Кем открыта: Артём - 24 Feb 2014
Последним редактировал Артём - 19 Jun 2014

FS#404 - Измнение вёрстки формы мета-тэгов на jQuery

Сейчас есть вот такие формы:

<form action="" method="POST" class="form-horizontal">
    <fieldset>
        <div id="smart_core_folder_title_control_group" class=" control-group">
            <label for="smart_core_folder_title" class=" control-label required">
            Заголовок <span>*</span></label>
            <div class=" controls">
                <input type="text"
                    id="smart_core_folder_title" 
                    name="smart_core_folder[title]" required="required"
                    class="focused input-block-level not-removable"
                    value="Главная"/>
            </div>
        </div>
        <div id="smart_core_folder_descr_control_group" class=" control-group">
            <label for="smart_core_folder_descr" class=" control-label optional">
            Описание </label>
            <div class=" controls">
                <input type="text"
                    id="smart_core_folder_descr"
                    name="smart_core_folder[descr]" 
                    class=" input-block-level not-removable"/>
            </div>
        </div>
        <div id="smart_core_folder_router_node_id_control_group" class=" control-group">
            <label for="smart_core_folder_router_node_id" class=" control-label optional">
            Router node id </label>
            <div class=" controls">
                <input type="number"
                    id="smart_core_folder_router_node_id"
                    name="smart_core_folder[router_node_id]"
                    class=" input-block-level not-removable"/>
            </div>
        </div>
        <div id="smart_core_folder_position_control_group" class=" control-group">
            <label for="smart_core_folder_position" class=" control-label optional">
            Позиция </label>
            <div class=" controls">
                <input type="number"
                    id="smart_core_folder_position"
                    name="smart_core_folder[position]"
                    class=" input-block-level not-removable"
                    value="0"/>
            </div>
        </div>
        <div id="smart_core_folder_has_inherit_nodes_control_group" class=" control-group">
            <label for="smart_core_folder_has_inherit_nodes" class=" control-label optional">
            Наследование нод </label>
            <div class=" controls">
                <label class="checkbox">
                    <input type="checkbox"
                       id="smart_core_folder_has_inherit_nodes"
                       name="smart_core_folder[has_inherit_nodes]"
                       class="" value="1"
                       checked="checked"/>
                </label>
            </div>
        </div>
        <div id="smart_core_folder_template_inheritable_control_group" class=" control-group">
            <label for="smart_core_folder_template_inheritable" class=" control-label optional">
            Наследуемый шаблон </label>
            <div class=" controls">
                <input type="text"
                    id="smart_core_folder_template_inheritable"
                    name="smart_core_folder[template_inheritable]"
                    maxlength="30"
                    class=" input-block-level not-removable"/>
            </div>
        </div>
        <div id="smart_core_folder_template_self_control_group" class=" control-group">
            <label for="smart_core_folder_template_self" class=" control-label optional">
            Собственный шаблон </label>
            <div class=" controls">
                <input type="text"
                    id="smart_core_folder_template_self"
                    name="smart_core_folder[template_self]"
                    maxlength="30"
                    class=" input-block-level not-removable"/>
            </div>
        </div>
        <div id="smart_core_folder_meta_control_group" class=" control-group">
            <label class=" control-label optional">
            Мета тэги </label>
            <div class=" controls">
                <div id="smart_core_folder_meta_description_control_group" class=" control-group">
                    <label for="smart_core_folder_meta_description" class=" control-label optional">
                    Описание </label>
                    <div class=" controls">
                        <input type="text" 
                    id="smart_core_folder_meta_description" 
                    name="smart_core_folder[meta][description]"
                    class=" input-block-level not-removable"
                    value="Интернет магазин полезных продуктов"/>
                    </div>
                </div>
                <div id="smart_core_folder_meta_keywords_control_group" class=" control-group">
                    <label for="smart_core_folder_meta_keywords" class=" control-label optional">
                    Ключевые слова </label>
                    <div class=" controls">
                        <input type="text"
                            id="smart_core_folder_meta_keywords"
                            name="smart_core_folder[meta][keywords]"
                            class=" input-block-level not-removable"
                            value="Натуральные продукты, Микориза"/>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="smart_core_folder__token"
            name="smart_core_folder[_token]"
            class=" input-block-level not-removable"
            value="0a6a-bKsxcMxfCrWQA01PoDaLq78mcEFawmENVrecCs"/>
    </fieldset>
    <div class="control-group">
        <div class="controls">
            <button type="submit" name="update" class="btn btn-success"><i class="icon-ok icon-white"></i> Сохранить</button>
            <a class="btn cmf-cancel" href="/admin/structure/">Отменить</a>
        </div>
    </div>
</form>

В них нужно блок smart_core_folder_meta_control_group оформить как табик http://getbootstrap.com/2.3.2/components.html#navs т.е. будут 2 вкладки: “основные настройки” и “мета тэги”.

В итоге должно получиться примерно вот такая штука http://do.smart-core.org/admin/structure/node/1/

Приведённая выше форма генерируется на этой страничке http://do.smart-core.org/admin/structure/folder/1/

Нужно написать яваскриптик, который не будет зависеть от саймой формы т.е. в твиге достаточно будет написать form(form) и запустить этот явакриптик с указанием имени формы, а он уже преобразует вёрстку на клиенте, чтобы было с табиками.

Логика должна быть примерно такая: если пристутствует блок с id =smart_core_folder_meta_control_group, тогда под <fielset> добавляется код:

<div class="tabbable">
<ul class="nav nav-tabs">
	<li class="active">
		 <a href="#base-setting" data-toggle="tab">Основные настройки</a>
	 </li>
	 <li><a href="#meta-setting" data-toggle="tab">Мета теги</a></li>
 </ul>
 
<div class="tab-content">
<div class="tab-pane active" id="base-setting">

далее отдельно запаковывается форма мета тэгов:

<div class="tab-pane" id="meta-setting">
    <div id="smart_core_folder_meta_description_control_group" class=" control-group">
        <label for="smart_core_folder_meta_description" class=" control-label optional">
            Описание </label>
        <div class=" controls">
            <input type="text"
                   id="smart_core_folder_meta_description"
                   name="smart_core_folder[meta][description]"
                   class=" input-block-level not-removable"
                   value="Интернет магазин полезных продуктов"/>
        </div>
    </div>
    <div id="smart_core_folder_meta_keywords_control_group" class=" control-group">
        <label for="smart_core_folder_meta_keywords" class=" control-label optional">
            Ключевые слова </label>
        <div class=" controls">
            <input type="text"
                   id="smart_core_folder_meta_keywords"
                   name="smart_core_folder[meta][keywords]"
                   class=" input-block-level not-removable"
                   value="Натуральные продукты, Микориза"/>
        </div>
    </div>
</div>

а оставшиеся поля формы запаковываются в <div class=”tab-pane active” id=”base-setting”>

Сейчас формы категорий юниката выглядят так:

https://github.com/Smart-Core/CMS-Sandbox/blob/master/src/SmartCore/Module/Catalog/Resources/views/Admin/category_edit.html.twig#L30

{{ form_start(form, {'attr':{'class':'form-horizontal'}}) }}
        {{ form_errors(form) }}
        <fieldset>
            <div class="tabbable">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#base-settings" data-toggle="tab">{{ 'Base settings'|trans }}</a></li>
                    {% if form.properties %}<li><a href="#cat-properties" data-toggle="tab">{{ 'Properties'|trans }}</a></li>{% endif %}
                    <li><a href="#meta-tags" data-toggle="tab">{{ 'Meta tags'|trans }}</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="meta-tags">
                        {{ form_widget(form.meta) }}
                    </div>
                    {% if form.properties %}
                    <div class="tab-pane" id="cat-properties">
                        {{ form_widget(form.properties) }}
                    </div>
                    {% endif %}
                    <div class="tab-pane active" id="base-settings">
                        {{ form_widget(form) }}
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        {{ form_rest(form) }}
                    </div>
                </div>
            </div>
        </fieldset>
        {{ form_end(form) }}

Здесь из-за того, что кнопки заложены в саму форму они отрисовываются в функции form_widget(form), а когда доходит дело до form_restform, там уже нечему отрисовываться, по этому кнопки доступны только в одной вкладке.

Возможно полезный бандл http://bootstrap.braincrafted.com/playground/forms.html

Загрузка...

Available keyboard shortcuts

Список задач

Task Details

Task Editing