Edit File by line

/**

[0] Fix | Delete

* v1.0.4 - 05-04-2021 20:10

[1] Fix | Delete

[2] Fix | Delete

* JQuery UI Dialog Extended

[3] Fix | Delete

[4] Fix | Delete

[5] Fix | Delete

[6] Fix | Delete

* Dual licensed under the MIT or GPL Version 2 licenses.

[7] Fix | Delete

[8] Fix | Delete

* http://github.com/fnagel/jquery-ui-extensions

[9] Fix | Delete

[10] Fix | Delete

* Depends:

[11] Fix | Delete

* jquery.ui.core.js

[12] Fix | Delete

* jquery.ui.widget.js

[13] Fix | Delete

* jquery.ui.dialog.js

[14] Fix | Delete

[15] Fix | Delete

(function( $ ) {

[16] Fix | Delete

[17] Fix | Delete

[18] Fix | Delete

* Option width and height normally set the overall dialog dimensions.

[19] Fix | Delete

* This extensions make these options the dimensions of the content pane if

[20] Fix | Delete

* option useContentSize is enabled. This way it's possible to set the real

[21] Fix | Delete

* content dimensions.

[22] Fix | Delete

[23] Fix | Delete

* Please note you won't get the original size but the calculated overall size

[24] Fix | Delete

* when using the width and height option getter.

[25] Fix | Delete

[26] Fix | Delete

$.widget("ui.dialog", $.ui.dialog, {

[27] Fix | Delete

options: {

[28] Fix | Delete

height: 200, // auto is not allowed when using animation

[29] Fix | Delete

[30] Fix | Delete

closeModalOnClick: true,

[31] Fix | Delete

[32] Fix | Delete

// viewport settings

[33] Fix | Delete

forceFullscreen: false,

[34] Fix | Delete

resizeOnWindowResize: false,

[35] Fix | Delete

scrollWithViewport: false,

[36] Fix | Delete

resizeAccordingToViewport: true,

[37] Fix | Delete

resizeToBestPossibleSize: false,

[38] Fix | Delete

[39] Fix | Delete

// width and height set the content size, not overall size

[40] Fix | Delete

useContentSize: false,

[41] Fix | Delete

[42] Fix | Delete

// animated options

[43] Fix | Delete

useAnimation: true,

[44] Fix | Delete

animateOptions: {

[45] Fix | Delete

duration: 500,

[46] Fix | Delete

queue: false

[47] Fix | Delete

[48] Fix | Delete

[49] Fix | Delete

// callbacks

[50] Fix | Delete

resized: null

[51] Fix | Delete

[52] Fix | Delete

[53] Fix | Delete

// Changes content and resizes dialog

[54] Fix | Delete

change: function(content, width, height, animate) {

[55] Fix | Delete

if (typeof animate !== "boolean") {

[56] Fix | Delete

animate = this.options.useAnimation;

[57] Fix | Delete

}

[58] Fix | Delete

[59] Fix | Delete

if (animate) {

[60] Fix | Delete

this.setAriaLive(true);

[61] Fix | Delete

this.element.one(this.widgetEventPrefix + "resized", this, function(event) {

[62] Fix | Delete

event.data.element.html(content);

[63] Fix | Delete

event.data.setAriaLive(false);

[64] Fix | Delete

event.data.focusTabbable();

[65] Fix | Delete

});

[66] Fix | Delete

} else {

[67] Fix | Delete

this.element.html(content);

[68] Fix | Delete

}

[69] Fix | Delete

[70] Fix | Delete

this.changeSize(width, height);

[71] Fix | Delete

[72] Fix | Delete

[73] Fix | Delete

// Changes size

[74] Fix | Delete

changeSize: function(width, height) {

[75] Fix | Delete

this._setOptions({

[76] Fix | Delete

width: width,

[77] Fix | Delete

height: height

[78] Fix | Delete

});

[79] Fix | Delete

[80] Fix | Delete

[81] Fix | Delete

_setOption: function(key, value) {

[82] Fix | Delete

if (key === "width") {

[83] Fix | Delete

this._oldSize.width = value;

[84] Fix | Delete

}

[85] Fix | Delete

if (key === "height") {

[86] Fix | Delete

this._oldSize.height = value;

[87] Fix | Delete

}

[88] Fix | Delete

[89] Fix | Delete

// we need to adjust the size as we need to set the overall dialog size

[90] Fix | Delete

if (this.options.useAnimation && this.options.useContentSize && this._isVisible) {

[91] Fix | Delete

if (key === "width") {

[92] Fix | Delete

value = value + ( this.uiDialog.width() - this.element.width() );

[93] Fix | Delete

}

[94] Fix | Delete

if (key === "height") {

[95] Fix | Delete

value = value + ( this.uiDialog.outerHeight() - this.element.height() );

[96] Fix | Delete

}

[97] Fix | Delete

}

[98] Fix | Delete

[99] Fix | Delete

this._super(key, value);

[100] Fix | Delete

[101] Fix | Delete

[102] Fix | Delete

// calculate actual displayed size, data contains already the overall dimensions

[103] Fix | Delete

_getSize: function(data) {

[104] Fix | Delete

var options = this.options,

[105] Fix | Delete

feedback = $.position.getWithinInfo(options.position.of),

[106] Fix | Delete

portrait = ( feedback.height >= feedback.width ) ? true : false,

[107] Fix | Delete

viewport = {

[108] Fix | Delete

width: feedback.width - ( this.uiDialog.outerWidth() - this.uiDialog.width() ),

[109] Fix | Delete

height: feedback.height

[110] Fix | Delete

};

[111] Fix | Delete

[112] Fix | Delete

if (options.forceFullscreen) {

[113] Fix | Delete

return viewport;

[114] Fix | Delete

}

[115] Fix | Delete

[116] Fix | Delete

if (options.resizeToBestPossibleSize) {

[117] Fix | Delete

if (portrait) {

[118] Fix | Delete

data = this._calcSize(data, viewport.width, "width", "height");

[119] Fix | Delete

} else {

[120] Fix | Delete

data = this._calcSize(data, viewport.height, "height", "width");

[121] Fix | Delete

}

[122] Fix | Delete

}

[123] Fix | Delete

[124] Fix | Delete

if (options.resizeAccordingToViewport || options.resizeToBestPossibleSize) {

[125] Fix | Delete

if (viewport.width < data.width) {

[126] Fix | Delete

data = this._calcSize(data, viewport.width, "width", "height");

[127] Fix | Delete

}

[128] Fix | Delete

if (viewport.height < data.height) {

[129] Fix | Delete

data = this._calcSize(data, viewport.height, "height", "width");

[130] Fix | Delete

}

[131] Fix | Delete

}

[132] Fix | Delete

[133] Fix | Delete

return data;

[134] Fix | Delete

[135] Fix | Delete

[136] Fix | Delete

_calcSize: function( data, value, sortBy, toSort ) {

[137] Fix | Delete

var newData = {};

[138] Fix | Delete

[139] Fix | Delete

newData[toSort] = Math.max(0, (data[ toSort ] / data[ sortBy ]) * value);

[140] Fix | Delete

newData[sortBy] = value;

[141] Fix | Delete

[142] Fix | Delete

return newData;

[143] Fix | Delete

[144] Fix | Delete

[145] Fix | Delete

_size: function() {

[146] Fix | Delete

// overwrite options with recalculated dimensions

[147] Fix | Delete

$.extend(this.options, this._getSize(this.options));

[148] Fix | Delete

[149] Fix | Delete

if (this._isVisible && this.options.useAnimation) {

[150] Fix | Delete

this._animateSize();

[151] Fix | Delete

return;

[152] Fix | Delete

}

[153] Fix | Delete

[154] Fix | Delete

if (this.options.useContentSize) {

[155] Fix | Delete

this._contentSize();

[156] Fix | Delete

return;

[157] Fix | Delete

}

[158] Fix | Delete

[159] Fix | Delete

this._super();

[160] Fix | Delete

[161] Fix | Delete

[162] Fix | Delete

[163] Fix | Delete

* Sets the size of the dialog

[164] Fix | Delete

[165] Fix | Delete

* Options width and height define content size, not overall size

[166] Fix | Delete

[167] Fix | Delete

_contentSize: function() {

[168] Fix | Delete

// If the user has resized the dialog, the .ui-dialog and .ui-dialog-content

[169] Fix | Delete

// divs will both have width and height set, so we need to reset them

[170] Fix | Delete

var nonContentHeight, nonContentWidth, actualSize,

[171] Fix | Delete

options = this.options;

[172] Fix | Delete

[173] Fix | Delete

// Reset content sizing

[174] Fix | Delete

nonContentWidth = this.element.show().css({

[175] Fix | Delete

width: options.width,

[176] Fix | Delete

minHeight: 0,

[177] Fix | Delete

maxHeight: "none",

[178] Fix | Delete

height: 0

[179] Fix | Delete

}).outerWidth() - options.width;

[180] Fix | Delete

this.element.css("width", "auto");

[181] Fix | Delete

[182] Fix | Delete

if (options.minWidth > options.width + nonContentWidth) {

[183] Fix | Delete

options.width = options.minWidth;

[184] Fix | Delete

}

[185] Fix | Delete

[186] Fix | Delete

// reset wrapper sizing

[187] Fix | Delete

// determine the height of all the non-content elements

[188] Fix | Delete

nonContentHeight = this.uiDialog.css({

[189] Fix | Delete

height: "auto",

[190] Fix | Delete

width: options.width + nonContentWidth

[191] Fix | Delete

})

[192] Fix | Delete

.outerHeight();

[193] Fix | Delete

[194] Fix | Delete

actualSize = this._getSize({

[195] Fix | Delete

width: options.width + nonContentWidth,

[196] Fix | Delete

height: options.height + nonContentHeight

[197] Fix | Delete

});

[198] Fix | Delete

[199] Fix | Delete

this.uiDialog.css("width", actualSize.width);

[200] Fix | Delete

this.element.height(Math.max(0, actualSize.height - nonContentHeight));

[201] Fix | Delete

[202] Fix | Delete

if (this.uiDialog.is(":data(ui-resizable)") ) {

[203] Fix | Delete

this.uiDialog.resizable("option", "minHeight", this._minHeight());

[204] Fix | Delete

}

[205] Fix | Delete

[206] Fix | Delete

// save calculated overall size

[207] Fix | Delete

$.extend(options, actualSize);

[208] Fix | Delete

[209] Fix | Delete

[210] Fix | Delete

// Processes the animated positioning (position using callback), works with any width and height options

[211] Fix | Delete

_animateUsing: function( position, data ) {

[212] Fix | Delete

var that = this;

[213] Fix | Delete

// calculate new position based on the viewport

[214] Fix | Delete

position.left = ( data.target.left + ( data.target.width - this.options.width - ( this.uiDialog.outerWidth() - this.uiDialog.width() ) ) / 2 );

[215] Fix | Delete

position.top = ( data.target.top + ( data.target.height - this.options.height ) / 2 );

[216] Fix | Delete

if (position.top < 0) {

[217] Fix | Delete

position.top = 0;

[218] Fix | Delete

}

[219] Fix | Delete

[220] Fix | Delete

this.uiDialog.animate(position, $.extend({}, this.options.animateOptions, {

[221] Fix | Delete

complete: function() {

[222] Fix | Delete

that._trigger("resized");

[223] Fix | Delete

}

[224] Fix | Delete

}));

[225] Fix | Delete

[226] Fix | Delete

[227] Fix | Delete

// animated the size, uses width and height options like default dialog widget (overall size)

[228] Fix | Delete

_animateSize: function() {

[229] Fix | Delete

var options = this.options;

[230] Fix | Delete

[231] Fix | Delete

this.uiDialog.animate({

[232] Fix | Delete

width: options.width

[233] Fix | Delete

}, options.animateOptions);

[234] Fix | Delete

[235] Fix | Delete

this.element.animate({

[236] Fix | Delete

// options.height is overall size, we need content size

[237] Fix | Delete

height: options.height - ( this.uiDialog.outerHeight() - this.element.height() )

[238] Fix | Delete

}, options.animateOptions);

[239] Fix | Delete

[240] Fix | Delete

[241] Fix | Delete

// position overwrite for animated positioning

[242] Fix | Delete

_position: function() {

[243] Fix | Delete

var that = this;

[244] Fix | Delete

this._positionOptions = this.options.position;

[245] Fix | Delete

// change position.using mechanism

[246] Fix | Delete

if (this.options.useAnimation && this._isVisible) {

[247] Fix | Delete

this.options.position.using = function(position, feedback) {

[248] Fix | Delete

that._animateUsing(position, feedback);

[249] Fix | Delete

};

[250] Fix | Delete

}

[251] Fix | Delete

this._super();

[252] Fix | Delete

// reset position.using mechanism

[253] Fix | Delete

this.options.position = this._positionOptions;

[254] Fix | Delete

[255] Fix | Delete

[256] Fix | Delete

// ARIA helper

[257] Fix | Delete

setAriaLive: function(busy) {

[258] Fix | Delete

this.uiDialog.attr({

[259] Fix | Delete

"aria-live": "assertive",

[260] Fix | Delete

"aria-relevant": "additions removals text",

[261] Fix | Delete

"aria-busy": busy

[262] Fix | Delete

});

[263] Fix | Delete

[264] Fix | Delete

[265] Fix | Delete

// all following functions add a variable to determine if the dialog is visible

[266] Fix | Delete

_create: function() {

[267] Fix | Delete

this._super();

[268] Fix | Delete

this._isVisible = false;

[269] Fix | Delete

this._oldSize = {

[270] Fix | Delete

width: this.options.width,

[271] Fix | Delete

height: this.options.height

[272] Fix | Delete

};

[273] Fix | Delete

[274] Fix | Delete

// make dialog responsive to viewport changes

[275] Fix | Delete

this._on(window, this._windowResizeEvents);

[276] Fix | Delete

[277] Fix | Delete

[278] Fix | Delete

_windowResizeEvents: {

[279] Fix | Delete

resize: function(e) {

[280] Fix | Delete

if (this.options.resizeOnWindowResize) {

[281] Fix | Delete

if (window === e.target) {

[282] Fix | Delete

this._addTimeout(function() {

[283] Fix | Delete

this._setOptions(this._oldSize);

[284] Fix | Delete

});

[285] Fix | Delete

} else {

[286] Fix | Delete

this._addTimeout(function() {

[287] Fix | Delete

this._position();

[288] Fix | Delete

});

[289] Fix | Delete

}

[290] Fix | Delete

}

[291] Fix | Delete

[292] Fix | Delete

scroll: function() {

[293] Fix | Delete

// second test prevents initial page load scroll event

[294] Fix | Delete

if (this.options.scrollWithViewport && this.timeout) {

[295] Fix | Delete

this._addTimeout(function() {

[296] Fix | Delete

this._position();

[297] Fix | Delete

});

[298] Fix | Delete

} else {

[299] Fix | Delete

this.timeout = true;

[300] Fix | Delete

}

[301] Fix | Delete

}

[302] Fix | Delete

[303] Fix | Delete

[304] Fix | Delete

_addTimeout: function(callback) {

[305] Fix | Delete

clearTimeout(this.timeout);

[306] Fix | Delete

if (this._isVisible) {

[307] Fix | Delete

this.timeout = this._delay(callback, 250);

[308] Fix | Delete

}

[309] Fix | Delete

[310] Fix | Delete

[311] Fix | Delete

_makeResizable: function() {

[312] Fix | Delete

this._super();

[313] Fix | Delete

this.element.on(this.widgetEventPrefix + "resizestop", this, function(event) {

[314] Fix | Delete

event.data.element.css("width", "auto");

[315] Fix | Delete

event.data.uiDialog.css("height", "auto");

[316] Fix | Delete

});

[317] Fix | Delete

[318] Fix | Delete

[319] Fix | Delete

_makeDraggable: function() {

[320] Fix | Delete

this._super();

[321] Fix | Delete

this.element.on(this.widgetEventPrefix + "dragstop", this, function(event) {

[322] Fix | Delete

event.data.options.position = event.data._positionOptions;

[323] Fix | Delete

});

[324] Fix | Delete

[325] Fix | Delete

[326] Fix | Delete

open: function() {

[327] Fix | Delete

this._super();

[328] Fix | Delete

this._isVisible = true;

[329] Fix | Delete

[330] Fix | Delete

[331] Fix | Delete

close: function() {

[332] Fix | Delete

this._super();

[333] Fix | Delete

this._isVisible = false;

[334] Fix | Delete

[335] Fix | Delete

[336] Fix | Delete

focusTabbable: function() {

[337] Fix | Delete

this._focusTabbable();

[338] Fix | Delete

[339] Fix | Delete

[340] Fix | Delete

_createOverlay: function() {

[341] Fix | Delete

this._super();

[342] Fix | Delete

if (this.options.modal && this.options.closeModalOnClick) {

[343] Fix | Delete

this._on(this.overlay, {

[344] Fix | Delete

mousedown: function(event) {

[345] Fix | Delete

this.close(event);

[346] Fix | Delete

}

[347] Fix | Delete

});

[348] Fix | Delete

}

[349] Fix | Delete

}

[350] Fix | Delete

});

[351] Fix | Delete

[352] Fix | Delete

}( jQuery ));

[353] Fix | Delete

[354] Fix | Delete