Develop Reference

Turn Off Youtube Annotations Using JavaScript

There’re currently three ways I know of, to disable annotations in youtube videos:
You can use the YouTube settings. This will not work for me, as I do not have (nor want) an account.
You can use a specialised extension. That might work, but I’d rather not have a full-fledge extension with a ton of options, just for that.
You can use a (ad)blocking extension, and add ||youtube.com/annotations_ to its filters. That suffers from the same issue as the previous point. In addition, it disables them completely, while I simply want them turned off by default (so I have the option to turn them on).
Is it possible to do it using JavaScript? I have a UserScript that already performs some modifications to YouTube’s website, so ideally I’d like to expand it. That’s really the last thing I’m missing.
I ask that answers be constrained to using JS and not browser extensions recommendations. Both because (as mentioned), I already know about those, and because this is as much about the learning process as it is about the result. It’s practice for more UserScripts.

Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date and as robust as possible.
var settings_button = document.querySelector(".ytp-settings-button");
settings_button.click(); settings_button.click(); // open and close settings, so annotations label is created
var all_labels = document.getElementsByClassName("ytp-menuitem-label");
for (var i = 0; i < all_labels.length; i++) {
if ((all_labels[i].innerHTML == "Annotations") && (all_labels[i].parentNode.getAttribute("aria-checked") == "true")) { // find the correct label and see if it is active
all_labels[i].click(); // and in that case, click it
}
}

User's code is correct, settings need to be click & then:
document.querySelectorAll("div[role='menuitemcheckbox']")[1].click()
I added it to my "turn off autoplay & annotations" script: https://gist.github.com/Sytric/4700ee977f427e22c9b0
Previously working JS:
document.querySelectorAll("div[aria-labelledby=\"ytp-menu-iv\"]")[0].click()

I know you don't want to use an extension for this but it is the most flexible and easy way to solve your problem.
Extension gives us the power to use a background script through which we can inject css and javascript to opened web page.
I made one extension on this
https://chrome.google.com/webstore/detail/hide-labels-and-end-cards/jinenhpepbpkepablpjjchejlabbpken
This also has a stop-start button for which I just inject the opposite code as before.
If you need any further help on this, i will be happy to do so.

iv_load_policy (supported players: AS3, AS2, HTML5)
Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotations to not be shown by default.

Here is a nice solution, just hide the div with annotations
$("div.video-annotations").css("display", "none");

Filter selection on cut/copy with javascript?

On one of my sites, I used ­ liberally to provide better hyphenation in the web browser. Unfortunately, they get corrupted by copying or cutting and pasting, so when people copy from my website, the ar-tic-les ap-pear with ex-tra hy-phens which are really annoying. I exaggerated it a bit here, but you get the idea.
I'd love a way to filter the selection on copy - basically an opportunity to remove the ­'s before they get to the clipboard. I suspect this isn't possible, based on what I've read/researched, but thought I'd ask the collective wisdom here, in case I've missed something.
A pseudocode example of what would be beautiful:
element.oncopy = function (ev) {
ev.selection.replace(/­/g, '');
return true; // or ev, I suppose
}

Have a look at this article about the oncopy event. I think it is exactly what you need: http://help.dottoro.com/ljwexqxl.php.
Example #2 on the following page explains how to use the clipboard in a cross-browser friendly way (since only IE has access to the clipboardData object used in the first article): http://help.dottoro.com/ljxundda.php
That page also mentions that there are some cases where security restrictions may prevent the cross-browser method from working, which is why some sites use Flash to manipulate the clipboard. Here's an article which discusses that method, in case it sounds like what you want: http://www.jeffothy.com/weblog/clipboard-copy/
EDIT
Have a look at Hyphenator.js. It is a JavaScript method of hyphenating text intelligently on the client side. Quickly playing around with the demo (which can be found here), it appears to leave the hyphens out of copied text. It might be a pain to change your content to use this instead of ­, but it looks like it will achieve all of your goals.

reliable, cross-browser way to get selection's boundaries?

I need to make the user to be able to select some text, click a button and make the server remember the selection for the next time.
I've extensively read through SO's questions and answers, tried some libraries, but without luck: haven't found a reliable tool yet.
It isn't important how the selection's boundaries are identified: it could be "nth textNode, mth char", or "nth char of text", or "nth char of html", or whatever, as long as it allows the server to identify the points in the document; what really matter is that, selecting the same words of the same document must give the same result on chrome, safari, IE, firefox.
EDIT: I don't need it to work everywhere on the internet: just on one site, where the document's structure is fixed and only the content of a single div (or the like) will change.

