How do I store and retrieve a variable from an array using the Firefox Add-on SDK? - firefox

I am attempting to develop a Firefox extension.
I have a simple need. At this time in testing, I simply wish to define an array. When the button is pushed, the Current Window goes to the first URL in the array. When the button is pushed again, it goes to the next URL in the array.
I am of the impression that I need to store the present sequence in the array using simple-storage (ss.storage) yet I cannot make it work. I thought perhaps I could store the sequence information using a Cookie but the Add-on SDK appears to be very stringent. Perhaps there is a far simpler method but I cannot seem to identify what that would be.
Current Status - when the button is pushed, the code opens three separate windows for each URL in the array. If you could please help me to modify this code so that opens one URL from the array each time the button is pushed - as described above.
require("widget").Widget({
id: "view-source-widget",
label: "View Source",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function() {
var arr = new Array("one.com","two.com","three.com");
for(var i=0; i<arr.length; i++) {
var value = arr[i];
var ss = require("simple-storage");
ss.storage.myURL= value;
var windows = require("windows").browserWindows;
windows.open(ss.storage.myURL);
}
}
});

If I understand correctly what you are trying to do - you don't need persistent storage, a normal global variable will do. The global variable indicates the array index at which you are right now. Something like this:
var urls = ["one.com","two.com","three.com"];
var urlIndex = 0;
...
onClick: function() {
var windows = require("windows").browserWindows;
windows.open(urls[urlIndex]);
// Increase index for the next click
urlIndex++;
if (urlIndex >= urls.length)
urlIndex = 0;
}
...

Related

pull of refresh in nativescript

I trying to do pull to refresh but the design I using no fulfill my supervisor. How to this kind pull to refresh in nativescript, now I using this plugin https://www.npmjs.com/package/nativescript-pulltorefresh in my project, and I have not have idea how to do it, can give some advise?
If you want to dinamically load item when needed can use virtual-array module.
Link to documentation examples
Link to documentation info
The idea is that you can createa observable virtual array which has initial size and also loadSize instance property. Then on itemsLoadingEvent you can control the loading of new resources.
var array = new virtualArrayModule.VirtualArray(100);
array.loadSize = 15;
array.on(virtualArrayModule.VirtualArray.itemsLoadingEvent, function (args) {
// Argument (args) is ItemsLoading.
// args.index is start index of the page where the requested index is located.
// args.count number of requested items.
//
// Note: Virtual array will divide total number of items to pages using "loadSize" property value. When you request an
// item at specific index the array will raise "itemsLoading" event with "ItemsLoading" argument index set to the first index of the requested page
// and count set to number of items in this page.
//
// Important: If you have already loaded items in the requested page the array will raise multiple times "itemsLoading" event to request
// all ranges of still not loaded items in this page.
var itemsToLoad = new Array();
for (var i = 0; i < args.count; i++) {
itemsToLoad.push(i + args.index);
}
array.load(args.index, itemsToLoad);
});
More advanced examples for this functionality you can find in this sample app here

Code is not executing after window.load (Javascript)

(sorry for my bad english)
I have a big problem with which I've been beating me for several days but to which I do not find any solution, even while going to excavate very far in subjects on known forums (and less known).
I develop a small application in Javascript which must recover an array of links. I open these links one by one in the same page, and I click on a button (which posts a name), then I check after a small lapse of time that the name is well posted and corresponds to that present on the page (in a fixed div). At this time, I turn over on the basic page, then I start the script again with the second link contained in the array.
The problem is that the code is not carried out anymore after the window.load() function.
I test the code on Google Chrome (in the Javascript console) and it turns over me an error: “Uncaught ReferenceError: init is not defined … onload ".
I hope that you will be able to help me to find how to once carry out the code with the launching of the page it is launched since each bond opens a page in the relationship page.
Before, I had tested in a popup with the function window.open () (without “_parent”) and I wanted to close it thanks to window.close () function, but the code did not include/understand where to act since the remainder of the code was to now deal with the popup and not of the page on which the code was carried out at the beginning.
Here's the code :
//Here i get the links in an array
function recupHref(){
var lesHref = new Array();
var lesLiens = document.getElementsByTagName("a");
for(var i = 0; i < lesLiens.length; i ++)
if(lesLiens[i].parentNode.getAttribute("class") == "pubrhead-text-right")
lesHref.push(lesLiens[i].getAttribute("href"));
return lesHref;
}
var resultat = recupHref(); //I store them in a variable
//The main function which open the links one by one
//The while loop allows us to know if were subscribed or not
var o = function openLinks(){
for(var leIndex = 0; leIndex < resultat.length; leIndex ++){
window.open(resultat[leIndex], "_parent");
//Do i use window.load instead of DOMContentLoaded ?
addEventListener("DOMContentLoaded", function() {
document.getElementById("enbut").click();
var pseudo = document.getElementById("nameho").innerHTML;
var pseudok = document.getElementsByClassName("pname")[0].textContent;
});
while (pseudo === pseudok) {
!(window.open("http://page-with-links.html", "_parent"));
};
}
}
I thank you in advance, and I hope that you will include/understand my problem.
Here is a little draw to explain better than words :
In other words, just what i need is that : store links (done) --> Open the link --> Click on the button (done) --> Check if the 2 names are the same --> Came back to the first page/close popup/ (or go directly to the seconde link in the array) --> do this for the 2nd link, etc, etc.
Good day/evening.

Programatically updating underlying data in Slickgrid

