sngstats__topslots scripts

jquery.hoverIntent.min.js

/*!
 * hoverIntent v1.9.0 // 2017.09.01 // jQuery v1.7.0+
 * http://briancherne.github.io/jquery-hoverIntent/
 *
 * You may use hoverIntent under the terms of the MIT license. Basically that
 * means you are free to use hoverIntent as long as this header is left intact.
 * Copyright 2007-2017 Brian Cherne
 */
!function(factory){"use strict";"function"==typeof define&&define.amd?define(["jquery"],factory):jQuery&&!jQuery.fn.hoverIntent&&factory(jQuery)}(function($){"use strict";var cX,cY,_cfg={interval:100,sensitivity:6,timeout:0},INSTANCE_COUNT=0,track=function(ev){cX=ev.pageX,cY=ev.pageY},compare=function(ev,$el,s,cfg){if(Math.sqrt((s.pX-cX)*(s.pX-cX)+(s.pY-cY)*(s.pY-cY))<cfg.sensitivity)return $el.off(s.event,track),delete s.timeoutId,s.isActive=!0,ev.pageX=cX,ev.pageY=cY,delete s.pX,delete s.pY,cfg.over.apply($el[0],[ev]);s.pX=cX,s.pY=cY,s.timeoutId=setTimeout(function(){compare(ev,$el,s,cfg)},cfg.interval)},delay=function(ev,$el,s,out){return delete $el.data("hoverIntent")[s.id],out.apply($el[0],[ev])};$.fn.hoverIntent=function(handlerIn,handlerOut,selector){var instanceId=INSTANCE_COUNT++,cfg=$.extend({},_cfg);$.isPlainObject(handlerIn)?(cfg=$.extend(cfg,handlerIn),$.isFunction(cfg.out)||(cfg.out=cfg.over)):cfg=$.isFunction(handlerOut)?$.extend(cfg,{over:handlerIn,out:handlerOut,selector:selector}):$.extend(cfg,{over:handlerIn,out:handlerIn,selector:handlerOut});var handleHover=function(e){var ev=$.extend({},e),$el=$(this),hoverIntentData=$el.data("hoverIntent");hoverIntentData||$el.data("hoverIntent",hoverIntentData={});var state=hoverIntentData[instanceId];state||(hoverIntentData[instanceId]=state={id:instanceId}),state.timeoutId&&(state.timeoutId=clearTimeout(state.timeoutId));var mousemove=state.event="mousemove.hoverIntent.hoverIntent"+instanceId;if("mouseenter"===e.type){if(state.isActive)return;state.pX=ev.pageX,state.pY=ev.pageY,$el.off(mousemove,track).on(mousemove,track),state.timeoutId=setTimeout(function(){compare(ev,$el,state,cfg)},cfg.interval)}else{if(!state.isActive)return;$el.off(mousemove,track),state.timeoutId=setTimeout(function(){delay(ev,$el,state,cfg.out)},cfg.timeout)}};return this.on({"mouseenter.hoverIntent":handleHover,"mouseleave.hoverIntent":handleHover},cfg.selector)}});

newslider.ftl

<link rel="stylesheet" href="https://cdn.rawgit.com/mfd/e0c5bea3987b3b929d7970a3ba35d862/raw/8e26d0f0cdc2136883a2d7641b295f12eafd0cfe/sngstat__topslotss.css">

<!-- BEGIN .content-topslots --> 
<div class="content-topslots"> 
<ul class="slot-nav">
    <#list entries as entry>
    <#assign
    	entry = entry
    	entryId = entry.getEntryId()
    	assetRenderer = entry.getAssetRenderer()
    	entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))
    	viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry)
    />
    <#if !stringUtil.equals(assetLinkBehavior, "showFullContent")>
    	<#assign viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry, true) />
    </#if>
    <li class="slot-nav__item <#if !(entry_index>0)>here</#if>" id="slide_${entryId}">
    	<a href="${viewURL}">${entryTitle}</a>
    </li>
      <#if entry_index == 4>
        <#break>
      </#if>
    </#list>
</ul>

<#list entries as entry>
	<#assign
		entry = entry
		entryId = entry.getEntryId()
		ddd = entry.getModifiedDate()
		assetRenderer = entry.getAssetRenderer()
		entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))
		viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry)
	/>
	<#if !stringUtil.equals(assetLinkBehavior, "showFullContent")>
		<#assign viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry, true) />
	</#if>

