106 lines
2.9 KiB
JavaScript
106 lines
2.9 KiB
JavaScript
|
!function ($) {
|
||
|
|
$.fn.h6Size = function () {
|
||
|
|
$h6 = this;
|
||
|
|
$h6.each(function(i) {
|
||
|
|
var W = $(this).width()-$(this).find('.toggle-control').width()-$(this).children('b').outerWidth(true)-5;
|
||
|
|
$(this).children('span').width(W);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}(window.jQuery);
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
// $('.toggle-check').togglebox();
|
||
|
|
var $mapTree = $('.map-tree'),
|
||
|
|
$mapTreeItem = $mapTree.children('li'),
|
||
|
|
$mapItemH6 = $mapTree.find('h6');
|
||
|
|
var mapItem = function(w) {
|
||
|
|
var WinW = $(window).width(),
|
||
|
|
W = null;
|
||
|
|
if(WinW < 767) {
|
||
|
|
W = w;
|
||
|
|
} else {
|
||
|
|
W = (w-64)/2;
|
||
|
|
};
|
||
|
|
return W;
|
||
|
|
};
|
||
|
|
$('#map-tree-language').css('margin-left',ml = function() {
|
||
|
|
var W = null;
|
||
|
|
$(this).children('li').map(function(i, v) {
|
||
|
|
W -= $(v).width()/2;
|
||
|
|
});
|
||
|
|
return W;
|
||
|
|
});
|
||
|
|
$mapTree.each(function(i) {
|
||
|
|
$('.line').append("<ul class='line"+(i+1)+" fade'/>");
|
||
|
|
if(i < 1) {
|
||
|
|
$('.line'+(i+1)).addClass("in active");
|
||
|
|
};
|
||
|
|
$(this).children('li').each(function(j) {
|
||
|
|
$('.line').children('.line'+(i+1)).append("<li/>");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
$mapTreeItem.children('h6').find('span').before(function() {
|
||
|
|
var I = ($(this).parents('li').index()+1);
|
||
|
|
if (I < 10) {
|
||
|
|
I = "0"+I;
|
||
|
|
}
|
||
|
|
return "<b>" + I + "</b>";
|
||
|
|
});
|
||
|
|
$mapTreeItem.width(mapItem($mapTree.width()))
|
||
|
|
$mapItemH6.h6Size();
|
||
|
|
|
||
|
|
$mapTree.each(function() {
|
||
|
|
$(this).masonry({
|
||
|
|
itemSelector: '.map-tree > li',
|
||
|
|
gutter: 60,
|
||
|
|
});
|
||
|
|
$(this).masonry('on', 'layoutComplete', function(msnryInstance, laidOutItems) {
|
||
|
|
// console.log(msnryInstance.element)
|
||
|
|
var element = msnryInstance.element;
|
||
|
|
$(element).children('li').children('h6').each(function(i) {
|
||
|
|
$('ul.line'+$(element).index()).children('li').eq(i).css('top', ($(this).offset().top-$('ul.line'+$(element).index()).offset().top)+15);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
$mapTree.each(function(j) {
|
||
|
|
$(this).children('li').children('h6').each(function(i) {
|
||
|
|
$('ul.line'+(j+1)).children('li').eq(i).css('top',($(this).offset().top-$('ul.line'+(j+1)).offset().top)+15);
|
||
|
|
});
|
||
|
|
$(this).children('li').on('mouseenter', function() {
|
||
|
|
$('ul.line'+(j+1)).children('li').eq($(this).index()).css({
|
||
|
|
'background-color': '#0088cc',
|
||
|
|
'z-index': 1,
|
||
|
|
})
|
||
|
|
});
|
||
|
|
$(this).children('li').on('mouseleave', function() {
|
||
|
|
$('ul.line'+(j+1)).children('li').eq($(this).index()).css({
|
||
|
|
'background-color': '#DBDBDB',
|
||
|
|
'z-index': 0,
|
||
|
|
})
|
||
|
|
});
|
||
|
|
});
|
||
|
|
$('#map-tree-language a[data-toggle="tab"]').on('shown', function (e) {
|
||
|
|
var target = $(e.target).attr('href');
|
||
|
|
// console.log($(target).index())
|
||
|
|
$('ul.line'+$(target).index()).addClass("in active").siblings().removeClass("in active");
|
||
|
|
$mapTreeItem.width(mapItem($(target).width()))
|
||
|
|
// $mapTree.map(function(i,v){
|
||
|
|
// console.log(v.id +" : " +$(v).width() )
|
||
|
|
// })
|
||
|
|
$mapItemH6.h6Size();
|
||
|
|
$(target).masonry({
|
||
|
|
itemSelector: '.map-tree > li',
|
||
|
|
gutter: 60,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
$(window).resize(function() {
|
||
|
|
var W = null;
|
||
|
|
$mapTree.map(function(i,v){
|
||
|
|
if($(v).width() > 0) {
|
||
|
|
W = $(v).width();
|
||
|
|
};
|
||
|
|
});
|
||
|
|
$mapTreeItem.width(mapItem(W));
|
||
|
|
$mapItemH6.h6Size();
|
||
|
|
});
|
||
|
|
});
|