nscomponentsreact/build/generated/js/nsProgressBar.min.js

React Wrapper Components for NSComponents

var nsModal = Object.create(nsContainerBase);

nsModal.initializeComponent = function() 
{
	this.base.initializeComponent();
	this.__isTitleAllowed = true;
	this.__isCloseAllowed = true;
	
	this.__divFade = null;
	this.__divPopUp = null;
	this.__divTitleBar = null;
	this.__titleStyle = "nsModalTitleBar";
	this.__closeButtonStyle = "nsModalCloseButton";
	this.__dragMouseX;
    this.__dragMouseY;
    this.__dragMove = false;
    this.__dragCurrentX = 0;
    this.__dragCurrentY = 0;
    
    this.__titleBarMouseOverRef = null;
    this.__titleBarMouseDownRef = null;
    this.__overlayMouseUpRef = null;
    this.__overlayMouseMoveRef = null;
    this.__onkeydownRef = null;
};

nsModal.setComponentProperties = function() 
{
	this.base.setComponentProperties();
};

nsModal.propertyChange = function(attrName, oldVal, newVal, setProperty) 
{
	this.base.propertyChange(attrName, oldVal, newVal, setProperty);
};

nsModal.removeComponent = function() 
{
	if(this.__overlayMouseUpRef)
	{
		this.util.removeEvent(document,"mouseup",this.__overlayMouseUpRef);
		this.__overlayMouseUpRef = null;
	}
	if(this.__overlayMouseMoveRef)
	{
		this.util.removeEvent(document,"mousemove",this.__overlayMouseMoveRef);
		this.__overlayMouseMoveRef = null;
	}
	if(this.__onkeydownRef)
	{
		this.util.removeEvent(document,"keydown",this.__onkeydownRef);
		this.__onkeydownRef = null;
	}
	this.base.removeComponent();
};



nsModal.showModal = function(childComponent,title,isTitleRequired,isCloseRequired,isFadeCloseRequired,isDragable)
{
	this.__isTitleAllowed = isTitleRequired;
	this.__isCloseAllowed = isCloseRequired;
	if(!this.__divFade)
	{
		this.__createFade(isFadeCloseRequired);
	}
	if(!this.__divPopUp)
	{
		this.__createPopUp(title,childComponent,isDragable);
	}
	if(this.__isCloseAllowed)
	{
		//To detect escape button
		this.__onkeydownRef = this.__onkeydown.bind(this);
		this.util.addEvent(document,"keydown",this.__onkeydownRef);
	}
	
	this.__setModalVisibility(true);
};

nsModal.hideModal = function ()
{
	this.__setModalVisibility(false);
};

nsModal.closeModal = function ()
{
	this.removeModal();
	this.util.dispatchEvent(this,"CLOSE");
};

nsModal.removeModal = function ()
{
	this.__removeFade();
	this.__removeOverlay();
};

nsModal.__onkeydown = function (event)
{
	event = event || window.event;
	if (event.keyCode == 27) 
	{
		this.closeModal();
	}
};

nsModal.__setModalVisibility = function (isVisible)
{
	this.__setFadeVisibility(isVisible);
	this.__setOverlayVisibility(isVisible);
};

nsModal.__createFade = function (isFadeCloseRequired)
{
	this.__divFade = this.util.createDiv("divFade");
	this.__divFade.style.display = "none";
	this.__divFade.style.position = "absolute";
	this.__divFade.style.left = "0%";
	this.__divFade.style.top = "0%";
	this.__divFade.style.backgroundColor = "#000000"; 
	this.__divFade.style.opacity = "0.7";
	this.__divFade.style.filter = "alpha(opacity=70)"; // For Internet Explorer
	this.__divFade.style.width = "100%";
	this.__divFade.style.height = "100%";
	this.__divFade.style.zIndex = "90";
	if(isFadeCloseRequired)
	{
		var btnFadeClose = this.__createFadeCloseButton();
		this.__divFade.appendChild(btnFadeClose);
	}
	document.body.appendChild(this.__divFade);  
};

nsModal.__createFadeCloseButton = function ()
{
	var btnFadeClose = this.__getCloseButton("bottomleft");
	return btnFadeClose;
};

nsModal.__setFadeVisibility = function (isVisible)
{
	if(this.__divFade)
	{
		this.util.setDivVisibility("divFade",isVisible);
	}
};

