Panel Size is fixed in SDK-based Add-on
I want to change the size of panel automatically like chrome dictionary extension here
If you will search in panel it will show big and small data like content requirement.
In Mozilla panel we can fix only 1 type of size like width:400px and height:400px etc. but i want that panel size should based on data size means like chrome extensions.
You can implement this in the Add-on SDK with a little extra code.
In main.js:
var panel = require("panel").Panel({
contentURL: "https://bugzilla.mozilla.org/enter_bug.cgi?product=Add-on%20SDK",
onShow: function() {
let worker = tabs.activeTab.attach({
contentScriptFile: [
data.url('windowsize.js')
]
});
worker.port.on('winsize', function(data) {
panel.resize((data.width-120), (data.height-120));
});
worker.port.emit('fetchwinsize');
}
});
In the content script:
self.port.on('fetchwinsize', function() {
self.port.emit("winsize", {height: window.innerHeight, width: window.innerWidth});
});
Here's a working example of this:
https://builder.addons.mozilla.org/package/150225/latest/
Related
I'm new to React and want to understand the right way to handle the following scenario.
Say, I have three React components which are essentially siblings i.e. not nested within each other.
All three components need to know the screen resolution of the user and this resolution may change. For example, the user may set the browser window to a smaller size. Essentially, the view port is in a dynamic state.
I don't want to put the view port detection logic into each component which would produce repetitive code. How do I create a common function that is responsible for view port detection and pass this information to each component?
In the following code sample, I have three components that work independently of each other but they'll all need view port information. What's the right way to handle this?
<div id="navigationHere"></div>
<div id="doSomethingHere"></div>
<div id="handleSomethingElseHere"></div>
<script src="nav.jsx" type="text/jsx"></script>
<script src="doSomething.jsx" type="text/jsx"></script>
<script src="handleSomethingElse.jsx" type="text/jsx"></script>
By the way, I'm using this inside an ASP.NET MVC application and thinking about using ReactJs.Net to handle initial state and pre-rendering on the server side. So, it's important for me to understand the right way to handle this within the context of an ASP.NET MVC application.
This is a good use case for what are known as a higher order components.
First off we define a parent component that keeps track of the screen resolution.
var ViewportManager = React.createClass({
getInitialState: function() {
return this.measureViewport();
},
componentWillMount: function() {
window.addEventListener('resize', this.onResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.onResize);
},
onResize: function() {
this.setState(this.measureViewport());
},
measureViewport: function() {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
});
Once this component is mounted it will keep track of the size of the screen, updating each time the browser window is resized. What we need to do now is pass these values down to any components rendered inside of this one.
<ViewportManager>
<NavigationHere />
<DoSomethingHere />
<HandleSomethingElseHere />
</Viewport>
We'll pass down viewportHeight and viewportHidth to each of the inner components.
var ViewportManager = React.createClass({
// ...
render: function() {
var viewportWidth = this.state.width;
var viewportHeight = this.state.height;
var children = this.props.children;
var additionalProps = {
viewportWidth: viewportWidth,
viewportHeight: viewportHeight
};
var modifiedChildren = React.Children.map(children, function(child) {
return React.cloneElement(child, additionalProps);
});
return (
<div className='viewport-manager'>
{{ modifiedChildren }}
</div>
);
}
});
Now all of the components directly inside your ViewportManager will receive two additional props.
var NavigationHere = React.createClass({
render: function() {
// I can see this.props.viewportWidth
// and this.props.viewportHeight
}
});
How can i implement lazy loading in mobile jquery lisview widget?
can anybody give a example using static data in json format binding to jquery mobile listview widget?
Thank you.
There are a few ways, The following two ways work great
JQM way, a great tutorial. It detects when you scrolled to the bottom of the listview and loads more items to list
http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/
Demo
http://jsfiddle.net/Palestinian/pAgbT/light/
Another way is to use Iscroll 5 plugging. Similarly you can setup a function to detect when you scrolled to the bottom of the list and load new items
http://iscrolljs.com/
Demo I placed the whole Iscroll 5 plugging in the demo so scroll down to //// JQM STUFF to see the actual code
Some of the JQM code e.g trigger create is depreciated in JQM 1.4 so some modifications are needed above > 1.4 for it work.
http://jsfiddle.net/t0t3Lz5x/
var myScroll;
$(document).ready(function(){
myScroll = new IScroll('#wrapper',
{
scrollX: false,
scrollY: true
,click:true // open click event
,scrollbars: false
,useTransform: true
,useTransition: false
,probeType:3,
mouseWheel:true,
bindToWrapper: true
});
});
function initscroll() {
setTimeout(function () {
myScroll.refresh();
}, 1000);
}
output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>';
$('#listview').html(output).listview().listview('refresh');
initscroll()
myScroll.on('scrollEnd', function() {
if (this.y == this.maxScrollY)
load_new_items();
});
function load_new_items() {
mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>');
mysearchlist.appendTo("#listview").trigger('create');
$('#listview').listview().listview('refresh');
initscroll()
}
There is one more way using the Jquery's on scroll function to monitor the height of the list and then as you scroll measure the pixels you scrolled from the top of the list. When both match you can run a function to append more items in the list
I created a plugin with a custom dialog window.
CKEDITOR.plugins.add('imggallery',
{
init: function (editor) {
var pluginName = 'imggallery';
editor.ui.addButton('Image',
{
label: 'Add image',
command: 'OpenWindow',
icon: CKEDITOR.plugins.getPath('imggallery') + 'lightbulb.gif'
});
editor.addCommand('OpenWindow', new CKEDITOR.dialogCommand('simpleLinkDialog'));
var html2 = "<h1>This is a heading</h1>";
CKEDITOR.dialog.add('simpleLinkDialog', function (editor) {
return {
title: 'LinkProperties',
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'general',
label: 'Settings',
elements:
[
{
type: 'html',
html: html2
}
]
}
]
};
});
}
});
My question is: Is it possible to somehow display ASP.MVC view in window content?
When I assign html2 to elements property the text is shown without formatting (plain text).
Are you sure it's plain text and not a H1 tag that is formatted to look like plain text? There's a big difference :). The CKE dialogs reset most of the standard browser styles so that elements appear like plain text, even though they are not.
As for the MVC view, I would recommend that you add an iframe within the CKE dialog and display the page normally there. Then you can control or get/set values from the iframe using JavaScript. It will be a bit tricky, but should work.
var html2 = '<iframe id="DialogIframe" src="/MyController/MyView?foo=bar"></iframe>';
The other option is to use something like jQuery to $.get() the HTML and then use it, should be relatively simple if you have worked with ajax before. If not, here's a good chance to start! :)
Chrome has something called "Page Actions", and I'm roughly trying to replicate that functionality with the Firefox Addon SDK/Jetpack. There's probably a better approach than what I've tried so far, and I'm open to suggestions.
Using tabs, I'm able to listen for tab ready and activate events, and if the tab's URL matches, the addon widget should be enabled; if not, disabled. I've got to the point where I can change the icon when appropriate, but I'd like to disable the panel as well.
Strategy 1: Steal the click event and only show the panel if we're on the right page; otherwise, ignore. Problem is, according to the docs, manually showing the panel causes it not to be anchored, a bug that's not had much progress on it.
Strategy 2: Set the contentURL to null when disabling. Get an error whining about it not being an URL.
Strategy 3: Use a different HTML document for the disabled state. Setting panel.contentURL to another URL doesn't work after going to a different page?
Here's the code:
const widgets = require("widget");
const Panel = require("panel").Panel;
const tabs = require("tabs");
const data = require("self").data;
const prefs = require("simple-prefs").prefs;
var panel = Panel({
width: 480,
height: 640,
contentURL: data.url("panel.html"),
contentScriptFile: [data.url('jquery.min.js'), data.url('panel.js')],
onMessage: function (msg) { console.log(msg) }
});
var widget = widgets.Widget({
id: "icon",
label: "Export",
contentURL: data.url("icon.png"),
panel: panel
});
function enable() {
widget.contentURL = data.url('icon.png');
panel.contentURL = data.url("panel.html");
}
function disable() {
widget.contentURL = data.url('icon_disabled.png');
panel.contentURL = data.url("panel_disabled.html");
}
function on_change_tab(tab) {
console.log(tab.url);
if (/http:\/\/example.com\/.*/.exec(tab.url)) {
console.log('ENABLE');
enable();
} else {
console.log('DISABLE');
disable();
}
console.log(panel.contentURL);
}
tabs.on('ready', on_change_tab);
tabs.on('activate', on_change_tab);
Related, but should have the anchoring problem? How to reload a widget popup panel with firefox addon sdk?
In case you still haven't solved your issue (and for anyone else having a similar problem):
I had a similar issue and resolved it by using erikvold's ToolbarButton package. Once you've installed that and its dependencies, something like this in your main.js file should work.
var pan = require("panel").Panel({
width: 400,
height: 600,
contentURL: "http://stackoverflow.com"
//maybe some more options here
});
var button = require("toolbarbutton").ToolbarButton({
id: "myButton",
label: "My Button",
image: data.url("someicon.png"),
panel: pan //This binds the panel to this toolbarbutton
});
I hope you can find some way to adapt this to your project.
toolbarbutton.ToolbarButton({
id: "MyAddon",
label: "My Addon",
tooltiptext: "My Addon Tooltip",
image: data.url("logo.png"),
onCommand: function() {
var dictionary_panel = require("panel").Panel({
width:630,
height:600,
contentURL: data.url("HtmlPage.html"),
contentScriptWhen: 'ready',
contentScriptFile: [data.url("style.css"),data.url("jquery-1.7.1.js"),
data.url("javascriptquezz.js"),data.url("create.js")]
});
dictionary_panel.show();
}
});
So I created a Widget that the user clicks on and it opens up a Panel, I have a couple of Questions about the panel.
How Do I style the Panels borders, background color, etc..? I'm including an HTML file in it's contentURL, can I add CSS to alter it? If so how do I select it via CSS?
I also want to add a Close Button and keep the panel open always unless they click the close button.
On second thought, for the Add-on i'm trying to program it might be better if I make a window, is a window pretty stylable so I can make it look cooler?
Thanks for any help.
I don't think you can style panel borders. The panel border styles depend on the operating system and you cannot touch them. You can only really influence the inner area of the panel, effectively you get an iframe inside the panel that you can play with. E.g. to change the background your panel can contain:
<style type="text/css">
html
{
background-color: red;
}
</style>
You cannot, the panel is not a real HTML object, but a XUL window with an iframe or HTML inside.
I believe since Firefox 30 you can access to this object, you can read:
Avoid panel to autoHide in Firefox extension
Of course it's a kind of hack, looks like Mozilla is not really "open" ^^
I was able to modify the border of the panel:
/*run this first*/
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
level: 'top',
style: 'padding:15px; margin:0; width:150px; height:200px; background-color:steelblue;border-radius:15px'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);
So if you know the panel of your id just do this:
var sss = Cc['#mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var css = '';
css += '#YourPanelIdHere { border-radius:15px; opacity:.5; border:1px solid red; }';
var cssEnc = encodeURIComponent(css);
var newURIParam = {
aURL: 'data:text/css,' + cssEnc,
aOriginCharset: null,
aBaseURI: null
}
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);
//sss.unregisterSheet(cssUri, sss.USER_SHEET);
That will style your panel. You don't have to use panel id in the style sheet, just anything that target your panel will do.