| 1 |
{# |
| 2 |
Responsive Menu Jinja template file. |
| 3 |
Safe to Copy |
| 4 |
#} |
| 5 |
|
| 6 |
{% import 'admin/macros.html.twig' as macros %} |
| 7 |
|
| 8 |
<div id="responsive-menu-desktop-menu-container" class="pro-container"> |
| 9 |
|
| 10 |
<div class="responsive-menu-pro-overlay"> |
| 11 |
<a href="https://responsive.menu?utm_source=free-plugin&utm_medium=option&utm_campaign=free-plugin-option-upgrade#pricing" |
| 12 |
target="_blank">Click to upgrade now to use</a> |
| 13 |
</div> |
| 14 |
|
| 15 |
{% set desktop_menu_options = options.desktop_menu_options|json_decode %} |
| 16 |
{% set menu_items = menu_items(options) %} |
| 17 |
|
| 18 |
<div class="col-md-3 responsive-menu-desktop-menu-links-container"> |
| 19 |
{% for item in menu_items %} |
| 20 |
|
| 21 |
{% set continue = false %} |
| 22 |
|
| 23 |
{% if item.menu_item_parent == '0' %} |
| 24 |
{% set parent_id = item.ID %} |
| 25 |
{% set class = 'responsive-menu-desktop-menu-top-level-label' %} |
| 26 |
{% set continue = true %} |
| 27 |
{% elseif parent_id == item.menu_item_parent %} |
| 28 |
{% set next_level_id = item.ID %} |
| 29 |
{% set class = 'responsive-menu-desktop-menu-sub-menu-label' %} |
| 30 |
{% set continue = true %} |
| 31 |
{% endif %} |
| 32 |
|
| 33 |
{# Stop us going too many levels deep #} |
| 34 |
{% if continue %} |
| 35 |
<div |
| 36 |
data-id="{{ item.ID }}" |
| 37 |
class="{% if loop.first %}responsive-menu-desktop-menu-label-active {% endif %}responsive-menu-desktop-menu-label {{ class }}"> |
| 38 |
{{ item.title }} |
| 39 |
<div class="pull-right"> |
| 40 |
<span class="label label-info"> |
| 41 |
{{ desktop_menu_options[item.ID]['width']|default('auto') }} |
| 42 |
</span> |
| 43 |
</div> |
| 44 |
</div> |
| 45 |
{% endif %} |
| 46 |
|
| 47 |
{% endfor %} |
| 48 |
</div> |
| 49 |
|
| 50 |
<div class="col-md-9 responsive-menu-desktop-menu-options-wrapper" style="padding-right: 90px;"> |
| 51 |
{% for item in menu_items %} |
| 52 |
{% set has_title = false %} |
| 53 |
<div class="responsive-menu-desktop-menu-options-container" id="responsive-menu-desktop-menu-option-{{ item.ID }}"> |
| 54 |
|
| 55 |
<div class="control-label pull-right responsive-menu-desktop-menu-option-badges"> |
| 56 |
<span class="label label-info">#{{ item.ID }}</span> |
| 57 |
<span class="label label-info">{{ item.title }}</span> |
| 58 |
</div> |
| 59 |
|
| 60 |
{% if item.menu_item_parent == 0 %} |
| 61 |
<div class="responsive-menu-desktop-menu-option-container"> |
| 62 |
<label class="control-label">Type</label> |
| 63 |
<div class="sub-text"> |
| 64 |
Set the type of menu for this sub menu section. |
| 65 |
</div> |
| 66 |
<select class="selectpicker show-tick desktop-menu-type-switcher" name="menu[desktop_menu_options][{{ item.ID }}][type]"> |
| 67 |
{% set types = { |
| 68 |
'standard': 'Standard', |
| 69 |
'mega': 'Mega Menu' |
| 70 |
} %} |
| 71 |
{% for value, display in types %} |
| 72 |
<option |
| 73 |
value="{{ value }}" |
| 74 |
{% if desktop_menu_options[item.ID]['type'] == value %} |
| 75 |
selected="selected" |
| 76 |
{% endif %} |
| 77 |
>{{ display }} |
| 78 |
</option> |
| 79 |
{% endfor %} |
| 80 |
</select> |
| 81 |
</div> |
| 82 |
{% endif %} |
| 83 |
|
| 84 |
<div class="responsive-menu-desktop-menu-option-container"> |
| 85 |
<label class="control-label">Item Width</label> |
| 86 |
<div class="sub-text"> |
| 87 |
Our Desktop Menu uses a 12 item width grid. You can specify the width of each item here as a fraction of 12, or keep them auto sized. |
| 88 |
</div> |
| 89 |
<select class="selectpicker show-tick" name="menu[desktop_menu_options][{{ item.ID }}][width]"> |
| 90 |
<option |
| 91 |
value="auto" |
| 92 |
{% if desktop_menu_options[item.ID]['width'] == 'auto' %} |
| 93 |
selected="selected" |
| 94 |
{% endif %} |
| 95 |
>Auto |
| 96 |
</option> |
| 97 |
{% for i in range(1, 12) %} |
| 98 |
<option |
| 99 |
value="{{ i }}" |
| 100 |
{% if desktop_menu_options[item.ID]['width'] == i %} |
| 101 |
selected="selected" |
| 102 |
{% endif %} |
| 103 |
>{{ i }} |
| 104 |
</option> |
| 105 |
{% endfor %} |
| 106 |
</select> |
| 107 |
</div> |
| 108 |
|
| 109 |
{% if item.menu_item_parent == 0 %} |
| 110 |
<div class="responsive-menu-desktop-menu-option-container responsive-menu-desktop-menu-mega-menu-option{% if desktop_menu_options[item.ID]['type'] != 'mega' %} hidden{% endif %}"> |
| 111 |
<div> |
| 112 |
<label class="control-label">Mega Menu Background Colour</label> |
| 113 |
<div class="sub-text"> |
| 114 |
Sets the background colour for the mega menu container section. |
| 115 |
</div> |
| 116 |
<input type='text' class='form-control mini-colours' name='menu[desktop_menu_options][{{ item.ID }}][parent_background_colour]' value='{{ desktop_menu_options[item.ID]['parent_background_colour'] }}' /> |
| 117 |
</div> |
| 118 |
</div> |
| 119 |
|
| 120 |
<div class="responsive-menu-desktop-menu-option-container responsive-menu-desktop-menu-mega-menu-option{% if desktop_menu_options[item.ID]['type'] != 'mega' %} hidden{% endif %}"> |
| 121 |
<div> |
| 122 |
<label class="control-label">Mega Menu Background Image</label> |
| 123 |
<div class="sub-text"> |
| 124 |
Sets the background image for the mega menu container section. |
| 125 |
</div> |
| 126 |
<div class='input-group'> |
| 127 |
<input type='text' class='form-control' |
| 128 |
name="menu[desktop_menu_options][{{ item.ID }}][parent_background_image]" |
| 129 |
value="{{ desktop_menu_options[item.ID]['parent_background_image'] }}" |
| 130 |
id='responsive-menu-desktop-menu-mega-menu-background-image-{{ item.ID }}' /> |
| 131 |
<span class='input-group-btn'> |
| 132 |
<button type='button' class='image_button btn btn-primary btn-rm' |
| 133 |
for='responsive-menu-desktop-menu-mega-menu-background-image-{{ item.ID }}'>Upload Image</button> |
| 134 |
</span> |
| 135 |
</div> |
| 136 |
</div> |
| 137 |
</div> |
| 138 |
{% endif %} |
| 139 |
|
| 140 |
{% if item.menu_item_parent != '0' %} |
| 141 |
|
| 142 |
<div class="responsive-menu-desktop-menu-option-container"> |
| 143 |
<label class="control-label">Widgets</label> |
| 144 |
<div class="sub-text"> |
| 145 |
Drag the widgets and re-arrange them below. |
| 146 |
</div> |
| 147 |
<div class="row responsive-menu-desktop-menu-widgets-container"> |
| 148 |
<div class="col-md-9"> |
| 149 |
<div class="responsive-menu-desktop-menu-option-container-grid" id="responsive-menu-desktop-menu-option-container-grid-{{ item.ID }}">{% if desktop_menu_options[item.ID]['widgets'] %} |
| 150 |
{% set count = 0 %} |
| 151 |
{% for widget in desktop_menu_options[item.ID]['widgets'] %} |
| 152 |
{% for type, value in widget %} |
| 153 |
{% set count = count + 1 %} |
| 154 |
{% if type == 'image' %} |
| 155 |
<div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-image-widget responsive-menu-desktop-menu-widget-{{ item.ID }}"> |
| 156 |
<div class="responsive-menu-desktop-menu-widget-header"> |
| 157 |
Image <span class="glyphicon glyphicon-remove"></span> |
| 158 |
</div> |
| 159 |
<div class="responsive-menu-desktop-menu-widget-body"> |
| 160 |
|
| 161 |
<div class='input-group'> |
| 162 |
<input type='text' class='form-control' |
| 163 |
name="menu[desktop_menu_options][{{ item.ID }}][widgets][][image][url]" |
| 164 |
value="{{ value['url'] }}" |
| 165 |
id='responsive-menu-desktop-menu-{{ item.ID }}-{{ count }}' /> |
| 166 |
<span class='input-group-btn'> |
| 167 |
<button type='button' class='image_button btn btn-primary btn-rm' |
| 168 |
for='responsive-menu-desktop-menu-{{ item.ID }}-{{ count }}'>Upload Image</button> |
| 169 |
</span> |
| 170 |
</div> |
| 171 |
|
| 172 |
</div> |
| 173 |
</div> |
| 174 |
{% elseif type == 'text' %} |
| 175 |
<div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}"> |
| 176 |
<div class="responsive-menu-desktop-menu-widget-header"> |
| 177 |
Text <span class="glyphicon glyphicon-remove"></span> |
| 178 |
</div> |
| 179 |
<div class="responsive-menu-desktop-menu-widget-body"> |
| 180 |
<textarea type="text" name="menu[desktop_menu_options][{{ item.ID }}][widgets][][text][text]">{{ value['text'] }}</textarea> |
| 181 |
</div> |
| 182 |
</div> |
| 183 |
{% elseif type == 'title' %} |
| 184 |
{% set has_title = true %} |
| 185 |
<div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}"> |
| 186 |
<div class="responsive-menu-desktop-menu-widget-header"> |
| 187 |
Title {{ item.title }} |
| 188 |
<input type='hidden' class='form-control' |
| 189 |
name="menu[desktop_menu_options][{{ item.ID }}][widgets][][title][enabled]" |
| 190 |
value="true" /> |
| 191 |
</div> |
| 192 |
</div> |
| 193 |
{% endif %} |
| 194 |
{% endfor %} |
| 195 |
|
| 196 |
{% endfor %} |
| 197 |
|
| 198 |
{% endif %} |
| 199 |
{% if not has_title %} |
| 200 |
<div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}"> |
| 201 |
Title {{ item.title }} |
| 202 |
<div class="responsive-menu-desktop-menu-widget-header"> |
| 203 |
<input type='hidden' class='form-control' |
| 204 |
name="menu[desktop_menu_options][{{ item.ID }}][widgets][][title][enabled]" |
| 205 |
value="true" /> |
| 206 |
</div> |
| 207 |
</div> |
| 208 |
{% endif %} |
| 209 |
</div> |
| 210 |
</div> |
| 211 |
<div class="col-md-3"> |
| 212 |
<div class="responsive-menu-desktop-menu-widget-container" id="responsive-menu-desktop-menu-widget-{{ item.ID }}"> |
| 213 |
<div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-image-widget responsive-menu-desktop-menu-widget-{{ item.ID }}"> |
| 214 |
<div class="responsive-menu-desktop-menu-widget-header"> |
| 215 |
Image <span class="glyphicon glyphicon-remove"></span> |
| 216 |
</div> |
| 217 |
<div class="responsive-menu-desktop-menu-widget-body"> |
| 218 |
|
| 219 |
<div class='input-group'> |
| 220 |
<input type='text' class='form-control' |
| 221 |
data-name="menu[desktop_menu_options][{{ item.ID }}][widgets][][image][url]" |
| 222 |
data-id='responsive-menu-desktop-menu-{{ item.ID }}' /> |
| 223 |
<span class='input-group-btn'> |
| 224 |
<button type='button' class='image_button btn btn-primary btn-rm' for='responsive-menu-desktop-menu-{{ item.ID }}'>Upload Image</button> |
| 225 |
</span> |
| 226 |
</div> |
| 227 |
|
| 228 |
</div> |
| 229 |
</div> |
| 230 |
<div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}"> |
| 231 |
<div class="responsive-menu-desktop-menu-widget-header"> |
| 232 |
Text <span class="glyphicon glyphicon-remove"></span> |
| 233 |
</div> |
| 234 |
<div class="responsive-menu-desktop-menu-widget-body"> |
| 235 |
<textarea type="text" data-name="menu[desktop_menu_options][{{ item.ID }}][widgets][][text][text]"></textarea> |
| 236 |
</div> |
| 237 |
</div> |
| 238 |
</div> |
| 239 |
</div> |
| 240 |
</div> |
| 241 |
</div> |
| 242 |
<script> |
| 243 |
jQuery(function($) { |
| 244 |
$(".col-md-3 .responsive-menu-desktop-menu-widget-{{ item.ID }}").draggable({ |
| 245 |
connectToSortable: "#responsive-menu-desktop-menu-option-container-grid-{{ item.ID }}", |
| 246 |
helper: "clone", |
| 247 |
revert: "invalid", |
| 248 |
start: function(event, ui) { |
| 249 |
var input = ui.helper.find('input, textarea'); |
| 250 |
var image_button = ui.helper.find('button.image_button'); |
| 251 |
var current_total_ids = $('input[id^="' + input.data('id') + '"]').length; |
| 252 |
var next_id = current_total_ids + 1; |
| 253 |
|
| 254 |
input.attr('name', input.data('name')); |
| 255 |
|
| 256 |
if(input.data('id')) { |
| 257 |
input.attr('id', input.data('id') + '-' + next_id); |
| 258 |
} |
| 259 |
|
| 260 |
if(image_button) { |
| 261 |
image_button.attr('for', input.data('id') + '-' + next_id); |
| 262 |
} |
| 263 |
|
| 264 |
input.data('name', ''); |
| 265 |
input.data('id', ''); |
| 266 |
} |
| 267 |
}); |
| 268 |
|
| 269 |
$('#responsive-menu-desktop-menu-option-container-grid-{{ item.ID }}').sortable({ |
| 270 |
revert: true |
| 271 |
}); |
| 272 |
}); |
| 273 |
</script> |
| 274 |
{% endif %} |
| 275 |
</div> |
| 276 |
{% endfor %} |
| 277 |
</div> |
| 278 |
<div class="clearfix"></div> |
| 279 |
</div> |
| 280 |
|