<!-- BEGIN .slot-item --> 
<div class="slot-item <#if !(entry_index>0)>here</#if>" id="slotslide_${entryId}"> 
	<figure>
		<a href="#"><img src="http://www.oecd.org//media/2016-1/Tax Policy Reforms_image.png" alt="©Shutterstock" title="©Shutterstock" width="330" height="220"></a>
	</figure>
	<figcaption>23 сентября 2017</figcaption>
	<div class="asset-actions lfr-meta-actions">
		<@getEditIcon />
	</div>
    <h5>${entryTitle}</h5>
	<p>
		${htmlUtil.escape(assetRenderer.getSummary(renderRequest, renderResponse))}
	</p>
	<a href="${viewURL}"><@liferay.language key="read-more" /><span class="hide-accessible"><@liferay.language key="about" />${entryTitle}</span> &raquo;</a>
</div>
<!-- END .slot-item --> 
      <#if entry_index == 4>
        <#break>
      </#if>
</#list>

</div>
<!-- END .content-topslots --> 


<script>
 define._amd = define.amd;
 define.amd = false;
</script>
 <script type="text/javascript" src="//cdn.rawgit.com/mfd/e0c5bea3987b3b929d7970a3ba35d862/raw/225ef0aa52aff789f0ab54fd9a1a947fa0c0fc74/jquery.hoverIntent.min.js"></script>
<script>

jQuery.fn.slots = function (th) {
	$(th).find("li").hoverIntent({
		sensitivity: 5,	interval: 50,
    over: function(){
			if($(this).hasClass("here")){}
			else {
				$(th).find("li").removeClass("here");
				$(this).addClass("here");
				tid = $(this).attr("id");
				//console.log(tid);
					$(th).find(".slot-item:visible").fadeOut(200).removeClass("here");
					$(th).find("#slot"+tid).fadeIn(200).addClass("here");
			}
		},
		timeout: 50,
		out: function(){}
	});
}

jQuery(function(){
  	jQuery.fn.slots('.content-topslots');
  	define.amd = define._amd;
});

</script>




<#macro getEditIcon>
	<#if assetRenderer.hasEditPermission(themeDisplay.getPermissionChecker())>
		<#assign redirectURL = renderResponse.createRenderURL() />
		${redirectURL.setParameter("mvcPath", "/add_asset_redirect.jsp")}
		${redirectURL.setWindowState("pop_up")}
		<#assign editPortletURL = assetRenderer.getURLEdit(renderRequest, renderResponse, windowStateFactory.getWindowState("pop_up"), redirectURL)!"" />
		<#if validator.isNotNull(editPortletURL)>
			<#assign title = languageUtil.format(locale, "edit-x", entryTitle, false) />
			<@liferay_ui["icon"]
				iconCssClass="icon-edit-sign"
				message=title
				url="javascript:Liferay.Util.openWindow({id:'" + renderResponse.getNamespace() + "editAsset', title: '" + title + "', uri:'" + htmlUtil.escapeURL(editPortletURL.toString()) + "'});"
			/>
		</#if>
	</#if>
</#macro>

sngstat__topslotss.css

#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots {
  position: relative;
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 450px;
  margin-bottom: 20px;
  background: #fff;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav {
  list-style-type: none;
  width: 40%;
  float: left;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  height: 100%;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item {
  border-bottom: 1px dotted #2973bd;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item:last-child {
  border: 0;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item.here {
  background: #2973bd;
  color: #fff;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item.here a {
  color: #fff;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item a {
  position: relative;
  text-decoration: none;
  border: 0;
  display: block;
  padding: 20px 10px;
  padding-left: 20px;
  cursor: pointer;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item a::before {
  position: absolute;
  content: '';
  font: normal normal normal 15px/1 FontAwesome;
  left: 5px;
  top: 22px;
}
@media screen and (min-width: 768px) {
  #portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item {
    display: table-row;
  }
}
@media screen and (max-width: 767px) {
  #portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-nav__item {
    display: inline-block;
    width: 100%;
    height: auto !important;
  }
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item {
  position: absolute;
  top: 0;
  left: 45%;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item {
  display: none;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item.here {
  display: block !important;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item figure {
  overflow: hidden;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item figure img {
  width: 100%;
  height: auto;
  margin-bottom: 3px;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item figcaption {
  font-size: 90%;
  padding: 3px 0px;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px dotted #018fd0;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item p {
  padding: 0 20px 0px 0px;
  margin-bottom: 10px;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item .block-link {
  position: relative;
  padding-left: 13px;
}
#portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item .block-link::before {
  position: absolute;
  content: '';
  font: normal normal normal 15px/1 FontAwesome;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  #portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_Am2xsJe5hDCn .content-topslots .slot-item {
    display: none;
  }
}