Is it possible to access current paste event object in 'pastePreProcess' tinymce callback? - tinymce

I need to access the paste event object in pastePreProcess callback to get the clipboard content (rtf content in clipboard)
paste_preprocess: function (plugin, arguments_) {
const clipboardContent = getClipboardContent(editor, event);
const rtfContent = clipboardContent['text/rtf'];
}
Is it possible to get the current paste event in this callback?

Related

Can't save report to different workspace - saveAsTriggered not firing in powerbi embedded

I am trying to create a new report in power bi embedded and save the report to a workspace that is DIFFERENT from the dataset its using I am setting up the embed token correctly - using the V2 token requests for both the dataset and workspaces but click the SaveAs in the embedded UI returns an "unable to save report" failure.
I believe what's missing is that I need to set the targetWorkspace in the SaveAs parameter. To do that I need to watch the saveAsTriggered event and in there specify the targetWorkspaceId.
However the saveAsTriggered event is never firing! Even in power bi playground the event does not seem to be firing - see code example below.
I am assuming that the saveAsTriggered event should fire even when using the embedded "Save As" button and not only if I call saveAs via the API?
In any case the event is never firing and I have no way to set the target workspace for the report to save As.
If anyone can advise another way to specify the target workspace when setting up a custom saveAs OR a way to get the saveAsTriggered event to fire, it would be very much appreciated.
Thanks
I used the code below in power bi playground: https://playground.powerbi.com/en-us/dev-sandbox
// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
/*-----------------------------------------------------------------------------------+
| Don't change these values here: access token, embed URL and report ID. |
| To make changes to these values: |
| 1. Save any other code changes to a text editor, as these will be lost. |
| 2. Select 'Start over' from the ribbon. |
| 3. Select a report or use an embed token. |
+-----------------------------------------------------------------------------------*/
// Read embed application token
let accessToken = EMBED_ACCESS_TOKEN;
// Read embed URL
let embedUrl = EMBED_URL;
// Read report Id
let embedReportId = REPORT_ID;
// Read embed type from radio
let tokenType = TOKEN_TYPE;
// We give All permissions to demonstrate switching between View and Edit mode and saving report.
let permissions = models.Permissions.All;
// Create the embed configuration object for the report
// For more information see https://go.microsoft.com/fwlink/?linkid=2153590
let config = {
type: 'report',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: permissions,
settings: {
panes: {
filters: {
visible: true
},
pageNavigation: {
visible: true
}
}
}
};
// Get a reference to the embedded report HTML element
let embedContainer = $('#embedContainer')[0];
// Embed the report and display it within the div container.
report = powerbi.embed(embedContainer, config);
// report.off removes all event handlers for a specific event
report.off("loaded");
// report.on will add an event handler
report.on("loaded", function () {
loadedResolve();
report.off("loaded");
});
// report.off removes all event handlers for a specific event
report.off("error");
report.on("error", function (event) {
console.log(event.detail);
});
// report.off removes all event handlers for a specific event
report.off("rendered");
// report.on will add an event handler
report.on("rendered", function () {
renderedResolve();
report.off("rendered");
});
}
embedPowerBIReport();
await reportLoaded;
// Insert here the code you want to run after the report is loaded
await reportRendered;
// Switch to edit mode.
report.switchMode("edit");
// Insert here the code you want to run after the report is rendered
// report.off removes all event handlers for a specific event
report.off("saveAsTriggered");
// report.on will add an event listener.
report.on("saveAsTriggered", function (event) {
console.log(event);
});
// Select Run and then select SaveAs.
// You should see an entry in the Log window.
console.log("Select SaveAs to see events in Log window.");
Figured it out. I needed to modify the embed config to include
settings: {
useCustomSaveAsDialog: true
}
Then you do need to use your own Save As Modal but then at least the saveAsTriggered will fire!

Leaflet - How to add click event to button inside marker pop up in ionic app?

