Existing Java Script (Link.JS) Changes for Corresponding change in aspx(Link.aspx) to Extend the Functionality

Question

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);

Answer 1

Don't modify these files directly, which leads License break.

To overcome that, you need to write GUI extension.

Refer Setting up a SDL Tridion 2011 GUI extension in 8 steps.

Update:

Change function name from var CompTemp = function populateNamedTarget$CompTemp() { to function CompTemp()

Tridion.Cme.Views.Link.prototype._PopulateNamedTarget = function Link$_PopulateNamedTarget()
{
   ***
   ***

      function CompTemp()
      {
          ***
          ***
          ***
      }

   ***
   ***
}