nscomponentsreact
Version:
React Wrapper Components for NSComponents
350 lines (318 loc) • 11.3 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 NSHorizontalNavigation = (function()
{
function NSHorizontalNavigation(container,setting)
{
this.__setting = setting;
this.__container = container;
this.__config = null;
this.util = null;
this.__domVar = null;
this.__con = null;
this.__docHandlerRef = null;
this.initializeComponent();
}
NSHorizontalNavigation.prototype.constructor = NSHorizontalNavigation;
NSHorizontalNavigation.prototype.setTheme = function(theme)
{
if(this.__con) {
this.util.removeStyleClass(this.__con,"nsHorNav" + this.__config.theme);
this.__config.theme = theme;
this.util.addStyleClass(this.__con,"nsHorNav" + this.__config.theme);
}
};
NSHorizontalNavigation.prototype.initializeComponent = function()
{
this.util = new NSUtil();
if(!this.__container) {
this.util.throwNSError("NSHorizontalNavigation","Container cannot be null");
return;
}
this.__domVar = this.util.getDomVariables();
this.__setSetting();
};
NSHorizontalNavigation.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty)
{
var attributeName = attrName.toLowerCase();
};
NSHorizontalNavigation.prototype.removeComponent = function()
{
if(this.__docHandlerRef) {
this.util.removeEvent(this.__domVar.doc,"click",this.__docHandlerRef);
this.__docHandlerRef = null;
}
};
NSHorizontalNavigation.prototype.selectMenu = function(itemOrElement)
{
};
NSHorizontalNavigation.prototype.dataSource = function(source)
{
this.__config.dataSource = source;
this.__config.orignalDataSource = this.__config.dataSource ? this.__config.dataSource.slice(0) : [];
};
NSHorizontalNavigation.prototype.__setSetting = function()
{
if(!this.__setting)
{
this.__setting = {};
}
if(!this.__setting["customClass"])
{
this.__setting["customClass"] = {};
}
this.__config = {
dataSource: this.__setting["dataSource"] || null,
titleField: this.__setting["titleField"] || "title",
childField: this.__setting["childField"] || "children",
enableOpenOnClick: Boolean.parse(this.__setting["enableOpenOnClick"]),
enableAnimation: Boolean.parse(this.__setting["enableAnimation"]),
theme: this.__setting["theme"] || "Gray",
extraAttribute: this.__setting["extraAttribute"],// to set link for Angular 2 or other framework attributes
customClass:{navContainer:this.__setting.customClass["navContainer"] || null,
nonSubMenuItem:this.__setting.customClass["nonSubMenuItem"] || null,
subMenuItem:this.__setting.customClass["subMenuItem"] || null,
subMenuCon:this.__setting.customClass["subMenuCon"] || null,
mouseHover:this.__setting.customClass["mouseHover"] || null
}
};
this.__createStructure();
};
NSHorizontalNavigation.prototype.__createStructure = function()
{
if(this.__con) {
this.util.removeAllChildren(this.__con);
}
if(this.__config.dataSource && this.__config.dataSource.length) {
var dataSource = this.__config.dataSource;
if(!this.__con) {
this.__con = this.util.createElement("ul",null,"nsHorNavContentCon nsHorNav nsHorNav" + this.__config.theme);
this.__applyCustomClass(this.__con,"navContainer");
this.__container.appendChild(this.__con);
}
for(var count = 0;count < dataSource.length;count++) {
var item = dataSource[count];
if(item) {
if(item[this.__config.childField] && item[this.__config.childField].length) {
this.__createSubNav(this.__con,item,0);
}
else {
this.__createNav(this.__con,item,0);
}
}
}
if(!this.__docHandlerRef) {
this.__docHandlerRef = this.__documentClickHandler.bind(this);
if(this.__config.enableOpenOnClick) {
this.util.addEvent(this.__domVar.doc,"click",this.__docHandlerRef);
}
else {
this.util.addEvent(this.__con,"mouseleave",this.__docHandlerRef);
}
}
}
};
NSHorizontalNavigation.prototype.__createNav = function(con,item,level) {
var navItemCon = this.__createNavItem(item,"nsHorNavItemCon nsHorNavNonSubNavItemCon nsHorNavNonSubNavItemCon-" + level,"nsHorNavItem nsHorNavNonSubNavItem");
var navItem = navItemCon.firstElementChild;
this.__setLink(navItem,item["link"]);
this.__setExtraAttrubtesForLink(navItem,item);
this.__applyCustomClass(navItem,"nonSubMenuItem");
this.util.addEvent(navItemCon,"click",this.__navClickHandler.bind(this,con,item));
con.appendChild(navItemCon);
}
NSHorizontalNavigation.prototype.__createSubNav = function(con,item,level) {
var navItemCon = this.__createNavItem(item,"nsHorNavItemCon nsHorNavSubNavCon nsHorNavSubNavCon-" + level,"nsHorNavItem nsHorNavSubNavItem");
var navItem = navItemCon.firstElementChild;
navItem.setAttribute("href","javascript:void(0)");
this.__applyCustomClass(navItem,"subMenuItem");
var conContent = this.util.createElement("ul",null,"nsHorNavContentCon nsHorNavSubNavContent");
this.__applyCustomClass(conContent,"subMenuCon");
for(var count = 0;count < item[this.__config.childField].length;count++) {
var itemSub = item[this.__config.childField][count];
if(itemSub) {
if(itemSub[this.__config.childField] && itemSub[this.__config.childField].length) {
this.__createSubNav(conContent,itemSub,level + 1);
}
else {
this.__createNav(conContent,itemSub,level + 1);
}
}
}
navItemCon.appendChild(conContent);
if(this.__config.enableOpenOnClick) {
this.util.addEvent(navItem,"click",this.__subNavClickHandler.bind(this,navItemCon,item));
}
else {
this.util.addEvent(navItem,"mouseover",this.__showSubNav.bind(this,navItemCon,item));
//this.util.addEvent(navItem,"mouseleave",this.__hideSubNav.bind(this,navItemCon,item));
}
con.appendChild(navItemCon);
}
NSHorizontalNavigation.prototype.__createNavItem = function(item,cssClass,itemCssClass) {
var navItemCon = this.util.createElement("li",null,cssClass);
if(item["disabled"])
{
this.util.addStyleClass(navItemCon,"nsHorNavItemDisabled");
}
var navItem = this.util.createElement("a",null,itemCssClass);
if(item["iconBeforeHtml"])
{
var spanIcon = this.util.createElement("span",null,"nsHorNavItemIconCon");
spanIcon.innerHTML = item["iconBeforeHtml"];
navItem.appendChild(spanIcon);
}
var spanText = this.util.createElement("span",null,"nsHorNavText");
spanText.appendChild(document.createTextNode(item[this.__config.titleField]));
navItem.appendChild(spanText);
if(item["iconAfterHtml"])
{
var spanIcon = this.util.createElement("span",null,"nsHorNavItemIconCon");
spanIcon.innerHTML = item["iconAfterHtml"];
navItem.appendChild(spanIcon);
}
navItemCon.appendChild(navItem);
return navItemCon;
};
NSHorizontalNavigation.prototype.__documentClickHandler = function(event) {
this.__closeAllSubNavs();
};
NSHorizontalNavigation.prototype.__navClickHandler = function(con,item,event) {
event.stopPropagation();
this.__closeAllSubNavs();
if(item.click) {
item.click(event,item);
}
this.util.dispatchEvent(con,NSHorizontalNavigation.NAVIGATION_MENU_SELECTED,item,{item:item,menu:con});
};
NSHorizontalNavigation.prototype.__subNavClickHandler = function(con,item,event) {
event.stopPropagation();
this.__closeAllSubNavs(function(conActive) {
//in case of outer level navs 1st case is valid and in rest of the case 2nd case is valid
if(con.contains(conActive) || conActive.contains(con)) {
return false;
}
return true;
});
this.__showSubNav(con,item);
};
NSHorizontalNavigation.prototype.__showSubNav = function(con,item) {
var content = con.querySelector(".nsHorNavSubNavContent");
if(content) {
if(this.__config.enableAnimation) {
var self = this;
this.util.slideDownTransition(content,150,function(elem) {
self.util.addStyleClass(elem,"nsHorNavSubNavContentActive");
});
}
else {
this.util.addStyleClass(content,"nsHorNavSubNavContentActive");
}
}
};
NSHorizontalNavigation.prototype.__hideSubNav = function(con,item) {
console.log("In __hideSubNav ",con);
var content = con;
if(!this.util.hasStyleClass(con,"nsHorNavSubNavContentActive")) {
content = con.querySelector(".nsHorNavSubNavContent");
}
if(content) {
/*if(this.__config.enableAnimation) {
var self = this;
this.util.slideUpTransition(content,150,function(elem) {
self.util.removeStyleClass(elem,"nsHorNavSubNavContentActive");
});
}
else {
this.util.removeStyleClass(content,"nsHorNavSubNavContentActive");
}*/
}
};
NSHorizontalNavigation.prototype.__closeAllSubNavs = function(doesCloseCallback) {
var arrContent = this.__con.querySelectorAll(".nsHorNavSubNavContentActive");
if(arrContent && arrContent.length) {
for(var count = 0;count < arrContent.length;count++) {
var con = arrContent[count];
if(!doesCloseCallback || doesCloseCallback(con)) {
if(this.__config.enableAnimation) {
var self = this;
this.util.slideUpTransition(con,150,function(elem) {
self.util.removeStyleClass(elem,"nsHorNavSubNavContentActive");
});
}
else {
this.util.removeStyleClass(con,"nsHorNavSubNavContentActive");
}
}
}
}
};
NSHorizontalNavigation.prototype.__setLink = function(anchor,link) {
if(link) {
anchor.setAttribute("href",link);
if(this.__config["extraAttribute"]) {
anchor.setAttribute(this.__config["extraAttribute"],link);
}
}
else {
anchor.setAttribute("href","javascript:void(0)");
}
};
NSHorizontalNavigation.prototype.__setExtraAttrubtesForLink = function(anchor,item) {
if(item.attributes) {
for (var prop in item.attributes) {
if (item.attributes.hasOwnProperty(prop)) {
anchor.setAttribute(prop,item.attributes[prop]);
}
}
}
};
NSHorizontalNavigation.prototype.__applyCustomClass = function(element,type) {
if(element && type && this.__config.customClass[type])
{
this.util.addStyleClass(element,this.__config.customClass[type]);
}
};
NSHorizontalNavigation.NAVIGATION_MENU_SELECTED = "navigationMenuSelected";
return NSHorizontalNavigation;
})();
nsModuleExport(this,"NSHorizontalNavigation",NSHorizontalNavigation);