nscomponentsreact
Version:
React Wrapper Components for NSComponents
721 lines (685 loc) • 24.5 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;
}
"use strict";
var NSDividerBox = (function()
{
function NSDividerBox(component,setting)
{
this.DIRECTION_VERTICAL = "vertical";
this.DIRECTION_HORIZONTAL = "horizontal";
this.DIVIDER_DIMENSION = 6;
//should be 5 to avoid overlapping of two dividers but for collapsible it is 0
this.DEFAULT_MIN_DIMENSION = 0;
this.__setting = setting;
this.__id = null;
this.__component = component;
this.__direction = null;
this.__ghostDivider = null;
this.__beforeOffset = 0;
this.__afterOffset = 0;
this.__enableAutoComponentResize = true;
this.__arrDivider = [];
this.__measuringProperty = null;
this.__isResizing = false;
this.__isCollapsing = false;
this.__isInternalCall = false;
this.__maxZIndex = 0;
this.__currentDivider = null;
this.__currentDividerObject = null;
this.__offsetDimension = 0;
this.__collapsingElement = null;
this.__isFirstTimeRender = true;
this.__objOrignalMeasurement = {};
this.__holdTimeoutInterval = -1;
this.__documentMouseMoveRef = null;
this.__documentMouseUpRef = null;
this.base.__setBaseComponent.call(this,component);
};
nsExtendPrototype(NSContainerBase,NSDividerBox);
NSDividerBox.prototype.constructor = NSDividerBox;
NSDividerBox.prototype.initializeComponent = function()
{
this.base.initializeComponent.call(this);
this.__setSetting();
};
NSDividerBox.prototype.setComponentProperties = function()
{
this.base.setComponentProperties.call(this);
this.__maxZIndex = this.util.getMaxZIndex();
};
NSDividerBox.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty)
{
var attributeName = attrName.toLowerCase();
this.base.propertyChange.call(this,attrName, oldVal, newVal, setProperty);
};
NSDividerBox.prototype.resizeComponent = function()
{
this.__clearHoldTime();
if(this.__component && !this.__isCollapsing && !this.__isResizing)
{
this.__isInternalCall = true;
var self = this;
this.__holdTimeoutInterval = setTimeout(function () {
self.__createComponents.bind(self)();
},200);
}
};
NSDividerBox.prototype.componentResized = function(event)
{
if(this.__enableAutoComponentResize)
{
this.resizeComponent();
}
//console.log("In DividerBox componentResized with direction " + this.__direction);
this.base.componentResized.call(this,event);
};
NSDividerBox.prototype.hasAttribute = function(attributeName)
{
return (this.__setting.hasOwnProperty(attributeName) || this.__setting.hasOwnProperty(attributeName.toLowerCase()));
};
NSDividerBox.prototype.getAttribute = function(attributeName)
{
var value = this.__setting[attributeName];
if(this.util.isUndefined(value))
{
value = this.__setting[attributeName.toLowerCase()];
}
return value;
};
NSDividerBox.prototype.removeComponent = function()
{
if(this.__documentMouseMoveRef)
{
this.util.removeEvent(document,"mousemove",this.__documentMouseMoveRef);
this.__documentMouseMoveRef = null;
}
if(this.__documentMouseUpRef)
{
this.util.removeEvent(document,"mouseup",this.__documentMouseUpRef);
this.__documentMouseUpRef = null;
}
this.base.removeComponent();
};
NSDividerBox.prototype.__setSetting = function ()
{
if(this.__setting)
{
if(this.hasAttribute("direction"))
{
this.__direction = this.getAttribute("direction");
}
if(this.hasAttribute("beforeOffset"))
{
this.__beforeOffset = parseFloat(this.getAttribute("beforeOffset"));
}
if(this.hasAttribute("afterOffset"))
{
this.__afterOffset = parseFloat(this.getAttribute("afterOffset"));
}
if(this.hasAttribute("labelClass"))
{
this.util.addStyleClass(this.label,this.getAttribute("labelClass"));
}
if(this.hasAttribute("enableAutoComponentResize"))
{
this.__enableAutoComponentResize = Boolean.parse(this.getAttribute("enableAutoComponentResize"));
}
if(this.__component)
{
this.__createComponents();
}
}
};
NSDividerBox.prototype.__createComponents = function()
{
if(this.__direction == this.DIRECTION_HORIZONTAL)
{
this.__setVariables(true);
this.__setHorizontalComponents();
}
else
{
this.__setVariables(false);
this.__setVerticalComponents();
}
};
NSDividerBox.prototype.__setVariables = function(isHorizontal)
{
var arrDivider = this.__component.querySelectorAll(".nsDivider");
if(arrDivider && arrDivider.length > 0)
{
var element = null;
for(var count = arrDivider.length - 1;count >= 0;count--)
{
element = arrDivider[count];
if(element.parentNode === this.__component)
{
this.__component.removeChild(element);
}
}
}
var property = "";
if(isHorizontal)
{
this.__measuringProperty = "top";
property = "height";
}
else
{
this.__measuringProperty = "left";
property = "width";
}
var offset = this.util.getOffSet(this.__component);
this.__offsetDimension = offset[this.__measuringProperty];
//console.log(this.__direction + " offset is " + this.__offsetDimension);
var children = this.__component.children;
var child = null;
if(this.__isFirstTimeRender)
{
this.__isFirstTimeRender = false;
for (var count = 0; count < children.length; count++)
{
child = children[count];
if(!this.util.hasStyleClass(child,"nsResizeDetector"))
{
if(!child.getAttribute("id"))
{
child.setAttribute("id","compNS" + this.util.getUniqueId())
}
//console.log(child.getAttribute("id") + " " + property + " is " + this.util.getStyleValue(child,property,true));
this.__objOrignalMeasurement[child.getAttribute("id")] = this.util.getStyleValue(child,property,true);
}
}
}
else
{
for (var count = 0; count < children.length; count++)
{
child = children[count];
if(!this.util.hasStyleClass(child,"nsResizeDetector"))
{
child.style[property] = this.__objOrignalMeasurement[child.getAttribute("id")];
}
}
}
};
NSDividerBox.prototype.__setHorizontalComponents = function()
{
this.__setComponent("height","minHeight","nsHorizontal");
};
NSDividerBox.prototype.__setVerticalComponents = function()
{
this.__setComponent("width","minWidth","nsVertical");
};
//dimensionProperty will be height,width
//minDimensionProperty will be minHeight,minWidth
//cssClassPrefix will be "nsHorizontal" and "nsVertical"
NSDividerBox.prototype.__setComponent = function(dimensionProperty,minDimensionProperty,cssClassPrefix)
{
this.util.addStyleClass(this.__component,cssClassPrefix + "ResizerContainer");
var children = this.__component.children;
var arrChildElement = [];
var childCount = -1;
var child = null;
var dimension = null;
var item = null;
for (var count = 0; count < children.length; count++)
{
child = children[count];
if(!this.util.hasStyleClass(child,"nsResizeDetector"))
{
dimension = child.getBoundingClientRect();
if((dimension.width === 0 || dimension.height === 0) && (!this.util.isElementVisible(child)))
{
var clonedElement = child.cloneNode(true);
document.body.appendChild(clonedElement);
dimension = clonedElement.getBoundingClientRect();
document.body.removeChild(clonedElement);
}
item = {child:child,dimension:dimension};
arrChildElement[++childCount] = item;
}
}
var totalDimensionAllocated = 0;
var expectedChildDimension = 0;
var childDimension = 0;
var offsetDimension = 0;
var minDimension = 0;
for (var count = 0; count < arrChildElement.length; count++)
{
item = arrChildElement[count];
child = item.child;
expectedChildDimension = item.dimension[dimensionProperty];
child.setAttribute("ns-collapsible",true);
child.setAttribute("ns-collapsed",false);
this.util.addStyleClass(child,"nsResizerChild");
this.util.addStyleClass(child,cssClassPrefix + "ResizerChild");
//substracting the dimension of the divider from its calculated dimension
if(count < arrChildElement.length - 1)
{
expectedChildDimension = expectedChildDimension - this.DIVIDER_DIMENSION;
}
childDimension = expectedChildDimension;
child.style[this.__measuringProperty] = totalDimensionAllocated + "px";
child.style[dimensionProperty] = childDimension + "px";
minDimension = this.DEFAULT_MIN_DIMENSION;
offsetDimension = 0;
if(child.style[minDimensionProperty])
{
minDimension = this.util.getDimensionAsNumber(child,child.style[minDimensionProperty]);
}
offsetDimension = totalDimensionAllocated;
if(count === 0)
{
offsetDimension -= this.__beforeOffset;
}
var objDivider = {beforeElement:child, afterElement:null,
beforeElementMinDimension:minDimension, afterElementMinDimension:0,
beforeElementTopDimension:offsetDimension,afterElementTopDimension:0,
beforeElementNextSiblingTop:offsetDimension,afterElementNextSiblingTop:0,
orignalBeforeElementDimension:0,orignalAfterElementDimension:0,
fromDimension:offsetDimension + minDimension,toDimension:0,
lastPositiontop:-1,lastPositionleft:-1,collapseElementString:"before"};
totalDimensionAllocated += childDimension;
objDivider.orignalBeforeElementDimension = totalDimensionAllocated;
objDivider.beforeElementNextSiblingTop = totalDimensionAllocated;
if(count != 0)
{
//setting the next element for previous Divider for global Divider Array
var prevDividerID = this.__getDividerID(count - 1);
var objPrevDivider = this.__arrDivider[prevDividerID];
objPrevDivider.afterElement = child;
if(count === arrChildElement.length - 1 && count > 1)
{
objPrevDivider.collapseElementString = "after";
totalDimensionAllocated += this.__afterOffset;
}
objPrevDivider.afterElementMinDimension = minDimension;
objPrevDivider.orignalAfterElementDimension = totalDimensionAllocated;
objPrevDivider.afterElementTopDimension = offsetDimension;
objPrevDivider.toDimension = totalDimensionAllocated;
objPrevDivider.afterElementNextSiblingTop = totalDimensionAllocated;
this.__arrDivider[prevDividerID] = objPrevDivider;
}
if(count < arrChildElement.length - 1)
{
var divider = this.__getDivider(count,arrChildElement.length - 2,cssClassPrefix);
var dividerDimension = this.DIVIDER_DIMENSION;
divider.style[dimensionProperty] = dividerDimension + "px";
divider.style[this.__measuringProperty] = totalDimensionAllocated + "px";
totalDimensionAllocated += dividerDimension;
this.util.addEvent(divider,"mousedown",this.__dividerMouseDownHandler.bind(this));
this.__component.insertBefore(divider,objDivider.afterElement);
//setting the global Divider Array
this.__arrDivider[divider.id] = objDivider;
}
}
};
NSDividerBox.prototype.__dividerMouseDownHandler = function(event)
{
event = this.util.getEvent(event);
var divider = this.util.getTarget(event);
if(divider)
{
if(!this.util.hasStyleClass(divider,"nsResizerLines"))
{
if(!this.util.hasStyleClass(divider,"nsDivider"))
{
divider = this.util.findParentBySelector(divider,".nsDivider");
}
if(divider)
{
this.__createGhost(divider,event);
var objDivider = this.__arrDivider[divider.id];
objDivider.beforeElement.setAttribute("ns-collapsed",false);
objDivider.lastPositiontop = -1;
objDivider.lastPositionleft = -1;
this.__currentDivider = divider;
this.__currentDividerObject = objDivider;
this.__documentMouseMoveRef = this.__documentMouseMoveHandler.bind(this);
this.__documentMouseUpRef = this.__documentMouseUpHandler.bind(this);
this.util.addEvent(document,"mousemove",this.__documentMouseMoveRef);
this.util.addEvent(document,"mouseup",this.__documentMouseUpRef);
this.__isResizing = true;
this.__isInternalCall = true;
this.util.preventDefault(event);
}
}
}
};
NSDividerBox.prototype.__documentMouseMoveHandler = function (event)
{
if(this.__isResizing)
{
event = this.util.getEvent(event);
var posEvent = this.util.getEventPosition(event);
this.__ghostDivider.style[this.__measuringProperty] = posEvent[this.__measuringProperty] + "px";
}
};
NSDividerBox.prototype.__documentMouseUpHandler = function (event)
{
if(this.__documentMouseMoveRef)
{
this.util.removeEvent(document,"mousemove",this.__documentMouseMoveRef);
this.__documentMouseMoveRef = null;
}
if(this.__documentMouseUpRef)
{
this.util.removeEvent(document,"mouseup",this.__documentMouseUpRef);
this.__documentMouseUpRef = null;
}
if(this.__isResizing)
{
this.__performResize(event);
if(this.__ghostDivider)
{
this.__ghostDivider.parentNode.removeChild(this.__ghostDivider);
this.__ghostDivider = null;
}
this.__isResizing = false;
}
};
NSDividerBox.prototype.__collapserClickHandler = function(event)
{
event = this.util.getEvent(event);
var target = this.util.getTarget(event);
target = this.util.findParentBySelector(target,".nsDivider");
if(target)
{
var objDivider = this.__arrDivider[target.id];
if(objDivider)
{
var elementProperty = objDivider.collapseElementString + "Element";
var dimensionProperty = ((objDivider.collapseElementString === "before") ? "fromDimension" : "toDimension");
if(Boolean.parse(objDivider[elementProperty].getAttribute("ns-collapsible")))
{
this.__currentDivider = target;
this.__currentDividerObject = objDivider;
var element = objDivider[elementProperty];
this.__collapsingElement = element;
this.util.addStyleClass(target,"nsResizerAnimation");
objDivider.beforeElement ? this.util.addStyleClass(objDivider.beforeElement,"nsResizerAnimation"):null;
objDivider.afterElement ? this.util.addStyleClass(objDivider.afterElement,"nsResizerAnimation") : null;
new this.util.transition(target,this.__animationHandler.bind(this));
new this.util.transition(objDivider.beforeElement,this.__animationHandler.bind(this));
new this.util.transition(objDivider.afterElement,this.__animationHandler.bind(this));
var isCollapsed = Boolean.parse(element.getAttribute("ns-collapsed"));
this.__isCollapsing = true;
if(isCollapsed)
{
element.style.visibility="inherit";
var lastDimension = objDivider["lastPosition" + this.__measuringProperty];
this.__performResize(event,lastDimension);
objDivider.lastPositiontop = -1;
objDivider.lastPositionleft = -1;
}
else
{
var position = this.util.getPosition(target);
objDivider.lastPositiontop = position.top;
objDivider.lastPositionleft = position.left;
console.log(objDivider[dimensionProperty]);
this.__performResize(event,objDivider[dimensionProperty]);
}
element.setAttribute("ns-collapsed",!isCollapsed);
}
}
this.util.preventDefault(event);
event.stopImmediatePropagation();
}
};
NSDividerBox.prototype.__animationHandler = function(event)
{
var target = this.util.getTarget(event);
if(target)
{
this.util.removeStyleClass(target,"nsResizerAnimation");
}
if(this.__collapsingElement && Boolean.parse(this.__collapsingElement.getAttribute("ns-collapsed")))
{
this.__collapsingElement.style.visibility="hidden";
}
this.__isCollapsing = false;
this.__isVisible = !this.__isVisible;
};
NSDividerBox.prototype.__performResize = function(event,intendedPosition)
{
var objDivider = this.__currentDividerObject;
if(!this.__isCollapsing)
{
objDivider.beforeElement.style.visibility="inherit";
objDivider.afterElement.style.visibility="inherit";
}
if(this.__direction == this.DIRECTION_VERTICAL)
{
var isRelative = true;
if(!this.util.isNumber(intendedPosition))
{
intendedPosition = event.pageX;
isRelative = false;
}
var xPos = this.__getValidVerticalPosition(intendedPosition,objDivider,isRelative);
if(xPos > -1)
{
var expectedAfterElementWidth = objDivider.afterElementNextSiblingTop - xPos;
this.__currentDivider.style.left = xPos + "px";
objDivider.beforeElement.style.width = (xPos - objDivider.beforeElementTopDimension) + "px";
objDivider.afterElement.style.width = expectedAfterElementWidth + "px";
objDivider.afterElement.style.left = (xPos + this.DIVIDER_DIMENSION) + "px";
console.log(this.__direction + "," + intendedPosition + "," + xPos + "," + this.__offsetDimension + "," + this.__currentDivider.style.left);
//console.log(intendedPosition + "," + objDivider.afterElementNextSiblingTop);
}
}
else if(this.__direction == this.DIRECTION_HORIZONTAL)
{
var isRelative = true;
if(!this.util.isNumber(intendedPosition))
{
intendedPosition = event.pageY;
isRelative = false;
}
var yPos = this.__getValidHorizontalPosition(intendedPosition,objDivider,isRelative);
if(yPos > -1)
{
var expectedAfterElementHeight = objDivider.afterElementNextSiblingTop - yPos;
this.__currentDivider.style.top = yPos + "px";
objDivider.beforeElement.style.height = (yPos - objDivider.beforeElementTopDimension) + "px";
objDivider.afterElement.style.height = expectedAfterElementHeight + "px";
objDivider.afterElement.style.top = (yPos + this.DIVIDER_DIMENSION) + "px";
}
}
this.__recalculateDividerValues();
this.__currentDivider = null;
this.__currentDividerObject = null;
};
NSDividerBox.prototype.__getValidVerticalPosition = function(proposedXPos,objDivider,isRelative)
{
var xPos = -1;
if(proposedXPos > -1 && objDivider)
{
xPos = proposedXPos;
if(!isRelative)
{
xPos -= this.__offsetDimension;
}
if(xPos < objDivider.fromDimension)
{
xPos = objDivider.fromDimension;
}
else if(xPos > objDivider.toDimension)
{
xPos = objDivider.toDimension;
}
var expectedAfterElementWidth = objDivider.afterElementNextSiblingTop - xPos;
//mouse movement is LEFT
if(xPos < (objDivider.beforeElementTopDimension + objDivider.beforeElementMinDimension))
{
xPos = -1;
}
//mouse movement is RIGHT
else if(expectedAfterElementWidth < objDivider.afterElementMinDimension)
{
xPos = -1;
}
}
return xPos;
};
NSDividerBox.prototype.__getValidHorizontalPosition = function(proposedYPos,objDivider,isRelative)
{
var yPos = -1;
if(proposedYPos > -1 && objDivider)
{
yPos = proposedYPos;
if(!isRelative)
{
yPos -= this.__offsetDimension;
}
if(yPos < objDivider.fromDimension)
{
yPos = objDivider.fromDimension;
}
else if(yPos > objDivider.toDimension)
{
yPos = objDivider.toDimension;
}
var expectedAfterElementHeight = objDivider.afterElementNextSiblingTop - yPos;
//mouse movement is UP ||
if(yPos < (objDivider.beforeElementTopDimension + objDivider.beforeElementMinDimension))
{
yPos = -1;
}
//mouse movement is down
else if(expectedAfterElementHeight < objDivider.afterElementMinDimension)
{
yPos = -1;
}
}
return yPos;
};
NSDividerBox.prototype.__recalculateDividerValues = function()
{
var count = parseInt(this.__currentDivider.getAttribute("ns-index"));
var beforeDividerID = this.__getDividerID(count - 1);
var objPrevDivider = this.__arrDivider[beforeDividerID];
if(objPrevDivider)
{
objPrevDivider.afterElementTopDimension = this.util.getDimensionAsNumber(objPrevDivider.afterElement,objPrevDivider.afterElement.style[this.__measuringProperty]);
var dividerDimension = this.util.getDimensionAsNumber(this.__currentDivider,this.__currentDivider.style[this.__measuringProperty]);
objPrevDivider.toDimension = dividerDimension - objPrevDivider.afterElementMinDimension;
var nextSibling = objPrevDivider.afterElement.nextElementSibling;
if(nextSibling)
{
var nextSiblingDimension = this.util.getDimensionAsNumber(nextSibling,nextSibling.style[this.__measuringProperty]);
//substracting this as sometimes the dimension calculation has some limitations
objPrevDivider.afterElementNextSiblingTop = nextSiblingDimension - this.DIVIDER_DIMENSION;
}
}
var nextDividerID = this.__getDividerID(count + 1);
var objNextDivider = this.__arrDivider[nextDividerID];
if(objNextDivider)
{
objNextDivider.beforeElementTopDimension = this.util.getDimensionAsNumber(objNextDivider.beforeElement,objNextDivider.beforeElement.style[this.__measuringProperty]);
objNextDivider.fromDimension = objNextDivider.beforeElementTopDimension + objNextDivider.beforeElementMinDimension;
var nextSibling = objNextDivider.beforeElement.nextElementSibling;
if(nextSibling)
{
var nextSiblingDimension = this.util.getDimensionAsNumber(nextSibling,nextSibling.style[this.__measuringProperty]);
objNextDivider.beforeElementNextSiblingTop = nextSiblingDimension;
}
}
};
//cssClassPrefix will be "nsHorizontal" and "nsVertical"
NSDividerBox.prototype.__getDivider = function(count,totalChild,cssClassPrefix)
{
var dividerID = this.__getDividerID(count);
var divider = this.util.createDiv(dividerID,"nsDivider");
this.util.addStyleClass(divider,cssClassPrefix + "Resizer");
divider.setAttribute("ns-index",count);
if(count === 0 || count === totalChild)
{
var dividerLines = this.util.createElement("span",null,"nsResizerLines");
this.util.addStyleClass(dividerLines,cssClassPrefix + "ResizerLines");
divider.appendChild(dividerLines);
this.util.addEvent(dividerLines,"click",this.__collapserClickHandler.bind(this));
/*if(this.__maxZIndex > 0)
{
divider.style.zIndex = this.__maxZIndex;
}*/
}
return divider;
};
NSDividerBox.prototype.__createGhost = function(divider,event)
{
this.__ghostDivider = divider.cloneNode(true);
var objDivider = this.__arrDivider[divider.id];
//this.__ghostDivider.setAttribute("style","{position:absolute;}");
var posEvent = this.util.getEventPosition(event);
var offset = this.util.getCumulativeOffset(divider);
this.__ghostDivider.style.top = offset.y + "px";
this.__ghostDivider.style.left = offset.x + "px";
var rectDivider = divider.getBoundingClientRect();
this.__ghostDivider.style.height = rectDivider.height + "px";
this.__ghostDivider.style.width = rectDivider.width + "px";
if(this.__maxZIndex > 0)
{
this.__ghostDivider.style.zIndex = this.__maxZIndex + 1;
}
document.body.appendChild(this.__ghostDivider);
};
NSDividerBox.prototype.__clearHoldTime = function()
{
if(this.__holdTimeoutInterval > -1)
{
clearTimeout(this.__holdTimeoutInterval);
}
this.__holdTimeoutInterval = -1;
};
NSDividerBox.prototype.__getDividerID = function(count)
{
return this.getID() + "#resizer" + count;
};
return NSDividerBox;
})();
nsModuleExport(this,"NSDividerBox",NSDividerBox);