I'm running into an issue where if a focus even is fired of by javascript on the current window's page it steals focus from my addons input. Is there a way to force an input in a panel to stay focused.
$(inputSelector).focusout(function(){
$(inputSelector).focus();
});
$(inputSelector).blur(function(){
$(inputSelector).focus();
});
I have tried the above which seems to work on my test page but not in my panel :(.
According to the docs -> https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel
Setting focus to false should
Set to false to prevent taking the focus away when the panel is shown.
Only turn this off if necessary, to prevent accessibility issue.
Optional, default to true.
I have set my panel up as such.
var text_entry = require("sdk/panel").Panel({
width: text_entry_width,
height: text_entry_h,
focus: false, // doesnt seem to work....
contentURL: data.url("entry.html"),
contentScriptFile: [
data.url("jquery-2.1.1.min.js"),
data.url("text.js")
],
contentStyleFile: [
data.url("styles.css")
]
});
It doesn't append that setting it to false works :(.
Any help, guidance or comments would be awesome :) Cheers.
_____________ UPDATE ____________________________________________
There seemed to be some confusion of my bad explaining :( so i have uploaded a video to youtube that will hopefully explain the issue a bit better.
https://www.youtube.com/watch?v=5fhJzpa515Y&feature=youtu.be
Also below find some more code.
Panel Html
<html>
<head></head>
<body>
<div id="resultTableTop" class="resultTable"></div>
<input type="text" id="edit-box"></input>
<div id="resultTableBottom" class="resultTable"></div>
</body>
</html>
Hot Key Code
var showHotKey = Hotkey({
combo: "accel-t",
onPress: function() {
text_entry.show();
}
});
Panel js show listenter
self.port.on("show", function onShow() {
$('input').focus();
console.log('hi');
});
Hopefully this is a bit clearer now :) thanks for the help so far :).
This code focuses panel's input field when it opens:
main.js file:
//main.js file
var text_entry = require("sdk/panel").Panel({
focus: true, //THIS SHOULD BE TRUE
contentURL: data.url("panel.html"),
contentScriptFile: [
data.url("js/libs/jquery-1.11.1.js"),
data.url("get-text.js")
]
});
text_entry.on("show", function() {
text_entry.port.emit("show");
});
get-text.js file which is injected into panel:
//data/get-text.js file
self.port.on("show", function onShow() {
$('input').focus();
});
Here is a hacky, untested, solution:
var { viewFor } = require("sdk/view/core");
var { Panel } = require("sdk/panel");
var panel = Panel({
..
onShow: function() {
var view = viewFor(panel);
view.setAttribute("noautohide", "true");
}
})
For more information of the panel noautohide attribute click here.
Related
I have create a simple CKEditor widget that highlights the elements that have the class "pink".
I have also added a "Pinkify" button to the toolbar, which replaces the HTML of the selected element with some other elements that have the class "pink".
What I observe when I click the button is that widgets are not created for the freshly inserted elements. However, when I toggle between Source mode and WYSISYG mode, the widgets get created.
See the jsfiddle and its code:
CKEDITOR.replace('ck', {
allowedContent: true,
extraPlugins: 'pink'
});
CKEDITOR.plugins.add('pink', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('pinkwidget', {
upcast: function(element) {
return element.hasClass('pink');
}
});
editor.addCommand('pinkify', {
editorFocus: 1,
exec: function(editor) {
var selection = editor.getSelection(),
selectedElement = selection.getStartElement();
if (selectedElement) {
selectedElement.setHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
editor.widgets.checkWidgets(); // needed?
}
}
});
editor.ui.addButton('pinkify', {
label: 'Pinkify',
command: 'pinkify'
});
},
onLoad: function() {
CKEDITOR.addCss('.cke_widget_pinkwidget { background: pink; }');
}
});
I am aware of this question on Stackoverflow, but I can't get it to work with setHtml called on an element. Can you suggest how to modify the code so that widgets get created as soon as the HTML is updated?
According to the CKEditor team, it is normal that CKEDITOR.dom.element.setHtml does not instanciate widgets (see Widgets not initialised after calling setHtml on an element).
So the workaround they gave me was to rewrite the code that insert HTML in place of the selected element to:
if (selectedElement) {
selectedElement.setHtml("");
editor.insertHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
}
For those like me who didn't know, editor.insertHTML inserts HTML code into the currently selected position in the editor in WYSIWYG mode.
Updated jsFiddle here.
I used below code to add toolbar buttons automatically in navigation toolbar below Firefox Australis.
var buttonId = "toolbarbutton-toolbarbutton";
var navBar = document.getElementById("nav-bar");
var currentSet = navBar.currentSet;
var curSet = currentSet.split(",");
if (curSet.indexOf(buttonId) == -1)
{
navBar.insertItem(buttonId);
navBar.setAttribute("currentset", navBar.currentSet);
document.persist("nav-bar", "currentset");
try
{
top.BrowserToolboxCustomizeDone(true);
}
catch (e)
{
}
}
Because user interface and modules changed for Australis, the code needs to be updated. How can I add Toolbar Button for Australis proper way?
You have to use the CustomizableUI module:
try
{
Components.utils.import("resource:///modules/CustomizableUI.jsm");
CustomizableUI.createWidget({
id: "toolbarbutton-toolbarbutton",
defaultArea: "nav-bar",
removable: true,
label: "My button",
tooltiptext: "My tooltip text",
onClick: function()
{
alert("Clicked");
}
});
}
catch (e)
{
Components.utils.reportError(e);
// No such module? Try the old approach.
...
}
Note that the widget no longer needs to be added for each browser window, it is enough to do it once. Unfortunately, the module documentation is practically non-existent right now, the code above has been deduced from module's source code. The documentation should improve soon however.
If it helps, Adblock Plus source code contains an emulation of the CustomizableUI API for older Firefox versions. This one is far from complete however, it is only meant to cover the needs of Adblock Plus.
I have done a firefox addon using the Addon Builder. This addon display a panel containing a web page.
The problem I have is that I would like to keep this panel displayed and probably had a close button to hide it. Actually the panel disappear when we click out of the panel.
This is the code I use to make my panel:
var HauteurPopup = 400;
var LargeurPopup = 650;
function getPanel(contentURL){
var popupPanel = require("panel").Panel({
width:LargeurPopup,
height:HauteurPopup,
contentURL: contentURL
});
return popupPanel;
}
var btn = require("toolbarbutton").ToolbarButton({
id: 'propelink-button',
label: 'Propulesez ce lien!',
image: 'https://www.users.prplk.com/img/mini-logo-propel-bar.jpg',
onCommand: function() {
if (typeof(tabs.activeTab._worker) == 'undefined') {
let worker = tabs.activeTab.attach({
contentScript: btnContentScript
});
tabs.activeTab._worker = worker;
}
tabs.activeTab._worker.port.emit("btnContentScript");
var panelPopup = myPanel.getPanel("http://example.com");
panelPopup.show();
}
});
Someone know how to keep this panel displayed and close it adding a button?
Thanks in advance
In xul based extensions there is an option in the creation of the panel to accomplish that (panel.noautohide). In firefox-addon-sdk it seems that it doesn't exist. See 595040 – Add a "isPersistent" attribute for panels
Although it is mentioned that you can do a workaround by editing panel.js, but i never tried to do that, but you may want to give it a try.
Normally, when I write the followings:
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
And js:
$("a[rel=popover]").each(function(){
$(this).popover({
trigger: 'hover',
placement: 'top',
html: true,
title:"Passenger Info",
content: "content "+$(this).attr('id')
})
.click(function(e) {
e.preventDefault()
});
});
It works and I can see a popover for the icon.But when I write the following code,to create the icons dynamically, but I cannot show popovers for the newly created icons.
html part:
Stations:
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);"></select>
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
<div id="infoOfPassengers"></div>
<div id="distType"></div>
<div id="distParams"></div>
In Stations combobox, options are filled when the page is loaded.They are filled normally.
js function for getting the number of passengers from php, and create icons accordingly:
function sta_callStation(sel){
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('Stations.php', function(station){
$.each(station, function(sta_key, sta_value) {
if(sel.value==sta_key)
{
$.each(sta_value.passengers, function(j,passengers)
{
var pas_icon = document.createElement("a");
pas_icon.className ='icon-user';
pas_icon.id='id_'+j;
pas_icon.setAttribute('href', '#');
pas_icon.setAttribute('rel', 'popover');
//alert('id_'+(j));
var empty=document.createElement("a");
empty.appendChild(document.createTextNode(" "));
document.getElementById('sta_numberOfIcons').appendChild(pas_icon);
document.getElementById('sta_numberOfIcons').appendChild(empty);
});
}
});
});
}
The icons appear in the page under the combobox.I just put to try, I don't know how to insert the new created icons to a tag.I just appended the newly created icons to tag.What is wrong here?Why I cannot show popovers for the created icons?Please help.
The JS code that you have which successfully wires-up the popover for elements $("a[rel=popover]") needs to execute after you have dynamically added your icons.
You could paste those lines into the end of the logic in sta_callStation() but it is probably better to put them into their own function and call that from sta_callStation().
Something like:
function bindMyPopovers() {
$("a[rel=popover]").each(function(){
$(this).popover({
trigger: 'hover',
placement: 'top',
html: true,
title:"Passenger Info",
content: "content "+$(this).attr('id')
})
.click(function(e) {
e.preventDefault()
});
});
}
I have a main menu and one of its options has an accordion effect on toggle with the following script:
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
});
When one of its sub-options is selected I add an active class with this:
jQuery.fn.slideFadeToggle = function(speed, easing, callback){
return this.animate({opacity: 'toggle', width: 'toggle'}, speed, easing, callback);
};
$(document).ready(function(){
$("#subNavUs").hide();
$("#us").click(function () {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavUs").slideFadeToggle(800);
$('*').removeClass('active');
$(this).addClass('active');
return true;
});
$("#subNavSys").hide();
$("#sys").click(function () {
$("#subNavUs").hide();
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").slideFadeToggle(800);
$('*').removeClass('active');
$(this).addClass('active');
return true;
});
And this triggers a sub-menu, but when I select any of this new sub-menu's options to load a new page both the accordion menu and the sub-menu are back hidden. How can I make them stay open and show the active class I want to assign them?
Just added "navigation: true" to the accordion function. It was a beginner's mistake but I finally got it to work :)
I post it in case someone might have the same issue.