Overview

The Link Interface is used to allow the user to select from a list of internal pages to link to, or manually enter external link or select a pre-defined system setting (like [New Page]).

It has few advanced options, like open in new window, open in same window, open in lightbox and add rel="nofollow" attribute.

 

Include Resource Files

  • /Shared/UIComponents/Internal/LinkInterface/
    • css/fat_link_manager.css
      <link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/LinkInterface/css/fat_link_manager.css">
    • Scripts/fat_link_manager.js
      <script type="text/javascript" src="/Shared/UIComponents/Internal/LinkInterface/Scripts/fat_link_manager.js"></script>

 

Methods

With the public methods an application or component has some control over the behavior of the Links Interface.

Name Description Parameters Returns
getCurrentLink Gets currently selected link - Object
setCurrentLink Manually sets the current link to what is passed as argument value: String,
properties: Object{ target:String, rel:String }		 -
getInternalLinksList Returns all internal links (pages) currently in list - pages: Array
enable Enables the control (if disabled) - -
disable Disables the control (if enabled) - -

 

Events

Name Description Arguments
linkChange Triggers when a different link has been set through the interface Object
create Triggers when the UI has been created and injected in DOM links_manager: Object{}
load Triggers when the component is ready for usage. links_manager: Object{}

 

Link Object

Every getCurrentLink is invoked the result is an object with the following properties.

Name Description Type
name Link text. String
value Link url. String
type One of the available like types: 'no_link', 'email', 'internal', 'external', 'anchor', 'new_page', 'telephone' and 'viewer'. String
properties Returns the values of the link's rel and target attributes. Object

 

Examples

Initialize new link manager.

var links_ui = new SK.UI.LinkManager(_$( 'placeholder' ), {
   link_types     : ['internal','external'],
   'class'        : 'link_class',
   onLoad         : function () {
      links_ui.setCurrentLink( link_value, link_props );
   }.bind(this)
});

Set current link.

// the UI should be able to distinguish external from internal links
links_ui.setCurrentLink( 'http://google.com', {
   target   : '_blank',
   rel      : 'nofollow'
});

// internal link
   links_ui.setCurrentLink( '455123', {
   target   : '',
   rel      : ''
});

// anchor
links_ui.setCurrentLink( 'anchor_466025_12345', {
   target   : '',
   rel      : ''
});

// large image
links_ui.setCurrentLink( 'http://0101.nccdn.net/1_5/3dc/1d0/2e2/links.png', {
   target   : 'sk_lightbox{w:920,h:480}', // sk_lightbox prefix plus JSON encoded properties for the lightbox
   rel      : 'nofollow'
});

 

Add a linkChanged event listener.

links_ul.addEvent('linkChanged', function ( value, properties, type ) {
   var link_element = new Element('a').inject( document.body );
   link_element.setProperties( properties );
   link_element.setProperty('href', value);
});