JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css">
<div id="dialog" title="OMG">Double click the title bar</div>

CSS

.ui-dialog .ui-dialog-titlebar-maximize {
    height:19px;
    margin:-10px 0 0;
    padding:1px;
    position:absolute;
    right:1.3em;
    top:50%;
    width:18px;
}

.ui-dialog .ui-dialog-titlebar-maximize span {
    display:block;
    margin:5px
}

JavaScript

var dialog = $("#dialog");

// extending
var old_create = $.ui.dialog.prototype._create;

$.widget("ns.maximizedialog", $.ui.dialog, {
    
    // method already exists in $.ui.dialog.prototype,
    // and is therefore overwritten.  good thing we saved a
    // reference to it...
    _create: function(){
        
        // make sure the original create method fires, and in the
        // context of this new widget
        old_create.call( this );
        
        // assume this won't be maximized by default
        this._isMaximized = false;
        
        // find the title bar and apply the double click logic to it
        var titlebar = this.widget()
            .find(".ui-dialog-titlebar")
            .dblclick( $.proxy(this._toggleMaximized, this) );
        
        var icon = [];
        icon.push('<a class="ui-dialog-titlebar-maximize ui-corner-all" href="#">');
        icon.push('<span class="ui-icon ui-icon-plusthick">max</span>');
        icon.push('</a>');
        
        this.icon = $( icon.join('') )
            .bind("click", $.proxy(this._toggleMaximized, this))
            .insertBefore( titlebar.find(".ui-dialog-titlebar-close") )
            .hover(function(){
                $(this).toggleClass("ui-state-hover");
            });
    },
    
    // does not exist in the original prototype; will
    // be added
    _toggleMaximized: function(){
        
        // toggle and remember the new state
        this._isMaximized = !this._isMaximized;
        
        // if the new state is not maximized...
        if( !this._isMaximized ){
            
            // restore size
            this._size();
            
            // reset to starting position
            this._position();
            
            // otherwise, calculate and apply maximized dimensions
        } else {
            var win = $(window);
            
            this.widget()
                .css({ top:0, left: 0 })
                .width( win.width() )
               ...