Ace Editor Autocompletion on select event - autocomplete

I am using ACE Editor & I have set following properties to enable autocompletion.
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
I want to add some functionality when user selects any of the autocompletion suggestion (by pressing enter or by using mouse).
Could you please suggest me how can I implement this? Is there any event like onSelect ?
Thanks in advance

There is no onSelect event for now https://github.com/ajaxorg/ace/blob/v1.1.9/lib/ace/autocomplete.js#L183
You can try using completer.insertMatch or make a pull request adding the event.

Related

Button Is Disabled but Still Listens to Press Event

I have a submit button in a <VBox>. On press of it, I have an order creation process. If I click multiple times on the button, multiple orders are created. Is there a way I can disable it after the first click?
I have written the following code in my controller, but it seems to be still hearing to the press action:
onSubmit: function(oEvent) {
this.getView().byId("save").setVisible(false);
//......
},
But this does not disable completely. Though in console, when I check using getEnabled(), it is set to false. How to stop the button from listening to press event when disabled?
I can suggest the following solutions:
Right after the button got clicked - set its "enabled" property to "false" via property binding against JSON model. Once the async action got executed (i.e. success/fail callbacks) - release the button state by setting "enabled" to "true"
Right after the button got clicked - set its "busy" property to "true" (do not forget to set the "busyIndicatorDelay" to 0. The releasing concept is the same as for point 1.
In my opinion, these approaches are more UI5 specific. Personally I would choose the option 2, as it shows the state of processing something in a more prominent way to the user.
Well I think the problem is that setVisible is not the same as enables/disabled.
Maybe you could try to change
setVisible(false);
to
setAttribute("disabled", true);
Hope the bellow code will work fine. Making SetVisible(false) you just hide the button.
Controller: onSubmit: function(oEvent) { this.getView().byId("save").setAttribute("disabled", true);
check this: https://www.webdeveloper.com/forum/d/147187-how-to-disable-enable-submit-button-using-javascript
for detail understanding

tinymce readonly mode event not firing

I have a requirement where i need to display side by side a source code editor and a wysiwyg editor such as tinymce . The idea is that the user should click on any element inside the wysiwg editor and the corresponding element should highlight in the source code editor.
So far i have been able to get the selected node in tinymce by using the onnodechange event
setup: function(ed) {
ed.on('NodeChange', function(e){
console.log(e.element);
});
}
but, the event doesn't fire when the editor is in readonly mode. Do you know why this is happening or can you suggest me a way to overcome this issue ?
I have found a workaround by adding the following inside setup callback
//prevent user to edit content inside tinymce
ed.on('PostRender', function(e){
ed.getBody().setAttribute('contenteditable', false);
});
ed.on('KeyPress', function(e){
e.preventDefault();
e.stopPropagation();
});
It's not perfect, but at least, it does the trick ;)
I had a similar problem, but we needed to intercept the click event, not "NodeChange".
I resolved by adding the event handler directly on the body element of the tinymce iframe and using the event target.
bodyEl.addEventListener('click', function(e) {
console.log('Hello ', e.target);
}, false)
If you need to detect selection change, you could use the 'select' event.

ConerseJS : Play a sound only when browser window is not in focus and a new message arrives

I am new to ConverseJS Development. ConverseJS initialize() will set DEFAULT settings just once...I want to achieve the following : Play a sound only when browser window is not in focus and a new message arrives. Is there an option where I can ADD attributes like play_sounds to true when some event is triggered like we have in jQuery as follows :
$('#datePickerId').datepicker('option', 'minDate', '3');
For now my current code is as follows :
converse.listen.on('message', function (messageXML) {
if(false === document.hasFocus()){
console.log("Window is NOT in FOCUS");
converse.initialize({
play_sounds: true
});
}
});
But this is as good as setting play_sounds for all my messages...Is there a way I can TOGGLE play sounds to ON and OFF based on Window focus...
Any help would be great. Thanks !
Take a look at below link Converse js provide such a feature out of the box.
https://conversejs.org/docs/html/configuration.html#play-sounds
Sorry for posting it here rather than comment because i was not allowed to put comments on question.

Detecting a selection of a old value with mouse

When i click on an <input type=text>, a list of old values appear. If I chose one of them with the mouse, the event "change" from jQuery doesn't trigger.
What event should/could I use to detect this?
You have to use oninput event, using jquery:
$('#myinput').on('input',function(){
//your code here
});
change will only trigger if field loose it's focus (blur event). And the term old values appear is browser feature that remembers form data for fields with same name. You can not trigger change event with that. You need an alternate event like paste , input.
$("#field").on("input DOMAttrModified paste",function(){
});
I'm not sure of event. You can try some though.

How do you programatically remove (not disable) a button from TinyMCE?

I can disable the table button using this:
tinyMCE.activeEditor.controlManager.get('divId_table').setDisabled(true)
but what I'm interested in is actually hiding it. Any idea on how to accomplish that?
Thank you!
First, you have to use the advanced theme.
Then, add this option in the TinyMCE init code.
tinyMCE.init({
...
theme_advanced_disable : "bold, justifyleft, justifyright"
});
I hope this might help someone.
source
list of elements' name here
I'm not familiar with TinyMCE myself, but since you appear to have javascript access to the element itself, all you need to do is set it's display property to "none".
document.getElementById("theButton").style.display = "none";
incase ur trying to hide a specific button, use the following code.
$('.mce_cut').hide() //hides cut button
lookup other button titles using firebug in case u wish to hide something specific.
Incase you are looking to hide specific editor's button, modifiy the jquery selector to select correct sibling/descendent.
alternately, try this ..
tinyMCE.activeEditor.controlManager.controls.ctl00_SPWebPartManager1_g_5005db96_e035_4197_a958_75f008b35061_ctl00_tbKeywords_cut.remove()
Note that ctl00_SPWebPartManager1_g_5005db96_e035_4197_a958_75f008b35061_ctl00_tbKeywords is my asp.net control's id. Don't bother about this if ur not using Asp.net serverside textbox control. In case you are.. <% theTextBoxID.ClientID %> gets u that.
Use the following (using jQuery; a non-jQuery approch is easily built):
var elem = $(ed.id+'_'+'divId_table')
elem.addClass('mceButtonDisabled');
elem.removeClass('mceButtonEnabled');