nscomponentsreact/build/generated/js/nsContainerBase.min.js

React Wrapper Components for NSComponents

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 nsExtendPrototype = (function()
{
	var nsExtendPrototype = function(source,destination) 
	{
		if(source && destination)
		{
			destination.prototype = Object.create(source.prototype);
			destination.prototype.constructor = destination;
			destination.prototype.base = source.prototype;
			return source.prototype;
		}
		return null;
	};
	return nsExtendPrototype;
})();
nsModuleExport(this,"nsExtendPrototype",nsExtendPrototype);

var NSContainerBase = (function()
{
	var NSContainerBase = function()
	{
	};
	
	/*start of functions */
	//set checkVisibility to true if component needs to reRender when baseComponent width or height > 0 or baseComponent is Visible
	NSContainerBase.prototype.__setBaseComponent = function(component,checkVisibility)
	{
		if(component)
		{
			this.__baseComponent = (typeof component == "string") ? document.getElementById(component) : component;
			this.__initialize();
			if(checkVisibility == true)
			{
				this.__checkBaseComponentVisibility();
			}
		}
		else
		{
			throw new Error("Component is undefined");
		}
	};
	
	NSContainerBase.prototype.__initialize = function() 
	{
		this.INITIALIZE = "initialize";
		this.CREATION_COMPLETE = "creationComplete";
		this.PROPERTY_CHANGE = "propertyChange";
		this.REMOVE = "remove";
		this.RESIZE = "resize";
		
		  /*start of private variables */
		//this.__baseComponent = null;
		this.__isCreationCompleted = false;
		this.__isRemoved = false;
		this.__setProperty = true; 
		this.__id = null;
		this.__shadow = null;
		this.__focused = false;
		this.__mediaQuery = null;
		this.__arrQueries = [];
		this.__arrQueriesTrimmed = [];
		this.__focusHandlerRef = null;
		this.__blurHandlerRef = null;
		this.__resizeHandlerRef = null;
		this.__nsResizeListener = null;
		this.__baseDocumentMouseDownRef = null;
		this.__creationCompleteInterval = -1;
		this.__themeContainer = null;
		this.__themePrefix = null;
		this.__theme = "White";
		this.__domVariables = null; 
		this.__doc = null;
		this.__win = null;
		this.__isMobile = false;
		this.__baseCompObserver = null;
		  /*end of private variables */
		this.util = new NSUtil();
		this.__setDomVariables();
		this.__setID();
		this.initializeComponent();
		if(this.util.isElementInDOM(this.__baseComponent))
		{
			this.__creationComplete();
		}
		else
		{
			var self = this;
			this.__creationCompleteInterval = setTimeout(
			function()
			{ 
				self.__callCreationComplete.bind(self)();
			},10);
		}
		if(!this.__focusHandlerRef)
		{
			this.__focusHandlerRef = this.focusHandler.bind(this);
			this.util.addEvent(this.__baseComponent,"focus",this.__focusHandlerRef);
		}
		if(!this.__blurHandlerRef)
		{
			this.__blurHandlerRef = this.blurHandler.bind(this);
			this.util.addEvent(this.__baseComponent,"blur",this.__blurHandlerRef);
		}
		if(!this.__baseDocumentMouseDownRef && this.__baseComponent)
		{
			this.__baseDocumentMouseDownRef = this.__baseDocumentMouseDownHandler.bind(this);
			this.util.addEvent(document,"mousedown", this.__baseDocumentMouseDownRef);
		}
		this.util.dispatchEvent(this.__baseComponent,this.INITIALIZE);
	};
	
	NSContainerBase.prototype.__callCreationComplete = function(event)
	{
		if(this.__creationCompleteInterval != -1)
		{
			clearTimeout(this.__creationCompleteInterval);
			this.__creationCompleteInterval = -1;
		}
		if(this.util.isElementInDOM(this.__baseComponent))
		{
			this.__creationComplete();
		}
		else
		{
			var self = this;
			this.__creationCompleteInterval = setTimeout(
			function()
			{ 
				self.__callCreationComplete.bind(self)();
			},10);
		}
	};
	
	NSContainerBase.prototype.__creationComplete = function()
	{
		if(!this.__isCreationCompleted)
		{
			this.__setProperty = false;
			this.util.addStyleClass(this.__baseComponent,"nsContainer");
			if(this.__isMobile)
			{
				this.util.addStyleClass(this.__baseComponent,"nsContainerMobile");
			}
			this.setComponentProperties();
			this.__addMediaQueries();
			this.util.dispatchEvent(this.__baseComponent,this.CREATION_COMPLETE);
		}
	};
	
	NSContainerBase.prototype.__checkBaseComponentVisibility = function() 
	{
		if(this.__baseComponent && !this.__baseCompObserver)
		{
			if(!this.util.isElementVisible(this.__baseComponent))
			{
				var self = this;
				var callback = function() 
				{
					if(self.util.isElementVisible(self.__baseComponent))
					{
						if(self.__baseCompObserver)
						{
							clearInterval(self.__baseCompObserver);
							self.__baseCompObserver = null;
							if(self["reRender"])
							{
								self["reRender"].call(self);
							}
						}
					}
				};
				this.__baseCompObserver = setInterval(function(){ callback() }, 1000);
			}
			else
			{
				if(this.__baseCompObserver)
				{
					clearInterval(this.__baseCompObserver);
					this.__baseCompObserver = null;
				}
			}
		}
	};
	
	//derived component should call this function to attach resize listener so that 
	//when the component is fully rendered then resize starts working than in between 
	NSContainerBase.prototype.attachResizeListener = function()
	{
		if(!this.__resizeHandlerRef)
		{
			this.__resizeHandlerRef = this.resizeHandler.bind(this);
			this.__nsResizeListener = new this.util.nsResizeListener();
			this.__nsResizeListener.addResizeListener(this.__baseComponent,this.__resizeHandlerRef);
		}
	};
	
	NSContainerBase.prototype.attributeChangedCallback = function(attrName, oldVal, newVal)
	{
		var data = {};
		data.propertyName = attrName;
		data.oldValue = oldVal;
		data.newValue = newVal;
		this.util.dispatchEvent(this.__baseComponent,this.PROPERTY_CHANGE,data);
		this.propertyChange(attrName, oldVal, newVal, this.__setProperty);
		this.__setProperty = true;
	};
	
	NSContainerBase.prototype.detachedCallback = function()
	{
		this.removeComponent();
	};
	
	NSContainerBase.prototype.__setDomVariables = function()
	{
		this.__domVariables = this.util.getDomVariables();
		this.__doc = this.__domVariables.doc;
		this.__win = this.__domVariables.win;
		var objMobile = this.util.isMobile(this.__win);
		this.__isMobile = objMobile.any;
	};
	
	NSContainerBase.prototype.__setID = function()
	{
		var setID = false;
		if(this.__baseComponent && this.__baseComponent.hasAttribute("id"))
		{
			this.__id = this.__baseComponent.getAttribute("id");
		}
		else if(this.__baseComponent && this.__baseComponent.hasAttribute("name"))
		{
			this.__id = this.__baseComponent.getAttribute("name");
			setID = true;
		}
		else
		{
			this.__id = "comp" + this.util.getUniqueId();
			setID = true;
		}
		if(setID)
		{
			this.__baseComponent.setAttribute("id",this.__id);
		}
	};
	
	NSContainerBase.prototype.__applyTheme = function(container,themePrefix) 
	{
		if(container)
		{
			this.__themeContainer = container;
			this.__themePrefix = themePrefix;
			this.setTheme(this.__theme);
		}
	};
	
	NSContainerBase.prototype.__addMediaQueries = function(isReset) 
	{
		if(this.__arrQueries && this.__arrQueries.length && (!this.__arrQueriesTrimmed.length || isReset))
		{
			var query = null;
			var mediaQuery = null;
			var trimmedMediaQuery = null;
			for (var count = 0; count < this.__arrQueries.length; count++)
			{ 
				query = this.__arrQueries[count];
				trimmedMediaQuery = query.replace(/ /g, "");
				this.__arrQueriesTrimmed.push(trimmedMediaQuery);
				mediaQuery = window.matchMedia(query);
				mediaQuery.addListener(this.__mediaChangeHandler.bind(this));
				this.__mediaChangeHandler(mediaQuery);
			}
		}
	};
	
	NSContainerBase.prototype.__mediaChangeHandler = function(changed) 
	{
		var conditionTrue = false;
		if(changed.matches) 
		{
			conditionTrue = true;
	    } 
		var tempMedia = changed.media.replace(/ /g, "");
		var queryIndex = -1;
		var trimmedMediaQuery = null;
		var length = this.__arrQueriesTrimmed.length;
		for (var count = 0; count < length; count++)
		{ 
			trimmedMediaQuery = this.__arrQueriesTrimmed[count];
			if(conditionTrue)
			{
				/*console.log(tempMedia);
				console.log(trimmedMediaQuery);
				console.log(tempMedia == trimmedMediaQuery);*/
			}
			if(tempMedia === trimmedMediaQuery)
			{
				queryIndex = count;
				break;
			}
		}
		this.deviceViewChanged(conditionTrue,queryIndex,changed.media);
	};
	
	NSContainerBase.prototype.resizeHandler = function(event) 
	{
		this.componentResized(event);
	};
	
	NSContainerBase.prototype.initializeComponent = function() 
	{
	};
	
	NSContainerBase.prototype.setComponentProperties = function() 
	{
		this.__isCreationCompleted = true;
	};
	
	NSContainerBase.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty) 
	{
	};
	
	NSContainerBase.prototype.removeComponent = function() 
	{
		this.__isRemoved = true;
		if(this.__baseCompObserver)
		{
			clearInterval(this.__baseCompObserver);
			this.__baseCompObserver = null;
		}
		if(this.__resizeHandlerRef)
		{
			this.__nsResizeListener.removeResizeListener(this.__baseComponent,this.__resizeHandlerRef);
			this.__resizeHandlerRef = null;
		}
		if(this.__baseDocumentMouseDownRef)
		{
			this.util.addEvent(document,"mousedown", this.__baseDocumentMouseDownRef);
			this.__baseDocumentMouseDownRef = null;
		}
		this.util.dispatchEvent(this.__baseComponent,this.REMOVE);
	};
	
	NSContainerBase.prototype.componentResized = function(event) 
	{
	};
	
	NSContainerBase.prototype.deviceViewChanged = function(conditionTrue,queryIndex,query) 
	{
	};
	
	NSContainerBase.prototype.initializeDOM = function(requireStyleClass)
	{
		if(document.head.createShadowRoot) 
		{
		    if(!this.__shadow)
		    {
		    	this.__shadow = this.__baseComponent.createShadowRoot();
		    }
		    if(requireStyleClass)
		    {
		    	var shadow = this.__shadow;
		    	new this.util.ajax(ns.__dicPath["nsComponent.css"], function (response) {
		    		if(response)
		    		{
		    			var sheet = document.createElement("style");
				    	sheet.innerHTML = response;
				    	shadow.appendChild(sheet);
		    		}
			    });
		    	new this.util.ajax(requireStyleClass, function (response) {
		    		if(response)
		    		{
		    			var sheet = document.createElement("style");
				    	sheet.innerHTML = response;
				    	shadow.appendChild(sheet);
		    		}
			    });
		    	
		    }
		}
	};
	
	NSContainerBase.prototype.getID = function() 
	{
		return this.__id;
	};
	
	NSContainerBase.prototype.focusHandler = function(event)
	{
		this.__focused = true;
	};
	
	NSContainerBase.prototype.blurHandler = function(event)
	{
		this.__focused = false;
	};
	
	NSContainerBase.prototype.__baseDocumentMouseDownHandler = function(event)
	{
		if(this.__baseComponent)
		{
			event = this.util.getEvent(event);
			var target = this.util.getTarget(event);
			var hasFocus = (this.__baseComponent === target || (this.__baseComponent.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_CONTAINED_BY));
			hasFocus = (hasFocus > 0);
			if(hasFocus != this.__focused)
			{
				hasFocus = hasFocus ? this.focusHandler(event) : this.blurHandler(event);
		    }
		}
	};
	
	NSContainerBase.prototype.addChild = function(element)
	{
		if(element)
		{
		    if(this.__shadow)
		    {
		    	 this.__shadow.appendChild(element);
		    }
			else 
			{
				this.__baseComponent.appendChild(element);
			}
		}
	};
	
	NSContainerBase.prototype.deleteChild = function(element)
	{
		if(element)
		{
		    if(this.__shadow)
		    {
		    	 this.__shadow.removeChild(element);
		    }
			else 
			{
			    this.removeChild(element);
			}
		}
	};
	
	NSContainerBase.prototype.setStyle = function(styleProp,value) 
	{
		if(this.__baseComponent && styleProp && !this.util.isUndefinedOrNull(value))
		{
			this.__baseComponent.style[styleProp] = value;
		}
	};
	
	
	NSContainerBase.prototype.setFocus = function(isFocus)
	{
	    this.__focused = isFocus;
	};
	
	NSContainerBase.prototype.hasFocus = function()
	{
	    return this.__focused;
	};
	
	NSContainerBase.prototype.isRemoved = function()
	{
	    return this.__isRemoved;
	};
	
	NSContainerBase.prototype.setTheme = function(theme) 
	{
		if(this.__themeContainer && this.__themePrefix)
		{
			if(this.__isMobile)
			{
				this.util.removeStyleClass(this.__baseComponent,"nsContainerMobile" +  this.__theme);
				this.util.removeStyleClass(this.__themeContainer,this.__themePrefix + "Mobile" +  this.__theme);
			}
			this.util.removeStyleClass(this.__themeContainer,this.__themePrefix + this.__theme);
			this.__theme = theme;
			this.util.addStyleClass(this.__themeContainer,this.__themePrefix + this.__theme);
			if(this.__isMobile)
			{
				this.util.addStyleClass(this.__baseComponent,"nsContainerMobile" +  this.__theme);
				this.util.addStyleClass(this.__themeContainer,this.__themePrefix + "Mobile" + this.__theme);
			}
		}
	};
	
	NSContainerBase.prototype.changeProperty = function(propertyName,value)
	{
		this.__setProperty = true;
		this.attributeChangedCallback(propertyName,null,value);
	};
	/*end of functions */
	
	return NSContainerBase;
})();
nsModuleExport(this,"NSContainerBase",NSContainerBase);