I've got a {N} page and conditionally I'd like to create a floating bubble text label pointing to certain features on the page. e.g. "Press START button to blah".
Any help on how this could be done.
Preferably w/o modifying the xml page files.
I released a plugin that can do what you are requesting simply install it tns plugin add nativescript-tooltip then you can use it as follows
TypeScript
import * as frame from "ui/frame";
import {ToolTip} from "nativescript-tooltip";
new ToolTip(frame.topmost().getViewById("someView"),{text:"Some Text"});
JavaScript
const frame = require("ui/frame");
const ToolTip = require("nativescript-tooltip").ToolTip;
new ToolTip(frame.topmost().getViewById("someView"),{text:"Some Text"});
Plugin Repo
Related
I am learning to build a add to cart functionality using redux-toolkit. I clone this project online so I can follow step by step. I ran into trouble when I want to use the selector to select my state it says not defined.
Here is my codesandbox code please help. https://codesandbox.io/s/vigorous-wind-n8mi3v?file=/src/centralStore.js/store.js
I need to say one more time that my main issue is
state not been defined when I use the selector hook. It renders my forEach useless.
Please help.
In your App.js, you should modify to this
const cart = useSelector(( state)=> state.reducer.cart)
(Originally, your code was
const cart = useSelector(( state)=> state.cart)
because in your store.js, you use one more layer of "reducer"
I am using the Python library Altair to plot and let the user save as SVG file. To import data and interactive configuration I wanted to use the Panel library. They integrate well but the button to save is missing when I put the Altair plot inside a Panel element. Other interactivity works fine.
This seems to be a general problem as I can find no images of Altair plots inside a Panel element having the save button. However, I cannot find anybody addressing this specific issue, so the question is there any way to resurrect the button so the user can save?
(I know about altair_saver for programmatically saving, but unfortunately we cannot allow the dependencies on our system)
Here is a simple example of Altair with and without Panel.
And here is the code:
import pandas as pd
import altair as alt
alt.__version__
import panel as pn
pn.extension('vega')
pn.__version__
dictdata = {'variable': ['A', 'B', 'C', 'D'], 'value': [1, 3, 2, 4] }
df = pd.DataFrame.from_dict(dictdata)
chart = alt.Chart(df).mark_bar().encode(
y = alt.Y('variable:N'),
x = alt.X('value:Q'),
)
chart
pn.Row(chart)
This "save button" is known as the actions menu, and is configurable in vega-embed with the actions option.
Panel's vega chart embedding explicitly removes the actions by setting {actions: false}, as seen here: panel/models/vega.ts#L71.
Unfortunately, it does not appear that the package offers any way to configure this. You might try submitting a feature request to the Panel library.
We currently have code that handles all our image uploads via Dropzone.js. This includes functionality to paste from the clipboard and upload via dropzone.js, which currently works. This is that event code:
document.onpaste = function(event)
{
alert('pasted');
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
// adds the file to your dropzone instance
myDropzone.addFile(item.getAsFile());
}
}
}
Following this, we have added a CKEditor (v4.10) html text editor to that page. The CKEditor has its own clipboard handling built in. If you activate the CKEditor (for example by clicking the text area), the CKEditor effectively takes control of the clipboard from that point. Which is correct, because we want the editor to be able to copy and paste text still.
However, CKEditor does not natively have image uploading built into it. It requires a plugin. But we would prefer not to use this plugin, and rather intercept the paste event, and if the data pasted is an image, pass that along to our dropzone.js handler instead.
While I am able to intercept that event, I am not sure what event data (if any) I can extract from the CKEditor paste event to pass along to the Dropzone handler. Here is the code so far:
var editor = CKEDITOR.instances.NoteText;
editor.on( 'paste', function( event )
{
alert('pasted ck');
console.dir(event);
//myDropzone.addFile(item.getAsFile());
} );
I have tried inspecting the event to see if anything is available for me to use, but don't seem to find anything.
Is what I'm trying to accomplish possible? Is it possible for me to somehow find and pass along the pasted event data from CKEditor to DropZone? Or am I going to have to implement the CKEditor image upload plugin?
Thanks.
Currently, I am Working on image editor that allows me to crop an image and apply a filter.
I am using fabric js version 1.7.22.
I want to implement crop functionality.
so my cropping flow is like Below :
crop image using a plugin and ger base64 of the cropped image.
generate blobUrl from base64 which help to display image in fabric js canvas.
After Cropping the image, I Just replace old image src with new One.
It works fine when an image has no filter.
but when I try to set a filter in the image first then try to replace src using setSrc() function.
It throws an error like Below
filter.applyTo is not a function
I have created one fiddle for demonstrating to replace src after the apply filter.
https://jsfiddle.net/Mark_1998/98gLhcb4/1/
And I Can't upgrade my fabric js version. If any patch Available then
Please Help Me.
The problem lies in this piece of code:
canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
canvas.renderAll();
}, canvas.getActiveObject().toObject());
You're passing canvas.getActiveObject().toObject() as an options object, which is assigned to your image in setSrc() -> setElement() -> _initConfig().
toObject() serializes your fabric.Image, and filters array no longer contains the actual fabric.Filter, but rather a serialized version of it. So, it does not have a prototype with applyTo() method on it, hence the error filter.applyTo is not a function when fabric tries to reapply filters to your image after setSrc().
Instead of passing the whole serialized object as options, you'll need to pick the properties you actually want to be passed. As I'm not sure about what your requirements are, I tried replacing the above code with the following and it worked for me:
var options = canvas.getActiveObject().toObject();
delete options.filters;
options.crossOrigin = true;
canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
canvas.renderAll();
}, options);
Note the options.crossOrigin = true - you won't be able to apply filters without it.
I have a plugin which need to show a (Modal) dialog each time the user double click on a word.
Detecting double click is no problem, but the exact fields/values in the dialog depends on exactly which word the user clicked on, and some mutable global state. So I can't create the dialog until the moment before I need to show it. And here is the problem: How do I do that?
Right now I use this code:
var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
// Creating dialog here.
});
CKEDITOR.instances.editor.openDialog(dialogName);
This works, but having to add a uniquely named dialog, just to show it once and then newer use it again seems really really wrong. Also I fear this will keep using resources since the dialogs are newer removed(I could not find any remove method).
So my question is: Is there a better way to dynamical create and show a "one use" dialog?
Update:
If bootstrap is not allowed then maybe an addFrame version of the dialog is acceptable. This could then refer to a html file that can load from parameters.
NB: The plunkr only works, if you fork and edit it, otherwise it will give you a 404 for the template.
Here is a quick plunkr:
plunky
And here is the plugin in question:
CKEDITOR.plugins.add( 'insertVariable', {
requires: ['iframedialog'],
icons: 'insertvariable',
init: function( editor ) {
editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );
CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);
editor.ui.addButton( 'insertVariable', {
label: 'Insert Variable',
command: 'varDialog',
icon: this.path + '<insert gif>'
});
}
});
Obviously you are not creating dialogs anymore with different content, but you are referring to another piece of html, that can change. I've kept the bootstrap thing in there as well for reference.
I made one final edit, that will show the current contents. So I think that is roughly what you want. Check it out.
Previous Answer
If you are prepared to use bootstrap, then you can do no worse than check out their modal dialog, which can be just be shown and hidden at will.
http://getbootstrap.com/javascript/#modals
It's simple and cuts down any need to keep creating your own dialog. The dialog won't be one use type, but you will set the defaults as necessary. The varying content link is here:
http://getbootstrap.com/javascript/#modals-related-target
That would be the quickest way to get this going. It all depends on whether you want to use this framework. As CKEDITOR is already using JQuery it is an option worth considering.