nsModal.__removeFade = function ()
{
	this.util.removeDiv("divFade");
	this.__divFade = null;
};

nsModal.__createCloseButton = function ()
{
	var btnClose = this.__getCloseButton("topleft");
	var nsTip = new NSPinTip(btnClose, "topleft");
	return btnClose;
};

nsModal.__createTitleBar = function(title)
{
	this.__divTitleBar = this.util.createDiv("divTitleBar",this.__titleStyle);
	this.__divTitleBar.style.position = "relative";
	this.__divTitleBar.innerHTML = title;
	if(this.__isCloseAllowed)
	{
		var btnClose = this.__createCloseButton();
		this.__divTitleBar.appendChild(btnClose);  
	}
};

nsModal.__createPopUp = function (title,childComponent,isDragable)
{
	this.__divPopUp = this.util.createDiv("divOverlay","nsModalPopUp");
	this.__divPopUp.style.display = "none";
	this.__divPopUp.style.position = "absolute";
	this.__divPopUp.style.padding = "0px";
	this.__divPopUp.style.zIndex = "99999";
	if(this.__isTitleAllowed)
	{
		this.__createTitleBar(title);
		this.__divPopUp.appendChild(this.__divTitleBar);
	}
	if(childComponent)
	{
		this.__divPopUp.appendChild(childComponent);
	}
	document.body.appendChild(this.__divPopUp); 
	if(isDragable)
	{
		this.__addDragFeature();
	}
};

nsModal.__setOverlayVisibility = function(isVisible)
{
	if(this.__divPopUp)
	{
		this.util.setDivVisibility("divOverlay",isVisible);
	}
};

nsModal.__removeOverlay = function ()
{
	this.util.removeDiv("divOverlay");
	this.__divPopUp = null;
};

nsModal.__addDragFeature = function ()
{
	if(this.__divTitleBar)
	{
		this.__titleBarMouseOverRef = this.__titleBarMouseOverHandler.bind(this);
	    this.__titleBarMouseDownRef = this.__titleBarMouseDownHandler.bind(this);
	    this.__overlayMouseUpRef = this.__overlayMouseUpHandler.bind(this);
	    this.__overlayMouseMoveRef = this.__overlayMouseMoveHandler.bind(this);
		
		this.util.addEvent(this.__divTitleBar,"mouseover",this.__titleBarMouseOverRef);
		this.util.addEvent(this.__divTitleBar,"mousedown",this.__titleBarMouseDownRef);
		this.util.addEvent(document,"mouseup",this.__overlayMouseUpRef);
		this.util.addEvent(document,"mousemove",this.__overlayMouseMoveRef);
	}
};

nsModal.__titleBarMouseOverHandler = function(event)
{
	if(this.__divTitleBar)
	{
		this.__divTitleBar.style.cursor = "move";
	}
};

nsModal.__titleBarMouseDownHandler = function(event)
{
	event = this.util.getEvent(event);
	var rect = this.__divPopUp.getBoundingClientRect();
	//console.log(rect.top, rect.right, rect.bottom, rect.left);
    this.__dragCurrentX = rect.left;
    this.__dragCurrentY = rect.top;
    this.__dragMove = true;
    this.__dragMouseX = event.clientX;
    this.__dragMouseY = event.clientY;
};

nsModal.__overlayMouseUpHandler = function (event)
{
	event = this.util.getEvent(event);
    this.__dragMove = false;
};

nsModal.__overlayMouseMoveHandler = function (event)
{
	if (this.__dragMove) 
	{
		event = this.util.getEvent(event);
		this.__dragCurrentX = parseInt(this.__dragCurrentX) + parseInt(event.clientX) - parseInt(this.__dragMouseX);
        this.__dragCurrentY = parseInt(this.__dragCurrentY) + parseInt(event.clientY) - parseInt(this.__dragMouseY);
        
        //if(this.__dragCurrentX > -1 && this.__dragCurrentY > -1 && this.__dragCurrentX < window.innerWidth  && this.__dragCurrentY < window.innerHeight)
        //{
            this.__dragMouseX = event.clientX;
            this.__dragMouseY = event.clientY;
            
            console.log("x is " + this.__dragCurrentX + " and y is " + this.__dragCurrentY);
            this.__divPopUp.style.left = parseInt(this.__dragCurrentX) + 'px';
            this.__divPopUp.style.top = parseInt(this.__dragCurrentY) + 'px';
//        }
//        else
//        {
//        	if(this.__dragCurrentX < 0)
//        	{
//        		this.__dragCurrentX = 0;
//        	}
//        	else if(this.__dragCurrentX > window.innerWidth)
//        	{
//        		this.__dragCurrentX = window.innerWidth;
//        	}
//        	if(this.__dragCurrentY < 0)
//        	{
//        		this.__dragCurrentY = 0;
//        	}
//        	else if(this.__dragCurrentY > window.innerHeight)
//        	{
//        		this.__dragCurrentY = window.innerHeight;
//        	}
//        }
 
	}
};

