116 lines
5.7 KiB
Handlebars
116 lines
5.7 KiB
Handlebars
{{#if claimInfo.channelName}}
|
|
<div class="row row--padded row--wide row--no-top">
|
|
<div class="column column--2 column--med-10">
|
|
<span class="text">Channel:</span>
|
|
</div><div class="column column--8 column--med-10">
|
|
<span class="text"><a href="/{{claimInfo.channelName}}:{{claimInfo.certificateId}}">{{claimInfo.channelName}}</a></span>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if claimInfo.description}}
|
|
<div class="row row--padded row--wide row--no-top">
|
|
<span class="text">{{claimInfo.description}}</span>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="row row--wide">
|
|
<div id="show-short-link">
|
|
<div class="column column--2 column--med-10">
|
|
<a class="link--primary" href="/{{shortId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}"><span class="text">Link:</span></a>
|
|
</div><div class="column column--8 column--med-10">
|
|
<div class="row row--short row--wide">
|
|
<div class="column column--7">
|
|
<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
|
|
<input type="text" id="short-link" class="input-disabled input-text--full-width" readonly spellcheck="false" value="{{claimInfo.host}}/{{shortId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}" onclick="select()"/>
|
|
</div><div class="column column--1"></div><div class="column column--2">
|
|
<button class="button--primary" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="show-embed-code">
|
|
<div class="column column--2 column--med-10">
|
|
<span class="text">Embed:</span>
|
|
</div><div class="column column--8 column--med-10">
|
|
<div class="row row--short row--wide">
|
|
<div class="column column--7">
|
|
<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
|
|
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
|
|
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='<video width="100%" controls poster="{{claimInfo.thumbnail}}" src="{{claimInfo.host}}/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}"/></video>'/>
|
|
{{else}}
|
|
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='<img src="{{claimInfo.host}}/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}"/>'/>
|
|
{{/ifConditional}}
|
|
</div><div class="column column--1"></div><div class="column column--2">
|
|
<button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="show-share-buttons">
|
|
<div class="row row--padded row--no-bottom row--wide">
|
|
<div class="column column--2 column--med-10">
|
|
<span class="text">Share:</span>
|
|
</div><div class="column column--7 column--med-10">
|
|
<div class="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
|
|
<a class="link--primary" target="_blank" href="https://twitter.com/intent/tweet?text={{claimInfo.host}}/{{shortId}}/{{claimInfo.name}}">twitter</a>
|
|
<a class="link--primary" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{claimInfo.host}}/{{shortId}}/{{claimInfo.name}}">facebook</a>
|
|
<a class="link--primary" target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl={{claimInfo.host}}/{{shortId}}/{{claimInfo.name}}">tumblr</a>
|
|
<a class="link--primary" target="_blank" href="https://www.reddit.com/submit?url={{claimInfo.host}}/{{shortId}}/{{claimInfo.name}}&title={{claimInfo.name}}">reddit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="show-details" class="row row--padded row--no-bottom row--wide" hidden="true">
|
|
<div id="show-claim-name">
|
|
<div class="column column--2 column--med-10">
|
|
<span class="text">Claim Name:</span>
|
|
</div><div class="column column--8 column--med-10">
|
|
{{claimInfo.name}}
|
|
</div>
|
|
</div>
|
|
<div id="show-claim-id">
|
|
<div class="column column--2 column--med-10">
|
|
<span class="text">Claim Id:</span>
|
|
</div><div class="column column--8 column--med-10">
|
|
{{claimInfo.claimId}}
|
|
</div>
|
|
</div>
|
|
<div id="show-claim-id">
|
|
<div class="column column--2 column--med-10">
|
|
<span class="text">File Type:</span>
|
|
</div><div class="column column--8 column--med-10">
|
|
{{#if claimInfo.contentType}}
|
|
{{claimInfo.contentType}}
|
|
{{else}}
|
|
unknown
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row--padded row--no-bottom row--wide">
|
|
<a class="text link--primary" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-status="closed">[more]</a>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSection(event){
|
|
event.preventDefault();
|
|
var dataSet = event.target.dataset;
|
|
var status = dataSet.status;
|
|
var toggle = document.getElementById("show-details-toggle");
|
|
var details = document.getElementById("show-details");
|
|
if (status === "closed") {
|
|
details.hidden = false;
|
|
toggle.innerText = "[less]";
|
|
toggle.dataset.status = "open";
|
|
} else {
|
|
details.hidden = true;
|
|
toggle.innerText = "[more]";
|
|
toggle.dataset.status = "closed";
|
|
}
|
|
}
|
|
</script>
|