In the Javascript for a Firefox extension, you can call gBrowser.getBrowserForTab but there is no gBrowser.getTabForBrowser. So I wrote my own and it works, and I'm just curious if there's any reason I shouldn't be doing this, or if there's anything wrong with the code. The following is in my init method that gets called when the window loads.
gBrowser.getTabForBrowser = function(browser) {
for (var i=0; i<gBrowser.browsers.length; i++) {
if (gBrowser.getBrowserAtIndex(i) === browser) {
return gBrowser.tabContainer.getItemAtIndex(i);
}
}
return null;
}
(or should it be gBrowser.prototype.getTabForBrowser = ...?)
Far as I know there is no built in getTabForBrowser function, so you would have to roll your own. However, your code assumes that browser nodes are stored in the same DOM order as tab nodes. I can't say for sure if this assumption is ever broken, but considering tabs can be re-positioned by the user arbitrarily, it is not something I'd rely on.
Fortunately, each tab object has a linkedBrowser property. So you could rewrite your code like so:
gBrowser.getTabForBrowser = function(browser) {
var mTabs = gBrowser.mTabContainer.childNodes;
for (var i=0, i<mTabs.length; i++) {
if (mTabs[i].linkedBrowser == browser) {
return mTabs[i];
}
}
return null;
}
Related
I need to prevent/disable nested lists in text editor implemented in Angular. So far i wrote a hack that undos a nested list when created by the user. But if the user creates a normal list and presses the tab-key the list is shown as nested for a few milliseconds until my hack sets in back to a normal list. I need something like event.preventDefault() or stopPropagation() on tab-event keydown but unfortunately that event is not tracked for some reason. Also the froala settings with tabSpaces: falseis not showing any difference when it comes to nested list...in summary i want is: if the user creates a list and presses the tab-key that nothing happens, not even for a millisecond. Has anyone an idea about that?
Froala’s support told us, there’s no built-in way to suppress nested list creation. They result from TAB key getting hit with the caret on a list item. However we found a way to get around this using MutationObserver
Basically we move the now nested list item to his former sibling and remove the newly created list. Finally we take care of the caret position.
var observer = new MutationObserver(mutationObserverCallback);
observer.observe(editorNode, {
childList: true,
subtree: true
});
var mutationObserverCallback = function (mutationList) {
var setCaret = function (ele) {
if (ele.nextSibling) {
ele = ele.nextSibling;
}
var range = document.createRange();
var sel = window.getSelection();
range.setStart(ele, 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
};
var handleAddedListNode = function (listNode) {
if (! listNode.parentNode) {
return;
}
var parentListItem = listNode.parentNode.closest('li');
if (!parentListItem) {
return;
}
var idx = listNode.children.length - 1;
while (idx >= 0) {
var childNode = listNode.children[idx];
if (parentListItem.nextSibling) {
parentListItem.parentNode.insertBefore(childNode, parentListItem.nextSibling);
} else {
parentListItem.parentNode.appendChild(childNode);
}
--idx;
}
setCaret(parentListItem);
listNode.parentNode.removeChild(listNode);
};
mutationList.forEach(function (mutation) {
var addedNodes = mutation.addedNodes;
if (!addedNodes.length) {
return;
}
for (var i = 0; i < addedNodes.length; i++) {
var currentNode = addedNodes[i];
switch (currentNode.nodeName.toLowerCase()) {
case 'ol':
case 'ul':
handleAddedListNode(currentNode);
break;
// more optimizations
}
}
})
};
I need to load more items as soon as the user scroll to the end of my list view.
I tried to use the microsoft sample : http://code.msdn.microsoft.com/windowsapps/ListView-loading-behaviors-718a4673/view/SourceCode (scenario 2) but it seams that list view have not the same behavior in windows phone 8.1.
When I run the sample I can see that only viewable contents are loaded (eg 5items of 50).
But for windows phone it does load all items.
I use this code :
listView.winControl.itemTemplate = this.incrementalTemplate;
incrementalTemplate: function (itemPromise, recycledElement) {
if (!recycledElement) {
recycledElement = document.createElement('div');
}
var renderComplete = itemPromise.then(function (item) {
console.log(item.index);
itemTemplate.winControl.render(item.data, recycledElement);
return item.ready;
}).done(function (item) {
console.log("clp"+item.index);
});
return { element: recycledElement, renderComplete: renderComplete };
},
Items are loaded asynchronusly. I can see in my console that it print 50 times the index and 50times the clp+index. Even if my list just show 5 items at a time.
Also it seems that my listview never fired the loading state event
listView.addEventListener("loadingstatechanged", function (args) {
//never fired
}, false);
The listview is in a hub, the solution was to add an onscroll event on the win pivot item:
document.querySelector(".win-pivot-item-content").onscroll = function () {
if (self.scrollAtBottom(this) === true) {
//load more
}
};
scrollAtBottom : function(element){
return element.scrollHeight - element.scrollTop === element.clientHeight
},
If you want to subscribe to event when the ListView was scrolled, you can take ListView's Scrollviewer and subscribe to ViewChanged event. The only problem is that I do not know how it would look like in winjs, in C# it can look like that:
// method to pull out a ScrollViewer
public static ScrollViewer GetScrollViewer(DependencyObject depObj)
{
if (depObj is ScrollViewer) return depObj as ScrollViewer;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
var child = VisualTreeHelper.GetChild(depObj, i);
var result = GetScrollViewer(child);
if (result != null) return result;
}
return null;
}
// subscription:
GetScrollViewer(yourListView).ViewChanged += yourEvent_ViewChanged;
Maybe it will help.
The comment voted here as solution does not work just like that out the box, however I found a solution to this problem starting from that.
See my first answer on the issue I opened at https://github.com/winjs/winjs/issues/690#issuecomment-61637832 (includes code snippet)
I have an url (e.g. http://localhost/Aanbod/Pagina.aspx) and I want to know the tab id, so I can make a friendly url with query (e.g. http://localhost/Aanbod/Pagina/QueryKey/QueryValue/).
Anyone has an idea?
Edit:
I'm not on the page itself. Want to know it from any page possible.
The url does not contain the tab id itself, so it can't be extracted.
if Pagina.aspx is a page in dotnet nuke like Home or Getting Started then you can find the tab id by
DotNetNuke.Entities.Tabs.TabController objTab = new DotNetNuke.Entities.Tabs.TabController();
DotNetNuke.Entities.Tabs.TabInfo objTabinfo = objTab.GetTabByName("Pagina", this.PortalId);
int Tabid = objTabinfo.TabID;
Well, this post is a little bit old, and I don't know if someone still looks for a solution. I had this problem recently and here is the pieces of code I wrote to solve it:
public int GetTabIDFromUrl(string url, int portalID)
{
int getTabIDFromUrl = 0;
// Try the "old" way with the TabID query string
if (url.ToLower().IndexOf("tabid") > 0)
{
Int32.TryParse(Regex.Match(url, "tabid[=/](\\d+)", RegexOptions.IgnoreCase).Groups[1].Value, out getTabIDFromUrl);
}
// When there is no result (because of advanced or human friendly or whatever Url provider)
if (getTabIDFromUrl == 0)
{
TabCollection tabs = TabController.Instance.GetTabsByPortal(portalID);
foreach (KeyValuePair<int, TabInfo> k in tabs)
{
TabInfo tab = k.Value;
if (tab.FullUrl.StartsWith(url))
{
getTabIDFromUrl = tab.TabID;
break;
}
}
}
return getTabIDFromUrl;
}
This could be a pain with sites that have a lot of pages, therefore it could be useful if you have some additional information to shrink the list that you have to loop through - e.g. a ModuleId of a module that is placed on this tab:
public int GetTabIDFromUrl(string url, int moduleID, int portalID)
{
int getTabIDFromUrl = 0;
// Try the "old" way with the TabID query string
if (url.ToLower().IndexOf("tabid") > 0)
{
Int32.TryParse(Regex.Match(url, "tabid[=/](\\d+)", RegexOptions.IgnoreCase).Groups[1].Value, out getTabIDFromUrl);
}
// When there is no result (because of advanced or human friendly or whatever Url provider)
if (getTabIDFromUrl == 0)
{
IList<ModuleInfo> modules = ModuleController.Instance.GetTabModulesByModule(moduleID);
foreach (ModuleInfo module in modules)
{
TabInfo tab = TabController.Instance.GetTab(module.TabID, portalID);
if (tab.FullUrl.StartsWith(url))
{
getTabIDFromUrl = tab.TabID;
break;
}
}
}
return getTabIDFromUrl;
}
Hope that helps someone...
Happy DNNing!
Michael
I hope this will solve your issue
http://www.willstrohl.com/Blog/EntryId/66/HOW-TO-Get-DNN-TabInfo-page-object-from-TabId
Sorry, my bad!!
Here is your answer
http://www.dotnetnuke.com/Resources/Forums/forumid/118/threadid/89605/scope/posts.aspx :)
Hi can some one please tell me how to copy one data store to another in dojo. I tried it in following way but it doesn't work. Here I'm try to copy data from jsonStore to newGridStore.
jsonStore.fetch({query:{} , onComplete: onComplete});
var onComplete = function (items, request) {
newGridStore = null;
newGridStore = new dojo.data.ItemFileWriteStore({
data : {}
});
if (items && items.length > 0) {
var i;
for (i = 0; i < items.length; i++) {
var item = items[i];
var attributes = jsonStore.getAttributes(item);
if (attributes && attributes.length > 0) {
var j;
for (j = 0; j < attributes.length; j++) {
var newItem = {};
var values = jsonStore.getValues(item, attributes[j]);
if (values) {
if (values.length > 1) {
// Create a copy.
newItem[attributes[j]] = values.slice(0, values.length);
} else {
newItem[attributes[j]] = values[0];
}
}
}
newGridStore.newItem(newItem);
}
}
}
}
Based on the comments asked above. You are trying to copy values to a new Store for the single reason to be able to detect which values have changes and then save them individually, without having to send the entire store.
This approach is totally wrong.
Dojo has isDirty() and offers you the ability to revert() a store back to it's original values. It knows which values have changed and you don't need to do this.
Take a look at the bog standard IFWS here: http://docs.dojocampus.org/dojo/data/ItemFileWriteStore
Make sure you read everything from here: http://docs.dojocampus.org/dojo/data/ItemFileWriteStore#id8
What you want to do is create your own _saveCustom method which you will override your store with, and then when you save, you will be able to see which values have changed.
Click on the demo at the very bottom of the page. It shows you EXACTLY how do to it using _saveCustom
I have a js function that is named getID which is basically return document.getElementById(id)
I want to make another function, getTag that would return getElementsByTagName.
The part that I can't seem to manage is that I want to be able to call them like this:
getID('myid').getTag('input') => so this would return all the input elements inside the element with the id myid
Thanks!
ps: getTag would also have to work if it's called by it's own, but then it would just return document.getElementsByTagName
UPDATE:
Thanks to all that have replied! Using your suggestions I came up with this, which works well for me:
function getEl(){
return new getElement();
}
function getElement() {
var scope = document;
this.by = function(data){
if (data.id) scope = scope.getElementById(data.id);
if (data.tag) scope = scope.getElementsByTagName(data.tag);
return scope;
}
}
and I use it like this:
var inputs = getEl().by({id:"msg", tag:"input"});
The way to do that is to prototype Object. To do that, you'll need the following piece of code:
Object.prototype.getTag = function(tagName) {
return this.getElementsByTagName(tagName);
}
However, this will expand all objects because what you really need to prototype, an HTMLElement, is very hard to do consistently. All the experts agree that you should never expand the Object prototype. A much better solution would be to create a function that gets the tag name from another argument:
function getTag(tagName, element) {
return (element || document).getElementsByTagName(tagName);
}
// Usage
var oneTag = getTag('input', getID('myid')); // All inputs tags from within the myid element
var twoTag = getTag('input'); // All inputs on the page
This would require that whatever is returned by getID('myid') (an HTML element) exposes a method named getTag(). This is not the case. Browsers implement the DOM specification and expose the methods defined there.
While you technically can enhance native objects with your own methods, it's best not to do it.
What you try to do has been solved rather nicely in JS libraries like jQuery already, I recommend you look at one of them before you invest time in mimicking what they can do. For example, your line of code would become:
$("#myid input")
in jQuery. jQuery happens to be the most widely used JS library around, there are many others.
Basically, you're going to create a single object that contains each of your methods and also stores all data returned by the native functions. It would look something like this (not tested, but you get the idea):
var MyLib = {
getID: function(id) {
var element = document.getElementById(id);
this.length = 1;
this[0] = element;
return this;
},
getTag: function(tag) {
var elements;
if (this.length) {
for (var i = 0; i < this.length; i++) {
var byTag = this[i].getElementsByTagName(tag);
for (var j = 0; j < byTag.length; j++) {
elements.push(byTag[j]);
}
}
}
for (var i = 0; i < elements.length; i++) {
this[i] = elements[i];
}
this.length = elements.length;
return this;
}
};
You can then use it like this:
var elements = MyLib.getID('myid').getTag('input');
for (var i = 0; i < elements.length; i++)
console.log(elements[i]); // Do something
The only real problem with this approach (besides it being very tricky and hard to debug) is that you have to treat the result of every method like an array, even if there is only a single result. For example, to get an element by ID, you'd have to do MyLib.getID('myid')[0].
However, note that this has already been done before. I recommend you take a look at jQuery, if only to see how they accomplished this. Your code could be simplified to this:
$("#myid input")
jQuery is more lightweight than you think, and including it on your page will not slow it down. You have nothing to lose by using it.
Just use the DOMElement.prototype property.
You'll get something like this :
function getTag(tagName) {
return document.getElementsByTagName(tagName);
}
DOMElement.prototype.getTag = function(tagName) {
return this.getElementsByTagName(tagName);
}
But you should use jQuery for this.
EDIT: My solution doesn't work on IE, sorry !
You could define it as follows:
var Result = function(el)
{
this.Element = el;
};
Result.prototype.getTag = function(tagName)
{
return this.Element.getElementsByTagName(tagName);
};
var getTag = function(tagName)
{
return document.getElementsByTagName(tagName);
};
var getID = function(id)
{
var el = document.getElementById(id);
return new Result(el);
};
Whereby a call to getID will return an instance of Result, you can then use its Element property to access the HTML element returned. The Result object has a method called getTag which will return all child elements matching that tag from the parent result. We then also define a seperate getTag method which calls the document element's getElementsByTagName.
Still though...JQuery is so much easier... $("#myId input");
Unless this is an academic exercise on how to chain methods in JavaScript (it doesn't seem to be, you simply seem to be learning JavaScript), all you have to do is this:
var elements = document.getElementById("someIdName");
var elementsByTag = elements.getElementsByTagName("someTagName");
for (i=0; i< elementsByTag.length; i++) {
alert('found an element');
}
If you want to define a reusable function all you have to do is this:
function myFunction(idName,tagName) {
var elements = document.getElementById(idName);
var elementsByTag = elements.getElementsByTagName(tagName);
for (i=0; i< elementsByTag.length; i++) {
alert('found a ' + tagName + ' element within element of id ' + idName);
}
}
It's true that if this is all the JavaScript functionality you need on your page, then there is no need to import jQuery.