I'm working on a Firefox extension that creates a menu of bookmarks from data fetched from a server. I'd like to add icons to each menuitem, but I can't seem to get them to display. I'm creating each menuitem using:
Bookmarks.createMenuItem = function(item) {
var menuItem = document.createElementNS(Bookmarks.XUL_NS, "menuitem");
menuItem.setAttribute("label", item.url_title);
menuItem.setAttribute("oncommand", "Bookmarks.openUrl('" + item.url + "');");
menuItem.setAttribute("class", "bookmark-menu-item");
if ( item.favicon ) {
menuItem.setAttribute("class", menuItem.getAttribute("class") +
" menuitem-iconic");
menuItem.setAttribute("image", item.favicon);
}
return menuItem;
};
The menuitem works just fine except that it doesn't display the image. I've verified the URLs that I'm getting for each image (from item.favicon in the code below) are accessible.
Any idea what's wrong here? I'm using Firefox 6.0.2.
I've picked random extension that has icons in menu items - HttpFox - and there you have something like this:
in XUL file:
<menupopup id="toolsPopup">
<menu id="hf_menu_HttpFox"
class="menu-iconic"
label="&browseroverlay.menutools.httpfox.label;" />
</menupopup>
in CSS file:
#hf_appmenu_HttpFox, #hf_menu_HttpFox, #hf_menu_webDeveloper_HttpFox {
list-style-image: url(chrome://httpfox/skin/globe16.png);
}
In FoxSplitter it's the same way.
So basically, if style attribute is allowed for menus, you may change
menuItem.setAttribute("image", item.favicon);
to
menuItem.setAttribute("style", "list-style-image: url(" + item.favicon + ")");
(if item.favicon is the URL), or if style doesn't work, then create classes for each item.
Hope this helps.
Related
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
I need to capture tap (click) events on a WebView (to display a picture in a SVG file), so that I can show another Nativescript page (or show another SVG) based on where the image is clicked..
Is there a way to capture a tap event with x,y coordinates for WebView?
Another thing. I found WebView can capture hyperlinks within the html loaded... Is there a way to make a link within the html so it open another local file within the nativescript app? For example: < a href="~/stuff/foo2.html">here< /a >, but didn't work (where stuff is under my "app" folder) but I am getting a 404.
Here's a possible solution.
Add some front end Javascript code to the page displaying in your WebView. Use that Javascript to detect taps on the page and when tapped redirect the WebView to a new (fake) page. On the NativeScript side, listen to the loadStartedEvent of the WebView (firing when the WebView navigates) and do something when the WebView tries to navigate to that new fake page.
I'd look something like this:
In the browser/WebView code. We add an event listener for click events (you probably want to change this to tap events). When clicked navigate the user to nativescript://{X coordinate}/{Y coordinate}.
window.addEventListener('click', function(event){
window.location.href='nativescript://' + event.screenX + '/' + event.screenY;
})
Then on the NativeScript side, set up an event listener listening for when the WebView is navigating and if it's navigating to a URL starting with 'nativescript://' then stop the loading event and extract the coordinates from the URL.
var wv = new webViewModule.WebView();
wv.on(webViewModule.WebView.loadStartedEvent, function(event) {
// Check if the WebView is trying to navigate to 'nativescript://...'
if (event.url.indexOf('nativescript://') === 0 ) {
// Stop the loading event
if (ios) {
event.object.ios.stopLoading();
} else if (android) {
event.object.android.stopLoading();
}
// Do something depending on the coordinates in the URL
var coords = event.url.split('/');
coords.splice(0, 2);
console.log(coords[0] + ' - ' + coords[1])
}
});
As for loading local file, you just need to create a file:// path to the local file. E.g.
var linkPath = fs.path.join(fs.knownFolders.currentApp().path, 'localHTMLFiles') + '/myFile.html';
var link = '<a href="file://" + linkPath + ">"'
You can extend WebView to WebViewExt https://market.nativescript.org/plugins/#nota%2Fnativescript-webview-ext and grab links with
webview.on(WebViewExt.shouldOverrideUrlLoadingEvent, (_args: ShouldOverrideUrlLoadEventData) => {
let blocked_url = _args.url;
// Disable loading native app
_args.cancel = true;
// Do some stuff and load another url..
});
Is there some way to replace the default toolbar images (e.g. Bold, Italic, etc.) with Font Awesome icons?
I know this is an old issue, but on a plugin by plugin basis I've been able to add font-awesome icons to ckeditor buttons with the following code inside the plugin's init function. In my case my plugin was called trim:
//Set the button name and fontawesome icon
var button_name = 'trim';
var icon = 'fa-scissors';
//When a ckeditor with this plugin in it is created, find the button
//in the current instance and add the fontawesome icon
CKEDITOR.on("instanceReady", function(event) {
var this_instance = document.getElementById(event.editor.id + '_toolbox');
var this_button = this_instance.querySelector('.cke_button__' + button_name + '_icon');
if(typeof this_button != 'undefined') {
this_button.innerHTML = '<i class="fa ' + icon + '" style="font: normal normal normal 14px/1 FontAwesome !important;"></i>';
}
});
It hinges on knowing the class of the span inside the button, so it might not be the most convenient but it works.
The best thing is you can use Bootstrap theme on CKEditor or you can use Froala editor,It has inbuilt image uploader
Just to get you up to speed, I have set-up my CKEditor instance so that when viewing the WYSIWYG (live) mode [image:abc123] is replaced with the actual URL to the image.
So for example in the HTML source view, you see this:
<img src="[image:abc123]" />
But when you view the WYSIWYG (live) mode, it shows this:
<img src="/file/image/abc123" />
This is all working great. An issue I am now having is when you edit the image in Image properties. As the image does not exist, it show's the red x.
http://img405.imageshack.us/img405/104/jzny.png
My question is, is there a way to customise the Image Properties dialog so that if it matches [image:abc123], it loads a different image URL in the Preview window?
This code doesn't work but might make it a little clearer what I'm trying to achieve here.
CKEDITOR.on('dialogDefinition', function(evt) {
if (evt.data.name == 'image') {
var image_url = ???;
var preview_image = ???;
var file_id = image_url.value.match(/\[image:([a-zA-Z0-9-]+)\]/);
if (file_id)
preview_image.src = '/file/image/' + file_id[1];
}
});
Thanks in advance!
I am developing an extension for Firefox that needs to open a standard Javascript popup window that can be a custom size. I have looked all around and I can't seem to figure out how to do it. My code for a contextual menu works good, but it seems like Firefox is blocking the window.open snippet needed to accomplish this.
Is there a way todo it via XUL, or any other SDK modules?
We need a bit more details, here's what I think you're going for.
require("sdk/context-menu").Item({
label: "Open Window",
contentScript: 'self.on("click", function (node, data) {' +
' window.open("http://stackoverflow.com/questions/14572412/how-to-open-a-popup-window-via-firefox-addon-contextual-menu");' +
'});'
});
This code would open up a new window (or tab) when the user clicks on the Open Window item. The window.open function works in this context but I'm not sure what context you're not seeing it work in.
Hope this helps you.
If you want open not a popup window but panel, here's an example:
var self = require("sdk/self");
var panels = require("sdk/panel");
var panel = panels.Panel({
contentURL: self.data.url("panel.html")
// , onHide: handleHide
});
require("sdk/context-menu").Item({
label: "Open Window",
contentScript: 'self.on("click", function (node, data) {' +
' self.postMessage(node.innerHTML);' +
'});',
onMessage: function (data) {
console.log('posted retrieved: '+data);
panel.show();
}
});
And some reference
You can also use:
`<popupset>
<panel id="some">
</panel>
<popupset>`
In the JavaScript write:
document.getElementById('some').openPopup(...)