I have a main window (app.js) and two sub-windows (login.js and signUp.js)
Here is my app.js
var login=Titanium.UI.createWindow({
url:'wins/login.js',
title:'Login',
backgroundColor:'#CCC',
navBarHidden:true
});
var signUp=Titanium.UI.createWindow({
url:'wins/signUp.js',
title:'Sign-up',
backgroundColor:'#CCC',
navBarHidden:true
});
login.open({fullscreen:true});
Now I want to open signUp.js from with login.js. Is there any way to do this? I've tried googling and reading over the documentation to no avail.
just typed this up, not perfect, but this is the general idea.
// create buttons on main window
var loginBtn = Titanium.UI.createButton({
title : 'LOGIN'
});
var signUpBtn = Titanium.UI.createButton({
title : 'SIGN UP'
});
// add to window
mainWindow.add(loginBtn);
mainWindow.add(signUpBtn);
// associate click events
loginBtn.addEventListener('click', function() {
Ti.API.log('loginBtn button clicked, show window');
login.open();
});
signUpBtn.addEventListener('click', function() {
Ti.API.log('signUpBtn button clicked, show window');
signUp.open();
});
Related
I created a dialog in ckeditor.
editor.ui.addButton('blublu',
{
label: 'blublu',
command: 'blublu',
icon: this.path + 'icons/blublu.png'
}
);
editor.addCommand('blublu', new CKEDITOR.dialogCommand('blublu'));
CKEDITOR.dialog.add( 'blublu', this.path + 'dialogs/dialog.js' );
If I press the button the dialog shows, everything is fine. Now I try to open this window from another dialog :
( function() {
CKEDITOR.dialog.add( 'templates', function( editor ) {
return {
title: editor.lang.templates.title,
contents: [...],
onHide: function(){
if(condition)
//dostufff;
this.hide();
editor.execCommand('blublu');
}
}
}
});
It works the first time the editor is loaded. But if I open the dialog from the button in the toolbar, and I close it, I can't open the dialog from the 'templates' dialog. I have the dark background as if a dialog where shown, except the dialog, is not there. It is hidden and just shows it is not enough because all buttons handlers on it don't work.
I have no error in console.
Any solution?
I've tested it with existing plugins and it looks like you need to call execCommand asynchronously with setTimeout.
setTimeout( function() {
execCommand( commandName );
} );
If fix doesn't work for every browser, then you will have to add some short delay. I don't see better solution.
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.
I'm building a simple dialog plugin to replace the default link tool. The design calls for a particular layout that is difficult to achieve with the CKEdit dialog definition: We want a single field to appear above the tab elements in the dialog (see illustration).
Can anyone suggest a way that this might be implemented? Thanks!
As far as I can tell it is not possible to achieve this using the built-in dialog definition.
I was able to get around this limitation by building my dialog plugin using the iframedialog plugin. This basically pops up a CKEditor dialog window and loads an external URL into it. You can do anything you want in that iframe, and then return the text to CKEditor when the user presses the OK button.
A simple example:
// plugins/iframelink/plugin.js
CKEDITOR.plugins.add('iframelink', {
requires: ['iframedialog'],
init: function(editor){
CKEDITOR.dialog.addIframe('iframelinkDialog',
// title
'Insert a Link',
// src
this.path + 'dialogs/link.html',
// minWidth
500,
// minHeight
250,
// onContentLoad
);
var cmd = editor.addCommand('iframelink', {exec: iframelinkOnclick});
editor.ui.addButton('iframelink', {
label: 'Insert a Link (Special Link Tool)',
command: 'iframelink',
icon: this.path + 'images/world_link.png'
});
}
});
function iframelinkOnclick(editor){
dialog = editor.openDialog('msiteslinkDialog');
};
// plugins/iframelink/dialogs/iframelink.js
$(function() {
if (typeof(window.parent.CKEDITOR) != 'undefined') {
CKEDITOR = window.parent.CKEDITOR;
var dialog = CKEDITOR.dialog.getCurrent();
var editor = dialog.getParentEditor();
// Get value of the selected text:
var selection = editor.getSelection().getSelectedText();
// Do something when the user presses the OK button:
var okListener = function(ev) {
link = yourFunctionToDoSomethingClever();
this._.editor.insertHtml(link);
dialog.removeListener("ok", okListener);
};
// Bind the OK button to your okListener method:
dialog.on("ok", okListener);
};
}
So you can make the dialog look any way you want:
I'm trying to create a Firefox add-on using the online Add-On SDK.
I'm starting with something simple - I want to add a toolbar button that reads the current selected text.
The documentation for the Selection object makes this looks simple enough:
var selection = require("selection");
if (selection.text)
console.log(selection.text);
This doesn't seem to work for me, I just get null.
Here's my complete code:
var selection = require("selection");
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('selection.text = ' + selection.text);
}
});
I've also tried to create the selection object inside the onClick even, with the same effect.
I am able to use the select event to get notified on new selections, so I guess I can use that instead (and keep the value), but I wonder why the above code isn't working... What am I doing wrong?
The selection variable as defined will only have the selected text as long as it is in focus. Clicking on the widget icon takes focus away from the selected text, so it sees no text selected.
Thats why it works when used inside the listener function.
To confirm this, I tried logging its value when a toolbar button is pressed (using the toolbarbutton module), and it works. Pressing a toolbar button (presumably) does not steal focus.
Here's the code, and you can test it online too:
var selection = require("selection");
var tbb = require("toolbarbutton").ToolbarButton({
id: "test",
label: "test",
image: "http://www.mozilla.org/favicon.ico",
onCommand: function(event) {
console.log('selection = ' + JSON.stringify(selection)); // works!
}
});
Here is a solution using the select event:
var selection = require("selection");
var selectedText = '';
function selectionChanged(event){
//todo: check for selection.isContiguous
selectedText = selection.text;
}
selection.on('select', selectionChanged);
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('Selection: ' + selectedText);
}
});
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.