bootstrapping-lambda/local/index.html (200 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>PinBoard</title>
<script src="https://pinboard.local.dev-gutools.co.uk/pinboard.loader.js"></script>
<style>
body {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
column-gap: 10px;
}
h3,
h4 {
margin-top: 10px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<a href="?expandPinboard=true"
>Expand pinboard via query param <code>?expandPinboard=true</code></a
>
<h3>Pinboard pre-selection</h3>
<ul>
<h4>via query param (for workflow/pinboard ID <code>14748</code>)</h4>
<ul>
<li>
<a href="?pinboardId=14748">?pinboardId=14748</a>
</li>
<li>
<a href="?pinboardId=14748&pinboardItemId=1667"
>?pinboardId=14748&pinboardItemId=1667</a
>
</li>
<li>
<a href="?"><em>REMOVE QUERY PARAM</em></a>
</li>
</ul>
<h4>
via hidden element (for composer ID
<code>54f2d2fee4b011581586e710</code>)
</h4>
<button id="btn-add-preselection">Add pinboard pre-selection</button>
<button id="btn-remove-preselection">
Remove pinboard pre-selection
</button>
<h4>via hidden element (for invalid/untracked composer ID)</h4>
<button id="btn-add-invalid-preselection">
Add pinboard INVALID pre-selection
</button>
<button id="btn-remove-invalid-preselection">
Remove pinboard INVALID pre-selection
</button>
</ul>
<h3>Override unread notifications bubble</h3>
<label for="unread-nots"
>Set with a blank input or 0 to see a plain red 🔴</label
>
<div>
<input type="number" name="unread-nots" id="unread-nots" />
<button id="btn-set-unread-notifications-bubble">Set</button>
<button id="btn-unset-unread-notifications-bubble">Unset</button>
</div>
<h3>Fronts Integration</h3>
<h4>Composer Buttons etc. (under trail image in furniture)</h4>
<em>Requires preselected pinboard (like in composer)</em>
<div style="background: #f6f6f6; display: inline-block">
<div style="padding-left: 420px; width: 195px">
<pinboard-suggest-alternate-crops
data-media-id="d6518ba44eb272830b779e4ed6356482007d4536"
></pinboard-suggest-alternate-crops>
</div>
<div>
<pinboard-suggest-alternate-crops
data-media-id="d6518ba44eb272830b779e4ed6356482007d4536"
></pinboard-suggest-alternate-crops>
</div>
</div>
<div style="max-width: 180px">
<h4>Fronts Clipboard Card:</h4>
<pinboard-article-button
data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
></pinboard-article-button>
</div>
<h4>Fronts Article Cards [Collapsed]:</h4>
<pinboard-article-button
data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
></pinboard-article-button>
<br />
<h4>Fronts Article Cards [Expanded]</h4>
<pinboard-article-button
data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
data-with-draggable-thumbs-of-ratio="5:4"
></pinboard-article-button>
<pinboard-article-button
data-url-path="uk-news/2024/oct/21/whats-my-scene-by-the-hoodoo-gurus-"
data-with-draggable-thumbs-of-ratio="4:5"
></pinboard-article-button>
<h3><code>Add to 📌</code> button</h3>
<ul id="button_section">
<h4>present initially</h4>
<code>grid-original</code>
<asset-handle
data-source="grid"
data-source-type="original"
data-thumbnail="https://s3-eu-west-1.amazonaws.com/media-origin.test.dev-guim.co.uk/24733ea386c7fcb37496c55cc86e8f1468b9dfcf/817_0_1866_2333/400.jpg"
data-embeddable-url="https://media.test.dev-gutools.co.uk/images/24733ea386c7fcb37496c55cc86e8f1468b9dfcf"
></asset-handle>
<br />
<code>grid-crop</code>
<asset-handle
data-source="grid"
data-source-type="crop"
data-thumbnail="https://s3-eu-west-1.amazonaws.com/media-origin.test.dev-guim.co.uk/24733ea386c7fcb37496c55cc86e8f1468b9dfcf/817_0_1866_2333/400.jpg"
data-embeddable-url="https://media.test.dev-gutools.co.uk/images/24733ea386c7fcb37496c55cc86e8f1468b9dfcf?crop=817_0_1866_2333"
></asset-handle>
<br />
<code>grid-search</code>
<asset-handle
data-source="grid"
data-source-type="search"
data-api-url="https://api.media.test.dev-gutools.co.uk/images?q=flag%20%20~%22australia%22%20%23xyz%20country:%22United%20Kingdom%22&length=1&orderBy=-uploadTime"
data-embeddable-url="https://media.test.dev-gutools.co.uk/search?query=flag%20%20~%22australia%22%20%23xyz%20country:%22United%20Kingdom%22"
></asset-handle>
<br />
<code>mam-video</code>
<asset-handle
data-source="mam"
data-source-type="video"
data-thumbnail="https://s3-eu-west-1.amazonaws.com/media-origin.test.dev-guim.co.uk/3a9912b476c90c3f66becae89128adb6894c6331/1393_1066_2607_1467/500.jpg"
data-external-url="https://www.youtube.com/embed/smK7tmo5lco?showinfo=0&rel=0"
data-embeddable-url="https://video.code.dev-gutools.co.uk/videos/e0924f34-f4f3-482c-90c5-01c1aee3f18a"
></asset-handle>
<h4>presented after 1 second</h4>
<!--
the setTimeout in the <script> further up will add an element here after 1 second,
which the PinBoard library will detect and convert to a button
-->
<p>
to simulate the host platform presenting re-rendering (i.e. for SPAs)
and Pinboard detecting that and still taking over the element
</p>
</ul>
</body>
<script>
setTimeout(
() => {
const delayedAddButton = document.createElement("asset-handle");
delayedAddButton.dataset.source = "grid";
delayedAddButton.dataset.sourceType = "crop";
delayedAddButton.dataset.thumbnail =
"https://s3-eu-west-1.amazonaws.com/media-origin.test.dev-guim.co.uk/24733ea386c7fcb37496c55cc86e8f1468b9dfcf/817_0_1866_2333/400.jpg";
delayedAddButton.dataset.embeddableUrl =
"https://media.test.dev-gutools.co.uk/images/24733ea386c7fcb37496c55cc86e8f1468b9dfcf?crop=817_0_1866_2333";
document.getElementById("button_section").appendChild(delayedAddButton);
},
1000 // 1 second delay
);
const preSelectPinboardElement =
document.createElement("pinboard-preselect");
preSelectPinboardElement.dataset.composerId = "54f2d2fee4b011581586e710";
document
.getElementById("btn-add-preselection")
.addEventListener("click", () => {
document.body.appendChild(preSelectPinboardElement);
});
document
.getElementById("btn-remove-preselection")
.addEventListener("click", () => {
preSelectPinboardElement.remove();
});
const preSelectInvalidPinboardElement =
document.createElement("pinboard-preselect");
preSelectInvalidPinboardElement.dataset.composerId = "INVALID";
document
.getElementById("btn-add-invalid-preselection")
.addEventListener("click", () => {
document.body.appendChild(preSelectInvalidPinboardElement);
});
document
.getElementById("btn-remove-invalid-preselection")
.addEventListener("click", () => {
preSelectInvalidPinboardElement.remove();
});
const presetUnreadBubblePinboardElement = document.createElement(
"pinboard-bubble-preset"
);
document
.getElementById("btn-set-unread-notifications-bubble")
.addEventListener("click", () => {
presetUnreadBubblePinboardElement.dataset.count =
document.getElementById("unread-nots").value || "0";
document.body.appendChild(presetUnreadBubblePinboardElement);
});
document
.getElementById("btn-unset-unread-notifications-bubble")
.addEventListener("click", () => {
presetUnreadBubblePinboardElement.remove();
});
</script>
</html>