I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
Related
I'm wondering how to disable ctrl-clicking links when in design mode. I believe it must be possible because when the link plugin is disabled, links cannot be ctrl-clicked while in 'design' mode. I would like to enable the link plugin but have the links remain un-clickable while in 'design' mode. They can still be clicked when in 'readonly' mode.
This fiddle shows the functionality when the link plug in is not enabled. Just use the Add Link button to add a link to the editor and notice when you're in design mode how it cannot be ctrl-clicked to navigate.
https://fiddle.tiny.cloud/Q6haab/3
This fiddle has the link plugin enabled to show the difference of ctrl-clicking while in edit mode.
https://fiddle.tiny.cloud/Q6haab/4
Thanks in advance
If you import the link plugin there is currently no way to disable the link opening behavior with configuration.
TinyMCE registers event handlers for click and keydown which check for the click on the link.
Additionally the link plugin registers menu items that are displayed on right click for opening the link.
Ultimately these all call the same method which creates an anchor tag on the body and fires a mouse click event on it.
If you wish to stop clicking from doing anything then you can add an event listener to the body tag for click events and then filter on the event target to look for anchor tags that are directly on the body and have 3 attributes (href, rel and target). Once you find a likely candidate you call preventDefault on the event.
body.addEventListener('click', (evt) => {
const t = evt.target;
if (
t.parentNode === body &&
t.attributes.length === 3 &&
t.hasAttribute('href') &&
target.getAttribute('rel') === 'noreferrer noopener' &&
t.getAttribute('target') === '_blank') {
evt.preventDefault()
}
});
In Ionic 3, I'm trying to open a modal from within a side menu:
<ion-item menuClose (click)="presentProductModal()"> Add Product</ion-item>
When the side menu is opened, the rest of the screen loses focus. When the modal link is selected, the side menu disappears. However, the modal and the main screen remain unfocused.
I'm guessing there's some timing / promise issue here, but I'm not sure what to do exactly.
Is there some workaround?
Here are two images demonstrating the issue (the "Add Product" link opens the modal):
Thanks in advance!
You can use the menu output event: ion-close.
Listen for this event, and open the modal after menu has closed.
Read more about output events for menu here: menu close event
or
Remove menuClose directive from ion-item. In your click function, close the menu programmatically using close method. Read more about it here: Close menu programmatically.
This method will return a promise which will be resolved when menu is fully closed, you can then open the modal in its resolve.
this.menuController.close(<your menu id>).then(() => {
this.modal.create.....
})
The template for the modal was simply missing wrapping tags.
you can use MenuController
import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
}
If you want to close menu please use close() event
this.menuCtrl.close()
If you want to open menu please use open() event
this.menuCtrl.open();
Having some trouble opening a Dialog after navigating to a page. The intention is to always open the dialog when a user lands on this page.
Simplified, I have a controller that looks like this:
onInit: function() {}
this.myRouter.getRoute("orderscreate").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function() {
this.dialog = sap.ui.xmlfragment("myDialog", this);
this.dialog.open();
},
When I put a debugger in, this works great: I can see the dialog is open.
THEN, the navigation animation kicks in, does the slide animation, and upon completion the dialog is closed again. I'm not sure why it insist on navigating after the view has rendered.
This happens when using navTo as well. Dialog opens, animation starts, dialog is closed again. sap.m.Page does not have another way of executing code after showing, as far as I'm aware.
Any advice?
Unless told otherwise the TargetHandler will close all open dialogs.
TargetHandler, a class used for closing dialogs and showing transitions in NavContainers when targets are displayed.
Try adding the following code after your router has been initialized
this.myRouter.getTargetHandler().setCloseDialogs(false);
I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]
I am having troubles trying to understand how to use "Save before Exit" plugin with the Modal Page plugin in Oracle ApEx v4.1.1.
I basically would like to know how to attached the 'X' close button to the "Save before Exit" plugin when a user makes a change to a select list or text area field on the page (I also have classes associated to these fields), used within the modal page?
Here are links to the two plugins that I am trying to link together:
http://apex.oracle.com/pls/apex/f?p=46685:MODAL_PAGE:0
http://apex.oracle.com/pls/apex/f?p=46685:SAVE_BEFORE_EXIT:0:::::
Important note: i tested this plugin with the latest version available: 3.0.2. The change detection routine there is modificationDetected, where in 3.0.0 it was changeDetected! Check which version you use!
When i have to integrate things like these, i want to avoid altering provided code such as the plugin code. Doing this will break your stuff if you don't remember in the future and install a new version (unless you're actually fixing something of course).
Create a dynamic action on the page that calls the modal dialog, fire on load:
var default_colorbox_close = $.colorbox.close;
$.colorbox.close = function(){
iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);
apex.debug("Colorbox close attempt - check changes");
var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");
apex.debug('Modal contains changes: '+hasChange);
if(hasChange){
$( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
resizable: false,
height:140,
modal: true,
stack: true,
zIndex: 9999,
buttons: {
"Don't close": function() {
$(this).dialog( "close" );
},
"Close": function() {
iframeDoc.apex_save_before_exit("disableWarning")
default_colorbox_close();
$(this).dialog( "close" );
}
}
});
} else {
apex.debug('Close modal with default colorbox close');
default_colorbox_close();
};
};
The save before exit plugin works by using the browser window.onbeforeunload event. It does trigger when the popup is closed (at least in FF it does), but by then it is way too late: the popup is gone and the markup too.
My first thought was to simply tap that onbeforeunload event by redirecting the page to a generic page which would hold onload code to close the popup. The onbeforeunload would spring in action as soon as the redirect would be attempted. There would be no dynamic action or plugin altering. But oh well, i decided against that. (Note though: most of the code in this snippet would have to be reused in that case too, save change detection and dialog).
Instead i choose to check for changes in the iframe document when a close event happens, and display a dialog, which can be modified too, and clearly indicates that you are performing an action on the popup and not on "the page" (which could be interpreted as the parent page of the modal).
So what is needed is to catch the modal popup close event. Note that the plugin is based of the jQuery Colorbox plugin. The Skillbuilder modal does not provide a pre-close event and can not without altering the colorbox plugin.
Colorbox provides a close option in the form of the "X" and also the ESC-key. I want to catch both(/all).
I didn't opt for unbinding the click on the X and binding a new click.
what i did first is save the default colorbox close event, and
then override the default.
var default_colorbox_close = $.colorbox.close;
$.colorbox.close = function(){
Next up: this piece of code will get the jQuery instance of the modal
page. I then fetch the document element of the page with this jquery
instance
iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);
Next up is checking the iframe (modal popup) for changes
var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");
So if the page has changes, a warning has to be displayed. I do this
by using jQuery-UI Dialog. It will have "Unsaved changes!" as title,
and 2 buttons ("Don't close" and "Close"). When closing, the save
before exit plugin has to have its default warning disabled! If not,
you'd still get prompted by the onbeforeunload message! Then the
colorbox has to be closed (which will remove the iframe). Finally
the dialog (prompt) has to be closed.
if(hasChange){
$( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
resizable: false,
height:140,
modal: true,
stack: true,
zIndex: 9999,
buttons: {
"Don't close": function() {
$(this).dialog( "close" );
},
"Close": function() {
iframeDoc.apex_save_before_exit("disableWarning")
default_colorbox_close();
$(this).dialog( "close" );
}
}
});
If there are no changes, then the modal can simply be closed.
} else {
apex.debug('Close modal with default colorbox close');
default_colorbox_close();
};
Hope some of that sticks ;)
Example on http://apex.oracle.com/pls/apex/f?p=11128:1
Edit:
And some big thanks to Dan McGhan for helping in the OTN thread :)
https://forums.oracle.com/forums/thread.jspa?threadID=2434115&tstart=0
I would like to add something to the answer. I've noticed that the items that changed are not highlighted. So I've added this line to the "Don't Close" right before closing the dialog box.
iframeDoc.apex_save_before_exit('modifiedItems', {highlight:true});
And it highlights the items as it should!