-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Tiles display template
- Loading branch information
Showing
6 changed files
with
272 additions
and
0 deletions.
There are no files selected for viewing
138 changes: 138 additions & 0 deletions
138
Search Display Templates/Tiles templates/Control_Tiles.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> | ||
| <head> | ||
| <title>Tiles</title> | ||
|
|
||
| <!--[if gte mso 9]><xml> | ||
| <mso:CustomDocumentProperties> | ||
| <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden> | ||
| <mso:MasterPageDescription msdt:dt="string">Tiles - control display template</mso:MasterPageDescription> | ||
| <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId> | ||
| <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType> | ||
| <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated> | ||
| </mso:CustomDocumentProperties> | ||
| </xml><![endif]--> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div id="Control_List"> | ||
|
|
||
| <!--#_ | ||
| if (!$isNull(ctx.ClientControl) && | ||
| !$isNull(ctx.ClientControl.shouldRenderControl) && | ||
| !ctx.ClientControl.shouldRenderControl()) | ||
| { | ||
| return ""; | ||
| } | ||
| ctx.ListDataJSONGroupsKey = "ResultTables"; | ||
| var $noResults = Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl); | ||
| var noResultsClassName = "ms-srch-result-noResults"; | ||
| var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl) | ||
| { | ||
| var iStr = []; | ||
| iStr.push(itemRenderResult); | ||
| return iStr.join(''); | ||
| } | ||
| ctx['ItemRenderWrapper'] = ListRenderRenderWrapper; | ||
| _#--> | ||
|
|
||
| <div class="tiles-block"> | ||
|
|
||
| <!--#_ | ||
| var showPaging = ctx.ClientControl.get_showPaging(); | ||
| if(showPaging) | ||
| { | ||
| var pagingInfo = ctx.ClientControl.get_pagingInfo(); | ||
| showPaging = !$isEmptyArray(pagingInfo); | ||
| if(showPaging) | ||
| { | ||
| var currentPage = null; | ||
| var firstPage = pagingInfo[0]; | ||
| var lastPage = pagingInfo[pagingInfo.length - 1]; | ||
| var getPagingImageClassName = function(buttonClassNamePrefix, isNext, isEnabled) | ||
| { | ||
| var className = buttonClassNamePrefix; | ||
| className += (isNext && !Srch.U.isRTL()) || (!isNext && Srch.U.isRTL()) ? "right" : "left"; | ||
| if(!$isNull(isEnabled) && isEnabled == false) | ||
| { | ||
| className += "-disabled"; | ||
| } | ||
| return className; | ||
| } | ||
| var getPagingContainerClassName = function(buttonClassNamePrefix, isEnabled) | ||
| { | ||
| var className = buttonClassNamePrefix; | ||
| className += isEnabled ? "enabled" : "disabled"; | ||
| return className; | ||
| } | ||
| var hasNextPage = lastPage.pageNumber == -2; | ||
| var hasPreviousPage = firstPage.pageNumber == -1; | ||
| var buttonClassNamePrefix = "ms-promlink-button-"; | ||
| var nextPageContainerClassName = getPagingContainerClassName(buttonClassNamePrefix, hasNextPage); | ||
| var previousPageContainerClassName = getPagingContainerClassName(buttonClassNamePrefix, hasPreviousPage); | ||
| var nextPageImageClassName = getPagingImageClassName(buttonClassNamePrefix, true, hasNextPage); | ||
| var previousPageImageClassName = getPagingImageClassName(buttonClassNamePrefix, false, hasPreviousPage); | ||
| _#--> | ||
| <div class="ms-promlink-header"> | ||
| <span class="ms-promlink-headerNav"> | ||
| <a class="ms-commandLink ms-promlink-button _#= $htmlEncode(previousPageContainerClassName) =#_" title="_#= $htmlEncode(firstPage.title) =#_" href="#" onclick='$getClientControl(this).page(_#= $htmlEncode(firstPage.startItem) =#_);return Srch.U.cancelEvent(event);'> | ||
| <span class="ms-promlink-button-image"> | ||
| <img class="_#= $htmlEncode(previousPageImageClassName) =#_" alt="_#= $htmlEncode(firstPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_"> | ||
| </span> | ||
| </a> | ||
| <span class="ms-promlink-button-inner"></span> | ||
|
|
||
| <!--#_ | ||
| // Show the paging numbers | ||
| for (var i = 0; i < pagingInfo.length; i++) { | ||
| var pi = pagingInfo[i]; | ||
| if(!$isNull(pi)) { | ||
| if (pi.pageNumber !== -1 && pi.pageNumber !== -2) { | ||
| var pageLinkId = "PageLink_" + pi.pageNumber; | ||
| // Check if it is the current selected page | ||
| if (pi.startItem === -1) { | ||
| _#--> | ||
| <strong>_#= $htmlEncode(pi.pageNumber) =#_</strong> | ||
| <!--#_ | ||
| } else { | ||
| _#--> | ||
| <a id="_#= $htmlEncode(pageLinkId) =#_" href="#" title="_#= $htmlEncode(pi.title) =#_" onclick="$getClientControl(this).page(_#= $htmlEncode(pi.startItem) =#_);return Srch.U.cancelEvent(event);">_#= $htmlEncode(pi.pageNumber) =#_</a> | ||
| <!--#_ | ||
| } | ||
| } | ||
| } | ||
| } | ||
| _#--> | ||
|
|
||
| <span class="ms-promlink-button-inner"></span> | ||
| <a class="ms-commandLink ms-promlink-button _#= $htmlEncode(nextPageContainerClassName) =#_" title="_#= $htmlEncode(lastPage.title) =#_" href="#" onclick='$getClientControl(this).page(_#= $htmlEncode(lastPage.startItem) =#_);return Srch.U.cancelEvent(event);'> | ||
| <span class="ms-promlink-button-image"> | ||
| <img class="_#= $htmlEncode(nextPageImageClassName) =#_" alt="_#= $htmlEncode(lastPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_"> | ||
| </span> | ||
| </a> | ||
| </span> | ||
| </div> | ||
| <!--#_ | ||
| } | ||
| } | ||
| _#--> | ||
|
|
||
| _#= ctx.RenderGroups(ctx) =#_ | ||
| </div> | ||
| <!--#_ | ||
| if (ctx.ClientControl.get_shouldShowNoResultMessage()) | ||
| { | ||
| _#--> | ||
| <div class="_#= noResultsClassName =#_">_#= $noResults =#_</div> | ||
| <!--#_ | ||
| } | ||
| _#--> | ||
|
|
||
| </div> | ||
| </body> | ||
| </html> |
111 changes: 111 additions & 0 deletions
111
Search Display Templates/Tiles templates/Item_Tiles.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> | ||
| <head> | ||
| <title>Item Tile</title> | ||
|
|
||
| <!--[if gte mso 9]><xml> | ||
| <mso:CustomDocumentProperties> | ||
| <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden> | ||
| <mso:ManagedPropertyMapping msdt:dt="string">'Path':'Path','Title':'Title','Picture':'PublishingImage','Description':''</mso:ManagedPropertyMapping> | ||
| <mso:MasterPageDescription msdt:dt="string">Tile - item display template</mso:MasterPageDescription> | ||
| <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId> | ||
| <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType> | ||
| <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated> | ||
| </mso:CustomDocumentProperties> | ||
| </xml><![endif]--> | ||
| </head> | ||
|
|
||
| <body> | ||
| <script> | ||
| Type.registerNamespace('search.Tiles'); | ||
|
|
||
| search.Tiles = function() { | ||
| var hover = function (elm) { | ||
| var listElm = elm.getElementsByClassName('ms-tileview-tile-detailsListMedium'); | ||
| if (listElm.length) { | ||
| listElm = listElm[0]; | ||
| updateClass(listElm, "expanded"); | ||
| } | ||
| }, | ||
| hide = function (elm) { | ||
| var listElm = elm.getElementsByClassName('ms-tileview-tile-detailsListMedium'); | ||
| if (listElm.length) { | ||
| listElm = listElm[0]; | ||
| updateClass(listElm, "collapsed"); | ||
| } | ||
| }, | ||
| updateClass = function (elm, type) { | ||
| var top = 0; | ||
| switch (type) { | ||
| case "expanded": | ||
| top = 0; | ||
| break; | ||
| case "collapsed": | ||
| top = 100; | ||
| break; | ||
| } | ||
| var animationTop = new SPAnimation.State; | ||
| animationTop.SetAttribute(1, 0); | ||
| animationTop.SetAttribute(2, top); | ||
| var hoverAnimation = new SPAnimation.Object(3, 0, elm.parentElement, animationTop, null, null); | ||
| hoverAnimation.RunAnimation() | ||
| elm.children[0].className = elm.children[0].getAttribute(type); | ||
| elm.children[0].children[0].className = elm.children[0].children[0].getAttribute(type); | ||
| }; | ||
|
|
||
| return { | ||
| hover: hover, | ||
| hide: hide | ||
| } | ||
| }(); | ||
|
|
||
| Srch.U.registerRenderTemplateByName("tile_hover", search.Tiles.hover); | ||
| Srch.U.registerRenderTemplateByName("tile_hide", search.Tiles.hide); | ||
| </script> | ||
|
|
||
| <div id="ItemTile"> | ||
| <!--#_ | ||
| var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_ItemTile_"); | ||
| var containerId = encodedId + "container"; | ||
| var path = $getItemValue(ctx, 'Path'); | ||
| var title = $getItemValue(ctx, 'Title'); | ||
| var description = $getItemValue(ctx, 'Description'); | ||
| var picture = $getItemValue(ctx, 'Picture'); | ||
| _#--> | ||
|
|
||
| <div id="_#= containerId =#_" style="width: 160px; height: 160px;" class="ms-tileview-tile-root"> | ||
| <div style="width: 150px; height: 150px;" class="ms-tileview-tile-content" onmouseover="Srch.U.getRenderTemplateCollection().tile_hover(this)" onmouseout="Srch.U.getRenderTemplateCollection().tile_hide(this)"> | ||
| <a href="_#= path =#_" title="_#= title =#_"> | ||
| <!--#_ | ||
| if (picture.isEmpty) { | ||
| _#--> | ||
| <img src="/_layouts/15/images/blank.gif" alt="blank" width="150" /> | ||
| <!--#_ | ||
| } else { | ||
| var pictureUrl = STSHtmlDecode(Srch.ValueInfo.Renderers.imageSourceRendering(picture)); | ||
| _#--> | ||
| <img src="_#= pictureUrl =#_?width=150&height=150" alt="_#= title =#_" width="150" /> | ||
| <!--#_ | ||
| } | ||
| _#--> | ||
|
|
||
| <div style="width: 150px; height: 150px; top: 100px; left: 0px;" class="ms-tileview-tile-detailsBox"> | ||
| <ul class="ms-noList ms-tileview-tile-detailsListMedium"> | ||
| <li collapsed="ms-tileview-tile-titleMedium ms-tileview-tile-titleMediumCollapsed" expanded="ms-tileview-tile-titleMedium ms-tileview-tile-titleMediumExpanded" class="ms-tileview-tile-titleMedium ms-tileview-tile-titleMediumCollapsed"> | ||
| <div collapsed="ms-tileview-tile-titleTextMediumCollapsed" expanded="ms-tileview-tile-titleTextMediumExpanded" class="ms-tileview-tile-titleTextMediumCollapsed">_#= title =#_</div> | ||
| </li> | ||
| <!--#_ | ||
| if (!description.isEmpty) { | ||
| _#--> | ||
| <li title="_#= title =#_" class="ms-tileview-tile-descriptionMedium">_#= description =#_</li> | ||
| <!--#_ | ||
| } | ||
| _#--> | ||
| </ul> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| Tiles display templates | ||
| ================ | ||
|
|
||
| These display templates can be used to visualize your search results as tiles. | ||
|
|
||
| File | Desciption | ||
| --- | --- | ||
| __Control_Tiles.html__ | This is the control template for the tiles. | ||
| __Item_Tiles.html__ | This is the item template to visualize the tiles. | ||
|
|
||
| The display template has the following configurable managed properties: | ||
|
|
||
| - Path (mapped to: Path) | ||
| - Title (mapped to: Title) | ||
| - Picture (mapped to: PublishingImage) | ||
| - Description (no mapping yet) | ||
|
|
||
| ## Result ## | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.