goggles.min.js

activate_truth_goggles = function($) {
	var prefs = {
		default_mode: "goggles",
		track_api: "",
		mode_toggle: true,
	}
	if(typeof window.goggles_prefs != 'undefined')
		$.extend(prefs, window.goggles_prefs);
	
	// constants
	var MODE_TRANSPARENT = "highlight";
	var MODE_SAFE = "safe";
	var MODE_GOGGLES = "goggles";
	var MODE_LOADING = "loading";
	
	var CLASS_VIEWED = "critical-viewed";
	var CLASS_ANTISNIPPET = "critical-antisnippet";
	var CLASS_ANTISNIPPET_PREFIX = "critical-antisnippet-";
	var CLASS_IGNORE = "goggles-ignore";
	
	var DATA_CLAIM_ID = "claim-id";
	
	// Caches
	var claims = [];
	var snippets = [];
	var potential_snippets = [];
	var current_mode = null;
	
	// Interface Objects
	var sidepane = $("<div>");
	var sidepane_close = $("<div>");
	var sidepane_main = $("<div>");
	var sidepane_logo = $("<div>");
	var sidepane_content = $("<div>");
	var sidepane_alert = $("<div>");
	var contextpane = $("<div>");
	var modalpane = $("<div>");
	var infopane = $("<div>");
	var infopane_logo = $("<div>");
	var infopane_content = $("<div>");
	var infopane_close = $("<div>");
	
	
	// UI Methods
	toggle_sidepane = function() {
		if(sidepane.hasClass("open"))
			close_sidepane();
		else
			open_sidepane();
	}
	
	open_sidepane = function() {
		sidepane.addClass("open");
		sidepane.animate({"width":"220px"}, {"queue":false, "duration": 500} );
		sidepane_alert.animate({"width":"220px"}, {"queue":false, "duration": 500} );
	}
	
	close_sidepane = function() {
		sidepane.removeClass("open");
		sidepane.animate({"width":"15px"}, {"queue":false, "duration": 500} );
		sidepane_alert.animate({"width":"15px"}, {"queue":false, "duration": 500} );
	}
	
	// Mode Swap
	change_mode = function(new_mode) {
		$("body").removeClass("critical-transparent");
		$("body").removeClass("critical-safe");
		$("body").removeClass("critical-loading");
		$("body").removeClass("critical-goggles");
		
		current_mode = new_mode;
		
		switch(new_mode) {
			case MODE_TRANSPARENT:
				$("body").addClass("critical-transparent");
				var h = '<h1>Highlight Mode</h1>';
				h = h + '<p>Click on the <span class="critical-phrase">highlighted phrases</span> to consider them more carefully.</p>';
				if(prefs.mode_toggle)
					h = h + '<div id="critical-mode-toggle">enable safe mode</div>';
				sidepane_content.html(h);
				sidepane_content.find("#critical-mode-toggle").click(function() {change_mode(MODE_SAFE);});
				break;
			
			case MODE_SAFE:
				$("body").addClass("critical-safe");
				var h = '<h1>Safe Mode</h1>';
				h = h + '<p>Click on the <span class="critical-phrase">colored boxes</span> to view and judge the hidden content.</p>';
				if(prefs.mode_toggle)
					h = h + '<div id="critical-mode-toggle">enable goggles mode</div>';
				sidepane_content.html(h);
				sidepane_content.find("#critical-mode-toggle").click(function() {change_mode(MODE_GOGGLES);});
				break;
			
			case MODE_GOGGLES:
				$("body").addClass("critical-goggles");
				var h = '<h1>Goggles Mode</h1>';
				h = h + '<p>Click on the <span class="critical-phrase">highlighted phrases</span> to focus your understanding before continuing to read.</p>';
				if(prefs.mode_toggle)
					h = h + '<div id="critical-mode-toggle">enable highlight mode</div>';
				sidepane_content.html(h);
				sidepane_content.find("#critical-mode-toggle").click(function() {change_mode(MODE_TRANSPARENT);});
				break;
			
			case MODE_LOADING:
				$("body").addClass("critical-loading");
				var h = '<h1>Scanning...</h1>';
				h = h + '<p>Truth Goggles is searching this page for fact checked claims.</p>';
				sidepane_content.html(h);
				break;
		}
		progress_update();
	}
	
	click_blocker = function() {return false;}
	
	progress_update = function() {
		// Find the earliest "unseen" snippet and process accordingly
		var DOM_snippets = $(".critical-phrase");
		var next_snippet = null;
		var snippet_index = 0;
		for(snippet_index = 0; snippet_index < DOM_snippets.length; ++snippet_index) {
			var DOM_snippet = $(DOM_snippets[snippet_index]);
			if(!DOM_snippet.hasClass(CLASS_VIEWED)) {
				next_snippet = DOM_snippet;
				break;
			}
		}
		
		// Reset Everything
		$("." + CLASS_ANTISNIPPET)
			.removeClass(CLASS_ANTISNIPPET)
			.unbind('click',click_blocker);
		
		if(next_snippet == null) {
			// All snippets have been viewed
		} else {
			var claim_id = $.data(next_snippet[0], DATA_CLAIM_ID);
			
			switch(current_mode) {
				case MODE_GOGGLES:
					$("." + CLASS_ANTISNIPPET_PREFIX + snippet_index)
						.addClass(CLASS_ANTISNIPPET)
						.bind('click',click_blocker);
					break;
			}
		}
	}
	
	// Viewing Interface
	open_modal = function(phrase_node) {
		$("body").addClass("critical-modal-enabled");
		
		var phrase_clone = phrase_node.clone();
		var active_claim = claims[$.data(phrase_node[0], DATA_CLAIM_ID)];
		
		// Create the phrase that will appear above the modal
		phrase_node.after(phrase_clone);
		phrase_clone.css("top", phrase_node.offset().top - $(window).scrollTop());
		phrase_clone.css("left", phrase_node.offset().left - $(window).scrollLeft());
		
		// Populate the info pane
		infopane_close.html("Close");
		var h = '<h1>Are you sure this is accurate?</h1>';
		h = h + '<ul>';
		for (var x = 0, active_verdict; active_verdict = active_claim.verdicts[x]; x++) {
			h = h + '<li>';
			h = h + '<div class="verdict-toggle"></div>';
			h = h + '<div class="verdict-header">';
			h = h + '<span class="vetting-service">' + active_verdict.vetting_service.title + ' Says:</span>';
			h = h + '<span class="truth-rating">' + active_verdict.result_class.title + '</span>';
			h = h + '<span class="short-reason">' + active_verdict.short_reason + '</span>';
			h = h + '</div>';
			h = h + '<div class="verdict-content">';
			h = h + '<div class="long-reason">'
			var reason_string = active_verdict.long_reason.substring(0,500) + "...";
			var reason_ps = reason_string.split("\n");
			for(y in reason_ps) {
				if($.trim(reason_ps[y]) == "")
					continue;
				h = h + "<p>" + reason_ps[y] + "</p>";
			}
			
			h = h + '</div>';
			h = h + '</div>';
			h = h + '<div class="verdict-more"><a href="' + active_verdict.url + '" target="_blank">More &gt;&gt;</a></div>';
			h = h + '</li>';
		}
		h = h + '</ul>';
		infopane_content.html(h);
		
		infopane_content.find("a").click(function() {
			$.ajax({
				type: 'GET',
				url: prefs.track_api,
				data: {
					t:"more"
				},
				dataType: 'jsonp'
			});
		});
		
		// Show everything we just created
		$(phrase_clone).addClass("critical-active");
		sidepane.fadeOut(500);
		phrase_clone.animate({
			"margin-left": "-250px",
			left: $("body").width()/2 + "px",
			top: "55px",
			width: "500px",
			padding: "10px",
			"font-size": "18px"
		},{
			duration:500,
			complete: function() { phrase_clone.css("left","50%"); }
		});
		modalpane.fadeIn(500, function() {$(".critical-claim-" + active_claim.id).addClass(CLASS_VIEWED)});
		infopane.fadeIn(500);
		
		if(prefs.track_api != "") {
			$.ajax({
				type: 'GET',
				url: prefs.track_api,
				data: {
					t:"open",
					d: phrase_clone.text()
				},
				dataType: 'jsonp'
			});
		}
	}
	
	close_modal = function() {
		$("body").removeClass("critical-modal-enabled");
		$(".critical-active").remove();
		modalpane.fadeOut(500);
		infopane.fadeOut(500);
		sidepane.fadeIn(500);
		progress_update();
		
		if(prefs.track_api != "") {
			$.ajax({
				type: 'GET',
				url: prefs.track_api,
				data: {
					t:"close"
				},
				dataType: 'jsonp'
			});
		}
	}
	
	// Potential Claims
	open_matching_announcement = function() {
		
	}
	
	close_matching_announcement = function() {
		
	}
	
	// Set up the sidepane
	sidepane.attr("id","critical-sidepane");
	sidepane.addClass("critical-element");

	sidepane_close.attr("id","critical-sidepane-close");
	sidepane.append(sidepane_close);
	sidepane_close.click(function() { toggle_sidepane() });
	
	sidepane_main.attr("id","critical-sidepane-main");
	sidepane.append(sidepane_main);
	
	sidepane_logo.attr("id","critical-sidepane-logo");
	sidepane_main.append(sidepane_logo);
	
	sidepane_content.attr("id","critical-sidepane-content");
	sidepane_main.append(sidepane_content);
	
	sidepane_alert.attr("id","critical-alert");
	sidepane_alert.html("Help identify more claims");
	sidepane_alert.hide();
	$("body").append(sidepane_alert);
	
	sidepane.css("width", "0px");
	$("body").append(sidepane);
	$(function() {open_sidepane();});
		
	// Set up the submit-a-fact context item
	contextpane.attr("id","critical-contextpane");
	contextpane.addClass("critical-element");
	contextpane.hide();
	$("body").append(contextpane);
	
	// Modal Pane
	modalpane.attr("id","critical-modal");
	modalpane.addClass("critical-element");
	modalpane.hide();
	$("body").append(modalpane);
	
	// Info Pane
	infopane.attr("id","critical-infopane");
	infopane.addClass("critical-element");
	infopane.hide();
	
	infopane_logo.attr("id","critical-infopane-logo");
	infopane.append(infopane_logo);
	
	infopane_content.attr("id","critical-infopane-content");
	infopane.append(infopane_content);
	
	infopane_close.attr("id","critical-infopane-close");
	infopane_close.click(function() { close_modal(); });
	infopane.append(infopane_close);
	
	$("body").append(infopane);
	
	
	// Phrases
	change_mode(MODE_LOADING);
	var paragraphs = document.getElementsByTagName("body");
	for(var x = 0; x < paragraphs.length ; ++x) {
		var snippets_script = document.createElement('script');
		var claims_script = document.createElement('script');
		var text = paragraphs[x].textContent?paragraphs[x].textContent:paragraphs[x].innerText;
	
		// Collect snippets
		$.ajax({
			type: 'POST',
			url: goggles_domain + '/api/snippets/',
			crossDomain: true,
			data: {
				oid:x,
				context: text
			},
			dataType: 'json',
			success: function(responseData, textStatus, jqXHR) {
				goggles_get_snippets_callback(responseData);
			},
			error: function (responseData, textStatus, errorThrown) {
				console.log('snippet lookup failed.');
			}
		});
		
		// Collect claims
		$.ajax({
			type: 'POST',
			url: goggles_domain + '/api/claims/',
			crossDomain: true,
			data: {
				oid:x,
				context: text
			},
			dataType: 'json',
			success: function(responseData, textStatus, jqXHR) {
				goggles_get_claims_callback(responseData);
			},
			error: function (responseData, textStatus, errorThrown) {
				console.log('claim lookup failed.');
			}
		});
	}
	
	
	function createSPAN(content, targetStart, targetEnd, classes, data) {
		// This method inserts a series of spans, breaking them apart as needed if the text elements cross multiple DOM objects
		var amountHighlighted = 0;
		(function recursive(object, cursor) {
			if(object.childNodes.length == 0)
				return object instanceof Text?object.length:0; // Only Text objects count toward character count (otherwise this would include things like HTML comments)
		
			// Loop through each child to find the beginning and end
			var children = Array.prototype.slice.call(object.childNodes);
			var familyLength = 0;
		
			var startIndex = -1, 
				endIndex = -1,
				startOffset = 0,
				endOffset = 0,
				endNodeLength = 0;
			
			for(var y = 0; y < children.length ; ++y) {
				var child = children[y],
					$child = $(child),
					childStart = cursor,
					childLength = $child.text().length,
					childEnd = childStart + childLength;
				
				cursor += childLength;
				
				if(targetEnd < childStart) continue; // We're past the end of the snippet
				if(targetStart >= childEnd) continue; // We haven't hit the start of the snippet
				
				// This child contains part of the snippet.
				if(child instanceof Text && $.trim(child.textContent).length != 0) {
					// Wrap the appropriate portion in a range
					var range = document.createRange();
					range.setStart(child, Math.max(0,targetStart - childStart));
					range.setEnd(child, Math.min(childLength, targetEnd - childStart));
					
					// Create the span
					var s = document.createElement("span"),
						$s = $(s);
					range.surroundContents(s);
					
					// Add data
					for(var i in data)
						$.data(s,i, data[i]);
					
					// Add classes
					for(var i=0; i < classes.length; ++i)
						$s.addClass(classes[i]);
					amountHighlighted += $s.text().length;
				} else {
					recursive(child, childStart);
				}
			}
			return 0;
		})(content, 0);
	}
	
			// 					// Internet Explorer
			// 					mainRange = document.selection.createRange();
			// 					tempRange = document.selection.createRange();
			// 					tempRange.collapse(true); 
			// 					var selectedElement = tempRange.parentElement();
			// 					var contentID = $(selectedElement).attr("id").slice(STCONST_PLAYER_TRANSCRIPTCONTENT_PREFIX.length);
			// 					var selectedContent = transcript.getContentByID(contentID);
			// 					var transcriptID = transcript.transcriptID;
			// 					var container = document.createElement("div");
			// 					$(container).css("visibility","hidden");
			// 		
			// 					var frontText = "<a href='" + quoteLinkURL + "'>";
			// 					var backText = "</a>";
			// 					var h = frontText + mainRange.htmlText + backText;
			// 					$(container).html(h);
			// 					$(document.body).append(container);
			// 		
			// 					var newRange = document.body.createTextRange()
			// 					newRange.moveToElementText(container);
			// 					newRange.select();
			// 					window.setTimeout(function () {
			// 						mainRange.select();
			// 						$(container).remove();
			// 					}, 0)
	
	window.goggles_get_claims_callback = function(data) {
		// potential_snippets = data.claims;
		// 
		// // Sort the potential claims based where they begin
		// potential_snippets.sort(function(a, b) {
		// 	if (a.content_start < b.content_start) { return -1; }
		// 	if (a.content_start > b.content_start) { return  1; }
		// 	return 0;
		// });
		// 
		// for(var x = 0; x < potential_snippets.length; ++x) {
		// 	var potential_snippet = potential_snippets[x];
		// 	var potential_snippet_start = potential_snippet.content_start;
		// 	var potential_snippet_end = potential_snippet_start + potential_snippet.content_length;
		// 	var p = paragraphs[data.oid];
		// 	
		// 	if(!(potential_snippet.id in claims))
		// 		claims[claim.id] = potential_snippet;
		// }
	}
	
	window.goggles_get_snippets_callback = function(data) {
		var snippets = data.snippets;
		
		// Sort the snippets in terms of where they begin
		snippets.sort(function(a, b) {
			if (a.content_start < b.content_start) { return -1; }
			if (a.content_start > b.content_start) { return  1; }
			return 0;
		});
		
		// Wrap the snippets on the page
		var antiSnippetClasses = [];
		for(var x = 0; x < snippets.length; ++x) {
			var snippet = snippets[x];
			var snippetStart = snippet.content_start;
			var snippetEnd = snippetStart + snippet.content_length;
			var p = paragraphs[data.oid];
			
			// Make sure the claim is stored in our mega list
			if(!(snippet.claim.id in claims))
				claims[snippet.claim.id] = snippet.claim;
			
			// Set up the various attributes to associate with the node
			var snippetClasses = [ "critical-phrase",
							"critical-claim-" + snippet.claim.id ];
			var snippetData = {"claim-id": snippet.claim.id,
							   "claim-index":x };
			
			createSPAN(p,snippetStart, snippetEnd, snippetClasses, snippetData);
			
			// Wrap all text between snippets as well
			if(x != 0) {
				var antiSnippetStart = snippets[x - 1].content_start + snippets[x - 1].content_length;
				var antiSnippetEnd = snippets[x].content_start + snippets[x].content_length;
				antiSnippetClasses.push("critical-antisnippet-" + (x - 1));
				var antiSnippetData = {};
				createSPAN(p, antiSnippetStart, antiSnippetEnd, antiSnippetClasses, antiSnippetData);
			}
			if(x == snippets.length - 1) {
				var antiSnippetStart = snippets[x].content_start + snippets[x].content_length;
				var antiSnippetEnd = $(p).text().length;
				antiSnippetClasses.push("critical-antisnippet-" + (x));
				var antiSnippetData = {};
				createSPAN(p, antiSnippetStart, antiSnippetEnd, antiSnippetClasses, antiSnippetData);
			}
			
			var ignore = $("."+CLASS_IGNORE);
			ignore.each( function(index, element) {
				element = $(element);
				element.find("*").removeClass(antiSnippetClasses.join(" "));
			});
			
		}
		
		// Add event handlers to all of the newly wrapped snippets
		$(".critical-phrase").each( function(index, element) {
			element = $(element);
			element.click(function() { open_modal(element); });
		});
		
		// Start off with safe mode
		change_mode(prefs.default_mode);
	}
};