Different sized modals for different button functions

Different sized modals for different button functions

bfarkasbfarkas Posts: 181Questions: 48Answers: 0

I'm using foundation theme, but I think this issue is universal, just different id's and classes effected.
Is it possible to have different sized modal windows leveraged for different actions? i.e. the New is full screen, the edit is 50% and other functions are smaller?

I've got the size set right now with css:

.reveal-modal.DTED {
            left: 1em;
            right: 1em;
            margin: 0 auto;
            width: auto;
            overflow: hidden;
        }

But the modal doesn't have an ID or a differentiator between functions, so I can't distinguish. I added an id to the div hardcoded, but when i do a javascript add class on click, it doesnt work because the div doesnt exist yet when you click the button. At a loss for the usual working methods here.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    There is a class you may be able to use - DTE_Action_Create and DTE_Action_Edit - this is on the lightbox itself. Would that work?

    Colin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Hmm. Going to see if I can break it into those two spots but I have a bunch of extends of edit that would fall into different sizes in a perfect world.

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Just tried and this doesn't work because the - DTE_Action_Create and DTE_Action_Edit - are within the modal container, the container is what I am trying to control the size of.

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    I'm thinking a workaround might be to modify this file:

    /*! Foundation integration for DataTables' Editor
     * ©2015 SpryMedia Ltd - datatables.net/license
     */
     
    (function( factory ){
        if ( typeof define === 'function' && define.amd ) {
            // AMD
            define( ['jquery', 'datatables.net-zf', 'datatables.net-editor'], function ( $ ) {
                return factory( $, window, document );
            } );
        }
        else if ( typeof exports === 'object' ) {
            // CommonJS
            module.exports = function (root, $) {
                if ( ! root ) {
                    root = window;
                }
     
                if ( ! $ || ! $.fn.dataTable ) {
                    $ = require('datatables.net-zf')(root, $).$;
                }
     
                if ( ! $.fn.dataTable.Editor ) {
                    require('datatables.net-editor')(root, $);
                }
     
                return factory( $, root, root.document );
            };
        }
        else {
            // Browser
            factory( jQuery, window, document );
        }
    }(function( $, window, document, undefined ) {
    'use strict';
    var DataTable = $.fn.dataTable;
     
     
    /*
     * Set the default display controller to be our foundation control
     */
    DataTable.Editor.defaults.display = "foundation";
     
     
    /*
     * Change the default classes from Editor to be classes for Foundation
     */
    $.extend( true, $.fn.dataTable.Editor.classes, {
        field: {
            wrapper:         "DTE_Field row",
            label:           "small-4 columns inline",
            input:           "small-8 columns",
            error:           "error",
            multiValue:      "panel radius multi-value",
            multiInfo:       "small",
            multiRestore:    "panel radius multi-restore",
            "msg-labelInfo": "label secondary",
            "msg-info":      "label secondary",
            "msg-message":   "label secondary",
            "msg-error":     "label alert"
        },
        form: {
            button:  "button small",
            buttonInternal:  "button small"
        }
    } );
     
     
    /*
     * Foundation display controller - this is effectively a proxy to the Foundation
     * modal control.
     */
    var self;
     
    DataTable.Editor.display.foundation = $.extend( true, {}, DataTable.Editor.models.displayController, {
        /*
         * API methods
         */
        "init": function ( dte ) {
            self._dom.content = $(
                '<div class="reveal reveal-modal DTED" id="modalFoundation" data-reveal></div>'
            );
            self._dom.close = $('<button class="close close-button">&times;</div>')
                .attr('title', dte.i18n.close);
     
            self._dom.close.click( function () {
                self._dte.close('icon');
            } );
     
            return self;
        },
     
        "open": function ( dte, append, callback ) {
            if ( self._shown ) {
                if ( callback ) {
                    callback();
                }
                return;
            }
     
            self._dte = dte;
            self._shown = true;
     
            var content = self._dom.content;
            content.children().detach();
            content.append( append );
            content.prepend( self._dom.close );
            console.log('appended', $(append).html());
     
            $(self._dom.content)
                .one('open.zf.reveal', function () {
                    if ( callback ) {
                        callback();
                    }
                })
                .one('closed.zf.reveal', function () {
                    self._shown = false;
                });
     
            if ( window.Foundation && window.Foundation.Reveal ) {
                // Foundation 6
                self._reveal = new window.Foundation.Reveal( self._dom.content, {
                    closeOnClick: false
                } );
     
                self._reveal.open();
            }
            else {
                // Foundation 5
                $(self._dom.content).foundation( 'reveal','open' );
            }
     
            $(document).on('click.dte-zf', 'div.reveal-modal-bg, div.reveal-overlay', function (e) {
                if ( $(e.target).closest(self._dom.content).length ) {
                    return;
                }
                self._dte.background();
            } );
        },
     
        "close": function ( dte, callback ) {
            if ( !self._shown ) {
                if ( callback ) {
                    callback();
                }
                return;
            }
     
            if ( self._reveal ) {
                self._reveal.close();
            }
            else {
                $(self._dom.content).foundation( 'reveal', 'close' );
            }
     
            $(document).off( 'click.dte-zf' );
     
            self._dte = dte;
            self._shown = false;
     
            if ( callback ) {
                callback();
            }
        },
     
        node: function ( dte ) {
            return self._dom.content[0];
        },
     
     
        /*
         * Private properties
         */
         "_shown": false,
        "_dte": null,
        "_dom": {}
    } );
     
    self = DataTable.Editor.display.foundation;
     
     
    return DataTable.Editor;
    }));
    

    So that this section is conditional to if it is an edit/create/delete function and then add a unique class name to the div in each case, but not sure how to make that conditional work?

    "init": function ( dte ) {
            self._dom.content = $(
                '<div class="reveal reveal-modal DTED" id="modalFoundation" data-reveal></div>'
            );
            self._dom.close = $('<button class="close close-button">&times;</div>')
                .attr('title', dte.i18n.close);
     
            self._dom.close.click( function () {
                self._dte.close('icon');
            } );
     
            return self;
        },
    
  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Answer ✓

    Hi,

    What I'd suggest doing here is making use of the open event:

    editor.on('open', function (e, mode, action) {
      var container = $(editor.displayNode());
    
      container.removeClass('full half');
    
      if (action === 'create') {
        container.addClass('full');
      }
      else {
        container.addClass('half');
      }
    });
    

    I've just used example class names - you need to use Foundation's classes of course.

    Allan

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Thanks, will give it a try!

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    This worked great for my situation. It's a little tricky if you are extending functions a lot like I am. It worked out though as I was able to group appropriately, and the couple of overlaps I was using multiple editors, so could define differently.
    Thanks!

This discussion has been closed.