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

//    Licensed Materials - Property of IBM
//
//    IBM Cognos Products: cpscrn
//
//    (C) Copyright IBM Corp. 2005, 2013
//
//    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

function CCAppEditor(id, context){
	this.id = id;
	this.context = context;
	window[id] = this;
	this.idGenCounter = 0;
	
	this.objectSelectMap = {};
}

CCAppEditor.prototype = {
		_generateId: function(){
			return  this.id + this.idGenCounter++;
		},
		getAppId: function (){
			return this.id;
		},		
		getUniqueId: function (name){
			return this.getAppId() + name;
		},
		render: function(){
			// Fetch the list of applications
			var _self = this;
			var xhr = this.context._getXHR({
				onSuccess: function(obj){
					try {
						var response = JSON.parse(obj.responseText);
						_self.applications = response.applications;					
						var appId = _self.context.getSetting('app.id');
						if (appId){
							_self.renderApplicationSettings(appId);
						}else {
							_self.renderApplicationList();
						}
					} catch (e) {
						
						console.log(e);
					}

				}
				
			});
		    xhr.open('GET', this.context.getProxiedURI(this.context.getGatewayURI() + '?b_action=xts.run&m=cps4/portlets/sdk2/service/getapps.xts'));
		    xhr.send();
		    
			
			// Check the current App setting.
		},
		_getApp:function(id){
			var app = null;
			if (this.applications && this.applications.applicationList){
				for (var i = 0 ; i< this.applications.applicationList.length; i++){
					if (this.applications.applicationList[i].id == id ){
						app = this.applications.applicationList[i];
						break;
					}
				}
			}
			return app;
		},
		renderApplicationSettings:function(appId){
			var app = this._getApp(appId);
			this.currentApp = app;
			if (app){								
				var html = this._getEditPageHeader(app);
				html += this._getEditPageContent(app);
			}
			
			var mainDiv = document.getElementById(this.getUniqueId('EditorMain'));
			mainDiv.innerHTML = html;
			
			
		},
		
		_getEditPageHeader:function(app){
			var html = '<div class="cogSelectedAppHeader">';				
			html+= this.htmlEncode(this._getMessageFromObject(app.title));				
			html+='<div class="cogSelectedAppChange" onclick="window[\''+this.getAppId()+'\'].renderApplicationList()">';
			html+='Change selected application';
			html+='</div>';				
			html+='</div>';
			return html;
		
		},
		_getEditPageContent:function(app){
			var html = '<div class="cogAppEditContent">';	
			html +='<form name="'+this.getUniqueId('form')+'">';
			html += '<input type="hidden" name="app.url" value="'+this.htmlEncode(app.url)+'">';			
			html += '<input type="hidden" name="app.id" value="'+this.htmlEncode(app.id)+'">';
			
			if (app.messagefile != undefined) {
				html += '<input type="hidden" name="app.messagefile" value="'+this.htmlEncode(app.messagefile)+'">';
			}
			
			if (app.path != undefined) {
				html += '<input type="hidden" name="app.path" value="'+this.htmlEncode(app.path)+'">';
			}
						
			if (app.features && app.features.featureList){
				html += '<input type="hidden" name="app.features" value="'+this.htmlEncode(app.features.featureList.toString())+'">';
			}
			
			if (app.properties && app.properties.propertyGroupList){
				for (var i = 0 ; i < app.properties.propertyGroupList.length; i++){					
					html+= this._getEditPageGroup(app.properties.propertyGroupList[i]);
				}
			}		
			
			
			
			html += '<div class="cogAppFormFooter">';
			
			html += '<input class="portlet-form-button" type="button" onclick="window[\''+this.getAppId()+'\'].context.saveSettings(document.forms[\''+this.getUniqueId('form') + '\'])" name="OK" value="OK">';
			html += '&nbsp;&nbsp;';
			html += '<input class="portlet-form-button" type="button" name="Cancel" value="Cancel" onclick="window[\''+this.getAppId()+'\'].context.cancelSettings()">';
			html += '&nbsp;&nbsp;';
			html += '<input class="portlet-form-button" type="button" name="Reset" value="Reset" onclick="window[\''+this.getAppId()+'\'].context.resetSettings()">';
			
			html += '</div>';
			html+='</form>';
			html+='</div>';
			
			return html;
		
		},
		
		_getEditPageGroup: function(group){
			var html = '<div class="cogAppEditGroup">';	
			
			html += '<div class="cogAppEditGroupTitle">';
			html += this.htmlEncode(this._getMessageFromObject(group.title));
			html+='</div>';
			
			if (group.propertyList){
				for (var i = 0 ; i <group.propertyList.length; i++){					
					var prop = group.propertyList[i];
					if (prop.control && prop.control.dependsOnChoice){
						 // Dependent properties are rendered with the properties they depend on
						continue;
					}
					
					html+= this._getEditPageProperty(prop, group);
					
					
				}
			}
			html+='</div>';
			return html;
		},
		_getEditPageProperty: function(property, group){
			var html = '<div class="cogAppEditProperty">';	
			if (property.control && this._getMessageFromObject(property.control.label)){
				html +='<div class="cogAppEditPropertyDesc">';	
				html += this.htmlEncode(this._getMessageFromObject(property.control.label));
				html+='</div>'
			}
			html +='<div class="cogAppEditPropertyControl">';	
			html += this._getEditPagePropertyControl(property, group);			
			html+='</div>';
			html+='</div>';
			return html;
		},
		
		_getEditPagePropertyControl: function(property, group){
			var type;
			if (property.control){
				type = property.control.type;
			}
			if (!type){
				type = 'text'; // Default control type
			}
			
			var name = property.name;
			var valueList = this._getPropertyValueList(property);
			var size = this._getControlAttribute(property, 'size', 25);
			
			var isDisabled = false;
			if (property.control && property.control.dependsOnChoice){
				var p = this._getPropertyByName(property.control.dependsOnChoice.name, group);
				if (p){
					var v = this._getPropertyValueList(p);
					isDisabled = (this.indexOf(v, property.control.dependsOnChoice.value) == -1)
				}
			}
			
			var id = this._generateId();
			property.controlId = id;
			
			property.dependents = this._getDependentProperties(name, group);
			
			var html = '';
			if (type == 'text'){
				var value = valueList.length > 0  ? valueList[0]: '';
				// Text control
				html += '<input size="'+this.htmlEncode(size)+'" name="'+this.htmlEncode(name)+'" type="text" value="'+this.htmlEncode(value) +'"';
				if (isDisabled){
					html+=' disabled="true"';
				}
				html+='/>';
			}else if (type == 'radio' || type=='checkbox'){
				
				
				// Radio control
				for (var i = 0; i < property.control.choiceList.length; i++){
					var isChecked = (( valueList.length == 0) && i == 0 && type == 'radio') || 
						(this.indexOf(valueList, property.control.choiceList[i].value) != -1);
					html += this._getChoice(property, property.control.choiceList[i], type, name, group, isChecked, isDisabled, id);
				}				
			} else if (type == 'cmobject'){
				var propertyName = this.htmlEncode(name);
				
				var parentID = this.getUniqueId('objectSelect');
				var selectorID = this.getUniqueId(propertyName);
				var validTypes;
				
				if (property.control.value == undefined) {
					validTypes =  property.control.valueList;
				} else {
					validTypes = new Array(property.control.value);
				}
				
				var _self = this;
		
				function objectSelectOkCallback(cmObjs) {		
					var cmObj = cmObjs[0];
							
					document.getElementById(selectorID + "_tooltip").innerHTML = cmObj.tooltip + '	';
					document.getElementById(selectorID + "_input").value = cmObj.storeID;
					
					document.getElementById(selectorID + '_input').value = cmObj.storeID;
					document.getElementById(selectorID + '_inputImg').value = cmObj.iconLink;
					document.getElementById(selectorID + '_inputPath').value = cmObj.pathString;
					document.getElementById(selectorID + '_inputName').value = cmObj.tooltip;

					document.getElementById(selectorID + "_path").innerHTML = cmObj.pathString;
					document.getElementById(selectorID + "_icon").src = cmObj.iconLink;
					document.getElementById(selectorID + "_tooltip").innerHTML = cmObj.tooltip + '		';
						
					document.getElementById(selectorID + "_clear").style.display = 'block';
					
					objectSelectCancelCallback();
				}
				
				function objectSelectCancelCallback() {
					document.getElementById(selectorID).style.display = 'none';
					document.getElementById(_self.getUniqueId('EditorMain')).style.display = 'block';		
				}								
				
				//Create CMObjectSelect instance
				if (!this.objectSelectMap[selectorID]) {
					this.objectSelectMap[selectorID] = new CMObjectSelect(selectorID, parentID, objectSelectCancelCallback, objectSelectOkCallback, validTypes, this.context);
					this.objectSelectMap[selectorID].render();
				}	
						
				var input = '';
				var inputImg = '';
				var inputPath = '';
				var inputName = '';
				var path = '';
				var icon = '';
				var tooltip = '';
				
				var clearVisibility = 'none';
				
				if (this.context.settings[this.htmlEncode(name)] != undefined && this.context.settings[this.htmlEncode(name)] != '') {
					input = this.context.settings[this.htmlEncode(name)];
					inputImg = this.context.settings[this.htmlEncode(name) + '.img'];
					inputPath = this.context.settings[this.htmlEncode(name) + '.path'];
					inputName = this.context.settings[this.htmlEncode(name) + '.name'];

					path = this.context.settings[this.htmlEncode(name) + '.path'];
					icon = this.context.settings[this.htmlEncode(name) + '.img'];
					tooltip = this.context.settings[this.htmlEncode(name) + '.name'] + '		';
										
					clearVisibility = 'block';
				}
				
				html += '<span id="'+ selectorID +'_path' +'">' + path + '</span>';
				html += '<img id="' + selectorID + '_icon' +'"height="16" width="16" src="' + icon + '" title="' + tooltip +'" style="vertical-align:middle;margin-right: 4px;" />';
				html += '<span id="'+ selectorID +'_tooltip' +'">' + tooltip + '</span>';
				
				html += '<a id="'+ selectorID + '_link'+'" href="javascript:window[\''+this.getAppId()+'\']._objectSelect(\''+selectorID+'\');">Select an object...		</a>';
				html += '<a id="'+ selectorID + '_clear'+'" style="display:' + clearVisibility + '" href="javascript:window[\''+this.getAppId()+'\']._objectSelectClear(\''+selectorID+'\');">Clear</a>';
				
				html += '<input type="hidden" id="'+ selectorID + '_input' + '" name="'+this.htmlEncode(name)+'" value="' + input + '"></input>';
				html += '<input type="hidden" id="'+ selectorID + '_inputImg' + '" name="'+this.htmlEncode(name)+ '.img' + '" value="' + inputImg + '"></input>';
				html += '<input type="hidden" id="'+ selectorID + '_inputPath' + '" name="'+this.htmlEncode(name)+ '.path' + '" value="' + inputPath + '"></input>';
				html += '<input type="hidden" id="'+ selectorID + '_inputName' + '" name="'+this.htmlEncode(name)+ '.name' + '" value="' + inputName + '"></input>';		
			}
			return html;
		},
				
		_getChoice:function(property, choice, type, name, group, checked, isDisabled, id){

			
			var choiceDependents = property.dependents[choice.value];
			var hasDependents = choiceDependents && choiceDependents.length > 0;
			
			var html = '<input onchange="window[\''+this.getAppId()+'\']._choiceChanged(this, \''+id+'\')" name="'+this.htmlEncode(name)+'" type="'+ this.htmlEncode(type)+ '" value="'+this.htmlEncode(choice.value)+ '"';
			if (checked){
				html+= ' checked=""';	
			}
			if (isDisabled){
				html+=' disabled="true"';
			}
			html += '/>';
			html += this.htmlEncode(this._getMessageFromObject(choice.label)) + '<br>';	

			// Render dependent properties
			if (hasDependents){
				html +='<div class="cogAppSubProps">';
				for (var i = 0; i < choiceDependents.length; i++){
					html += this._getEditPageProperty(choiceDependents[i], group);				
				}
				html+='</div>';
			}
			return html;
		},
		
		_getPropertyValueList: function(property) {
			var value = this.context.getSettingValues(property.name);
			if(value === undefined && property.control){
				value = property.control.defaultValueList;
			}
			if(value === undefined){
				value = [];
			}
			return value;
		},
		_getControlAttribute: function(property, attribute, defaultValue ){
			var value;
			if(property.control){
				value = property.control[attribute];
			}
			if (!value){
				value = defaultValue;
			}
			return value;
		},
		_getPropertyById:function(id){
			
			if (this.currentApp.properties && this.currentApp.properties.propertyGroupList ){
				for (var i = 0 ; i< this.currentApp.properties.propertyGroupList.length; i++){
					var group =  this.currentApp.properties.propertyGroupList[i];
					if (group.propertyList){
						for (var i = 0 ; i <group.propertyList.length; i++){					
							var prop = group.propertyList[i];
							if (prop.controlId == id){
								return prop;
							}
						}
					}
					
				}
			}
			return null;
			
		},
		_getPropertyByName:function(name, group){
			var prop;
			if (group.propertyList){
				for (var i = 0 ; i< group.propertyList.length; i++){
					var p =  group.propertyList[i];
					if ( p.name = name){
						prop = p;
						break;
					}
				}
			}
			return prop;
			
		},
		
		_getDependentProperties: function(name, group){
			var props = {};
			if (group.propertyList){
				for (var i = 0 ; i< group.propertyList.length; i++){
					var p =  group.propertyList[i];
					if ( p.control && p.control.dependsOnChoice && p.control.dependsOnChoice.name == name){
						if (!props[p.control.dependsOnChoice.value]){
							props[p.control.dependsOnChoice.value] = [];
						}
						props[p.control.dependsOnChoice.value].push(p);
					}
				}
			}
			return props;
		},
		_choiceChanged: function(choice, id){
			var prop = this._getPropertyById(id);
			if (prop && prop.dependents){
				var choiceDependents= prop.dependents[choice.value];
				if (choiceDependents){
					for (var i = 0; i < choiceDependents.length; i++){
						var name = choiceDependents[i].name;
						var formControl = document.forms[this.getUniqueId('form')][name];
						if (formControl){
							formControl.disabled = !choice.checked;
						}
					}
				}
				
				if (choice.type == 'radio'){					
					// Disable properties dependent on other choices.					
					for (var name in prop.dependents){
						if (name != choice.value){
							var choiceDependents= prop.dependents[name];
							if (choiceDependents){
								for (var i = 0; i < choiceDependents.length; i++){
									var name = choiceDependents[i].name;
									var formControl = document.forms[this.getUniqueId('form')][name];
									if (formControl){
										formControl.disabled = choice.checked;
									}
								}
							}
						}
						
					}
					
				}
				
				
			}
			console.log(this._getPropertyById(id));
		},
		_getMessageFromObject: function(object) {
			if (object === undefined) {
				return;
			}
			
			var resourceID = object.resourceID;
			
			if (resourceID != undefined) {				
				return this.context.getMessage(resourceID);
			}
			else {
				return object;
			}
		},
		
		renderApplicationList: function(){
			var html = '<div class="cogAppEntryList">';
			if (this.applications && this.applications.applicationList){
				for (var i = 0 ; i< this.applications.applicationList.length; i++){
					html += '<div class="cogAppEntry" id="'+this.htmlEncode(this.applications.applicationList[i].id)+'">';
					var icon = this.applications.applicationList[i].icon;
					html += '<table cellpadding="0" cellspacing="0"><tr>'
					if (icon){
						html += '<td class="cogAppEntryIcon">';
						html += '<img src="'+ this.htmlEncode(icon.replace('$WEB$', this.context.getWebContentURI())) +'">';	
						html += '</td>';
					}else{
						html += '<td class="cogAppEntryIcon">';	
						html += '<img class="cogAppEntryEmptyIcon" src="'+ this.htmlEncode(this.context.getWebContentURI() + '/cps4/portlets/sdk/images/space.gif') +'">';
						
						html += '</td>';						
					}				
					html += '<td style="vertical-align:top;">';					
					html += '<div class="cogAppEntryTitle">';					
					html += this.htmlEncode(this._getMessageFromObject(this.applications.applicationList[i].title));
					html += '</div>';
					html += '<div class="cogAppEntryDesc">';					
					html += this.htmlEncode(this._getMessageFromObject(this.applications.applicationList[i].description));
					html += '</div>';
					html += '</tr></table>';
					html += '</td>';
					html +='</div>';
				}
			}
			html+='</div>';
			
			
			var mainDiv = document.getElementById(this.getUniqueId('EditorMain'));
			mainDiv.innerHTML = html;
			var _self = this;
			var entries = this.getElementsByClassName(mainDiv, 'cogAppEntry');
			for (var i = 0 ; i < entries.length; i++){
				entries[i].onclick =  function(event){
					_self.renderApplicationSettings(this.id);
				};
			}
		},
		
		_objectSelectClear: function(selectorID) {
			document.getElementById(selectorID + "_path").innerHTML ='';
			document.getElementById(selectorID + "_icon").src = '';
			document.getElementById(selectorID + "_tooltip").innerHTML = '';
			document.getElementById(selectorID + "_clear").style.display = 'none';
			
			document.getElementById(selectorID + "_input").value = '';
			document.getElementById(selectorID + "_inputPath").value ='';
			document.getElementById(selectorID + "_inputImg").value = '';
			document.getElementById(selectorID + "_inputName").value = '';
		},
		
		_objectSelect:function(selectorID) {	
			document.getElementById(this.getUniqueId('EditorMain')).style.display = 'none';
			document.getElementById(selectorID).style.display = 'block';
			this.objectSelectMap[selectorID].resizePager();
		},
		
		
		/*******  	Utility functions	******/
		scope: function(scope, func){
			return function(){				
				func.apply(scope, arguments);
			}
		},
		
		getElementsByClassName: function(node, className){
			return node.getElementsByClassName(className);
		},
		indexOf: function(array, value){			
			return array.indexOf(value +'');
		},
		
		/*Not used so far */
		replaceTokens:function(template, tokenValues){
			for (var name in tokenValues){
				template.replace('$'+name+'$', tokenValues[name]);
			}
			return template;
		},
		/*Not used so far */
		cancelEventBuble: function(e){
			var evt = e ? e:window.event;
			if (evt.stopPropagation){
				evt.stopPropagation();
			}
			
			if (evt.cancelBubble!=null){
				evt.cancelBubble = true;		
			}
		},
		htmlEncode: function(text)
		{
			return text.toString()
				.replace(/\&/g, "&amp;")
				.replace(/</g, "&lt;")
				.replace(/>/g, "&gt;")
				.replace(/"/g, "&quot;")
				.replace(/'/g, "&apos;");
		},
		
		/*Not used so far */
		getCssMapping: function(originalClass) {
			var newClass = this.context.getCssMapping(originalClass);
			
			if (!newClass) {
				return originalClass;
			}
			
			return newClass;
		}
}