nscomponentsreact
Version:
React Wrapper Components for NSComponents
1,449 lines (1,384 loc) • 46.7 kB
JavaScript
var nsModuleExport = function(root,name,prototype)
{
if(typeof exports === 'object' && typeof module === 'object')
{
module.exports[name] = prototype;
}
else if (typeof define === "function" && define.amd)
{
define(name,[], function () {return prototype;});
}
else if(typeof exports === 'object')
{
exports[name] = prototype;
}
else
{
root[name] = prototype;
}
};var nsIsWeb = function(root)
{
if(typeof exports === 'object' && typeof module === 'object')
{
return false;
}
else if (typeof define === "function" && define.amd)
{
return false;
}
else if(typeof exports === 'object')
{
return false;
}
else
{
return true;
}
};if(!nsIsWeb())
{
var nsutilRef = require('./nsUtil.min.js');
var NSUtil = nsutilRef.NSUtil;
var nscontainerbaseRef = require('./nsContainerBase.min.js');
var nsExtendPrototype = nscontainerbaseRef.nsExtendPrototype;
var NSContainerBase = nscontainerbaseRef.NSContainerBase;
var svgRef = require('./nsSVG.min.js');
var NSSvg = svgRef.NSSvg;
var NSSvgShapes = svgRef.NSSvgShapes;
var plugginsRef = require('./nsPluggins.min.js');
var nsTextEditor = plugginsRef.nsTextEditor;
var nsTextAreaEditor = plugginsRef.nsTextAreaEditor;
var NSCellSelection = plugginsRef.NSCellSelection;
var NSTableCellNavigator = plugginsRef.NSTableCellNavigator;
var dateutilRef = require('./nsDateUtil.min.js');
var NSDateUtil = dateutilRef.NSDateUtil;
}
"use strict";
var NSPanel = (function()
{
function NSPanel(component,setting)
{
this.__DEFAULT_ANIMATION_STEPS = 10;
this.__DEFAULT_ANIMATION_DELAY = 20;
this.__OUTER_CONTAINER_ID = "panelContainer";
this.__TITLE_CONTAINER_ID = "divTitleBar";
this.__BODY_CONTAINER_ID = "divBody";
this.__CLASS_OUTER_CONTAINER = "nsPanelContainer";
this.__CLASS_TITLEBAR = "nsPanelTitleBar";
this.__CLASS_BODY_CONTAINER = "nsPanelBody";
this.__setting = setting;
this.__header = null;
this.__body = null;
this.__context = window;
this.__title = null;
this.__titleHtml = null;
this.__content = null;
this.__parent = document.body;
this.__templateID = null;
this.__templateUrl = null;
this.__contentComponent = null;
this.__contentComponentData = null;
this.__minWidth = null;
this.__minHeight = null;
this.__enablePopUp = false;
this.__enableModal = false;
this.__enableCollapse = false;
this.__enableMinimization = false;
this.__enableFullScreen = false;
this.__enableDrag = false;
this.__enableResize = false;
this.__enableTitleDblClick = false;
this.__enableMoveOnClick = false;
this.__enableModalAnimation = false;
this.__modalAnimationType = "Top";
this.__enableModalCloseOnOutsideClick = false;
this.__enableModalCloseOnEscape = false;
this.__enableCloseIconVisibility = true;
this.__customClass = {};
this.__toolBarDetails = {};
this.__panelSetting = {};
this.__origBaseDimension = {};
this.__lastHeight = null;
this.__lastBodyHeight = -1;
this.__nsDragResizeElements = null;
this.__divGhost = null;
this.__divModal = null;
this.__isCollapsingExpanding = false;
this.__isCollapsed = false;
this.__isMinimized = false;
this.__isFullScreen = false;
this.__isInternalRemove = false;
this.__divOrignalChildren = null;
this.__dragExcludeElement = [];
this.__disableCollapse = false;
this.__disableMinMax = false;
this.__disableFullScreen = false;
this.__toolBarDivs = {};
this.__lastModalAnimationCss = null;
this.__bodyCompInstance = null;
//Minimize Variables
this.__divMinFixedContainer = null;
this.__minimizedDirection = "left";
this.__baseComponentParent = null;
this.__minimizeAddRemoveElementCallback = null;
//FullScreen Variables
this.__origFullScreenDimension = {baseComponentRect:null,baseComponentStyle:null};
this.__windowClickRef = null;
this.__documentKeydownRef = null;
this.__modalAnimationEndRef = null;
this.__isComponentNull = false;
if(!component)
{
component = document.createElement("div");
component.style.display = "none";
this.__parent.appendChild(component);
this.__isComponentNull = true;
}
this.base.__setBaseComponent.call(this,component);
};
nsExtendPrototype(NSContainerBase,NSPanel);
NSPanel.prototype.constructor = NSPanel;
NSPanel.prototype.initializeComponent = function()
{
this.base.initializeComponent.call(this);
this.__setSetting();
if(this.__isComponentNull)
{
this.__baseComponent.setAttribute("id",this.getID() + "Panel");
}
else
{
this.__createStructure();
}
};
NSPanel.prototype.setComponentProperties = function()
{
this.base.setComponentProperties.call(this);
};
NSPanel.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty)
{
var attributeName = attrName.toLowerCase();
if(attributeName == "title")
{
this.__title = newVal;
}
if(attributeName == "titleHtml")
{
this.__titleHtml = newVal;
}
this.base.propertyChange.call(this,attrName, oldVal, newVal, setProperty);
};
NSPanel.prototype.removeComponent = function()
{
if(!this.__isInternalRemove || this.__isComponentNull)
{
if(this.__nsDragResizeElements)
{
this.__nsDragResizeElements.destroy();
this.__nsDragResizeElements = null;
}
if(this.__bodyCompInstance)
{
this.__callEditorFunction(this.__bodyCompInstance,"destroy");
this.__bodyCompInstance = null;
}
if(this.__windowClickRef)
{
this.util.removeEvent(this.__context,"click",this.__windowClickRef);
this.__windowClickRef = null;
}
if(this.__documentKeydownRef)
{
this.util.removeEvent(document,"keydown",this.__documentKeydownRef);
this.__documentKeydownRef = null;
}
this.__dragExcludeElement = [];
this.base.removeComponent.call(this);
}
this.__isInternalRemove = false;
};
NSPanel.prototype.componentResized = function(event)
{
this.base.componentResized.call(this,event);
};
NSPanel.prototype.open = function(animation)
{
if(this.__isComponentNull)
{
this.__createStructure();
}
if(this.__divModal)
{
if(this.__enableModal)
{
this.__divModal.style.zIndex = this.util.getMaxZIndex() + 1;
}
if(this.__enableModalAnimation)
{
this.__modalAnimationType = animation || this.__modalAnimationType;
this.util.removeStyleClass(this.__baseComponent,this.__lastModalAnimationCss);
if(animation)
{
var css = "nsPanelModal" + this.util.toCamelCase(this.__modalAnimationType,true);
this.util.addStyleClass(this.__baseComponent,css);
var cssAnimationHelper = new this.util.nsCSSAnimationHelper();
this.__modalAnimationEndRef = this.__modalAnimationEndHandler.bind(this,css,true,cssAnimationHelper);
cssAnimationHelper.addEndEvent(this.__baseComponent,this.__modalAnimationEndRef);
this.__lastModalAnimationCss = css;
}
}
this.__showHideModal(true);
}
};
NSPanel.prototype.close = function()
{
if(this.__enableModalAnimation)
{
var cssAnimationHelper = new this.util.nsCSSAnimationHelper();
this.__modalAnimationEndRef = this.__modalAnimationEndHandler.bind(this,this.__lastModalAnimationCss,false,cssAnimationHelper);
cssAnimationHelper.addEndEvent(this.__baseComponent,this.__modalAnimationEndRef);
this.util.removeStyleClass(this.__divModal,"nsPanelModalOpen");
this.util.removeStyleClass(this.__baseComponent,"nsPanelOpen");
}
else
{
this.__showHideModal(false);
}
};
NSPanel.prototype.removeModal = function()
{
this.close();
this.removeComponent();
if(this.__divModal && this.__divModal.parentNode) {
this.__divModal.parentNode.removeChild(this.__divModal);
}
};
NSPanel.prototype.getBaseElement = function()
{
return this.__baseComponent;
};
NSPanel.prototype.minimize = function()
{
if(!this.isMinimized())
{
this.__initializeMinMax();
}
};
NSPanel.prototype.maximize = function()
{
if(this.isMinimized())
{
this.__initializeMinMax();
}
};
NSPanel.prototype.collapse = function()
{
if(!this.isCollapsed())
{
this.__initializeExpCol();
}
};
NSPanel.prototype.expand = function()
{
if(this.isCollapsed())
{
this.__initializeExpCol();
}
};
NSPanel.prototype.fullScreen = function()
{
if(!this.isFullScreen())
{
this.__initializeFullScreen();
}
};
NSPanel.prototype.restore = function()
{
if(this.isFullScreen())
{
this.__initializeFullScreen();
}
};
NSPanel.prototype.disableResize = function(value)
{
if(this.__nsDragResizeElements)
{
this.__nsDragResizeElements.disableResize(value);
}
};
NSPanel.prototype.disableDrag = function(value)
{
if(this.__nsDragResizeElements)
{
this.__nsDragResizeElements.disableDrag(value);
}
};
NSPanel.prototype.disableCollapse = function(value)
{
this.__disableCollapse = value;
};
NSPanel.prototype.disableMinMax = function(value)
{
this.__disableMinMax = value;
};
NSPanel.prototype.disableFullScreen = function(value)
{
this.__disableFullScreen = value;
};
NSPanel.prototype.isCollapsed = function()
{
return this.__isCollapsed;
};
NSPanel.prototype.isMinimized = function()
{
return this.__isMinimized;
};
NSPanel.prototype.isFullScreen = function()
{
return this.__isFullScreen;
};
NSPanel.prototype.__setSetting = function()
{
var setting = this.__setting;
if(setting)
{
if(setting.hasOwnProperty("context"))
{
this.__context = setting["context"];
}
if(setting.hasOwnProperty("title"))
{
this.__title = setting["title"];
}
if(setting.hasOwnProperty("titleHtml"))
{
this.__titleHtml = setting["titleHtml"];
}
if(setting.hasOwnProperty("content"))
{
this.__content = setting["content"];
}
if(setting.hasOwnProperty("parent"))
{
this.__parent = setting["parent"];
}
if(setting.hasOwnProperty("template"))
{
this.__templateID = setting["template"];
}
if(setting.hasOwnProperty("templateUrl"))
{
this.__templateUrl = setting["templateUrl"];
}
if(setting.hasOwnProperty("contentComponent"))
{
this.__contentComponent = setting["contentComponent"];
}
if(setting.hasOwnProperty("contentComponentData"))
{
this.__contentComponentData = setting["contentComponentData"];
}
if(setting.hasOwnProperty("minWidth"))
{
this.__minWidth = this.util.getNumber(setting["minWidth"]);
}
if(setting.hasOwnProperty("minHeight"))
{
this.__minHeight = this.util.getNumber(setting["minHeight"]);
}
if(setting.hasOwnProperty("enablePopUp"))
{
this.__enablePopUp = Boolean.parse(setting["enablePopUp"]);
}
if(setting.hasOwnProperty("enableModal"))
{
this.__enableModal = Boolean.parse(setting["enableModal"]);
if(this.__enableModal)
{
this.__enablePopUp = true;
}
}
if(setting.hasOwnProperty("enableCollapse"))
{
this.__enableCollapse = Boolean.parse(setting["enableCollapse"]);
}
if(setting.hasOwnProperty("enableMinimization"))
{
this.__enableMinimization = Boolean.parse(setting["enableMinimization"]);
}
if(setting.hasOwnProperty("enableFullScreen"))
{
this.__enableFullScreen = Boolean.parse(setting["enableFullScreen"]);
}
if(setting.hasOwnProperty("enableDrag"))
{
this.__enableDrag = Boolean.parse(setting["enableDrag"]);
}
if(setting.hasOwnProperty("enableResize"))
{
this.__enableResize = Boolean.parse(setting["enableResize"]);
}
if(setting.hasOwnProperty("enableTitleDblClick"))
{
this.__enableTitleDblClick = Boolean.parse(setting["enableTitleDblClick"]);
}
if(setting.hasOwnProperty("enableMoveOnClick"))
{
if(!this.__enablePopUp)
{
this.__enableMoveOnClick = Boolean.parse(setting["enableMoveOnClick"]);
}
}
if(setting.hasOwnProperty("enableModalAnimation"))
{
this.__enableModalAnimation = Boolean.parse(setting["enableModalAnimation"]);
}
if(setting.hasOwnProperty("modalAnimationType"))
{
this.__modalAnimationType = setting["modalAnimationType"];
}
if(setting.hasOwnProperty("enableModalCloseOnOutsideClick"))
{
if(this.__enableModal)
{
this.__enableModalCloseOnOutsideClick = Boolean.parse(setting["enableModalCloseOnOutsideClick"]);
}
}
if(setting.hasOwnProperty("enableModalCloseOnEscape"))
{
if(this.__enableModal)
{
this.__enableModalCloseOnEscape = Boolean.parse(setting["enableModalCloseOnEscape"]);
}
}
if(setting.hasOwnProperty("enableCloseIconVisibility"))
{
this.__enableCloseIconVisibility = this.util.isUndefinedOrNull(setting["enableCloseIconVisibility"]) ? true : Boolean.parse(setting["enableCloseIconVisibility"]);
}
if(setting.hasOwnProperty("minimizedDirection"))
{
this.__minimizedDirection = setting["minimizedDirection"];
}
if(setting.hasOwnProperty("theme"))
{
this.__theme = setting["theme"];
}
if(setting.hasOwnProperty("minimizeAddRemoveElementCallback"))
{
this.__minimizeAddRemoveElementCallback = setting["minimizeAddRemoveElementCallback"];
if (typeof this.__minimizeAddRemoveElementCallback === "string" || this.__minimizeAddRemoveElementCallback instanceof String)
{
if(this.util.isFunction(this.__minimizeAddRemoveElementCallback))
{
this.__minimizeAddRemoveElementCallback = this.__config.context[this.__minimizeAddRemoveElementCallback];
}
}
}
var customClass = {};
if(setting.hasOwnProperty("customClass"))
{
customClass = setting["customClass"];
if(!customClass)
{
customClass = {};
}
}
this.__customClass = {container:customClass["container"] || null,
titleBar:customClass["titleBar"] || null,
titleBarContent:customClass["titleBarContent"] || null,
iconContainer:customClass["iconContainer"] || null,
icon:customClass["icon"] || null,
body:customClass["body"] || null};
var toolBarDetails = {};
if(setting.hasOwnProperty("toolBarDetails"))
{
toolBarDetails = setting["toolBarDetails"];
if(!toolBarDetails)
{
toolBarDetails = {};
}
}
this.__toolBarDetails = {
minimize:toolBarDetails["minimize"] || {iconHTML:null,title:"Minimize"},
maximize:toolBarDetails["maximize"] || {iconHTML:null,title:"Maximize"},
expand:toolBarDetails["expand"] || {iconHTML:null,title:"Expand"},
collapse:toolBarDetails["collapse"] || {iconHTML:null,title:"Collapse"},
fullScreen:toolBarDetails["fullScreen"] || {iconHTML:null,title:"FullScreen"},
restore:toolBarDetails["restore"] || {iconHTML:null,title:"Restore"},
close:toolBarDetails["close"] || {iconHTML:null,title:"Close"}
};
var panelSetting = {};
if(setting.hasOwnProperty("panelSetting"))
{
panelSetting = setting["panelSetting"];
if(!panelSetting)
{
panelSetting = {};
}
}
this.__panelSetting = {
top:panelSetting["top"],
left:panelSetting["left"],
width:panelSetting["width"],
height:panelSetting["height"],
};
}
};
NSPanel.prototype.__createStructure = function()
{
this.__saveRestoreBaseComponentDimension(true);
this.__copyOrignalContent();
var arrKeys = Object.keys(this.__panelSetting);
for(var index = 0;index < arrKeys.length;index++)
{
if(this.__panelSetting[arrKeys[index]])
{
this.__baseComponent.style[arrKeys[index]] = this.__panelSetting[arrKeys[index]];
}
}
this.util.addStyleClass(this.__baseComponent,"nsPanel");
this.util.addStyleClass(this.__baseComponent,"nsPanelExpanded");
this.__applyTheme(this.__baseComponent,"nsPanel");
this.__applyTheme(this.__baseComponent,"nsPanelWidget");
this.__applyCustomClass(this.__baseComponent,"container");
if(this.__enableDrag)
{
this.util.addStyleClass(this.__baseComponent,"nsPanelModalContentDrag");
}
if(this.__enablePopUp)
{
var parentNode = this.__parent;
this.__divModal = this.__createModal();
this.__isInternalRemove = true;
this.__divModal.appendChild(this.__baseComponent);
parentNode.appendChild(this.__divModal);
this.util.addStyleClass(this.__baseComponent,"nsPanelModalContent");
if(this.__enableModalCloseOnOutsideClick)
{
//this.__windowClickRef = this.__windowClickHandler.bind(this);
this.util.addEvent(this.__divModal,"click",this.__modalClickHandler.bind(this));
}
if(this.__enableModalCloseOnEscape)
{
//To detect escape button
this.__documentKeydownRef = this.__documentKeydownHandler.bind(this);
this.util.addEvent(document,"keydown",this.__documentKeydownRef);
}
}
this.__header = this.__createTitleBar(this.__baseComponent);
this.__body = this.__createBody(this.__baseComponent);
this.__lastHeight = this.util.getStyleValue(this.__baseComponent,"height");
var dragResizeSetting = {element:this.__baseComponent,
enableDrag:this.__enableDrag,
enableResize:this.__enableResize,
enableMoveOnClick:this.__enableMoveOnClick,
minWidth:this.__minWidth,
minHeight:this.__minHeight,
createGhostElementCallback:this.__createGhostElement.bind(this),
enableDragContainment:true,
excludeElement:this.__dragExcludeElement};
this.__nsDragResizeElements = new this.util.nsDragResizeElements(dragResizeSetting);
this.util.addEvent(this.__baseComponent,this.__nsDragResizeElements.DRAG_STARTING,this.__dragResizeEventHandler.bind(this));
this.util.addEvent(this.__baseComponent,this.__nsDragResizeElements.DRAG_END,this.__dragResizeEventHandler.bind(this));
this.util.addEvent(this.__baseComponent,this.__nsDragResizeElements.RESIZE_END,this.__dragResizeEventHandler.bind(this));
this.util.addEvent(this.__baseComponent,"click",this.__baseComponentClickHandler.bind(this));
this.util.addEvent(this.__baseComponent,NSPanel.__ELEMENT_FOCUS_OUT,this.__baseComponentFocusOutHandler.bind(this));
};
NSPanel.prototype.__saveRestoreBaseComponentDimension = function(isSave)
{
if(this.__baseComponent)
{
var arrAttributeName = ["class","style"];
if(isSave)
{
this.__origBaseDimension = {};
for(var count = 0;count < arrAttributeName.length;count++)
{
this.__origBaseDimension[arrAttributeName[count]] = this.__baseComponent.getAttribute(arrAttributeName[count]);
}
this.__origBaseDimension["children"] = this.__baseComponent.children;
}
else
{
for(var count = 0;count < arrAttributeName.length;count++)
{
this.__baseComponent.setAttribute(arrAttributeName[count],this.__origBaseDimension[arrAttributeName[count]]);
}
if(this.__origBaseDimension["children"] && this.__origBaseDimension["children"].length > 0)
{
this.util.removeAllChildren(this.__baseComponent);
for(var count = 0;count < this.__origBaseDimension["children"].length;count++)
{
this.__baseComponent.appendChild(this.__origBaseDimension["children"][count]);
}
}
this.__origBaseDimension = {};
}
}
};
NSPanel.prototype.__createModal = function()
{
var divModal = this.util.createDiv(this.getID() + "modal","nsPanelModal");
if(this.__enableModal)
{
this.util.addStyleClass(divModal,"nsPanelModalProp");
}
if(this.__enableModalAnimation)
{
this.util.addStyleClass(divModal,"nsPanelModalAnimation");
}
this.util.addStyleClass(divModal,"nsPanelModal" + this.__theme);
return divModal;
};
NSPanel.prototype.__createTitleBar = function(parentElement)
{
if(parentElement)
{
var divTitleBar = this.util.createDiv(this.getID() + this.__TITLE_CONTAINER_ID,"nsPanelTitleBar");
this.util.addStyleClass(divTitleBar,this.__CLASS_TITLEBAR);
this.__applyCustomClass(divTitleBar,"titleBar");
var divTitleBarContent = this.util.createDiv(this.getID() + this.__TITLE_CONTAINER_ID + "Content","nsPanelTitleBarContent");
this.__applyCustomClass(divTitleBarContent,"titleBarContent");
divTitleBar.appendChild(divTitleBarContent);
if(this.__titleHtml && this.__titleHtml.length > 0)
{
divTitleBarContent.innerHTML = this.__titleHtml;
}
else if(this.__title && this.__title.length > 0)
{
var titleText = document.createTextNode(this.__title);
divTitleBarContent.appendChild(titleText);
}
var svgShapes = new NSSvgShapes();
var objSVG = new NSSvg();
var divIcon = this.util.createDiv(this.getID() + this.__TITLE_CONTAINER_ID + "IconContainer","nsPanelControlbar");
this.__applyCustomClass(divIcon,"iconContainer");
var divButton = null;
if(this.__enableCollapse)
{
svgShapes.addExpandInPage();
svgShapes.addCollapseInPage();
var expColID = this.getID() + "ExpCol";
var headerDoubleClickRef = this.__headerDoubleClickHandler.bind(this);
divButton = this.__addToolbarIcon(divIcon,objSVG,"collapse","nsPanelExpColContainer",expColID,"nsPanelExpColIcon",svgShapes.__COLLAPSE_ICON_ID,headerDoubleClickRef);
this.__toolBarDivs["expand"] = this.__toolBarDivs["collapse"] = divButton;
if(this.__enableTitleDblClick)
{
this.util.addEvent(divTitleBar,"dblclick",headerDoubleClickRef);
}
}
if(this.__enableMinimization)
{
svgShapes.addMinimizeInPage();
svgShapes.addMaximizeInPage();
var minMaxID = this.getID() + "MinMax";
divButton = this.__addToolbarIcon(divIcon,objSVG,"minimize","nsPanelMinMaxContainer",minMaxID,"nsPanelMinMaxIcon",svgShapes.__MINIMIZE_ICON_ID,this.__minimizeIconClickHandler.bind(this));
this.__toolBarDivs["maximize"] = this.__toolBarDivs["minimize"] = divButton;
}
if(this.__enableFullScreen)
{
svgShapes.addFullScreenInPage();
svgShapes.addRestoreInPage();
var fullScreenID = this.getID() + "FullScreen";
divButton = this.__addToolbarIcon(divIcon,objSVG,"fullScreen","nsPanelFullScreenContainer",fullScreenID,"nsPanelFullScreenIcon",svgShapes.__FULLSCREEN_ICON_ID,this.__fullScreenIconClickHandler.bind(this));
this.__toolBarDivs["fullScreen"] = this.__toolBarDivs["restore"] = divButton;
}
if(this.__enablePopUp && this.__enableCloseIconVisibility)
{
svgShapes.addCloseIcon();
var closeID = this.getID() + "Close";
divButton = this.__addToolbarIcon(divIcon,objSVG,"close","nsPanelCloseContainer",closeID,"nsPanelCloseIcon",svgShapes.__CLOSE_ICON_ID,this.__closeIconClickHandler.bind(this));
this.__toolBarDivs["close"] = divButton;
}
divTitleBar.appendChild(divIcon);
parentElement.appendChild(divTitleBar);
return divTitleBar;
}
return null;
};
NSPanel.prototype.__createBody = function(parentElement)
{
if(parentElement)
{
var divBody = this.util.createDiv(this.getID() + this.__BODY_CONTAINER_ID,this.__CLASS_BODY_CONTAINER);
this.__applyCustomClass(divBody,"body");
if(this.__divOrignalChildren)
{
divBody.appendChild(this.__divOrignalChildren);
}
if(this.__content)
{
if(this.util.isString(this.__content))
{
var compSpan = document.createElement("span");
compSpan.innerHTML = this.__content;
divBody.appendChild(compSpan);
}
else
{
divBody.appendChild(this.__content);
}
}
else if(this.__templateID && this.__templateID.length > 0)
{
divBody.appendChild(this.util.getTemplate(this.__templateID));
}
else if(this.__templateUrl && this.__templateUrl.length > 0)
{
var self = this;
var templateLoadHandler = function(templateText)
{
if(templateText)
{
divBody.innerHTML = templateText;
}
else
{
console.error(self.__templateUrl + " was not loaded.Please check the URL");
}
};
var templateErrorHandler = function(errorText)
{
console.error(self.__templateUrl + " was not loaded.Please check the URL");
};
this.util.getTemplateFromURL(this.__templateUrl,templateLoadHandler,templateErrorHandler);
}
else if(this.__contentComponent)
{
var callback = function(component)
{
if(this.__bodyCompInstance)
{
this.__bodyCompInstance = null;
}
this.__bodyCompInstance = new component();
var retVal = this.__callEditorFunction(this.__bodyCompInstance,"init",this.__contentComponentData);
var initCallback = function(bodyCompInstance)
{
if(!this.__bodyCompInstance) {
this.__bodyCompInstance = bodyCompInstance;
}
var element = this.__bodyCompInstance.getElement();
divBody.appendChild(element);
this.__callEditorFunction(this.__bodyCompInstance,"elementAdded");
var config = {instance: this.__bodyCompInstance,parentComp: this,element: element};
this.__bodyCompInstance[this.__getAttributeKey("config")] = config;
};
this.util.resolveFunctionOrPromise(retVal,initCallback.bind(this));
};
this.util.resolveFunctionOrPromise(this.__contentComponent,callback.bind(this));
}
parentElement.appendChild(divBody);
return divBody;
}
return null;
};
NSPanel.prototype.__createGhostElement = function(element)
{
this.__divGhost = element.cloneNode(true);
var divPanelControlbar = this.__divGhost.querySelector(".nsPanelControlbar");
if(divPanelControlbar)
{
divPanelControlbar.parentNode.removeChild(divPanelControlbar);
}
var divBody = this.__divGhost.querySelector(".nsPanelBody");
if(divBody)
{
divBody.innerHTML = "";
}
return this.__divGhost;
};
NSPanel.prototype.__modalClickHandler = function(event)
{
var target = this.util.getTarget(event);
if(target !== this.__baseComponent && !this.__baseComponent.contains(target))
{
this.close();
}
};
NSPanel.prototype.__documentKeydownHandler = function(event)
{
event = this.util.getEvent(event);
if (event.keyCode === this.util.KEYCODE["ESC"])
{
this.close();
}
};
NSPanel.prototype.__copyOrignalContent = function()
{
if(this.__baseComponent && this.__baseComponent.childNodes.length > 0)
{
this.__divOrignalChildren = this.util.createDiv(this.getID() + "orignalChildren");
while (this.__baseComponent.childNodes.length > 0)
{
this.__divOrignalChildren.appendChild(this.__baseComponent.childNodes[0]);
}
}
};
NSPanel.prototype.__headerDoubleClickHandler = function(event)
{
event = this.util.getEvent(event);
this.__initializeExpCol();
event.stopPropagation();
event.stopImmediatePropagation();
};
NSPanel.prototype.__minimizeIconClickHandler = function(event)
{
event = this.util.getEvent(event);
this.__initializeMinMax();
event.stopPropagation();
event.stopImmediatePropagation();
};
NSPanel.prototype.__fullScreenIconClickHandler = function(event)
{
event = this.util.getEvent(event);
this.__initializeFullScreen();
event.stopPropagation();
event.stopImmediatePropagation();
};
NSPanel.prototype.__closeIconClickHandler = function(event)
{
event = this.util.getEvent(event);
this.close();
event.stopPropagation();
event.stopImmediatePropagation();
};
NSPanel.prototype.__modalAnimationEndHandler = function(css,show,cssAnimationHelper,event)
{
cssAnimationHelper.removeEndEvent(this.__baseComponent,this.__modalAnimationEndRef);
this.__modalAnimationEndRef = null;
if(show)
{
//this.util.removeStyleClass(this.__baseComponent,css);
}
else
{
this.__showHideModal(false);
}
};
NSPanel.prototype.__dragResizeEventHandler = function(event)
{
if(event.eventName === NSPanel.DRAG_STARTING)
{
var target = event.detail;
if(target && (this.util.hasStyleClass(target,"nsPanelMinMaxContainer")))
{
this.util.preventDefault(event);
event.stopImmediatePropagation();
}
}
else if(event.eventName === NSPanel.DRAG_END)
{
this.__refreshToolbarIcon();
}
else if(event.eventName === NSPanel.RESIZE_END)
{
this.__lastHeight = this.util.getStyleValue(this.__baseComponent,"height");
this.__refreshToolbarIcon();
}
};
NSPanel.prototype.__baseComponentClickHandler = function(event)
{
console.log("__baseComponentClickHandler " + this.__baseComponent.id);
event = this.util.getEvent(event);
var currentPanel,highlightedPanel;
var arrElement = document.querySelectorAll(".nsPanel:not(.nsDragGhost)");
var currentPanelParent = currentPanel = this.__baseComponent;
var highlightedPanelParent = highlightedPanel = arrElement[arrElement.length - 1];
//if popup then select its parent
if(this.__divModal && highlightedPanel)
{
highlightedPanelParent = highlightedPanel.parentNode;
currentPanelParent = this.__divModal;
//below line stops click handler of button on Panel
//event.stopPropagation();
}
if(highlightedPanelParent != currentPanelParent)
{
this.util.insertAfterElement(highlightedPanelParent,currentPanelParent);
}
this.__refreshToolbarIcon();
if(highlightedPanel)
{
this.util.dispatchEvent(highlightedPanel,NSPanel.__ELEMENT_FOCUS_OUT,null,null);
}
};
NSPanel.prototype.__baseComponentFocusOutHandler = function(event)
{
console.log("__baseComponentFocusOutHandler " + this.__baseComponent.id);
this.__refreshToolbarIcon();
};
NSPanel.prototype.__addToolbarIcon = function(divIcon,objSVG,toolbarKey,containerClass,iconID,svgClass,svgShapeIconID,clickHandler)
{
var divButton = this.util.createDiv(null,"nsPanelControlButton");
this.util.addStyleClass(divButton,containerClass);
this.__applyCustomClass(divButton,"icon");
if(!this.__setToolBarButton(toolbarKey,divButton))
{
var svg = objSVG.addSVG(divButton,iconID,svgClass,null,null,null,null,null,null,true);
objSVG.addUse(svg,iconID + "use",svgClass + "Use","#" + svgShapeIconID);
}
divIcon.appendChild(divButton);
this.util.addEvent(divButton,"click",clickHandler);
this.__dragExcludeElement.push(divButton);
return divButton;
};
//call this function if svg icons are used and container changes its parent because of IE issue
NSPanel.prototype.__refreshToolbarIcon = function()
{
if(this.__toolBarDivs)
{
for(var key in this.__toolBarDivs)
{
var div = this.__toolBarDivs[key];
if(div && div.children.length > 0 && div.children[0].nodeName == "svg" && div.children[0].childNodes.length > 0 && div.children[0].childNodes[0].nodeName == "use")
{
var use = div.children[0].childNodes[0];
use.setAttribute("xlink:href",use.getAttribute("xlink:href"));
}
}
}
};
NSPanel.prototype.__setToolBarButton = function(toolbarKey,divButton)
{
var isIconFound = false;
if(!divButton)
{
divButton = this.__toolBarDivs[toolbarKey];
}
if(divButton && this.__toolBarDetails[toolbarKey])
{
if(this.__toolBarDetails[toolbarKey]["iconHTML"])
{
divButton.innerHTML = this.__toolBarDetails[toolbarKey]["iconHTML"];
for(var count = 0;count < divButton.children.length;count++)
{
divButton.children[count].style.pointerEvents = "none";
}
isIconFound = true;
}
if(this.__toolBarDetails[toolbarKey]["title"])
{
divButton.setAttribute("title",this.__toolBarDetails[toolbarKey]["title"]);
}
}
return isIconFound;
};
NSPanel.prototype.__applyCustomClass = function(element,type)
{
if(element && type && this.__customClass[type])
{
this.util.addStyleClass(element,this.__customClass[type]);
}
};
NSPanel.prototype.__showHideModal = function(show)
{
if(show)
{
this.util.addStyleClass(this.__divModal,"nsPanelModalOpen");
this.util.addStyleClass(this.__baseComponent,"nsPanelOpen");
this.__divModal.style.display = "block";
this.__baseComponent.style.display = "block";
}
else
{
this.util.removeStyleClass(this.__divModal,"nsPanelModalOpen");
this.util.removeStyleClass(this.__baseComponent,"nsPanelOpen");
if(this.__isComponentNull)
{
this.removeComponent();
this.util.removeAllChildren(this.__baseComponent);
if(this.__divModal && this.__divModal.parentNode)
{
this.__divModal.parentNode.removeChild(this.__divModal);
}
this.__saveRestoreBaseComponentDimension(false);
this.__baseComponent.style.display = "none";
this.__parent.appendChild(this.__baseComponent);
}
else
{
if(this.__divModal)
{
this.__divModal.style.display = "none";
}
}
this.util.dispatchEvent(this.getBaseElement(),NSPanel.CLOSED,this.__setting,{item: this.__setting});
this.util.dispatchEvent(this.__context,NSPanel.CLOSED,this.__setting,{item: this.__setting});
}
};
/******************************Start of Expansion Collapse Function *************************************/
NSPanel.prototype.__initializeExpCol = function()
{
if(this.__body && !this.__isCollapsingExpanding && !this.__disableCollapse)
{
var objBrowser = this.util.getBrowser();
//for some weird reason browser other than Chrome moves on click and know how to fix it
if(objBrowser && objBrowser.code !== "chrome")
{
this.__nsDragResizeElements.stopMoveOnClick();
}
this.__isCollapsingExpanding = true;
var isCollapsed = this.util.hasStyleClass(this.__baseComponent,"nsPanelCollapsed");
if(isCollapsed)
{
// expanding
this.disableDrag(true);
this.disableResize(true);
}
else
{
// collapsing
this.disableDrag(false);
this.disableResize(false);
}
this.__animateExpCol(isCollapsed);
}
};
NSPanel.prototype.__animateExpCol = function(isExpanding)
{
var eventType = isExpanding ? NSPanel.EXPANSION_STARTING:NSPanel.COLLAPSE_STARTING;
this.util.dispatchEvent(this.getBaseElement(),eventType,null,null);
this.__body.style.display = "block";
var contentHeight = this.__body.offsetHeight;
if (isExpanding)
{
this.__body.style.height = "0px";
contentHeight = this.__lastBodyHeight;
}
else
{
this.__lastBodyHeight = this.__body.offsetHeight;
}
var stepHeight = contentHeight / this.__DEFAULT_ANIMATION_STEPS;
var direction = (isExpanding ? 1 : -1);
var self = this;
setTimeout(function(){self.__animateExpColStep.bind(self)(1,stepHeight,direction);}, this.__DEFAULT_ANIMATION_DELAY);
};
NSPanel.prototype.__animateExpColStep = function(iteration, stepHeight, direction)
{
if (iteration < this.__DEFAULT_ANIMATION_STEPS)
{
this.__body.style.height = Math.round(((direction > 0) ? iteration : 10 - iteration) * stepHeight) +"px";
iteration++;
var self = this;
setTimeout(function(){self.__animateExpColStep.bind(self)(iteration,stepHeight,direction);}, this.__DEFAULT_ANIMATION_DELAY);
}
else
{
var eventType = "";
if(direction < 0)
{
this.util.changeStyleClass(this.__baseComponent,"nsPanelExpanded","nsPanelCollapsed");
this.__body.style.display = "none";
this.__baseComponent.style.height = this.__header.offsetHeight + "px";
eventType = NSPanel.COLLAPSE_END;
if(this.__divGhost)
{
this.util.changeStyleClass(this.__divGhost,"nsPanelExpanded","nsPanelCollapsed");
}
}
else
{
this.util.changeStyleClass(this.__baseComponent,"nsPanelCollapsed","nsPanelExpanded");
this.__body.style.display = "";
this.__baseComponent.style.height = (this.__lastHeight) ? this.__lastHeight : (this.__lastBodyHeight + this.__header.offsetHeight + "px");
this.__lastBodyHeight = 0;
eventType = NSPanel.EXPANSION_END;
if(this.__divGhost)
{
this.util.changeStyleClass(this.__divGhost,"nsPanelCollapsed","nsPanelExpanded");
}
}
if(this.__divGhost)
{
var divGhostBody = this.__divGhost.querySelector(".nsPanelBody");
divGhostBody.style.display = this.__body.style.display;
this.__divGhost.style.height = this.__baseComponent.style.height;
}
this.__body.style.height = "";
this.__handleExpColIcon(direction < 0);
this.__isCollapsingExpanding = false;
this.util.dispatchEvent(this.getBaseElement(),eventType,null,null);
}
};
NSPanel.prototype.__handleExpColIcon = function(isCollapsed)
{
var svgID = "";
var toolBarKey = "";
if(isCollapsed)
{
toolBarKey = "expand";
svgID = new NSSvgShapes().__EXPAND_ICON_ID;
}
else
{
toolBarKey = "collapse";
svgID = new NSSvgShapes().__COLLAPSE_ICON_ID;
}
if(!this.__setToolBarButton(toolBarKey))
{
var objSVG = new NSSvg();
var useID = this.getID() + "ExpCol" + "use";
objSVG.changeUseHref(useID,"#" + svgID);
}
this.__isCollapsed = isCollapsed;
};
/******************************End of Expansion Collapse Function *************************************/
/******************************Start of Minimize Maximize Function *************************************/
NSPanel.prototype.__initializeMinMax = function()
{
if(this.__body && !this.__disableMinMax)
{
var fixedContainer = this.__getMinFixedContainer();
var eventType = "";
if(this.__isMinimized)
{
//maximize
this.util.dispatchEvent(this.getBaseElement(),NSPanel.MAXIMIZE_STARTING,null,null);
this.disableDrag(false);
this.disableResize(false);
this.disableCollapse(false);
this.disableFullScreen(false);
this.util.removeStyleClass(this.__baseComponent,"nsPanelMinimized");
this.util.removeStyleClass(this.__baseComponent,"nsPanelMinimized" + this.__minimizedDirection);
fixedContainer.removeChild(this.__baseComponent);
if(this.__minimizeAddRemoveElementCallback)
{
this.__minimizeAddRemoveElementCallback(this.__baseComponent,this.__baseComponentParent,true);
}
else
{
this.__baseComponentParent.appendChild(this.__baseComponent);
}
this.__body.style.display = "";
this.__baseComponent.style.height = (this.__lastHeight) ? this.__lastHeight : (this.__lastBodyHeight + this.__header.offsetHeight + "px");
this.__lastBodyHeight = 0;
eventType = NSPanel.MAXIMIZE_END;
}
else
{
//minimize
this.util.dispatchEvent(this.getBaseElement(),NSPanel.MINIMIZE_STARTING,null,null);
this.disableDrag(true);
this.disableResize(true);
this.disableCollapse(true);
this.disableFullScreen(true);
this.__lastBodyHeight = this.__body.offsetHeight;
this.util.addStyleClass(this.__baseComponent,"nsPanelMinimized");
this.util.addStyleClass(this.__baseComponent,"nsPanelMinimized" + this.__minimizedDirection);
this.__baseComponentParent = this.__baseComponent.parentNode;
if(this.__minimizeAddRemoveElementCallback)
{
this.__minimizeAddRemoveElementCallback(this.__baseComponent,this.__baseComponentParent,false);
}
else
{
this.__baseComponentParent.removeChild(this.__baseComponent);
}
fixedContainer.appendChild(this.__baseComponent);
this.__body.style.display = "none";
this.__baseComponent.style.height = this.__header.offsetHeight + "px";
this.__body.style.height = "";
eventType = NSPanel.MINIMIZE_END;
}
this.__handleMinMaxIcon(!this.__isMinimized);
this.__refreshToolbarIcon();
this.__isMinimized = !this.__isMinimized;
this.util.dispatchEvent(this.getBaseElement(),eventType,null,null);
}
};
NSPanel.prototype.__handleMinMaxIcon = function(isMinimized)
{
var svgID = "";
var toolBarKey = "";
if(isMinimized)
{
toolBarKey = "maximize";
svgID = new NSSvgShapes().__MAXIMIZE_ICON_ID;
}
else
{
toolBarKey = "minimize";
svgID = new NSSvgShapes().__MINIMIZE_ICON_ID;
}
if(!this.__setToolBarButton(toolBarKey))
{
var objSVG = new NSSvg();
var useID = this.getID() + "MinMax" + "use";
objSVG.changeUseHref(useID,"#" + svgID);
}
};
NSPanel.prototype.__getMinFixedContainer = function()
{
if(!this.__divMinFixedContainer)
{
this.__divMinFixedContainer = document.getElementById("nsPanelMinimizeContainer");
if(!this.__divMinFixedContainer)
{
this.__divMinFixedContainer = this.util.createDiv("nsPanelMinimizeContainer","nsPanelMinimizeContainer");
document.body.appendChild(this.__divMinFixedContainer);
}
}
return this.__divMinFixedContainer;
};
/******************************End of Minimize Maximize Function *************************************/
/******************************Start of FullScreen Function *************************************/
NSPanel.prototype.__initializeFullScreen = function()
{
if(this.__body && !this.__disableFullScreen)
{
var self = this;
var getValue = function(element,property)
{
var styleProp = self.util.getStyleValue(element,property);
if(styleProp == "auto")
{
var rect = element.getBoundingClientRect();
styleProp = rect[property];
}
else
{
styleProp = parseInt(styleProp.substring(0,styleProp.length - 2));
}
return styleProp;
};
var windowHeight = function()
{
var docElemProp = this.__context.document.documentElement.clientHeight;
var body = this.__context.document.body;
return this.__context.document.compatMode === "CSS1Compat" && docElemProp || body && body.clientHeight || docElemProp;
};
var eventType = "";
if(this.__isFullScreen)
{
//restore
this.util.dispatchEvent(this.getBaseElement(),NSPanel.RESTORE_STARTING,null,null);
this.disableDrag(false);
this.disableResize(false);
this.disableCollapse(false);
this.disableMinMax(false);
this.util.removeStyleClass(this.__baseComponent,"nsPanelFullScreen");
this.__baseComponent.setAttribute("style",this.__origFullScreenDimension.baseComponentStyle);
this.__origFullScreenDimension.baseComponentStyle = null;
this.__origFullScreenDimension.baseComponentRect = null;
eventType = NSPanel.RESTORE_END;
}
else
{
//fullscreen
this.util.dispatchEvent(this.getBaseElement(),NSPanel.FULLSCREEN_STARTING,null,null);
this.disableDrag(true);
this.disableResize(true);
this.disableCollapse(true);
this.disableMinMax(true);
this.util.addStyleClass(this.__baseComponent,"nsPanelFullScreen");
var rect = this.__baseComponent.getBoundingClientRect();
this.__origFullScreenDimension.baseComponentRect = rect;
this.__origFullScreenDimension.baseComponentStyle = this.__baseComponent.getAttribute("style");
var zIndex = this.__getZIndex();
if(!isNaN(zIndex) && zIndex > 0)
{
this.__baseComponent.style.zIndex = zIndex;
}
/*var offsetWidthDialog = this.util.getOuterWidth(this.__baseComponent) - getValue(this.__baseComponent,"width");
this.__baseComponent.style.width = (window.outerWidth - offsetWidthDialog) + "px";
this.__baseComponent.style.height = windowHeight() + "px";
this.__baseComponent.style.top = 0;
this.__baseComponent.style.left = 0;
this.__baseComponent.style.zIndex = zIndex;*/
eventType = NSPanel.FULLSCREEN_END;
}
this.__handleFullScreenIcon(!this.__isFullScreen);
this.__isFullScreen = !this.__isFullScreen;
if(this.__bodyCompInstance)
{
this.__callEditorFunction(this.__bodyCompInstance,"fullScreenChanged",this.__isFullScreen);
}
this.util.dispatchEvent(this.getBaseElement(),eventType,null,null);
}
};
NSPanel.prototype.__handleFullScreenIcon = function(isFullScreen)
{
var svgID = "";
var toolBarKey = "";
if(isFullScreen)
{
toolBarKey = "restore";
svgID = new NSSvgShapes().__RESTORE_ICON_ID;
}
else
{
toolBarKey = "fullScreen";
svgID = new NSSvgShapes().__FULLSCREEN_ICON_ID;
}
if(!this.__setToolBarButton(toolBarKey))
{
var objSVG = new NSSvg();
var useID = this.getID() + "FullScreen" + "use";
objSVG.changeUseHref(useID,"#" + svgID);
}
};
NSPanel.prototype.__callEditorFunction = function(editor,functionRef,param,defaultValue)
{
if(editor && editor[functionRef] && this.util.isFunction(editor[functionRef]))
{
var retValue = null;
if(param && this.util.isArray(param) && param.length > 0)
{
retValue = editor[functionRef].apply(null,param);
}
else
{
retValue = editor[functionRef](param);
}
if(!this.util.isUndefinedOrNull(retValue))
{
return retValue;
}
}
return defaultValue;
};
NSPanel.prototype.__getAttributeKey = function(key)
{
return "__" + "ns_panel_field" + "_" + key;
};
NSPanel.prototype.__getZIndex = function()
{
/*var zIndex = parseInt(this.util.getZIndex(this.__baseComponent));
var arrElement = document.querySelectorAll(".nsPanel:not(.nsDragGhost)");
for(var count = 0;count < arrElement.length;count++)
{
var eleZIndex = parseInt(this.util.getZIndex(arrElement[count]));
if (eleZIndex >= zIndex && arrElement[count] != this.__baseComponent)
{
zIndex = eleZIndex + 1;
}
}
return zIndex;*/
var maxZIndex = this.util.getMaxZIndex();
return maxZIndex;
};
/******************************End of FullScreen Function *************************************/
NSPanel.__ELEMENT_FOCUS_OUT = "elementFocusOut";
NSPanel.DRAG_STARTING = "dragStaring";
NSPanel.DRAGGING = "dragging";
NSPanel.DRAG_END = "dragEnd";
NSPanel.RESIZE_STARTING = "resizeStaring";
NSPanel.RESIZING = "resizing";
NSPanel.RESIZE_END = "resizeEnd";
NSPanel.COLLAPSE_STARTING = "collapseStarting";
NSPanel.COLLAPSE_END = "collapseEnd";
NSPanel.EXPANSION_STARTING = "expansionStarting";
NSPanel.EXPANSION_END = "expansionEnd";
NSPanel.MINIMIZE_STARTING = "minimizeStarting";
NSPanel.MINIMIZE_END = "minimizeEnd";
NSPanel.MAXIMIZE_STARTING = "maximizeStarting";
NSPanel.MAXIMIZE_END = "maximizeEnd";
NSPanel.FULLSCREEN_STARTING = "fullScreenStarting";
NSPanel.FULLSCREEN_END = "fullScreenEnd";
NSPanel.RESTORE_STARTING = "restoreStarting";
NSPanel.RESTORE_END = "restoreEnd";
NSPanel.CLOSED = "closed";
return NSPanel;
})();
nsModuleExport(this,"NSPanel",NSPanel);