We Keep Coding

Is it possible to return content from a custom window in TinyMCE 4?

Like many others, due to the limitations of TinyMCE's Image Plugin, I've decided to take the route of creating one that ties into my site's own uploading system.
I've gotten this partially working and pulling up a individual page, designed just for the purpose. However, now I want to return content from selecting images on this page. Is that possible or am I hitting a dead end?
tinymce.PluginManager.add('imageLoader', function(editor, url) {
// Adds a menu item to the tools menu
editor.addButton('imageLoader', {
icon: 'mce-ico mce-i-link',
image: 'Photos.png',
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Image Loader',
url: 'load_images',
width: 500,
height: 400,
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Image To Insert');
}
});
}
});
return {
getMetadata: function () {
return {
name: "Image Loader"
};
}
};
});

We made this a lot easier in TinyMCE 5 with a new URL dialog api:
https://www.tiny.cloud/docs/ui-components/urldialog/
In version 4, I believe the usual technique was to (inside the iframe) access the TinyMCE instance that opened the dialog via window.parent.tinymce.activeEditor, and then replicate the onsubmit function there. With the editor instance you can insert whatever content you need to and then editor.windowManager.close() will close the topmost window (i.e. the url dialog).
For more advanced use cases, editor.windowManager.getParams() can be used to pass information between the plugin and dialog, although perhaps not from the dialog to the plugin. editor.plugins is another possible technique, it's a name/value object of active plugin instances (it's a live reference to the return value from the PluginManager.add init function which can be mutated at runtime).
These are all fairly complicated, but likely more reliable than searching for the dialog iframe from your plugin.

I found an answer, although this is likely not the most elegant solution.
The image that I'm selecting is passed into a hidden text input in my custom page. From there, on Submit or Closing the TinyMCE 4 Frame, I use this snippet:
let getVal = $('[role="application"]').find('iframe')[1].contentWindow.document.getElementById("imgHolder").value;
In order:
It first finds the iFrame. Since both external pages and the editor itself use iFrames, this will generally be the 'second' iFrame - unfortunately, it isn't given an ID.
"contentWindow.document.getElementByID" fetches the hidden input, in my case named "imgHolder"
From here, you can get your content as normal with .value, and insert it into the TinyMCE Editor.
I hope this helps point others in the right direction, especially knowing that it gets asked a lot for TinyMCE 4. Further I hope this can be made a bit more elegent as well.

Unable to append HTML to an element in JavaScript or jQuery from inside a function

I am trying to use Barba to implement smooth page transitions. Here is my code to append some HTML when a new page is added.
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
console.log("I am In.");
$("#quick-share").append("Share Now!");
});
The appending works from the developer tools console but from inside this function it doesn't. However, the console.log() statement works properly without any issue. I have also tried a pure JavaScript way but it doesn't work inside the Barba function either.
document.getElementById("quick-share").innerHTML = "Share Now!";
Is there something that I am missing?
Thanks.

In fact with Barba.js when you make a transition, the new content will override the old one, that's what we can see in their How it works section:
5- As soon the new page is loaded, barba.js parses the new HTML (taking .barba-container) and puts the new content on the DOM inside #barba-wrapper.
6- The transition instance will take care of hiding the old container and
showing the new one.
7- As soon the transition is finished, the old container is removed from
the DOM.
So your problem is that when calling $("#quick-share"), in the 'newPageReady' event, the old content was removed so it won't return any element with that id, that's why you can't see the text appended.
What you can do is to recreate this element in the new container, in the transitionCompleted event handler.

leafletjs adding scrollable pop up?

Using leafletjs with popups. When I have popups with minimal text all works fine. If I make them bigger they still work fine. If I add too much I add
maxHeight
to the pop up and it makes the pop up scrollable.
If I start with out enough content to fill the page and make it scrollable, it is not made scrollable. That is Ok till I dynamically add more content to the popup and then I need the scroll bar but it will not show up.
Any thoughts on how to get leafletjs to add the scroll bar to a popup once the popup has already been rendered?
EDIT: The popup options are initialized with the markers in a loop that loads different arrays of data depending on what a person wants to see. The initialization is as follows.
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
marker.bindPopup('<img width="'+width+'" height="'+height+'" src="'+a[3]+'"/><br><div id="weather"> <button type="button" onclick="weatherload(\''+a[0]+'\',\''+a[1]+'\')">Click Me for Weather!</button></div>',{'maxWidth':'500','maxHeight':'350','minWidth':'350'});
CAMlayer.addLayer(marker);
The popup has an image that takes up most of the space. At the bottom there is a div with a button. When the button is clicked it is replaced with a loader gif while an ajax function gets some data that it puts in the popup by way of innerhtml.
document.getElementById("weather").innerHTML = xhttp.responseText;
I set the maxheigth to 350px, once the extra data is added it grows to 520px with no scroll bar.
EDIT: Removed test page.

How do you initialize your popup options and how to you add more content to it?
Once the maxHeight option is set, the scroll bar should appear as soon as the content is too big, and disappear as soon as it gets small enough.
Demo: http://jsfiddle.net/ve2huzxw/92/
EDIT:
Following the extra details and code about how you add content to the popup element:
The height CSS attribute (which makes the scroll bar appear if necessary) is dynamically added by Leaflet when it detects that the content is too big.
However, this detection occurs only if you use the setContent popup method. It is not triggered if you change the content through external function (like your AJAX callback in weatherload function that "manually" changes a part of the popup content innerHTML).
The easiest workaround is simply to call myPopup._updateLayout() internal Leaflet method on your popup, just after you have added content. This will "manually" force Leaflet to check the popup content height, and add the height CSS attribute if necessary.
Updated demo: http://jsfiddle.net/ve2huzxw/93/
A "proper" solution would be to avoid adding content through innerHTML. Instead, you should use setContent popup method to update your content (you would copy your initial image, and add your new content). This would also avoid using a div with an ID that is the same for all your popups (which relies on the fact that only 1 popup would be open on the map at any one time, but would break if this assumption is no longer true).

If your popup is smarter(is doing 'hard work') I recommend to compile a new directive on the fly.
var newScope = $scope.$new();
var myPopupContent = $compile('<div style="width:200px" gr-my-popup ></div>')(newScope);
L.popup()
.setLatLng(e.latlng)
.setContent(myPopupContent[0])
.openOn(map);
Where grMyPopup will be your directive.

Completely delete all instances of a div with a specific class using javascript/jquery?

I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?

Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.

Setting viewScope onLoad and onResize

I have used the '#media only screen' in my CSS to determine how and what information should be shown depending on the users screen size. I have a class called panelContainer which is set to display when the screen is greater than 767px, and a class called mobileContainer which displays when the screen is less than that.
I have a couple of custom controls, one that contains the standard form layout and another that contains the mobile device form layout. Originally I placed a div around each with the appropriate styleClass. The problem with it this way was that although only one form is visible, they were both loaded so this caused save issues.
<xp:div id="panelContainer" styleClass="panelContainer">
<xc:content_sCompany></xc:content_sCompany>
</xp:div>
<xp:div id="mobileContainer" styleClass="mobileContainer">
<xc:content_iCompany></xc:content_iCompany>
</xp:div>
I have since added a div to my Xpage with the styleClass of panelContainer, I then added onLoad and onResize events which return the style.display of the div, these should then write the result to a viewScope. But I found it would only write onLoad and although the function was being called onResize it wouldn't change the viewScope variable.
<xp:scriptBlock id="scriptBlock1" type="text/javascript">
<xp:this.value>
<![CDATA[var init = function() {
obj=document.getElementById('formType');
if(getStyleDisplay(obj)=="none"){
formType='#{javascript:viewScope.put("formFormat","mobile");}';
}else{
formType='#{javascript:viewScope.put("formFormat","standard")}';
}
}
dojo.addOnLoad(init);
dojo.connect(window,"onresize",init);
function getStyleDisplay(obj) {
if(obj.currentStyle) { // IE – Opera
return obj.currentStyle.display;
} else { // firefox
return getComputedStyle(obj,'').getPropertyValue('display');
}
}]]>
</xp:this.value>
</xp:scriptBlock>
<div id="formType" class="panelContainer"></div>
.....this viewScope variable is then used in the following way:
<xc:content_Company xp:key="ContentControl">
<xp:this.facets>
<xc:content_sCompany id="content_sCompany"
xp:key="standard">
</xc:content_sCompany>
<xc:content_iCompany id="content_iCompany"
xp:key="mobile">
</xc:content_iCompany>
</xp:this.facets>
</xc:content_Company>
.....extract from content_Company......
<xp:callback facetName="#{viewScope.formFormat}" id="cbkCompanyFormContent">
</xp:callback>
I feel this is the better way to achieve the result I need, as when I have tried it manually it does only load one of the forms and they work as expected.
I cannot see why the viewScope is not being set properly, it is always being set to 'standard', even if I shrink my page before loading the page. I did try writing the value to a Hidden Input, which worked but whenever I tried to access the value using getComponent("hiddenInput1").getValue() it would return null, even though I could see that value had been set when viewing in firebug.

Ok can you check (or tell me if you already have) through some console.log("") 's that the onResize is being called and the correct display is being pulled down etc.
next it may be firing the onResize but are you then partail refreshing the area which is using the viewScope?
Code example of this: (replace controlID with yours)
XSP.partialRefreshGet("controlID", {
onError: function() { console.log('Error'); }
});
I'm a little confused about what the purpose of using onResize is for ? if is to decide what to show whether on mobile or normal screen there are much more efficient ways of doing this.
Using the new redirect control in the latest release of the ExtLib on openNTF. It does exactly what the name suggests and redirects based on certain expressions. leaving you to drop it on a page and say if mobile (or whatever) redirect to this page.
Having a dummy default load page that checks the useragent string to see which page to load (having a separate mobile / fullscreen pages). This is what the teamroom template application that comes with the ExtLib does with its main.xsp and then this is set as the default launch option.
Or if you are trying to do something with whether the phone / tablet is on landscape or portrait you should be using the onOrientationChange event not onResize. check out this example (not the code in the question is what I'm pointing you too, he has a problem getting that to work in a webview):
how to handle javascript onorientationchange event inside uiwebview