ngcp-panel/share/templates/helpers/modal.tt

[% MACRO modal_header BLOCK -%]

<div id="mod_edit" class="modal hide ngcp-modal">
    <div class="modal-header">
        <button id="mod_close" type="button" class="close mod_close" title="close">×</button>
        <button id="mod_min" type="button" class="close" style="margin-right: 10px;display:none;" title="minimize">-</button>
        <button id="mod_max" type="button" class="close" style="margin-right: 10px;" title="maximize">+</button>
        <h3>[% m.create_flag == 1 ? c.loc('Create [_1]',m.name) : m.duplicate_flag == 1 ? c.loc('Duplicate [_1]',m.name) : c.loc('Edit [_1]',m.name) %]</h3>
    </div>

[% END -%]

[% MACRO modal_header_dynamic BLOCK -%]
[%-
    # Variables: m.header – Complete header
    #            m.id     – ID of the modal div, to access it via javascript
-%]

<div id="[% m.id %]" class="modal hide">
    <div class="modal-header">
        <button type="button" class="close mod_close fade" data-dismiss="modal" title="close">×</button>
        <h3>[% m.header %]</h3>
    </div>

[% END -%]

[% MACRO modal_footer BLOCK -%]
</div>
[% END -%]

[% MACRO modal_script BLOCK %]
<script>
    var modalFormScript = function (formitem,repeat) {
        $('#mod_edit').modal({keyboard: false, backdrop: 'static'});
        $('.mod_close').click(function(event) {
            console.log("redirecting to [% m.close_target ? m.close_target : c.uri_for() %]");
            window.location.href="[% m.close_target ? m.close_target : c.uri_for() %]";
        });

        // on clicking a button within the form, add a hidden field "submitid"
        // determining the name of the button being clicked
        $('#mod_edit form').on("click", "input[type=button]", function() {
            $(this).parents('form').find('#submitid').attr('value', $(this).attr('name'));
            $(this).parents('form').submit();
        });

    $('#mod_max').click(function maximizePopup() {
        const $btn = $(this);
        const $popup = $btn.parents('.modal:first');

        $popup.prop('style', 'max-width: none; top: 50px; margin: 0; left: 20px; right: 20px; width: auto;');
        $popup.find('.modal-body').css('max-height', 'calc(100vh - 250px)');
        $popup.find('textarea').css('width', 'calc(100% - 12px)');
        $popup.find('table.dataTable').css('width', '100%');

        $popup.find('#mod_min').show();
        $btn.hide();
    });

    $('#mod_min').click(function maximizePopup() {
        const $btn = $(this);
        const $popup = $btn.parents('.modal:first');

        $popup.prop('style', '');
        $popup.find('.modal-body').css('max-height', '');
        $popup.find('textarea, table.dataTable').css('width', '');

        $popup.find('#mod_max').show();
        $btn.hide();
    });

[% IF framed -%]
    setTimeout(function() { $('#mod_max:first').click(); }, 0);
[% END -%]

    };
    $(modalFormScript);
</script>
[% END -%]

[% # vim: set tabstop=4 syntax=html expandtab: -%]