I'm working on OpenForge browser addon. Is it possible to get the current/active tab object?
The tabbar component doesn't have a button.getActive(success, error) function, so the only way to determine this is to store the active tab in a JavaScript variable when a tab button is tapped.
Example:
forge.tabbar.addButton({
icon: "search.png",
text: "Search",
index: 0
}, function (button) {
// action to perform when button is clicked
button.onPressed.addListener(function () {
alert("Search");
// store active button to variable
active_tab = 'search';
});
});
Related
We are using p:textEditor (based on quill editor) in our application and we have more UI components below p:textEditor. The problem is for accessibility, the user need to tab through the components in the page using keyboard; but when it comes to p:textEditor a tab acts as adding a tab(4 spaces).
The primefaces showcase here also has the same problem, how can we navigate to the submit button from p:textEditor using keyboard?
Thanks Kukeltje, I disabled the tab key in quill editor.
For anyone who wants to do the same, you have to edit the texteditor.js file under META-INF/resources/primefaces/texteditor/ (when you reverse engineer the primefaces-version.jar (version=6.1 in my case)) and add the below code in render: function()
_render: function() {
...
this.cfg.modules = {
toolbar: PrimeFaces.escapeClientId(this.id + '_toolbar'),
keyboard: {
bindings: {
tab: {
key: 9,
handler: function() {
// do nothing
return true;
}
},
'remove tab': {
key: 9,
shiftKey: true,
collapsed: true,
prefix: /\t$/,
handler: function() {
// do nothing
return true;
}
}
}
}
};
...
}
For anyone who wants additional key customization can use the Quill Interactive Playground to validate your changes.
I am new to Firefox Addon SDK, high level API.
What I wanted to do it, if a user click the icon on the toolbar, a new tab is opened, and run the script defined in contentscriptfile.
I use the script below:
var self = require("sdk/self");
var tabs = require("sdk/tabs");
var buttons = require('sdk/ui/button/action');
var button = buttons.ActionButton({
id: "mm-link",
label: "Visit mm",
icon: {
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("about:blank");
tabs.on('ready', function (tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
});
}
But it doesn't work as expected, and has the following problems:
The script runs repeatedly. (I wanted it run only once on each new tab)
Even if I click the "+" icon to create a new tab, the script will
run. (I wanted it only run when clicking the icon I created on the toolbar)
I have also tried to change 'ready' to 'activiate', the repeated running problem is gone, but every time I create the tab, the script will run.
Many thanks to any help.
The issue is that you're listening to the ready event of any and all tabs, rather than the one you just opened. One option is to do something like this:
function handleClick(state) {
tabs.open({
url: "about:blank",
onOpen: function onOpen(tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
}
});
}
And attach the script using the onOpen handler. For more info the docs are here: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#open%28options%29
I have a typical primefaces dialog and it works great but I can't find any options to have it close when someone clicks outside the dialog. I have seen a few jquery examples and I'm guessing I can adapt those for the primefaces dialog but first wanted to make sure there wasn't a solution already?
Thanks.
Just sharing my solution that works globally for any modal dialog. Code adapted from http://blog.hatemalimam.com/get-widgetvar-by-id/ .
When you show a dialog, a mask (that has the .ui-dialog-mask class) is created, and it has the id of the opened dialog, appended with a "_modal" keyword.
This scripts gets that id when that mask is clicked, removes that appended text, and finds the corresponding widget to be closed.
To use it, just save the code on a .js file, import on your page and it will work.
Tested on Primefaces 6.0.
/**
* Listener to trigger modal close, when clicked on dialog mask.
*/
$(document).ready(function(){
$("body").on("click",'.ui-dialog-mask',function () {
idModal = this.id;
idModal = idModal.replace("_modal","");
getWidgetVarById(idModal).hide();
})
});
/**
* Returns the PrimefacesWidget from ID
* #param id
* #returns {*}
*/
function getWidgetVarById(id) {
for (var propertyName in PrimeFaces.widgets) {
var widget = PrimeFaces.widgets[propertyName];
if (widget && widget.id === id) {
return widget;
}
}
}
You can write a javascript function for onClick event and close the dialog.
<h:body onclick="closeDialog();">
function closeDialog(){
widgetWarDialog.hide();
}
I have an other solution for a "modal" primefaces dialog.
I just want to add the click event, when my button is clicked to open the Dialog. And not allways when i click anything on the body element.
Add a styleClass to your button. For example styleClass="mybutton-class".
Then add a widgetVar to your <p:dialog widgetVar="widgetVarName" ...>
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
Additional for Ajax Update Events:
I build 3 JS functions.
//for the first time the page is loaded
jQuery(document).ready(function() {
onLoadFunction();
});
//to load the script after you reload your page with ajax
jQuery(document).on("pfAjaxComplete", function(){
onLoadFunction();
});
//your code you handle with
function onLoadFunction(){
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
}
It is an 8 years old question, but recently I meet the same problem and here is my solution for a modal primefaces dialog.
I wrote a js function which adds a listener to overlay panel around the dialogue
function addListenerOnDialogueOverlay() {
document.getElementById('test-dialog_modal')
.addEventListener('click', function (event) {
PF('test-dialog-widget').hide();
});
}
and call the finction in "onShow" tag of the dialogue
<p:dialog id="test-dialog"
widgetVar="test-dialog-widget"
modal="true"
onShow="addListenerOnDialogueOverlay()">
I have a html5 application that makes use of the file API, using an element. I am able to respond when the user selects a file. I would like to be able to do something if the user cancels the file choice. However, I can find no event that is fired on the input element if the user clicks on the cancel rather than ok button in the file chooser dialogue.
Is there some event fired on 'cancel' that I am missing, or should I re-architect my app to not need this?
There isn't really a listener to check for if a file was selected, you could get around it by setting a note in your code using the on change event like so:
var FileChoosen = false;
var inputElement = document.getElementById("inputField");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var fileList = this.files; /* now you can work with the file list */
//Check if the layout was changed from file API:
if(document.getElementById('fileOutput').innerHTML != "") {
FileChoosen = true;
setTimeout("funcCalledToCheckUserSelection()", 500);
};
}
I have the same question, the solution is surprisingly very easy ... at least in my case NW.js (Node-Webkit) fires oncancel event if user click the [cancel] button in the file chooser dialogue. You use this simple and native way if you're also on NW.js (process.version is v5.11.0).
I also tried Microsoft HTA on Windows 10, it does not fire the oncancel event.
In react , on Change event of input field , the event has no files on cancel event, we can proceed with this assumption. Cancel event will be captured. on file selection it wont be undefined.
handleChange = (event) => {
console.log(event);
console.log(event.target.files[0]);
this.setState({
tableDataResult: false,
});
if(event.target.files[0]){
this.setState({
csvfile: event.target.files[0],
});
}else{
//Cancel event called
console.log("false");
this.setState({
csvfile: oldValue,
});
}
};
<input
style={{
width: "450px",
marginLeft: "15px",
marginTop: "5px",
}}
className="csv-input"
type="file"
ref={(input) => {
this.filesInput = input;
}}
name="file"
placeholder={null}
onChange={this.handleChange}
/>
Yes, we have a problem catching cancel button. There is no event.
Life hack solutions is use other events:
Event "focus" on file input, or "mousemove" on window.
Input file field must be visible for "focus" event.
With mouse event, you need to delay when catch event.
When user clicks cancel, change event triggers again. Thats works for me;
$('#attachedFiles').bind("change", function () {
var file = this.files[0];
if (file) {
// if file selected, do something
} else {
// if user clicks 'Cancel', do something
}
});
I'd like to throw up a T+C dialog when one clicks the submit button of a form. I'm using backbone.js. I can't work out whether I should be cramming the dialog within the FormView, or invoking the DialogView from within FormView or hooking it up with an event or something.
Ideally, my FormView Save() method would initialize it, with a Accept and Decline callback. My previous, none-Backbone implementation handed over all control to the dialog itself, which was a bit inelegant. Can anyone suggest anything?
edit: Thanks to Derick, here's where I'm at. Note however, that JqueryUI dialog appends itself at the end of 'body', and thus looses its context (it's not longer wrapped in the div it came from), so event binding isn't working.
save: ->
that = #
dlg = new TermsConditionsView({el: '#tcDialog'})
dlg.bind 'accepted', #tncAccepted, #
dlg.bind 'declined', #tncDeclined, #
$(dlg.render().el).dialog
draggable: false
resizable: false
width: 500
height: 600
modal: true
dialogClass: 'termsConditions'
buttons: [
{
id: 'acceptButton'
text: 'Accept'
click: -> that.tncAccepted()
}
{
id: 'declineButton'
text: 'Decline'
click: -> that.tncDeclined()
}
]
I'd have the FormView call a separate DialogView, and listen to an "accepted" and "declined" event, which the DialogView will trigger based on the user's action.
FormView = Backbone.View.extend({
events: {
"click #save": "save"
},
save: function(){
var dlg = new TnCView();
dlg.bind("accepted", this.tncAccepted, this);
dlg.bind("declined", this.tncDeclined, this);
$(dlg.render().el).dialog();
},
tncAccepted: function(){
// do whatever you need, when the user accepts the terms n conditions
},
tncDeclined: function(){
// do whatever you need, when the user declines the terms n conditions
}
});
TnCView = Backbone.View.extend({
events: {
"click #accept": "accept",
"click #decline": "decline"
},
accept: function(){
// close the dialog
this.trigger("accepted");
},
decline: function(){
// close the dialog
this.trigger("declined");
}
});
Note that I put the FormView in control of turning the Terms n Conditions into a dialog. it's my preference for the parent form to be in control of when / where a child form's 'el' is placed into the DOM / shown on the screen. this tends to keep the code cleaner and more flexible in the long run.