I am trying to add a click listener to a button in a leaftlet popup in my ionic app.
Here I am creating the map & displaying markers, also the method I want called when the header tag is clicked is also below:
makeCapitalMarkers(map: L.map): void {
let eventHandlerAssigned = false;
this.http.get(this.capitals).subscribe((res: any) => {
for (const c of res.features) {
const lat = c.geometry.coordinates[0];
const lon = c.geometry.coordinates[1];
let marker = L.marker([lon, lat]).bindPopup(`
<h4 class="link">Click me!</h4>
`);
marker.addTo(map);
}
});
map.on('popupopen', function () {
console.log('Popup Open')
if (!eventHandlerAssigned && document.querySelector('.link')) {
console.log('Inside if')
const link = document.querySelector('.link')
link.addEventListener('click', this.buttonClicked())
eventHandlerAssigned = true
}
})
}
buttonClicked(event) {
console.log('EXECUTED');
}
When I click this header, Popup Open & Inside if are printed in the console, so I know I'm getting inside the If statement, but for some reason the buttonClicked() function isn't being executed.
Can someone please tell me why this is the current behaviour?
I just ran into this issue like 2 hours ago. I'm not familiar with ionic, but hopefully this will help.
Create a variable that keeps track of whether or not the content of your popup has an event handler attached to it already. Then you can add an event listener to the map to listen for a popup to open with map.on('popupopen', function(){}). When that happens, the DOM content in the popup is rendered and available to grab with a querySelector or getElementById. So you can target that, and add an event listener to it. You'll have to also create an event for map.on('popupclose', () => {}), and inside that, remove the event listener from the dom node that you had attached it to.
You'd need to do this for every unique popup you create whose content you want to add an event listener to. But perhaps you can build a function that will do that for you. Here's an example:
const someMarker = L.marker(map.getCenter()).bindPopup(`
<h4 class="norwayLink">To Norway!</h4>
`)
someMarker.addTo(map)
function flyToNorway(){
map.flyTo([
47.57652571374621,
-27.333984375
],3,{animate: true, duration: 5})
someMarker.closePopup()
}
let eventHandlerAssigned = false
map.on('popupopen', function(){
if (!eventHandlerAssigned && document.querySelector('.norwayLink')){
const link = document.querySelector('.norwayLink')
link.addEventListener('click', flyToNorway)
eventHandlerAssigned = true
}
})
map.on('popupclose', function(){
document.querySelector('.norwayLink').removeEventListener('click', flyToNorway)
eventHandlerAssigned = false
})
This is how I targeted the popup content and added a link to it in the demo for my plugin.
So yes you can't do (click) event binding by just adding static HTML. One way to achieve what you want can be by adding listeners after this new dom element is added, see pseudo-code below:
makeCapitalMarkers(map: L.map): void {
marker.bindPopup(this.popUpService.makeCapitalPopup(c));
marker.addTo(map);
addListener();
}
makeCapitalPopup(data: any): string {
return `` +
`<div>Name: John</div>` +
`<div>Address: 5 ....</div>` +
`<br/><button id="myButton" type="button" class="btn btn-primary" >Click me!</button>`
}
addListener() {
document.getElementById('myButton').addEventListener('click', onClickMethod
}
Ideally with Angular, we should not directly be working with DOM, so if this approach above works you can refactor adding event listener via Renderer.
Also I am not familiar with Leaflet library - but for the above approach to work you need to account for any async methods (if any), so that you were calling getElementById only after such DOM element was successfully added to the DOM.

Mapbox GL Popup .setDOMContent example

I'm trying to create a customized button to appear on a pop up which generates a dynamic link (a URL). I don't seem to be able to do this via the .setHTML because of the timing, can't bind a button to a function at runtime. So I thought I'd try the newish .setDOMContent
There's zero information online as to how this feature works. I'm wondering if anyone has an example of this where a button is added to the popup that can run a function and send data.
Here's my very poor attempt at setting this up.
This function creates the popup
function GameObjectPopup(myObject) {
var features = map.queryRenderedFeatures(myObject.point, {
layers: ['seed']
});
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(ClickedGameObject(feature))
.setDOMContent(ClickedGameObject2(feature))
.addTo(map);
};
This function adds the html via the .setHTML
function ClickedGameObject(feature){
console.log("clicked on button");
var html = '';
html += "<div id='mapboxgl-popup'>";
html += "<h2>" + feature.properties.title + "</h2>";
html += "<p>" + feature.properties.description + "</p>";
html += "<button class='content' id='btn-collectobj' value='Collect'>";
html += "</div>";
return html;
}
This function wants to add the DOM content via the .setDOMContent
function ClickedGameObject2(feature){
document.getElementById('btn-collectobj').addEventListener('click', function()
{
console.log("clicked a button");
AddGameObjectToInventory(feature.geometry.coordinates);
});
}
I'm trying to pipe the variable from features.geometry.coordinates into the function AddGameObjectToInventory()
the error I'm getting when clicking on an object (so as popup is being generated)
Uncaught TypeError: Cannot read property 'addEventListener' of null
Popup#setHTML takes a string that represents some HTML content:
var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);
while Popup#setDOMContent takes actual HTML nodes. i.e:
var h1 = document.createElement('h1');
h1.innerHTML="Hello, World";
popup.setDOMContent(h1);
both of those code snippets would result in identical Popup HTML contents. You wouldn't want to use both methods on a single popup because they are two different ways to do the same thing.
The problem in the code you shared is that you're trying to use the setDOMContent to add an event listener to your button, but you don't need to access the Popup object to add the event listener once the popup DOM content has been added to the map. Here is a working version of what I think you're trying to do: https://jsfiddle.net/h4j554sk/

