Settting Focus for Rich Text control - xpages

I can set focus for pretty much any type of control with:
var f = dojo.byId('#{id:NotInvitedMsg}');
if (f != null)
f.focus()
But this does not work on rich text controls at least the way I want. I assume it is setting focus but since the rich text control is made up of multiple components, the edit area is not getting the focus. Is there anyway to set the focus to the edit area?

OpenNTF finally responded for me and I found this:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=focus-on-ckeditor-rich-text-field
Works great!
It would have been nice if the poster put a little more effort into documentation.

try
try {
var el = dojo.query('div[id*="yourid"]');
var node = el[el.length-1];
setTimeout(function() { node.focus(); }, 500);
//node.focus();
} catch (e) { }

Related

How to jBox from JS?

(This is embarrassing, I should not be asking this...but I just don't see the problem...)
As part of a JS-Fn, I would like to give the user immediate feedback by opening a jBox-Tooltip that is attached to the control user is dealing with. But the control tip does not open - what am I doing wrong? I have simpified stepwise by removing params and finally even this does not do.
var x=new jBox('Tooltip',{content:"Press Escape again to clear the input-field!"});
x.open();
I started with
var x = new jBox('Tooltip',{
content:"Press Escape again to clear the input-field!",
attach: "#ipExpr",
onInit: function() { this.open(); }
});
NB: I've chedcked that $("#ipExpr").length==1
It seems that attaching the jBox to an element and opening it when its being initialised seems to be the problem. Can you describe what kind of behavior your looking for in detail? For example, if you like to open the jBox right away on the element with id #idExpr, you could do it like this: jsfiddle.net/pbrrah37
var x = new jBox('Tooltip',{
content:"Press Escape again to clear the input-field!",
onInit: function() { this.open({target: $('#ipExpr')}); }
});

Leaflet Control Search: open Popup for search result

I'm using the wonderful plugin Leaflet.Control.Search in order to search for markers (from a geoJson marker group) on my map – which works great.
I only have one simple question now:
how can I open a popup for the search result marker?
I'm using custom marker icons with popups (which open on click) already bound to them – but I would like to open the respective popup automatically once it has been found via the search.
My code looks like this:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.bindPopup(feature.properties.Name).openPopup();
}).on('search_collapsed', function(e) {
markers2.resetStyle(layer);
});
map.addControl( searchControl ); //inizialize search control
and thought it might work with that line:
e.layer.bindPopup(feature.properties.Name).openPopup();
but unfortunately it doesn't.. ;)
–
Oh, and a second question: at the moment I'm searching only in 1 geoJson layer ("markers2") – does anyone know whether it's possible to search in multiple layers at once?
Any suggestions? I'd be grateful for any help, thanks in advance!
got it: it works like this: e.layer.openPopup().openOn(map);
event.layer is set only for preloaded layer, if you search marker by ajax,jsonp or callData.. event.layer is undefined.
var geojsonLayer = new L.GeoJSON(data, {
onEachFeature: function(feature, marker) {
marker.bindPopup(feature.properties.name);
}
});
map.addLayer(geojsonLayer);
var controlSearch = new L.Control.Search({layer: geojsonLayer, initial: false});
controlSearch.on('search_locationfound', function(event) {
event.layer.openPopup();
});
Look at GeoJSON demo:
https://opengeo.tech/maps/leaflet-search/examples/geojson-layer.html
Recently, I was looking for an answer, and here is my solution for it
searchControl.on("search:locationfound", function (e) {
if (e.layer._popup) e.layer.openPopup();
});

Highlighting or Bolding the Borders of a kml Polygon

Hey after loading a kml file to google earth I was trying to have when a user clicks a certain polygon from the kml, to have that polygon highlighted.
So far I can record the click event, get the event type (KmlPlacemark) and grab its kml markup.
I tried doing something similar to this example where they add a placemark to the getFeatures of the kmlObject but both target and type don't seem to have 'getFeatures'. After looking around the documentation I think I might either want setOutline from Kml Polystyle class or setWidth() from KmlLineStyle class but am not sure. Also when I try something like target.setOutline(true); it doesn't work.
Can anyone tell me if I'm on the right track, hints to what I'm doing wrong, and if there's a better way to do this?
function recordEvent(event) {
var target = event.getTarget();
var type = target.getType();
if(type == "KmlPolygon") {
alert("KMLPolygon ");
}else if(type == "KmlPlacemark") {
// // get the data you want from the target.
var description = target.getDescription();
var balloon = target.getBalloonHtml();
var outputKml = target.getKml();
if ('getFeatures' in event) {
console.log("test");
event.getFeatures().appendChild(placemark);
}
console.log("hello?")
// target.setOutline(true);
console.log(outputKml);
}
};
google.earth.addEventListener(ge.getGlobe(), 'click', recordEvent);
Thanks!
I find the best way to do what you are asking is to:
Detect click events like you currently do
If clicked, create a new Style, then assign it to the target
var newStyle = ge.createStyle('');
// Assign your Style's attributes such as LabelStyle and IconStyle
// eg to set the scale of your label
newStyle.getLabelStyle().setScale(2.5);
// Set the Style
target.setStyleSelector(newStyle);
Edit to add in this link of a Google example showing it more in depth
https://code.google.com/apis/ajax/playground/#styling_placemarks_using_style_maps

How to Inject strings into tinyMCE from a Chrome Extension?

My background_script.js sends a message such as this:
function genericOnClick(info, tab) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, {message: 'insert_string'}, function(){} );
});
};
The receiver.js catches this as:
function insert_string() {
var field = document.activeElement;
if(field.tagName == "IFRAME") {
field = field.contentDocument.activeElement;
}
field.value += 'This is my string';
}
Now, the extension works perfectly well on regular editable fields and textareas (it even works properly in tinyMCE on the textarea-tab!) but in the case of Visual-tab of tinyMCE I can't get this to work. I have noticed that the Visual-tab, as it's a WYSIWYG editor, is special and the only way I so far have figured out on how to solve this issue would be to mimic tinyMCE's behaviour for updating the Visual-tab. However, I would like to know if there's something simple and obvious I've missed. If not, how would I go about editing the Visual-tab contents?
All you need to issue to fill the editor is
tinymce.get('your_editor_id').setContent('This is my string');

Can we get MathML output from MathJax

I was wondering if there are ways to convert MathJax output to MathML.
I read through several articles that saying MathJax supports MathML. I can also see the option 'Show MathML' when I right click the MathJax formulas. My question is, can I get the MathML output to the webpage from MathJax? I am not familiar with MathJax and I am not sure how it works. Any resources or tutorial pages would have been nice!
#Peter, I think the OP may be asking how to get a MathML string from MathJax, rather than how to insert the MathML tags into the page directly. So perhaps the discussion on the MathJax forums that describes how to use toMathML will do the trick.
The basic idea is to get the element jax (using MathJax.Hub.getAllJax) for the math you want to convert, then to call its toMathML method. But you need to use some care for this, as toMathML can operate asynchronously. The link above goes through the details.
EDIT: The MathJax-node project allows you to do this from the command line, so you might want to check that out as well.
I have written some code check it out:
First include "https://code.jquery.com/jquery-1.11.2.min.js" and "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
var JaxToML = {
toMathML: function(jax, callback) {
var mml;
try {
mml = jax.root.toMathML("");
} catch (err) {
if (!err.restart) {
throw err
} // an actual error
return MathJax.Callback.After([JaxToML.toMathML, jax, callback], err.restart);
}
MathJax.Callback(callback)(mml);
},
convert: function(AjaxText, callback) {
var tempDiv = $('<div style="width:455px;height:450px:border-width:thick;border-style:double;"></div>').appendTo("body").html(AjaxText)[0];
MathJax.Hub.Queue(["Typeset", MathJax.Hub, tempDiv]); //first place in Q
MathJax.Hub.Queue(function() { //wait for a callback to be fired
var jax = MathJax.Hub.getAllJax(tempDiv);
for (var i = 0; i < jax.length; i++) {
JaxToML.toMathML(jax[i], function(mml) {//alert(jax[i].originalText + "\n\n=>\n\n"+ mml);
AjaxText = AjaxText.replace(jax[i].originalText, mml);
});
}
$(tempDiv).remove();
AjaxText = AjaxText.replace(/\(/g,""); //notice this escape character for ( - i.e it has to be \( , know why it is beacuse JS will treat ) or ( as end/begin of function as there are no quotes here.
AjaxText = AjaxText.replace(/\)/g,""); //notice this escape character for ) - i.e it has to be \)
AjaxText = AjaxText.replace(/\\/g,"");
callback(AjaxText);
});
},
};
Usage :
JaxToML.convert(AjaxText, function(mml) {
alert(mml);
});
The MathJax documentation on configuring MathJax is probably the place to start reading. You can configure the output jax per browser.
A word of caution. There's a reason why MathJax does not use to MathML output on any browser right now: browser support isn't quite there yet. (This will change as browsers catch up and MathJax can start to leverage their native support.) So make sure your content actually renders ok.

Resources