MediaWiki:Common.js: Difference between revisions

From Vintage Story Wiki
No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
(function($) {
var sR = {
     defaults: {
     defaults: {
         slideSpeed: 400,
         slideSpeed: 400,
Line 73: Line 70:
                     }
                     }
},
},
});                                                                                            
});
            /*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);
             return $(this);
         },
         },
Line 127: Line 132:
}
}
});
});
            /*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);
             return $(this);
         }
         }
Line 162: Line 176:


var item = {
var item = {
                id: id,
id: id,
                index: i,
level: 0,
level: 0,
parent: parent,
parent: parent,
Line 169: Line 182:
el: $el,
el: $el,
left: 0,
left: 0,
                width: $el.width() + 12,
width: $el.width() + 12
                opened: true,
                parentOpened: function() {
                    if (this.opened) {
                        this.el.show();
                    }
                    this.children.forEach(function (child) {
                        child.parentOpened();
                    });
                },
                parentClosed: function() {
                    this.el.hide();
                    this.children.forEach(function (child) {
                        child.parentClosed();
                    });
                },
                show: function() {
                    this.opened = true;
                    this.el.show();
                    this.children.forEach(function (child) {
                        child.parentOpened();
                    });
                },
                slideUp: function() {
                    this.opened = true;
                    this.children.forEach(function (child) {
                        child.parentOpened();
                    });
                    var lineUpdateUp = setInterval(function () {
                        updateLines(item);
                    }, 1);
                    $("." + this.el.attr("data-tt-id")).slideRow("up", 400, function () { clearInterval(lineUpdateUp); updateLines(); });
                },
                hide: function() {
                    this.opened = false;
                    this.el.hide();
                    this.children.forEach(function (child) {
                        child.parentClosed();
                    });
                },
                slideDown: function() {
                    this.opened = false;
                    var lineUpdateDown = setInterval(function () {
                        updateLines(item);
                    }, 1);
                    $("." + this.el.attr("data-tt-id")).slideRow("down", 400, function () { clearInterval(lineUpdateDown); updateLines(); });
                }
};
};


Line 236: Line 203:
item.left = 0;
item.left = 0;
if (item.parent !== undefined) {
if (item.parent !== undefined) {
                item.left = item.parent.left + item.parent.width;
item.left = item.parent.left + Math.min(item.parent.width, 40);
}
}
});
});
Line 255: Line 222:
item.el.closest("tr").addClass("level" + item.level);
item.el.closest("tr").addClass("level" + item.level);
 
            if (item.index % 2 == 0)
if(item.parent == undefined)
                item.el.closest("tr").addClass("even");
item.el.closest("tr").addClass("odd");
            else
                item.el.closest("tr").addClass("odd");
var odd = true;
if (item.children.length > 0) {
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.el.addClass("tt-parent");
item.showChildren = true;
var className = item.el.attr("data-tt-id");
var className = item.el.attr("data-tt-id");
                var children = item.children.slice();
//item.el.closest("tr").addClass(className);
 
while(children.length > 0) {
var children = item.children.slice();
while(children.length > 0)
{
children[0].el.closest("tr").addClass(className);
children[0].el.closest("tr").addClass(className);
if(children[0].children.length > 0)
if(children[0].children.length > 0)
Line 273: Line 252:
children.shift();
children.shift();
}
}
//$("." + className).wrapAll("<span id='children_group_" + item.el.attr("data-tt-id") + "'></col>");
}
}
});
});
Line 283: Line 264:
}
}
if(item.el.attr("data-invisible") == "true") {
if(item.el.attr("data-invisible") == "true")
                item.hide();
{
item.el.hide();
return ;
return ;
}
}
Line 305: Line 287:
});
});
function updateLines(limited) {
function updateLines(limited)
{
//Update height of all items
//Update height of all items
items.forEach(function (item) {
items.forEach(function (item) {
Line 331: Line 314:
$table.on("click", "div.tt div.content", function (e) {
$table.on("click", "div.tt div.content", function (e) {
            var $el = $(e.currentTarget).closest(".tt");
var $el = $(e.currentTarget).closest(".tt");
var $tr = $el.closest("tr");
var id = $el.data('tt-id');
var id = $el.data('tt-id');
var item = index[id];
var item = index[id];


            if (item.opened === true) {
if (item.showChildren === true) {
                // hide all children
// hide all children
                item.slideDown();
item.showChildren = false;
            } else {
 
                // show direct children
/*function hide(parentId) {
                item.slideUp();
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);
});
}


                 window.location.hash = '#' + $el.attr("data-tt-id");
hide(id);*/
            }
var lineUpdateUp = setInterval(function () {
updateLines(item);
                 }, 1);
$("." + $el.attr("data-tt-id")).slideRow("up", 400, function(){clearInterval(lineUpdateUp); 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");
var lineUpdateDown = setInterval(function () {
updateLines(item);
                }, 1);
$("." + $el.attr("data-tt-id")).slideRow("down", 400, function(){clearInterval(lineUpdateDown); updateLines();});
}
updateLines();
updateLines();
});
});
Line 355: Line 364:
if(item.children.length > 0) {
if(item.children.length > 0) {
if (item.el.attr("data-hide") == "true" || (item.parent != undefined && item.el.attr("data-hide") != "false")) {
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.el.find(".content").click();
item.opened = false;
if(window.location.hash != "#" + item.el.attr("data-tt-id"))
item.el.hide();
{
                    } else {
item.showChildren = false;
                        item.opened = true;
$("." + item.el.attr("data-tt-id")).hide();
item.el.show();
}else{
                    }
item.showChildren = true;
$('html, body').animate({
scrollTop: item.el.offset().top-100
}, 200);
}
}
}
}
}

Revision as of 10:02, 6 November 2018

    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');
            $cellContentWrappers.slideUp({
				duration: sR.thisCallArgs.slideSpeed,
				easing: sR.thisCallArgs.easing,
				progress: function(ani, num, rem){
					if(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});
					if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
				},
			});
            /*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,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');
            $(this).show();
            $cellContentWrappers.slideDown({
				duration: sR.thisCallArgs.slideSpeed,
				easing: sR.thisCallArgs.easing,
				complete: function() {
					$(this).replaceWith( $(this).contents());
					if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
				},
				progress: function(ani, num, rem){
					if(typeof sR.thisCallArgs.callback_ticking == "function"){
						sR.thisCallArgs.callback_ticking.call(this);
					}
				}
			});

            /*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,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,
				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 + Math.min(item.parent.width, 40);
			}
		});

		// 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.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 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(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 $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);*/
				var lineUpdateUp = setInterval(function () {
					updateLines(item);
                }, 1);
				$("." + $el.attr("data-tt-id")).slideRow("up", 400, function(){clearInterval(lineUpdateUp); 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");
				var lineUpdateDown = setInterval(function () {
					updateLines(item);
                }, 1);
				$("." + $el.attr("data-tt-id")).slideRow("down", 400, function(){clearInterval(lineUpdateDown); 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.parent != undefined && item.el.attr("data-hide") != "false")) {
					//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;
						$('html, body').animate({
							scrollTop: item.el.offset().top-100
						}, 200);
					}
					
					
				}
			}
		});
		
		updateLines();
	}
});


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