I am using titanium to make a small app where i can click on a 'gallery' button located in a window and it opens photogallery. On selecting the photo it should move to next window. But what it does is, it closes the photogallery first, after that i can see my first(button) screen and then it opens the next window.
I dont want it to show the previous window. Is there a way to do it??
I am adding windows to tabs . Below is my code .
cameraButton.addEventListener('click',function(e){
chooseImageFromGallery();
});
function chooseImageFromGallery(){
var capturedImg;
//TODO Titanium.Media.showCamera({
Titanium.Media.openPhotoGallery({
success : function(event) {
capturedImg = event.media;
/* Condition to check the selected media */
if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
var window1 = MyWindows.init(capturedImg, docImgModel, previous_win);
MyCommon.addWindowToTabGroup(window1);
win.close();
}
},
cancel : function() {
//While cancellation of the process
activityInd.hide();
win.remove(activityInd);
},
error : function(error) {
/* called when there's an error */
var a = Titanium.UI.createAlertDialog({
titleid : 'camera'
});
if (error.code == Titanium.Media.NO_CAMERA) {
a.setMessage(L('camera_not_available'));
} else {
a.setMessage('Unexpected error: ' + error.message);
}
a.show();
activityInd.hide();
win.remove(activityInd);
}
});
}
The init method just creates a new window and returns it .
The addWindowToTabGroup method adds it to the current tab
addWindowToTabGroup(window){
// tabGroup is a tab at global level declared in app.js
// activeTab returns the current tab
tabGroup.activeTab.open(window, {
animated : true
});
}
Thanks a lot ....
You can do it this way:
1- on button click fire a global event which will open your photo gallery and then close your current window.
2- Now in success call back of photo gallery (when photo is selected) write you code of opening the new window you want to show your user ...
Related
I am trying to load content script from the background one. the execute function works in the icon click block, but i can't trigger the auto load part
var toggle = false;
//Works
chrome.browserAction.onClicked.addListener(function(tab) {
toggle = !toggle;
if (!toggle){
chrome.browserAction.setIcon({path: "enabled.png"});
}else{
chrome.browserAction.setIcon({path: "disabled.png"});
chrome.tabs.executeScript(null, { file: "script.js" });
// chrome.tabs.executeScript({file : "script.js"});
}
});
//Doesn't work
chrome.tabs.onUpdated.addListener(function(tab) {
chrome.tabs.executeScript(null,{
file: 'script.js'
});
});
The activeTab permission only grants access to to the currently active tab when the user invokes the extension - for example by clicking its browser action.
If you want to execute a script on any arbitrary tab without user intervention, then you'll need the <all_urls> permission.
My Chrome extension has a page that is seen in a popup or as a separate tab. When it seen as a separate tab, I need to show a small button at the corner of the page. But I couldn't find a way to detect when a page is loaded in its own tab.
Use chrome.extension.getViews, which returns an array of window objects.
var tabs = chrome.extension.getViews({ type: "tab"})
if(tabs[0]) {
console.log("inside tab")
}
var popups = chrome.extension.getViews({ type: "popup"})
if(popups[0]) {
console.log("inside popup")
}
Or chrome.tabs.getCurrent, which returns a tab object in the callback.
chrome.tabs.getCurrent(function(tab) {
if(tab) {
console.log("inside tab")
} else {
console.log("inside popup")
}
})
How can I modify popup page DOM from any listener from background script?
Two approaches.
1) Send a message to the popup script with instruction on how to update the view.
// background.js
chrome.runtime.sendMessage({updatePopup: true, update: "this", data: "that"});
// popup.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(message.updatePopup) {
switch(message.update) {
/* ... */
case "this":
document.getElementById("this").value = message.data;
/* ... */
break;
/* ... */
}
}
});
Has an added benefit of not caring whether the popup is actually opened: the message will be sent out, and worst case no-one will act on it.
2) Obtain direct access to the window object.
// background.js
// A rare case of a synchronous API..
var windows = chrome.extension.getViews({type : "popup"});
if(windows) { // If popup is actually open
var popup = windows[0]; // This is the window object for the popup page
popup.document.getElementById("this").value = "that";
/* ... */
}
I'm trying to pass the active dom element when the contextmenu is clicked from my background script to a script that is being called through chrome.tabs.executeScript. I can pass booleans and strings just fine, but i always get an error when i pass dom elements. I'm starting to think it's not possible.
//doScripts function called from browser action
chrome.browserAction.onClicked.addListener(function(tab) {
doScripts(true, null);
});
//doScripts function called from context menu click
function getClickHandler(info, tab) {
var currTarg = document.activeElement;
console.log("currTarg = " + currTarg);
doScripts(false, currTarg);
}
//i reference doingBrowserAction and contextTarg in myscript.js
function doScripts(context, targ){
chrome.tabs.executeScript(null, {code: "var doingBrowserAction = "+context+"; var contextTarg = "+targ+";"}, function(){
chrome.tabs.executeScript(null, {file: "js/myscript.js"}, function(){
//all injected
});
});
}
//setup context menu
chrome.contextMenus.create({
"title" : "DESTROY!",
"type" : "normal",
"contexts" : ["page","selection","link","editable","image","video","audio"],
"onclick" : getClickHandler
});
i reference doingBrowserAction and contextTarg in myscript.js. I know what i'm trying to do is possible because the adblock extension does it, but having a hard time figuring out how. thanks in advance.
You cannot get a direct reference to a content script's DOM element from the background page, because the background page runs in the extension's process, and the content script runs in the tab's process. See also https://code.google.com/p/chromium/issues/detail?id=39507.
The document.activeElement property in the background page refers to the active element in the background page's document. As you can imagine, this value is quite useless.
If you query the state of the currently right-clicked element, bind an event in the content script. In the next example, I've chosen the contextmenu event, because context menus can also be opened through the keyboard.
This example adds a context menu option that removes the last active element from the document.
// content script
var lastElementContext;
document.addEventListener('contextmenu', function(event) {
lastElementContext = event.target;
}, true);
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (lastElementContext && lastElementContext.parentNode) {
lastElementContext.parentNode.removeChild(lastElementContext);
lastElementContext = null;
}
});
Background script:
chrome.contextMenus.create({
title: 'DESTROY!',
contexts: ['page', 'link', 'editable', 'image', 'video', 'audio'],
onclick: function(info, tab) {
chrome.tabs.sendMessage(tab.id, 'doDestroy');
}
});
First of all, I'm not sure if my title describes the problem correctly... I did search but didn't find anything that helped me out...
The project I'm working on has an #orderList. All orders have a delete option. After an order gets deleted the list is updated.
Sounds simple... I ran into a problem though.
/**
* Data returned at the end of selecting some options
*/
$.post(myUrl, $('#myForm').serialize(), function(data) {
// I build the orderlist
// The data returned is a JSON object holding session data (including orders)
buildOrderList(data);
...
// Do some other work
});
/*
* function to build the html list
*/
function buildOrderList(data) {
// Empty list
$('#orderList').empty();
// The click handler for the delete button is in here because it needs the data object
$(document).on('click', '[id^=delete_]', function() {
// Get the orderId from the delete button
var orderId = $(this).attr('id').split('_');
orderId = orderId['1'];
// I call the delete function
deleteOrder(orderId, data);
});
var html = '';
// Loop the data object
$.each(data, function(key,val){
...
// Put html code needed in var html
...
});
$('#orderList').append(html);
}
/*
* function to delete an order
*/
function deleteOrder(orderId, data) {
// Because of it depends on other 'products' in the list if the user can
// simply delete it, I use a jQuery dialog to give him some options.
// These options I send to a php script so it knows what should be deleted.
// This fires when a user clicks on the 'delete' button from a dialog.
// The dialog uses data to show options but does not change the value of data.
switch(data.type) {
case 'A':
delMsg += '<p>Some message for case A</p>';
delMsg += '<select>with some options for case A</select>';
$('#wizard_dialog').append(delMsg);
$('#wizard_dialog').dialog('option', 'buttons', [
{ text: "Delete", click: function() {
$.post(myUrl, $('#myDeleteOptions').serialize(), function(newData) {
// Now the returned data is the updated session data
// So I build the orderList again...
buildOrderList(newData);
...
// Do some other work
});
$( this ).dialog( "close" );
$(this).html(''); }},
{ text: "Cancel", click: function() { $( this ).dialog("close"); $(this).html(''); }}
] );
break;
case 'B':
// Do the same thing but different text and <select> elements
break;
}
}
The orderList updates correctly, however if I try to delete another order, the jQuery dialog gives me the option for the current (correct product) AND the option for the product that previously owned the id of the current. (Hope I didn't loose anyone in my attempt to explain the problem)
The main question is how to 'refresh' the data send to buildOrderList.
Since I call the function in a new $.post with fresh data object returned it should work, shouldn't it?
/**
* Enable the JQuery dialog
* (#wizard_dialog)
* this is the init (note that I only open the dialog in deleteOrder() and set text and buttons according to the data send to deleteOrder() )
*/
$('#wizard_dialog').dialog({
autoOpen: false,
resizable: false,
modal: true,
dialogClass: "no-close",
open: function() {
$('.ui-dialog-buttonpane').find('button:contains("Annuleren")').addClass('cancelButtonClass');
$('.ui-dialog-buttonpane').find('button:contains("Verwijderen")').addClass('deleteButtonClass');
$('.ui-dialog :button').blur(); // Because it is dangerous to put focus on 'OK' button
$('.ui-widget-overlay').css('position', 'fixed'); // Fixing overlay (else in wrong position?)
if ($(document).height() > $(window).height()) {
var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
$('html').addClass('noscroll').css('top',-scrollTop); // Prevent scroll without hiding the bar (thus preventing page to shift)
}
},
close: function() {
$('.ui-widget-overlay').css('position', 'absolute'); // Brake overlay again
var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll'); // Allow scrolling again
$('html,body').scrollTop(-scrollTop);
$('#wizard_dialog').html('');
}
});
EDIT:
Because the problem could be in the dialog I added some code.
In the first code block I changed deleteOrder();
ANSWER
The solution was rather simple. I forgot to turn the click handler off before I added the new one. This returned the previous event and the new event.
$(document).off('click', '[id^=delete_]').on('click', '[id^=delete_]', function() {
// Get the orderId from the delete button
var orderId = $(this).attr('id').split('_');
orderId = orderId['1'];
// I call the delete function
deleteOrder(orderId, data);
});