approx height calculation from note menu
This commit is contained in:
ThatOneCalculator
parent
681a9c01af
commit
ba2b7e5bc9
5 changed files with 20 additions and 104 deletions
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue