User:Jeph paul/visualisationscript.js
function htmlDiff() {
var _htmlHash;
var _revHtmlHash;
var _currentHash;
var _is_debug = false;
function pushHash(tag) {
if (typeof(_htmlHash[tag]) == 'undefined') {
var value = eval('"\\u'+_currentHash.toString(16)+'"');
_htmlHash[tag] = value;
_revHtmlHash[value] = tag;
_currentHash++;
}
return _htmlHash[tag];
}
this.clearHash = function() {
_htmlHash = {};
_revHtmlHash = {};
_currentHash = 44032; //朝鲜文音节 Hangul Syllables
};
function html2plain(html) {
html = html.replace(/<(S*?)[^>]*>.*?|<.*?\/>/g, function(tag){
//debug:
if (_is_debug) {
return pushHash(tag.replace(/</g, '<').replace(/>/g, '>'));
} else {
return pushHash(tag);
}
});
return html;
}
function plain2html(plain) {
var back = '';
for (i=0;i<plain.length;i++){
if(_revHtmlHash[plain[i]]){
back += _revHtmlHash[plain[i]];
}
else{
back += plain[i];
}
}
return back;
};
var dmp = new diff_match_patch();
this.diff = function(first,second){
console.time('html2plain');
var convertedFirst = html2plain(first);
var convertedSecond = html2plain(second);
console.timeEnd('html2plain');
console.time('toDiff');
var diffs = dmp.diff_main(convertedFirst,convertedSecond);
dmp.diff_cleanupSemantic(diffs);
console.timeEnd('toDiff');
var modified = '';
console.time('toModify');
for (i=0;i<diffs.length;i++){
var diff = diffs[i];
if (diff[0]==0){
modified += diff[1];
}
else if (diff[0]==1){
modified += '<ins id='+i+'>'+diff[1]+'</ins>';
}
else {
modified += '<del id='+i+'>'+diff[1]+'</del>';
}
}
console.timeEnd('toModify');
console.time('convertBack');
var complete = plain2html(modified);
console.timeEnd('convertBack');
return complete;
};
};
var userNotification = function(type){
//add code to remove class & add the calls to the notification
if (type == 'play'){
$('.notify').removeClass().addClass('notify').addClass('notifyPlay').show().fadeOut(2000);
}
else if (type == 'pause'){
if(!$('.notify').hasClass('notifyPause') && $('.notify').hasClass('notifyPlay')){
$('.notify').removeClass().addClass('notify').addClass('notifyPause').show().fadeOut(2000);
}
}
else{
$('.notify').removeClass().addClass('notify').addClass('notifyLoad').show().fadeOut(2000);
}
};
var usingLanguageNamespace = 'en';
var infoBox = function (revInfo){
for (key in revInfo){
if(key == 'revid'){
var urlBase = 'https://'+usingLanguageNamespace+'.wikipedia.org/w/index.php?oldid='+revInfo[key];
var anchor =$('<a>'+revInfo[key]+'</a>').attr({'target':'_blank','href':urlBase});
$('#infoBox .revisionLink').html(anchor);
}
else if(key == 'timestamp'){
$('#infoBox .editDate').html(revInfo[key]);
}
else if(key == 'user'){
$('#infoBox .userName').html(revInfo[key]);
}
else{
var minor = revInfo[key]?revInfo[key]:'';
$('#infoBox .minor').html(minor);
}
}
};
function wikiSlider(options){
var url = 'https://en.wikipedia.org/w/api.php?callback=?';
var postDict ={
rvdir:'older',
format:'json',
rawcontinue:'',
action:'query',
prop:'revisions',
titles:'',
rvprop:'user|timestamp|flags|ids|size',
rvlimit:'max',
};
this.height = options.height;
this.barGraphBarwidth = options.barGraphBarwidth;
this.enlargedBarGraphBarwidth = options.enlargedBarGraphBarwidth;
/* Callbacks for the Primary & Secondry slider*/
this.primarySliderCallback = null ;
this.secondrySliderCallback = null;
if (options.primarySliderMoveCallback && typeof(options.primarySliderMoveCallback) === 'function'){
this.primarySliderCallback = options.primarySliderMoveCallback;
}
if (options.secondrySliderMoveCallback && typeof(options.secondrySliderMoveCallback) === 'function'){
this.secondrySliderCallback = options.secondrySliderMoveCallback;
}
/* Used Variables */
var svgWidth = 0;
var hoverUser = '';
var completeRevData = [], secondrySliderSelection = [];
var rvContinueHash = true,gettingDataFlag = true;
var yscale = null, yscale2 = null, xscale = null;
var brush = null;
var peg = null,pegScale = null,pegHandle,pegHandleContainer;
var toolTipDiv, svg, svgBox, svgEnlargedBox;
var primaryContainer, primaryGraph, secondaryContainer, secondaryGraph, newGraph;
var outerLength = 25, enlargedLength = 65;
var endLine, startDate, endDate;
var progressBar,progressBarWidth = 5;
var bars;
var timeFormat = "%Y-%m-%dT%H:%M:%SZ";
var timeParse = d3.time.format(timeFormat);
/* Selected Edits*/
this.selectedEdits = [];
this.pegMoved = true;
var that = this;
var outerScrollDateUpdate = function (){
var barGraphBarGap = 1;
var outerWidth = $('#outer').width();
var outerViewportHidden = $('#outer').eq(0).scrollLeft();
var outerViewportStart = outerViewportHidden/(that.barGraphBarwidth + barGraphBarGap);
var outerViewportEnd = (outerViewportHidden + outerWidth)/(that.barGraphBarwidth + barGraphBarGap);
var outerViewportShown = completeRevData.slice(outerViewportStart,outerViewportEnd);
$('#outerEndDate').html(timeParse.parse(outerViewportShown[0].timestamp).toDateString().slice(4));
$('#outerStartDate').html(timeParse.parse(outerViewportShown[outerViewportShown.length -1].timestamp).toDateString().slice(4));
console.log('outer scroll');
};
this.init = function(){
/*Enlarged view toggle*/
d3.select('.enlargedButton').on('click',function(){
if (d3.select('#enlarged').style('height').split('px')[0] > 20){
d3.select('#enlarged').style({'height':'15px','top':'145px'}).select('svg').style('display','none');
d3.select(this).classed('up',false);
d3.select(this).classed('down',true);
}
else{
d3.select('#enlarged').style({'height':enlargedLength*2+'px', top:0+'px'}).select('svg').style('display','block');
d3.select(this).classed('down',false);
d3.select(this).classed('up',true);
}
});
/* tooltip div */
tooltipDiv = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);
svg = d3.select('#outer').append('svg').attr({'height':outerLength*2,'width':600});
svgBox = svg.append('g').attr({'transform':'translate(0,0)'});
svgEnlarged = d3.select('#enlarged').append('svg').attr({'height':enlargedLength*2,'width':450});
/*Baseline in enlarged graph*/
d3.select('#enlarged svg').append('line').attr({'x1':0,'x2':450,
'y1':enlargedLength+progressBarWidth/2,'y2':enlargedLength+progressBarWidth/2,
'stroke':'#d0eeed',
'stroke-width':progressBarWidth});
progressBar = d3.select('#enlarged svg').append('line').attr({'x1':0,'x2':450,
'y1':enlargedLength+progressBarWidth/2,'y2':enlargedLength+progressBarWidth/2,
'stroke':'#1ebce2',
'stroke-width':0});
d3.select('#enlarged svg').append('line').attr({'x1':0,'x2':0,
'y1':10,'y2':enlargedLength+progressBarWidth/2,
'stroke':'gray',
'stroke-width':'.5'});
endLine = d3.select('#enlarged svg').append('line').attr({'x1':450,'x2':450,
'y1':10,'y2':enlargedLength+progressBarWidth/2,
'stroke':'gray',
'stroke-width':'.5'});
svgEnlargedBox = svgEnlarged.append('g').attr('transform','translate(0,0)');
primaryContainer = svgBox.append('g').attr('id','primaryContainer');
primaryGraph = primaryContainer.append('g').attr('id','primaryGraph');
//Commenting out Edit size
//primaryContainer.append('text').text('Edit Size').attr({'x':10,'y':10,'class':'legendText'});
secondaryContainer = svgEnlargedBox.append('g').attr({'id':'secondaryContainer'});
secondaryGraph = secondaryContainer.append('g').attr('id','secondaryGraph');
startDate = secondaryContainer.append('text').attr({'x':0,'y':15}).style('font-size',9);
endDate = secondaryContainer.append('text').attr({'x':450,'y':15}).style('font-size',9);
$('#outer').scroll(outerScrollDateUpdate);
/* Calling it direcly with getData by the user*/
//this.getData();
};
this.getData = function(title){
if(title){
postDict['titles'] = title;
}
if (gettingDataFlag && rvContinueHash){
//console.log('postDict',postDict);
$.getJSON(url,postDict,function(data){
if ('query-continue' in data){
rvContinueHash = data['query-continue'].revisions.rvcontinue;
postDict['rvcontinue'] = rvContinueHash;
}
else{
rvContinueHash = null;
}
console.log(rvContinueHash);
if (!rvContinueHash) $('#olderEditsInfo').hide();
var resultKey = Object.keys(data.query.pages);
var revData = data.query.pages[resultKey].revisions;
completeRevData = completeRevData.concat(revData);
parsedData = that.parseData(completeRevData);
that.fixScales();
that.addData(primaryGraph,completeRevData,yscale);
that.callBrush();
gettingDataFlag = true;
$('#outer').scroll();
}).error(function() {
gettingDataFlag = true;
});
gettingDataFlag = false;
}
else{
return;
}
};
this.cleanUp = function () {
completeRevData = [];
rvContinueHash = true;
postDict ={
rvdir:'older',
format:'json',
action:'query',
rawcontinue:'',
prop:'revisions',
titles:'',
rvprop:'user|timestamp|flags|ids|size',
rvlimit:'max',
};
};
//Cleanup big time
/** To highlight the revision currently being animated **/
this.modifySecondryGraph = function(field,value) {
newGraph.filter(function(d){
if(d[field] == value){
progressBar.attr('x1',d.lastX);
pegHandleContainer.transition().duration(750).call(peg.extent([d.lastX, d.lastX])).call(peg.event);
return true;
}
});
};
//Cleanup big time
/** To get the list of revisions selected in the slider **/
this.getSelection = function () {
var brushExtent = brush.extent();
var start = Math.floor(brushExtent[0]/(that.barGraphBarwidth+1));
var end = Math.ceil(brushExtent[1]/(that.barGraphBarwidth+1));
return completeRevData.slice(start,end);
};
this.getSecondrySliderSelection = function (i){
return i ? that.getSelection().slice(0,i+1).reverse():that.getSelection().reverse();
};
this.wikiNameSpace = function (language) {
usingLanguageNamespace = language;
baseUrl = 'https://'+language+'.wikipedia.org/w/api.php?callback=?';
};
this.parseData = function(data){
data.forEach(function(d,i,array){
if(array[i+1]){
d.editSize = d.size - array[i+1].size;
//Edit direction positive or negative
if (d.editSize >= 0){
d.dir = 'p';
}
else{
d.dir = 'n';
d.editSize = d.editSize * -1;
}
if (i == 0 ){
d.timeDiff = 0;
}
else{
d.timeDiff = Math.floor((timeParse.parse(array[i-1].timestamp) - timeParse.parse(d.timestamp) ) /86400000);
}
}
else{
d.editSize = null;
d.timeDiff = 0;
}
//console.log(d.editSize);
if (d.parentid == 0){
d.editSize = d.size;
d.timeDiff = 0;
d.dir = 'p';
}
if ('minor' in d){
d.minor = true;
}
else{
d.minor = false;
}
d.date = timeParse.parse(d.timestamp);
});
data.svgWidth = data.length*(that.barGraphBarwidth+1) < 100 ? 100 : data.length*(that.barGraphBarwidth+1);
data.yscale = [0,d3.max(data, function(d) { return d.editSize; })];
};
this.fixScales = function (){
if(xscale == null){
yscale = d3.scale.pow().exponent(.4).domain([0,d3.max(completeRevData, function(d) { return d.editSize; })])
.range([1,outerLength]);
yscale2 = d3.scale.pow().exponent(.4).domain([0,d3.max(completeRevData, function(d) { return d.editSize; })])
.range([3,enlargedLength]);
xscale = d3.scale.linear().domain([0,completeRevData.svgWidth]).range([0,completeRevData.svgWidth]);
//cleanup pegscale
pegScale = d3.scale.linear().domain([0,completeRevData.svgWidth]).range([0,completeRevData.svgWidth]);
diffscale = d3.scale.linear().domain([0,d3.max(completeRevData, function(d) { return d.timeDiff; })]).range([0,10]);
}
else{
yscale.domain([0,d3.max(completeRevData, function(d) { return d.editSize; })]);
yscale2.domain([0,d3.max(completeRevData, function(d) { return d.editSize; })]);
xscale.domain([0,completeRevData.svgWidth]).range([0,completeRevData.svgWidth]);
diffscale.domain([0,d3.max(completeRevData, function(d) { return d.timeDiff; })]);
}
svg.attr('width',completeRevData.svgWidth);
};
this.addData = function (rect,data,yscale){
bars = rect.selectAll('rect').data(data);
bars.enter().append("rect");
bars.attr({
'x':function(d,i){ return i * that.barGraphBarwidth + i; },
'y':function(d,i){ return d.dir == 'p' ? outerLength - yscale(d.editSize) : outerLength; },
'width':that.barGraphBarwidth,
'height':function(d,i){ return yscale(d.editSize); },
'class':function(d,i){ return d.dir == 'p' ? 'blue':'red'; },
'timestamp':function(d){ return d.timestamp; }
});
bars.exit().remove();
};
this.callBrush = function (){
if (brush != null){
brush.x(xscale);
d3.select('#primaryBrush').call(brush);
}
else{
brush = d3.svg.brush().x(xscale).extent([0, 70]).on("brush", brushmove);
var brushg = svgBox.append("g").attr("class", "brush")
.attr("id","primaryBrush")
.call(brush);
brushg.selectAll("rect").attr("height", 100)
.attr("y",0);
//Cleanup
brushg.selectAll(".resize rect").attr("width",2).attr("x",-2);
//remove it from here
$('#outer').scroll();
//Fix it
//brushmove();
}
temp();
cleanupProgressBar();
};
this.callPeg = function(){
if (peg != null){
peg.x(pegScale);
d3.select('#peg').call(peg);
}
else{
peg = d3.svg.brush().x(pegScale).extent([0,0]).on("brush", pegMove);
pegHandleContainer = svgEnlargedBox.append("g")
.attr("id","peg")
.call(peg);
pegHandleContainer.selectAll(".extent,.resize").remove();
pegHandleContainer.select(".background")
.attr("height", enlargedLength * 2);
/* Peg */
pegHandle = pegHandleContainer.append("g");
pegHandle.append("rect")
.attr("class", "peg")
.attr("height",enlargedLength * 2)
.attr("width",2)
.attr("y", 0);
pegHandle.append("rect")
.attr("class", "peg")
.attr("height",5)
.attr("width",10)
.attr("y", 0)
.attr("x",-4);
}
var lastEditX = 0;
newGraph.filter(function(d){
lastEditX = d.lastX;
});
pegHandleContainer.call(peg.event)
.transition() // gratuitous intro!
.duration(750)
.call(peg.extent([lastEditX,lastEditX]))
.call(peg.event);
};
this.handleScroll = function (){
//d3.select('#outer').transition().property('scrollLeft',brush.extent()[0]);
$('#outer').scrollLeft(brush.extent()[0]);
};
this.fixWidth = function (width){
d3.select('#enlarged svg').style('width',width).select('line').attr('x2',width);
endLine.attr({'x1':width,'x2':width});
};
function brushmove(){
var brushExtent = brush.extent();
var slid_s = d3.event.target.extent();
if(slid_s[1] - slid_s[0] < 100){
/* the secondary slider */
temp();
if (brushExtent[1]> completeRevData.length*(that.barGraphBarwidth + 1) - 50){
userNotification('load');
that.getData();
}
}
else{
d3.event.target.extent([slid_s[0],slid_s[0]+95]); d3.event.target(d3.select(this));
}
/*Calling Primary Slider callback*/
cleanupProgressBar();
if (that.primarySliderCallback){
that.primarySliderCallback();
}
}
function cleanupProgressBar(){
progressBar.attr('stroke-width',0);
};
this.refreshProgressBar = function (d){
progressBar.attr({'stroke-width':progressBarWidth,
'x1':d.lastX,
'x2':d.lastX+progressBarWidth
});
};
function highlightSelectedEdit(graph,field,id,color){
graph.filter(function(d){
return d[field] == id;
}).style({'fill':color});
};
function cleanupHighlightSelectedEdit(graph,field,id,color,type){
graph.filter(function(d){
return type ? !(d[field] == id) : d[field] == id;
}).style({'fill':color});
};
function temp(){
var brushExtent = brush.extent();
var new_graph = completeRevData.slice(Math.floor(brushExtent[0]/(that.barGraphBarwidth+1)),Math.ceil(brushExtent[1]/(that.barGraphBarwidth+1)) );
if (new_graph.length){
var diffScaleAbs = 0;
var lastX = 0;
//console.log(brushExtent);
newGraph = secondaryGraph.selectAll("rect").data(new_graph);
newGraph.enter().append("rect");
newGraph.attr("x",function(d,i){
diffScaleAbs += d.timeDiff*3;
lastX = diffScaleAbs + i*that.enlargedBarGraphBarwidth + i;
d.lastX = lastX;
return lastX;
})
.attr("y",function(d,i){
return d.dir == 'p' ? enlargedLength - yscale2(d.editSize) : enlargedLength+progressBarWidth;})
.attr("width",that.enlargedBarGraphBarwidth)
.attr("height",function(d){ return yscale2(d.editSize); })
.attr("class",function(d){ return d.dir=='p'?'pointer blue':'pointer red'; })
.attr("timeDiff",function(d){ return d.timeDiff; })
.attr("data-title",function(d){ return d.user; })
.attr("number",function(d,i){ return i; }); ;
newGraph.exit().remove();
cleanupHighlightSelectedEdit(newGraph,'user',hoverUser,'#b4e2ef',1);
highlightSelectedEdit(newGraph,'user',hoverUser,'gold');
startDate.text(timeParse.parse(new_graph[0].timestamp).toDateString().slice(4));
endDate.text(timeParse.parse(new_graph[new_graph.length-1].timestamp).toDateString().slice(4)).attr({'x':lastX-47});
enlargedBarGraphSvgWidth = lastX + that.enlargedBarGraphBarwidth;
that.fixWidth(enlargedBarGraphSvgWidth);
pegScale.domain([0,enlargedBarGraphSvgWidth]).range([0,enlargedBarGraphSvgWidth]);
that.callPeg();
}
}
var pegMove = function(){
console.log('Peg moved');
var relaxedSelectedBar;
var value = peg.extent()[0];
if (d3.event.sourceEvent) { // not a programmatic event
value = pegScale.invert(d3.mouse(this)[0]);
peg.extent([value, value]);
that.pegMoved = true;
//Pausing if the player is playing
if (that.primarySliderCallback){
that.primarySliderCallback();
cleanupProgressBar();
}
}
selectedBar = newGraph.filter(function(d,i){
if (d.lastX < value && value < d.lastX + that.enlargedBarGraphBarwidth){
cleanupHighlightSelectedEdit(bars,'user',hoverUser,'gray',0);
cleanupHighlightSelectedEdit(newGraph,'user',hoverUser,'#b4e2ef',0);
hoverUser = d.user;
highlightSelectedEdit(bars,'user',hoverUser,'gold');
highlightSelectedEdit(newGraph,'user',hoverUser,'gold');
var revInfo = {
'revid': d.revid,
'user': d.user,
'timestamp': d.timestamp.slice(0,10),
'minor': d.minor ? 'M' : null
};
infoBox(revInfo);
}
if (d.lastX < value){
relaxedSelectedBar = i;
}
return d.lastX < value && value < d.lastX + that.enlargedBarGraphBarwidth;
});
//Getting the selected edits
that.selectedEdits = that.getSecondrySliderSelection(relaxedSelectedBar);
console.log(selectedBar);
pegHandle.attr("transform","translate("+pegScale(value)+")");
};
return this;
};
function playback(){
var diff = new htmlDiff();
diff.clearHash();
var listOfRevisions = [], pageTitle, startRev, endRev, revisionInfo, modifyList;
var playAnimation = true;
this.animationSpeed = 1000;
var usingLanguageNamespace = 'en';
var modifyList =[];
var revisionListDict = {
'format': 'json',
'action': 'query',
'prop': 'revisions',
'rvprop': 'ids|user|timestamp|size|flags',
'rvdir': 'newer',
};
var compareRevisionDict = {
'format': 'json',
'action': 'query',
'prop': 'revisions',
'rvprop': 'content',
'rvexpandtemplates': '',
'rvparse': '',
};
var baseUrl = 'https://en.wikipedia.org/w/api.php?callback=?';
var that = this;
this.wikiNameSpace = function (language) {
usingLanguageNamespace = language;
baseUrl = 'https://'+language+'.wikipedia.org/w/api.php?callback=?';
};
this.cleanUp = function(){
listOfRevisions = [];
$('#wikiBody').html('');
};
this.getRevisions = function (page,selectedEdits){
listOfRevisions = selectedEdits;
pageTitle = page;
startRev = listOfRevisions.shift().revid;
revisionInfo = listOfRevisions[0];
endRev = revisionInfo.revid;
listOfRevisions.shift();
playAnimation = true;
$('body').trigger( "editAnimationBegins", [startRev] );
that.wikiDiff();
};
/** Caching the results memoization **/
var hashTable = hashTable || {};
function getRequest(revid){
//var deferredReady = $.Deferred();
if (revid in hashTable){
//console.log('cache hit', revid);
return true;
}
else{
//console.log('cache fail',revid );
compareRevisionDict['revids'] = revid;
return $.getJSON(baseUrl,compareRevisionDict,function(data){
var resultKey = Object.keys(data.query.pages);
var dataRev = data.query.pages[resultKey].revisions[0]['*'];
hashTable[revid] = dataRev;
});
}
};
var empty = function (list){
var l =[];
for (ll in list ){
if ($(list[ll]).text().trim()){
l.push(list[ll]);
}
}
return l;
};
//hard coding parent element
var removeRef = function(parentElement){
$('del a[href^=#cite_note],del a[href^=#cite_ref],del *[id^=cite_note]').remove();
$('del sup a[href^=#cite_note]').parent().parent().remove();
$('a[href^=#cite_note] del').remove();
$('a[href^=#cite_note] ins').each(function(){
var element = $(this);
element.replaceWith(element.text());
});
};
this.wikiDiff = function(){
//Creating the info box about the revisions
var revInfo = {
'revid': revisionInfo.revid,
'user': revisionInfo.user,
'timestamp': revisionInfo.timestamp.slice(0,10),
'minor': revisionInfo.hasOwnProperty('minor')? 'M' : null
};
that.infoBox(revInfo);
$.when(getRequest(startRev),getRequest(endRev)).done(function(){
var dataFirstRev = hashTable[startRev];
var dataSecondRev = hashTable[endRev];
console.time('diff');
var modifiedHtml = diff.diff(dataFirstRev,dataSecondRev);
console.timeEnd('diff');
$('#wikiBody').html(modifiedHtml);
// To remove ref changes
removeRef();
//console.time('making array');
modifyList = empty($.makeArray($('del,ins')));
//console.timeEnd('making array');
that.animateDiff();
});
};
this.infoBox = function (revInfo){
//$('#infoBox').html('');
for (key in revInfo){
if(key == 'revid'){
var urlBase = 'https://'+usingLanguageNamespace+'.wikipedia.org/w/index.php?oldid='+revInfo[key];
var anchor =$('<a>'+revInfo[key]+'</a>').attr({'target':'_blank','href':urlBase});
$('#infoBox .revisionLink').html(anchor);
}
else if(key == 'timestamp'){
$('#infoBox .editDate').html(revInfo[key]);
}
else if(key == 'user'){
$('#infoBox .userName').html(revInfo[key]);
}
else{
var minor = revInfo[key]?revInfo[key]:'';
$('#infoBox .minor').html(minor);
}
}
};
this.animateDiff = function () {
if(playAnimation){
if(modifyList.length>0){
var element = modifyList[0];
var scrollPromise = that.customScrollIntoView('#wikiBody',element);
$.when(scrollPromise).then(function(){
if ($(element).prop('tagName') == 'DEL'){
//console.log('scroll end:: animation begin add ',Date.now(),modifyList.length,element.id);
return $(element).fadeOut(that.animationSpeed);
}
else{
//console.log('scroll end:: animation begin delete ',Date.now(),modifyList.length,element.id);
return $(element).fadeIn(that.animationSpeed).css('display','inline-block');
}
}).then(function(){
//console.log('animation end',Date.now(),modifyList.length,element.id);
modifyList.shift();
that.animateDiff();
});
}
else{
$('body').trigger( "editAnimationBegins", [endRev] );
if(listOfRevisions.length>0){
startRev = endRev;
revisionInfo = listOfRevisions.shift();
endRev = revisionInfo.revid;
that.wikiDiff();
}
else{
$('#playButton').removeClass().addClass('play');
}
}
}
};
var getOffsetTop = function(element){
if (element.parentElement.tagName == 'TD'){
return element.parentElement.offsetTop;
}
else{
return element.offsetTop;
}
};
this.customScrollIntoView = function(parent,element){
//console.log('scroll begin',Date.now(),modifyList.length,element);
var offset = 0;
if ($(element).css('display') == 'none'){
offset = getOffsetTop($(element).css('display','inline-block')[0]);
$(element).css('display','none');
}
else{
offset = getOffsetTop(element);
}
return $(parent).animate({scrollTop: offset }, that.animationSpeed);
};
this.startPlayback = function(selectedEdits,reset){
userNotification('play');
$('#playButton').removeClass('play').addClass('pause');
var page = $('#pageTitle').val();
//Handling the case where the the player was paused
if(!slider.pegMoved && listOfRevisions.length && listOfRevisions.length > 0){
playAnimation = true;
that.animateDiff();
}
else{
//refractor this
selectedEdits = slider.selectedEdits;
slider.refreshProgressBar(selectedEdits[0]);
slider.pegMoved = false;
that.getRevisions(page,selectedEdits);
}
};
this.pausePlayback = function(button){
userNotification('pause');
$(button).removeClass('pause').addClass('play');
$('del,ins').finish();
playAnimation = false;
};
//Attaching control for play / pause
this.playbackControl = function(){
$('#playButton').click(function(){
var button = this;
if($(button).hasClass('play')){
that.startPlayback();
}
else{
that.pausePlayback(button);
}
});
};
};
function addLanguageOptions(languages){
for(language in languages){
var option = $('<option>').val(language).html(languages[language]);
$('select.languageNamespace').append(option);
}
};
//The fullscreen Api handling
function fullscreenApi(screen){
var elem = $(screen).get(0);
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
}
else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
};
function chooseRandomArticle(lang_code) {
lang_code = lang_code ? lang_code : 'en';
var api_url = 'https://' + lang_code + '.wikipedia.org/w/api.php?callback=?';
var params = {
'action': 'query',
'list': 'random',
'rnnamespace': 0,
'rnlimit': 1,
'format': 'json'
};
$.getJSON(api_url, params, function(data, e) {
var page_title = data['query']['random'][0]['title'];
console.log('Randomly selected:', page_title);
$('#overlayTitle').val(page_title);
$('#overlayLoad').trigger('click');
});
};
loadTool = function(){
//Setting the max-width of the slider to the screen width
$('#outer').css('max-width',$(window).width()-240+'px');
//Creating Language Namespace dropdown
wikiPlayback = new playback();
//Fullscreen
$('#fullscreen').click(function(){
fullscreenApi('body');
});
//Speed Control
$(".noUiSlider").noUiSlider({
range: [500, 5000],
start: 4500,
step: 200,
handles: 1,
slide: function(){
wikiPlayback.animationSpeed = 5500 - $(this).val();
}
});
//Attaching Play/Pause contorls
wikiPlayback.playbackControl();
//Attaching Event to get the list of revisions
var pageTitle ;
start = function(titleHolder){
$('#wikiBody').show();
pageTitle = $(titleHolder).val();
wikiPlayback.cleanUp();
slider.cleanUp();
slider.getData(pageTitle);
};
$('#pageButton').click(function(){
start('#pageTitle');
});
$('#overlayRand').click(function() {
chooseRandomArticle();
});
$('#overlayLoad').click(function(){
$('#pageTitle').val($('#overlayTitle').val());
start('#pageTitle');
$('#overlay').slideUp(2500);
});
var pause = function(){
var button = $('#playButton');
wikiPlayback.pausePlayback(button);
};
var play = function(edits,reset){
var selectedEdits = reset ? edits : slider.getSecondrySliderSelection();
wikiPlayback.startPlayback(selectedEdits,reset);
};
slider = new wikiSlider({ height : 400,
barGraphBarwidth : 1,
enlargedBarGraphBarwidth : 5,
primarySliderMoveCallback : pause,
secondrySliderMoveCallback : play
});
slider.init();
$('body').on( "editAnimationBegins", function( event,revid ) {
slider.modifySecondryGraph('revid',revid);
});
/*
addLanguageOptions(languageNamespace);
$('select.languageNamespace').change(function(){
var language = $(this).val();
wikiPlayback.wikiNameSpace(language);
slider.wikiNameSpace(language);
});
*/
};
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.