We Keep Coding

Set text in div tag with expand to top (vk.com tampermonkey script)

During developing of more convenient messages templates for vk.com I faced an issue with message input expanding down instead of expanding up (like it should). Video
Despite some amount of time spent on investigating and resolving the issue - I could not find the reason and a way to fix it. Explaining video
My code to insert text:
function setText(text) {
const chatDiv = document.querySelector("div.im_editable.im-chat-input--text._im_text");
if (chatDiv) {
chatDiv.innerText = text;
}
}
Tag which I insert to:

How Can I Pass String Variable to Anonymous Adobe View SDK Script?

I have a very basic knowledge of javascript and I have been unable to find a solution for my specific use of the Adobe View SDK API, though it seems like there should be a way. I am working on a web page to show newsletters in the pdf viewer. I have created a w3.css modal element so that I can open the viewer with a button click, and then close it with an "x" in the corner. The button click and the "x" toggle between the display style being "none" or "block". I really like this solution as it lets me use small images of the newsletters as the buttons, and it can be observed here: Test News Page by clicking on the newsletter image below May 4, 2020.
The ultimate goal I have is to be able to change the name of the pdf document that is opened in the viewer by clicking the button, which would need to pass a string variable called "docName" to the url called by the View SDK script. Since the url is already specified in the script inside my modal element when the page loads, here is the thinking I have for the additional script I need to pass my string variables: The button-click invokes my script (function changeName(docName)) and passes the "docName" variable. Then my script needs to pass this variable to the url in the View script (this is the part I don't know how to do), then refresh the page to reload my modal, and then change the display style of the modal to "block". I will copy the code for the View SDK below, showing where I need to insert the string variable with my document name:
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://www.shcsfarmington.org/" + docName + ".pdf"}},
metaData:{fileName: "Newsletter_050420.pdf"}
}, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
});
</script>
It seems like this should work, but with my limited knowledge of javascript I don't know how to pass this variable to the anonymous function in the View SDK code, and I would need as much detail and specifics in the syntax of the solution. I appreciate any help with this. Thanks.
EDIT: I thought maybe it would help to show the code for the function that I have come up with so far - then it could be examined and easier to debug and comment on:
<button id="CSS-050420" onclick="changeDoc('Newsletter_050420');"></button>
<script>
function changeDoc(docName) {
/* Need to pass docName to url=https://shcsfarmington.org/2020/news/Newsletter_" + newsDate + ".pdf"; */
window.location.reload(true);
document.getElementById('viewerModal').style.display='block';
}
</script>

I created a CodePen here for you to look at.
Basically, you'll load the first file when the SDK is ready but then you need to set the adobeDCView to null before recreating it.
function showPDF(url) {
adobeDCView = null;
fetch(url)
.then((res) => res.blob())
.then((blob) => {
adobeDCView = new AdobeDC.View({
// This clientId can be used for any CodePen example
clientId: "e800d12fc12c4d60960778b2bc4370af",
// The id of the container for the PDF Viewer
divId: "adobe-dc-view"
});
adobeDCView.previewFile(
{
content: { promise: Promise.resolve(blob.arrayBuffer()) },
metaData: { fileName: url.split("/").slice(-1)[0] }
},
{
embedMode: "FULL_WINDOW",
defaultViewMode: "FIT_PAGE",
showDownloadPDF: true,
showPrintPDF: true,
showLeftHandPanel: false,
showAnnotationTools: false
}
);
});
}
The link click even will pass the url to the PDF and then display it.

Meta data image for Facebook

I want to use images if I shere some links of my site. Well I am using following for it:
import { Meta, Title } from "#angular/platform-browser";
this.title.setTitle(this.data[0].title + ' - ' + this.data[0].city
);
this.meta.addTags([
{ name: 'keywords', content: 'Globetrotter, Backpacking, Hiking, Travel' + this.data[0].city + ',' + this.data[0].country},
{ name: 'description', content: this.data[0].description},
{ name: 'og:image', content: this.data[0].images[0]}
]);
Everything works fine but with image not and I am not sure if is correct. Within my index.html file I have an another image and this is occuring. Should I delete it? How can I set also the url for displaying the entire site automatically?
index.html
Facebook always shows this images even if I enter different url path.
<meta property="og:image" content="https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_960_720.jpg"
/>
I want that Facebook or other sites recognise the image from here:
{ name: 'og:image', content: this.data[0].images[0]}

The problem is probably, that facebook's crawler/bot does not execute JavaScript and thus will only ever see the <meta> tag you deliver statically in your index.html.
You will either have to use a prerendering service (like prerender.io) or write the correct meta tag on the server side.

Using pace.js on loading appended images

I wanted to use pace.js to show a progress bar while the appended images are being loaded, they provided an API but I have no idea how it works.
$('#loadImg').click(function() {
Pace.start();
var $con = $('#content');
$con.append('<img src="http://lorempixel.com/500/500/">').imagesLoaded(function() {
console.log('done!');
Pace.stop();
});
});
I used it with desandro/imagesloaded to call Pace.stop() but I don't see any progress bars.
I made a demo plunk for your convenience.

You first need to disable pace on page load using:
"startOnPageLoad" : false
Also quoting from pace documentation:
Elements being rendered to the screen is one way for us to decide that the page has been rendered.
So we can say that loading of 'image' should successfully complete the pace progress:
"elements": {
"selectors": ["#image"] // assign id="image" to img
}
Load the pace with these options provided in script tag:
data-pace-options='{ "elements": { "selectors": ["#image"] }, "startOnPageLoad": false }'
Now just call Pace.restart() every time click on link 'Load Image'.
No need to call Pace.stop(). (it automatically detects that #image is done loading)
Updated plunk

Using pictures as links in MooTool's "Floom" script?

Is there any way in floom to load a specific webpage when a user clicks on an image?
The normal syntax is:
var slides = [
{
image: 'image-url.jpg',
caption: 'loriem ispum'
}
I would like to be able to do something like this.
var slides = [
{
image: 'nature-photo0.jpg',
caption: 'loriem ispum'
link: 'http://www.google.com'
}
This way that when my user's click on the images they will be directed to the url.

I'm the author of Floom.
The script provides a onSlideChange event which can be utilized to achieve this.
First inject the slideshow into a a, then use onSlideChange (the first argument is the single image object) now just update the a with the correct link:
onSlideChange: function(slide){
link.set('href', slide.link);
}
This should work.