name : macros.html.twig {# Responsive Menu Jinja template file. NOT Safe to Copy Do Not Copy #} {% macro percentage_units(name, value) %} <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick is-unit' name='menu[{{ name }}]'> <option value='%' selected='selected'>%</option> <option value='px' disabled data-subtext='[PRO]'>px -</option> <option value='em' disabled data-subtext='[PRO]'>em -</option> <option value='rem' disabled data-subtext='[PRO]'>rem -</option> <option value='vw' disabled data-subtext='[PRO]'>vw -</option> <option value='vh' disabled data-subtext='[PRO]'>vh -</option> </select> {% endmacro %} {% macro pixel_units(name, value) %} <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' id='responsive-menu-{{ name|replace({'_': '-'}) }}'class='selectpicker show-tick is-unit' name='menu[{{ name }}]'> <option value='px' selected='selected'>px</option> <option value='%' disabled data-subtext='[PRO]'>% -</option> <option value='em' disabled data-subtext='[PRO]'>em -</option> <option value='rem' disabled data-subtext='[PRO]'>rem -</option> <option value='vw' disabled data-subtext='[PRO]'>vw -</option> <option value='vh' disabled data-subtext='[PRO]'>vh -</option> </select> {% endmacro %} {% macro pixel_units_auto(name, value) %} <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' id='responsive-menu-{{ name|replace({'_': '-'}) }}'class='selectpicker show-tick is-unit' name='menu[{{ name }}]'> <option value='auto' selected='selected'>auto</option> <option value='px' disabled data-subtext='[PRO]'>px</option> <option value='%' disabled data-subtext='[PRO]'>% -</option> <option value='em' disabled data-subtext='[PRO]'>em -</option> <option value='rem' disabled data-subtext='[PRO]'>rem -</option> <option value='vw' disabled data-subtext='[PRO]'>vw -</option> <option value='vh' disabled data-subtext='[PRO]'>vh -</option> </select> {% endmacro %} {% macro animation_select(name, value) %} <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'> <option value='slide'{% if value == 'slide' %} selected='selected'{% endif %}>Slide</option> <option value='push'{% if value == 'push' %} selected='selected'{% endif %}>Push</option> <option value='fade' disabled data-subtext='[PRO]'>Fade -</option> </select> {% endmacro %} {% macro select(name, value, choices, class='') %} <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick {{ class }}' name='menu[{{ name }}]'> {% for key, display in choices %} <option value='{{ key }}' {% if key == value %}selected='selected'{% endif %}> {{ display }} </option> {% endfor %} </select> {% endmacro %} {% macro selectize(name, value, class='') %} <input type="text" value="{{ value }}" id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectize {{ class }}' name='menu[{{ name }}]' /> {% endmacro %} {% macro font_icon(name, value, type) %} <input type='text' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' value='{{ value|escape }}' class='form-control font-icon-input {{ class }}'> <select class='selectpicker show-tick font-icon-select' name='menu[{{ name }}_type]'> <option value='font-awesome' selected='selected'>FontAwesome</option> <option value='glyphicon'>GlyphIcon</option> <option value='custom'>Custom</option> </select> {% endmacro %} {% macro button_animation_select(name, value) %} <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'> <option value='off'{% if value == 'off' %} selected='selected'{% endif %}>Off</option> <option value='boring'{% if value == 'boring' %} selected='selected'{% endif %}>Boring</option> <option value='3dx' disabled data-subtext='[PRO]'>3DX -</option> <option value='3dx-r' disabled data-subtext='[PRO]'>3DX Reverse -</option> <option value='3dy' disabled data-subtext='[PRO]'>3DY -</option> <option value='3dy-r' disabled data-subtext='[PRO]'>3DY Reverse -</option> <option value='arrow' disabled data-subtext='[PRO]'>Arrow -</option> <option value='arrow-r' disabled data-subtext='[PRO]'>Arrow Reverse -</option> <option value='arrowalt' disabled data-subtext='[PRO]'>Arrow Alt -</option> <option value='arrowalt-r' disabled data-subtext='[PRO]'>Arrow Alt Reverse -</option> <option value='collapse' disabled data-subtext='[PRO]'>Collapse -</option> <option value='collapse-r' disabled data-subtext='[PRO]'>Collapse Reverse -</option> <option value='elastic' disabled data-subtext='[PRO]'>Elastic -</option> <option value='elastic-r' disabled data-subtext='[PRO]'>Elastic Reverse -</option> <option value='emphatic' disabled data-subtext='[PRO]'>Emphatic -</option> <option value='emphatic-r' disabled data-subtext='[PRO]'>Emphatic Reverse -</option> <option value='minus' disabled data-subtext='[PRO]'>Minus -</option> <option value='slider' disabled data-subtext='[PRO]'>Slider -</option> <option value='slider-r' disabled data-subtext='[PRO]'>Slider Reverse -</option> <option value='spin' disabled data-subtext='[PRO]'>Spin -</option> <option value='spin-r' disabled data-subtext='[PRO]'>Spin Reverse -</option> <option value='spring' disabled data-subtext='[PRO]'>Spring -</option> <option value='spring-r' disabled data-subtext='[PRO]'>Spring Reverse -</option> <option value='stand' disabled data-subtext='[PRO]'>Stand -</option> <option value='stand-r' disabled data-subtext='[PRO]'>Stand Reverse -</option> <option value='squeeze' disabled data-subtext='[PRO]'>Squeeze -</option> <option value='vortex' disabled data-subtext='[PRO]'>Vortex -</option> <option value='vortex-r' disabled data-subtext='[PRO]'>Vortex Reverse -</option> </select> {% endmacro %} {% macro input(name, value, class='') %} <input type='text' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' value='{{ value|escape }}' class='form-control {{ class }}'> {% endmacro %} {% macro colour(name, value) %} <input type='text' id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='form-control mini-colours' name='menu[{{ name }}]' value='{{ value }}' /> {% endmacro %} {% macro label(for, title) %} <label for='responsive-menu-{{ for|replace({'_': '-'}) }}' class='control-label'> {{ title }} </label> {% endmacro %} {% macro checkbox(name, value) %} <input {% if value == 'on' %}checked='checked' {% endif %} id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' data-toggle='toggle' data-onstyle='success' data-offstyle='danger' type='checkbox' value='on' /> {% endmacro %} {% macro image(name, value) %} <div class='input-group'> <input type='text' class='form-control' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' value='{{ value }}' /> <span class='input-group-btn'> <button type='button' class='image_button btn btn-primary btn-rm' for='responsive-menu-{{ name|replace({'_': '-'}) }}'>Upload Image</button> </span> </div> {% endmacro %} {% macro textarea(name, value) %} <textarea class='form-control' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]'>{{ value }}</textarea> {% endmacro %} {% macro row(name, title, type, options, errors, class='', pro='', select_type='', unit_type='', sub_title='', unit='', choices=[], sub_sub_title='') %} {% import _self as macros %} <tr class="{% if errors[name] %} danger {% endif %} {% if pro == 'pro' %} pro-row {% endif %}" > <td class='col-left col-md-3'> {{ macros.label(name, title) }} {% if sub_title %} <div class='sub-text'>{{ sub_title|raw }}</div> {% endif %} {% if sub_sub_title %} <div class='sub_sub_title'><br />{{ sub_sub_title|raw }}</div> {% endif %} </td> <td class='col-right {% if pro %} {{ pro }}{% endif %}'> {% if pro == 'pro' %} <div class="responsive-menu-pro-overlay"> <a href="https://responsive.menu/pricing?utm_source=free-plugin&utm_medium=option&utm_campaign={{ name }}" target="_blank">Click to upgrade now to use</a> </div> {% endif %} {% if type == 'checkbox' %} {{ macros.checkbox(name, options[name]) }} {% elseif type == 'colour' %} {{ macros.colour(name, options[name]) }} {% elseif type == 'input' %} {{ macros.input(name, options[name], class) }} {% if class == 'has-unit' %} {% if unit_type == 'pixel' %} {{ macros.pixel_units(name ~ '_unit', options[name ~ '_unit']) }} {% elseif unit_type == 'pixel_auto' %} {{ macros.pixel_units_auto(name ~ '_unit', options[name ~ '_unit']) }} {% elseif unit_type == 'percentage' %} {{ macros.percentage_units(name ~ '_unit', options[name ~ '_unit']) }} {% endif %} {% endif %} {% elseif type == 'textarea' %} {{ macros.textarea(name, options[name], class) }} {% elseif type == 'selectize' %} {{ macros.selectize(name, options[name], class) }} {% elseif type == 'select' %} {% if select_type == 'side' %} {% set choices = { 'top': 'Top', 'left': 'Left', 'right': 'Right', 'bottom': 'Bottom' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'left_right' %} {% set choices = { 'left': 'Left', 'right': 'Right' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'left_right_with_none' %} {% set choices = { '': 'None', 'left': 'Left', 'right': 'Right' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'left_right_centre_with_none' %} {% set choices = { '': 'None', 'left': 'Left', 'right': 'Right', 'centre': 'Centre' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'position' %} <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'> <option data-subtext='Will stay in position as you scroll down the page.' value='fixed' {% if options[name] == 'fixed' %}selected='selected'{% endif %}>Fixed</option> <option data-subtext='Will disappear as you scroll down the page.' value='absolute' {% if options[name] == 'absolute' %}selected='selected'{% endif %}>Absolute</option> <option data-subtext='Will stay in a specific position on your page.' value='relative' {% if options[name] == 'relative' %}selected='selected'{% endif %} >Relative</option> </select> {% elseif select_type == 'animation' %} {{ macros.animation_select(name, options[name]) }} {% elseif select_type == 'depth' %} {% set choices = { '1': '1', '2': '2', '3': '3', '4': '4', '5': '5' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'alignment' %} {% set choices = { 'left': 'Left', 'right': 'Right', 'center': 'Centered', 'justify': 'Justified' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'link_locations' %} {% set choices = { '_blank': 'New Tab', '_self': 'Same Page', '_parent': 'Parent Page', '_top': 'Full Window Body' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'theme' %} {% set choices = { 'dark': 'Dark', 'light': 'Light' } %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'custom' %} {{ macros.select(name, options[name], choices) }} {% elseif select_type == 'button_animation' %} {{ macros.button_animation_select(name, options[name]) }} {% elseif select_type == 'menu_theme' %} {% set themes = get_available_themes() %} {% set choices = [] %} {% for theme, config in themes %} {% set choices = choices|merge({(theme): config.name ~ ' (' ~ theme ~ ')'}) %} {% endfor %} {{ macros.select(name, options[name], choices) }} {% endif %} {% elseif type == 'image' %} {{ macros.image(name, options[name]) }} {% elseif type == 'font-icon' %} {{ macros.font_icon(name, options[name], options[name ~ '_type']) }} {% endif %} {% if unit %} <span class='unit'>{{ unit }}</span> {% endif %} </td> </tr> {% endmacro %} {% macro header(title, section) %} <div class='panel-body'> {{ title }} <small>{{ section }}</small> </div> {% endmacro %}