TV Unifor

1<#if !entries?has_content> 

2	<#if preview> 

3		<div class="alert alert-info"> 

4			<@liferay.language key="there-are-no-pages-to-display-for-the-current-page-level" /> 

5		</div> 

6	</#if> 

7 

8<#else> 

9 

10	<div id="tabs" class="tabs tabs--scroll"> 

11    <nav class="tabs__nav"> 

12		  <ul class="tabs__list"> 

13        <#assign navItems = entries /> 

14 

15        <#list navItems as navItem> 

16          <#if navItem.isSelected()> 

17            <#assign nav_item_css_class = "tabs__item tabs__item--current" /> 

18          <#else> 

19            <#assign nav_item_css_class = "tabs__item" /> 

20          </#if> 

21 

22          <#if navItem.isBrowsable()> 

23            <#assign nav_item_href_link = "href='${navItem.getURL()}#tabs' ${navItem.getTarget()}" /> 

24          </#if> 

25 

26          <li class="${nav_item_css_class}"> 

27            <a aria-labelledby="layout_${navItem.getLayoutId()}" class="tabs__link" ${nav_item_href_link}> 

28              <#if navItem.getLayout().getExpandoBridge().hasAttribute("icon")> 

29                <#assign navIcon = navItem.getLayout().getExpandoBridge().getAttribute("icon")> 

30                <#if navIcon != ""> 

31                  <img class="tabs__link__icon js-svg-fill" src="${navIcon}" alt="${navItem.getName()}"> 

32                <#elseif navItem.getLayout().getIconImage()> 

33                  <img class="tabs__link__icon" src="/image/layout_icon?img_id=${navItem.getLayout().getIconImageId()}" alt="${navItem.getName()}"> 

34                </#if> 

35              </#if> 

36              ${navItem.getName()} 

37            </a> 

38          </li> 

39        </#list> 

40		  </ul> 

41    </nav> 

42	</div> 

43 

44  <script> 

45    (function ($) { 

46      'use strict' 

47 

48      $('img.js-svg-fill').each(function(){ 

49        var $img = $(this); 

50        var imgID = $img.attr('id'); 

51        var imgClass = $img.attr('class'); 

52        var imgURL = $img.attr('src'); 

53 

54        $.get(imgURL, function(data) { 

55            // Get the SVG tag, ignore the rest 

56            var $svg = $(data).find('svg'); 

57 

58            // Add replaced image's ID to the new SVG 

59            if(typeof imgID !== 'undefined') { 

60                $svg = $svg.attr('id', imgID); 

61            } 

62            // Add replaced image's classes to the new SVG 

63            if(typeof imgClass !== 'undefined') { 

64                $svg = $svg.attr('class', imgClass+' replaced-svg'); 

65            } 

66 

67            // Remove any invalid XML tags as per http://validator.w3.org 

68            $svg = $svg.removeAttr('xmlns:a'); 

69 

70            // Check if the viewport is set, if the viewport is not set the SVG wont't scale. 

71            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { 

72                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) 

73            } 

74 

75            // Replace image with new SVG 

76            $img.replaceWith($svg); 

77 

78        }, 'xml'); 

79 

80      }); 

81    })(window.$) 

82  </script> 

83</#if>