/* global outdatedBrowser */ var prevChapter; var currentChapter; var introPopupTrigger = null; window.help_popup_visible = false; //event listener: DOM ready function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload !== 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); }; } } function getCurrentChapter() { var posts = $('.post'); var current = posts[0]; var arr = posts.map(function(i, elem) { return elem.getBoundingClientRect().top > 76; }); if (arr.index(true) > 1) { current = posts[arr.index(true) - 1]; } else if (arr.index(true) === -1) { current = posts[arr.length - 1]; } return current; } /** * Initialize yandex sharing block * @param {Node} yaShare - container of share-block * @param {String} networks - String with name of networks */ function initShare(yaShare, networks) { if ((typeof Ya !== 'undefined') && (typeof Ya.share2 == 'function')) { Ya.share2(yaShare, { theme: { lang: 'ru', services: networks } }); } } function setCookie(name, value, options) { options = options || {}; var expires = options.expires; if (typeof expires == "number" && expires) { var d = new Date(); d.setTime(d.getTime() + expires * 1000); expires = options.expires = d; } if (expires && expires.toUTCString) { options.expires = expires.toUTCString(); } value = encodeURIComponent(value); var updatedCookie = name + "=" + value; for (var propName in options) { updatedCookie += "; " + propName; var propValue = options[propName]; if (propValue !== true) { updatedCookie += "=" + propValue; } } document.cookie = updatedCookie; } function getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } function abbrPopups() { var abbr = $('abbr'); abbr.each(function(i, elem) { $(elem).attr('data-title', $(elem).attr('title')); $(elem).attr('title', ''); }); // показать попап подсказки abbr.on('click', function(e) { e.preventDefault(); var postBlock = $('.post__reference-title:contains(' + $(this).attr('data-title') + ')').parent(); postBlock.toggleClass('post__reference-block--active'); postBlock.parent().toggleClass('post__reference-block--fixed'); window.help_popup_visible = true; }); // закрытие по клику на крестик $('.post__reference-close').on('click', function(e) { e.preventDefault(); $('.post__reference-block--active').removeClass('post__reference-block--active'); $('.post__reference-block--fixed').removeClass('post__reference-block--fixed'); window.help_popup_visible = false; }); // закрытие по клику на другие объекты $(document).on('click', function(e) { if (window.help_popup_visible) { var target = $(e.target); if (!target.hasClass('post__reference-block--active') && !target.is('abbr') && !target.parent().hasClass('post__reference-block--active')) { $('.post__reference-block--active').removeClass('post__reference-block--active'); $('.post__reference-block--fixed').removeClass('post__reference-block--fixed'); window.help_popup_visible = false; } } }); // закрытие по скроллу $(document).on('scroll', function(e) { if (window.help_popup_visible) { var pp = $('.post__reference-block--active'); if (pp.length) { $('.post__reference-block--active').removeClass('post__reference-block--active'); $('.post__reference-block--fixed').removeClass('post__reference-block--fixed'); window.help_popup_visible = false; } } }); } $(document).ready(function(e) { abbrPopups(); // Шеринг var headShare = document.querySelector('.share'); if (headShare) { initShare(headShare, 'vkontakte,facebook,twitter,odnoklassniki,telegram'); } // Открытие/закрытие попапа $('.popup').on('click', function(e) { if (this == e.target) { $(this).removeClass('popup--showed'); } }); $(document).keyup(function(e) { if (e.keyCode === 27) { $('.popup').removeClass('popup--showed'); } }); $('#closePopup').on('click', function(e) { e.preventDefault(); $('.popup').removeClass('popup--showed'); }); // Инициализация фотогалерей if(window.matchMedia('(max-width: 768px)').matches) { $(function () { var fotorama = $('.post__gallery-photos') .on('fotorama:ready', function(e, fotorama) { var controls = $(this).parent().find('.post__gallery-controls'); controls.find('.post__gallery-btn--prev').on('click', function(e) { fotorama.show('<'); }); controls.find('.post__gallery-btn--next').on('click', function(e) { fotorama.show('>'); }); }) .on('fotorama:show', function(e, fotorama) { var controls = $(this).parent().find('.post__gallery-controls'); controls.find('.post__gallery-info').text(fotorama.activeIndex + 1 + ' / ' + fotorama.size); }) .fotorama({ nav: false, width: '100%', fit: 'contain', arrows: false, swipe: true, click: false, ratio: 770/359 }); }); } if(window.matchMedia('(min-width: 768px)').matches) { $(function () { var fotorama = $('.post__gallery-photos') .on('fotorama:ready', function(e, fotorama) { var controls = $(this).parent().find('.post__gallery-controls'); controls.find('.post__gallery-btn--prev').on('click', function(e) { fotorama.show('<'); }); controls.find('.post__gallery-btn--next').on('click', function(e) { fotorama.show('>'); }); }) .on('fotorama:show', function(e, fotorama) { var controls = $(this).parent().find('.post__gallery-controls'); controls.find('.post__gallery-info').text(fotorama.activeIndex + 1 + ' / ' + fotorama.size); }) .fotorama({ nav: 'thumbs', width: '100%', fit: 'contain', arrows: false, swipe: true, click: false, ratio: 770/359, thumbwidth: 170, thumbheight: 80, thumbmargin: 30 }); }); } $('.get-in-form').each(function () { var form = $(this), submit_btn = form.find('[type="submit"]'), email = form.find('[name="email"]'); email.keyup(function () { email.removeClass('input--error'); }); var canSend = true; form.submit(function (e) { e.preventDefault(); if (!canSend) { return; } // валидация email var v = email.val(); if (!v.length || v.indexOf('@') < 1) { email.addClass('input--error'); return false; } // начало отправки адреса canSend = false; email.attr('disabled', 'disabled'); submit_btn.addClass('button--loading'); $.ajax({ type: "POST", url: 'https://fbk.activehosted.com/proc.php', data: { f: '1916', s: '', c: 0, m: 0, act: 'sub', 'nlbox[]': 81, email: v }, success: function() { }, complete: function() { email.val('').attr('disabled', false); submit_btn.removeClass('button--loading'); canSend = true; $('.popup').addClass('popup--showed'); }, error: function(a,b,c) { }, dataType: 'jsonp' }); }); }); //call plugin function after DOM ready addLoadEvent(function(){ outdatedBrowser({ bgColor: '#f25648', color: '#ffffff', lowerThan: 'borderImage', languagePath: '' }); }); $('#VideoStartBtn').on('click', function(e) { e.preventDefault(); $('.video-popup').addClass('video-popup--showed'); $('body').addClass('popup-showed'); if ((typeof player !== 'undefined') && (typeof player.playVideo == 'function')) { player.playVideo(); } }); $('#VideoStopBtn').on('click', function(e) { e.preventDefault(); $('.video-popup').removeClass('video-popup--showed'); $('body').removeClass('popup-showed'); if ((typeof player !== 'undefined') && (typeof player.pauseVideo == 'function')) { player.pauseVideo(); } }); if (getCookie('legend') === 'open') { $('.scheme__legend-container').addClass('scheme__legend-container--showed'); $('.scheme__legend-container').removeClass('scheme__legend-container--hidden'); } else if (getCookie('legend') === 'close') { $('.scheme__legend-container').removeClass('scheme__legend-container--showed'); $('.scheme__legend-container').addClass('scheme__legend-container--hidden'); } if (getCookie('popup') === 'read') { introPopupTrigger = true; } // Навигация $(document).on('click', '.top-pagination__link', function(event){ event.preventDefault(); if (!$('.scheme').hasClass('scheme--showed')) { $('html, body').animate({ scrollTop: ($( $.attr(this, 'href') ).offset().top - 75) }, 500); currentChapter = $(this).data('chapter'); } }); $(window).on('scroll', function(e) { if (!$('.scheme').hasClass('scheme--showed')) { $('.top-pagination__link').removeClass('top-pagination__link--active'); $('.top-pagination__link[data-chapter="' + getCurrentChapter().id + '"]').addClass('top-pagination__link--active'); $('.chapter-name__item').removeClass('chapter-name__item--showed'); $('.chapter-name__item[data-chapter="' + getCurrentChapter().id + '"]').addClass('chapter-name__item--showed'); currentChapter = getCurrentChapter(); if (prevChapter && prevChapter.id !== currentChapter.id) { $('#schemeIcon').addClass('scheme__icon--animated'); setTimeout(function() { $('#schemeIcon').removeClass('scheme__icon--animated'); }, 5000); if (introPopupTrigger === null) { $('.intro-popup').addClass('intro-popup--active'); setCookie('popup', 'read', {expires: 3600 * 24 * 365 * 10}); introPopupTrigger = true; } } if (prevChapter && prevChapter.getAttribute('data-ancor') !== currentChapter.getAttribute('data-ancor')) { window.history.pushState(null, null, ('#' + currentChapter.getAttribute('data-ancor'))); var hashChange = document.createEvent('Event'); hashChange.initEvent('hashchange', false, true); window.dispatchEvent(hashChange); } prevChapter = currentChapter; } }); $('#scheme-legend-button').on('click', function(e) { $('.scheme__legend-container').addClass('scheme__legend-container--showed'); $('.scheme__legend-container').removeClass('scheme__legend-container--hidden'); setCookie('legend', 'open', {expires: 3600 * 24 * 365 * 10}); }); $('.scheme__legend-close-button').on('click', function(e) { $('.scheme__legend-container').removeClass('scheme__legend-container--showed'); $('.scheme__legend-container').addClass('scheme__legend-container--hidden'); setCookie('legend', 'close', {expires: 3600 * 24 * 365 * 10}); }); head.addEventListener('mousemove', onMove); head.addEventListener('mousedown', onMove); head.addEventListener('mouseup', onMove); $('#introClose').on('click', function(e) { $('.intro-popup').removeClass('intro-popup--active'); setCookie('popup', 'read', {expires: 3600 * 24 * 365 * 10}); introPopupTrigger = true; }); $(document).on('click', '.scheme__popup-description a', function(e) { e.preventDefault(); show_scheme_for_current_chapter(); var id = $(this).attr('href'); id = id.slice(id.indexOf('#') + 1); setTimeout(function() { var chapter_block = $('.post[data-ancor="' + id.replace('/#', '') + '"]'); if (chapter_block.length) { $('html, body').animate({ scrollTop: ($('.post[data-ancor="' + id.replace('/#', '') + '"]').offset().top - 75) }, 0); } }, 300); }); if (window.location.hash) { $('html, body').animate({ scrollTop: ($('.post[data-ancor="' + window.location.hash.replace('#', '') + '"]').offset().top - 75) }, 0); } }); // Глаза var head = document.querySelector('.head'); var eyeLeft = document.querySelector('.eye--left'); var eyeRight = document.querySelector('.eye--right'); var x_coef = 5.0; var y_coef = 3.5; // для мобильных другие радиусы вращения глаз if (!window.matchMedia('(min-width: 768px)').matches) { x_coef = 3.5; y_coef = 3; } var doc = document.documentElement; function onMove(e) { var r, dist, y, x1, y1, x2, y2; x2 = e.clientX; y2 = e.clientY; // учет положения скролла // var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); // левый глаз x1 = eyeLeft.offsetLeft + 22; y1 = eyeLeft.offsetTop + 80 - top; dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); r = Math.atan(dist/20); var x_l = ((r * x_coef * (x2 - x1)) / dist); var y_l = ((r * y_coef * (y2 - y1)) / dist); // правый глаз x1 = eyeRight.offsetLeft + 22; y1 = eyeRight.offsetTop + 80 - top; dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); r = Math.atan(dist/20); var x_r = ((r * x_coef * (x2 - x1)) / dist); var y_r = ((r * y_coef * (y2 - y1)) / dist); // по вертикали беру среднее значение y = (y_l + y_r) / 2; // коэффициет независимости подвески зависит от расстояния // var indep_coef = 1.0 - 1 / (dist/10 + 2); var indep_coef = 0.8; var x_l1 = indep_coef * x_l + (1 - indep_coef) * x_r; var x_r1 = indep_coef * x_r + (1 - indep_coef) * x_l; eyeLeft.style.transform = "matrix(1, 0, 0, 1," + x_l1 + "," + y + ")"; eyeRight.style.transform = "matrix(1, 0, 0, 1," + x_r1 + "," + y + ")"; } var cursorX, cursorY; var width = 1000; var height = 500; var svg = d3.select('#scheme-container').insert('svg') .attr('width', width) .attr('height', height) .attr('viewBox', '0 0 ' + width + ' ' + height); var defs = svg.append('svg:defs'); var container = svg.append('g'); // подсказки у связей var $relation_tooltip = $('
').appendTo('body'); var popupBlock = $('#scheme-popup'); var popupHeader = $('#scheme-popup-title'); var popupText = $('#scheme-popup-description'); var popupImage = $('#scheme-popup-image'); // Определение позиции курсора, нужно для показа подсказок. $(document).on('mousemove', function(e) { cursorX = e.pageX; cursorY = e.pageY; }); // конфигурация для объектов разных классов var object_config = { 'grandmaster': { 'radius': 45, 'stroke': 4, 'text_shift': 70, 'font-size': 14 }, 'hero': { 'radius': 35, 'stroke': 3, 'text_shift': 60, 'font-size': 14 }, 'subhero': { 'radius': 20, 'stroke': 2, 'text_shift': 45, 'font-size': 10, 'text_bg_width': 130 }, 'resource': { 'radius': 45, 'stroke': null, 'text_shift': 70, 'background': true, 'font-size': 14 }, 'fund': { 'width': 160, 'height': 50, 'stroke': 3, 'font-size': 10 }, 'company': { 'width': 120, 'height': 50, 'stroke': 3, 'font-size': 10 }, 'subcompany': { 'width': 80, 'height': 30, 'stroke': 2, 'font-size': 10 } }; // рисование круглых объектов на схеме function draw_circle_objects(container, object_class) { var conf = object_config[object_class]; var radius = conf['radius']; // обрезка картинок container.append('clipPath') .attr('id', 'clip_' + object_class) .append('circle') .attr('x', radius) .attr('y', radius) .attr('r', radius); container.selectAll('g.' + object_class) .append('circle') .attr('class', 'bg') .attr('r', radius) .attr('stroke', 'none'); // картинка с иконкой или фото container.selectAll('g.' + object_class) .append('image') .attr('class', 'frame') .attr('clip-path', 'url(#clip_' + object_class + ')') .attr('x', -radius) .attr('y', -radius) .attr('xlink:href', function(d) { return d.image; }) .attr('width', radius * 2) .attr('height', radius * 2); // stroke, если есть if (conf['stroke']) { container.selectAll('g.' + object_class) .append('circle') .attr('class', 'fg') .attr('r', radius) .attr('fill', 'none') .attr('stroke-width', '' + conf['stroke'] + 'px'); } } // рисование прямоугольных объектов на схеме function draw_square_objects(container, object_class) { var conf = object_config[object_class]; var width = conf['width']; var height = conf['height']; container.selectAll('g.' + object_class) .append('rect') .attr('class', 'frame') .attr('width', function (d) { return d.width ? d.width : width; }) .attr('height', function (d) { return d.height ? d.height : height; }) .attr('x', function (d) { return d.width ? -d.width/2 : -width/2; }) .attr('y', function (d) { return d.height ? -d.height/2 : -height/2; }) .attr('stroke-width', '' + conf['stroke'] + 'px'); } // попап по клику на объект var popup_visible = false; function show_popup(obj) { // неактивный слой не реагирует var $svg_target = $('#' + obj.id); if (!$svg_target.hasClass('on_top')) { return false; } var title = obj.popup.title || ''; var text = obj.popup.text || ''; if (title && text) { popupHeader.text(title); popupText.html(text); popupImage.hide(); popupImage.attr('poster',''); popupImage.attr('src', ''); if (obj.popup.image) { popupImage.attr('poster', obj.popup.image); } if (obj.popup.video) { popupImage.attr('src', obj.popup.video); } if (obj.popup.image || obj.popup.video) { popupImage.show(); } popupBlock.data('target', obj); popup_visible = true; move_popup(); if(obj['points'][1] < 750) { popupBlock.removeClass('scheme__popup--bottom-left'); } else { popupBlock.addClass('scheme__popup--bottom-left'); } popupBlock.addClass('scheme__popup--showed'); d3.event.preventDefault(); d3.event.stopPropagation(); } } function move_popup() { if (!popup_visible) return; var obj = popupBlock.data('target'); if (!obj) return; if (!window.matchMedia('(min-width: 768px)').matches) return; var top, left; var $svg_target = $('#' + obj.id + ' .frame'); var svg_target = $svg_target.get(0); var object_y_shift = svg_target.getBoundingClientRect().height / 2; var object_x_shift = svg_target.getBoundingClientRect().width; var tail_y_shift = 50; var tail_x_shift = 20; var svg_pos_y = $('#scheme-container').offset().top - $(window).scrollTop(); // начальное положение попапа left = 0.1 + svg_target.getBoundingClientRect().left + tail_x_shift + object_x_shift; if(obj['points'][1] < 750) { top = 0.1 + svg_target.getBoundingClientRect().top - svg_pos_y - tail_y_shift + object_y_shift; popupBlock.css({ top: top, left: left, bottom: 'auto' }); } else { top = $('#scheme-container svg').height() - svg_target.getBoundingClientRect().bottom + object_y_shift; popupBlock.css({ top: 'auto', left: left, bottom: top }); } } // переносы текстов, которые не лезут по ширине function wrap(items) { items.each(function(point) { var align = null; var width; if (object_config[point['class']].hasOwnProperty('text_bg_width')) { width = object_config[point['class']]['text_bg_width']; } else { width = 115; } var inner_rect = d3.select(this.parentNode).select('rect').node(); if (inner_rect && inner_rect.attributes.width.value) { width = inner_rect.attributes.width.value - 10; align = 'middle'; } var text = d3.select(this), words = text.text().split(' ').reverse(), word, lines_count = 1, line = [], lineHeight = 1.3, // ems y = text.attr('y'), dy = 0.35, tspan = text.text(null) .append('tspan') .attr('x', 0) .attr('y', y) .attr('dy', '0em'); text.attr('font-size', function(d){ return '' + object_config[d['class']]['font-size'] + 'px'; }); while (word = words.pop()) { // собирается строка для тестирования длины line.push(word); tspan.text(line.join(' ')); if (tspan.node().getComputedTextLength() > width && tspan.text() !== word) { // вытаскиваю из линии последнее слово line.pop(); // сохраняю текст без последнего слова tspan.text(line.join(' ')); // последнее слово идет в новый span line = [word]; tspan = text .append('tspan') .attr('x', 0) .attr('y', y) .attr('dy', lineHeight + 'em') .text(word); lines_count++; } // если есть принудительные переносы if (tspan.text().indexOf('\n') >= 0) { // вытаскиваю слово, содержащее перенос и разбиваю на части var to_wrap = line.pop().split('\n'); line.push(to_wrap[0]); tspan.text(line.join(' ')); line = [to_wrap[1]]; tspan = text .append('tspan') .attr('x', 0) .attr('y', y) .attr('dy', lineHeight + 'em'); lines_count++; } } // подложка под текст if (!inner_rect) { text.call(getBB); d3.select(this.parentNode) .insert('rect', ':first-child') .attr("rx", 2) .attr("ry", 2) .attr('x', function(d){return d.bbox.x - 5}) .attr('y', function(d){ return (d.bbox.y - 5 + object_config[d['class']]['text_shift']) + 'px'; }) .attr('width', function(d){return d.bbox.width + 10}) .attr('height', function(d){return d.bbox.height + 10}) .attr('class', 'text_background'); function getBB(selection) { selection.each(function(d){d.bbox = this.getBBox(); }) } } // выравнивание текста по высоте if (align == 'middle') { text.attr('y', '' + (-(lines_count - 1) * lineHeight / 2 + dy) + 'em'); } else { // смещение из настроек text.attr('y', function(d){ return '' + object_config[d['class']]['text_shift'] + 'px'; }) } }); } // zoom, pan function zoomed() { container.attr('transform', d3.event.transform); move_popup(); } function zoomIn() { svg.transition() .duration(300) .call(zoom.scaleBy, 1.5) } function zoomOut() { svg.transition() .duration(300) .call(zoom.scaleBy, 0.66666) } $('#scheme-zoom-in').on('click', zoomIn); $('#scheme-zoom-out').on('click', zoomOut); var zoom = d3.zoom() .scaleExtent([0.3, 4]) .on('zoom', zoomed); svg.call(zoom.transform, d3.zoomIdentity.translate(100, 100).scale(1)); svg.call(zoom); //.on('dblclick.zoom', null); // можно выключить зум по даблклику // начальное масштабирование схемы function on_before_show() { // размеры контейнера схемы (после || — вариант для служебной схемы) var w = $('.main-content').width() || $(window).width(); var h = $('.scheme__icon-container').height() || ($(window).height() - 100); svg.attr('width', w) .attr('height', h) .attr('viewBox', '0 0 ' + w + ' ' + h); var b = window.scheme_bounds; var scheme_w = b[2] - b[0] + 250; var scheme_h = b[3] - b[1] + 200; // на вертикальных устройствах масштабирую схему по высоте, отрезая края var scale; if (w > h || w > 1100) { scale = Math.min(w / scheme_w, h / scheme_h) * 0.95; zoom.scaleExtent([scale, 4]); } else { scale = Math.max(w / scheme_w, h / scheme_h) * 0.95; var scale_min = Math.min(w / scheme_w, h / scheme_h) * 0.95; zoom.scaleExtent([scale_min, 4]); } var shift_x = w / 2 - (b[0] + (b[2] - b[0]) / 2) * scale; var shift_y = h / 2 - (b[1] + (b[3] - b[1]) / 2) * scale - 20; svg.call(zoom.transform, d3.zoomIdentity.translate(shift_x, shift_y).scale(scale)); } // вся схема, все объекты function show_all_layers() { // всё светится $('.node').addClass('on_top'); $('.line-group').addClass('on_top'); // индикатор $('#chapter-btn').removeClass('scheme__layers-btn--active'); $('#all-scheme-btn').addClass('scheme__layers-btn--active'); } // подсветка всех объектов слоя вместе со связями function highlight_object_with_links(layer) { var this_layer = d3.selectAll('.' + layer); // все, кто был on_top, теперь не on_top d3.selectAll('.node').classed('on_top', false); d3.selectAll('.line-group').classed('on_top', false); // активный слой — on_top this_layer.classed('on_top', true); // индикатор $('#all-scheme-btn').removeClass('scheme__layers-btn--active'); $('#chapter-btn').addClass('scheme__layers-btn--active'); } // загрузка данных d3.json(window.data_file_path, function(error, object) { var id_to_index = {}; var object_points = Object.keys(object.points).map(function(k) { var o = object.points[k]; id_to_index[o.id] = k; return o; }); // линии связей var object_lines = object.lines.map(function (line, i) { // добавляю всем линиям id line.id = 'line_' + i; try { // добавляю координаты начального и конечного объектов return [object_points[id_to_index[line.from]].points].concat(line.points).concat([object_points[id_to_index[line.to]].points]); } catch (e) { return [] } }); // console.log(object_lines); // Создание кривой var returnLine = d3.line() // .curve(d3.curveBundle.beta(1.02)); // тут стрелки работают //.curve(d3.curveNatural); // — мудацкая .curve(d3.curveCardinal.tension(0.1)); // .curve(d3.curveCatmullRom.alpha(0.5)); // группа для линий var lineGroup = container.append('g') .selectAll() .data(object_lines) .enter() .append('g') .attr('id', function(d, i){ return object.lines[i].id; }) .attr('description', function(d, i){ return object.lines[i].description; }) .attr('class', 'line-group'); // простаяляю линиям связей классы по их принадлежности к слоям var points_by_layer = {}; object.points.map(function(point) { var layers = []; $(point['layer'].split(' ')).each(function(i, layer){ if (layer) { if (!points_by_layer.hasOwnProperty(layer)) { points_by_layer[layer] = []; } points_by_layer[layer].push(point.id); } }); }); object.lines.map(function (line) { // линию подсвечиваем, если оба конца находятся в выделенном слое for (var layer in points_by_layer) { if (points_by_layer.hasOwnProperty(layer)) { var layer_node_ids = points_by_layer[layer]; var is_on = layer_node_ids.indexOf(line.to) >= 0 && layer_node_ids.indexOf(line.from) >= 0; d3.select('#' + line.id).classed(layer, is_on); } } }); // для более удобной подсветки связей при наведении связи дублируются невидимыми более широкими линиями lineGroup .append('path') .attr('d', returnLine) .attr('class', 'invisible-line'); // видимые линии lineGroup .append('path') .attr('d', returnLine) .attr('class', function(d, i) { return 'visible-line ' + object.lines[i].type; }); // подсказки связей lineGroup.on('mouseenter', function(e) { var d3_line = d3.select(this); if (d3_line && d3_line.attr('description')) { var description = d3_line.attr('description'); $relation_tooltip.css({ 'left': (cursorX + $(window).scrollLeft() + 5) + 'px', 'top': (cursorY + $(window).scrollTop() + 5) + 'px' }); $relation_tooltip.text(description).show(); } }); // подсказки едут за курсором lineGroup.on('mousemove', function(e) { $relation_tooltip.css({ 'left': (cursorX + $(window).scrollLeft() + 5) + 'px', 'top': (cursorY + $(window).scrollTop() + 5) + 'px' }); }); // скрыть подсказку lineGroup.on('mouseleave', function(e) { $relation_tooltip.text('').hide(); }); // группа для объектов var point = container.append('g') .selectAll() .data(object_points) .enter() .append('g') .attr('id', function(d){ return d.id; }) .attr('class', function(d){ var str = d.class + ' node ' + d['layer']; if (d.popup && d.popup.title && d.popup.text) { str += ' with_popup'; } return str; }) .attr('transform', function(d) { return 'translate(' + d.points[0] + ',' + d.points[1] + ')'; }); // отрисовка круглых объектов draw_circle_objects(container, 'grandmaster'); draw_circle_objects(container, 'hero'); draw_circle_objects(container, 'subhero'); draw_circle_objects(container, 'resource'); // отрисовка прямоугольных объектов draw_square_objects(container, 'fund'); draw_square_objects(container, 'subcompany'); draw_square_objects(container, 'company'); // надписи и подписи объектов var text = point.append('text') .text(function(d){ if (d.hasOwnProperty('label')) return d.label; else return '' }) .attr('class', 'text') .call(wrap); // classList для SVG не работает в IE 11, поэтому подсветка линий не будет работать if (!("classList" in document.createElement("_")) && document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) { lineGroup.on('mouseover', function () { this.querySelector('.visible-line').classList.add('line-hover'); }); lineGroup.on('mouseout', function () { this.querySelector('.visible-line').classList.remove('line-hover'); }); } point.on('click', function(e) { show_popup(e); }); $(document).on('click', function(e) { if (popup_visible && $('.scheme').hasClass('scheme--showed')) { var class_name = $(e.target).attr('class') || ''; if (class_name.indexOf('scheme__popup') < 0){ $('#scheme-popup').removeClass('scheme__popup--showed'); popup_visible = false; } } }); $('#closeSchemePopup').on('click', function(e) { e.preventDefault(); $('#scheme-popup').removeClass('scheme__popup--showed'); popup_visible = false; }); // после полной загрузки показываю всю схему show_all_layers(); // highlight_object_with_links('chapter_6'); $(window).on('resize', move_popup); }); // Открытие/закрытие схемы function show_scheme_for_current_chapter() { if (!$('.scheme').hasClass('scheme--showed')) { on_before_show(); } $('.intro-popup').removeClass('intro-popup--active'); if (introPopupTrigger === null) { setCookie('popup', 'read', {expires: 3600 * 24 * 365 * 10}); introPopupTrigger = true; } highlight_object_with_links(getCurrentChapter().id); $('.scheme').toggleClass('scheme--showed'); $('.top-pagination').toggleClass('top-pagination--innactive'); $('.scheme-link').toggleClass('scheme-link--showed'); $('.scheme-link').removeClass('scheme__icon--animated'); $('body').toggleClass('scheme-showed'); } $('.scheme__icon-container').on('click', function(e) { e.preventDefault(); show_scheme_for_current_chapter(); }); $('.page-header__scheme-link-wrapper').on('click', function(e) { e.preventDefault(); show_scheme_for_current_chapter(); }); // обработка кликов по ссылке, ведущей из текста на схему $('.post__to-scheme').on('click', function(e) { e.preventDefault(); show_scheme_for_current_chapter(); }); // кнопки переключения между схемой главы и всей схемой $('#chapter-btn').on('click', function(e) { highlight_object_with_links(getCurrentChapter().id); }); $('#all-scheme-btn').on('click', function(e) { show_all_layers(); });