nscomponentsreact
Version:
React Wrapper Components for NSComponents
484 lines (445 loc) • 17 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;
}
"use strict";
var NSConsole = (function()
{
function NSConsole(setting)
{
this.CONSOLE_FUNCTION = ["log","info","debug","warn","error"];
this.util = new NSUtil();
this.__setting = setting;
this.__config = {};
this.__id = null;
this.__divContainer = null;
this.__divHeaderCon = null;
this.__divConsoleBodyCon = null;
this.__height = 215;
this.__headerHeight = 28;
this.__nsTransition = null;
this.__objDefaultFunction = {};
this.__objResize = {};
this.__svgExpandCollpse = "<svg viewBox=\"0 0 40 40\" style=\"transform: rotateZ(0deg);\"><g><path d=\"m31 26.4q0 0.3-0.2 0.5l-1.1 1.2q-0.3 0.2-0.6 0.2t-0.5-0.2l-8.7-8.8-8.8 8.8q-0.2 0.2-0.5 0.2t-0.5-0.2l-1.2-1.2q-0.2-0.2-0.2-0.5t0.2-0.5l10.4-10.4q0.3-0.2 0.6-0.2t0.5 0.2l10.4 10.4q0.2 0.2 0.2 0.5z\"></path></g></svg>"
this.__initialize();
};
NSConsole.prototype.__initialize = function()
{
if(!this.__setting)
{
this.__setting = {};
}
this.__config = {
container: this.__setting.container || document.body,
headerText: this.__setting.headerText || "Console",
enableResize:(this.util.isUndefinedOrNull(this.__setting["enableResize"]) ? true : Boolean.parse(this.__setting["enableResize"])),
overrideConsole:(this.util.isUndefinedOrNull(this.__setting["overrideConsole"]) ? true : Boolean.parse(this.__setting["overrideConsole"])),
isExpanded: Boolean.parse(this.__setting["isExpanded"]),
isEnabled:(this.util.isUndefinedOrNull(this.__setting["isEnabled"]) ? true : Boolean.parse(this.__setting["isEnabled"])),
defaultHeight: (this.util.isUndefinedOrNull(this.__setting["defaultHeight"]) ? 215 : parseInt(this.__setting["defaultHeight"])),
minHeight: (this.util.isUndefinedOrNull(this.__setting["minHeight"]) ? (this.__headerHeight + 20) : parseInt(this.__setting["minHeight"])),
};
this.__height = this.__config.defaultHeight;
if(this.__config.minHeight < this.__headerHeight)
{
this.util.warning("NSConsole","Min Height in setting is less than Header height so defaulting to Header Height + 20.");
this.__config.minHeight = (this.__headerHeight + 20);
}
this.__createElements();
if(this.__config.overrideConsole)
{
for(var count = 0;count < this.CONSOLE_FUNCTION.length;count++)
{
var key = this.CONSOLE_FUNCTION[count];
this.__objDefaultFunction[key] = console[key];
}
this.__setEventToDefault(false);
}
if(!this.__config.isExpanded)
{
this.__height = this.__divContainer.getBoundingClientRect().height;
this.__divContainer.style.height = this.__headerHeight + "px";
this.__divConsoleBodyCon.style.visibility = "hidden";
this.__setExpandCollapseIcon();
this.__setResizerAfterAnimation();
}
if(!this.__config.isEnabled)
{
this.disable();
}
};
NSConsole.prototype.expand = function()
{
if(this.__divContainer && !this.__config.isExpanded)
{
this.__divConsoleBodyCon.style.visibility = "visible";
var cssAnimationHelper = new this.util.nsCSSAnimationHelper();
cssAnimationHelper.addEndEvent(this.__divContainer,this.__animationEndHandler.bind(this));
this.util.addStyleClass(this.__divContainer,"nsConsoleExpanding");
var self = this;
setTimeout(function(){
self.__divContainer.style.height = self.__height + "px";
},0);
}
};
NSConsole.prototype.collapse = function()
{
if(this.__divContainer && this.__config.isExpanded)
{
var cssAnimationHelper = new this.util.nsCSSAnimationHelper();
cssAnimationHelper.addEndEvent(this.__divContainer,this.__animationEndHandler.bind(this));
this.util.addStyleClass(this.__divContainer,"nsConsoleCollapsing");
var self = this;
setTimeout(function(){
self.__height = self.__divContainer.getBoundingClientRect().height;
self.__divContainer.style.height = self.__headerHeight + "px";
},0);
}
};
NSConsole.prototype.enable = function()
{
if(this.__divContainer && !this.__config.isEnabled)
{
this.util.removeStyleClass(this.__divContainer,"nsConsoleDisable");
this.__setEventToDefault(false);
this.__config.isEnabled = true;
}
};
NSConsole.prototype.disable = function()
{
if(this.__divContainer && this.__config.isEnabled)
{
this.util.addStyleClass(this.__divContainer,"nsConsoleDisable");
this.__setEventToDefault(true);
this.__config.isEnabled = false;
}
};
NSConsole.prototype.clear = function()
{
if(this.__divConsoleBodyTextBody)
{
this.__divConsoleBodyTextBody.innerHTML = "";
}
};
NSConsole.prototype.log = function(message)
{
this.__addMessage(message,"Log");
};
NSConsole.prototype.info = function(message)
{
this.__addMessage(message,"Info");
};
NSConsole.prototype.debug = function(message)
{
this.__addMessage(message,"Debug");
};
NSConsole.prototype.warn = function(message)
{
this.__addMessage(message,"Warn");
};
NSConsole.prototype.error = function(message)
{
this.__addMessage(message,"Error");
};
NSConsole.prototype.__createElements = function()
{
if(!this.__divContainer)
{
var id = this.__getID();
this.__divContainer = this.util.createDiv(id + "Container","nsConsoleContainer");
this.__divContainer.style.height = this.__height + "px";
this.__createResizer();
this.__divHeaderCon = this.util.createDiv(id + "Header","nsConsoleHeaderCon");
this.__createHeader();
this.__divContainer.appendChild(this.__divHeaderCon);
this.__divConsoleBodyCon = this.util.createDiv(id + "Body","nsConsoleBodyCon");
//this.__divConsoleBodyCon.style.height = (this.__height - 11) + "px";
this.__createBody();
this.__divContainer.appendChild(this.__divConsoleBodyCon);
this.__config.container.appendChild(this.__divContainer);
this.__nsTransition = new this.util.transition(this.__divContainer,this.__animationEndHandler.bind(this));
}
};
NSConsole.prototype.__createHeader = function()
{
var id = this.__getID();
this.__divHeaderTextCon = this.util.createDiv(id + "HeaderTextCon","nsConsoleHeaderTextCon");
this.__divHeaderTextParent = this.util.createDiv(id + "HeaderTextParent","nsConsoleHeaderTextParent");
this.__divHeaderText1 = this.util.createDiv(id + "HeaderText1","nsConsoleHeaderText nsConsoleHeaderText1");
this.__divHeaderText1.appendChild(document.createTextNode(this.__config.headerText));
this.__divHeaderCon.style.height = (this.__headerHeight - 6) + "px";
//this.__divHeaderCon.style.top = (-1 * this.__headerHeight) + "px";
this.util.addEvent(this.__divHeaderCon,"click",this.__expandCollapseClickHandler.bind(this));
this.__divHeaderTextParent.appendChild(this.__divHeaderText1);
this.__divHeaderTextCon.appendChild(this.__divHeaderTextParent);
this.__divHeaderFilterCon = this.util.createDiv(id + "HeaderFilterCon","nsConsoleHeaderFilterCon");
this.__divHeaderTextCon.appendChild(this.__divHeaderFilterCon);
this.__divHeaderCon.appendChild(this.__divHeaderTextCon);
this.__divHeaderExpandCollapseCon = this.util.createDiv(id + "HeaderExpandCollapseCon","nsConsoleHeaderExpandCollapseCon");
this.__divHeaderExpandCollapseCon.innerHTML = this.__svgExpandCollpse;
this.__iconExpandCollapse = this.__divHeaderExpandCollapseCon.firstChild;
this.util.addStyleClass(this.__iconExpandCollapse,"nsConsoleHeaderIcon nsConsoleHeaderExpandCollapseIcon");
this.util.addEvent(this.__iconExpandCollapse,"click",this.__expandCollapseClickHandler.bind(this));
this.__divHeaderCon.appendChild(this.__divHeaderExpandCollapseCon);
};
NSConsole.prototype.__createBody = function()
{
var id = this.__getID();
this.__divConsoleBodyParent = this.util.createDiv(id + "ConsoleBodyParent","nsConsoleBodyParent");
this.__divConsoleBodyTextCon = this.util.createDiv(id + "ConsoleBodyTextCon","nsConsoleBodyTextCon");
this.__divConsoleBodyTextBody = this.util.createDiv(id + "ConsoleBodyTextBody","nsConsoleBodyTextBody");
this.__divConsoleBodyTextCon.appendChild(this.__divConsoleBodyTextBody);
this.__divConsoleBodyParent.appendChild(this.__divConsoleBodyTextCon);
this.__divConsoleBodyCon.appendChild(this.__divConsoleBodyParent);
};
NSConsole.prototype.__createMessageComp = function(type,inputMessage,count)
{
type = this.util.toCamelCase(type);
var divConsoleBodyTextBody = this.util.createDiv(null,"nsConsoleBodyMsg" + type);
//if(count)
//{
var divConsoleBodyLogCount = this.util.createDiv(null,"nsConsoleBodyMsgCount");
divConsoleBodyLogCount.innerHTML = count;
divConsoleBodyTextBody.appendChild(divConsoleBodyLogCount);
//}
var divConsoleBodyLogTextCon = this.util.createDiv(null,"nsConsoleBodyMsgTextCon");
var divConsoleBodyLogTextDetail = this.util.createDiv(null,"nsConsoleBodyMsgTextText");
var spanText = this.util.createElement("span",null,"nsConsoleBodyMsgTextSpan");
spanText.innerHTML = inputMessage;
divConsoleBodyLogTextDetail.appendChild(spanText);
divConsoleBodyLogTextCon.appendChild(divConsoleBodyLogTextDetail);
divConsoleBodyTextBody.appendChild(divConsoleBodyLogTextCon);
this.__divConsoleBodyTextBody.appendChild(divConsoleBodyTextBody);
return divConsoleBodyTextBody;
};
NSConsole.prototype.__expandCollapseClickHandler = function(event)
{
event = this.util.getEvent(event);
event.stopPropagation();
if(this.__config.isExpanded)
{
this.collapse();
}
else
{
this.expand();
}
};
NSConsole.prototype.__addMessage = function(inputMessage,type)
{
if(this.__config.isEnabled && inputMessage)
{
//this.__setBodyToDefault();
//this.util.addStyleClass(this.__divContainer,cssClass);
var arrInputMessage = null;
if(this.util.isArray(inputMessage))
{
arrInputMessage = inputMessage;
}
else
{
arrInputMessage = [inputMessage];
}
var count = 0;
var message = null;
var arrMessage = null;
var length = null;
for(var outerCount = 0;outerCount < arrInputMessage.length;outerCount++)
{
message = arrInputMessage[outerCount];
if(!this.util.isString(message))
{
//In try catch as IE sometimes throw exceptions like Circular Exception while JSON.stringify
try
{
message = JSON.stringify(message);
}
catch(error)
{
message = message + "";
}
}
arrMessage = message.split(/\r\n|\r|\n/);
length = arrMessage.length;
for(var count = 0;count < length;count++)
{
var msg = arrMessage[count];
this.__createMessageComp(type,msg,null);
}
}
this.__divConsoleBodyCon.scrollTop = this.__divConsoleBodyCon.scrollHeight;
}
};
NSConsole.prototype.__setBodyToDefault = function(inputMessage,cssClass)
{
this.__divContainer.className = "nsConsoleContainer";
};
NSConsole.prototype.__animationEndHandler = function(event)
{
if(this.__config.isExpanded)
{
this.__divConsoleBodyCon.style.visibility = "hidden";
}
this.__config.isExpanded = !this.__config.isExpanded;
this.__setExpandCollapseIcon();
this.util.removeStyleClass(this.__divContainer,"nsConsoleCollapsing");
this.util.removeStyleClass(this.__divContainer,"nsConsoleExpanding");
this.__setResizerAfterAnimation();
};
NSConsole.prototype.__setExpandCollapseIcon = function()
{
this.__iconExpandCollapse.style.transform = this.__config.isExpanded ? "rotateZ(180deg)" : "rotateZ(0deg)";
};
NSConsole.prototype.__setEventToDefault = function(isSetDefault)
{
if(this.__config.overrideConsole)
{
if(isSetDefault)
{
for(var count = 0;count < this.CONSOLE_FUNCTION.length;count++)
{
var key = this.CONSOLE_FUNCTION[count];
console[key] = this.__objDefaultFunction[key];
}
}
else
{
for(var count = 0;count < this.CONSOLE_FUNCTION.length;count++)
{
var key = this.CONSOLE_FUNCTION[count];
console[key] = this.__overrideConsoleFunc.bind(this,key,this.__objDefaultFunction[key]);
}
}
}
};
NSConsole.prototype.__overrideConsoleFunc = function(key,defaultFunc,message)
{
this[key](message);
return defaultFunc(message);
};
/*********************************Start of Resizer Function*******************************/
NSConsole.prototype.__createResizer = function()
{
if(this.__config.enableResize)
{
var id = this.__getID();
this.__divResizer = this.util.createDiv(id + "Resize","nsConsoleResizer nsConsoleResizerCursor");
this.__divContainer.appendChild(this.__divResizer);
this.util.addEvent(this.__divResizer,'mousedown',this.__resizerMouseDown.bind(this));
}
};
NSConsole.prototype.__resizerMouseDown = function(event)
{
if(this.__config.isExpanded)
{
event = this.util.getEvent(event);
event.preventDefault();
var element = this.__divContainer;
this.__objResize.origWidth = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
this.__objResize.origHeight = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
this.__objResize.origX = element.getBoundingClientRect().left;
this.__objResize.origY = element.getBoundingClientRect().top;
this.__objResize.origMouseX = event.pageX;
this.__objResize.origMouseY = event.pageY;
this.__objResize.mousemove = this.__resizerMouseMove.bind(this);
this.__objResize.mouseup = this.__resizerMouseUp.bind(this);
this.util.addEvent(window,'mousemove',this.__objResize.mousemove);
this.util.addEvent(window,'mouseup',this.__objResize.mouseup);
}
};
NSConsole.prototype.__resizerMouseMove = function(event)
{
event = this.util.getEvent(event);
var element = this.__divContainer;
var height = this.__objResize.origHeight - (event.pageY - this.__objResize.origMouseY)
if (height > (this.__config.minHeight))
{
element.style.height = height + 'px';
//element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
}
};
NSConsole.prototype.__resizerMouseUp = function(event)
{
this.util.removeEvent(window,'mousemove',this.__objResize.mousemove);
this.util.removeEvent(window,'mouseup',this.__objResize.mousemove);
this.__objResize = {};
};
NSConsole.prototype.__setResizerAfterAnimation = function()
{
if(this.__divResizer)
{
this.__config.isExpanded ? this.util.addStyleClass(this.__divResizer,"nsConsoleResizerCursor") : this.util.removeStyleClass(this.__divResizer,"nsConsoleResizerCursor")
}
};
/*********************************End of Resizer Function*******************************/
/*********************************Start of Util Function*******************************/
NSConsole.prototype.__getID = function()
{
if(!this.__id)
{
this.__id = "compConsole" + this.util.getUniqueId();
}
return this.__id;
};
NSConsole.prototype.__getTime = function()
{
var now = new Date();
var hour = "0" + now.getHours();
hour = hour.substring(hour.length-2);
var minute = "0" + now.getMinutes();
minute = minute.substring(minute.length-2);
var second = "0" + now.getSeconds();
second = second.substring(second.length-2);
return hour + ":" + minute + ":" + second;
};
NSConsole.prototype.__getDate = function()
{
var now = new Date();
var year = "" + now.getFullYear();
var month = "0" + (now.getMonth()+1);
month = month.substring(month.length-2);
var date = "0" + now.getDate();
date = date.substring(date.length-2);
return year + "-" + month + "-" + date;
};
/*********************************End of Util Function*******************************/
return NSConsole;
})();
nsModuleExport(this,"NSConsole",NSConsole);