We Keep Coding

Lazy load image in tippy.js Tooltip?

I'm using tippy.js to generate tooltips. Everything works fine however I have allot of tool tips each with different image content loaded. To reduce load time I would like to lazy load the image to only apear when the tooltip is visible.
I know tippy.js has a built in function to call AJAX content (https://atomiks.github.io/tippyjs/ajax/) - however the content I want to load is in the HTML and I do not want to have to write separate javascript for each tooltip. Ideally it would be great to somehow fetch the img scr of the particular tip I am hovering and than call it to load with the onShow(instance) ~ i.e. fetch('$(this).find("img").data("src");'). I tried a few variations of this but nothing is working.
Here is a codepen (without) lazy loading images: https://codepen.io/jinch/pen/aboNOvP?editors=1010
I have tried to manipulate the AJAX example on their website to work but had not luck (see below).
tippy('body .tippy', {
theme: 'google',
touchHold: true,
hideOnClick: false,
interactive: true,
placement: 'left',
distance: 20,
arrow: true,
animateFill: false,
animation: 'shift-away',
onShow(instance) {
if (instance.state.ajax === undefined) {
instance.state.ajax = {
isFetching: false,
canFetch: true,
}
}
if (instance.state.ajax.isFetching || !instance.state.ajax.canFetch) {
return
}
fetch('$(this).find("img").data("src")')
.then(response => response.blob())
.then(blob => {
})
.catch(error => {
// ...
})
.finally(() => {
instance.state.ajax.isFetching = false
})
},
onHidden(instance) {
instance.setContent('Loading...')
instance.state.ajax.canFetch = true
},
})
The idea result would having the images load only when called to reduce the initial load time of the page.

Thanks to #atomiks you can find the answer here: https://github.com/atomiks/tippyjs/issues/562#issuecomment-521650755

Chrome eventually close - React JS

I have a web site developed using React JS for Navigators, on my computer is working ok, but in a tablet I have an issue. I implemented a simple file chooser filering images only. The problem happens when I took the photo using the camera, it is the camera app in the device, but it doesn't always return to my web site the photo, sometimes there navigator is closed or sometimes a message appears that say the memory is not enough to complete the task.
The problem occurs around once per every ten photos taken, it sounds like a memory leak.
I am using the DropzoneComponent in React to load the image, here is my code:
Component:
import DropzoneComponent from 'react-dropzone-component';
Cod:
<DropzoneComponent
config={componentConfig}
eventHandlers={eventHandlers}
djsConfig={djsConfig}
/>
The configuration:
const djsConfig = {
addRemoveLinks: true,
autoProcessQueue: false,
maxFiles: 1,
maxFilesize: 1,
acceptedFiles: "image/png,image/jpeg",
dictDefaultMessage: 'Drop here the image or select',
dictFileTooBig: 'File is too big',
dictInvalidFileType: 'Invalid file',
};
const componentConfig = {
iconFiletypes: ['.jpg', '.png'],
showFiletypeIcon: true,
postUrl: 'no-url'
};
When the image is loaded I do this things to process the image, but this method is not called.
addedfile = (file) => {
alert('OLA K ASE')
this.dropzone.removeAllFiles();
Resizer.imageFileResizer(
file, //is the file of the new image that can now be uploaded...
900, // is the maxWidth of the new image
900, // is the maxHeight of the new image
'JPEG', // is the compressFormat of the new image
92, // is the quality of the new image
0, // is the rotatoion of the new image
uri => {
this.setState({ src: uri });
}, // is the callBack function of the new image URI
'base64' // is the output type of the new image
);
}

How do you call arbitrary functions using addRules with declarativeContent listeners in Chrome Extensions?

I am trying to change an extension I'm working on from a browser action to a page action. Currently, the extension detects a tab change and, if the URL of the tab is on our domains, makes a request for JSON data for status information, so it can make the good icon or the bad icon appear as a status indicator. My browser action code was this:
chrome.tabs.onActivated.addListener(function(activeInfo) {
chrome.tabs.get(activeInfo.tabId, function(tab) {
var url = tab.url,
matches = url.match(/(domain1)|(domain2)\.com/g);
if (url && matches) {
// Query for JSON data and change the icon based on it.
loadReach(url);
} else {
// Change the icon bad
}
});
});
I have the basic listeners in place to insert the declarativeContent listener and show the initial icon, but am unsure where to put my callback that makes the query for the JSON data:
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'domain1.com' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'domain2.com' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
Where in the second codeblock would I be able to run that callback, or is it not supported by this method?

Chrome Extension ContextMenu for PDF

I'm developing a extension for the chrome browser and i want to add a specified contextmenu for pdf documents. I also add to specified contextmenus for the type "page" and "image".
If i set the type to "all" then there is a contextmenu, but not specified for pdf documents.
Is it possible to add a specified contextmenu for pdf documents or should i use a the type "all" an it make switch case in the clickEventHandler?!
See more at:
http://developer.chrome.com/extensions/contextMenus.html
These are the "file" types:
contexts ( optional array of enum of "all", "page", "frame", "selection", "link", "editable", "image", "video", "audio", or "launcher" )

I'm guessing that you want to add a context menu only when a PDF is shown in a tab, right? Just asking because I thought at first that you wanted to add the context menu on links to PDF files, which is indeed possible*. (as you probably know)
I couldn't find a way to do this directly, however one alternative could be to listen to chrome.tabs.onActivated and add or remove your context menu based on if the current URL matches a PDF file. One drawback is that it means asking for the tabs permission which might looks scary to users. ("This extension can access your tabs and browsing activity" or something like that)
*for the curious, you do it like this:
chrome.contextMenus.create({
title: "Hello world",
contexts: ["link"],
targetUrlPatterns: ["*://*/*.pdf"]
});
(you would add the other options that interest you of course)

This functions works for me for pdf documents:
chrome.tabs.onActivated.addListener(function (info) {
var tab = chrome.tabs.get(info.tabId, function (tab) {
if (tab.url.indexOf(".pdf") > 0) {
chrome.contextMenus.create({
"id": "1",
title: "Just for PDF Documents",
contexts: ["all"],
onclick: function (e) {
}
});
} else {
chrome.contextMenus.remove("1", null);
}
});
});
Maybe the line
if (tab.url.indexOf(".pdf") > 0) {
should edit with a expression!

Current answers are not perfect:
The way to remove context menus
Not work well with new open pdf file or multiple windows
let g_contextMenus = [{
id: "test",
title: "test"
}];
function createContextMenus() {
for (var menu of g_contextMenus) {
chrome.contextMenus.create({
id: menu["id"],
type: "normal",
title: menu["title"],
contexts: ["all"]
});
}
}
createContextMenus();
function updateContextMenu(tabId) {
chrome.tabs.get(tabId, function(tab) {
var suffix = tab.url.slice(-4);
var isPdf = suffix.toLowerCase() == ".pdf";
for (var menu of g_contextMenus) {
chrome.contextMenus.update(menu["id"], { visible: isPdf })
}
});
};
/**
* Switch tab
**/
chrome.tabs.onActivated.addListener(function(info) {
updateContextMenu(info.tabId);
});
/**
* New open file
**/
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
var suffix = tab.url.slice(-4);
if (info.status == "complete" && suffix.toLowerCase() == ".pdf") {
updateContextMenu(tabId);
}
});
/**
* Multiple window/New window
**/
chrome.windows.onFocusChanged.addListener(function(winId) {
chrome.tabs.query({ lastFocusedWindow: true, active: true }, function(tabs) {
updateContextMenu(tabs[0].id);
});
});
References:
How to get the currently opened tab's URL in my page action popup?
Check if Item is already in the Context Menu

Flowplayer disable autoplay with OVA

I have a problem which is probably easy to solve but i has not yet found a solution. I try to initialize Flowplayer with the OVA (Ad management) plugin. If I set the parameter "autoPlay" = false on a clip the player won't autoplay on initialization. Just as I wan't it. However, if I have, let's say a pre-roll, managed by the OVA plugin it will play once you hit the Play button. But once the pre-roll has finished the main clip won't autoplay. The user has to hit "Play" again.
So the question is: How do I use Flowplayer with OVA and the player shouldn't autoplay until the user hits "Play" but once a pre-roll (or any other ad) has played it should continue to the next clip?
flowplayer( "elementID", "flowplayer.commercial-3.2.15.swf",
{
clip:
{
url: "video.mp4",
autoPlay: false
},
plugins:
{
ova:
{
url: "ova.swf",
ads:
{
schedule:
[
{
position: "pre-roll",
server:
{
type: "direct",
tag: "vast.url"
}
}
]
}
}
}
}
);

Maybe it's too late for a response, but for the ones visiting this post henceforth, the answer is to put autoPlay:false inside the "ova" object, instead of the "clip" one:
ova: {
url: "ova.swf",
autoPlay: false,
// ----- "general" options here -----
}