i've developed a firefox addon with a simple button on the status bar. Now i want to get the right and the left click.
Mi code look like this below
<popupset>
<menupopup id="intransContextMenu" position="overlap">
<menuitem label="settings" onclick="alert('test');" type="checkbox"/>
<menuitem label="test" onclick="alert('test nr 2');" type="checkbox"/>
</menupopup>
</popupset>
<statusbar id="status-bar">
<statusbarpanel id="2" label="test" tooltip="savetip" context="intransContextMenu"/>
</statusbar>
Right click on test label open the menu popup.
It seems working, but the left click is triggered before the right click on the label TEST.
Is there any way that provide me isolating the right and the left click? Triggering left click when left click occours and right click when right click occurs.
Thanks
You should create custom event handler, not just inline alert call, and inside that handler, you can recognize which button was pressed:
function whichButton(e)
{
var btnCode = e.button;
switch (btnCode){
case 0 : alert('Left button clicked');
break;
case 1 : alert('Middle button clicked');
break;
case 2 : alert('Right button clicked');
break;
default : alert('Unexpected code: ' + btnCode);
}
}
<popupset>
<menupopup id="intransContextMenu" position="overlap">
<menuitem label="settings" onclick="alert('test');" type="checkbox"/>
<menuitem label="test" onclick="whichButton(event);" type="checkbox"/>
</menupopup>
</popupset>
Also, to prevent appearing of context menu you can use oncontextmenu event handler:
<menuitem label="test" onclick="whichButton(event);" type="checkbox" oncontextmenu="event.preventDefault();"/>
Related
I want to know which button is clicked in the view not in the controller.
I have two buttons like this:
<button value="Show" name="Show">Show</button>
<button value="update" name="update">Update</button>
#if(I click button "show" I want to see the following tags)
<h2>title1</h2>
<label>title 2 </label>
#elseif(I click the second button "update" I want to see the following tag)
<span>title 3 </span><br>
#endif
I am learning to make an app in NativeScript (Angular 2). In my item page, I want to have a button so that when I press it, I can change Label into TextView/TextField for editing the information of the item.
I know that I can use editable in TextView but I still want to know if it is feasible to have the button with that functionality. Thank you !!
item.component.html:
<StackLayout>
<Label class="h3" text="Name: {{ item.get_name() }}" textWrap="true">
</Label>
<Label class="h3" text="Credit: {{ item.get_credit() }}"></Label>
<Button class="btn" text="Edit" (tap)="change()"></Button>
</StackLayout>
<!-- After pressing the button -->
<StackLayout>
<TextView class="h3" [text]="item.get_name()" textWrap="true">
</TextView>
<TextView class="h3" [text]="item.get_credit()"></TextView>
<Button class="btn" text="Save" (tap)="change()"></Button>
</StackLayout>
This can be done in many ways, but one common way is by changing visibility of control and binding it to a variable / property in the code behind.
in your component html:
Then on your component ts or code-behind you can handle it in the change method:
class MyComponentSample {
isLabelMode: boolean = true; // Set to true if you want label to show by default or false if TextView as default
change() {
this.isLabelMode = !isLabelMode; // Basically you are toggling the mode here.
}
}
I would like to add an activity-indicator widget in my login page but I would like it to cover the whole screen, so I can prevent double click on the Login button.
Any idea, thanks!
If you wrap everything in a GridLayout, add a StackLayout as the last item in the row you want to cover. The StackLayout by default will cover the whole screen. Then you can show/hide via data. For example:
<GridLayout>
<StackLayout>
// All your page content goes here!
</StackLayout>
<StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/>
<GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
<ActivityIndicator busy="true" />
</GridLayout>
</GridLayout>
I have a "dimmer" StackLayout that I animate to be semi transparent black, then the Activity Indicator sits on top.
not sure what layout you have i will only put example(somehow simplified) from my project
Inside page u can put something like this, both StackLayout and ActivityIndicator are inside GridLayout which takes whole size of page
<GridLayout rows="*" columns="*">
<StackLayout visibility="{{ showLogin ? 'visible' : 'collapse'}}" row="0" column="0">
<!--Login form, as you have defined-->
</StackLayout>
<!--Indicator on whole page, colSpan and rowSpan force ActivityIndicator to takes whole page-->
<ActivityIndicator visibility="{{ !showLogin ? 'visible' : 'collapse'}}" busy="{{ !showLogin }}" rowSpan="1" colSpan="1" row="0" column="0" />
</GridLayout>
And inside javascript code
/*somehow add showLogin property to bindingContext*/
page.bindingContext.set("showLogin",false) //false for show ActivityIndicator
/*or*/
page.bindingContext.set("showLogin",true) //true for show form
But best would be to put to already defined Observable which you should have assigned to bindingContext
So based on showLogin property u will get visible either ActivityIndicator(on whole page) or form
Not sure if i forgot something but if something, write comment :)
The activity indicator on its own won’t prevent dual submissions of your forms. In addition to displaying an ActivityIndicator, you should also set the isEnabled flag on your Button UI components to false during the submission. For example:
<!-- template -->
<Button [isEnabled]="!isAuthenticating" (tap)="submit()"></Button>
// JavaScript/TypeScript
export class LoginComponent {
isAuthenticating = false;
submit() {
this.isAuthenticating = true;
doTheActualLogin()
.then(() => {
this.isAuthenticating = false;
});
}
}
You can find a complete implementation of a login that prevents dual submissions and uses an ActivityIndicator in the NativeScript Groceries sample. Take a look at how the isAuthenticating flag is used in this login folder for the specific implementation.
in my xul file:
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="browserOverlay.js"/>
<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- button details -->
<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="xyz.showPanel()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>
<panel id="thepanel">
<hbox align="start">
<image src="warning.png"/>
<vbox>
<description value="You have 6 new messages."/>
<hbox>
<button label="Read Mail"/>
<button label="New Message"/>
</hbox>
</vbox>
</hbox>
</panel>
</overlay>
when calling the function "xyz.showPanel()" which has the following code:
var xyz = {
showPanel: function (e)
{
var button = document.getElementById('custom-button-1');
var panel = document.getElementById('thepanel');
panel.openPopup(button, 'after_start', 0, 0, false, false);
}
}
it gives me error in the error console that says:
Error: TypeError: panel is null
I want to show a panel like "Downloads" toolbar button in Firefox
I am new to Firefox addons,
so how to show a panel when clicking on toolbar button ??
In overlays, the first level of nested elements must refer to something already in the DOM (the element stuff will be added to), or else these elements will be ignored. (Some exceptions to that rule, like <script>.)
Your panel definition basically says (contrary to what you want it to say)
Find an existing panel with id "thepanel"
If found, add a hbox and its children to the panel
If not, ignore the subtree.
You need to change your XUL to provide a container for your panel, e.g. #mainPopupSet, like you did with #BrowserToolbarPalette for your toolbarbutton.
<overlay ...>
...
<popupset id="mainPopupSet">
<panel id="thepanel">
...
</panel>
</popupset>
</overlay>
I have a JQGrid that has an 'Add' button. In my grid, when the 'Add' button is clicked, a single 'Add' form is opened. The 'Add' form has two default buttons: 'Submit' And 'Cancel'. I want to execute some code on the click event of the Cancel button. I'm not sure how to handle this does anyone have any suggestions?
If I understand you correctly, you want to execute a jquery function upon clicking the CANCEL button. This is what I would do:
<input type="button" value="Cancel" id="btnCancel" />
$('#btnCancel').on('click', function() {
//DO STUFF
});
OR
$('#btnCancel').click(function() {
//DO STUFF
});
OR you could put a function call on the input itself:
function myFunction() {
//DO STUFF
}
<input type="button" value="Cancel" id="btnCancel" onclick="return myFunction();" />