mirror of
https://gitea.msk.dinamika-avia.ru/Constanta-Design/MI-38.git
synced 2026-01-24 08:25:38 +03:00
2686 lines
109 KiB
JavaScript
2686 lines
109 KiB
JavaScript
(function ($) {
|
||
|
||
/* let debug = 1;
|
||
let logger = function (...args) { if (debug == 1) logger(...args || "") };*/
|
||
|
||
let open = false
|
||
let settings = {}
|
||
let defaults = {
|
||
viewType: 'inline',
|
||
spots: '',
|
||
name: '',
|
||
size: 'fit',
|
||
legend: false,
|
||
legendSpots: false,
|
||
redline: false,
|
||
canResize: false,
|
||
tearWindow: false,
|
||
target: { x: 0, y: 0, show: false },
|
||
shawAllRefs: false,
|
||
url: '',
|
||
basicWidth: 0,
|
||
basicHeight: 0,
|
||
type: 'vector',
|
||
viewBox: 'viewBox="0 0 0 0"',
|
||
ready: undefined,
|
||
rColor: '#ff0000',
|
||
rWidth: 1,
|
||
tColor: '#333333',
|
||
tWidth: 1,
|
||
hColor: '#ff0000',
|
||
hWidth: 1,
|
||
firstClick: true
|
||
}
|
||
|
||
var dmclangcodeicn = document.documentURI;
|
||
var lablelegend;
|
||
var lablehots;
|
||
var labelnext;
|
||
var labelprev;
|
||
var lablefullscreen;
|
||
var lablehome;
|
||
|
||
dmclangcodeicn = dmclangcodeicn.substr(-10, 2);
|
||
|
||
switch (dmclangcodeicn) {
|
||
case 'en':
|
||
lablehots = 'Hotspots';
|
||
labelnext = 'Next';
|
||
labelprev = 'Previous';
|
||
lablefullscreen = 'Fullscreen';
|
||
lablehome = 'Home';
|
||
lablelegend = 'Hide legend';
|
||
break;
|
||
case 'ru':
|
||
lablehots = 'Хотспоты';
|
||
labelnext = 'Вперед';
|
||
labelprev = 'Назад';
|
||
lablefullscreen = 'Полный экран';
|
||
lablehome = 'Домой';
|
||
lablelegend = 'Скрыть легенду';
|
||
break;
|
||
case 'es':
|
||
lablehots = 'Puntos calientes';
|
||
labelnext = 'Adelante';
|
||
labelprev = 'De regreso';
|
||
lablefullscreen = 'Pantalla completa';
|
||
lablehome = 'Casa';
|
||
lablelegend = 'Ocultar leyenda';
|
||
break;
|
||
}
|
||
|
||
var methods = {
|
||
init: function (options) {
|
||
//logger(options);
|
||
return this.each(function () {
|
||
var $this = $(this);//$this можно передавать глобальным функциям
|
||
// //console.log($this[0]);
|
||
data = $($this).children('img+.S1000Dhotspots').attr('src');
|
||
// Если плагин ещё не проинициализирован
|
||
if (!data && $($this).find('.imagePlayer').length == 0) {
|
||
settings = '';
|
||
//settings = options;
|
||
settings = $.extend({}, defaults, options);//расширяем стандартные настройки плагина
|
||
|
||
var CookieSettings = Cookies.getJSON('imagePlayerSettings');
|
||
|
||
if (CookieSettings != undefined) {
|
||
settings = $.extend({}, settings, CookieSettings);
|
||
}
|
||
//Cookies.getJSON('name');
|
||
//methods.saveSettings($this, settings);
|
||
//logger('START settings', defaults, options, settings);
|
||
//logger(settings);
|
||
//logger(settings.legendSpots);
|
||
|
||
$($this).children('img,svg').hide();
|
||
|
||
$($this).append(methods.create($(this), settings));//функция локальна, можно и просто $(this)
|
||
|
||
methods.saveSettings($($this), settings);
|
||
|
||
var img = new Image();
|
||
img.src = settings.url;
|
||
$($this).find('.imagePlayerImg .mainImg').append(img);
|
||
//$($this).find('.imagePlayerImg img');//.addClass('mainImg');
|
||
|
||
img.addEventListener('load', function () {
|
||
if (this.naturalWidth != undefined && this.naturalWidth != 0 && this.naturalHeight != undefined && this.naturalHeight != 0) {
|
||
//logger('HAVE NW & NH', this.naturalWidth, this.naturalHeight);
|
||
//methods.saveSettings($($this), settings);
|
||
|
||
methods.startActions($this, settings, false);
|
||
|
||
//methods.canvasRender($($this), $($this).find("canvas")[0], settings);
|
||
|
||
// $($this).find('.imagePlayerImg').append(this);
|
||
// $($this).find('.imagePlayerImg img').addClass('mainImg');
|
||
}
|
||
|
||
else {
|
||
//logger('NO NW & NH');
|
||
//если браузер не определил высоту и ширину картинки, надо сделать это за него
|
||
//methods.saveSettings($($this), settings);
|
||
|
||
methods.startActions($this, settings, true);
|
||
}
|
||
});
|
||
//события на элементы управления
|
||
//кнопки вперед и назад
|
||
|
||
//var elentList = methods.eventsList($($(this).find(".imagePlayerHotspots")[0]));
|
||
//logger('elentList',$($(this).find(".imagePlayerHotspots")[0]),elentList);
|
||
|
||
if ($(this).parent().find('.S1000Dfiguregraphic').length > 1) {
|
||
$(this).on('click', ".imagePlayerNext", function (e) { methods.showNextPlayer($this, e); });
|
||
$(this).on('click', ".imagePlayerPrev", function (e) { methods.showPrevPlayer($this, e); });
|
||
}
|
||
else {
|
||
$(this).find('.imagePlayerNext, .imagePlayerPrev').hide();
|
||
}
|
||
|
||
//полный экран
|
||
//open
|
||
if (!$($this).hasClass('init')) {
|
||
$(this).on('click', ".imagePlayerFullscreen", function (e) { open = true, methods.fullScreen($this, e); });
|
||
}
|
||
//close
|
||
if ($(this).hasClass('fullScreen')) {
|
||
$(this).on('click', ".imagePlayerFullscreen", function (e) { methods.fullScreen($this, e); });
|
||
}
|
||
|
||
//все хоты
|
||
if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
|
||
// //console.log($this[0]);
|
||
$(this).on('click', ".imagePlayerHotspots", function (e) {
|
||
methods.redrawAllRefs($this, $($this).find(".imagePlayer .imagePlayerImg")[0], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
}
|
||
if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
|
||
$(this).on('click', ".imagePlayerHotspots", function (e) {
|
||
methods.redrawAllRefs($this, $($this).find(".imagePlayer .imagePlayerImg")[0], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
}
|
||
|
||
//рестарт плеера
|
||
if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
|
||
logger('reinit');
|
||
$(this).on('click', ".resetPlayer", function (e) { methods.reinit($this, e); });
|
||
}
|
||
|
||
if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
|
||
$(this).on('click', ".resetPlayer", function (e) {
|
||
if ($(".imagePlayerSettingsButton.imagePlayerHotspots.active")) {
|
||
$(".imagePlayerSettingsButton.imagePlayerHotspots.active").removeClass('active')
|
||
}
|
||
if ($('.imagePlayerSettingsButton.imagePlayerTarget.active')) {
|
||
$(".imagePlayerSettingsButton.imagePlayerTarget.active").removeClass('active')
|
||
}
|
||
if ($('.imagePlayerSettingsButton.imagePlayerTear.active')) {
|
||
$('.imagePlayerMapCanvas').css({ 'display': 'none' })
|
||
$(".imagePlayerSettingsButton.imagePlayerTear.active").removeClass('active')
|
||
}
|
||
if ($('.imagePlayerSettingsButton.imagePlayerDrawer.active')) {
|
||
$(".imagePlayerSettingsButton.imagePlayerDrawer.active").removeClass('active')
|
||
}
|
||
|
||
methods.reinit($this, e); methods.startActions($this, settings, true);
|
||
});
|
||
}
|
||
|
||
if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
|
||
if (settings.legend != false) {
|
||
$(this).parent().on('click', ".S1000DIntRefHotspot", function (e) {
|
||
if ($($this).css('display') == 'block') {
|
||
methods.RefClick($this, e);
|
||
}
|
||
});
|
||
//$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
|
||
}
|
||
}
|
||
|
||
// открылся экран
|
||
if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull') && $($this).css('display') == 'block') {
|
||
logger('thiscl', $this);
|
||
logger(' $(this).parent()', $(this).parent());
|
||
$(this).parent().on('click', ".S1000DIntRefHotspot", function (e) { logger('cl64'); methods.RefClick($this, e); });
|
||
}
|
||
|
||
if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull') && $($this).css('display') == 'block') {
|
||
$(this).parent().on('click', ".S1000DIntRefHotspot", function (e) { logger('cl5'); methods.RefClick($this, e); });
|
||
//$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
|
||
}
|
||
|
||
if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
|
||
logger('cl2');
|
||
if (settings.legend != false) {
|
||
//$(this).parent().next().next('.S1000DrandomList').html('');
|
||
$(this).parent().on('click', ".S1000DHotspot", function (e) {
|
||
if ($($this).css('display') == 'block') {
|
||
methods.HRefClick($this, e);
|
||
}
|
||
});
|
||
//$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
|
||
}
|
||
}
|
||
if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull') && $($this).css('display') == 'block') {
|
||
if (settings.legend != false) {
|
||
//$(this).parent().next().next('.S1000DrandomList').html('');
|
||
$(this).parent().on('click', ".S1000DHotspot", function (e) { logger('cl644'); methods.HRefClick($this, e); });
|
||
//$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
|
||
}
|
||
}
|
||
|
||
//проверка на хот по наведению
|
||
if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
|
||
if (settings.legend != false) {
|
||
$($this).on('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverSetOnmove($($this), $($this).find("canvas")[0], settings, e); });
|
||
$($this).on('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverUnsetOnmove($($this), $($this).find("canvas")[0], settings, e); });
|
||
}
|
||
}
|
||
if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
|
||
if (settings.legend != false) {
|
||
$($this).on('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverSetOnmove($($this), $($this).find("canvas")[0], settings, e); });
|
||
$($this).on('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverUnsetOnmove($($this), $($this).find("canvas")[0], settings, e); });
|
||
}
|
||
}
|
||
|
||
if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
|
||
//проверка на наличие хота под курсором по клику
|
||
//first click: если это первое нажатие - выделение происходит
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
|
||
if (settings.legend != false || settings.firstClick === true) {
|
||
methods.tryHotShow($($this), $($this).find("canvas")[0], settings, e);
|
||
}
|
||
if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
|
||
settings.firstClick = true
|
||
methods.panClick($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
|
||
}
|
||
});
|
||
if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
|
||
$($this).on('mousemove', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
|
||
methods.pan($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
|
||
settings.firstClick = false
|
||
});
|
||
}
|
||
|
||
$($this).closest('.popupWindowFull').on('mouseup', function (e) {
|
||
settings.firstClick = false
|
||
methods.stopPan($($this), ".imagePlayer canvas.imagePlayerCanvas", e);
|
||
methods.stopDraw($($this), $($this).find("canvas")[1], e);
|
||
});
|
||
|
||
//logger('DAS ELEMENT!', $(".imagePlayer canvas.imagePlayerCanvas"));
|
||
|
||
if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
|
||
|
||
//панорамирование
|
||
$($this).on('wheel', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.resize($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e); });
|
||
|
||
//рисовалка
|
||
$(this).on('click', ".imagePlayerDrawer", function (e) {
|
||
methods.drawOnScreen($this, $($this).find("canvas")[1], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (e) {
|
||
methods.startDraw($($this), $($this).find("canvas")[1], e);
|
||
});
|
||
$($this).on('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (ev) {
|
||
methods.drawingLine($($this), $($this).find("canvas")[1], ev);
|
||
});
|
||
|
||
//таргет
|
||
$(this).on('click', ".imagePlayerTarget", function (e) {
|
||
methods.targetOnScreen($this, $($this).find("canvas")[2], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", function (e) {
|
||
methods.setTarget($($this), $($this).find("canvas")[2], e);
|
||
});
|
||
|
||
//миникарта
|
||
$(this).on('click', ".imagePlayerTear", function (e) {
|
||
methods.clickToggleMap($this, $($this).find(".imagePlayerMapCanvas")[0], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerMapCanvas", function (e) {
|
||
//methods.setTarget($($this), $($this).find("canvas")[3], e);
|
||
});
|
||
|
||
//показать или спрятать легенду
|
||
if (!$($this).hasClass('initFull')) {
|
||
$(this).on('click', ".imagePlayerLegend", function (e) {
|
||
methods.switchLegend($this, e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
}
|
||
}
|
||
}
|
||
if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
|
||
//проверка на наличие хота под курсором по клику
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
|
||
if (settings.legend != false) {
|
||
methods.tryHotShow($($this), $($this).find("canvas")[0], settings, e);
|
||
}
|
||
if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
|
||
logger('find2');
|
||
methods.panClick($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
|
||
}
|
||
});
|
||
if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
|
||
$($this).on('mousemove', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
|
||
methods.pan($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
|
||
});
|
||
}
|
||
|
||
$($this).closest('.popupWindowFull').on('mouseup', function (e) {
|
||
logger('find4');
|
||
methods.stopPan($($this), ".imagePlayer canvas.imagePlayerCanvas", e);
|
||
methods.stopDraw($($this), $($this).find("canvas")[1], e);
|
||
});
|
||
|
||
//logger('DAS ELEMENT!', $(".imagePlayer canvas.imagePlayerCanvas"));
|
||
if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
|
||
//панорамирование
|
||
$($this).on('wheel', ".imagePlayer canvas.imagePlayerCanvas", function (e) { logger('elementsss'); methods.resize($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e); });
|
||
|
||
//рисовалка
|
||
$(this).on('click', ".imagePlayerDrawer", function (e) {
|
||
methods.drawOnScreen($this, $($this).find("canvas")[1], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (e) {
|
||
methods.startDraw($($this), $($this).find("canvas")[1], e);
|
||
});
|
||
$($this).on('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (ev) {
|
||
methods.drawingLine($($this), $($this).find("canvas")[1], ev);
|
||
});
|
||
|
||
//таргет
|
||
$(this).on('click', ".imagePlayerTarget", function (e) {
|
||
methods.targetOnScreen($this, $($this).find("canvas")[2], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", function (e) {
|
||
methods.setTarget($($this), $($this).find("canvas")[2], e);
|
||
});
|
||
|
||
//миникарта
|
||
$(this).on('click', ".imagePlayerTear", function (e) {
|
||
methods.clickToggleMap($this, $($this).find(".imagePlayerMapCanvas")[0], e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
|
||
$($this).on('mousedown', ".imagePlayer canvas.imagePlayerMapCanvas", function (e) {
|
||
//methods.setTarget($($this), $($this).find("canvas")[3], e);
|
||
});
|
||
|
||
//показать или спрятать легенду
|
||
if (!$($this).hasClass('initFull')) {
|
||
$(this).on('click', ".imagePlayerLegend", function (e) {
|
||
methods.switchLegend($this, e);
|
||
$(e.target).toggleClass('active');
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
$(this).addClass('init');
|
||
if ($(this).hasClass('fullScreen')) {
|
||
$($this).addClass('initFull')
|
||
}
|
||
});
|
||
},
|
||
|
||
startActions: function ($this, settings, overloadSizes) {
|
||
var playerSize = methods.initiatePlayerSize($this, settings, overloadSizes);
|
||
|
||
settings.basicWidth = playerSize.width;
|
||
settings.basicHeight = playerSize.height;
|
||
|
||
//logger('basic settings of W & H', settings.basicWidth, settings.basicHeight);
|
||
var sett = methods.readSettings($this);
|
||
sett.basicWidth = playerSize.width;
|
||
sett.basicHeight = playerSize.height;
|
||
// logger('settings.type',sett.viewBox);
|
||
if (sett.viewBox == 'viewBox="0 0 0 0"' && !overloadSizes) {
|
||
|
||
logger('inside');
|
||
|
||
//logger('sett.viewBox', sett.viewBox, playerSize.real.width, playerSize.real.height);
|
||
sett.viewBox = 'viewBox="0 0 ' + playerSize.real.width + ' ' + playerSize.real.height + '"';
|
||
settings.viewBox = 'viewBox="0 0 ' + playerSize.real.width + ' ' + playerSize.real.height + '"';
|
||
// $($this).find("canvas")
|
||
logger(' sett.viewBox', sett.viewBox);
|
||
}
|
||
|
||
methods.saveSettings($($this), sett);
|
||
|
||
methods.setPlayerSize($this, playerSize.width, playerSize.height);
|
||
|
||
logger('this', $($this));
|
||
/* logger('can', $($this).find("canvas")[0]);*/
|
||
methods.canvasFirstRender($($this), $($this).find("canvas")[0], settings);
|
||
|
||
if (settings.ready != undefined) {
|
||
logger('ready function != undefined');
|
||
logger('settings', settings)
|
||
settings.ready();
|
||
};
|
||
},
|
||
create: function (parent, settings) {
|
||
logger('here');
|
||
//return $()
|
||
$(parent).attr('zoom', 1);
|
||
$(parent).attr('posX', 0);
|
||
$(parent).attr('posY', 0);
|
||
|
||
if (settings.viewType != 'inline') {
|
||
$(parent).addClass('fullScreen');
|
||
}
|
||
|
||
var tmpObj = $('<div class="imagePlayer"></div>');
|
||
var tmp = $('<div class="imagePlayerContainer"></div>');
|
||
var tmpImgCanvas = $('<div style="display:block;height:600px;background:#fff;" class="imagePlayerImg"><div class="mainImg"></div></div>');
|
||
var tmpCanvas = $('<canvas style="display:block;height:600px; position:absolute; top:0; left:0;" class="imagePlayerCanvas"></canvas>');
|
||
var tmpDrawingCanvas = $('<canvas style="display:none; height:600px; position:absolute; top:0; left:0;" class="imagePlayerDrawingCanvas"></canvas>');
|
||
var tmpTargetCanvas = $('<canvas style="display:none; height:600px; position:absolute; top:0; left:0;" class="imagePlayerTargetCanvas"></canvas>');
|
||
var tmpMapCanvas = $('<div style="display:none; height:100px; position:absolute; top:0; right:0; border: 1px solid #555555;" class="imagePlayerMapCanvas"><div class="mainImgMap" style="background-image:url(' + settings.url + ')"></div><div class="redFrame"></div></div>');
|
||
var img = $('<img class="imagePlayerImgObj" src=' + settings.url + ' style="opacity:0; width:0; height:0;margin:0;" />');
|
||
|
||
// var settingsPanel = $('<div class="settingsPanel"></div>');
|
||
// settingsPanel = settingsPanel.append('<div class="settingsPanelLine"><h6></h6><input class="rWidth" type="number" value="'+settings.rWidth+'" /><input class="rColor" type="text" value="'+settings.rColor+'" /></div>');
|
||
// settingsPanel = settingsPanel.append('<div class="settingsPanelLine"><h6></h6><input class="tWidth" type="number" value="'+settings.tWidth+'" /><input class="tColor" type="text" value="'+settings.tColor+'" /></div>');
|
||
// settingsPanel = settingsPanel.append('<div class="settingsPanelLine"><h6></h6><input class="hWidth" type="number" value="'+settings.hWidth+'" /><input class="hColor" type="text" value="'+settings.hColor+'" /></div>');
|
||
|
||
tmp.append(tmpImgCanvas);
|
||
tmp.append(tmpCanvas);
|
||
tmp.append(tmpDrawingCanvas);
|
||
tmp.append(tmpTargetCanvas);
|
||
tmp.append(tmpMapCanvas);
|
||
|
||
tmpObj.append(tmp);
|
||
|
||
tmp = $('<div class="imagePlayerSettingsPanel"></div>');
|
||
|
||
var tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');
|
||
var tmpSet = '';
|
||
if (settings.viewType != 'inline') {
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerLegend">' + lablelegend + '</button>');
|
||
//тут можно навесить обработчики на tmpSet
|
||
tmpSetGr.append(tmpSet);//а потом приколачиваем всё на свои места
|
||
tmp.append(tmpSetGr);
|
||
|
||
tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerDrawer">Redlining</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerTear">Tear</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerTarget">Target</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
}
|
||
if (settings.legend != false) {
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerHotspots">' + lablehots + '</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmp.append(tmpSetGr);
|
||
}
|
||
|
||
tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
|
||
tmpSet = $('<button class="imagePlayerSettingsButton resetPlayer">' + lablehome + '</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmp.append(tmpSetGr);
|
||
|
||
tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerPrev">' + labelprev + '</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerNext">' + labelnext + '</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmp.append(tmpSetGr);
|
||
|
||
/*if (settings.viewType != 'inline') {
|
||
tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
|
||
tmpSet = $('<button class="imagePlayerSettingsButton">Настройки</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmp.append(tmpSetGr);
|
||
}*/
|
||
|
||
tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
|
||
tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerFullscreen">' + lablefullscreen + '</button>');
|
||
tmpSetGr.append(tmpSet);
|
||
|
||
tmp.append(tmpSetGr);
|
||
|
||
tmpObj.append(tmp);
|
||
tmpObj.append(img);
|
||
//logger("$(parent).find('.localSettingsC').length", $(parent).find('.localSettingsC'));
|
||
if ($(parent).find('.localSettingsC').length < 1) {
|
||
// logger('here');
|
||
var localSettingsC = $('<input type="text" name="localSettingsC" class="localSettingsC" style="display:none;" />');
|
||
//logger(settings);
|
||
var localSettings = JSON.stringify(settings);
|
||
localSettingsC.val(localSettings);
|
||
$(parent).append(localSettingsC);
|
||
}
|
||
logger('tmpObj', tmpObj);
|
||
return tmpObj;
|
||
},
|
||
|
||
tryHotHoverSetOnmove: function ($this, canvas, settings, e) {
|
||
//logger("SET ONMOVE", $this, canvas, settings, JSON.parse($($this).find('.localSettingsC').val()));
|
||
$($this).on('mousemove', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHover($($this), canvas, settings, e); });
|
||
},
|
||
tryHotHoverUnsetOnmove: function ($this, canvas, settings, e) {
|
||
//$($this).off('mouseenter',".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverSetOnmove);
|
||
},
|
||
|
||
tryHotHover: function ($this, canvas, settings, e) {
|
||
//logger('MOUSE MOVE');
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
//logger('settings', settings);
|
||
|
||
var element = $($($this).find('.mainImg')[0]);
|
||
//var y = window.scrollY;
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
|
||
$this.settings = setts;
|
||
settings = setts;
|
||
//logger('settings', settings, $($this).find('.localSettingsC').val());
|
||
|
||
var offset = $(canvas).offset();
|
||
//logger("e.pageX",e.pageX);
|
||
// logger("e.pageY",e.pageY);
|
||
// logger("e.pageX",e.pageX - offset.left);
|
||
// logger("e.pageY",e.pageY - offset.top);
|
||
|
||
// logger("viewport", settings.viewBox);
|
||
//logger('settings.viewBox on try hot hover', settings.viewBox);
|
||
var svgSize = settings.viewBox.replace('"', '').split(" ");
|
||
var clickX = e.pageX - offset.left;
|
||
var clickY = e.pageY - offset.top;
|
||
// logger('e.pageY', e.pageY);
|
||
// logger('offset.top', offset.top);
|
||
// logger('scroll', y);
|
||
var viewW = $(element).outerWidth();
|
||
var viewH = $(element).outerHeight();
|
||
//var zoom = parseFloat( $($this).attr('zoom') );
|
||
//var left = parseFloat( $($this).attr('posx') );
|
||
//var top = parseFloat( $($this).attr('posy') );
|
||
// $($this).attr('posXSt',e.pageX);
|
||
// $($this).attr('posYSt',e.pageY);
|
||
//logger('to convert coords', clickX, clickY, viewW, viewH, parseFloat( svgSize[2] ), parseFloat( svgSize[3] ), left, top, zoom);
|
||
var relCoords = methods.toSvgCoordsExp(clickX, clickY, parseFloat(svgSize[2]), parseFloat(svgSize[3]), element);
|
||
////console.log(relCoords);
|
||
//var relCoords = methods.toSvgCoords(clickX, clickY, viewW, viewH, parseFloat( svgSize[2] ), parseFloat( svgSize[3] ), left, top, zoom);
|
||
//logger("relCoords", relCoords);
|
||
|
||
var forShow = false;
|
||
|
||
for (let i = 0; i < settings.legend.length; i++) {
|
||
|
||
if (methods.checkForCanvasRefClick(settings, settings.legend[i], relCoords.X, relCoords.Y, canvas)) {
|
||
forShow = true;
|
||
}
|
||
}
|
||
if (forShow == true) {
|
||
$(canvas).css({ "cursor": "pointer" });
|
||
}
|
||
else {
|
||
$(canvas).css({ "cursor": "auto" });
|
||
}
|
||
|
||
},
|
||
switchLegend: function ($this, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
logger('legend', $($($this).closest('.S1000Dfigure, .popupWindowFull').find(".S1000Dlegend, .S1000DrandomList")));
|
||
$($($this).closest('.S1000Dfigure, .popupWindowFull').find(".S1000Dlegend, .S1000DrandomList")).toggle();
|
||
},
|
||
showNextPlayer: function ($this, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
if ($($this).next('.S1000Dfiguregraphic').length > 0) {
|
||
open = true
|
||
/* logger('st', $('.elCircle'))
|
||
$('.elCircle').remove()
|
||
logger('st', $('.elCircle'))*/
|
||
|
||
$($this).next('.S1000Dfiguregraphic').show();
|
||
$($this).hide();
|
||
//methods.selfDestroy($this);
|
||
$($this).imagePlayer('destroy');
|
||
//methods.sizeAuto($this.next('.S1000Dfiguregraphic'));
|
||
//$($this).imagePlayer('destroy');
|
||
$($($this).next('.S1000Dfiguregraphic')).imagePlayer('destroy');
|
||
var setts = $($($this).next('.S1000Dfiguregraphic')).find('.localSettingsC').val();
|
||
|
||
$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
//logger('st', $($this).prev())
|
||
|
||
setts = JSON.parse(setts);
|
||
// logger('showNextPlayer', setts);
|
||
if (!$($this).hasClass('fullScreen')) {
|
||
$($($this).next('.S1000Dfiguregraphic')).imagePlayer({
|
||
viewType: 'inline',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
});
|
||
}
|
||
else {
|
||
$($($this).next('.S1000Dfiguregraphic')).imagePlayer({
|
||
viewType: 'fullScreen',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
});
|
||
}
|
||
// logger('self destruction', $this);
|
||
//logger("$(this).next('.S1000Dfiguregraphic').find('.localSettingsC')",$this.next('.S1000Dfiguregraphic').find('.localSettingsC'));
|
||
}
|
||
},
|
||
showPrevPlayer: function ($this, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
if ($($this).prev('.S1000Dfiguregraphic').length > 0) {
|
||
open = true
|
||
|
||
// logger('prev', $($this).prev('.S1000Dfiguregraphic'));
|
||
$($this).prev('.S1000Dfiguregraphic').show();
|
||
$($this).hide();
|
||
//methods.selfDestroy($this);
|
||
$($this).imagePlayer('destroy');
|
||
//methods.sizeAuto($this.prev('.S1000Dfiguregraphic'));
|
||
$($($this).prev('.S1000Dfiguregraphic')).imagePlayer('destroy');
|
||
var setts = $($($this).prev('.S1000Dfiguregraphic')).find('.localSettingsC').val();
|
||
|
||
$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
|
||
setts = JSON.parse(setts);
|
||
//logger('showPrevPlayer', setts);
|
||
if (!$($this).hasClass('fullScreen')) {
|
||
$($($this).prev('.S1000Dfiguregraphic')).imagePlayer({
|
||
viewType: 'inline',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
});
|
||
}
|
||
else {
|
||
// logger('here2');
|
||
$($($this).prev('.S1000Dfiguregraphic')).imagePlayer({
|
||
viewType: 'fullScreen',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
});
|
||
}
|
||
// logger('self destruction', $this);
|
||
}
|
||
},
|
||
|
||
tryHotShow: function ($this, canvas, settings, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
//logger('settings before save', settings);
|
||
//methods.saveSettings($this, settings);
|
||
//logger('settings after save', settings);
|
||
//var y = window.scrollY;
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
//$this.settings = setts;
|
||
settings = setts;
|
||
|
||
//logger(settings);
|
||
var element = $($($this).find('.imagePlayerImg .mainImg')[0]);
|
||
|
||
var offset = $(canvas).offset();
|
||
// logger("e.pageX",e.pageX);
|
||
// logger("e.pageY",e.pageY);
|
||
// logger("e.pageX",e.pageX - offset.left);
|
||
// logger("e.pageY",e.pageY - offset.top);
|
||
|
||
var svgSize = settings.viewBox.replace('"', '').split(" ");
|
||
var clickX = e.pageX - offset.left;
|
||
var clickY = e.pageY - offset.top;
|
||
// logger('e.pageY', e.pageY);
|
||
//logger('offset.top', offset.top);
|
||
// logger('scroll', y);
|
||
// var viewW = $(canvas).outerWidth();
|
||
// var viewH = $(canvas).outerHeight();
|
||
// var zoom = parseFloat( $($this).attr('zoom') );
|
||
// var left = parseFloat( $($this).attr('posx') );
|
||
// var top = parseFloat( $($this).attr('posy') );
|
||
// $($this).attr('posXSt',e.pageX);
|
||
// $($this).attr('posYSt',e.pageY);
|
||
logger('to convert coords', clickX, clickY, parseFloat(svgSize[2]), parseFloat(svgSize[3]), element);
|
||
var relCoords = methods.toSvgCoordsExp(clickX, clickY, parseFloat(svgSize[2]), parseFloat(svgSize[3]), element);
|
||
//logger("relCoords", relCoords);
|
||
|
||
forShow = false;
|
||
|
||
for (var i = 0; i < settings.legend.length; i++) {
|
||
logger("checkForCanvasRefClick", methods.checkForCanvasRefClick(settings, settings.legend[i], relCoords.X, relCoords.Y, canvas));
|
||
if (methods.checkForCanvasRefClick(settings, settings.legend[i], relCoords.X, relCoords.Y, canvas)) {
|
||
|
||
//logger(`ПОПАЛ! ${settings.legend[i]}`);
|
||
|
||
/*if( ($(settings.legend[i]).attr('apsname') == toDraw) || ($(settings.legend[i]).hasClass(toDraw)) || ($(settings.legend[i]).hasClass('hotspot_' + toDraw)) ){
|
||
|
||
}*/
|
||
// logger(settings.legend.length);
|
||
for (var k = 0; k < settings.legend.length; k++) {
|
||
try {
|
||
settings.legendSpots[k].todraw = false;
|
||
}
|
||
catch (e) {
|
||
logger('Error in image hotspot ' + e.name + ":" + e.message);
|
||
}
|
||
}
|
||
// logger('leg', settings.legendSpots[i].todraw);
|
||
//if (settings.legend[i].todraw != undefined) {
|
||
settings.legendSpots[i].todraw = true;
|
||
// }
|
||
// logger('true?');
|
||
forShow = settings.legend[i];
|
||
}
|
||
/*else{
|
||
settings.legendSpots[i].todraw=false;
|
||
}*/
|
||
}
|
||
// logger('set', setts);
|
||
// logger('set', $this);
|
||
methods.saveSettings($this, setts);
|
||
methods.basicRedrawImageOld($this, canvas);
|
||
|
||
//убираем тень со всех не кликнутых элементов
|
||
|
||
if (forShow != false) {
|
||
$($this).closest('.S1000Dfigure').find('.S1000DrandomList a').closest('tr').css({ 'box-shadow': 'unset', '-webkit-box-shadow': 'unset', '-moz-box-shadow': 'unset' });
|
||
if (settings.type == 'vector') {
|
||
//ставим тень если попали по элементу
|
||
var links = $($this).closest('.S1000Dfigure').find('.S1000DrandomList a');
|
||
|
||
for (var k = 0; k < $(links).length; k++) {
|
||
|
||
// logger('TO DRAW VECTOR', $(forShow).attr('class'));
|
||
|
||
if ($(forShow)[0].tagName == 'G') {
|
||
if ($(forShow).attr('class').includes('Ø') && $(links[k]).attr('name').includes('O') && $(forShow).attr('class').replace('Ø', '') == $(links[k]).attr('name').replace('O', '')) {
|
||
$(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
|
||
}
|
||
// $(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
|
||
} else if (($(links[k]).attr('name') == $(forShow).attr('class')) || $(links[k]).attr('name') == $(forShow).attr('class').replace('hotspot_', '') || $(links[k]).attr('name') == $(forShow).attr('apsname')) {
|
||
//settings.legendSpots[k].todraw=true;
|
||
$(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
|
||
}
|
||
}
|
||
//$($this).closest('.S1000Dfigure').find('.S1000DrandomList a').closest('tr').css({'background-color':'unset'});
|
||
} else {
|
||
//ставим тень если попали по элементу
|
||
var links = $($this).closest('.S1000Dfigure').find('.S1000DrandomList a');
|
||
//logger('links 2,3,4 ', links);
|
||
|
||
for (var k = 0; k < $(links).length; k++) {
|
||
|
||
// logger('TO DRAW RASTER', forShow);
|
||
if ($(links[k]).attr('name') == forShow.applicationstructurename || $(links[k]).attr('name') == forShow.hotspottitle) {
|
||
//settings.legendSpots[k].todraw=true;
|
||
$(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// if(settings.type == 'vector'){
|
||
// chechForCanvasRefClick(settings, element, relCoords.X, relCoords.Y);
|
||
// }
|
||
},
|
||
|
||
checkForCanvasRefClick: function (settings, element, clickX, clickY, canvas) {
|
||
if (settings.type == 'vector') {
|
||
|
||
let xCoord
|
||
let yCoord
|
||
|
||
if ($(element).attr('x') == undefined) {
|
||
let transform = $(element).attr('transform')
|
||
if (transform != undefined) {
|
||
let nums = transform.match(/\((.+?)\)/)
|
||
let arrNums = nums[1].split(' ')
|
||
xCoord = arrNums[4]
|
||
yCoord = arrNums[5]
|
||
}
|
||
} else {
|
||
if (clickX > (parseFloat($(element).attr('x')) - 5) && (clickX < (parseFloat($(element).attr('x')) + 5)) && (clickY > (parseFloat($(element).attr('y')) - 5)) && (clickY < (parseFloat($(element).attr('y')) + 5))) {
|
||
xCoord = parseFloat($(element).attr('x'));
|
||
yCoord = parseFloat($(element).attr('y'));
|
||
}
|
||
}
|
||
|
||
// logger('element xCoord',xCoord);
|
||
// logger('element yCoord',yCoord);
|
||
if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (!isNaN(yCoord)) && (!isNaN(xCoord)) && (yCoord != null) && (xCoord != '') && (yCoord != '')) {
|
||
if ((clickX > (xCoord - 5)) && (clickX < (xCoord + 5)) && (clickY > (yCoord - 5)) && (clickY < (yCoord + 5))) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
} else {
|
||
if ($(element).attr('points') != undefined) {
|
||
var pts = $(element).attr('points').split(' ');
|
||
if (pts.length >= 2) {
|
||
var xSumm = 0;
|
||
var ySumm = 0;
|
||
for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
|
||
xSumm = xSumm + parseFloat(pts[xind * 2]);
|
||
}
|
||
for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
|
||
ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
|
||
}
|
||
xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
|
||
ySumm = ySumm / (Math.floor(pts.length / 2) - 1);
|
||
|
||
if ((clickX > (xSumm - 5)) && (clickX < xSumm + 5) && (clickY > ySumm - 5) && (clickY < ySumm + 5)) {
|
||
//logger('ПОПАЛ!', item);
|
||
flagCollision = true;
|
||
//return true;
|
||
}
|
||
}
|
||
} else {
|
||
//logger('element',$(element)[0].childNodes);
|
||
var arr = $(element)[0].childNodes;
|
||
|
||
var flagCollision = false;
|
||
|
||
arr.forEach(function (item, i, arr) {
|
||
//alert( i + ": " + item + " (массив:" + arr + ")" );
|
||
if ($(item).attr('points') != undefined) {
|
||
var pts = $(item).attr('points').split(' ');
|
||
// logger('item points',$(item).attr('points'));
|
||
if (pts.length >= 2) {
|
||
// logger(clickX + '>' + (parseInt(pts[0]) - 5), (clickX > (parseInt(pts[0]) - 5)? true:false));
|
||
// logger(clickX + '<' + (parseInt(pts[0]) + 5), (clickX < (parseInt(pts[0]) + 5))? true:false);
|
||
// logger(clickY + '>' + (parseInt(pts[1]) - 5), (clickY > (parseInt(pts[1]) - 5))? true:false);
|
||
// logger(clickY + '<' + (parseInt(pts[1]) + 5), (clickY < (parseInt(pts[1]) + 5))? true:false);
|
||
|
||
//var ctx = canvas.getContext('2d');
|
||
// ctx.strokeStyle="#00FF00";
|
||
// ctx.moveTo(parseInt(pts[0])-2, parseInt(pts[1]) - 2);
|
||
// ctx.lineTo(parseInt(pts[0])+11, parseInt(pts[1])+11);
|
||
// ctx.moveTo(parseInt(pts[0])-2, parseInt(pts[1]) + 11);
|
||
// ctx.lineTo(parseInt(pts[0])+11, parseInt(pts[1])-2);
|
||
// ctx.stroke();
|
||
|
||
// ctx.moveTo(clickX-2, clickY - 2);
|
||
// ctx.lineTo(clickX+11, clickY+11);
|
||
// ctx.moveTo(clickX-2, clickY + 11);
|
||
// ctx.lineTo(clickX+11, clickY-2);
|
||
// ctx.stroke();
|
||
|
||
var xSumm = 0;
|
||
var ySumm = 0;
|
||
for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
|
||
xSumm = xSumm + parseFloat(pts[xind * 2]);
|
||
}
|
||
for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
|
||
ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
|
||
}
|
||
xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
|
||
ySumm = ySumm / (Math.floor(pts.length / 2) - 1);
|
||
|
||
if ((clickX > (xSumm - 5)) && (clickX < xSumm + 5) && (clickY > ySumm - 5) && (clickY < ySumm + 5)) {
|
||
//logger('ПОПАЛ!', item);
|
||
flagCollision = true;
|
||
//return true;
|
||
}
|
||
|
||
//tmpAdd = '<circle cx="'+pts[0]+'" cy="'+pts[1]+'" r="5" fill="none" stroke="#ff0000"/>';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
if (flagCollision) {
|
||
return true;
|
||
}
|
||
else {
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
//RASTER GRAPHIC
|
||
var xCoord = parseFloat(element.coords[0]);
|
||
var yCoord = parseFloat(element.coords[1]);
|
||
//logger(xCoord, yCoord);
|
||
|
||
if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (!isNaN(yCoord)) && (!isNaN(xCoord)) && (yCoord != null) && (xCoord != '') && (yCoord != '')) {
|
||
var ctx = canvas.getContext('2d');
|
||
//logger('ctx',ctx.canvas.width, settings.viewBox, xCoord, yCoord);
|
||
|
||
//tmpAdd = '<circle cx="'+xCoord+'" cy="'+yCoord+'" r="5" fill="none" stroke="#ff0000"/>';
|
||
// logger(clickX + '>' + (xCoord - 5), (clickX > (xCoord - 5)? true:false));
|
||
// logger(clickX + '<' + (xCoord + 5), (clickX < (xCoord + 5))? true:false);
|
||
// logger(clickY + '>' + (yCoord - 5), (clickY > (yCoord - 5))? true:false);
|
||
// logger(clickY + '<' + (yCoord + 5), (clickY < (yCoord + 5))? true:false);
|
||
|
||
// ctx.strokeStyle="#FF0000";
|
||
// ctx.moveTo(xCoord, yCoord );
|
||
// ctx.lineTo(xCoord+15, yCoord+15);
|
||
// ctx.moveTo(xCoord, yCoord + 15);
|
||
// ctx.lineTo(xCoord+15, yCoord);
|
||
// ctx.stroke();
|
||
// ctx.strokeStyle="#00FF00";
|
||
// ctx.moveTo(clickX, clickY);
|
||
// ctx.lineTo(clickX+15, clickY+15);
|
||
// ctx.moveTo(clickX, clickY + 15);
|
||
// ctx.lineTo(clickX+15, clickY);
|
||
// ctx.stroke();
|
||
|
||
if ((clickX > (xCoord)) && (clickX < (xCoord + 15)) && (clickY > (yCoord)) && (clickY < (yCoord + 15))) {
|
||
return true;
|
||
}
|
||
else {
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
return (false);
|
||
},
|
||
toSvgCoordsExp: function (clickX, clickY, svgW, svgH, element) {
|
||
// logger('toSvgCoordsExp',clickX, clickY, svgW, svgH, element);
|
||
var res = {};
|
||
var percClick = {};
|
||
|
||
var left = parseFloat($(element).css('left'));
|
||
var top = parseFloat($(element).css('top'));
|
||
|
||
var width = $(element).outerWidth();
|
||
var height = $(element).outerHeight();
|
||
|
||
var zoom = width / svgW;
|
||
|
||
percClick.X = (clickX - left) / width;
|
||
percClick.Y = (clickY - top) / height;
|
||
|
||
res.X = (svgW * percClick.X);
|
||
res.Y = (svgH * percClick.Y);
|
||
// logger('svg',svgW,svgH);
|
||
// logger('percClick.X', percClick.X, 'percClick.Y', percClick.Y);
|
||
// logger('res X',res.X,'res Y',res.Y);
|
||
|
||
return (res);
|
||
},
|
||
|
||
RefClick: function ($this, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation()
|
||
logger('ref');
|
||
open = false
|
||
|
||
var eventElement = e.target;
|
||
// logger('ev', eventElement);
|
||
|
||
var eventElementId = $(eventElement).attr('href');
|
||
// eventElementId = eventElementId.split('h');
|
||
// eventElementId = eventElementId[0].replace('#','');
|
||
|
||
var searchName = $(eventElement).attr('name');
|
||
|
||
var parent = $(eventElement).closest('.S1000Dfigure');
|
||
var Arr = $(parent).find('.S1000Dfiguregraphic');
|
||
var findedElement = '';
|
||
var canMem = true;
|
||
|
||
$.each(Arr, function (ii, value) {
|
||
var findElRes = [];
|
||
//logger($(Arr[ii]), '.S1000DHotspot[applicationstructurename="' + searchName + '"]');
|
||
findElRes = $(Arr[ii]).find('.S1000DHotspot[applicationstructurename="' + searchName + '"]');
|
||
|
||
if (findElRes.length > 0 && canMem) {
|
||
findedElement = Arr[ii];
|
||
canMem = false;
|
||
}
|
||
});
|
||
|
||
if (findedElement != '') {
|
||
|
||
if ($(findedElement).css('display') == 'block') {
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
// logger(setts);
|
||
setts = JSON.parse(setts);
|
||
//$this.settings = setts;
|
||
var settings = setts;
|
||
|
||
$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
$(e.currentTarget).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
|
||
|
||
const gettingClass = str => {
|
||
let idxStart = str.indexOf('class="')
|
||
let firstStr = str.substr(idxStart + 'class="'.length)
|
||
let idxSEnd = firstStr.indexOf('"')
|
||
return (firstStr.substr(0, idxSEnd))
|
||
}
|
||
|
||
let idElem = ''
|
||
|
||
if (settings.type == 'vector') {
|
||
var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
|
||
var resElem = [];
|
||
|
||
logger(settings.legend);
|
||
|
||
for (var i = 0; i < settings.legend.length; i++) {
|
||
|
||
if (($(settings.legend[i]).attr('apsname') == toDraw) || ($(settings.legend[i]).hasClass(toDraw)) || ($(settings.legend[i]).hasClass('hotspot_' + toDraw))) {
|
||
|
||
resElem = $(settings.legend[i]);
|
||
logger(resElem);
|
||
try {
|
||
settings.legendSpots[i].todraw = true;
|
||
}
|
||
catch (e) {
|
||
|
||
}
|
||
//logger(settings.legendSpots);
|
||
//methods.saveSettings($this, settings);
|
||
|
||
//$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
//$(e.currentTarget).closest('tr').css({ 'box-shadow': 'green', '-webkit-box-shadow': 'green', '-moz-box-shadow': 'green' });
|
||
|
||
logger("SUCCESS FIND OF HOT");
|
||
} else if (settings.legend[i].includes('<g') && (searchName.includes('O'))) {
|
||
|
||
let str = gettingClass(settings.legend[i])
|
||
if (str.includes('Ø')) {
|
||
if (searchName.replace('O', '') == str.replace('Ø', '')) {
|
||
for (let j = 0; j < setts.legend.length; j++) {
|
||
setts.legendSpots[j].todraw = false;
|
||
if (setts.legend[j].includes('Ø')) {
|
||
let resultStr = gettingClass(setts.legend[j])
|
||
if (resultStr == str) {
|
||
setts.legendSpots[j].todraw = true;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
try {
|
||
settings.legendSpots[i].todraw = false;
|
||
}
|
||
catch (e) {
|
||
logger('Error in image hotspot ' + e.name + ":" + e.message);
|
||
}
|
||
//methods.saveSettings($this, settings);
|
||
}
|
||
}
|
||
//logger(settings);
|
||
methods.saveSettings($this, settings);
|
||
}
|
||
else {
|
||
logger('NOT VECTOR');
|
||
// logger(settings.legend);
|
||
|
||
var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
|
||
var resElem = [];
|
||
|
||
for (var i = 0; i < settings.legend.length; i++) {
|
||
//logger('$(settings.legend[i])',$(settings.legend[i]));
|
||
if (settings.legend[i].applicationstructurename == toDraw) {
|
||
|
||
resElem = $(settings.legend[i]);
|
||
settings.legendSpots[i].todraw = true;
|
||
//logger(settings.legendSpots);
|
||
//methods.saveSettings($this, settings);
|
||
|
||
logger("SUCCESS FIND OF HOT");
|
||
}
|
||
else {
|
||
settings.legendSpots[i].todraw = false;
|
||
//logger(settings.legendSpots);
|
||
//methods.saveSettings($this, settings);
|
||
}
|
||
}
|
||
// logger(settings);
|
||
methods.saveSettings($this, settings);
|
||
}
|
||
}
|
||
else {
|
||
$($this).closest('.S1000Dfigure').find('.S1000Dfiguregraphic').css({ 'display': 'none' });
|
||
$(findedElement).css({ 'display': 'block' });
|
||
$($this).imagePlayer('destroy');
|
||
$(findedElement).imagePlayer('destroy');
|
||
|
||
var setts = $(findedElement).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
setts.ready = function ($thisEl, target) {
|
||
setTimeout(function () {
|
||
$(target).click();
|
||
}, 500);
|
||
}
|
||
logger('show player by HOT ref', setts);
|
||
if (!$($this).hasClass('fullScreen')) {
|
||
$(findedElement).imagePlayer({
|
||
viewType: 'inline',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
ready: setts.ready($(findedElement), e.target),
|
||
});
|
||
}
|
||
else {
|
||
$(findedElement).imagePlayer({
|
||
viewType: 'fullScreen',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
ready: setts.ready($(findedElement), e.target),
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// logger('elem', setts.legend[0].getComputedTextLength());
|
||
methods.basicRedrawImageOld($this);
|
||
},
|
||
|
||
HRefClick: function ($this, e) {
|
||
// logger('click');
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
var eventElement = e.target;
|
||
var eventElementId = $(eventElement).attr('href');
|
||
|
||
var findElRes = eventElement;
|
||
// eventElementId = eventElementId.split('h');
|
||
// eventElementId = eventElementId[0].replace('#','');
|
||
|
||
// var searchName = $(eventElement).attr('name');
|
||
|
||
// var parent = $(eventElement).closest('.S1000Dfigure');
|
||
// var Arr = $(parent).find('.S1000Dfiguregraphic');
|
||
// var findedElement = '';
|
||
// var canMem = true;
|
||
|
||
// $.each(Arr, function( ii, value ) {
|
||
// var findElRes = [];
|
||
// logger($(Arr[ii]), '.S1000DHotspot[applicationstructurename="'+ searchName +'"]');
|
||
// findElRes = $(Arr[ii]).find('.S1000DHotspot[applicationstructurename="'+ searchName +'"]');
|
||
|
||
// if(findElRes.length > 0 && canMem){
|
||
// findedElement = Arr[ii];
|
||
// canMem = false;
|
||
// }
|
||
// });
|
||
|
||
var findedElement = $(findElRes).closest('.S1000Dfiguregraphic');
|
||
|
||
if (findElRes != '' && findElRes != undefined) {
|
||
if ($(findedElement).css('display') == 'block') {
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
//$this.settings = setts;
|
||
var settings = setts;
|
||
|
||
if (settings.type == 'vector') {
|
||
var toDraw = $(findElRes).attr('applicationstructurename');
|
||
|
||
var resElem = [];
|
||
for (var i = 0; i < settings.legend.length; i++) {
|
||
//logger('$(settings.legend[i])',$(settings.legend[i]));
|
||
if (($(settings.legend[i]).attr('apsname') == toDraw) || ($(settings.legend[i]).hasClass(toDraw)) || ($(settings.legend[i]).hasClass('hotspot_' + toDraw))) {
|
||
|
||
resElem = $(settings.legend[i]);
|
||
settings.legendSpots[i].todraw = true;
|
||
//logger(settings.legendSpots);
|
||
//methods.saveSettings($this, settings);
|
||
|
||
logger("SUCCESS FIND OF HOT");
|
||
}
|
||
else {
|
||
settings.legendSpots[i].todraw = false;
|
||
//logger(settings.legendSpots);
|
||
//methods.saveSettings($this, settings);
|
||
}
|
||
}
|
||
logger('ss', settings);
|
||
methods.saveSettings($this, settings);
|
||
}
|
||
else {
|
||
logger('NOT VECTOR');
|
||
logger(settings.legend);
|
||
|
||
var toDraw = $(findElRes).attr('applicationstructurename');
|
||
var resElem = [];
|
||
|
||
for (var i = 0; i < settings.legend.length; i++) {
|
||
//logger('$(settings.legend[i])',$(settings.legend[i]));
|
||
if (settings.legend[i].applicationstructurename == toDraw) {
|
||
|
||
resElem = $(settings.legend[i]);
|
||
settings.legendSpots[i].todraw = true;
|
||
//logger(settings.legendSpots);
|
||
//methods.saveSettings($this, settings);
|
||
|
||
logger("SUCCESS FIND OF HOT");
|
||
}
|
||
else {
|
||
settings.legendSpots[i].todraw = false;
|
||
//logger(settings.legendSpots);
|
||
//methods.saveSettings($this, settings);
|
||
}
|
||
}
|
||
methods.saveSettings($this, settings);
|
||
}
|
||
}
|
||
else {
|
||
$($this).closest('.S1000Dfigure').find('.S1000Dfiguregraphic').css({ 'display': 'none' });
|
||
$(findedElement).css({ 'display': 'block' });
|
||
$($this).imagePlayer('destroy');
|
||
$(findedElement).imagePlayer('destroy');
|
||
|
||
var setts = $(findedElement).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
setts.ready = function ($thisEl, target) {
|
||
setTimeout(function () {
|
||
$(target).click();
|
||
}, 500);
|
||
}
|
||
|
||
logger('show player by HOT ref', setts);
|
||
if (!$($this).hasClass('fullScreen')) {
|
||
$(findedElement).imagePlayer({
|
||
viewType: 'inline',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
ready: setts.ready($(findedElement), e.target),
|
||
});
|
||
}
|
||
else {
|
||
$(findedElement).imagePlayer({
|
||
viewType: 'fullScreen',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
ready: setts.ready($(findedElement), e.target),
|
||
});
|
||
}
|
||
}
|
||
}
|
||
methods.basicRedrawImageOld($this);
|
||
},
|
||
|
||
drawRefByPath: function ($this, elem, element) {
|
||
logger('drawRefByPath', $this, elem, element);
|
||
|
||
var zoom = $($this).attr('zoom');
|
||
var posX = $($this).attr('posX');
|
||
var posY = $($this).attr('posY');
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
settings = setts;
|
||
|
||
var c = {};//canvas parameters
|
||
c.width = $($(elem).find('.mainImg')[0]).outerWidth();
|
||
c.height = $($(elem).find('.mainImg')[0]).outerHeight();
|
||
|
||
var i = {};
|
||
regex = /viewBox="(.*)\s(.*)\s(.*)\s(.*)"/gm;
|
||
var mat = regex.exec(setts.viewBox);
|
||
//logger(mat);
|
||
|
||
i.width = parseFloat(mat[3]);
|
||
i.height = parseFloat(mat[4]);
|
||
|
||
var r = c.width / i.width;
|
||
//logger('r', r);
|
||
|
||
var xCoord = element.coords[0];//element.getAttribute('x');
|
||
var yCoord = element.coords[1];//element.getAttribute('y');
|
||
|
||
//logger('xCoord, yCoord', xCoord, yCoord);
|
||
//logger('i.width, i.height', i.width, i.height, setts.viewBox);
|
||
|
||
if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (yCoord != null)) {
|
||
//tmpAdd = '<circle cx="'+xCoord+'" cy="'+yCoord+'" r="5" fill="none" stroke="#ff0000"/>';
|
||
|
||
var cx = ((xCoord - 0) / i.width) * c.width;
|
||
var cy = ((yCoord - 0) / i.height) * c.height;
|
||
var diameter = 15 * r;
|
||
|
||
tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
|
||
}
|
||
|
||
$(elem).find('.mainImg').append(tmpAdd);
|
||
},
|
||
|
||
drawRefByElement: function ($this, elem/*элемент для отрисовки главной картинки*/, element) {
|
||
// //console.log('this', $this[0]);
|
||
// //console.log('elem', elem);
|
||
// console.log('element', element);
|
||
|
||
let coeff
|
||
if ($(element).attr('style') == undefined) {
|
||
var hotspostyle = $(element).attr('font-size')
|
||
coeff = hotspostyle;
|
||
coeff = parseInt(coeff);
|
||
} else if ($(element).attr('style') != undefined && parseInt($(element).attr('font-size')) <= 1) {
|
||
var hotspostyle = $(element).attr('style');
|
||
regex = /(?<=font-size:)\d*.\d*/gm;
|
||
coeff = parseInt(regex.exec(hotspostyle));
|
||
} else if ($(element).attr('style') != undefined && $(element).attr('font-size') != 'NaNpx' && $(element).attr('font-size') != undefined) {
|
||
// //console.log($(element).attr('font-size'));
|
||
var hotspostyle = $(element).attr('font-size');
|
||
coeff = hotspostyle;
|
||
coeff = parseInt(coeff);
|
||
// //console.log('element', element);
|
||
// //console.log(coeff);
|
||
// //console.log((element.split('font-size')))
|
||
// var hotspostyle = $(element).attr('style');
|
||
// regex = /(?<=font-size:)\d*.\d*/gm;
|
||
// coeff = parseInt(regex.exec(hotspostyle));
|
||
} else {
|
||
var hotspostyle = $(element).attr('style');
|
||
regex = /(?<=font-size:)\d*.\d*/gm;
|
||
coeff = parseInt(regex.exec(hotspostyle));
|
||
}
|
||
|
||
// //console.log(coeff);
|
||
|
||
// var zoom = $($this).attr('zoom');
|
||
// var posX = $($this).attr('posX');
|
||
// var posY = $($this).attr('posY');
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
$this.settings = setts;
|
||
|
||
var c = {};//canvas parameters
|
||
c.width = $($(elem).find('.mainImg')[0]).outerWidth();
|
||
c.height = $($(elem).find('.mainImg')[0]).outerHeight();
|
||
|
||
// logger(c);
|
||
|
||
var i = {};
|
||
regex = /viewBox="(.*)\s(.*)\s(.*)\s(.*)"/gm;
|
||
var mat = regex.exec(setts.viewBox);
|
||
|
||
let xCoord = $(element).attr('x');//element.getAttribute('x');
|
||
let yCoord = $(element).attr('y');//element.getAttribute('y');
|
||
|
||
// //console.log(xCoord);
|
||
// //console.log(yCoord);
|
||
|
||
i.width = parseFloat(mat[3]);
|
||
i.height = parseFloat(mat[4]);
|
||
logger('iw', i.width, i.height);
|
||
|
||
var xcoeffText = $(element).text().trim();
|
||
logger('xcoeffText', xcoeffText);
|
||
xcoeff = xcoeffText.length;
|
||
|
||
let r = c.width / i.width;
|
||
|
||
let coor = yCoord / i.height * 100
|
||
let resY = coor * c.height / 100
|
||
|
||
if ($(element).attr('x') == undefined && $(element).attr('cx') == undefined) {
|
||
let transform = $(element).attr('transform')
|
||
if (transform != undefined) {
|
||
let nums = transform.match(/\((.+?)\)/)
|
||
let arrNums = nums[1].split(' ')
|
||
if (xcoeff >= 2) {
|
||
xCoord = (arrNums[4] * arrNums[2]) - 3.5
|
||
yCoord = arrNums[5] * arrNums[2] - 1
|
||
} else {
|
||
xCoord = (arrNums[4] * arrNums[2]) - 3
|
||
yCoord = arrNums[5] * arrNums[2]
|
||
}
|
||
}
|
||
} else if ($(element).attr('x') == undefined) {
|
||
xCoord = $(element).attr('cx');
|
||
yCoord = $(element).attr('cy');
|
||
}
|
||
|
||
// //console.log(xCoord);
|
||
// //console.log(yCoord);
|
||
|
||
var tmpAdd = '';
|
||
if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (yCoord != null)) {
|
||
//tmpAdd = '<circle cx="'+xCoord+'" cy="'+yCoord+'" r="5" fill="none" stroke="#ff0000"/>';
|
||
|
||
const onlyLetters = /^[A-Za-zА-Яа-я]+$/.test(xcoeffText)
|
||
const lettersAndNumbers = /^[A-Za-zА-Яа-я0-9]+$/.test(xcoeffText)
|
||
const onlyNumbers = /^\d+$/.test(xcoeffText)
|
||
|
||
let cxNum = 0.1
|
||
let cyNum = 1.2
|
||
let dNum = 0.8
|
||
let diff = xcoeff
|
||
|
||
let cxNumEllipse = 0.5
|
||
let cyNumEllipse = 1.4
|
||
|
||
let cx
|
||
let cy
|
||
let diameter
|
||
|
||
let minusNum = 0
|
||
|
||
let trans = false
|
||
|
||
if ($(element).attr('x') == undefined && $(element).attr('cx') == undefined) {
|
||
trans = true
|
||
}
|
||
// //console.log(xcoeffText);
|
||
const changeParametersCircle = () => {
|
||
if (diff - 1 != 1) {
|
||
dNum -= 0.1
|
||
cyNum += 0.15
|
||
cxNum += 0.15
|
||
diff -= 1
|
||
changeParametersCircle()
|
||
} else {
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 2
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 2
|
||
diameter = coeff * xcoeff * dNum * r + 5;
|
||
if (xcoeffText.indexOf('I') != -1) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - xcoeff
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - xcoeff - 3
|
||
} else if (onlyLetters || xcoeff == 2) {
|
||
if (trans == true || xcoeff != 2) {
|
||
if (xcoeff == 2 && trans == true) {
|
||
} else {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - xcoeff - 7
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - xcoeff - 7
|
||
}
|
||
}
|
||
}
|
||
else if (onlyNumbers) {
|
||
if (trans != true || xcoeff == 2) {
|
||
diameter = coeff * xcoeff * dNum * r + 3;
|
||
} else {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - xcoeff - 7
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - xcoeff - 7
|
||
}
|
||
} else if (lettersAndNumbers) {
|
||
if (trans == true) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 15
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 8
|
||
diameter = coeff * xcoeff * dNum * r + 10
|
||
if (xcoeff == 2) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 10
|
||
}
|
||
}
|
||
} else if (xcoeffText.includes('.') || xcoeffText.includes(',') || xcoeffText.includes('/')) {
|
||
|
||
if (trans != true) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 2
|
||
if (xcoeff == 3 && xcoeffText.includes('/')) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 9
|
||
diameter = coeff * xcoeff * dNum * r * 4;
|
||
} else if (xcoeff == 4 && xcoeffText.includes('/')) {
|
||
// //console.log(r);
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 9
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 2
|
||
diameter = coeff * xcoeff * dNum * r + 12;
|
||
}
|
||
else if (xcoeff == 4) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 4
|
||
diameter = coeff * xcoeff * dNum * r + 6;
|
||
} else {
|
||
diameter = coeff * xcoeff * dNum * r + 2;
|
||
}
|
||
} else {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 10
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 7
|
||
if (xcoeff == 4) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 15
|
||
diameter = coeff * xcoeff * dNum * r + 6;
|
||
} else {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 2
|
||
diameter = coeff * xcoeff * dNum * r + 2;
|
||
}
|
||
}
|
||
} else if (xcoeffText.includes(')')) {
|
||
if (trans != true) {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 4
|
||
} else {
|
||
cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 10
|
||
cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 6
|
||
}
|
||
diameter = coeff * xcoeff * dNum * r + 10;
|
||
} else {
|
||
diameter = coeff * xcoeff * dNum * r + 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
let num1 = 10
|
||
let num2 = 40
|
||
|
||
const changeParametersEllipse = () => {
|
||
// logger('diff', diff);
|
||
// //console.log(xcoeffText);
|
||
if (diff - 1 != 4) {
|
||
cyNumEllipse += 0.15
|
||
cxNumEllipse += 0.15
|
||
diff -= 1
|
||
|
||
if (minusNum < 7) { minusNum += 1 } else { minusNum = 0 }
|
||
|
||
num1 += 5
|
||
num2 += 10
|
||
changeParametersEllipse()
|
||
} else {
|
||
if (trans != true) {
|
||
if (xcoeffText.includes('.') || xcoeffText.includes(',') || xcoeffText.includes('/')) {
|
||
cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - 5
|
||
if (xcoeff > 5 && !$($this).hasClass('fullScreen')) {
|
||
// //console.log(minusNum);
|
||
// cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height + minusNum)
|
||
|
||
cy = (((yCoord - coeff) / i.height) * c.height) - 2
|
||
// diameter = coeff * xcoeff //* 0.3 * r;
|
||
if (coeff - r > 6) {
|
||
coeff = r + 1
|
||
cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height + minusNum)
|
||
}
|
||
if (xcoeffText.includes('/')) {
|
||
diameter = coeff * xcoeff
|
||
} else {
|
||
diameter = coeff * r * 2;
|
||
}
|
||
// //console.log(diameter);
|
||
} else if (xcoeff == 5 && xcoeffText.includes('/')) {
|
||
cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - 8
|
||
cy = (((yCoord - coeff) / i.height) * c.height) - 5
|
||
diameter = coeff * xcoeff
|
||
// } else if (xcoeff > 5 && xcoeffText.includes('/')) {
|
||
// // cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width)
|
||
// cy = (((yCoord - coeff) / i.height) * c.height) - 5
|
||
// diameter = coeff * xcoeff
|
||
// //console.log(diameter);
|
||
}
|
||
else {
|
||
if (xcoeff >= 5 && $($this).hasClass('fullScreen')) {
|
||
cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - 2
|
||
}
|
||
cy = (((yCoord - coeff) / i.height) * c.height) - 3
|
||
// cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height)
|
||
if (coeff - r > 6) {
|
||
coeff = r + 1
|
||
cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height + minusNum)
|
||
}
|
||
diameter = coeff * xcoeff //* 0.4 * r;
|
||
}
|
||
} else if (xcoeffText.includes(')')) {
|
||
cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height)
|
||
diameter = coeff * xcoeff * 0.4 * r + 10;
|
||
} else {
|
||
cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width)
|
||
cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height)
|
||
diameter = coeff * xcoeff * 0.4 * r;
|
||
}
|
||
} else {
|
||
cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - num1
|
||
cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height) - num2
|
||
diameter = coeff * xcoeff * 0.6 * r;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (xcoeff == 1) {
|
||
if (c.width < i.width) {
|
||
r = c.width / i.width;
|
||
}
|
||
if (onlyLetters) {
|
||
// logger(xCoord, coeff, i.width, c.width);
|
||
if (xcoeffText === "W" || xcoeffText === "Ш" || xcoeffText === "Щ" || xcoeffText === "Ж") {
|
||
cy = (((yCoord - coeff / 0.8) / i.height) * c.height)
|
||
cx = (((xCoord - coeff / 3.2) / i.width) * c.width)
|
||
} else {
|
||
cy = (((yCoord - coeff / 0.8) / i.height) * c.height)
|
||
cx = (((xCoord - coeff / 2.5) / i.width) * c.width)
|
||
}
|
||
diameter = coeff * 1.7 * r;
|
||
} else {
|
||
cx = (((xCoord - coeff / 2.2) / i.width) * c.width)
|
||
cy = (((yCoord - coeff / 0.9) / i.height) * c.height) - 2
|
||
diameter = coeff * 1.5 * r + 4;
|
||
}
|
||
// logger('dr', diameter, r);
|
||
} else if (xcoeff > 1 && xcoeff <= 4) {
|
||
logger('xcoeff', xcoeff);
|
||
changeParametersCircle()
|
||
} else if (xcoeff > 4) {
|
||
changeParametersEllipse()
|
||
} else if (xcoeff == 0) {
|
||
//console.log(1);
|
||
coeff = $(element).attr('r')
|
||
if (coeff == undefined) {
|
||
coeff = $(element).attr('rx')
|
||
}
|
||
cx = (((xCoord - coeff) / i.width) * c.width)
|
||
cy = (((yCoord - coeff) / i.height) * c.height)
|
||
diameter = coeff * 2 * r;
|
||
}
|
||
|
||
if (trans != true) {
|
||
if (xcoeff > 4) {
|
||
// //console.log('cx');
|
||
tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + (diameter + xcoeff * 4) + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
|
||
} else {
|
||
tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
|
||
}
|
||
} else {
|
||
if (xcoeff > 4) {
|
||
tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + (diameter + xcoeff * 4) + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
|
||
} else {
|
||
tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
//logger('element', $(element).attr('points'));
|
||
// logger('element',$(element)[0].childNodes);
|
||
if ($(element).attr('points') != undefined) {
|
||
var pts = $(element).attr('points').split(' ');
|
||
|
||
if (pts.length >= 2) {
|
||
var xSumm = 0;
|
||
var ySumm = 0;
|
||
for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
|
||
xSumm = xSumm + parseFloat(pts[xind * 2]);
|
||
}
|
||
for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
|
||
ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
|
||
}
|
||
xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
|
||
ySumm = ySumm / (Math.floor(pts.length / 2) - 1);
|
||
|
||
//logger(pts.length % 2, xSumm, ySumm);
|
||
|
||
var cx = ((xSumm - 3.75) / i.width) * c.width;
|
||
var cy = ((ySumm - 3.75) / i.height) * c.height;
|
||
var diameter = 7.5 * r;
|
||
//console.log(12);
|
||
tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
|
||
//tmpAdd = '<circle cx="'+pts[0]+'" cy="'+pts[1]+'" r="5" fill="none" stroke="#ff0000"/>';
|
||
}
|
||
} else {
|
||
var arr = $(element)[0].childNodes;
|
||
arr.forEach(function (item, k, arr) {
|
||
//alert( i + ": " + item + " (массив:" + arr + ")" );
|
||
if ($(item).attr('points') != undefined) {
|
||
var pts = $(item).attr('points').split(' ');
|
||
|
||
if (pts.length >= 2) {
|
||
var xSumm = 0;
|
||
var ySumm = 0;
|
||
for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
|
||
xSumm = xSumm + parseFloat(pts[xind * 2]);
|
||
}
|
||
for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
|
||
ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
|
||
}
|
||
xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
|
||
ySumm = ySumm / (Math.floor(pts.length / 2) - 1);
|
||
|
||
var cx = ((xSumm - 3.75) / i.width) * c.width;
|
||
var cy = ((ySumm - 3.75) / i.height) * c.height;
|
||
var diameter = 7.5 * r;
|
||
//console.log(1);
|
||
tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
|
||
// tmpAdd = '<circle cx="'+pts[0]+'" cy="'+pts[1]+'" r="5" fill="none" stroke="#ff0000"/>';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// //console.log(tmpAdd);
|
||
$(elem).find('.mainImg').append(tmpAdd);
|
||
},
|
||
|
||
redrawAllRefs: function ($this, element, e) {
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
settings = setts;
|
||
|
||
// //console.log('redrawAllRefs', settings);
|
||
// //console.log($this);
|
||
//methods.basicRedrawImageOld($this);
|
||
$(element).find('.elCircle').remove();
|
||
|
||
if (!settings.shawAllRefs) {
|
||
var resElem = [];
|
||
//logger('redrawRefs settings', $this.settings);
|
||
if (settings.type == 'vector') {
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
if (settings.legend.length > 0) {
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
var arr = settings.legend;
|
||
arr.forEach(function (item, i, arr) {
|
||
methods.drawRefByElement($this, element, item);
|
||
});
|
||
// for (var i = 0; i < settings.legend.length; i++) {
|
||
// //logger('resElem[i]',$(resElem[i]));
|
||
// var drawUrl = methods.drawRefByElement($this, element, settings.legend[i]);
|
||
// //logger(drawUrl);
|
||
// }
|
||
}
|
||
}
|
||
else {
|
||
logger('DRAW HOT FOR RASTER');
|
||
if (settings.legend.length > 0) {
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
var arr = settings.legend;
|
||
arr.forEach(function (item, i, arr) {
|
||
methods.drawRefByPath($this, element, item);
|
||
});
|
||
// for (var i = 0; i < settings.legend.length; i++) {
|
||
// //logger('resElem[i]',settings.legend[i]);
|
||
// methods.drawRefByPath($this, element, settings.legend[i]);
|
||
// //logger(drawUrl);
|
||
// }
|
||
|
||
//methods.drawRefByUrl($this, canvas, toDrawUrl);
|
||
}
|
||
}
|
||
|
||
settings.shawAllRefs = true;
|
||
methods.saveSettings($this, settings);
|
||
} else {
|
||
settings.shawAllRefs = false;
|
||
methods.saveSettings($this, settings);
|
||
}
|
||
},
|
||
|
||
redrawRefs: function ($this, element) {
|
||
//logger("element", element);
|
||
//logger('redraw');
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
logger(setts);
|
||
// logger($($this).find('.localSettingsC').val());
|
||
$(element).find('.elCircle').remove();
|
||
|
||
setts = JSON.parse(setts);
|
||
$this.settings = setts;
|
||
var settings = setts;
|
||
|
||
var resElem = [];
|
||
|
||
if (settings.type == 'vector') {
|
||
//var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
|
||
for (var i = 0; i < settings.legendSpots.length; i++) {
|
||
if (settings.legendSpots[i].todraw == true) {
|
||
resElem.push(settings.legend[i]);
|
||
}
|
||
}
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
|
||
if (resElem.length > 0) {
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
for (var i = 0; i < resElem.length; i++) {
|
||
// logger('resElem[i]',$(resElem[i]));
|
||
logger($this, element, resElem[i]);
|
||
methods.drawRefByElement($this, element, resElem[i]);
|
||
//logger(drawUrl);
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
for (var i = 0; i < settings.legendSpots.length; i++) {
|
||
//logger('$(settings.legend[i])',$(settings.legend[i]));
|
||
if (settings.legendSpots[i].todraw == true) {
|
||
resElem.push(settings.legend[i]);
|
||
}
|
||
}
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
if (resElem.length > 0) {
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
for (var i = 0; i < resElem.length; i++) {
|
||
//logger('resElem[i]',$(resElem[i]));
|
||
methods.drawRefByPath($this, element, resElem[i]);
|
||
//logger(drawUrl);
|
||
}
|
||
}
|
||
}
|
||
/*else{
|
||
//var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
|
||
//logger('DRAW HOT FOR RASTER');
|
||
for (var i = 0; i < settings.legendSpots.length; i++) {
|
||
|
||
if(settings.legendSpots[i].todraw == true){
|
||
resElem.push( settings.legend[i]);
|
||
}
|
||
}
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
if(resElem.length > 0){
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
for (var i = 0; i < resElem.length; i++) {
|
||
//logger('resElem[i]',resElem[i]);
|
||
methods.drawRefByPath($this, element, resElem[i]);
|
||
//logger(drawUrl);
|
||
}
|
||
|
||
//methods.drawRefByUrl($this, canvas, toDrawUrl);
|
||
}
|
||
}*/
|
||
},
|
||
clickToggleMap: function ($this, element, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
$(element).toggle();
|
||
$(element).css({ 'width': ($(element).prev().outerWidth() / 6) + 'px', 'height': ($(element).prev().outerHeight() / 6) + 'px' });
|
||
|
||
// $('.elCircle').css({ 'border': "0px" })
|
||
// $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
|
||
/*var ctx = canvas.getContext('2d');
|
||
|
||
ctx.canvas.width = $(canvas).prev().prev().prev().outerWidth();
|
||
ctx.canvas.height = $(canvas).prev().prev().prev().outerHeight();
|
||
|
||
if($(canvas).css('display') == 'block'){
|
||
methods.renderMap($this);
|
||
}*/
|
||
if ($(element).css('display') == 'block') {
|
||
methods.renderMap($this);
|
||
}
|
||
},
|
||
|
||
renderMap: function ($this) {
|
||
logger('render');
|
||
var zoom = $($this).attr('zoom');
|
||
var posX = $($this).attr('posX') / 6;
|
||
var posY = $($this).attr('posY') / 6;
|
||
//imagePlayerMapCanvas"><div class="mainImgMa
|
||
var elem = $($this).find('.imagePlayerMapCanvas')[0];
|
||
var imgElem = $($this).find('.imagePlayerMapCanvas .mainImgMap')[0];
|
||
var redFrame = $($this).find('.imagePlayerMapCanvas .redFrame')[0];
|
||
//var canvas = $($this).find("canvas")[3];
|
||
|
||
var c = {};//canvas parameters
|
||
c.width = $(elem).outerWidth();
|
||
c.height = $(elem).outerHeight();
|
||
|
||
var img = new Image(); // Новый объект
|
||
img.src = settings.url;
|
||
|
||
var i = {};//image parameters
|
||
i.width = img.naturalWidth;
|
||
i.height = img.naturalHeight;
|
||
//logger("i", i);
|
||
|
||
if (i.width == 0 || i.height == 0) {
|
||
i.width = $(elem).prev().outerWidth();
|
||
i.height = $(elem).prev().outerHeight();
|
||
}
|
||
|
||
//var ctx = canvas.getContext('2d');
|
||
//ctx.drawImage(img, 0, 0, c.width, 'auto', $this);
|
||
|
||
//resized
|
||
var r = {};//image parameters
|
||
r.width = c.width / i.width;
|
||
|
||
//maxHeight of canvas
|
||
$(elem).css({ 'height': (i.height * r.width) + 'px' });
|
||
c.height = i.height * r.width;//update canvas height
|
||
|
||
//ctx.canvas.width = c.width;
|
||
//ctx.canvas.height = c.height;
|
||
|
||
$(imgElem).css({ 'width': c.width, 'height': c.height });
|
||
|
||
// logger('zoom', zoom);
|
||
// logger('posX', posX);
|
||
// logger('posY', posY);
|
||
// logger('c.width', c.width);
|
||
// logger('c.height', c.height);
|
||
|
||
//ctx.drawImage(img, 0, 0, c.width, c.height);
|
||
//ctx.strokeStyle="#FF0000";
|
||
$(redFrame).css({ 'left': -posX - c.width / (2 * zoom) + c.width / 2 + 'px', 'top': -posY - c.height / (2 * zoom) + c.height / 2 + 'px', 'width': c.width / zoom + 'px', 'height': c.height / zoom + 'px' });
|
||
//ctx.strokeRect(-posX - c.width/(2*zoom) + c.width/2, -posY - c.height/(2*zoom) + c.height/2, c.width/zoom, c.height/zoom);
|
||
},
|
||
drawOnScreen: function ($this, canvas, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
logger('draw');
|
||
$(canvas).toggle();
|
||
$(canvas).css({ 'width': $(canvas).prev().outerWidth() + 'px', 'height': $(canvas).prev().outerHeight() + 'px' });
|
||
|
||
var ctx = canvas.getContext('2d');
|
||
|
||
ctx.canvas.width = $(canvas).prev().outerWidth();
|
||
ctx.canvas.height = $(canvas).prev().outerHeight();
|
||
//ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||
},
|
||
startDraw: function ($this, canvas, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
$(canvas).addClass('drawing');
|
||
var ctx = canvas.getContext('2d');
|
||
|
||
var offset = $(canvas).offset();
|
||
/*logger('clientX '+e.clientX +', clientY '+e.clientY);
|
||
logger('offset.left '+offset.left+ ', offset.top '+offset.top);
|
||
logger(e.clientX - offset.left);
|
||
logger(e.clientY + $(window).scrollTop() - offset.top );*/
|
||
ctx.strokeStyle = "#FF0000";
|
||
ctx.moveTo(e.clientX - offset.left, e.clientY + $(window).scrollTop() - offset.top);
|
||
},
|
||
drawingLine: function ($this, canvas, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
$this.settings = setts;
|
||
var settings = setts;
|
||
|
||
var offset = $(canvas).offset();
|
||
|
||
var ctx = canvas.getContext('2d');
|
||
if ($(canvas).hasClass('drawing')) {
|
||
ctx.strokeStyle = settings.rColor;
|
||
ctx.lineWidth = parseInt(settings.rWidth);
|
||
ctx.lineTo(e.clientX - offset.left, e.clientY + $(window).scrollTop() - offset.top);
|
||
ctx.stroke();
|
||
}
|
||
},
|
||
stopDraw: function ($this, canvas, e) {
|
||
$(canvas).removeClass('drawing');
|
||
},
|
||
targetOnScreen: function ($this, canvas, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
logger('target');
|
||
|
||
$(canvas).toggle();
|
||
|
||
// $('.elCircle').css({ 'border': "0px" })
|
||
$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
|
||
//logger($(canvas).prev());
|
||
$(canvas).css({ 'width': $(canvas).prev().prev().outerWidth() + 'px', 'height': $(canvas).prev().prev().outerHeight() + 'px' });
|
||
|
||
var ctx = canvas.getContext('2d');
|
||
ctx.canvas.width = $(canvas).prev().prev().outerWidth();
|
||
ctx.canvas.height = $(canvas).prev().prev().outerHeight();
|
||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||
//ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||
},
|
||
|
||
setTarget: function ($this, canvas, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
$(canvas).toggle();
|
||
$(canvas).toggle();
|
||
$(canvas).addClass('drawing');
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
setts = JSON.parse(setts);
|
||
$this.settings = setts;
|
||
var settings = setts;
|
||
|
||
var ctx = canvas.getContext('2d');
|
||
ctx.canvas.width = $(canvas).prev().prev().outerWidth();
|
||
ctx.canvas.height = $(canvas).prev().prev().outerHeight();
|
||
|
||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||
|
||
ctx.strokeStyle = settings.tColor;
|
||
ctx.lineWidth = parseInt(settings.tWidth);
|
||
|
||
var offset = $(canvas).offset();
|
||
|
||
ctx.moveTo(e.clientX - offset.left, e.clientY + $(window).scrollTop() - offset.top);
|
||
|
||
//рисуем крестик
|
||
ctx.moveTo(0, e.clientY + $(window).scrollTop() - offset.top);
|
||
ctx.lineTo(ctx.canvas.width, e.clientY + $(window).scrollTop() - offset.top);
|
||
|
||
ctx.moveTo(e.clientX - offset.left, 0);
|
||
ctx.lineTo(e.clientX - offset.left, ctx.canvas.height);
|
||
|
||
ctx.stroke();
|
||
},
|
||
|
||
fullScreen: function ($this, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
logger('fullScreen');
|
||
//logger($this);
|
||
//logger($($this));
|
||
//logger($($this).parent().html());
|
||
if (!$($this).hasClass('fullScreen')) {
|
||
|
||
//tmpAdd = '<div class="elCircle" style="border: px solid white"/>';
|
||
|
||
//$($this).find('.elCircle').remove;
|
||
// methods.basicRedrawImageOld($this);
|
||
|
||
$('body').append('<div class="popupWindowFull"><div class="popupImagePlayer"></div></div>');
|
||
$($this).parent().clone().appendTo('.popupWindowFull .popupImagePlayer');
|
||
|
||
for (var i = 0; i < $('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic').length; i++) {
|
||
|
||
if ($($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).css('display') != 'none') {
|
||
$($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).attr('canpan', false);
|
||
$($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).imagePlayer('destroy');
|
||
var setts = $($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).find('.localSettingsC').val();
|
||
//logger(setts);
|
||
setts = JSON.parse(setts);
|
||
//logger('setts to fullScreen', setts);
|
||
setts.viewType = 'fullScreen';
|
||
|
||
//logger('inside');
|
||
// methods.tryHotShow($($this), $($this).find("canvas")[0], settings, e);
|
||
//logger('fullScreen initial setts', setts);
|
||
|
||
$($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).find('.localSettingsC').val(JSON.stringify(setts));
|
||
|
||
/* let event = new Event("click");
|
||
logger('e', e);
|
||
methods.RefClick($('.S1000Dfiguregraphic init fullScreen initFull', e))*/
|
||
|
||
$($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).imagePlayer({
|
||
viewType: 'fullScreen',
|
||
url: setts.url,
|
||
legend: setts.legend,
|
||
legendSpots: setts.legendSpots,
|
||
type: setts.type,
|
||
viewBox: setts.viewBox,
|
||
|
||
spots: setts.spots,
|
||
name: setts.name,
|
||
size: setts.size,
|
||
redline: false,
|
||
canResize: false,
|
||
tearWindow: false,
|
||
target: { x: 0, y: 0, show: false },
|
||
shawAllRefs: false,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
$('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic').imagePlayer('destroy');
|
||
$('body .popupWindowFull').remove();
|
||
}
|
||
$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
},
|
||
resize: function ($this, tmpCanvas, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
logger('resize');
|
||
var delta = e.originalEvent.deltaY;
|
||
//var canvas = tmpCanvas;
|
||
if (delta > 0) {//scroll down
|
||
//logger('scroll down');
|
||
if ($($this).attr('zoom') > 0.1) {
|
||
$($this).attr('zoom', ($($this).attr('zoom') * 0.95).toFixed(3));
|
||
}
|
||
} else {//scroll up
|
||
//logger('scroll up');
|
||
$($this).attr('zoom', ($($this).attr('zoom') / 0.95).toFixed(3));
|
||
}
|
||
methods.basicRedrawImageOld($this);
|
||
if ($($($this).find(".imagePlayerMapCanvas")[0]).css('display') == 'block') {//если отображается миникарта - перерисовать её
|
||
methods.renderMap($this);
|
||
}
|
||
|
||
if (open == true) {
|
||
logger('nie');
|
||
$('.elCircle').remove()
|
||
}
|
||
},
|
||
panClick: function ($this, element, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
logger('PAN CLICK');
|
||
if (e.which != 1) { // если клик правой кнопкой мыши
|
||
return; // то он не запускает перенос
|
||
} else {
|
||
open = false
|
||
}
|
||
//logger('startPan', e.pageX, e.pageY);
|
||
|
||
$($this).attr('posxst', e.pageX);
|
||
$($this).attr('posyst', e.pageY);
|
||
$($this).attr('canpan', true);
|
||
},
|
||
pan: function ($this, element, e) {
|
||
e.preventDefault();
|
||
// e.stopPropagation();
|
||
|
||
//var canvas = tmpCanvas;
|
||
|
||
if ($($this).attr('canpan') == 'true') {
|
||
// logger('PAN', e.pageX - parseFloat($($this).attr('posxst')), e.pageY - parseFloat($($this).attr('posyst')));
|
||
|
||
var moveX = e.pageX - parseFloat($($this).attr('posxst'));
|
||
var moveY = e.pageY - parseFloat($($this).attr('posyst'));
|
||
|
||
$($this).attr('posxst', e.pageX);
|
||
$($this).attr('posyst', e.pageY);
|
||
|
||
$($this).attr('posx', (parseFloat($($this).attr('posx')) + moveX));
|
||
$($this).attr('posy', (parseFloat($($this).attr('posy')) + moveY));
|
||
|
||
methods.basicRedrawImageOld($this);
|
||
|
||
if ($($($this).find(".imagePlayerMapCanvas")[0]).css('display') == 'block') {//если отображается миникарта - перерисовать её
|
||
methods.renderMap($this);
|
||
}
|
||
}
|
||
else {
|
||
//logger('cantMove');
|
||
return false;
|
||
}
|
||
|
||
},
|
||
stopPan: function ($this, element, e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
//logger('stopPan');
|
||
//logger('CAN NOT PAN', $($this));
|
||
$($this).attr('canpan', false);
|
||
$($this).off('mousemove', ".imagePlayer canvas.imagePlayerCanvas", methods.pan);
|
||
|
||
// чтобы не появлялся кружок при нажатие на посторонние элементы
|
||
// methods.basicRedrawImageOld($this);
|
||
|
||
//$($($this).find(".imagePlayer")).unbind('mousedown mousemove');
|
||
if ($($($this).find(".imagePlayerMapCanvas")[0]).css('display') == 'block') {//если отображается миникарта - перерисовать её
|
||
methods.renderMap($this);
|
||
}
|
||
|
||
return;
|
||
},
|
||
canvasFirstRender: function ($this, tmpCanvas, settings) {
|
||
var element = $($this).find('.imagePlayerImg');
|
||
// logger('element', element);
|
||
var imgImg = $($this).find('.imagePlayerImg .mainImg');
|
||
|
||
var left = ($(element).outerWidth() - $(imgImg).outerWidth()) / 2;
|
||
var top = 0;
|
||
|
||
var canvas = tmpCanvas;
|
||
|
||
//$(canvas).css({"width":"100%"});
|
||
|
||
var c = {};//canvas parameters
|
||
c.width = $(canvas).outerWidth();
|
||
c.height = $(canvas).outerHeight();
|
||
|
||
//logger('canvas',c);
|
||
|
||
var ctx = canvas.getContext('2d');
|
||
|
||
/*var img = new Image(); // Новый объект
|
||
img.crossOrigin = "anonymous";
|
||
img.src = settings.url;
|
||
settings.img = img;
|
||
|
||
$($this).img = img;*/
|
||
|
||
ctx.canvas.width = c.width;
|
||
ctx.canvas.height = c.height;
|
||
|
||
// чтобы при переключении вперед назад - ничего не было выделено
|
||
methods.basicDrawOld(element[0], imgImg[0], left, top, $(imgImg).outerWidth(), $(imgImg).outerHeight(), $this, settings);
|
||
},
|
||
destroy: function () {
|
||
var $this = $(this);
|
||
//open = false
|
||
|
||
/*return this.each(function() {
|
||
var $this = $(this);
|
||
$($this).find("*").unbind().off().removeData();
|
||
$($this).find(".imagePlayer")[0].remove();
|
||
});*/
|
||
$($this).off('click', ".imagePlayerNext", methods.showNextPlayer);
|
||
$($this).off('click', ".imagePlayerPrev", methods.showPrevPlayer);
|
||
$($this).find(".imagePlayerNext").unbind('click');
|
||
$($this).find(".imagePlayerPrev").unbind('click');
|
||
//полный экран
|
||
$($this).off('click', ".imagePlayerFullscreen", methods.fullScreen);
|
||
//все хоты
|
||
$($this).off('click', ".imagePlayerHotspots", methods.redrawAllRefs);
|
||
$($this).find(".imagePlayerHotspots").unbind('click');
|
||
//рестарт плеера
|
||
$($this).off('click', ".resetPlayer", methods.reinit);
|
||
|
||
$($this).parent().off('click', ".S1000DIntRefHotspot", methods.RefClick);
|
||
|
||
//проверка на хот по наведению
|
||
$($this).off('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverSetOnmove);
|
||
$($this).off('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverUnsetOnmove);
|
||
|
||
//проверка на наличие хота под курсором по клику
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotShow);
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.panClick);
|
||
$($this).off('mousemove', ".imagePlayer canvas.imagePlayerCanvas", methods.pan);
|
||
//панорамирование
|
||
$($this).off('wheel', ".imagePlayer canvas.imagePlayerCanvas", methods.resize);
|
||
$('body').off('mouseup', '.popupWindowFull', methods.stopPan);
|
||
|
||
//рисовалка
|
||
$($this).off('click', ".imagePlayerDrawer", methods.drawOnScreen);
|
||
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.startDraw);
|
||
$($this).off('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.drawingLine);
|
||
$('body').off('mouseup', methods.stopDraw);
|
||
|
||
//таргет
|
||
$($this).off('click', ".imagePlayerTarget", methods.targetOnScreen);
|
||
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", methods.setTarget);
|
||
|
||
//миникарта
|
||
$($this).off('click', ".imagePlayerTear", methods.clickToggleMap);
|
||
|
||
//показать или спрятать легенду
|
||
$($this).off('click', ".imagePlayerLegend", methods.switchLegend);
|
||
|
||
$($this).find("*").unbind().off();
|
||
$($this).find(".imagePlayer").remove();
|
||
//$(this).removeClass('init');
|
||
$($this).closest('.S1000Dfigure').removeClass('imagePlayer-init');
|
||
},
|
||
selfDestroy: function ($this) {
|
||
logger('selfDestroy');
|
||
/*return this.each(function() {
|
||
var $this = $(this);
|
||
$($this).find("*").unbind().off().removeData();
|
||
$($this).find(".imagePlayer")[0].remove();
|
||
});*/
|
||
$($this).off('click', ".imagePlayerNext", methods.showNextPlayer);
|
||
$($this).off('click', ".imagePlayerPrev", methods.showPrevPlayer);
|
||
//полный экран
|
||
$($this).off('click', ".imagePlayerFullscreen", methods.fullScreen);
|
||
//все хоты
|
||
$($this).off('click', ".imagePlayerHotspots", methods.redrawAllRefs);
|
||
//рестарт плеера
|
||
$($this).off('click', ".resetPlayer", methods.reinit);
|
||
|
||
$($this).parent().off('click', ".S1000DIntRefHotspot", methods.RefClick);
|
||
|
||
//проверка на хот по наведению
|
||
$($this).off('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverSetOnmove);
|
||
$($this).off('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverUnsetOnmove);
|
||
|
||
//проверка на наличие хота под курсором по клику
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotShow);
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.panClick);
|
||
$($this).off('mousemove', ".imagePlayer canvas.imagePlayerCanvas", methods.pan);
|
||
//панорамирование
|
||
$($this).off('wheel', ".imagePlayer canvas.imagePlayerCanvas", methods.resize);
|
||
$('body').off('mouseup', '.popupWindowFull', methods.stopPan);
|
||
|
||
//рисовалка
|
||
$($this).off('click', ".imagePlayerDrawer", methods.drawOnScreen);
|
||
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.startDraw);
|
||
$($this).off('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.drawingLine);
|
||
$('body').off('mouseup', methods.stopDraw);
|
||
|
||
//таргет
|
||
$($this).off('click', ".imagePlayerTarget", methods.targetOnScreen);
|
||
|
||
$($this).off('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", methods.setTarget);
|
||
|
||
//миникарта
|
||
$($this).off('click', ".imagePlayerTear", methods.clickToggleMap);
|
||
|
||
//показать или спрятать легенду
|
||
$($this).off('click', ".imagePlayerLegend", methods.switchLegend);
|
||
|
||
$($this).find("*").unbind().off();
|
||
$($this).find(".imagePlayer").remove();
|
||
$($this).closest('.S1000Dfigure').removeClass('imagePlayer-init');
|
||
},
|
||
|
||
reinit: function ($this) {
|
||
logger('REINIT $this', $this);
|
||
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
|
||
setts = JSON.parse(setts);
|
||
for (var index = 0; index < setts.legendSpots.length; index++) {
|
||
setts.legendSpots[index] = { todraw: false };
|
||
}
|
||
setts.shawAllRefs = false;
|
||
methods.saveSettings($this, setts);
|
||
|
||
// logger('REINIT',setts);
|
||
// logger('SETTINGS',$($this).find('.localSettingsC').val());
|
||
|
||
$($this).attr('posx', 0);
|
||
$($this).attr('posy', 0);
|
||
$($this).attr('zoom', 1);
|
||
var allCanvas = $($this).find('canvas');
|
||
|
||
for (var i = 1; i < allCanvas.length; i++) {
|
||
$(allCanvas[i]).hide();
|
||
}
|
||
// methods.basicRedrawImageOld($this);
|
||
|
||
var element = $($this).find('.imagePlayerImg')[0];
|
||
//logger('element',element);
|
||
var img = $($this).find('.imagePlayerImg .mainImg')[0];
|
||
$($this).attr('posx', ($(element).outerWidth() - $(img).outerWidth()) / 2);
|
||
methods.basicRedrawImageOld($this);
|
||
|
||
$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
},
|
||
basicDrawOld: function (element, img, coordX, coordY, imgW, imgH, $this, settings) {
|
||
/* if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
|
||
logger('logg');
|
||
//чтобы не отображалось при закрытии
|
||
methods.basicRedrawImageOld($this);
|
||
}*/
|
||
coordX = typeof coordX !== 'undefined' ? coordX : 0;
|
||
coordY = typeof coordY !== 'undefined' ? coordY : 0;
|
||
imgW = typeof imgW !== 'undefined' ? imgW : false;
|
||
imgH = typeof imgH !== 'undefined' ? imgH : false;
|
||
$this = typeof $this !== 'undefined' ? $this : false;
|
||
settings = typeof settings !== 'undefined' ? settings : JSON.parse($($this).find('.localSettingsC').val());
|
||
element = typeof element !== 'undefined' ? element : $($this).find('.imagePlayerImg');
|
||
|
||
logger('canvas draw');
|
||
//logger('basicDrawOld', element, img, coordX, coordY, imgW, imgH, $this, settings);
|
||
if (imgW != 'auto' && $(element).outerWidth() > imgW) {
|
||
//coordX = ($(element).outerWidth() - imgW)/2;
|
||
$($this).attr('posx', coordX);
|
||
}
|
||
|
||
if (imgH == 'auto' || imgW == 'auto') {
|
||
if (imgH == 'auto') {
|
||
$(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': 'auto' });
|
||
}
|
||
if (imgW == 'auto') {
|
||
$(img).css({ 'left': coordX, 'top': coordY, 'width': 'auto', 'height': imgH });
|
||
}
|
||
}
|
||
else {
|
||
$(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': imgH });
|
||
$('.elCircle').remove()
|
||
}
|
||
},
|
||
|
||
basicRedrawImageOld: function ($this) {
|
||
logger('basicRedrawImageOld');
|
||
// //console.log($this);
|
||
//var canvas = tmpCanvas;
|
||
var zoom = $($this).attr('zoom');
|
||
var posX = $($this).attr('posx');
|
||
var posY = $($this).attr('posy');
|
||
|
||
var sett = methods.readSettings($this);
|
||
|
||
//$($this).find('.imagePlayerImg').css({"width":"100%"});
|
||
logger($($this).find('.imagePlayerImg'));
|
||
|
||
var element = $($this).find('.imagePlayerImg')[0];
|
||
// //console.log($($this).find('.imagePlayerImg')[0]);
|
||
var img = $($this).find('.imagePlayerImg .mainImg')[0];
|
||
|
||
var c = {};//canvas parameters
|
||
c.width = sett.basicWidth;
|
||
c.height = sett.basicHeight;
|
||
|
||
methods.basicDrawImageOld(element, img,
|
||
parseFloat($($this).attr('posx')) - ((zoom * c.width - c.width) / 2),
|
||
parseFloat($($this).attr('posy')) - ((zoom * c.height - c.height) / 2),
|
||
zoom * c.width,
|
||
zoom * c.height,
|
||
$this);
|
||
|
||
methods.redrawRefs($this, element);
|
||
|
||
if (sett.shawAllRefs) {
|
||
// redrawAllRefs()
|
||
var resElem = [];
|
||
//logger('redrawRefs settings', $this.settings);
|
||
if (sett.type == 'vector') {
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
if (sett.legend.length > 0) {
|
||
//logger('$(resElem[0])',resElem[0]);
|
||
for (var i = 0; i < sett.legend.length; i++) {
|
||
//logger('resElem[i]',$(resElem[i]));
|
||
methods.drawRefByElement($this, element, sett.legend[i]);
|
||
//logger(drawUrl);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
basicDrawImageOld: function (element, img, coordX, coordY, imgW, imgH, $this, settings) {
|
||
coordX = typeof coordX !== 'undefined' ? coordX : 0;
|
||
coordY = typeof coordY !== 'undefined' ? coordY : 0;
|
||
imgW = typeof imgW !== 'undefined' ? imgW : false;
|
||
imgH = typeof imgH !== 'undefined' ? imgH : false;
|
||
$this = typeof $this !== 'undefined' ? $this : false;
|
||
settings = typeof settings !== 'undefined' ? settings : JSON.parse($($this).find('.localSettingsC').val());
|
||
element = typeof element !== 'undefined' ? element : $($this).find('.imagePlayerImg');
|
||
|
||
// logger('basicDrawImageOld', coordX, coordY, imgW, imgH);
|
||
|
||
if (imgH == 'auto' || imgW == 'auto') {
|
||
if (imgH == 'auto') {
|
||
$(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': 'auto' });
|
||
}
|
||
if (imgW == 'auto') {
|
||
$(img).css({ 'left': coordX, 'top': coordY, 'width': 'auto', 'height': imgH });
|
||
}
|
||
}
|
||
else {
|
||
$(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': imgH });
|
||
}
|
||
},
|
||
saveSettings: function ($this, settings) {
|
||
var setts = $($this).closest('.S1000Dfiguregraphic').find('.localSettingsC').val();
|
||
// logger("$($this).find('.localSettingsC').val()", $($this).closest('S1000Dfiguregraphic').find('.localSettingsC'));
|
||
setts = JSON.parse(setts);
|
||
// logger('js', setts);
|
||
setts = $.extend({}, setts, settings);
|
||
setts = JSON.stringify(setts);
|
||
$($this).closest('.S1000Dfiguregraphic').find('.localSettingsC').val(setts);
|
||
//logger("$($this).find('.localSettingsC').val()", $($this).closest('S1000Dfiguregraphic').find('.localSettingsC').val(setts));
|
||
},
|
||
readSettings: function ($this) {
|
||
var setts = $($this).find('.localSettingsC').val();
|
||
|
||
//logger('read settings',$($this).find('.localSettingsC').val());
|
||
//logger(setts);
|
||
setts = JSON.parse(setts);
|
||
// //console.log(setts);
|
||
return setts;
|
||
},
|
||
update: function ($this) {
|
||
// logger($(this));
|
||
// logger($($this));
|
||
},
|
||
initiatePlayerSize: function ($this, settings, overloadSizes) {
|
||
// //console.log($this[0]);
|
||
$($this).find('canvas').css({ 'width': '100%' });
|
||
var cWidth = $($($this).find('canvas')[0]).outerWidth();
|
||
$($($this).find('.imagePlayerImg')[0]).css({ 'width': cWidth + 'px' });
|
||
|
||
var real = {};
|
||
|
||
var vw = window.innerWidth;
|
||
var vh = window.innerHeight;
|
||
//logger('window.innerWidth, window.innerHeight', window.innerWidth, window.innerHeight);
|
||
|
||
var maxHeight = vh / 2;
|
||
var maxWidth = cWidth;
|
||
regex = /viewBox="(.*)\s(.*)\s(.*)\s(.*)"/gm;
|
||
var mat = regex.exec(settings.viewBox);
|
||
//logger('viewBox from settings', settings.viewBox, parseFloat(mat[3]), parseFloat(mat[4]));
|
||
|
||
if ($($this).hasClass('fullScreen')) {
|
||
|
||
$('.imagePlayerMapCanvas').css({ 'background-color': 'white' })
|
||
|
||
maxHeight = $($this).outerHeight() - $($($this).find('.imagePlayerSettingsPanel')[0]).outerHeight();
|
||
|
||
$($this).find('canvas').css({ 'height': maxHeight + 'px' });
|
||
$($($this).find('.imagePlayerImg')[0]).css({ 'height': maxHeight + 'px' });
|
||
}
|
||
|
||
if (!overloadSizes) {
|
||
// $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
|
||
//logger('NATURAL W & H', $($this).find('.imagePlayerImg img')[0], $($this).find('.imagePlayerImg img')[0].naturalWidth, $($this).find('.imagePlayerImg img')[0].naturalHeight);
|
||
if ($($this).find('.imagePlayerImg img')[0].naturalWidth != undefined && $($this).find('.imagePlayerImg img')[0].naturalWidth != 0
|
||
&& $($this).find('.imagePlayerImg img')[0].naturalHeight != undefined && $($this).find('.imagePlayerImg img')[0].naturalHeight != 0) {
|
||
real.width = $($this).find('.imagePlayerImg img')[0].naturalWidth;
|
||
real.height = $($this).find('.imagePlayerImg img')[0].naturalHeight;
|
||
}
|
||
else {
|
||
real.width = $($($this).find('.imagePlayerImg img')[0]).outerWidth();
|
||
real.height = $($($this).find('.imagePlayerImg img')[0]).outerHeight();
|
||
}
|
||
|
||
/*if(settings.viewBox == 'viewBox="0 0 0 0"'){
|
||
settings.viewBox = 'viewBox="0 0 '+ real.width + ' ' + real.height +'"';
|
||
}*/
|
||
}
|
||
else {
|
||
real.width = cWidth;
|
||
var tmpW = parseFloat(mat[3]);
|
||
var tmpH = parseFloat(mat[4]);
|
||
|
||
var r = real.width / tmpW;
|
||
real.height = tmpH * r;
|
||
}
|
||
|
||
//logger(mat);
|
||
var i = {};
|
||
i.width = real.width;
|
||
i.height = real.height;
|
||
// logger('max sizes', maxWidth, maxHeight);
|
||
// logger('i.width, i.height', i.width, i.height);
|
||
|
||
//var relCanvas = maxWidth/maxHeight;
|
||
//var relI = i.width/i.height;
|
||
//logger('rel sizes', relCanvas, relI);
|
||
var res = {};
|
||
var rel = maxWidth / i.width;
|
||
res.real = real;
|
||
|
||
if (i.height * rel <= maxHeight) {
|
||
//logger('i.height * rel <= maxHeight', i.height * rel, maxHeight);
|
||
|
||
res.width = maxWidth;
|
||
//var tmp = maxWidth / i.width;
|
||
res.height = i.height * rel;
|
||
}
|
||
else {
|
||
res.height = maxHeight;
|
||
var tmp = maxHeight / i.height;
|
||
res.width = i.width * tmp;
|
||
//logger('i.height * rel > maxHeight', maxHeight, maxHeight / i.height, i.width * tmp);
|
||
}
|
||
|
||
//logger('real',real);
|
||
//window content area sizes
|
||
//logger('initial size', res);
|
||
|
||
return res;
|
||
//var maxWidth = cWidth;
|
||
|
||
/*if($($($this).find('.imagePlayerImg img')[0]).outerHeight() > maxHeight && !$(this).hasClass('fullScreen')){
|
||
$($($this).find('.imagePlayerImg img')[0]).css({'height': maxHeight+'px', 'width': 'auto'});
|
||
}*/
|
||
|
||
// var initWidth = $($($this).find('.imagePlayerImg img')[0]).outerWidth();
|
||
// var initHeight = $($($this).find('.imagePlayerImg img')[0]).outerHeight();
|
||
|
||
//$($this).find('.imagePlayerImg').css({'width': initWidth+'px', 'height': initHeight+'px'});
|
||
//$($this).find('canvas').css({'height': initHeight+'px'});
|
||
},
|
||
setPlayerSize: function ($this, xSize, ySize) {
|
||
//logger('setPlayerSize',$this, xSize, ySize);
|
||
if ($($this).hasClass('fullScreen')) {
|
||
maxHeight = $($this).outerHeight() - $($($this).find('.imagePlayerSettingsPanel')[0]).outerHeight();
|
||
|
||
$($this).find('canvas').css({ 'height': maxHeight + 'px' });
|
||
$($($this).find('.imagePlayerImg')[0]).css({ 'height': maxHeight + 'px' });
|
||
$($($this).find('.imagePlayerImg .mainImg')[0]).css({ 'height': ySize + 'px', 'width': xSize + 'px' });
|
||
}
|
||
else {
|
||
$($this).find('canvas').css({ 'width': '100%', 'height': ySize + 'px' });
|
||
$($this).find('.imagePlayerImg').css({ 'width': '100%', 'height': ySize + 'px' });
|
||
$($($this).find('.imagePlayerImg .mainImg')[0]).css({ 'height': ySize + 'px', 'width': xSize + 'px' });
|
||
}
|
||
//logger($($($this).find('.imagePlayerImg .mainImg')[0]));
|
||
},
|
||
eventsList: function (element) {
|
||
// В разных версиях jQuery список событий получается по-разному
|
||
var events = element.data('events');
|
||
if (events !== undefined) return events;
|
||
|
||
events = $.data(element, 'events');
|
||
if (events !== undefined) return events;
|
||
|
||
events = $._data(element, 'events');
|
||
if (events !== undefined) return events;
|
||
|
||
events = $._data(element[0], 'events');
|
||
if (events !== undefined) return events;
|
||
|
||
return false;
|
||
},
|
||
checkEvent: function (element, eventname) {
|
||
var events,
|
||
ret = false;
|
||
|
||
events = eventsList(element);
|
||
if (events) {
|
||
$.each(events, function (evName, e) {
|
||
if (evName == eventname) {
|
||
ret = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
return ret;
|
||
},
|
||
|
||
/* forBtn(){
|
||
$('button[imagePlayerSettingsButton imagePlayerHotspots active]').attr('imagePlayerSettingsButton imagePlayerHotspots active', 'imagePlayerSettingsButton imagePlayerHotspots')
|
||
}*/
|
||
};
|
||
|
||
$.fn.imagePlayer = function (method) {
|
||
//logger('imagePlayer вызван');
|
||
logger('method', method);
|
||
//logger('this', this);
|
||
if (methods[method]) {
|
||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||
}
|
||
else if (typeof method === 'object' || !method) {
|
||
logger('инициализация');
|
||
logger('arguments', arguments);
|
||
return methods.init.apply(this, arguments);
|
||
}
|
||
else {
|
||
$.error('Метод с именем ' + method + ' не существует для jQuery.imagePlayer');
|
||
}
|
||
};
|
||
})(jQuery); |