MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
(function($) {
var sR = {
    defaults: {
        slideSpeed: 400,
        easing: false,
        callback: false     
    },
    thisCallArgs: {
        slideSpeed: 400,
        easing: false,
        callback: false
    },
    methods: {
        up: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowUp" />');
            var currentPadding = $cells.css('padding');
            $cellContentWrappers = $(this).find('.slideRowUp');
            $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
                                                                                                                paddingTop: '0px',
                                                                                                                paddingBottom: '0px'},{
                                                                                                                complete: function () {
                                                                                                                    $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                                                                                                                    $(this).parent().css({'display':'none'});
                                                                                                                    $(this).css({'padding': currentPadding});
                                                                                                                }});
            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);                                                                                                    
            return $(this);
        },
        down: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
            $cellContentWrappers = $cells.find('.slideRowDown');
            $(this).show();
            $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });

            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);
            return $(this);
        }
    }
};

$.fn.slideRow = function(method,arg1,arg2,arg3) {
    if(typeof method != 'undefined') {
        if(sR.methods[method]) {
            return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
        }
    }
};
})(jQuery);

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js");

jQuery.fn.extend({
	treetable: function() {
		var $table = $(this);
		$table.addClass("tt-table");

		var $items = $table.find("div.tt");
		var index = {};
		var items = [];

		// add items to index
		$items.each(function (i, el) {
			var $el = $(el);
			var id = $el.data('tt-id');
			var parent = $el.data('tt-parent');
			if(parent === '') {
				parent = undefined;
			}

			var item = {
				id: id,
				level: 0,
				parent: parent,
				children: [],
				el: $el,
				left: 0,
				width: $el.width() + 12
			};

			index[id] = item;
			items.push(item);
		});

		// make a graph from parent relations
		items.forEach(function (item) {
			if (item.parent !== undefined) {
				item.parent = index[item.parent];
				item.level = item.parent.level+1;
				item.parent.children.push(item);
			}
		});

		// pad items
		items.forEach(function (item) {

			item.left = 0;
			if (item.parent !== undefined) {
				item.left = item.parent.left + item.parent.width;
			}
		});

		// position items
		items.forEach(function (item) {
			//console.log(el.left);
			item.el.css("left", item.left);
		});

		// wrap contents
		items.forEach(function (item) {
			item.el.html('<div class="content">' + item.el.html() + '</div>');
		});

		// add parent classes
		items.forEach(function (item) {
			
			item.el.closest("tr").addClass("level" + item.level);
			
			if(item.parent == undefined)
				item.el.closest("tr").addClass("odd");
			
			var odd = true;
			
			if (item.children.length > 0) {
				item.children.forEach(function (child) {
					if(odd)
						child.el.closest("tr").addClass("odd");
					else
						child.el.closest("tr").addClass("even");
					odd = !odd;
				});
				
				item.el.addClass("tt-parent");
				item.showChildren = true;
				
				var className = item.el.attr("data-tt-id");
				//item.el.closest("tr").addClass(className);
				
				var children = item.children.slice();
				while(children.length > 0)
				{
					children[0].el.closest("tr").addClass(className);
					if(children[0].children.length > 0)
						children.push.apply(children, children[0].children);
					
					children.shift();
				}
				
				//$("." + className).wrapAll("<span id='children_group_" + item.el.attr("data-tt-id") + "'></col>");
			}
		});
		
		// draw lines
		items.forEach(function (item) {

			if (item.parent === undefined) {
				return;
			}
			
			if(item.el.prop("invisible"))
				return ;

			var childPos = item.el.position();
			var parent = item.parent;

			var parentPos = parent.el.position();
			var height = childPos.top - parentPos.top;
			var width = item.left - parent.left - parent.width/2;
			var left = parent.left - item.left + (parent.width / 2);

			var $tail = $('<div class="tail"></div>').css({
				height: height,
				width: width,
				left: left
			});
			
			item.el.prepend($tail);
		});
		
		function updateLines()
		{
			//Update height of all items
			items.forEach(function (item) {
			
				if (item.parent === undefined) {
					return;
				}
			
				var childPos = item.el.position();
				var parent = item.parent;
				
				var parentPos = parent.el.position();
				var height = childPos.top - parentPos.top;
				
				item.el.find(".tail").css("height", height);
			});
		}

		// handle click event
		$table.on("click", "div.tt div.content", function (e) {
		
			var $el = $(e.currentTarget).closest(".tt");
			var $tr = $el.closest("tr");
			var id = $el.data('tt-id');
			var item = index[id];

			if (item.showChildren === true) {
				// hide all children
				item.showChildren = false;

				/*function hide(parentId) {
					var item = index[parentId];
					item.children.forEach(function (child) {
						if (child.showChildren !== undefined) {
							child.showChildren = false;
						}

						$(child.el).closest("tr").addClass("tt-hide");
						hide(child.id);
					});
				}

				hide(id);*/
				$("." + $el.attr("data-tt-id")).slideRow("up", 400, function(){updateLines()});
			}
			else {
				// show direct children
				item.showChildren = true;
				/*item.children.forEach(function (child) {
					$(child.el).closest("tr").removeClass("tt-hide");
				});*/
				window.location.hash = '#' + $el.attr("data-tt-id");
				$("." + $el.attr("data-tt-id")).slideRow("down", 400, function(){updateLines()});
			}
			updateLines();
		});
		
		$( window ).resize(function() {
			updateLines();
		});

		// initially hide all children
		items.forEach(function (item) {
			if(item.children.length > 0) {
				if (item.el.attr("data-hide") == "true" || (item.el.attr("data-hide") != "true" && item.parent != undefined)) {
					//item.el.find(".content").click();
					if(window.location.hash != "#" + item.el.attr("data-tt-id"))
					{
						item.showChildren = false;
						$("." + item.el.attr("data-tt-id")).hide();
					}else{
						item.showChildren = true;
					}
					
					
				}
			}
		});
		
		updateLines();
	}
});


$(document).ready(function() {
   $("#treeviewtable").treetable();
});