nsModal.__getCloseButton = function()
{
	var btnClose = document.createElement("a");
	btnClose.setAttribute("href","javascript:void(0)");
	btnClose.className = this.__closeButtonStyle;
    btnClose.style.textDecoration="none";
    btnClose.style.position = "absolute";
    btnClose.style.top = "0px";
    btnClose.style.right = "10px";
	btnClose.style.clear = "both"; 
	btnClose.innerHTML = "X";
	btnClose.setAttribute("nsPinTip","Click here to Close");
	btnClose.onclick = this.closeModal.bind(this);
	
	return btnClose;
};





document.registerElement("ns-modal", {prototype: nsModal});var nsProgressBar = Object.create(nsContainerBase);

nsProgressBar.initializeComponent = function() 
{
	this.base.initializeComponent();
	this.__modal = null;
	this.__divParentLoader = null;
	this.__divMessage = null;
	this.__divLoader = null;
	this.__divLoaderBar = null;
	this.__divLoaderText = null;
	
	this.__modal = document.createElement("ns-modal");
	this.util.addEvent(this.__modal,"CLOSE",this.__modalCloseHandler.bind(this));
};

nsProgressBar.setComponentProperties = function() 
{
	this.base.setComponentProperties();
};

nsProgressBar.propertyChange = function(attrName, oldVal, newVal, setProperty) 
{
	this.base.propertyChange(attrName, oldVal, newVal, setProperty);
};

nsProgressBar.show = function(bodyTemplateID,title,isTitleRequired,isDragable)
{
	this.__createParentLoader(bodyTemplateID);
	this.__modal.showModal(this.__divParentLoader,title,isTitleRequired,true,true,isDragable);
};

nsProgressBar.remove = function()
{
	this.__modal.closeModal();
};

nsProgressBar.progressBarCallBack = function(filesDownloaded,totalFiles)
{
	var progressBarText = Math.round((filesDownloaded * 100)/totalFiles) + "% downloaded";
	var progressBarWidth = Math.round((filesDownloaded * 100)/totalFiles);
	this.__divLoaderBar.style.width = progressBarWidth + '%';
	this.__divLoaderText.innerHTML = progressBarText;
};

nsProgressBar.__createParentLoader = function(bodyTemplateID)
{
	this.__divParentLoader = this.util.createDiv("divParentLoader");
	this.__divParentLoader.style.padding = "25px";
	this.__divParentLoader.style.paddingTop = "7%";
	this.__divParentLoader.appendChild(this.__createLoader());
	if(bodyTemplateID)
	{
		this.__divMessage = this.util.createDiv("divMessage");
		this.util.addTemplateInContainer(this.__divMessage,bodyTemplateID);
		this.__divParentLoader.appendChild(this.__divMessage);
	}
	return this.__divParentLoader;
};

nsProgressBar.__createLoader = function()
{
	this.__divLoader = this.util.createDiv("divLoader","nsProgressBarLoader");
	this.__divLoader.style.width = "100%";
	this.__createLoaderBar();
	this.__divLoader.appendChild(this.__divLoaderBar);
	this.__createLoaderText();
	this.__divLoader.appendChild(this.__divLoaderText);
	
	return this.__divLoader;
};

nsProgressBar.__createLoaderBar = function()
{
	this.__divLoaderBar = this.util.createDiv("divLoaderBar","nsProgressBarLoaderBar");	
};

nsProgressBar.__createLoaderText = function()
{
	this.__divLoaderText = this.util.createDiv("divLoaderText","nsProgressBarLoaderText");	
};

nsProgressBar.__modalCloseHandler = function(event)
{
	this.util.dispatchEvent(this,"CLOSE");
};

document.registerElement("ns-progressbar", {prototype: nsProgressBar});