I have 6 textboxes at the top of the screen that update an entire column(one textbox per column) based on any changes. I was selecting the columns based on their class (.l#). Here is the code (issues to follow):
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = [".l1", ".l7", ".l8", ".l9"];
var fields = $(bound[id]);
for (var i = 0; i < fields.length; i++)
{
fields[i].innerHTML = $(ctrl).val();
}
};
which is bound to the keyup event for the text areas. Issues are:
1) initially fields.length was -1 as I didn't want to put data in the "add new
row" section at the bottom. However, when running it, I noticed the
final "real" record wasn't being populated. Also, when stepping through, I
noticed that the "new row" field was before the "last row" field.
2) when doing it this way, it is purely superficial: if I double click the field,
the real data hasn't been changed.
so in the grand scheme of things, I know that I was doing it wrong. I'm assuming it involves updating the data and then forcing a render, but I'm not certain.
Figured out how to do it. Modified the original code this way:
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = ['title1', 'title2', 'title3', 'title4'];
var field = bound[id];
for (var i = 0; i < dataView.getLength(); i++)
{
var item = dataView.getItem(i);
item[field] = $(ctrl).val();
dataView.updateItem(i, item);
}
grid.invalidate();
};
I have 6 textboxes (item1-item6) that "bind" to fields in the sense that if I change data in a textbox, it updates all of the rows and any new rows added also have this data.
Parts where the two issues can be explained this way:
1) to work around that, though still it would be a presentational fix and not a real updating of the underlying data, one could force it to ignore if it had the active class attached. Extra work, and not in the "real" direction one is going for (masking the field).
2) It was pretty obvious with the original implementation (though it was all I could figure out via Chrome Dev Tools that I could modify at the time) that it was merely updating a div's content and not actually interacting with the data underneath. Would look nice, and perhaps one could just pull data from the item1-item6 boxes in place of the column if it is submitted, but if someone attempts to modify the cell, they'll be looking at the real data again.

Unable to create accurate copy of a Kinetic.js stage / layer

I'm trying to build in a change history, rather than a diff style history, I've opted to save the entire object.
This becomes problematic because each copy of the object updates along side the original object.
The Kinetic.Node.clone method seemed like the right thing for me, but it doesn't seem to do what I expect it to do.
Pseudocode:
var History = function(){
var h = this;
h.history = [];
h.pointer = -1;
h.save = function() {
h.history = h.history.slice(0,h.pointer);
h.history.push(im.Stage.createCopy());
h.movePointer(1);
};
h.movePointer = function(diff) {
h.pointer += diff;
(h.pointer < 0 && (h.pointer = 0));
(h.pointer >= h.history.length && (h.pointer = h.history.length-1));
return h.pointer;
};
h.render = function() {
im.Stage = h.history[h.pointer].createCopy();
im.Stage.draw();
};
h.undo = function() {
h.movePointer(-1);
h.render();
};
h.redo = function() {
h.movePointer(1);
h.render();
};
};
How can I create an accurate copy of the stage?
The best method to build up a history system is to store your layers/elements after each operation into an array as serialized values, using layer.toJSON() .
If you use images on layers and eventhandlers that you want to display/work after you restore anything from the history then you will have to reattache images and eventhandlers to the objects/layers/etc because toJSON() does not store images and eventhandlers as it would have been too large data stored. Build up your history like this:
first, try to use projeqht's answer on this question .
second you will have to reattach the images and eventhandlers. With a trick given by markE on this question you can easily handle it.
The best thing for an accurate representation is to do:
var layers = stage.getChildren();
to get the layers. Then do:
var layerChildren = new Array();
for(var i=0; i<layers.length; i++)
layerChildren[i] = layers.getChildren();
each time you want to save a state.
This will store all your layers and their children in an array. Fairly efficient and accurate.
Now you just have to save the list of layers and list of children somewhere and then you can move back and forth between states.

Greasemonkey script to find rows with certain conditions

I tried some different ways do find rows in a table where a columns contain a particular link.
My goal: replace an icon when a link to xyz is in this same row as the image.
This is my snippet so far:
var rows = document.getElementsByTagName("tr");
for(var i = rows.length - 1; i >= 0; i--) {
var links = rows[i].getElementsByTagName("a");
for(var k = links.length - k; k >= 0; k--) {
if (links[k].href =="http://www.XXXX.net/forum/index.php?showforum=121"){
var images = rows[i].getElementsByTagName("img");
for (var j=0;j<images.length;j++) {
images[j].src = "http://www.XXXX.net/forum/folder_post_icons/icon7.gif";
}
}
}
}
I'm pretty sure this is not really the best concept. But as you might see I try to search links in all rows and once the link to forum "121" is found, I try to replace all images in this particular row.
What I get is every image at the site getting replaced.
Since it's simple enough, here's a complete script that does that.
It uses jQuery and here's a handy jQuery reference. See, especially, the Selectors section (which are almost the same as CSS Selectors).
Re: "What I get is every image at the site getting replaced." ...
This maybe because the search criteria is too broad. If it's a poorly designed (uses table layouts) page, every image may be in a table row with a target link!
When posting Greasemonkey questions, link to the target page, or at the very minimum, post enough of the page's HTML that we can adjust the GM script to match.
Anyway, this will work, possibly pending more information about the target page:
// ==UserScript==
// #name _Replace image on custom-targeted row
// #include http://www.XXXX.net/forum/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==
//--- This may need tuning based on information not provided!
var targetLinks = $("tr a[href*='showforum=121']");
//--- Loop through the links and rewrite images that are in the same row.
targetLinks.each ( function () {
//--- This next assumes that the link is a direct child of tr > td.
var thisRow = $(this).parent ().parent ();
//--- This may need tuning based on information not provided!
var images = thisRow.find ("td img");
//--- Replace all target images in the current row.
images.each ( function () {
$(this).attr (
'src',
'http://www.XXXX.net/forum/folder_post_icons/icon7.gif'
);
} );
} );

Resources