JSPanel ResizeIt Problem #65
Description
Hi @Flyer53 ,
I have different problem with ResizeIt :) I wrote a tool and this tool extend my defaults and parameters which send from code. But i cant set ResizeIt functions likely start,resize and stop.
This is default value:
define([], function () {
return {
AutoClose: false,
Border: false,
Callback: false,
Container: 'body',
Content: false,
ContentAjax: false,
ContentIframe: false,
ContentOverflow: 'hidden',
ContentSize: '400 200',
Custom: false,
Dblclicks: false,
DelayClose: 0,
Draggable: {
Handle: 'div.jsPanel-hdr, .jsPanel-titlebar',
Opacity: 0.8
},
Dragit: {
Axis: false,
Containment: 'window',
Handles: 'div.jsPanel-hdr, .jsPanel-titlebar',
Opacity: 0.9,
Start: false,
Drag: false,
Stop: false,
DisableUI: true
},
FooterToolbar: false,
HeaderControls: {
Close: false,
Maximize: false,
Minimize: false,
Normalize: false,
Smallify: false,
Controls: 'all',
Iconfont: 'jsglyph'
},
HeaderRemove: false,
HeaderTitle: 'Panel',
HeaderToolbar: false,
Id: '1',
MaximizedMargin: {
Top: 5,
Right: 5,
Bottom: 5,
Left: 5
},
MinimizeTo: true,
OnBeforeClose: false,
OnBeforeMaximize: false,
OnBeforeMinimize: false,
OnBeforeNormalize: false,
OnBeforeSmallify: false,
OnBeforeUnsmallify: false,
OnClosed: false,
OnMaximized: false,
OnMinimized: false,
OnNormalized: false,
OnBeforeResize: false,
OnResized: false,
OnSmallified: false,
OnUnsmallified: false,
OnFronted: false,
OnWindowResize: false,
PanelType: false,
Position: 'center',
Resizable: {
Handles: 'n, e, s, w, ne, se, sw, nw',
AutoHide: false,
MinWidth: 100,
MinHeight: 100
},
ResizeIt: {
Containment: false,
Handles: 'n, e, s, w, ne, se, sw, nw',
MinWidth: 100,
MinHeight: 100,
Start: false,
Resize: false,
Stop: false,
DisableUI: true,
MaxWidth: function () { return $(window).width() - 10 },
MaxHeight: function () { return $(window).height() - 10 }
},
Rtl: false,
SetStatus: false,
Show: false,
Template: false,
Theme: 'default'
}
});
Extent Parameters and Create JSPanel
define(["Utilities/JSPanel/JSPanelDefaults"], function (JSPanelDefaults) {
var ShowJSPanel = function (options) {
var opts = $.extend({}, JSPanelDefaults, options);
if ($("#" + opts.Id).length < 1) {
$.jsPanel({
autoclose: opts.AutoClose,
border: opts.Border,
callback: opts.Callback,
container: opts.Container,
content: opts.Content,
contentAjax: opts.ContentAjax,
contentIframe: opts.ContentIframe,
contentOverflow: opts.ContentOverflow,
contentSize: opts.ContentSize,
custom: opts.Custom,
dblclicks: opts.Dblclicks,
delayClose: opts.DelayClose,
draggable: {
handle: opts.Draggable.Handle,
opacity: opts.Draggable.Opacity
},
footerToolbar: opts.FooterToolbar,
headerControls: {
close: opts.HeaderControls.Close,
maximize: opts.HeaderControls.Maximize,
minimize: opts.HeaderControls.Minimize,
normalize: opts.HeaderControls.Normalize,
smallify: opts.HeaderControls.Smallify,
controls: opts.HeaderControls.Controls,
iconfont: opts.HeaderControls.Iconfont
},
headerRemove: opts.HeaderRemove,
headerTitle: opts.HeaderTitle,
headerToolbar: opts.HeaderToolbar,
id: opts.Id,
maximizedMargin: {
top: opts.MaximizedMargin.Top,
right: opts.MaximizedMargin.Right,
bottom: opts.MaximizedMargin.Lottom,
left: opts.MaximizedMargin.Left
},
minimizeTo: opts.MinimizeTo,
onbeforeclose: opts.OnBeforeClose,
onbeforemaximize: opts.OnBeforeMaximize,
onbeforeminimize: opts.OnBeforeMinimize,
onbeforenormalize: opts.OnBeforeNormalize,
onbeforesmallify: opts.OnBeforeSmallify,
onbeforeunsmallify: opts.onBeforeUnsmallify,
onclosed: opts.OnClosed,
onmaximized: opts.OnMaximized,
onminimized: opts.OnMinimized,
onnormalized: opts.OnNormalized,
onbeforeresize: opts.OnBeforeResize,
onresized: opts.OnResized,
onsmallified: opts.OnSmallified,
onunsmallified: opts.OnUnsmallified,
onfronted: opts.OnFronted,
onwindowresize: opts.OnWindowResize,
paneltype: opts.PanelType,
position: opts.Position,
resizable: {
handles: opts.Resizable.Handles,
autoHide: opts.Resizable.AutoHide,
minWidth: opts.Resizable.MinWidth,
minHeight: opts.Resizable.MinHeight
},
resizeit: {
containment: opts.ResizeIt.Containment,
handles: opts.ResizeIt.Handles,
minWidth: opts.ResizeIt.MinWidth,
minHeight: opts.ResizeIt.MinHeight,
maxWidth: opts.ResizeIt.MaxWidth,
maxHeight: opts.ResizeIt.MaxHeight,
start: opts.ResizeIt.Start,
resize: opts.ResizeIt.Resize,
stop: opts.ResizeIt.Stop,
disableui: opts.ResizeIt.DisableUI
},
rtl: opts.Rtl,
setstatus: opts.SetStatus,
show: opts.Show,
template: opts.Template,
theme: opts.Theme
});
} else {
$(window).width() < 768 ? jsPanel.activePanels.getPanel(opts.Id).maximize() : jsPanel.activePanels.getPanel(opts.Id).normalize();
}
jsPanel.activePanels.getPanel(opts.Id).content.mCustomScrollbar({ theme: 'minimal-dark', scrollButtons: { enable: true } });
};
var FindJSPanel = function (options) {
return jsPanel.activePanels.getPanel(options.Id);
}
return {
Show: ShowJSPanel,
Find: FindJSPanel
}
});
And i call function likely that:
JSPanel.Show({
Id: 'Report-Page',
Content:'<div id="graph-result"></div>'
ResizeIt: {
Start:function (panel, size) {
console.log('Start');
},
Resize: function (panel, size) {
console.log('Resize');
$("#graph-result").highcharts().setSize(500, 500, doAnimation = true);
}
}
});
But function not working. When i write function in defaults then it working.
Can you help me?
Thanks...