P3X GitList

Raw View History

Blames found: 200 Mode: javascript Binary: false

Hang on, we reloading big blames...

ffe8814b

/** * Network Graph JS * This File is a part of the GitList Project at http://gitlist.org * * @license http://www.opensource.org/licenses/bsd-license.php * @author Lukas Domnick <lukx@lukx.de> http://github.com/lukx */

71f4e47c

( function( $ ){ // global config var cfg = {

77dd4e3b

laneColors: ['#ff0000', '#0000FF', '#00FFFF', '#00FF00', '#FFFF00', '#ff00ff'],

7fb0016a

laneHeight: 20, columnWidth: 42, dotRadius: 3

71f4e47c

};

b1cb35f3

71f4e47c

// Define the jQuery Plugins

b1cb35f3

71f4e47c

/** * DragScrollr is a custom made x/y-Drag Scroll Plugin for Gitlist * * TODO: Make this touch-scrollable */ $.fn.dragScrollr = function() { var lastX, lastY,

7e790b77

hotZone = 200,

71f4e47c

container = this.first(), domElement = container[0]; // so basically container without the jQuery stuff

68136679

71f4e47c

function handleMouseDown( evt ) { container.on('mousemove', handleMouseMove); container.on('mouseup', handleMouseUp); container.on('mouseleave', handleMouseUp); lastX = evt.pageX; lastY = evt.pageY; }

68136679

71f4e47c

function handleMouseMove(evt) { evt.preventDefault();

ffe8814b

7e790b77

// save the last scroll position to figure out whether the scroll event has entered the hot zone var lastScrollLeft = domElement.scrollLeft;

71f4e47c

domElement.scrollLeft = domElement.scrollLeft + lastX - evt.pageX; domElement.scrollTop = domElement.scrollTop + lastY - evt.pageY;

68136679

7e790b77

if( lastScrollLeft > hotZone && domElement.scrollLeft <= hotZone ) { container.trigger('enterHotZone'); } // when we move into the hot zone

b1cb35f3

71f4e47c

lastX = evt.pageX; lastY = evt.pageY; }

ffe8814b

71f4e47c

function handleMouseUp(evt) {

7e790b77

container.off('mousemove', handleMouseMove) .off('mouseup', handleMouseUp) .off('mouseleave', handleMouseUp);

b1cb35f3

}

ffe8814b

71f4e47c

// now bind the initial event container.on('mousedown', handleMouseDown);

ffe8814b

71f4e47c

// return this instead of container, because of the .first() we applied - remember? return this; };

ffe8814b

71f4e47c

function graphLaneManager() { var that = {}, occupiedLanes = [];

ffe8814b

71f4e47c

// "private" methods function findLaneNumberFor( commit ) {

00ba0710

71f4e47c

if( commit.lane ) {

00ba0710

// oh? we've already got a lane?

71f4e47c

return commit.lane.number; }

ffe8814b

71f4e47c

// find out which lane may draw our dot on. Start with a free one var laneNumber = findFreeLane(); // if the child is a merge, we need to figure out which lane we may render this commit on. // Rules are simple: A "parent" by the same author as the merge may render on the same line as the child // others take the next free lane. // furthermore, commits in a linear line of events may stay on the same lane, too if( commit.children.length > 0) { if( !commit.children[0].isMerge // linear ... || ( commit.children[0].isMerge && commit.children[0].author.email === commit.author.email ) // same author ) { laneNumber = commit.children[0].lane.number; } }

ffe8814b

71f4e47c

return laneNumber; } function findFreeLane() { var i = 0;

ffe8814b

71f4e47c

while( true ) { // if an array index is not yet defined or set to false, the lane with that number is free. if( !occupiedLanes[i] ) { return i; } i ++;

ffe8814b

} }

71f4e47c

that.occupy = function( lane ) { // make sure we work with lane numbers here if( typeof lane === 'object' ) { lane = lane.number; }

ffe8814b

71f4e47c

occupiedLanes[lane] = true; };

ffe8814b

71f4e47c

that.free = function( lane ) { // make sure we work with lane numbers here if( typeof lane === 'object' ) { lane = lane.number; }

ffe8814b

71f4e47c

occupiedLanes[lane] = false; };

ffe8814b

71f4e47c

that.getLaneForCommit = function( commit ) { // does this commit have a lane already? if( commit.lane ) return commit.lane;

ffe8814b

71f4e47c

var laneNumber = findLaneNumberFor( commit ); return that.getLane( laneNumber ); };

ffe8814b

71f4e47c

that.getLane = function(laneNumber) { return { 'number': laneNumber, 'centerY': ( laneNumber * cfg.laneHeight ) + (cfg.laneHeight/2), 'color': cfg.laneColors[ laneNumber % cfg.laneColors.length ] }; }; return that; }

77dd4e3b

71f4e47c

function commitDetailOverlay( ) { var that = {}, el = $('<div class="network-commit-overlay"></div>'), imageDisplay = $('<img/>').appendTo(el), messageDisplay = $('<h4></h4>').appendTo(el), metaDisplay = $('<p></p>').appendTo(el), authorDisplay = $('<a rel="author"></a>').appendTo(metaDisplay), dateDisplay = $('<span></span>').appendTo(metaDisplay), commit; el.hide(); /** * Pads an input number with one leading '0' if needed, and assure it's a string * * @param input Number * @returns String */ function twoDigits( input ) { if( input < 10 ) { return '0' + input;

ffe8814b

}

71f4e47c

return '' + input;

ffe8814b

}

71f4e47c

/** * Transform a JS Native Date Object to a string, maintaining the same format given in the commit_list view * 'd/m/Y \\a\\t H:i:s' * * @param date Date * @returns String */ function getDateString( date ) { return twoDigits( date.getDate() ) + '/' + twoDigits( date.getMonth() ) + '/' + date.getFullYear() + ' at ' + twoDigits(date.getHours()) + ':' + twoDigits(date.getMinutes()) + ':' + twoDigits(date.getSeconds()); }

ffe8814b

71f4e47c

/** * update the author view * * @param author */ function setAuthor( author ) { authorDisplay.html(author.name) .attr('href', 'mailto:' + author.email );

ffe8814b

71f4e47c

imageDisplay.attr('src', author.image ); }

ffe8814b

71f4e47c

/** * Set the commit that is being displayed in this detail overlay instance * * @param commit * @return that */ that.setCommit = function( commit ) { setAuthor( commit.author ); dateDisplay.html( ' authored on ' + getDateString( commit.date ) ); messageDisplay.html( commit.message ); return that; };

ffe8814b

71f4e47c

// expose some jquery functions

ffe8814b

71f4e47c

that.show = function() { el.show(); return that; };

ffe8814b

71f4e47c

that.hide = function() { el.hide(); return that; };

ffe8814b

71f4e47c

that.appendTo = function(where) { el.appendTo(where);

7fb0016a

71f4e47c

return that; };

7fb0016a

71f4e47c

that.positionTo = function( x, y ) { el.css('left', x + 'px'); el.css('top', y + 'px');

7e790b77

};

7fb0016a

acaf0269

that.outerWidth = function( ) { return el.outerWidth.apply(el, arguments); };

71f4e47c

return that;

ffe8814b

}

71f4e47c

function commitDataRetriever( startPage, callback ) { var that = {}, nextPage = startPage, isLoading = false, indicatorElements; that.updateIndicators = function() { if( isLoading ) { $(indicatorElements).addClass('loading-commits'); } else { $(indicatorElements).removeClass('loading-commits'); } };

ffe8814b

71f4e47c

that.bindIndicator = function( el ) { if( !indicatorElements ) { indicatorElements = $(el); } else {

7e790b77

indicatorElements = indicatorElements.add(el);

71f4e47c

}

7e790b77

71f4e47c

};

ffe8814b

71f4e47c

that.unbindIndicator = function( el ) { indicatorElements.not( el ); };

ffe8814b

71f4e47c

function handleNetworkDataLoaded(data) { isLoading = false; that.updateIndicators(); nextPage = data.nextPage;

ffe8814b

71f4e47c

if( !data.commits || data.commits.length === 0 ) { callback( null );

7fb0016a

}

ffe8814b

71f4e47c

callback(data.commits); }

ffe8814b

71f4e47c

function handleNetworkDataError() { throw "Network Data Error while retrieving Commits"; }

ffe8814b

71f4e47c

that.retrieve = function() {

68136679

71f4e47c

if( !nextPage ) { callback( null ); return; }

ffe8814b

71f4e47c

isLoading = true; that.updateIndicators(); $.ajax({ dataType: "json", url: nextPage, success: handleNetworkDataLoaded, error: handleNetworkDataError }); };

7fb0016a

7e790b77

that.hasMore = function () { return ( !!nextPage ); };

71f4e47c

return that;

68136679

}

77dd4e3b

7fb0016a

7e790b77

// the $(document).ready starting point

71f4e47c

$( function() { // initialise network graph only when there is one network graph container on the page if( $('div.network-graph').length !== 1 ) { return; }

7fb0016a

71f4e47c

var

7e790b77

// the element into which we will render our graph

71f4e47c

commitsGraph = $('div.network-graph').first(), laneManager = graphLaneManager(), dataRetriever = commitDataRetriever( commitsGraph.data('source'), handleCommitsRetrieved ), paper = Raphael( commitsGraph[0], commitsGraph.width(), commitsGraph.height()), usedColumns = 0, detailOverlay = commitDetailOverlay();

7fb0016a

00ba0710

dataRetriever.bindIndicator( commitsGraph.parent('.network-view') );

71f4e47c

detailOverlay.appendTo( commitsGraph );

7fb0016a

7e790b77

function handleEnterHotZone() {

71f4e47c

dataRetriever.retrieve(); }

7fb0016a

71f4e47c

function handleCommitsRetrieved( commits ) {

7fb0016a

71f4e47c

// no commits or empty commits array? Well, we can't draw a graph of that if( commits === null ) { handleNoAvailableData(); return; }

7fb0016a

71f4e47c

prepareCommits( commits ); renderCommits( commits ); }

77dd4e3b

71f4e47c

function handleNoAvailableData() {

0ea9d0df

window.console && console.log('No (more) Data available');

71f4e47c

}

ffe8814b

71f4e47c

var awaitedParents = {};

7fb0016a

71f4e47c

function prepareCommits( commits ) { $.each( commits, function ( index, commit) { prepareCommit( commit ); }); }

7fb0016a

71f4e47c

function prepareCommit( commit ) { // make "date" an actual JS Date object commit.date = new Date(commit.date*1000);

7fb0016a

71f4e47c

// the parents will be filled once they have become prepared commit.parents = [];

7fb0016a

71f4e47c

// we will want to store this commit's children commit.children = getChildrenFor( commit );

7fb0016a

71f4e47c

commit.isFork = ( commit.children.length > 1 ); commit.isMerge = ( commit.parentsHash.length > 1 );

7fb0016a

71f4e47c

// after a fork, the occupied lanes must be cleaned up. The children used some lanes we no longer occupy if ( commit.isFork === true ) { $.each( commit.children, function( key, thisChild ) { // free this lane laneManager.occupy( thisChild.lane ); }); } commit.lane = laneManager.getLaneForCommit( commit ); // now the lane we chose must be marked occupied again. laneManager.occupy( commit.lane ); registerAwaitedParentsFor( commit );

7fb0016a

}

71f4e47c

/** * Add a new childCommit to the dictionary of awaited parents * * @param commit who is waiting? */ function registerAwaitedParentsFor( commit ) { // This commit's parents are not yet known in our little world, as we are rendering following the time line. // Therefore we are registering this commit as "waiting" for each of the parent hashes $.each( commit.parentsHash, function( key, thisParentHash ) { // If awaitedParents does not already have a key for thisParent's hash, initialise as array if( !awaitedParents.hasOwnProperty(thisParentHash) ) { awaitedParents[thisParentHash] = [ commit ]; } else { awaitedParents[ thisParentHash ].push( commit ); } }); }

ffe8814b

71f4e47c

function getChildrenFor( commit ) { var children = [];

1cee41a0

71f4e47c

if( awaitedParents.hasOwnProperty( commit.hash )) { // there are child commits waiting children = awaitedParents[ commit.hash ];

1cee41a0

71f4e47c

// let the children know their parent objects $.each( children, function(key, thisChild ) { thisChild.parents.push( commit ); });

1cee41a0

71f4e47c

// remove this item from parentsBeingWaitedFor delete awaitedParents[ commit.hash ]; }

ffe8814b

71f4e47c

return children; }

ffe8814b

71f4e47c

var lastRenderedDate = new Date(0); function renderCommits( commits ) {

7fb0016a

71f4e47c

var neededWidth = ((usedColumns + Object.keys(commits).length) * cfg.columnWidth);

7fb0016a

71f4e47c

if ( neededWidth > paper.width ) { extendPaper( neededWidth, paper.height );

7e790b77

} else if( dataRetriever.hasMore() ) { // this is the case when we have not loaded enough commits to fill the paper yet. Get some more then... dataRetriever.retrieve();

71f4e47c

}

7fb0016a

71f4e47c

$.each( commits, function ( index, commit) { if( lastRenderedDate.getYear() !== commit.date.getYear() || lastRenderedDate.getMonth() !== commit.date.getMonth() || lastRenderedDate.getDate() !== commit.date.getDate() ) { // TODO: If desired, one could add a time scale on top, maybe. } renderCommit(commit); }); }

7fb0016a

71f4e47c

function renderCommit( commit ) { // find the column this dot is drawn on usedColumns++; commit.column = usedColumns; commit.dot = paper.circle( getXPositionForColumnNumber(commit.column), commit.lane.centerY, cfg.dotRadius ); commit.dot.attr({ fill: commit.lane.color, stroke: 'none', cursor: 'pointer' }) .data('commit', commit) .mouseover( handleCommitMouseover )

5aa29064

.mouseout( handleCommitMouseout ) .click( handleCommitClick );

71f4e47c

00ba0710

// maybe we have not enough space for the lane yet if( commit.lane.centerY + cfg.laneHeight > paper.height ) { extendPaper( paper.width, commit.lane.centerY + cfg.laneHeight ) }

71f4e47c

$.each( commit.children, function ( idx, thisChild ) { // if there is one child only, stay on the commit's lane as long as possible when connecting the dots. // but if there is more than one child, switch to the child's lane ASAP. // this is to display merges and forks where they happen (ie. at a commit node/ a dot), rather than // connecting from a line. // So: commit.isFork decides whether or not we must switch lanes early connectDots( commit, thisChild, commit.isFork ); });

7fb0016a

}

71f4e47c

/** * * @param firstCommit * @param secondCommit * @param switchLanesEarly (boolean): Move the line to the secondCommit's lane ASAP? Defaults to false */ function connectDots( firstCommit, secondCommit, switchLanesEarly ) { // default value for switchLanesEarly switchLanesEarly = switchLanesEarly || false; var lineLane = switchLanesEarly ? secondCommit.lane : firstCommit.lane; // the connection has 4 stops, resulting in the following 3 segments: // - from the x/y center of firstCommit.dot to the rightmost end (x) of the commit's column, with y=lineLane // - from the rightmost end of firstCommit's column, to the leftmost end of secondCommit's column // - from the leftmost end of secondCommit's column (y=lineLane) to the x/y center of secondCommit paper.path( getSvgLineString( [firstCommit.dot.attr('cx'), firstCommit.dot.attr('cy')], [firstCommit.dot.attr('cx') + (cfg.columnWidth/2), lineLane.centerY], [secondCommit.dot.attr('cx') - (cfg.columnWidth/2), lineLane.centerY], [secondCommit.dot.attr('cx'), secondCommit.dot.attr('cy')] ) ).attr({ "stroke": lineLane.color, "stroke-width": 2 }).toBack();

7fb0016a

71f4e47c

return; }

7fb0016a

71f4e47c

// set together a path string from any amount of arguments // each argument is an array of [x, y] within the paper's coordinate system function getSvgLineString( ) { if (arguments.length < 2) return; var svgString = 'M' + arguments[0][0] + ' ' + arguments[0][1]; for (var i = 1, j = arguments.length; i < j; i++){ svgString += 'L' + arguments[i][0] + ' ' + arguments[i][1]; } return svgString;

7fb0016a

}

71f4e47c

function handleCommitMouseover(evt) { detailOverlay.setCommit( this.data('commit'))

acaf0269

.show();

a357eb4b

var xPos = evt.pageX - commitsGraph.offset().left + commitsGraph.scrollLeft() - (detailOverlay.outerWidth()/2);

acaf0269

// check that x doesn't run out the viewport xPos = Math.max( xPos, commitsGraph.scrollLeft() + 10); xPos = Math.min( xPos, commitsGraph.scrollLeft() + commitsGraph.width() - detailOverlay.outerWidth() - 10); detailOverlay.positionTo( xPos,

a357eb4b

evt.pageY - commitsGraph.offset().top + commitsGraph.scrollTop() + 10);

7fb0016a

}

71f4e47c

function handleCommitMouseout(evt) { detailOverlay.hide(); }

5aa29064

function handleCommitClick( evt ) { window.open( this.data('commit').details ); }

71f4e47c

function getXPositionForColumnNumber( columnNumber ) { // we want the column's center point return ( paper.width - ( columnNumber * cfg.columnWidth ) + (cfg.columnWidth / 2 )); } function extendPaper( newWidth, newHeight ) { var deltaX = newWidth - paper.width; paper.setSize( newWidth, newHeight ); // fixup parent's scroll position paper.canvas.parentNode.scrollLeft = paper.canvas.parentNode.scrollLeft + deltaX; // now fixup the x positions of existing circles and lines paper.forEach( function( el ) { if( el.type === "circle" ) { el.attr('cx', el.attr('cx') + deltaX); } else if ( el.type === "path") { var newXTranslation = el.data('currentXTranslation') || 0; newXTranslation += deltaX; el.transform( 't' + newXTranslation + ' 0' ); el.data('currentXTranslation', newXTranslation); } }); } commitsGraph.dragScrollr();

7e790b77

commitsGraph.on('enterHotZone', handleEnterHotZone);

71f4e47c

// load initial data dataRetriever.retrieve( ); });

7e790b77

}( jQuery ));