simplestyle
Version:
Simple Style Guide Tool based on Atomic Web Design
147 lines (107 loc) • 5.85 kB
HTML
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>News in Connect Group</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">This is the default Control Display Template that will list the items. It does not allow the user to page through items.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://tinymain/_catalogs/masterpage/Display Templates/DevDisplay/Control_Group.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<script>
Type.registerNamespace('search.Grouping');
var MAX_ITEM_PER_GROUP = 3;
var baseGroupContainer = "<div class='news-small-container'> \
<div class='news-small-header'>\
<img src='/PublishingImages/rollup-header-small.png' alt=''>\
<div class='news-small-dim'> </div>\
<div class='news-entity'>\
{0}\
</div>\
</div>\
\
{1}\
\
</div>",
showMoreInGroup = "<div class='news-more-group'><a href='{0}'><svg id=\"Punkte\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"4\" viewBox=\"0 0 20 4\"><defs></defs><circle class=\"cls-1\" cx=\"2\" cy=\"2\" r=\"2\"/><circle class=\"cls-1\" cx=\"10\" cy=\"2\" r=\"2\"/><circle class=\"cls-1\" cx=\"18\" cy=\"2\" r=\"2\"/></svg></a></span>";
search.Grouping = function () {
var currentCtx;
return {
init: function (currentContext, encodedId) {
currentCtx = currentContext;
// Creating a new grouping object
currentCtx.Grouping = {};
currentCtx.GroupingCount = {};
// Add an on post render callback, this will be excuted when all the results are rendered
AddPostRenderCallback(currentContext, function () {
var groupElm = document.getElementById(encodedId);
search.Grouping.show(groupElm);
});
},
push: function (grouping, content) {
// Add the markup to the grouping array
// Set Grouping Count
if (typeof currentCtx.GroupingCount[grouping] !== "undefined") {
currentCtx.GroupingCount[grouping] += 1;
} else {
currentCtx.GroupingCount[grouping] = 1;
}
console.log('Grouping:' + grouping);
console.log('Grouping Count:' + currentCtx.GroupingCount[grouping]);
console.log(currentCtx.GroupingCount[grouping] <= MAX_ITEM_PER_GROUP);
// Add Content to grouping
if (typeof currentCtx.Grouping[grouping] !== "undefined") {
if (currentCtx.GroupingCount[grouping] <= MAX_ITEM_PER_GROUP) {
currentCtx.Grouping[grouping] += content;
}
} else {
currentCtx.Grouping[grouping] = content;
}
},
show: function (groupElm) {
var groups = currentCtx.Grouping
var advancedLink = currentCtx.ClientControl.get_advancedUrl();
for (var key in groups) {
var groupContent = groups[key] + String.format(showMoreInGroup, advancedLink+'?k='+key);
groupElm.innerHTML += String.format(baseGroupContainer, key, groupContent);
}
}
}
} ();
</script>
<div id="Control_List">
<!--#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_Grouping"),
searchIconDown = "<svg class='icon icon-dd' style='width: 12px; height: 8px; stroke-width: 5px;'><use xlink:href='/_layouts/15/images/wpxp.strabag.design/icons.svg#icon-chevron-down'></use></svg>";;
// Grouping init
search.Grouping.init(ctx, encodedId);
if (!$isNull(ctx.ClientControl) &&
!$isNull(ctx.ClientControl.shouldRenderControl) &&
!ctx.ClientControl.shouldRenderControl())
{
return "balbla";
}
ctx.ListDataJSONGroupsKey = "ResultTables";
var showMoreLink = ctx.ClientControl.get_advancedUrl();
_#-->
<div id="_#= encodedId =#_" class="news-section">
_#= ctx.RenderGroups(ctx) =#_
</div>
<!--.news-show-more>a-->
<div class="news-more">
<a href="_#= showMoreLink =#_" class="news-more-link">Show more new</a>
<div class="news-more-icon">
<svg class='icon icon-dd' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href='/_layouts/15/images/wpxp.strabag.design/icons.svg#icon-chevron-down'></use>
</svg>
</div>
</div>
</div>
</body>
</html>