analytics/webcontent/cps4/portlets/appeditor/objectSelect.js

//Licensed Materials - Property of IBM

//IBM Cognos Products: cpscrn

//(C) Copyright IBM Corp. 2013

//US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

/*
Note: The following  must be included in any HTML page using this javascript

<link rel="stylesheet" type="text/css" href="../dojo16/dijit/themes/tundra/pstundra.css" />
<link rel="stylesheet" type="text/css" href="../dojo16/dojox/grid/resources/pstundraGrid.css" />
<link rel="stylesheet" type="text/css" href="../skins/classic/portal/pager.css" />
<link href="/ibmcognos/skins/corporate/portal/default.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="../dojo16/dojo/dojo.js"></script>
<script type="text/javascript" src="../dojo16/dojo/psdojo.js"></script>
 */


function CMObjectSelect(selectorID, parentID, cancelCallback, okCallback, selectionTypes, context){
	window[selectorID] = this;
	this.context = context;
	
	this.selectorID = selectorID;
	this.parentID = parentID;
	this.cancelCallback = cancelCallback;
	this.okCallback = okCallback;
	this.selectionTypes = selectionTypes;
	this.selection;
	this.objectPager;	
	this.breadStack = new Array();

	this.objectPagerURL = context.getProxiedURI(context.getGatewayURI() + '/atom/cm?json=true');
	this.pagerWebcontent = context.getWebContentURI();	
}

