ns-components-angular/embedded/nsHorizontalNavigation.d.ts

Angular Wrapper Components for NSComponents

export declare const NSHorizontalNavigationCode = "var nsModuleExport = function(root,name,prototype)\r\n\t{\r\n\t\tif(typeof exports === 'object' && typeof module === 'object')\r\n\t\t{\r\n\t\t\tmodule.exports[name] = prototype;\r\n\t\t}\r\n\t\telse if (typeof define === \"function\" && define.amd)\r\n\t\t{\r\n\t\t\tdefine(name,[], function () {return prototype;});\r\n\t\t}\r\n\t\telse if(typeof exports === 'object')\r\n\t\t{\r\n\t\t\texports[name] = prototype;\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\troot[name] = prototype;\r\n\t\t}\r\n\t};var nsIsWeb = function(root)\r\n\t{\r\n\t\tif(typeof exports === 'object' && typeof module === 'object')\r\n\t\t{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\telse if (typeof define === \"function\" && define.amd)\r\n\t\t{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\telse if(typeof exports === 'object')\r\n\t\t{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\treturn true;\r\n\t\t}\r\n\t};if(!nsIsWeb())\r\n\t\t{\r\nvar nsutilRef = require('./nsUtil.min.js');\r\nvar NSUtil = nsutilRef.NSUtil;\r\n\r\n\t\t}\r\nvar NSHorizontalNavigation = (function()\r\n{\r\n\tfunction NSHorizontalNavigation(container,setting) \r\n\t{\r\n\t\tthis.__setting = setting;\r\n\t\tthis.__container = container;\r\n\t\t\r\n\t\tthis.__config = null;\r\n\t\t\r\n\t\tthis.util = null;\r\n\t\tthis.__domVar = null;\r\n\t\t\r\n\t\tthis.__con = null;\r\n\t\tthis.__docHandlerRef = null;\r\n\t\t\r\n\t\tthis.initializeComponent();\r\n\t}\r\n\t\r\n\tNSHorizontalNavigation.prototype.constructor = NSHorizontalNavigation;\r\n\t\r\n\tNSHorizontalNavigation.prototype.setTheme = function(theme)\r\n\t{\r\n\t\tif(this.__con) {\r\n\t\t\tthis.util.removeStyleClass(this.__con,\"nsHorNav\" + this.__config.theme);\r\n\t\t\tthis.__config.theme = theme;\r\n\t\t\tthis.util.addStyleClass(this.__con,\"nsHorNav\" + this.__config.theme);\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.initializeComponent = function() \r\n\t{\r\n\t\tthis.util = new NSUtil();\r\n\t\tif(!this.__container) {\r\n\t\t\tthis.util.throwNSError(\"NSHorizontalNavigation\",\"Container cannot be null\");\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tthis.__domVar = this.util.getDomVariables();\r\n\t\tthis.__setSetting();\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty)\r\n\t{\r\n\t\tvar attributeName = attrName.toLowerCase();\r\n\t\t\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.removeComponent = function() \r\n\t{\r\n\t\tif(this.__docHandlerRef) {\r\n\t\t\tthis.util.removeEvent(this.__domVar.doc,\"click\",this.__docHandlerRef);\r\n\t\t\tthis.__docHandlerRef = null;\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.selectMenu = function(itemOrElement)\r\n\t{\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.dataSource = function(source)\r\n\t{\r\n\t\tthis.__config.dataSource = source;\r\n\t\tthis.__config.orignalDataSource = this.__config.dataSource ? this.__config.dataSource.slice(0) : [];\r\n\t\t\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__setSetting = function()\r\n\t{\r\n\t\tif(!this.__setting)\r\n\t\t{\r\n\t\t\tthis.__setting = {};\r\n\t\t}\r\n\t\tif(!this.__setting[\"customClass\"])\r\n\t\t{\r\n\t\t\tthis.__setting[\"customClass\"] = {};\r\n\t\t}\r\n\t\tthis.__config = {\r\n\t\t\tdataSource: this.__setting[\"dataSource\"] || null,\r\n\t\t\ttitleField: this.__setting[\"titleField\"] || \"title\",\r\n\t\t\tchildField: this.__setting[\"childField\"] || \"children\",\r\n\t\t\tenableOpenOnClick: Boolean.parse(this.__setting[\"enableOpenOnClick\"]),\r\n\t\t\tenableAnimation: Boolean.parse(this.__setting[\"enableAnimation\"]),\r\n\t\t\ttheme: this.__setting[\"theme\"] || \"Gray\",\r\n\t\t\textraAttribute: this.__setting[\"extraAttribute\"],// to set link for Angular 2 or other framework attributes\r\n\t\t\tcustomClass:{navContainer:this.__setting.customClass[\"navContainer\"] || null,\r\n\t\t\t\t\t  nonSubMenuItem:this.__setting.customClass[\"nonSubMenuItem\"] || null,\r\n\t\t\t\t\t  subMenuItem:this.__setting.customClass[\"subMenuItem\"] || null,\r\n\t\t\t\t\t  subMenuCon:this.__setting.customClass[\"subMenuCon\"] || null,\r\n\t\t\t\t\t  mouseHover:this.__setting.customClass[\"mouseHover\"] || null\r\n\t\t\t}\r\n\t\t};\r\n\t\tthis.__createStructure();\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__createStructure = function()\r\n\t{\r\n\t\tif(this.__con) {\r\n\t\t\tthis.util.removeAllChildren(this.__con);\r\n\t\t}\r\n\t\tif(this.__config.dataSource && this.__config.dataSource.length) {\r\n\t\t\tvar dataSource = this.__config.dataSource;\r\n\t\t\tif(!this.__con) {\r\n\t\t\t\tthis.__con = this.util.createElement(\"ul\",null,\"nsHorNavContentCon nsHorNav nsHorNav\" + this.__config.theme);\r\n\t\t\t\tthis.__applyCustomClass(this.__con,\"navContainer\");\r\n\t\t\t\tthis.__container.appendChild(this.__con);\r\n\t\t\t}\r\n\t\t\tfor(var count = 0;count < dataSource.length;count++) {\r\n\t\t\t\tvar item = dataSource[count];\r\n\t\t\t\tif(item) {\r\n\t\t\t\t\tif(item[this.__config.childField] && item[this.__config.childField].length) {\r\n\t\t\t\t\t\tthis.__createSubNav(this.__con,item,0);\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.__createNav(this.__con,item,0);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif(!this.__docHandlerRef) {\r\n\t\t\t\tthis.__docHandlerRef = this.__documentClickHandler.bind(this);\r\n\t\t\t\tif(this.__config.enableOpenOnClick) {\r\n\t\t\t\t\tthis.util.addEvent(this.__domVar.doc,\"click\",this.__docHandlerRef);\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.util.addEvent(this.__con,\"mouseleave\",this.__docHandlerRef);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__createNav = function(con,item,level) {\r\n\t\tvar navItemCon = this.__createNavItem(item,\"nsHorNavItemCon nsHorNavNonSubNavItemCon nsHorNavNonSubNavItemCon-\" + level,\"nsHorNavItem nsHorNavNonSubNavItem\");\r\n\t\tvar navItem = navItemCon.firstElementChild;\r\n\t\tthis.__setLink(navItem,item[\"link\"]);\r\n\t\tthis.__setExtraAttrubtesForLink(navItem,item);\r\n\t\tthis.__applyCustomClass(navItem,\"nonSubMenuItem\");\r\n\t\tthis.util.addEvent(navItemCon,\"click\",this.__navClickHandler.bind(this,con,item));\r\n\t\tcon.appendChild(navItemCon);\r\n\t}\r\n\t\r\n\tNSHorizontalNavigation.prototype.__createSubNav = function(con,item,level) {\r\n\t\tvar navItemCon = this.__createNavItem(item,\"nsHorNavItemCon nsHorNavSubNavCon nsHorNavSubNavCon-\" + level,\"nsHorNavItem nsHorNavSubNavItem\");\r\n\t\tvar navItem = navItemCon.firstElementChild;\r\n\t\tnavItem.setAttribute(\"href\",\"javascript:void(0)\");\r\n\t\tthis.__applyCustomClass(navItem,\"subMenuItem\");\r\n\t\tvar conContent = this.util.createElement(\"ul\",null,\"nsHorNavContentCon nsHorNavSubNavContent\");\r\n\t\tthis.__applyCustomClass(conContent,\"subMenuCon\");\r\n\t\tfor(var count = 0;count < item[this.__config.childField].length;count++) {\r\n\t\t\tvar itemSub = item[this.__config.childField][count];\r\n\t\t\tif(itemSub) {\r\n\t\t\t\tif(itemSub[this.__config.childField] && itemSub[this.__config.childField].length) {\r\n\t\t\t\t\tthis.__createSubNav(conContent,itemSub,level + 1);\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.__createNav(conContent,itemSub,level + 1);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\tnavItemCon.appendChild(conContent);\r\n\t\tif(this.__config.enableOpenOnClick) {\r\n\t\t\tthis.util.addEvent(navItem,\"click\",this.__subNavClickHandler.bind(this,navItemCon,item));\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.util.addEvent(navItem,\"mouseover\",this.__showSubNav.bind(this,navItemCon,item));\r\n\t\t\t//this.util.addEvent(navItem,\"mouseleave\",this.__hideSubNav.bind(this,navItemCon,item));\r\n\t\t}\r\n\t\tcon.appendChild(navItemCon);\r\n\t}\r\n\t\r\n\tNSHorizontalNavigation.prototype.__createNavItem = function(item,cssClass,itemCssClass) {\r\n\t\tvar navItemCon = this.util.createElement(\"li\",null,cssClass);\r\n\t\tif(item[\"disabled\"])\r\n\t\t{\r\n\t\t\tthis.util.addStyleClass(navItemCon,\"nsHorNavItemDisabled\");\r\n\t\t}\r\n\t\tvar navItem = this.util.createElement(\"a\",null,itemCssClass);\r\n\t\tif(item[\"iconBeforeHtml\"])\r\n\t\t{\r\n\t\t\tvar spanIcon = this.util.createElement(\"span\",null,\"nsHorNavItemIconCon\");\r\n\t\t\tspanIcon.innerHTML = item[\"iconBeforeHtml\"];\r\n\t\t\tnavItem.appendChild(spanIcon);\r\n\t\t}\r\n\t\tvar spanText = this.util.createElement(\"span\",null,\"nsHorNavText\");\r\n\t\tspanText.appendChild(document.createTextNode(item[this.__config.titleField]));\r\n\t\tnavItem.appendChild(spanText);\r\n\t\tif(item[\"iconAfterHtml\"])\r\n\t\t{\r\n\t\t\tvar spanIcon = this.util.createElement(\"span\",null,\"nsHorNavItemIconCon\");\r\n\t\t\tspanIcon.innerHTML = item[\"iconAfterHtml\"];\r\n\t\t\tnavItem.appendChild(spanIcon);\r\n\t\t}\r\n\t\tnavItemCon.appendChild(navItem);\r\n\t\treturn navItemCon;\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__documentClickHandler = function(event) {\r\n\t\tthis.__closeAllSubNavs();\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__navClickHandler = function(con,item,event) {\r\n\t\tevent.stopPropagation();\r\n\t\tthis.__closeAllSubNavs();\r\n\t\tif(item.click) {\r\n\t\t\titem.click(event,item);\r\n\t\t}\r\n\t\tthis.util.dispatchEvent(con,NSHorizontalNavigation.NAVIGATION_MENU_SELECTED,item,{item:item,menu:con});\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__subNavClickHandler = function(con,item,event) {\r\n\t\tevent.stopPropagation();\r\n\t\tthis.__closeAllSubNavs(function(conActive) {\r\n\t\t\t//in case of outer level navs 1st case is valid and in rest of the case 2nd case is valid\r\n\t\t\tif(con.contains(conActive) || conActive.contains(con)) {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\treturn true;\r\n\t\t});\r\n\t\tthis.__showSubNav(con,item);\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__showSubNav = function(con,item) {\r\n\t\tvar content = con.querySelector(\".nsHorNavSubNavContent\");\r\n\t\tif(content) {\r\n\t\t\tif(this.__config.enableAnimation) {\r\n\t\t\t\tvar self = this;\r\n\t\t\t\tthis.util.slideDownTransition(content,150,function(elem) {\r\n\t\t\t\t\tself.util.addStyleClass(elem,\"nsHorNavSubNavContentActive\");\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.util.addStyleClass(content,\"nsHorNavSubNavContentActive\");\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__hideSubNav = function(con,item) {\r\n\t\tconsole.log(\"In __hideSubNav \",con);\r\n\t\tvar content = con;\r\n\t\tif(!this.util.hasStyleClass(con,\"nsHorNavSubNavContentActive\")) {\r\n\t\t\tcontent = con.querySelector(\".nsHorNavSubNavContent\");\r\n\t\t}\r\n\t\tif(content) {\r\n\t\t\t/*if(this.__config.enableAnimation) {\r\n\t\t\t\tvar self = this;\r\n\t\t\t\tthis.util.slideUpTransition(content,150,function(elem) {\r\n\t\t\t\t\tself.util.removeStyleClass(elem,\"nsHorNavSubNavContentActive\");\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.util.removeStyleClass(content,\"nsHorNavSubNavContentActive\");\r\n\t\t\t}*/\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__closeAllSubNavs = function(doesCloseCallback) {\r\n\t\tvar arrContent = this.__con.querySelectorAll(\".nsHorNavSubNavContentActive\");\r\n\t\tif(arrContent && arrContent.length) {\r\n\t\t\tfor(var count = 0;count < arrContent.length;count++) {\r\n\t\t\t\tvar con = arrContent[count];\r\n\t\t\t\tif(!doesCloseCallback || doesCloseCallback(con)) {\r\n\t\t\t\t\tif(this.__config.enableAnimation) {\r\n\t\t\t\t\tvar self = this;\r\n\t\t\t\t\tthis.util.slideUpTransition(con,150,function(elem) {\r\n\t\t\t\t\t\tself.util.removeStyleClass(elem,\"nsHorNavSubNavContentActive\");\r\n\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.util.removeStyleClass(con,\"nsHorNavSubNavContentActive\");\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__setLink = function(anchor,link) {\r\n\t\tif(link) {\r\n\t\t\tanchor.setAttribute(\"href\",link);\r\n\t\t\tif(this.__config[\"extraAttribute\"]) {\r\n\t\t\t\tanchor.setAttribute(this.__config[\"extraAttribute\"],link);\r\n\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\t\t\tanchor.setAttribute(\"href\",\"javascript:void(0)\");\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__setExtraAttrubtesForLink = function(anchor,item) {\r\n\t\tif(item.attributes) {\r\n\t\t\tfor (var prop in item.attributes) {\r\n\t\t\t    if (item.attributes.hasOwnProperty(prop)) {\r\n\t\t\t        anchor.setAttribute(prop,item.attributes[prop]);\r\n\t\t\t    }\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.prototype.__applyCustomClass = function(element,type) {\r\n\t\tif(element && type && this.__config.customClass[type])\r\n\t\t{\r\n\t\t\tthis.util.addStyleClass(element,this.__config.customClass[type]);\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSHorizontalNavigation.NAVIGATION_MENU_SELECTED = \"navigationMenuSelected\";\r\n\t\r\n\treturn NSHorizontalNavigation;\r\n})();\r\nnsModuleExport(this,\"NSHorizontalNavigation\",NSHorizontalNavigation);\r\n\r\n";