approx height calculation from note menu

This commit is contained in:
ThatOneCalculator 2023-07-03 01:24:34 -07:00
parent 681a9c01af
commit ba2b7e5bc9
No known key found for this signature in database
GPG key ID: 8703CACD01000000
5 changed files with 20 additions and 104 deletions

View file

@ -1,88 +0,0 @@
// @ts-check
/**
* This embed script is from Mastodon. Thank you, website boy! :)
*
* License: AGPLv3, Mastodon gGmbH
* Original source: https://github.com/mastodon/mastodon/blob/main/public/embed.js
* Current source: https://codeberg.org/calckey/calckey/src/branch/develop/packages/backend/assets/embed.js
* From: Eugen Rochko <eugen@zeonfederated.com>
* Co-authored-by: Rohan Sharma <i.am.lone.survivor@protonmail.com>
* Co-authored-by: rinsuki <428rinsuki+git@gmail.com>
* Co-authored-by: Matt Hodges <hodgesmr1@gmail.com>
* Co-authored-by: Claire <claire.github-309c@sitedethib.com>
* Co-authored-by: Kainoa Kanter <kainoa@t1c.dev>
*/
(function () {
'use strict';
/**
* @param {() => void} loaded
*/
const ready = function (loaded) {
if (document.readyState === 'complete') {
loaded();
} else {
document.addEventListener('readystatechange', function () {
if (document.readyState === 'complete') {
loaded();
}
});
}
};
ready(function () {
/** @type {Map<number, HTMLIFrameElement>} */
const iframes = new Map();
window.addEventListener('message', function (e) {
const data = e.data || {};
if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) {
return;
}
const iframe = iframes.get(data.id);
if (iframe != null) {
if ('source' in e && iframe.contentWindow !== e.source) {
return;
}
iframe.height = data.height;
}
});
[].forEach.call(document.querySelectorAll('iframe.embed'), function (iframe) {
// select unique id for each iframe
let id = 0;
let failCount = 0;
const idBuffer = new Uint32Array(1);
while (id === 0 || iframes.has(id)) {
id = crypto.getRandomValues(idBuffer)[0];
failCount++;
if (failCount > 100) {
// give up and assign (easily guessable) unique number if getRandomValues is broken or no luck
id = -(iframes.size + 1);
break;
}
}
iframes.set(id, iframe);
iframe.scrolling = 'no';
iframe.style.overflow = 'hidden';
iframe.onload = function () {
iframe.contentWindow.postMessage({
type: 'setHeight',
id: id,
}, '*');
};
iframe.onload();
});
});
})();

View file

@ -42,13 +42,16 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
const props = withDefaults(
defineProps<{
id: string;
title?: string;
height?: number;
}>(),
{
id: "No ID provided!",
title: "Calckey",
height: 600,
}
);
const codeblock = `<iframe src="https://${host}/notes/${props.id}/embed" class="embed" style="max-width: 100%; border: 0" width="400" height="600" allowfullscreen="allowfullscreen"></iframe><scr` + `ipt src="https://${host}/static-assets/embed.js" async="async"></scr` + `ipt>`;
const codeblock = `<iframe src="https://${host}/notes/${props.id}/embed" class="embed" style="max-width: 100%; border: 0" width="400" height="${props.height}" title=${props.title} allowfullscreen="allowfullscreen"></iframe>;`
</script>
<style lang="scss" module>

View file

@ -926,7 +926,11 @@ export function post(props: Record<string, any> = {}) {
});
}
export function showEmbedDialog(props: {id: string}) {
export function showEmbedDialog(props: {
id: string;
name: string;
height: number;
}) {
return new Promise(() => {
popup(
defineAsyncComponent({

View file

@ -3,7 +3,7 @@
<div class="fcuexfpr">
<div v-if="appearNote" class="note">
<div class="main _gap">
<div class="note _gap" ref="noteContainer">
<div class="note _gap">
<XNoteDetailed
:key="appearNote.id"
v-model:note="appearNote"
@ -30,7 +30,6 @@ const props = defineProps<{
noteId: string;
}>();
const noteContainer = $ref<HTMLElement>();
let note = $ref<null | misskey.entities.Note>();
let error = $ref();
let isRenote = $ref(false);
@ -100,16 +99,6 @@ definePageMetadata(
: null
)
);
onMounted(() => {
window.parent.postMessage(
{
type: "setHeight",
height: noteContainer?.clientHeight,
},
"*"
);
});
</script>
<style lang="scss" scoped>

View file

@ -111,7 +111,15 @@ export function getNoteMenu(props: {
function embed(): void {
os.showEmbedDialog({
id: appearNote.id,
})
name: `Calckey post from ${appearNote.user.name}`,
height: appearNote.text
? Math.round(
Math.ceil(appearNote.text.length / Math.floor(300 / (14 * 0.6))) *
14 *
1.2,
) + 200
: 500,
});
}
function copyOriginal(): void {