Different sized modals for different button functions

bfarkas

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.

colin

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

bfarkas

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.

bfarkas

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.

bfarkas

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;
    },

allan

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

bfarkas

Thanks, will give it a try!

bfarkas

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!