Jquery in Custom HTML Helper Extensions to pick value from the form

I have used this custom Helper in My Razor View.
#Html.Link("OpenewWindow", Constants.Value, new { k = Constants.k, Staff_ID = LoginHelper.GetLoggedInUser() }, new { id = "mytag", target="_blank" })
When I Click on this link it opens me a new window with the Querystrings ConstantValue/Constants?=someValue&Staff_ID=UserLoggedName.
I want to pick the radio button selected value on the form and pass the checked value in QueryString.
So where can I use Jquery function in my custom Helper method to pick the value from the form.
The Custom Helper method takes this kind of aurguments.
public static IHtmlString Link(this HtmlHelper htmlHelper, string linkText, string baseUrl, object query, object htmlAttributes).
You could use javascript to do that. For example you could subscribe to the click event of the link and then open a popup window by appending the new query string parameter:
$(function() {
$('#id_of_link').click(function() {
var url = this.href;
if (url.indexOf('?') > -1) {
url += '&';
} else {
url += '?';
}
// get the value of the radio button
var value = $(':radio[name="name_of_your_radio_groups"]:checked').val();
url += url + 'radiovalue=' + encodeURIComponent(value);
window.open(url, 'newwindow');
// cancel the default action
return false;
});
});
If you don't need to use javascript then a cleaner approach is to use a form instead of a link. This way the value of the selected radio button will automatically be sent.

gwt file upload code

I want to upload file in my application and want to set path where the files should be saved after uploading in my local system.I am using the following code but on the submit button getting no response while clicking.Please tell me the code which works fine for the file upload in gwt.
[code]
public class FormPanelExample implements EntryPoint {
public void onModuleLoad() {
// Create a FormPanel and point it at a service.
final FormPanel form = new FormPanel();
form.setAction("/myFormHandler");
// Because we're going to add a FileUpload widget, we'll need to set the
// form to use the POST method, and multipart MIME encoding.
form.setEncoding(FormPanel.ENCODING_MULTIPART);
form.setMethod(FormPanel.METHOD_POST);
// Create a panel to hold all of the form widgets.
VerticalPanel panel = new VerticalPanel();
form.setWidget(panel);
// Create a TextBox, giving it a name so that it will be submitted.
final TextBox tb = new TextBox();
tb.setName("textBoxFormElement");
panel.add(tb);
// Create a ListBox, giving it a name and some values to be associated with
// its options.
ListBox lb = new ListBox();
lb.setName("listBoxFormElement");
lb.addItem("foo", "fooValue");
lb.addItem("bar", "barValue");
lb.addItem("baz", "bazValue");
panel.add(lb);
// Create a FileUpload widget.
FileUpload upload = new FileUpload();
upload.setName("uploadFormElement");
panel.add(upload);
// Add a 'submit' button.
panel.add(new Button("Submit", new ClickListener() {
public void onClick(Widget sender) {
form.submit();
}
}));
// Add an event handler to the form.
form.addFormHandler(new FormHandler() {
public void onSubmit(FormSubmitEvent event) {
// This event is fired just before the form is submitted. We can take
// this opportunity to perform validation.
if (tb.getText().length() == 0) {
Window.alert("The text box must not be empty");
event.setCancelled(true);
}
}
public void onSubmitComplete(FormSubmitCompleteEvent event) {
// When the form submission is successfully completed, this event is
// fired. Assuming the service returned a response of type text/html,
// we can get the result text here (see the FormPanel documentation for
// further explanation).
Window.alert(event.getResults());
}
});
RootPanel.get().add(form);
}
}
Thanks
Amandeep
Now, I remember.. There's a bug in the FormPanel code that causes form.submit() not to work, when the type of the form is changed from the default (don't know if it's fixed yet in any release of GWT). If you create a "native" submit button like this:
HTML nativeSubmitButton new HTML("<input class='gwt-Button' type='submit' value='" + buttonText + "' />")
It will submit the form.
The disadvantage is that you cannot use any Button methods on this object, since it's a simple HTML wrapper. So disabling the button on submit (to avoid accidental double submit, and to give feedback that the form is actually submitting) won't work .
I've created a utility class for this purpose myself called DisableableSubmitButton that is essentially a FlowPanel with one HTML button like the above, and one gwt Button that is disabled, and some logic to toggle each of them visible. Since it cannot modify the actual enabled status of the HTML button all submit handlers must ask this class if it's "enabled" or not and cancel the event if it is. If you're interested in this implementation, i could share it with you (I don't want to flood stackoverflow with code unless you are interested).