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,
		callback_ticking: false
    },
    thisCallArgs: {
        slideSpeed: 400,
        easing: false,
        callback: false,
		callback_ticking: false
    },
    methods: {
        up: function (arg1,arg2,arg3,arg4) {
            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;
				if(typeof arg3 == 'function'){
					sR.thisCallArgs.callback_ticking = arg3;
				}
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function' && typeof arg2 != 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
			if(typeof arg4 == 'function') {
                sR.thisCallArgs.callback_ticking = arg4;
            }else if(typeof arg4 == 'undefined' && (typeof arg2 != 'function' || typeof arg3 != 'function')){ 
				sR.thisCallArgs.callback_ticking = sR.defaults.callback_ticking; 
			}
			
			
			
            var $cells = $(this).children('td');
            $cells.wrapInner('<div class="slideRowUp" />');
            var currentPadding = $cells.css('padding');
            $cellContentWrappers = $(this).find('.slideRowUp');
			var wrappersCounterTicking = 0;
			var wrappersCounter = 0;
            $cellContentWrappers.slideUp({
				duration: sR.thisCallArgs.slideSpeed,
				easing: sR.thisCallArgs.easing,
				progress: function(ani, num, rem){
					wrappersCounterTicking++;
					if(wrappersCounterTicking == $cellContentWrappers.length)
						wrappersCounterTicking = 0;
					if(wrappersCounterTicking == $cellContentWrappers.length-1 && typeof sR.thisCallArgs.callback_ticking == "function"){
						sR.thisCallArgs.callback_ticking.call(this);
					}
				}
			}).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});
					wrappersCounter++;
					if(wrappersCounter == $cellContentWrappers.length-1 && typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
				},
			});                                                                                             
            return $(this);
        },
        down: function (arg1,arg2,arg3,arg4) {
            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;
				if(typeof arg3 == 'function'){
					sR.thisCallArgs.callback_ticking = arg3;
				}
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function' && typeof arg2 != 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
			if(typeof arg4 == 'function') {
                sR.thisCallArgs.callback_ticking = arg4;
            }else if(typeof arg4 == 'undefined' && (typeof arg2 != 'function' || typeof arg3 != 'function')){
				sR.thisCallArgs.callback_ticking = sR.defaults.callback_ticking; 
			}
			
            var $cells = $(this).children('td');
            $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
            $cellContentWrappers = $cells.find('.slideRowDown');
			var wrappersCounterTicking = 0;
			var wrappersCounter = 0;
            $(this).show();
            $cellContentWrappers.slideDown({
				duration: sR.thisCallArgs.slideSpeed,
				easing: sR.thisCallArgs.easing,
				complete: function() {
					
					$(this).replaceWith( $(this).contents());
					wrappersCounter++;
					if(wrappersCounter == $cellContentWrappers.length-1 && typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
				},
				progress: function(ani, num, rem){
					wrappersCounterTicking++;
					if(wrappersCounterTicking == $cellContentWrappers.length)
						wrappersCounterTicking = 0;
					if(wrappersCounterTicking == $cellContentWrappers.length-1 && typeof sR.thisCallArgs.callback_ticking == "function"){
						sR.thisCallArgs.callback_ticking.call(this);
					}
				}
			});
            return $(this);
        }
    }
};

$.fn.slideRow = function(method,arg1,arg2,arg3,arg4) {
    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,
				number: i,
				level: 0,
				parent: parent,
				children: [],
				el: $el,
				left: 0,
                width: $el.width() + 12,
                opened: true,
                parentOpened: function() {
					this.opened = true;
                    this.children.forEach(function (child) {
						child.parentOpened();
					});
                },
                slideUp: function() {
                    this.opened = false;
                    
                    var lineUpdateUp = setInterval(function () {
                        updateLines(item);
                    }, 1);
                    $("." + this.el.attr("data-tt-id")).slideRow("up", 400, function () { clearInterval(lineUpdateUp); updateLines(); });
                },
                slideDown: function() {
                    this.opened = true;
					this.children.forEach(function (child) {
                        child.parentOpened();
                    });
                    var lineUpdateDown = setInterval(function () {
                        updateLines(item);
                    }, 1);
                    $("." + this.el.attr("data-tt-id")).slideRow("down", 400, function () { clearInterval(lineUpdateDown); updateLines(); });
                }
			};

			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 + Math.min(item.level > 1 ? 30 : 60, 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);

            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.opened = true;
				item.el.addClass("tt-parent");
				var className = item.el.attr("data-tt-id");
                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();
				}
			}
		});
		
		// draw lines
		items.forEach(function (item) {

			if (item.parent === undefined) {
				return;
			}
			
			if(item.el.attr("data-invisible") == "true") {
                item.el.hide();
				return ;
			}

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

			var parentPos = parent.el.position();
			var height = childPos.top - parentPos.top;
			var parentConnectionPosX = Math.min(item.level > 1 ? 15 : 30, parent.width/2);
			var width = item.left - parent.left - parentConnectionPosX;
			var left = parent.left - item.left + (parentConnectionPosX);

			var $tail = $('<div class="tail"></div>').css({
				height: height,
				width: width,
				left: left
			});
			
			item.el.prepend($tail);
		});
		
		function updateLines(limited) {
			//Update height of all items
			items.forEach(function (item) {
				
				if (item.parent === undefined) {
					return;
				}
				if(limited !== undefined && item.level != limited.level)
					return ;
				
				if(item.el.attr("data-invisible") == "true")
					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 id = $el.data('tt-id');
			var item = index[id];

            if (item.opened === true) {
                // hide all children
                item.slideUp();
            } else {
                // show direct children
				item.slideDown();

                window.location.hash = '#' + $el.attr("data-tt-id");
            }
			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.parent != undefined && item.el.attr("data-hide") != "false")) {
                    if (window.location.hash != "#" + item.el.attr("data-tt-id") && (item.parent != undefined && window.location.hash != "#" + item.parent.el.attr("data-tt-id"))) {
						item.opened = false;
						//item.el.hide();
						$("." + item.el.attr("data-tt-id")).hide();
                    } else {
                        item.opened = true;
						$('html, body').animate({
							scrollTop: item.el.offset().top-100
						}, 200);
						//item.el.show();
                    }
				}
			}
		});
		
		updateLines();
	}
});


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