Try my Rangy library and its Serializer module. I'm not convinced it's exactly what you want because you mentioned the server remembering the selection, whereas my suggestion uses cookies, and the serialized selection will vary between browsers. However, it does do as you described in the first paragraph.
On the other hand, it's pretty much impossible to write something that will work for all browsers and all pages, since browsers interpret HTML differently and build different DOMs.

Testing Javascript that Manipulates the DOM

I've been looking into javascript test suites and I have found QUnit to be very interesting. I understand how to test computational code, but...
How do you test javascript applications written primarily for DOM manipulation?
it seems like testing the position/color/etc of DOM elements would be a moot point because you'd end up doing somethign like this:
$("li.my_element").css("background-color", "#f00");
and then in your test...
$(function() {
module("coloring");
test("test_my_element", function() {
var li_element_color = $("li.my_element").css('background-color');
equals(li_element_color, "#f00");
});
});
this just doesn't feel right because it basically just doing this:
var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
return true;
}
Am I nuts? How is this supposed to be done?
edit: the heart of the question:
I guess what I'm getting at is, I need to make sure the code isn't broken before I deploy, but the vast majority of it is UI helpers and ajax. How do I test that things are appearing correctly?
A few examples:
test that a JQuery UI dialog is appearing on top of all other elements
test that the drag-n-drop is working properly
test that the color of a droppable changes when an element is dropped on it
test that the ajax is all working properly
test that there are no extraneous commas that will break IE

I have found the Javascript/DOM tests, especially for the simple interactions that you are describing, are not that useful. You'll testing that things are set up right, and since jQuery is so declarative, your tests look a lot like your code.
My current thinking is that if you are writing larger JS components, it makes sense to pull out a set of interrelated behaviors both into a jQuery plugin and a set of tests for it.
But from the examples you mentioned, it sounds like you're really looking for a level of protection within your integrated website. A tool like Selenium will probably be more powerful and appropriate for you. In particular, it
can be automated
can run against multiple browsers, including IE
runs within the context of your web app and pages, so drag-n-drop can be tested where it really happens instead of in some test environment.
AJAX can be tested

Instead of testing the JQuery css function. Your test should mock the css function, and ensure that it is called only once with the correct color. The code tested should be yours, not the frameworks.

In addition to what Jason Harwig is saying, I would say that unit testing is a test to make sure that code is being run as expected. If you want to test that, then Jason is absolutely right about how you should do that. If you are wanting to run tests to check that the DOM manipulation is happening (UI testing) and not the actual code that is doing the DOM manipulation (unit testing), then you may want to check out something like Selenium, WatiN or Watir.

I'm guessing that many people test visually: i.e. they look at their browser's output on their monitor, to see whether it looks like the DOM was manipulated as expected.
If that needs to be an automated test case (eg. for regression testing), then maybe they record the output (like screen capture) and do something like compare two screenshots to see whether the results are the same.
Instead of capturing a screenshot, you could just capture the whole DOM, and do a side-by-side comparison of the captured DOM trees (which might be less error-prone that comparing pixels).

I test AJAX stuff like this:
Make the AJAX call
Set up a JavaScript timer
Check the DOM to see if the expected changes have happened
Now, it could be that the AJAX call hasn't returned before you do your check, but this is also useful test information; with an AJAX call, there is (usually) some time after which we'd call it a failure. As an example, if we're doing a suggestion popup, and it's taken 30 seconds to come back, that's a fail.

Override IE email auto-formatting in rich-text editor

Our site makes use of FreeTextBox, a web-based, rich-text editor. In IE, but in not Firefox, if a user types in something like:
someone#blah
IE automatically creates a mailto hyperlink. I have tested this with other text editors out there and the story is the same with all of them.
Can I override this browser behavior somehow from within my application?

This has to do with the MSHTML editor, which (I'm guessing all) Windows browsers use to instantiate rich text editors. There's a setting called IDM_AUTOURLDETECT_MODE that lets you decide if the autolinking will take place, and the default is true (other browsers apparently set it to false on instantiation, hence no autolinking in Firefox.)
Unfortunately, until recently Microsoft didn't have a mapping from the command ID to a command identifier string, so the function wasn't accessible via Javascript prior to IE9.
I just tried it out in IE9 and can confirm that, for that version and presumably all future ones, you can override the feature by calling
document.execCommand("AutoUrlDetect", false, false);
Note that it's IE9+ only, so you're still stuck for previous versions, and that you'll want to wait until the DOM is loaded before you call it and have some error handling around it, etc, etc.
There's a good summary of the original issue here, and a discussion of the fix in the minor change list here.