CMObjectSelect.prototype = {
		render:function(){			
			var selectorDiv = document.createElement("div");
			selectorDiv.id = this.selectorID;

			//We default the object selector to be hidden
			selectorDiv.style.display = "none";

			var outerBreadcrumbDiv = document.createElement("div");
			var outerPagerDiv = document.createElement("div");
			var outerButtonDiv = document.createElement("div");

			var breadcrumbDiv = document.createElement("div");
			var pagerDiv = document.createElement("div");
			var buttonDiv = document.createElement("div");

			breadcrumbDiv.id = this.selectorID + "_breadcrumb";
			pagerDiv.id = this.selectorID + "_objectPager";
			buttonDiv.id = this.selectorID + "_selectbuttons";

			outerBreadcrumbDiv.style.padding = "3px";
			outerPagerDiv.style.padding = "3px";
			outerButtonDiv.style.padding = "3px";

			var parent = document.getElementById(this.parentID);

			parent.appendChild(selectorDiv);

			selectorDiv.appendChild(outerBreadcrumbDiv);
			selectorDiv.appendChild(outerPagerDiv);
			selectorDiv.appendChild(outerButtonDiv);

			outerBreadcrumbDiv.appendChild(breadcrumbDiv);
			outerPagerDiv.appendChild(pagerDiv);
			outerButtonDiv.appendChild(buttonDiv);

			this._initializeBreadcrumb();
			this._createPager();
			this._createButtons();
		},

		_cmObject:function(storeID, type, tooltip, iconLink, downloadLink, pathString) {
			this.storeID = storeID;
			this.type = type;
			this.tooltip = tooltip;
			this.iconLink = iconLink;
			this.downloadLink = downloadLink;
			this.pathString = pathString;
		},		

		_createPager:function() {
			var objectPagerLayout;		

			var _self = this;
			objectPagerLayout = [
			                     {
			                    	 field: 'title',
			                    	 name: 'Select Object',
			                    	 width: '100%',

			                    	 formatter: function(data, index) {
			                    		 var entry = _self.objectPager.getEntry(index);

			                    		 var storeID = _self._parseStoreID(entry.cm$storeID[0]);
			                    		 var type = entry.cm$objectClass[0];
			                    		 var tooltip = data._text;
			                    		 var iconLink = _self.context.makeAbsolute(_self.pagerWebcontent,_self.objectPager.getEntryLink(entry, 'icon').href);
			                    		 var downloadLink = "";

			                    		 if (_self.objectPager.getEntryLink(entry, 'alternate') != undefined && _self.objectPager.getEntryLink(entry, 'alternate').type == "application/atom+xml") {
			                    			 downloadLink = _self.context.getProxiedURI(_self.context.makeAbsolute(_self.context.getGatewayURI(),_self.objectPager.getEntryLink(entry, 'alternate').href));
			                    		 }

			                    		 var burstKey = entry.cm$burstKeyDisplayString[0];

			                    		 var markup = '<div>';								

			                    			 if (downloadLink != "") {										
			                    				 markup += '<a href="#" onclick="window[\'' + _self.selectorID + '\']._digIntoObject(';
			                    				 markup += "'" +  storeID + "'" + ",";
			                    				 markup += "'" +  type + "'" + ",";	
			                    				 markup += "'" +  tooltip + "'" + ",";		
			                    				 markup += "'" +  iconLink + "'" + ",";		
			                    				 markup += "'" +  downloadLink + "'" + ",";																					
			                    				 markup += 'false';
			                    				 markup += ')" onkeypress="javascript:if (event.keyCode==13 || event.keyCode==32 || event.charCode==32){window[\'' + _self.selectorID + '\']._digIntoObject(';
			                    				 markup += "'" +  storeID + "'" + ",";
			                    				 markup += "'" +  type + "'" + ",";	
			                    				 markup += "'" +  tooltip + "'" + ",";		
			                    				 markup += "'" +  iconLink + "'" + ",";		
			                    				 markup += "'" +  downloadLink + "'" + ",";																					
			                    				 markup += 'false';
			                    				 markup += ');return false;} return true;">';
			                    				 markup += '<img height="16" width="16" src="' +  iconLink+ '" title="' + tooltip + '" style="vertical-align:middle;margin-right: 4px;" />';
			                    				 markup += '</a>';

			                    				 markup += '<a href="#" onclick="window[\'' + _self.selectorID + '\']._digIntoObject(';
			                    				 markup += "'" +  storeID + "'" + ",";
			                    				 markup += "'" +  type + "'" + ",";	
			                    				 markup += "'" +  tooltip + "'" + ",";		
			                    				 markup += "'" +  iconLink + "'" + ",";		
			                    				 markup += "'" +  downloadLink + "'" + ",";																					
			                    				 markup += 'false';
			                    				 markup += ')" onkeypress="javascript:if (event.keyCode==13 || event.keyCode==32 || event.charCode==32){window[\'' + _self.selectorID + '\']._digIntoObject(';
			                    				 markup += "'" +  storeID + "'" + ",";
			                    				 markup += "'" +  type + "'" + ",";	
			                    				 markup += "'" +  tooltip + "'" + ",";		
			                    				 markup += "'" +  iconLink + "'" + ",";		
			                    				 markup += "'" +  downloadLink + "'" + ",";																					
			                    				 markup += 'false';
			                    				 markup += ');return false;} return true;">'  + tooltip +  '</a></div>';
			                    			 } else {
			                    				 markup += '<img height="16" width="16" src="' + iconLink  + '" title="' + tooltip + '" style="vertical-align:middle;margin-right: 4px;" />';
			                    				 markup +=  tooltip +  '</div>';
			                    			 }
			                    		 return markup;
			                    	 }
			                     }
			                     ];						
			this.objectPager = new ps.pager({
				id: this.selectorID + '_objectPager',
				webcontent: this.pagerWebcontent,
				url: this.objectPagerURL,
				layoutSpec: objectPagerLayout, 
				rowAction: dojo.hitch(this, this._updateSelection), 
				initialRowSelect:true}, 
				this.selectorID + '_objectPager');

			var temp = '';
		},

		_updateSelection:function(entry) {
			var downloadLink = "";					
			if (this.objectPager.getEntryLink(entry, 'alternate') != undefined && this.objectPager.getEntryLink(entry, 'alternate').type == "application/atom+xml") {
				downloadLink = this.context.getProxiedURI(this.context.getGatewayURI(),this.objectPager.getEntryLink(entry, 'alternate').href);
			}
			
			var pathString = this._buildStringPath();

			var cmObj = new this._cmObject(
					this._parseStoreID(entry.cm$storeID[0]),
					entry.cm$objectClass[0],
					entry.title[0]._text,					
					this.context.makeAbsolute(this.pagerWebcontent,this.objectPager.getEntryLink(entry, 'icon').href),					
					downloadLink,
					pathString
			);

			this.selection = cmObj;						
			this._updateOKButton();
		},

		_createButtons:function() {
			var markup = '';

			markup += "<table class=\"\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" role=\"presentation\" summary=\"\">";
			markup += "<tbody><tr><td width=\"1\" valign=\"middle\">";
			markup += "<img width=\"1\" height=\"10\" alt=\"\" src=\"" + this.pagerWebcontent + "/ps/images/space.gif\">";
			markup += "</td></tr></tbody></table>";
			markup += "<table class=\"dialogButtonBar\" cellspacing=\"0\" cellpadding=\"1\" border=\"0\" role=\"presentation\" summary=\"\">";
			markup += "<tbody><tr><td width=\"3\" valign=\"middle\">";
			markup += "<img width=\"3\" alt=\"\" src=\"" + this.pagerWebcontent + "/ps/images/space.gif\">";
			markup += "</td>";
			markup += "<td valign=\"middle\">";
			markup += "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" role=\"presentation\" summary=\"\">";
			markup += "<tbody><tr><td valign=\"middle\" align=\"center\" nowrap=\"\">";
			markup += "<img width=\"55\" height=\"1\" alt=\"\" src=\"" + this.pagerWebcontent + "/ps/images/space.gif\"><br>";
			markup += "<button id=\"" + this.selectorID + "_obSelOK\" type = \"button\" class=\"commandButton\" style=\"padding-right:10px; padding-left:10px; padding-top:2px; padding-bottom:3px; width:80px;\" \r\n" + 
			//OK onclick here
			"	onmousedown=\"this.className = \'commandButtonDown\'\" onmouseout=\"this.className = \'commandButton\'\" onmouseover=\"this.className = \'commandButtonOver\'\" \r\n" + 
			"	onclick=\"window[\'" + this.selectorID + "\']._acceptSelection()\" onkeypress=\"javascript:if( event.keyCode==13 || event.keyCode==32 || event.charCode==32 ){this.onclick(); return false;} return true;\">OK</button>";
			markup += "</td>";
			markup += "<td><img width=\"10\" height=\"1\" alt=\"\" src=\"" + this.pagerWebcontent + "/ps/images/space.gif\"></td>";
			markup += "<td valign=\"middle\" align=\"center\" nowrap=\"\">	";
			markup += "<img width=\"55\" height=\"1\" alt=\"\" src=\"" + this.pagerWebcontent + "/ps/images/space.gif\"><br>";
			markup += "<button type = \"button\" class=\"commandButton\" style=\"padding-right:10px; padding-left:10px; padding-top:2px; padding-bottom:3px; width:80px;\" \r\n" + 
			"	onmousedown=\"this.className = \'commandButtonDown\'\" onmouseout=\"this.className = \'commandButton\'\" onmouseover=\"this.className = \'commandButtonOver\'\"  \r\n" + 
			//Cancel onclick here
			"	onclick=\"window[\'" + this.selectorID + "']._cancelSelection()\" onkeypress=\"javascript:if( event.keyCode==13 || event.keyCode==32 || event.charCode==32 ){this.onclick(); return false;} return true;\">Cancel</button>\r\n";
			markup += "</td>";
			markup += "<td><img width=\"10\" height=\"1\" alt=\"\" src=\"" + this.pagerWebcontent + "/ps/images/space.gif\"></td>";
			markup += "</tr></tbody></table></td>";
			markup += "<td width=\"100%\"> </td>";
			markup += "</tr></tbody></table>";

			document.getElementById(this.selectorID + "_selectbuttons").innerHTML = markup;
		},
		

		_parseStoreID:function(originalID) {
			var location = originalID.indexOf('\'') + 1;
			var newID = originalID.substring(location, originalID.length);

			location = newID.indexOf('\'');
			newID = newID.substring(0, location);

			return newID;
		},

		_digIntoObject:function(storeID, type, tooltip, iconLink, downloadLink, breadcrumbCall) {
			var cmObj = new this._cmObject(storeID, type, tooltip, iconLink, downloadLink);

			this._updateBreadcrumb(breadcrumbCall, cmObj);

			//update the pager
			this.objectPager.getData(downloadLink);					
		},

		_initializeBreadcrumb:function() {
			var root = new this._cmObject("","root","Cognos","", this.objectPagerURL);
			this.breadStack.push(root);

			document.getElementById(this.selectorID + "_breadcrumb").innerHTML = this._buildBreadcrumb();;
		},

		_buildLink:function(cmObj) {
			var markup = '';
			
			markup += '<a href="#" onclick="window[\'' + this.selectorID + '\']._digIntoObject(';
			markup += "'" +  cmObj.storeID + "'" + ", ";
			markup += "'" +  cmObj.type + "'" + ", ";	
			markup += "'" +  cmObj.tooltip + "'" + ", ";		
			markup += "'" +  cmObj.iconLink + "'" + ", ";		
			markup += "'" +  cmObj.downloadLink + "'" + ", ";																					
			markup += 'true';
			markup += ')" onkeypress="javascript:if (event.keyCode==13 || event.keyCode==32 || event.charCode==32){window[\'' + this.selectorID + '\']._digIntoObject(';;
			markup += "'" +  cmObj.storeID + "'" + ", ";
			markup += "'" +  cmObj.type + "'" + ", ";	
			markup += "'" +  cmObj.tooltip + "'" + ", ";		
			markup += "'" +  cmObj.iconLink + "'" + ", ";		
			markup += "'" +  cmObj.downloadLink + "'" + ", ";																					
			markup += 'true';
			markup += ');return false;} return true;">'  + cmObj.tooltip +  '</a>';
			return markup;
		},		

		_buildBreadcrumb:function() {	
			var markup = '';

			for(var i = 0; i < this.breadStack.length - 1; i++) {
				markup += this._buildLink(this.breadStack[i]);
				markup += " > ";
			}
			
			markup +=  this.breadStack[this.breadStack.length - 1].tooltip;

			return markup;
		},
		
		_buildStringPath:function() {
			var markup = '';
			for(var i = 0; i < this.breadStack.length; i++) {
				markup += this.breadStack[i].tooltip;
				markup += " > ";
			}

			return markup;
		},

		_updateBreadcrumb:function(isBreadcrumbCall, newCMObj) {
			if (isBreadcrumbCall == true) {
				var flag = false;

				while (flag == false) {
					if (this.breadStack.length <= 0) {
						break;
					}

					var crumb = this.breadStack.pop();

					if (crumb.storeID == newCMObj.storeID) {
						this.breadStack.push(newCMObj);
						flag = true;
					}
				}						
			}
			else {
				this.breadStack.push(newCMObj);
			}

			var breadcrumb = this._buildBreadcrumb();					
			document.getElementById(this.selectorID + "_breadcrumb").innerHTML = breadcrumb;
		},

		_updateOKButton:function() {
			if (this._arrayContains(this.selectionTypes, this.selection.type)) {
				//Allow button to be pressed						
				document.getElementById(this.selectorID + "_obSelOK").disabled = false;
				document.getElementById(this.selectorID + "_obSelOK").setAttribute("class","commandButton");	
			} else {
				//Prevent button from being pressed
				document.getElementById(this.selectorID + "_obSelOK").disabled = true;
				document.getElementById(this.selectorID + "_obSelOK").setAttribute("class","commandButtonInactive");							
			}
		},
		
		_arrayContains:function(array, item) {
			for(var i = 0; i < array.length; i++) {
				if (array[i] === item) {
					return true;
				}
			}
			
			return false
		},

		_cancelSelection:function(){
			this.cancelCallback();
		},

		_acceptSelection:function(){
			this.okCallback(new Array(this.selection));
		},
		
		//Fixes issue where grid does not appear until window is resized
		resizePager:function(){		
			this.objectPager.grid.resize();	
		}
}