My problem is I have one webview Containing Dynamic Form or form which is created dynamic with WP Builders and that is included in iframe and i want to select file from application in nativescript this will not allow me select file.
So I want to try
How to load files into webview in native script
http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communication/
But problem is form is dynamic is there any script which will detect click event of file input inside frame and also put file path to it when file is selected if we can detect event for file input click.
another issue is what if there are more than one file input in dynamic form
I Got Answer by Implementing WebChromeClient In android
let webview: WebView = this.webViewRef.nativeElement;
let myWebChromeClient: MyWebChromeClient = new MyWebChromeClient();
webview.android.setWebChromeClient(myWebChromeClient);
and class MyWebChromeClient is here
import * as imagepicker from "nativescript-imagepicker";
import * as fs from "file-system";
export class MyWebChromeClient extends android.webkit.WebChromeClient {
file_path:string;
constructor() {
super();
return global.__native(this);
}
onShowFileChooser(webView,filePathCallback,fileChooserParams) {
this.filepathCallback(filePathCallback);
return true;
}
filepathCallback(filePathCallback)
{
let context = imagepicker.create({
mode: "single",
mediaType: imagepicker.ImagePickerMediaType.Any
});
this.startSelection(context,filePathCallback);
}
startSelection(context,filePathCallback) {
context.authorize().then(() => {
return context.present();
})
.then((selection) => {
selection.forEach((selected) => {
let path = selected.android;
let file = fs.File.fromPath(path);
this.file_path = file.path;
this.file_path = "file://" + this.file_path;
let results = Array.create(android.net.Uri, 1);
results[0] = android.net.Uri.parse(this.file_path);
filePathCallback.onReceiveValue(results);
return this.file_path;
});
}).catch(function (e) {
console.log(e);
});
}
}
Related
In my react application, give editors is an array of all editors created with monaco.editor.create() that are currently opened in the application, let's say I have this:
const resizeObserver = useRef(new ResizeObserver(entries => {
console.log('entries = ', entries);
for(let entry of entries) {
console.log('target = ', entry.target);
const editor = getEditor(entry.target.id);
console.log('editor = ', editor);
editor.layout({} as monaco.editor.IDimension);
}
}));
it fires properly but the editor isn't resized. But let's say I'd resize only the current editor:
window.onresize = () => {
const editor = editors[0];
editor.layout({} as monaco.editor.IDimension);
}
this works fine. What am I missing?
In a React application, when you only have one visible editor on a page, only use one editor. Don't store editor instances somewhere for manipulations, when they are not visible. Instead use componentDidMount to load a new model in the (only) editor instance and save state of the editor in componentUpdated. Here's a code editor component, which does all that.
For the resize operation use a resize observer in the editor component. Set it up in its constuctor:
if (typeof ResizeObserver !== "undefined") {
this.resizeObserver = new ResizeObserver(this.handleEditorResize);
}
and handle the resize in that editor component like this:
private handleEditorResize = (entries: readonly ResizeObserverEntry[]): void => {
if (entries.length > 0) {
const rect = entries[0].contentRect;
this.editor?.layout({ width: rect.width, height: rect.height });
}
};
Don't forget to clean up when the component is unmounted:
public componentWillUnmount(): void {
...
this.resizeObserver?.unobserve(this.hostRef.current as Element);
}
I want to paste image from my clipboard to whatsapp chat from clipboard i tried using document exec command with different parameters like insertHTML , insertImage these two add image in content editable div but does not enable the send button. I also tried using document exec command paste but its pasting nothing. I double checked and images exists on clipboard.
async function sendToChat(blob) {
setToClipboardImg(blob)
try {
document.querySelector('._6h3Ps ._13NKt').focus()
} catch (e) {
document.querySelector('textarea').focus()
}
// const data = [new ClipboardItem({
// [text.type]: text
// })]
// await navigator.clipboard.write(data)
document.execCommand("Paste", null, null);
//setToClipboardWithTextInsta()
}
var setToClipboardImg = async blob => {
window.focus();
const data = [new ClipboardItem({
[blob.type]: blob
})]
await navigator.clipboard.write(data);
}
I needed exactly the same funcionality, I was able to resolve it using html2canvas, you can convert an html element into an image and then send it through whatsapp from the clipboard, here is how I implemented it:
document.querySelector("#btn").onclick(function () {
var table = document.querySelector("#table");
var elementContainer = document.querySelector("#previewImage");
try {
// Prevent duplicates since the element will be appended to the container
if (elementContainer.innerHTML) {
elementContainer.innerHTML = "";
}
html2canvas(table).then(canvas => {
elementContainer.appendChild(canvas);
canvas.toBlob(blob => navigator.clipboard.write([new
ClipboardItem({'image/png': blob})]));
alert('😁 The screenshot for the table currently displayed was copied to the clipboard, you can now paste into the WhatsApp chats 😁');
});
}
catch(err){
document.querySelector("#output").innerHTML = err.message;
}
}
Then in the head of the document add the following cdn:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
I've made a "pluggable" system in React, which dynamically runs tiny "apps" which consist of an HTML, JS and CSS file. The HTML and CSS files are optional. They intercommunicate through the window object.
I'm dynamically loading the three files here, but I'm having the problem that my CSS classes fail to work 1/5 of the time. They don't even seem to get parsed since I cannot manually apply them in Chrome devtools either.
I've tried using both link and style tags to load the CSS, but both have the same problem. Even a 1000ms setTimeout between the CSS and HTML injection doesn't help. CSS parsing consistently fails roughly every third time the component mounts..
I've tried Chrome, Firefox, and Safari. Same problem in all three.
I'm kind of stuck, I'd love to get some feedback on this..
Here is a video of the issue: (the "app" here is a simple SVG file viewer) http://www.giphy.com/gifs/dvHjBBolgA1xAdyRsv
const windowInitialized = useElementBlockInitialization({
id: elementBlockID,
payload: payload,
onResult: onResult
});
const [styleAndHTMLInitialized, setStyleAndHTMLInitialized] = useState(false);
// after some properties are set in Window, run this effect
useEffect(() => {
let gettingStyleAndHTML = false;
if (windowInitialized) {
gettingStyleAndHTML = true;
getStyleAndHTML().then(({ styleBody, htmlBody }) => { // async function that fetches some html and css as a string (both potentially null)
if (gettingStyleAndHTML) {
if (styleBody) {
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.appendChild(document.createTextNode(styleBody));
document.head.appendChild(styleElement);
}
if (htmlBody) {
// containerElement is a ref
containerElement.current.innerHTML = htmlBody;
}
setStyleAndHTMLInitialized(true);
}
});
}
return () => {
gettingStyleAndHTML = false;
};
}, [windowInitialized]);
// after the CSS and HTML is injected, run this hook
useEffect(() => {
if (styleAndHTMLInitialized) {
const scriptElement = document.createElement('script');
scriptElement.setAttribute('data-eb-container-id', containerElementID);
scriptElement.setAttribute('data-eb-id', elementBlockID);
scriptElement.setAttribute('src', makeElementBlockBaseURL() + '.js');
document.head!.appendChild(scriptElement);
return () => {
scriptElement.remove();
};
}
return;
}, [styleAndHTMLInitialized]);
// only render the container once the window properties are set
return windowInitialized ? (
<Container ref={containerElement} id={containerElementID} />
) : null;
I figured it out.
My automatically generated class names occasionally started with a number. CSS class names can not apparently start with a number!
Do'h.
I am trying to do an XML import automatically from a startup script when a document is loaded. I am successful in getting most of the content to populate, but images are being ignored. Everything works, including images, when I do a manual 'Import XML' through the UI, or through a manual script.
Below is my manual script:
var myDocument = app.activeDocument;
var xmlFile = File('/c/Full/Path/To/data.xml');
myDocument.importXML(xmlFile);
But the goal is to do it on startup. Below is my startup script:
#targetengine "session"
app.addEventListener('afterOpen', function(myEvent) {
if (myEvent.target.constructor.name !== 'Document') {
return;
}
var myDocument = myEvent.target;
var xmlFile = File('/c/Full/Path/To/data.xml');
myDocument.importXML(xmlFile);
});
Below is the XML tag for the image:
<Image href="file:///C:/Full/Path/To/Image/02.png" />
I'm wondering if there is an issue with the 'afterOpen' event callback, and that's the reason why it works manually using the same method, but not in the startup script.
I was able to get around the issue by avoiding the event listener altogether.
main();
function main () {
// create a path for a file object
var curFile = File('/c/Path/To/file.indd');
var xmlFile = File('/c/Path/To/data.xml');
// close app if files don't exist
if (!curFile.exists || !xmlFile.exists) {
app.quit(SaveOptions.NO);
}
// open the file
var curDoc = app.open(curFile);
// import the xml
curDoc.importXML(xmlFile);
// create a new file object
var pdfFile = new File(curFile.parent + '/' + curFile.name + '.pdf');
// export to pdf
curDoc.exportFile(ExportFormat.PDF_TYPE, pdfFile);
// close app
app.quit(SaveOptions.NO);
}
I am trying to combine ContentFlow (http://jacksasylum.eu/ContentFlow/) and ColorBox (http://www.jacklmoore.com/colorbox/): when the user clicks on an image in ContentFlow I want an HTML page to be displayed in ColorBox.
I have tried using the code provided by the ColorBox examples' section to no avail. The HTML page is loaded by the browser as a normal link (not in ColorBox.)
I have even tried creating a ContentFlow addon (using the LightBox addon as an example) without any luck - nothing is displayed, not even simple images:
onclickActiveItem: function (item) {
var content = item.content;
if (content.getAttribute('src')) {
if (item.content.getAttribute('href')) {
item.element.href = item.content.getAttribute('href');
}
else if (! item.element.getAttribute('href')) {
item.element.href = content.getAttribute('src');
}
if (item.caption)
item.element.setAttribute ('title', item.caption.innerHTML);
colorbox.show(item.element);
}
}
Edited on 01/Oct/2013
The problem only manifests itself when an item contains an href. To prove this I changed the code above to show a static web page:
$.colorbox({open:true, href:"http://mysite.gr/colorbox/content/static.html"});
It the item is just a simple image the static web page is displayed in ColorBox. But if the item contains an href to the web page I want displayed in ColorBox the browser follows the link and loads the specified page. Any ideas on how to stop this from happening?
Thank you in advance for your help!
I have finally solved the problem I have described in my question. The solution involves creating a ContentFlow addon as follows:
new ContentFlowAddOn ('colorbox', {
init: function () {
var colorboxBaseDir = this.scriptpath+"../colorbox/";
var colorboxCSSBaseDir = colorboxBaseDir;
var colorboxImageBaseDir = colorboxBaseDir;
this.addScript(colorboxBaseDir+"jquery.colorbox.js");
this.addStylesheet(colorboxCSSBaseDir+"example3/colorbox.css");
},
ContentFlowConf: {
onclickInactiveItem: function (item) {
this.conf.onclickActiveItem(item);
},
onclickActiveItem: function (item) {
var content = item.content; // ContentFlow's content class
var theItem = item.item; // ContentFlow's item class - if you need access to it
var hrefToDisplay = '';
if (content.getAttribute('src')) {
if (content.getAttribute('href')) {
hrefToDisplay = item.content.getAttribute('href');
}
else if (!item.element.getAttribute('href')) {
hrefToDisplay = content.getAttribute('src');
}
$.colorbox({iframe:true, href:hrefToDisplay, title:item.caption});
}
}
}
});
The secret is to open the HTML page in an iframe.
Hope this helps!