Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-2557] Enhance Modal Plugin. This closes #842

This commit is contained in:
Scott Aslan 2016-08-11 15:45:56 -04:00 committed by Matt Gilman
parent 098a35c915
commit a9675552d9
3 changed files with 93 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
View File

@ -15,7 +15,7 @@
limitations under the License.
--%>
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="shell-dialog" class="hidden cancellable" data-nf-dialog='{"responsive": {"x": "false", "y": "false"}}'>
<div id="shell-dialog" class="hidden cancellable">
<div id="shell-container" class="dialog-content">
<div id="shell-close-container">
<button id="shell-undock-button" class="undock-normal pointer " title="Open in New Window">

182
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
View File

@ -16,8 +16,13 @@
*/
/**
* Create a new dialog. The options are specified in the following
* format:
* Create a new dialog.
*
* If the height, width, and fullscreen breakpoints options are not set this plugin will look for (and use)
* any CSS defined styles for height, min/max-height, width, min/max-width. If no CSS styles are defined then the
* plugin will attempt to calculate these values when the dialog is first opened (based on screen size).
*
* The options are specified in the following format:
*
* {
* header: true,
@ -49,7 +54,18 @@
* close: closeHandler,
* open: openHandler,
* resize: resizeHandler
* }
* },
* height: "55%", //optional. Property can also be set with css (accepts 'px' or '%' values)
* width: "34%", //optional. Property can also be set with css (accepts 'px' or '%' values)
* min-height: "420px", //optional, defaults to 'height'. Property can also be set with css (accepts 'px' values)
* min-width: "470px" //optional, defaults to 'width'. Property can also be set with css (accepts 'px' values)
* responsive: {
* x: "true", //optional, default true
* y: "true", //optional, default true
* fullscreen-height: "420px", //optional, default is original dialog height (accepts 'px' values)
* fullscreen-width: "470px", //optional, default is original dialog width (accepts 'px' values)
* },
* glasspane: "#728E9B" //optional, sets the color of modal glasspane...default if unset is the dialog header color
* }
*
* The content of the dialog MUST be contained in an element with the class `dialog-content`
@ -61,27 +77,6 @@
* </div>
* </div>
*
* The height, width, and fullscreen breakpoints can be set on the dialog element through the
* HTML5 `data-nf-dialog` attribute (These options must be a valid JSON format represented as a string).
* If the `data-nf-dialog` attributes are not set this plugin will look for any CSS styles defined
* for height, min/max-height, width, min/max-width and set them on the `data-nf-dialog` attribute.
* If no styles are set on the dialog then the plugin will set the `data-nf-dialog` attributes to values
* calculated when the dialog is first opened. Options are specified in the following format:
*
* {
* "height": "55%", //optional. Property can also be set with css (accepts 'px' or '%' values)
* "width":"34%", //optional. Property can also be set with css (accepts 'px' or '%' values)
* "min-height": "420px", //optional, defaults to 'height'. Property can also be set with css (accepts 'px' values)
* "min-width": "470px" //optional, defaults to 'width'. Property can also be set with css (accepts 'px' values)
* "responsive": {
* "x": "true", //optional, default true
* "y": "true", //optional, default true
* "fullscreen-height": "420px", //optional, default is original dialog height (accepts 'px' values)
* "fullscreen-width": "470px", //optional, default is original dialog width (accepts 'px' values)
* },
* "glasspane": "#728E9B" //optional, set the color of modal glasspane...default if unset is the dialog header color
* }
*
* @argument {jQuery} $
*/
(function ($) {
@ -139,66 +134,42 @@
*/
init: function (options) {
return this.each(function () {
// get the combo
var dialog = $(this).addClass('dialog cancellable modal');
dialog.css('display', 'none');
var nfDialog = {};
if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
nfDialog = dialog.data('nf-dialog');
}
// ensure the options have been properly specified
if (isDefinedAndNotNull(options)) {
// get the combo
var dialog = $(this).addClass('dialog cancellable modal');
dialog.css('display', 'none');
// determine if dialog needs a header
if (!isDefinedAndNotNull(options.header) || options.header) {
var dialogHeaderText = $('<span class="dialog-header-text"></span>');
var dialogHeader = $('<div class="dialog-header"></div>').prepend(dialogHeaderText);
// determine if the specified header text is null
if (!isBlank(options.headerText)) {
dialogHeaderText.text(options.headerText);
}
dialog.prepend(dialogHeader);
}
var nfDialog = {};
if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
nfDialog = dialog.data('nf-dialog');
}
// save the close handler
if (isDefinedAndNotNull(options.handler)) {
if (isDefinedAndNotNull(options.handler.close)) {
nfDialog.close = options.handler.close;
}
}
// save the open handler
if (isDefinedAndNotNull(options.handler)) {
if (isDefinedAndNotNull(options.handler.open)) {
nfDialog.open = options.handler.open;
}
}
// save the open handler
if (isDefinedAndNotNull(options.handler)) {
if (isDefinedAndNotNull(options.handler.resize)) {
nfDialog.resize = options.handler.resize;
}
}
// save the scrollable class name
if (isDefinedAndNotNull(options.scrollableContentStyle)) {
nfDialog.scrollableContentStyle = options.scrollableContentStyle;
}
// determine if dialog needs footer/buttons
if (!isDefinedAndNotNull(options.footer) || options.footer) {
// add the buttons
addButtons(dialog, options.buttons);
}
$.extend(nfDialog, options);
//persist data attribute
dialog.data('nfDialog', nfDialog);
}
// determine if dialog needs a header
if (!isDefinedAndNotNull(nfDialog.header) || nfDialog.header) {
var dialogHeaderText = $('<span class="dialog-header-text"></span>');
var dialogHeader = $('<div class="dialog-header"></div>').prepend(dialogHeaderText);
// determine if the specified header text is null
if (!isBlank(nfDialog.headerText)) {
dialogHeaderText.text(nfDialog.headerText);
}
dialog.prepend(dialogHeader);
}
// determine if dialog needs footer/buttons
if (!isDefinedAndNotNull(nfDialog.footer) || nfDialog.footer) {
// add the buttons
addButtons(dialog, nfDialog.buttons);
}
});
},
@ -214,7 +185,10 @@
if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
nfDialog = $(dialog).data('nf-dialog');
}
nfDialog.close = handler;
if (!isDefinedAndNotNull(nfDialog.handler)){
nfDialog.handler = {};
}
nfDialog.handler.close = handler;
//persist data attribute
$(dialog).data('nfDialog', nfDialog);
@ -233,7 +207,10 @@
if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
nfDialog = $(dialog).data('nf-dialog');
}
nfDialog.open = handler;
if (!isDefinedAndNotNull(nfDialog.handler)){
nfDialog.handler = {};
}
nfDialog.handler.open = handler;
//persist data attribute
$(dialog).data('nfDialog', nfDialog);
@ -252,7 +229,10 @@
if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
nfDialog = $(dialog).data('nf-dialog');
}
nfDialog.resize = handler;
if (!isDefinedAndNotNull(nfDialog.handler)){
nfDialog.handler = {};
}
nfDialog.handler.resize = handler;
//persist data attribute
$(dialog).data('nfDialog', nfDialog);
@ -432,10 +412,12 @@
}
}
// invoke the handler
var handler = dialog.data('nf-dialog').resize;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
handler.call(dialog);
if (isDefinedAndNotNull(nfDialog.handler)) {
var handler = nfDialog.handler.resize;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
// invoke the handler
handler.call(dialog);
}
}
},
@ -475,9 +457,10 @@
glasspane = nfDialog.glasspane;
} else {
nfDialog.glasspane = glasspane = dialog.find('.dialog-header').css('background-color'); //default to header color
if(top !== window || !isDefinedAndNotNull(nfDialog.glasspane)) {
nfDialog.glasspane = glasspane = 'transparent';
}
}
if(top !== window || !isDefinedAndNotNull(nfDialog.glasspane)) {
nfDialog.glasspane = glasspane = 'transparent';
}
//create glass pane overlay
@ -498,10 +481,12 @@
dialog.modal('resize');
dialog.center();
// invoke the handler
var handler = dialog.data('nf-dialog').open;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
handler.call(dialog);
if (isDefinedAndNotNull(nfDialog.handler)) {
var handler = nfDialog.handler.open;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
// invoke the handler
handler.call(dialog);
}
}
}
});
@ -514,10 +499,17 @@
return this.each(function () {
var dialog = $(this);
// invoke the handler
var handler = dialog.data('nf-dialog').close;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
handler.call(dialog);
var nfDialog = {};
if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
nfDialog = dialog.data('nf-dialog');
}
if (isDefinedAndNotNull(nfDialog.handler)) {
var handler = nfDialog.handler.close;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
// invoke the handler
handler.call(dialog);
}
}
// remove the modal glass pane overlay

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
View File

@ -22,7 +22,11 @@ $(document).ready(function () {
$('#shell-dialog').modal({
scrollableContentStyle: 'scrollable',
header: false,
footer: false
footer: false,
responsive: {
x: false,
y: false
}
});
// register a listener when the frame is closed