Skip to content

Instantly share code, notes, and snippets.

@wpo365

wpo365/yammer.feed.template.html

Created May 25, 2020 19:54
Show Gist options
  • Save wpo365/9f53c3bb5db602bdec3620bbd45da83b to your computer and use it in GitHub Desktop.
Save wpo365/9f53c3bb5db602bdec3620bbd45da83b to your computer and use it in GitHub Desktop.
Download ZIP
Default Handlebars template that can be used (and customized) when embedding a Yammer feed in WordPress page or post using the WPO365 (WordPress + Office 365) plugin (see https://www.wpo365.com/working-with-handlebars-templates/ for details).
Raw
yammer.feed.template.html
<content>
<script id="jshelpers">
if (!!window.wpo365
&& 'registerHandlebarsHelper' in window.wpo365
&& 'handlebarsSafeString' in window.wpo365
&& 'moment' in window.wpo365) {
window.wpo365.registerHandlebarsHelper('formatSummary',
function (summary) {
return window.wpo365.handlebarsSafeString(
summary
.replace(/<c0\>/g, '<strong>')
.replace(/<\/c0\>/g, '</strong>')
.replace(/<ddd\/>/g, '&#8230'));
});
window.wpo365.registerHandlebarsHelper('formatDateTime', function (dateString, formatString) {
if (!!dateString && !!formatString) {
return window.wpo365.moment(Date.parse(dateString)).format(formatString);
}
return dateString;
});
window.wpo365.registerHandlebarsHelper('yammerIcon', function (svg) {
if (!!svg) {
return window.wpo365.handlebarsSafeString(svg);
}
return '';
});
}
</script>
<header id="header" type="x-handlebars-template">
<style>
.pintra-flex {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
}
.pintra-flex-column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.pintra-flex-shrink-0 {
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
flex-shrink: 0;
}
.pintra-flex-grow-1 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.pintra-align-items {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.pintra-align-items-start {
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.pintra-justify-content {
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.pintraYammerFeed {
font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}
.pintraYammerMessage {
outline: transparent;
min-height: 60px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #eee;
margin: 3px;
cursor: pointer;
background-color: #ffffff;
}
.pintraYammerMessage:hover {
background: #eee;
}
.pintraYammerMessage::selection {
background-color: #bfdcea;
}
.pintraYammerMugshotArea {
width: 50px;
height: 50px;
}
.pintraYammerMugshot {
display: block;
width: inherit;
height: inherit;
text-align: center;
}
.pintraYammerMugshot>img {
display: inline-block;
width: inherit;
height: auto;
border-radius: 50%;
}
.pintraYammerTitleArea {
width: calc(100% - 50px);
box-sizing: border-box;
padding: 5px 20px;
}
.pintraYammerGroupArea {
height: 20px;
line-height: 20px;
}
.pintraYammerGroupIcon {
font-size: 14px;
line-height: 14px;
height: 14px;
width: 20px;
margin: 0;
padding: 0;
color: #0078d4;
}
.pintraYammerGroupName {
font-size: 12px;
line-height: 14px;
height: 14px;
margin: 0;
padding: 0;
}
.pintraYammerTitle {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 50px);
height: 20px;
line-height: 20px;
}
.pintraYammerTimestamp {
color: #646d7a;
font-weight: 200;
font-size: 12px;
}
.pintraYammerMain {
margin: 5px 20px 5px 70px;
padding: 10px 10px 10px 0px;
border-top: 1px solid #eee;
height: 100%;
}
.pintraYammerIcon>div {
padding: 0px 10px 0px 0px;
}
.pintraYammerIcon>div>svg {
width: 24px !important;
height: 24px !important;
color: #0078d4;
}
.pintraYammerBody {
font-size: 13px;
}
.pintraYammerBodyTitle {
padding: 0px;
font-size: 14px;
display: block;
font-weight: 600;
}
.pintraYammerBodyContent {
padding: 0px;
display: block;
font-size: 13px;
}
.pintraYammerBodyImage>img {
max-width: 100%;
width: 100%;
height: auto;
}
.pintraYammerLikes {
line-height: 20px;
height: 20px;
margin-left: 70px;
font-size: 12px;
}
.pintraYammerLikesIcon {
font-size: 12px;
line-height: 12px;
height: 12px;
width: 20px;
color: #0078d4;
}
.pintraYammerLikesCount {
height: 12px;
line-height: 12px;
color: #0078d4;
}
.pintraYammerLoadMore {
padding: 5px;
}
</style>
</header>
<main id="item" type="x-handlebars-template">
<div class="pintra-flex pintra-flex-column pintraYammerFeed">
{{#each messages}}
<div class="pintra-flex pintra-flex-column pintraYammerMessage"
onclick="window.open('{{{this.web_url}}}', '_blank')">
<div class="pintra-flex pintraYammerHeader">
<div class=".pintra-flex-shrink-0 pintraYammerMugshotArea">
<div class="pintraYammerMugshot">
{{yavatar this.sender.mugshot_url this.sender.mugshot_url_template}}
</div>
</div>
<div class="pintra-flex pintra-flex-column pintra-flex-grow-1 pintraYammerTitleArea">
<div class="pintra-flex pintraYammerGroupArea">
<div class="pintraYammerGroupIcon">
{{fabricIcon 'Group'}}
</div>
<div class="pintra-flex-grow-1 pintraYammerGroupName">{{this.group.full_name}}</div>
</div>
<div class="pintraYammerTitle">{{this.sender.full_name}} - <span
class="pintraYammerTimestamp">{{formatDateTime this.created_at 'l LT'}}</span></div>
</div>
</div>
<div class="pintra-flex pintra-align-items-start pintraYammerMain">
<div class="pintra-flex-shrink-0 pintraYammerIcon">
{{#ifCond this.message_type '==' 'question'}}
<div class="pintra-flex pintra-flex-column">
<svg viewBox="0 0 240 240" class="y-icon" aria-hidden="true" tabindex="-1" focusable="false"
style="height: 14px; width: 14px;">
<path
d="M137.7 75c0 10.5-2.85 18-8.55 24s-14.4 10.5-24.45 12v16.8H90.45V108c0-3 2.85-7.5 5.7-7.5 8.55-1.5 27.3-9 27.3-24 0-9-8.55-19.5-27.3-19.5-17.25 0-27.3 18-28.65 25.5L56 75c1.45-10.5 15.7-31.5 41.5-31.5S137.7 63 137.7 75zm-47.25 61.5h14.4v12h-14.4z">
</path>
<path
d="M51.6 232.5V174C23 159 0 129 0 96 0 46.5 41.55 7.5 94.65 7.5c51.6 0 94.65 39 94.65 88.5 0 24-10.05 45-27.3 61.5S123.3 183 100.35 183zM94.65 21C50.25 21 12.9 54 12.9 96c0 28.5 18.6 55.5 47.4 67.5L66 165v34.5l28.65-30h1.5c21.45 0 41.55-9 55.95-22.5a73.08 73.08 0 0 0 23-52.5C176.4 54 139.2 21 94.65 21z">
</path>
<path
d="M184.5 229.5L135 198l7.5-12 28.5 19.5 1.5-25.5 4.5-1.5c30-12 49.5-37.5 49.5-67.5 0-19.5-9-39-24-52.5l9-10.5c18 16.5 28.5 39 28.5 63 0 33-21 63-54 78z">
</path>
</svg>
</div>
{{/ifCond}}
{{#ifCond this.message_type '==' 'announcement'}}
<div class="pintra-flex pintra-flex-column">
<svg viewBox="0 0 240 240" class="y-icon" aria-hidden="true" tabindex="-1" focusable="false"
style="height: 14px; width: 14px;">
<path fill-rule="evenodd"
d="M0 90c1.094 0 2.598.04 4.512.117 1.914.078 3.77.117 5.566.117.86 0 1.66-.02 2.402-.058.743-.04 1.348-.098 1.817-.176L225 52.5a17.122 17.122 0 0 1 1.875-.176c.781-.039 1.64-.058 2.578-.058 1.875 0 3.828.039 5.86.117 2.03.078 3.593.117 4.687.117v135c-1.094 0-2.617.02-4.57.059-1.953.039-3.867.058-5.743.058h-3.515c-1.016 0-1.836-.078-2.461-.234l-89.414-15.938c-.781 4.453-2.285 8.594-4.512 12.422-2.226 3.828-4.98 7.11-8.262 9.844-3.28 2.734-6.972 4.883-11.074 6.445-4.101 1.563-8.418 2.344-12.949 2.344-5.156 0-10.02-.977-14.59-2.93-4.57-1.953-8.555-4.629-11.953-8.027-3.398-3.398-6.074-7.383-8.027-11.953C60.977 175.02 60 170.156 60 165c0-2.188.234-4.414.703-6.68L14.297 150a28.823 28.823 0 0 0-2.05-.176 45.878 45.878 0 0 0-2.403-.058c-1.719 0-3.457.039-5.215.117-1.758.078-3.3.117-4.629.117V90zm97.5 97.5c2.734 0 5.352-.469 7.852-1.406 2.5-.938 4.726-2.246 6.68-3.926a23.253 23.253 0 0 0 4.921-5.918c1.328-2.266 2.227-4.766 2.695-7.5l-44.296-7.852A24.936 24.936 0 0 0 75 165c0 3.125.586 6.055 1.758 8.79 1.172 2.733 2.773 5.116 4.805 7.148 2.03 2.03 4.414 3.632 7.148 4.804 2.734 1.172 5.664 1.758 8.789 1.758zM225 67.617L15 105v30c.547 0 .977.04 1.29.117L225 172.383V67.617z">
</path>
</svg>
</div>
{{/ifCond}}
{{#ifCond this.message_type '==' 'poll'}}
<div class="pintra-flex pintra-flex-column">
<svg viewBox="0 0 240 240" class="y-icon" aria-hidden="true" tabindex="-1" focusable="false"
style="height: 14px; width: 14px;">
<path fill-rule="evenodd"
d="M180 30v45H45V30h135zm-15 30V45H60v15h105zm-15 30v45H45V90h105zm-15 30v-15H60v15h75zm75 30v45H45v-45h165zm-15 30v-15H60v15h135zM30 210h195v15H15V15h15v195z">
</path>
</svg>
</div>
{{/ifCond}}
{{#if this.attachments.praise}}
{{#each ./this.attachments.praise}}
<div class="pintra-flex pintra-flex-column">
{{yammerIcon this.icon}}
</div>
{{/each}}
{{/if}}
</div>
<div class="pintraYammerBody">
{{#if this.attachments.praise}}
{{#each ./this.attachments.praise}}
<div class="pintraYammerBodyTitle">{{yammerIcon this.description}}</div>
<div class="pintraYammerBodyContent">{{yammerIcon this.comment}}</div>
{{/each}}
{{else if this.attachments.image}}
<div class="pintraYammerBodyTitle">{{./this.content_excerpt}}</div>
{{#each ./this.attachments.image}}
<div class="pintraYammerBodyImage"><img src="{{{this.preview}}}"></div>
{{/each}}
{{else if this.attachments.shared_message}}
<div class="pintraYammerBodyTitle">{{./this.content_excerpt}}</div>
{{#each ./this.attachments.shared_message}}
<div class="pintraYammerBodyContent">{{this.content_excerpt}}</div>
{{/each}}
{{else}}
<div>{{this.content_excerpt}}</div>
{{/if}}
</div>
</div>
<div class="pintra-flex pintraYammerFooter">
<div class="pintra-flex pintra-align-items pintraYammerLikes">
<div class="pintraYammerLikesIcon">{{fabricIcon 'LikeSolid'}}</div>
<div class="pintra-flex pintraYammerLikesCount">{{this.liked_by.count}}</div>
</div>
</div>
</div>
{{/each}}
</div>
</main>
<footer id="footer" type="x-handlebars-template">
</div>
</footer>
</content>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment