tiinymce dropdown item cashes polymer dialog when clicked - javascript

I am using tinymce wysiwyg html editor and polymer. The editor is shown in a paper-dialog popup. When an item in a tinymce dropdown menu is clicked, the dialog closes and it will not reopen. No errors appear in console. How can I catch the click events to stop it from affecting the polymer dialog?
I tried adding a stopPropogation in the tinymce setup field but that doesn't seem to help.
tinymce.init({
selector: '#' + this.textareaId,
setup: function (ed) {
ed.on('click', function(e) {
console.log("clicked");
e.preventDefault();
e.stopPropagation();
});
}
});
},

Just came across the same problem. It looks like paper-dialog thinks that when you select certain items from TinyMCE drop-down menu, the click happens outside of paper-dialog, so it decides it needs to close.
The quick workaround here would be to set no-cancel-on-outside-click property for dialog (or make it modal). More involved solution would require capturing all click events on TinyMCE element, which I haven't attempted.

Related

How to get xpages modal to fire a close event

I have an xpage (viewed via web browser) which has many <xe:dialog...> controls on it, resulting in bootstrap modal dialogue boxes.
I want to run some client-side script when any dialogue is closed.
So I tried ..
$('.modal').on('hide.bs.modal', function() { ...}
However this didn't work, I suspect because when the xpage is loaded there aren't actually any elements with class 'modal', until one is opened. Then a partial refresh injects the relevant HTML.
So I tried running that line above in the event when the modal opens (in the xpages onShow event), but that didn't fire either. I guess the event might be 'when the modal opens but before it's displayed' meaning the elements aren't ont he screen then either.
So I also tried (hack, hack) a setTimeout of 2 seconds to allow the modal to show first, but still no luck.
So .. question is ..
Using xpages bootstrap modals, via the standard xe:dialog control, how can I attach a client-side javascript event whcih will run when the modal is closed / hidden ?
You can use Event Delegation to bind the listener to a parent element of the (non-existing) modals and trigger a function when a click happens on elements matching the .modal selector in that parent element:
$(document).on("hide.bs.modal", ".modal", function () {...});
I do something similar to this, where a button selection on one modal, closes said modal, and then depending on the button that was clicked, opens the next modal. Instead of doing that, could you not run your script in the same way?
var
currentModal = $(this);
//click next
currentModal.find('.btn-close').click(function(){
currentModal.modal('hide');
OTHER STUFF?
EDIT - My full code:
<script type="text/javascript">
$("div[id^='myModal1']").each(function(){
var
currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal3']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal2']").first().modal('show');
});
});
$(window).on('load',function(){
$('#myModal1').modal('show');
});
</script>

CKEditor widget double click to open dialog does not work

I have created the most simple widget which consists of a single div with a class. The template is;
<div class="simple" data-padding="false"></header>
The Dialog contains 1 checkbox to change the padding.
This widget works all ok, is upcasted nicely, shows the yellow line around it when you hover over it. However it is impossible to double click on it to open the dialog, nothing happens, no console errors as well. I should expect that double clicking inside the div should open the dialog.
When a second div is nested, which is set to be the editable and some padding is added to the main div, it is possible to double click on the padding area between the two divs which opens the Dialog, that is however of course not what I want..
What is going wrong here, is this a bug?
I initially solved it by adding a listener to the double click event;
CKEDITOR.plugins.add('simple', {
init: function(editor) {
editor.on( 'doubleclick', function(e) {
var ClickedWidget = e.editor.widgets.widgetHoldingFocusedEditable;
if (ClickedWidget != null && ClickedWidget.name == 'simple') {
ClickedWidget.edit();
}
});
This worked nicely but got in the way with selecting text in an editable element. That thus also explains why it is setup like that.
So to solve this properly I created a plugin that shows a context menu on right clicking the widget, with the options to edit and remove. I have made this plugin available on CKEditor website for others to use;
http://ckeditor.com/addon/widgetcontextmenu

IE 10 - div with scrollbar fires blur event causing it to hide (custom code)

We are using W2UI (Javascript UI) controls. It has a "Multi Select" input control with associated div container with suggestion data. Whenever user clicks on input control a suggestion div is popped up and user can select multiple items from the list. Please find below screenshot
We have set overfloaw:auto of div When suggestion list has more than 10 records. (Refer below screenshot)
At this point, clicking on scrollbar works fine in Chrome and Mozilla but in case of IE it closes / hides the div.
We have made initial RCA of this as follow.
When a scrollbar is associated to a div, clicking on scrollbar causes blur event to fire for that div.
In W2UI library, blur event is used to hide the suggestion div causing it to close. We also found that, clicking on scrollbar does not cause blur event to fire in chrome & firefox.
Now we want to suppress blur event when user clicks on "scrollbar" in case of IE.
We are unable to identify scrollbar click.
Please share your thoughts / workarounds about suppressing blur() event conditionally.
I am also facing same issue we have made some changes in w2ui lbrary
we have set global variable flagClick first time it is false. & added below events
var div = $('#w2ui-global-items');
div.on('mouseover', function (event)
{
flagClick = false;
$('.w2ui-list').find('input').focus();
});
div.on('mouseout', function (event)
{
flagClick = true;
});
and changed blur event logic of div
as below --
.on('blur', function (event)
{
if (flagClick)
{
$(div).css('outline', 'none');
obj.hide();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
})
almost this logic have solved our issue, except one .
When we click on search textbox then list will populate , if after that we click on list scroolbar and after that click on outside list div , List not getting hide (div blur event not getting fired).
try this solution , it will help u .
If you get solution to our problem pls post on same .
An updated version of w2ui came out just a few days ago where controls, including multiselect, have been refactored. It seems to work fine for me with 1.4 version.

How to detect click outside window

I have a customized dropdown in html coded in "ul" and "li", I show options when a user clicks on the head of "ul" I would like to hide these elements when the user clicks outside the menu area.
Is something like this possible with javascript/YUI not Jquery?
I'm not a YUI guy, so I suspect this could be written a bit better, but I have tested it and it works.
Hide the dropdown anytime the document is clicked:
Y.one(document).on("click", function(){
Y.one("#menu").hide();
});
Prevent clicks on the ul from propagating to the document:
Y.one("#menu").on("click", function(e){
e.stopPropagation();
});
If the visitor clicks anywhere, the click will bubble up to the document, and hide the menu. If they click on the menu, the event will be prevented from bubbling up to the document, and as such the menu will not be hidden.
Demo: http://jsfiddle.net/nHnZT/
use('event-outside') adds support for "outside" events. See the user guide for details: http://yuilibrary.com/yui/docs/event/outside.html

Change style of jQuery Dialog title bar when got/lost focus

I'm trying to make a simple page with two jQuery Dialogs with the functionality of changing their titlebar colour when each gets or losts focus. In other words, focused window has a different titlebar colour which makes it easier to differ which has focus.
I have this code:
$(function () {
$(".window").dialog({
focus: function (event, ui) {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
but I don't know how to detect in the focus event whether it it gets or losts focus.
Try this
http://jsfiddle.net/JqQA6/
I needed the same and this solution works.
Try focusin() and focusout()
The dialog focus event is only called on gaining focus. Stock jQuery UI dialog boxes have no concept of losing focus.
A simple solution is to simply remove your ui-state-error class from every dialog in the focus handler and then add it to the one that's just received focus.
I've actually written a full-featured jQuery UI plugin which adds a .blur event to dialog boxes, and handles re-ordering stacked boxes whenever the topmost box is closed. I'll check if I'm allowed to publish it.

Categories