AverageMarcus/gopherss
1
0
Fork 0
Code Pull Requests Releases Activity

Added iframe toggle

Browse Source
This commit is contained in:
Marcus Noble 2021-02-21 09:55:33 +00:00
parent 6b58e9115b
commit ab390c9d47
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
views/index.html
View File

@ -111,6 +111,9 @@
<div class="card item-content" :data-id="item.ID" v-if="item.ID == selectedItem"> <div class="card item-content" :data-id="item.ID" v-if="item.ID == selectedItem">
<div class="card-content"> <div class="card-content">
<div class="menu"> <div class="menu">
<button title="Show IFrame" v-on:click="showIframe(item)" :disabled="isBusy">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"width="24" height="24" viewBox="0 0 426 426" enable-background="new 0 0 426.001 426.001"><g><path d="M406.8 54.2H19.2A19.2 19.2 0 000 73.4v279.2c0 10.6 8.6 19.2 19.2 19.2h387.6c10.6 0 19.2-8.6 19.2-19.2V73.4c0-10.6-8.6-19.2-19.2-19.2zM368.4 82a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm-48 0a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm-48 0a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm115.2 251.5H38.4V141.6h349.2v191.8z"/></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
</button>
<button title="Save" v-on:click="saveItem(item)" :disabled="isBusy"> <button title="Save" v-on:click="saveItem(item)" :disabled="isBusy">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.8 5.6l-.8.8-.8-.8a5.4 5.4 0 00-7.6 7.6l7.9 7.9c.3.3.7.3 1 0l8-8a5.4 5.4 0 10-7.7-7.5z" :style="{'fill': item.Save ? '#ff2e88' : '' }" fill-rule="nonzero"/></svg> <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.8 5.6l-.8.8-.8-.8a5.4 5.4 0 00-7.6 7.6l7.9 7.9c.3.3.7.3 1 0l8-8a5.4 5.4 0 10-7.7-7.5z" :style="{'fill': item.Save ? '#ff2e88' : '' }" fill-rule="nonzero"/></svg>
</button> </button>
@ -216,6 +219,9 @@
this.setBusy(false); this.setBusy(false);
}) })
}, },
showIframe(item) {
document.querySelector(`feed-item[item-id='${item.ID}'`).showIframe();
},
nextItem() { nextItem() {
let currentItem = -1; let currentItem = -1;
if (this.selectedItem != undefined) { if (this.selectedItem != undefined) {

14
views/static/feed-item.js
View File

@ -74,6 +74,12 @@ class FeedItem extends HTMLElement {
padding: 0 4px; padding: 0 4px;
} }
iframe {
display: block;
width: 100%;
min-height: 600px;
border: none;
}
</style> </style>
`; `;
@ -81,7 +87,8 @@ class FeedItem extends HTMLElement {
.then(res => res.json()) .then(res => res.json())
.then(item => { .then(item => {
template.innerHTML += `<h1><a href="${item.URL}" target="_blank" rel="noopener">${item.Title}</a></h1>`; template.innerHTML += `<h1><a href="${item.URL}" target="_blank" rel="noopener">${item.Title}</a></h1>`;
template.innerHTML += item.Content || item.Description; template.innerHTML += `<div class="feedContent">${item.Content || item.Description}</div>`;
template.innerHTML += `<iframe style="display: none;" data-src="${item.URL}"></iframe>`
this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.appendChild(template.content.cloneNode(true));
[...this.shadowRoot.querySelectorAll('a[href^=http]')].forEach(a => { [...this.shadowRoot.querySelectorAll('a[href^=http]')].forEach(a => {
a.setAttribute("target", "_blank"); a.setAttribute("target", "_blank");
@ -107,7 +114,12 @@ class FeedItem extends HTMLElement {
a.href = url.origin +'/'+ a.getAttribute('src'); a.href = url.origin +'/'+ a.getAttribute('src');
}); });
}) })
}
showIframe() {
this.shadowRoot.querySelector(".feedContent").style.display = "none";
this.shadowRoot.querySelector("iframe").src = this.shadowRoot.querySelector("iframe").dataset.src;
this.shadowRoot.querySelector("iframe").style.display = "block";
} }
} }
customElements.define('feed-item', FeedItem); customElements.define('feed-item', FeedItem);