I have Changed my Link.aspx file from "C:\Program Files (x86)\Tridion\web\WebUI\Editors\CME\Views\Popups\Link". I want to include a dropdown at the place of Hyperlink Popup's Component type's Target(Named) Text field. I have made the changes directly in aspx file and wanted to populate the dropdown for corresponding Component Templates.
I changed the JS file taking help from "Preview.JS", as the preview popup also having Component Template Dropdown for any Component previwed.
This is not working and even it's not calling the _PopulateNamedTarget method.
I am new to JavaScript. Kindly help. Thanks in Advance.
Type.registerNamespace("Tridion.Cme.Views");
/**
* Implements Link popup view.
* @constructor
*/
Tridion.Cme.Views.Link = function Link()
{
Type.enableInterface(this, "Tridion.Cme.Views.Link");
this.addInterface("Tridion.Cme.View");
//this._modifiedProgrammatically = false;
};
/**
* Initializes Link popup view.
* @private
*/
Tridion.Cme.Views.Link.prototype.initialize = function Link$initialize()
{
this.callBase("Tridion.Cme.View", "initialize");
var p = this.properties;
var c = p.controls;
// Get selected acronym
p.OldLink = (window.dialogArguments && window.dialogArguments.link) ? window.dialogArguments.link : {};
p.NewLink = {};
p.ItemPopup = null;
p.templateList = null;
p.nocomplink = window.dialogArguments.nocomplink;
p.noanchor = window.dialogArguments.noanchor;
p.notitle = window.dialogArguments.notitle;
p.notarget = window.dialogArguments.notarget;
c.BtnOk = $controls.getControl($("#BtnOk"), "Tridion.Controls.Button");
c.BtnCancel = $controls.getControl($("#BtnCancel"), "Tridion.Controls.Button");
c.BtnRemove = $controls.getControl($("#BtnRemove"), "Tridion.Controls.Button");
c.BtnBrowse = $controls.getControl($("#BtnBrowse"), "Tridion.Controls.Button");
c.BtnOpenURL = $controls.getControl($("#BtnOpenURL"), "Tridion.Controls.Button");
c.AnchorName = $("#AnchorName");
c.FieldTitle = $("#FieldTitle");
c.TargetType = $("#TargetType");
c.NamedTarget = $("#NamedTarget");
c.LinkType = $("#LinkType");
c.FieldUrl = $("#FieldUrl");
c.CompLinkOption = $("#CompLinkOption");
c.AnchorOption = $("#AnchorOption");
c.RowTitle = $("#rowTitle");
c.RowUrl = $("#rowUrl");
c.RowTarget = $("#rowTarget");
c.RowAnchor = $("#rowAnchor");
if (!p.noanchor)
{
$evt.addEventHandler(c.AnchorName, "change", this.getDelegate(this._onAnchorChange));
}
if (!p.notitle)
{
$evt.addEventHandler(c.FieldTitle, "change", this.getDelegate(this._onTitleChange));
}
$evt.addEventHandler(c.TargetType, "change", this.getDelegate(this._onTargetChange));
//this._PopulateNamedTarget();
if (!p.notarget)
{
$evt.addEventHandler(c.NamedTarget, "change", this.getDelegate(this._onNamedTargetChange));
}
$evt.addEventHandler(c.LinkType, "change", this.getDelegate(this._onTypeChange));
$evt.addEventHandler(c.FieldUrl, "keyup", this.getDelegate(this._onUrlChange));
$evt.addEventHandler(c.BtnBrowse, "click", this.getDelegate(this._onBrowseClicked));
$evt.addEventHandler(c.BtnOpenURL, "click", this.getDelegate(this._onOpenURLClicked));
$evt.addEventHandler(c.BtnOk, "click", this.getDelegate(this._onOkButtonClicked));
$evt.addEventHandler(c.BtnCancel, "click", this.getDelegate(this._onCancelButtonClicked));
$evt.addEventHandler(c.BtnRemove, "click", this.getDelegate(this._onRemoveButtonClicked));
$evt.addEventHandler(document, "keyup", this.getDelegate(this._onKeyUp));
// Init form
var showTarget = p.OldLink.showtarget || "false";
if (showTarget == "true")
{
$css.display(c.RowTarget);
}
if (p.nocomplink)
{
c.LinkType.removeChild(c.CompLinkOption);
}
if (p.notitle)
{
$css.undisplay(c.RowTitle);
}
if (p.noanchor)
{
c.LinkType.removeChild(c.AnchorOption);
}
if (p.notarget)
{
$css.undisplay(c.RowTarget);
}
p.NewLink.title = p.OldLink.title === undefined ? "" : p.OldLink.title;
p.NewLink.target = p.OldLink.target || "";
p.NewLink.tcmuri = p.OldLink.tcmuri === undefined ? "" : p.OldLink.tcmuri;
p.NewLink.href = p.OldLink.href === undefined ? "" : p.OldLink.href;
p.NewLink.html = p.OldLink.html === undefined ? "" : p.OldLink.html;
p.NewLink.type = p.OldLink.type === undefined ? "" : p.OldLink.type;
p.NewLink.value = p.OldLink.value === undefined ? "" : p.OldLink.value;
if ((p.OldLink.href === undefined || p.OldLink.href == "") &&
(p.OldLink.tcmuri === undefined || p.OldLink.tcmuri == ""))
{
c.BtnRemove.hide();
}
if (p.OldLink.href)
{
this._setUrl(p.OldLink.href);
}
else
{
// default to web link
p.NewLink.type = "http://";
p.NewLink.value = "";
p.NewLink.href = "";
}
this._setType();
this._setTarget();
this._onTypeChange();
};
/**
* Reacts to the DOM click event.
* @param {DOMEvent} event The DOM click event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onBrowseClicked = function Link$_onBrowseClicked(event)
{
var p = this.properties;
var c = p.controls;
if (p.ItemPopup && p.ItemPopup.isOpen())
{
p.ItemPopup.focus();
}
else
{
// Open item selector popup
var filter = {
conditions:
{
ItemTypes: [$const.ItemType.COMPONENT],
ShowNewItems: false
}
};
var rootId = p.OldLink.popupRootId;
var self = this;
p.ItemPopup = $popup.create($cme.Popups.ITEM_SELECT.URL.format(rootId), $cme.Popups.ITEM_SELECT.FEATURES, { filter: filter });
function Link$_onBrowseClicked$onPopupClosed(event)
{
// Release
if (p.ItemPopup)
{
p.ItemPopup.dispose();
p.ItemPopup = null;
}
};
$evt.addEventHandler(p.ItemPopup, "insert",
function Link$_onBrowseClicked$onPopupSubmitted(event)
{
// Update
var items = event.data.items;
if (items)
{
var itemId, itemName;
for (var i = 0, len = items.length; i < len; i++)
{
itemId = items[i];
if (!String.isNullOrEmpty(itemId))
{
var item = $models.getItem(itemId);
if (item)
{
itemName = item.getStaticTitle();
}
}
break;
}
if (itemId && itemName)
{
p.NewLink.href = itemId;
p.NewLink.tcmuri = itemId;
p.NewLink.value = itemId;
if (p.NewLink.title !== undefined)
{
p.NewLink.title = itemName;
}
p.NewLink.tcmname = itemName;
self._onTypeChange();
}
}
// Release
Link$_onBrowseClicked$onPopupClosed();
});
$evt.addEventHandler(p.ItemPopup, "unload", Link$_onBrowseClicked$onPopupClosed);
p.ItemPopup.open();
}
};
/**
* Handles the changes in Anchor field.
* @param {DOMEvent} event The DOM event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onAnchorChange = function Link$_onAnchorChange(event)
{
var sourceElement = event.srcElement || event.target;
if (sourceElement)
{
var p = this.properties;
var c = p.controls;
p.NewLink.href = "#" + sourceElement.value;
p.NewLink.value = sourceElement.value;
if (sourceElement.value)
{
c.BtnOk.enable();
}
else
{
c.BtnOk.disable();
}
}
};
/**
* Handles the changes in Named Target field.
* @param {DOMEvent} event The DOM event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onNamedTargetChange = function Link$_onNamedTargetChange(event)
{
var sourceElement = event.srcElement || event.target;
if (sourceElement)
{
this.properties.NewLink.target = sourceElement.value;
}
};
/**
* Reacts to the DOM click event.
* @param {DOMEvent} event The DOM click event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onOpenURLClicked = function Link$_onOpenURLClicked(event)
{
var c = this.properties.controls;
try
{
window.open(c.FieldUrl.value);
}
catch(err)
{ }
};
/**
* Handles the changes in Target field.
* @param {DOMEvent} event The DOM event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onTargetChange = function Link$_onTargetChange(event)
{
var sourceElement = event.srcElement || event.target;
if (sourceElement)
{
this._updateNamedTarget(sourceElement.value);
}
};
/*This is added by me */
Tridion.Cme.Views.Link.prototype._PopulateNamedTarget = function Link$_PopulateNamedTarget()
{
var p = this.properties;
var c = p.controls;
p.templateList = p.NewLink.getListComponentTemplates();
var CompTemp = function populateNamedTarget$CompTemp()
{
var tid = null;
var templateXml = $xml.getNewXmlDocument(p.templateList.getXml());
if (p.targetId && $xml.selectSingleNode(templateXml, String.format("tcm:*/tcm:Item[@ID='{0}']", p.targetId)))
{
tid = p.targetId;
}
else
{
tid = $xml.getInnerText(templateXml, "tcm:*/tcm:Item[1]/@ID");
}
c.NamedTarget.draw(templateXml);
c.NamedTarget.setValue(tid);
};
if (p.templateList.isLoaded(true))
{
CompTemp();
}
else
{
$evt.addEventHandler(p.templateList, "load", CompTemp);
//$evt.addEventHandler(p.templateList, "loadfailed", templateLoadFailed);
p.templateList.load();
}
}
/**
* Updates target name value.
* @param {String} targetValue Target name value.
* @private
*/
Tridion.Cme.Views.Link.prototype._updateNamedTarget = function Link$_updateNamedTarget(targetValue)
{
var p = this.properties;
var c = p.controls;
c.NamedTarget.style.visibility = (targetValue == "named") ? "" : "hidden";
/* Calling my Method from Here */
this._PopulateNamedTarget();
p.NewLink.target = (targetValue == "named") ? c.NamedTarget.getValue() : targetValue;
};
/**
* Handles the changes in Title field.
* @param {DOMEvent} event The DOM event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onTitleChange = function Link$_onTitleChange(event)
{
var sourceElement = event.srcElement || event.target;
if (sourceElement)
{
this.properties.NewLink.title = sourceElement.value;
}
};
/**
* Handles the changes in Type field.
* @param {DOMEvent} event The DOM event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onTypeChange = function Link$_onTypeChange(event)
{
var p = this.properties;
var c = p.controls;
var oldRowUrlDisplay = c.RowUrl.style.display;
p.NewLink.type = c.LinkType.item(c.LinkType.selectedIndex).value;
this._modifiedProgrammatically = true;
switch (p.NewLink.type)
{
case "#":
c.RowUrl.style.display = "none";
c.RowAnchor.style.display = "";
c.BtnBrowse.disable();
// Load anchors?
if (c.AnchorName.options.length == 0)
{
if (p.OldLink.anchorList)
{
for (var i = 0, a = null, cnt = p.OldLink.anchorList.length; i < cnt; i++)
{
a = p.OldLink.anchorList[i];
if (!String.isNullOrEmpty(a))
{
var o = new Option(a, a);
o.selected = (p.NewLink.value == a);
c.AnchorName.options[c.AnchorName.options.length] = o;
}
}
}
if (c.AnchorName.value)
{
p.NewLink.href = "#" + c.AnchorName.value;
p.NewLink.value = c.AnchorName.value;
c.BtnOk.enable();
}
else
{
c.BtnOk.disable();
}
}
p.NewLink.tcmuri = "";
break;
case "tcm:":
if (p.NewLink.href.indexOf("tcm:") != "-1")
{
var item = $models.getItem(p.NewLink.href);
if (item)
{
p.NewLink.tcmname = item.getStaticTitle();
}
}
c.BtnBrowse.enable();
c.BtnOpenURL.disable();
c.FieldUrl.disabled = true;
c.FieldUrl.value = p.NewLink.value;
this._setUrl(c.FieldUrl.value);
c.RowUrl.style.display = "";
c.RowAnchor.style.display = "none";
p.NewLink.tcmuri = p.NewLink.href;
break;
case "http://":
c.BtnBrowse.disable();
c.FieldUrl.disabled = false;
c.FieldUrl.value = (p.NewLink.type + p.NewLink.value);
if ((c.FieldUrl.value != "") &&
(c.FieldUrl.value != p.NewLink.type) &&
(c.FieldUrl.value.length > p.NewLink.type.length))
{
c.BtnOpenURL.enable();
}
else
{
c.BtnOpenURL.disable();
}
c.RowUrl.style.display = "";
c.RowAnchor.style.display = "none";
p.NewLink.tcmuri = "";
break;
case "mailto:":
c.BtnBrowse.disable();
c.BtnOpenURL.disable();
c.FieldUrl.disabled = false;
c.FieldUrl.value = p.NewLink.type + p.NewLink.value;
c.RowUrl.style.display = "";
c.RowAnchor.style.display = "none";
p.NewLink.tcmuri = "";
break;
default:
c.BtnBrowse.disable();
c.BtnOpenURL.disable();
c.FieldUrl.disabled = false;
c.FieldUrl.value = p.NewLink.value;
c.RowUrl.style.display = "";
c.RowAnchor.style.display = "none";
p.NewLink.tcmuri = "";
}
if (c.RowUrl.style.display != oldRowUrlDisplay)
{
if (c.RowUrl.style.display != "none")
{
if (c.FieldUrl.value)
{
c.BtnOk.enable();
}
}
else
{
if (c.AnchorName.value)
{
c.BtnOk.enable();
}
}
}
this._modifiedProgrammatically = false;
c.FieldTitle.value = (p.NewLink.title == null) ? "" : p.NewLink.title;
};
/**
* Handles the changes in Url field.
* @param {DOMEvent} event The DOM event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onUrlChange = function Link$_onUrlChange(event)
{
var sourceElement = event.srcElement || event.target;
if (sourceElement)
{
this._setUrl(sourceElement.value);
}
};
/**
* Reacts to the DOM click event.
* @param {DOMEvent} event The DOM click event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onOkButtonClicked = function Link$_onOkButtonClicked(event)
{
this._buildNewLinkHtml();
this.fireEvent("submit", { link: this.properties.NewLink });
window.close();
};
/**
* Reacts to the DOM click event.
* @param {DOMEvent} event The DOM click event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onCancelButtonClicked = function Link$_onCancelButtonClicked(event)
{
this.fireEvent("cancel");
window.close();
};
/**
* Reacts to the DOM click event.
* @param {DOMEvent} event The DOM click event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onRemoveButtonClicked = function Link$_onRemoveButtonClicked(event)
{
var p = this.properties;
p.NewLink.title = "";
p.NewLink.tcmuri = "";
p.NewLink.value = "";
p.NewLink.type = "";
p.NewLink.href = "";
p.NewLink.html = "";
p.NewLink.target = "";
this.fireEvent("submit", { link: p.NewLink });
};
/**
* Reacts to the DOM keyup event.
* @param {DOMEvent} event The DOM keyup event that occured.
* @private
*/
Tridion.Cme.Views.Link.prototype._onKeyUp = function Link$_onKeyUp(event)
{
switch (event.keyCode)
{
case $const.Keys.ESCAPE:
this._onCancelButtonClicked();
break;
case $const.Keys.ENTER:
this._onOkButtonClicked();
break;
}
};
/**
* Make new Link HTML representation.
* @private
*/
Tridion.Cme.Views.Link.prototype._buildNewLinkHtml = function Link$_buildNewLinkHtml()
{
var p = this.properties;
var linkTitle;
var attributes = new Array();
if (p.NewLink.title)
{
attributes.push("title=\"{0}\"".format(p.NewLink.title));
}
if (p.NewLink.target)
{
attributes.push("target=\"{0}\"".format(p.NewLink.target));
}
if (p.NewLink.type == "tcm:")
{
attributes.push("href=\"{0}\"".format(p.NewLink.value));
if (p.NewLink.tcmuri != "")
{
attributes.push("tcmuri=\"{0}\"".format(p.NewLink.tcmuri));
}
linkTitle = p.NewLink.tcmname;
}
else
{
if (p.NewLink.type == "#" || p.NewLink.value != "")
{
attributes.push("href=\"{0}{1}\"".format(p.NewLink.type, p.NewLink.value));
linkTitle = p.NewLink.value;
}
else
{
attributes.push("href=\"{0}\"".format(p.NewLink.type));
linkTitle = p.NewLink.type;
}
}
p.NewLink.html = String.format("<a {0}>{1}</a>", attributes.join(" "), linkTitle);
};
/**
* Sets the link target.
* @private
*/
Tridion.Cme.Views.Link.prototype._setTarget = function Link$_setTarget()
{
var p = this.properties;
var c = p.controls;
var iStrTarget = p.NewLink.target;
var lBoolTargetSet = false;
var tto = c.TargetType.options;
for (var i = 0, l = c.TargetType.length; i < l; i++)
{
if (tto[i].value == iStrTarget)
{
tto[i].selected = true;
this._updateNamedTarget(c.TargetType.value);
lBoolTargetSet = true;
break;
}
}
if (!lBoolTargetSet && iStrTarget != "")
{
// assume there is a named target specified so set the last target option
//c.NamedTarget.value = iStrTarget;
tto[c.TargetType.length - 1].selected = true;
c.NamedTarget.style.visibility = "";
}
};
/**
* Sets the link target Type.
* @private
*/
Tridion.Cme.Views.Link.prototype._setType = function Link$_setType()
{
var p = this.properties;
var c = p.controls;
var lto = c.LinkType.options;
for (var i = 0, l = c.LinkType.length; i < l; i++)
{
if (lto[i].value == p.NewLink.type)
{
lto[i].selected = true;
break;
}
}
};
/**
* Sets the link Url.
* @private
*/
Tridion.Cme.Views.Link.prototype._setUrl = function Link$_setUrl(value)
{
var p = this.properties;
var c = p.controls;
if (value && !this._modifiedProgrammatically)
{
c.BtnOpenURL.disable();
var lObjLinkType = p.NewLink.type;
// component link
if (value.substr(0, 4) == "tcm:")
{
p.NewLink.type = "tcm:";
p.NewLink.href = value;
p.NewLink.value = value;
p.NewLink.tcmuri = p.OldLink.tcmuri;
}
// anchor link
else if (value.substr(0, 1) == "#")
{
var lArrAnchors = p.OldLink.anchorList;
var anchorVal = value.substr(1);
var lBoolAnchorExists = true;
for (var i = 0, j = lArrAnchors.length; i < j; i++)
{
if (anchorVal != lArrAnchors[i])
{
lBoolAnchorExists = false;
break;
}
}
if (lBoolAnchorExists)
{
p.NewLink.type = "#";
p.NewLink.href = value;
p.NewLink.value = value.replace(/^#/gi, "");
}
else
{
p.NewLink.type = "";
p.NewLink.href = value;
p.NewLink.value = value;
}
}
// web link
else if (value.substr(0, 7) == "http://")
{
p.NewLink.type = "http://";
p.NewLink.href = value;
p.NewLink.value = value.replace(/^http:\/\//gi, "");
(value.slice(7).match(/\S/)) ? c.BtnOpenURL.enable() : c.BtnOpenURL.disable();
}
// mail link
else if (value.substr(0, 7) == "mailto:")
{
p.NewLink.type = "mailto:";
p.NewLink.href = value;
p.NewLink.value = value.replace(/^mailto:/gi, "");
}
else
{
c.BtnBrowse.disable();
p.NewLink.type = "";
p.NewLink.href = value;
p.NewLink.value = value;
}
if (p.NewLink.type != lObjLinkType)
{
this._setType();
}
}
if (value)
{
c.BtnOk.enable();
}
else
{
c.BtnOk.disable();
}
};
$display.registerView(Tridion.Cme.Views.Link);
