dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added "static wormhole" information to map, closed #625

Browse Source 
- refactored _popovers_ shown on map
- minor map UI CSS fixes
This commit is contained in:
Mark Friedrich
2018-05-12 21:38:26 +02:00
parent 2bcf3b7996
commit 386e32fc94
21 changed files with 627 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
js/app/conf/system_effect.js
View File

@@ -603,7 +603,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+15%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+30%'
},{
effect: 'Ship velocity',
@@ -624,7 +624,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+22%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+44%'
},{
effect: 'Ship velocity',
@@ -645,7 +645,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+29%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+58%'
},{
effect: 'Ship velocity',
@@ -666,7 +666,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+36%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+72%'
},{
effect: 'Ship velocity',
@@ -687,7 +687,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+43%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+86%'
},{
effect: 'Ship velocity',
@@ -708,7 +708,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+50%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+100%'
},{
effect: 'Ship velocity',

265
js/app/map/map.js
View File

@@ -36,6 +36,7 @@ define([
systemHeadClass: 'pf-system-head', // class for system head
systemHeadNameClass: 'pf-system-head-name', // class for system name
systemHeadExpandClass: 'pf-system-head-expand', // class for system head expand arrow
systemHeadInfoClass: 'pf-system-head-info', // class for system info
systemBodyClass: 'pf-system-body', // class for system body
systemBodyItemHeight: 16, // px of a system body entry
systemBodyItemClass: 'pf-system-body-item', // class for a system body entry
@@ -57,6 +58,8 @@ define([
systemDialogId: 'pf-system-dialog', // id for system dialog
systemDialogSelectClass: 'pf-system-dialog-select', // class for system select Element
popoverTriggerClass: 'pf-popover-trigger', // class for "popover" trigger elements
// system security classes
systemSec: 'pf-system-sec'
};
@@ -80,7 +83,9 @@ define([
let effectClass = MapUtil.getEffectInfoForSystem('effect', 'class');
return (
target.hasClass(config.systemHeadNameClass) ||
target.hasClass(effectClass)
target.hasClass(effectClass) ||
target.hasClass(config.systemHeadExpandClass) ||
target.hasClass(config.systemHeadInfoClass)
);
};
@@ -371,37 +376,32 @@ define([
id: systemId,
class: config.systemClass
}).append(
// system head
$('<div>', {
class: config.systemHeadClass
}).append(
// System name is editable
$('<span>', {
class: config.systemHeadNameClass
}).attr('data-value', systemName)
).append(
// System locked status
$('<i>', {
class: ['fas', 'fa-lock', 'fa-fw'].join(' ')
}).attr('title', 'locked')
).append(
// System effect color
$('<i>', {
class: ['fas', 'fa-square ', 'fa-fw', effectBasicClass, effectClass].join(' ')
})
).append(
// expand option
$('<i>', {
class: ['fas', 'fa-angle-down ', config.systemHeadExpandClass].join(' ')
})
).prepend(
$('<span>', {
class: [config.systemSec, secClass].join(' '),
text: data.security
})
)
).append(
// system body
}),
// System name is editable
$('<span>', {
class: config.systemHeadNameClass
}).attr('data-value', systemName),
// System locked status
$('<i>', {
class: ['fas', 'fa-lock', 'fa-fw'].join(' ')
}).attr('title', 'locked'),
// System effect color
$('<i>', {
class: ['fas', 'fa-square', 'fa-fw', effectBasicClass, effectClass, config.popoverTriggerClass].join(' ')
}),
// expand option
$('<i>', {
class: ['fas', 'fa-angle-down', config.systemHeadExpandClass].join(' ')
}),
// info element (new line) (optional)
System.getHeadInfoElement(data)
),
$('<div>', {
class: config.systemBodyClass
})
@@ -436,6 +436,9 @@ define([
// hide system tooltip
$(system).toggleSystemTooltip('hide', {});
// destroy popovers
$(system).destroyPopover(true);
// move them to the "top"
$(system).updateSystemZIndex();
},
@@ -871,97 +874,6 @@ define([
checkMapSize(mapWrapper[0]);
}
// system body expand -----------------------------------------------------------------------------------------
mapWrapper.hoverIntent({
over: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// bring system in front (increase zIndex)
system.updateSystemZIndex();
// get ship counter and calculate expand height
let userCount = parseInt(system.data('userCount'));
let expandHeight = userCount * config.systemBodyItemHeight;
// calculate width
let width = system[0].clientWidth;
let minWidth = 150;
let newWidth = width > minWidth ? width : minWidth; // in case of big systems
systemBody.velocity('stop').velocity(
{
height: expandHeight + 'px',
width: newWidth,
'min-width': minWidth + 'px'
},{
easing: 'easeInOutQuart',
duration: 120,
progress: function(){
// repaint connections of current system
map.revalidate(systemId);
},
complete: function(){
map.revalidate(systemId);
// extend player name element
let systemBody = $(this);
let systemBodyItemNameWidth = newWidth - 50 - 10 - 20; // - bodyRight - icon - somePadding
systemBody.find('.' + config.systemBodyItemNameClass).css({width: systemBodyItemNameWidth + 'px'});
systemBody.find('.' + config.systemBodyRightClass).show();
}
}
);
},
out: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// stop animation (prevent visual bug if user spams hover-icon [in - out])
systemBody.velocity('stop');
// reduce player name element back to "normal" size (css class width is used)
systemBody.find('.' + config.systemBodyRightClass).hide();
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
systemBody.velocity('reverse', {
complete: function(){
// overwrite "complete" function from first "hover"-open
// set animated "with" back to default "100%" important in case of system with change (e.g. longer name)
$(this).css({width: ''});
map.revalidate(systemId);
}
});
},
selector: '.' + config.systemClass + ' .' + config.systemHeadExpandClass
});
// system "effect" popover ------------------------------------------------------------------------------------
// -> event delegation to system elements, popup only if needed (hover)
mapWrapper.hoverIntent({
over: function(e){
let effectElement = $(this);
let systemElement = effectElement.closest('.' + config.systemClass);
let security = systemElement.data('security');
let effect = systemElement.data('effect');
effectElement.addSystemEffectTooltip(security, effect, {
trigger: 'manual',
placement: 'right'
}).popover('show');
},
out: function(e){
$(this).popover('destroy');
},
selector: '.' + config.systemClass + ' .' + MapUtil.getEffectInfoForSystem('effect', 'class')
});
};
/**
@@ -2187,6 +2099,9 @@ define([
// hide tooltip
$(selectedSystems).toggleSystemTooltip('hide', {});
// destroy popovers
$(selectedSystems).destroyPopover(true);
// move them to the "top"
$(selectedSystems).updateSystemZIndex();
},
@@ -2800,6 +2715,119 @@ define([
}
});
// system body expand -----------------------------------------------------------------------------------------
mapContainer.hoverIntent({
over: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// bring system in front (increase zIndex)
system.updateSystemZIndex();
// get ship counter and calculate expand height
let userCount = parseInt(system.data('userCount'));
let expandHeight = userCount * config.systemBodyItemHeight;
// calculate width
let width = system[0].clientWidth;
let minWidth = 150;
let newWidth = width > minWidth ? width : minWidth; // in case of big systems
systemBody.velocity('stop').velocity(
{
height: expandHeight + 'px',
width: newWidth,
'min-width': minWidth + 'px'
},{
easing: 'easeInOutQuart',
duration: 120,
progress: function(){
// repaint connections of current system
map.revalidate(systemId);
},
complete: function(){
map.revalidate(systemId);
// extend player name element
let systemBody = $(this);
let systemBodyItemNameWidth = newWidth - 50 - 10 - 20; // - bodyRight - icon - somePadding
systemBody.find('.' + config.systemBodyItemNameClass).css({width: systemBodyItemNameWidth + 'px'});
systemBody.find('.' + config.systemBodyRightClass).show();
}
}
);
},
out: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// stop animation (prevent visual bug if user spams hover-icon [in - out])
systemBody.velocity('stop');
// reduce player name element back to "normal" size (css class width is used)
systemBody.find('.' + config.systemBodyRightClass).hide();
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
systemBody.velocity('reverse', {
complete: function(){
// overwrite "complete" function from first "hover"-open
// set animated "with" back to default "100%" important in case of system with change (e.g. longer name)
$(this).css({width: ''});
map.revalidate(systemId);
}
});
},
selector: '.' + config.systemClass + ' .' + config.systemHeadExpandClass
});
// system "effect" popover ------------------------------------------------------------------------------------
// -> event delegation to system elements, popup only if needed (hover)
mapContainer.hoverIntent({
over: function(e){
let effectElement = $(this);
let systemElement = effectElement.closest('.' + config.systemClass);
let security = systemElement.data('security');
let effect = systemElement.data('effect');
effectElement.addSystemEffectTooltip(security, effect, {
trigger: 'manual',
placement: 'right'
}).setPopoverSmall().popover('show');
},
out: function(e){
$(this).destroyPopover();
},
selector: '.' + config.systemClass + ' .' + MapUtil.getEffectInfoForSystem('effect', 'class')
});
// system "statics" popover -----------------------------------------------------------------------------------
// -> event delegation to system elements, popup only if needed (hover)
mapContainer.hoverIntent({
over: function(e){
let staticWormholeElement = $(this);
let wormholeName = staticWormholeElement.attr('data-name');
let wormholeData = Util.getObjVal(Init, 'wormholes.' + wormholeName);
if(wormholeData){
staticWormholeElement.addWormholeInfoTooltip(wormholeData, {
trigger: 'manual',
placement: 'right',
smaller: true,
show: true
});
}
},
out: function(e){
$(this).destroyPopover();
},
selector: '.' + config.systemHeadInfoClass + ' span[class^="pf-system-sec-"]'
});
// catch events ===============================================================================================
// toggle global map option (e.g. "grid snap", "magnetization")
@@ -2843,7 +2871,6 @@ define([
// delete map option
MapUtil.deleteLocalData('map', this.mapElement.data('id'), this.mapOption.option );
}else{
// toggle button class
button.addClass('active');
@@ -2983,7 +3010,6 @@ define([
default:
systemInfo.push('bad system query');
}
}
if(systemInfo.length === 1){
@@ -3000,7 +3026,6 @@ define([
* @returns {boolean}
*/
$.fn.updateUserData = function(userData){
let returnStatus = true;
// get new map instance or load existing

38
js/app/map/system.js
View File

@@ -21,6 +21,9 @@ define([
mapClass: 'pf-map', // class for all maps
popoverTriggerClass: 'pf-popover-trigger', // class for "popover" trigger elements
systemHeadInfoClass: 'pf-system-head-info', // class for system info
systemActiveClass: 'pf-system-active', // class for an active system on a map
systemTooltipInnerIdPrefix: 'pf-system-tooltip-inner-', // id prefix for system tooltip content
systemTooltipInnerClass: 'pf-system-tooltip-inner', // class for system tooltip content
@@ -423,7 +426,7 @@ define([
// destroy tooltip/popover
system.toggleSystemTooltip('destroy', {});
system.find('.' + MapUtil.getEffectInfoForSystem('effect', 'class')).popover('destroy');
system.destroyPopover(true);
// remove system
system.velocity('transition.whirlOut', {
@@ -479,11 +482,42 @@ define([
return newPosition;
};
/**
* get new dom element for systemData that shows "info" data (additional data)
* -> this is show below the system base data on map
* @param data
* @returns {*}
*/
let getHeadInfoElement = (data) => {
let headInfo = null;
// check systemData if headInfo element is needed
if(data.statics && data.statics.length){
// format wh statics
let statics = [];
for(let staticData of data.statics){
statics.push(
'<span class="' +
Util.getSecurityClassForSystem(staticData.security) + ' ' +
config.popoverTriggerClass + '" data-name="' + staticData.name +
'">' + staticData.security + '</span>'
);
}
headInfo = $('<div>', {
class: config.systemHeadInfoClass
}).append(
statics.join('&nbsp;&nbsp;')
);
}
return headInfo;
};
return {
deleteSystems: deleteSystems,
removeSystems: removeSystems,
calculateNewSystemPosition: calculateNewSystemPosition
calculateNewSystemPosition: calculateNewSystemPosition,
getHeadInfoElement: getHeadInfoElement
};
});

28
js/app/map/util.js
View File

@@ -997,9 +997,13 @@ define([
* @returns {*}
*/
$.fn.addSystemEffectTooltip = function(security, effect, options){
let effectClass = getEffectInfoForSystem(effect, 'class');
let systemEffectData = Util.getSystemEffectData(security, effect);
let title = '<span class="pf-font-capitalize">' + getEffectInfoForSystem(effect, 'name') + '</span>' +
let title = '<i class="fas fa-square fa-fw ' + effectClass + '"></i>&nbsp;' +
getEffectInfoForSystem(effect, 'name') +
'<span class="pull-right ' + Util.getSecurityClassForSystem(security) + '">' + security + '</span>';
let content = Util.getSystemEffectTable(systemEffectData);
let defaultOptions = {
@@ -1027,11 +1031,12 @@ define([
* @param tooltipData
* @returns {*}
*/
$.fn.addWormholeInfoTooltip = function(tooltipData){
$.fn.addWormholeInfoTooltip = function(tooltipData, options){
return this.each(function(){
let element = $(this);
requirejs(['text!templates/tooltip/wormhole_info.html', 'mustache'], (template, Mustache) => {
// format tooltip data
let data = {};
if(tooltipData.massTotal){
@@ -1051,12 +1056,15 @@ define([
}else{
data.signatureStrength = 'unknown';
}
if(!tooltipData.class){
tooltipData.class = Util.getSecurityClassForSystem(tooltipData.security);
}
let title = tooltipData.name +
'<span class="pull-right ' + tooltipData.class +'">' + tooltipData.security + '</span>';
let content = Mustache.render(template, data);
element.popover({
let defaultOptions = {
placement: 'top',
html: true,
trigger: 'hover',
@@ -1067,12 +1075,24 @@ define([
show: 150,
hide: 0
}
});
};
options = $.extend({}, defaultOptions, options);
element.popover(options);
// set new popover content
let popover = element.data('bs.popover');
popover.options.title = title;
popover.options.content = content;
if(options.smaller){
element.setPopoverSmall();
}
if(options.show){
element.popover('show');
}
});
});
};

1
js/app/ui/system_info.js
View File

@@ -358,7 +358,6 @@ define([
popoverElement = $(popoverElement);
let popover = popoverElement.data('bs.popover');
$.ajax({
url: popoverElement.data('url'),
success: function(data){

2
js/app/ui/system_route.js
View File

@@ -917,7 +917,7 @@ define([
autoWidth: false,
rowId: 'systemTo',
language: {
emptyTable: 'No routes added'
emptyTable: 'No routes added'
},
columnDefs: [
{

39
js/app/util.js
View File

@@ -64,8 +64,8 @@ define([
animationPulseWarningClass: 'pf-animation-pulse-warning', // animation class
// popover
popoverSmallClass: 'pf-popover-small', // class for "small" popover
popoverTriggerClass: 'pf-popover-trigger' // class for "popover" trigger elements
};
let stopTimerCache = {}; // cache for stopwatch timer
@@ -392,7 +392,6 @@ define([
let valid = false;
let errorElements = form.find('.has-error');
if(errorElements.length === 0){
valid = true;
}
@@ -405,7 +404,6 @@ define([
* @returns {Array}
*/
$.fn.isInViewport = function(){
let visibleElement = [];
this.each(function(){
@@ -439,12 +437,10 @@ define([
* init the map-update-counter as "easy-pie-chart"
*/
$.fn.initMapUpdateCounter = function(){
let counterChart = $(this);
counterChart.easyPieChart({
barColor: function(percent){
let color = '#568a89';
if(percent <= 30){
color = '#d9534f';
@@ -453,7 +449,6 @@ define([
}
return color;
},
trackColor: '#2b2b2b',
size: 30,
@@ -660,6 +655,24 @@ define([
});
};
$.fn.destroyPopover = function(recursive){
return this.each(function() {
let element = $(this);
let popoverSelector = '.' + config.popoverTriggerClass;
let popoverElements = element.filter(popoverSelector);
if(recursive){
popoverElements = popoverElements.add(element.find(popoverSelector));
}
popoverElements.each(function() {
let popoverElement = $(this);
if(popoverElement.data('bs.popover')){
popoverElement.popover('destroy');
}
});
});
};
/**
* set "popover" close action on clicking "somewhere" on the <body>
* @param eventNamespace
@@ -692,6 +705,20 @@ define([
});
};
/**
* adds the small-class to a tooltip
* @returns {*}
*/
$.fn.setPopoverSmall = function(){
return this.each(function() {
let element = $(this);
let popover = element.data('bs.popover');
if(popover){
popover.tip().addClass(config.popoverSmallClass);
}
});
};
/**
* display a custom message (info/warning/error) to a container element
* check: $.fn.showFormMessage() for an other way of showing messages

2
public/css/v1.3.5/pathfinder.css
View File

File diff suppressed because one or more lines are too long

4
public/css/v1.3.5/pathfinder.css.map
View File

File diff suppressed because one or more lines are too long

12
public/js/v1.3.5/app/conf/system_effect.js
View File

@@ -603,7 +603,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+15%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+30%'
},{
effect: 'Ship velocity',
@@ -624,7 +624,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+22%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+44%'
},{
effect: 'Ship velocity',
@@ -645,7 +645,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+29%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+58%'
},{
effect: 'Ship velocity',
@@ -666,7 +666,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+36%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+72%'
},{
effect: 'Ship velocity',
@@ -687,7 +687,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+43%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+86%'
},{
effect: 'Ship velocity',
@@ -708,7 +708,7 @@ define([], function() {
effect: 'Missile velocity',
value: '+50%'
},{
effect: 'Missile Explosion velocity',
effect: 'Missile exp. velocity',
value: '+100%'
},{
effect: 'Ship velocity',

265
public/js/v1.3.5/app/map/map.js
View File

@@ -36,6 +36,7 @@ define([
systemHeadClass: 'pf-system-head', // class for system head
systemHeadNameClass: 'pf-system-head-name', // class for system name
systemHeadExpandClass: 'pf-system-head-expand', // class for system head expand arrow
systemHeadInfoClass: 'pf-system-head-info', // class for system info
systemBodyClass: 'pf-system-body', // class for system body
systemBodyItemHeight: 16, // px of a system body entry
systemBodyItemClass: 'pf-system-body-item', // class for a system body entry
@@ -57,6 +58,8 @@ define([
systemDialogId: 'pf-system-dialog', // id for system dialog
systemDialogSelectClass: 'pf-system-dialog-select', // class for system select Element
popoverTriggerClass: 'pf-popover-trigger', // class for "popover" trigger elements
// system security classes
systemSec: 'pf-system-sec'
};
@@ -80,7 +83,9 @@ define([
let effectClass = MapUtil.getEffectInfoForSystem('effect', 'class');
return (
target.hasClass(config.systemHeadNameClass) ||
target.hasClass(effectClass)
target.hasClass(effectClass) ||
target.hasClass(config.systemHeadExpandClass) ||
target.hasClass(config.systemHeadInfoClass)
);
};
@@ -371,37 +376,32 @@ define([
id: systemId,
class: config.systemClass
}).append(
// system head
$('<div>', {
class: config.systemHeadClass
}).append(
// System name is editable
$('<span>', {
class: config.systemHeadNameClass
}).attr('data-value', systemName)
).append(
// System locked status
$('<i>', {
class: ['fas', 'fa-lock', 'fa-fw'].join(' ')
}).attr('title', 'locked')
).append(
// System effect color
$('<i>', {
class: ['fas', 'fa-square ', 'fa-fw', effectBasicClass, effectClass].join(' ')
})
).append(
// expand option
$('<i>', {
class: ['fas', 'fa-angle-down ', config.systemHeadExpandClass].join(' ')
})
).prepend(
$('<span>', {
class: [config.systemSec, secClass].join(' '),
text: data.security
})
)
).append(
// system body
}),
// System name is editable
$('<span>', {
class: config.systemHeadNameClass
}).attr('data-value', systemName),
// System locked status
$('<i>', {
class: ['fas', 'fa-lock', 'fa-fw'].join(' ')
}).attr('title', 'locked'),
// System effect color
$('<i>', {
class: ['fas', 'fa-square', 'fa-fw', effectBasicClass, effectClass, config.popoverTriggerClass].join(' ')
}),
// expand option
$('<i>', {
class: ['fas', 'fa-angle-down', config.systemHeadExpandClass].join(' ')
}),
// info element (new line) (optional)
System.getHeadInfoElement(data)
),
$('<div>', {
class: config.systemBodyClass
})
@@ -436,6 +436,9 @@ define([
// hide system tooltip
$(system).toggleSystemTooltip('hide', {});
// destroy popovers
$(system).destroyPopover(true);
// move them to the "top"
$(system).updateSystemZIndex();
},
@@ -871,97 +874,6 @@ define([
checkMapSize(mapWrapper[0]);
}
// system body expand -----------------------------------------------------------------------------------------
mapWrapper.hoverIntent({
over: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// bring system in front (increase zIndex)
system.updateSystemZIndex();
// get ship counter and calculate expand height
let userCount = parseInt(system.data('userCount'));
let expandHeight = userCount * config.systemBodyItemHeight;
// calculate width
let width = system[0].clientWidth;
let minWidth = 150;
let newWidth = width > minWidth ? width : minWidth; // in case of big systems
systemBody.velocity('stop').velocity(
{
height: expandHeight + 'px',
width: newWidth,
'min-width': minWidth + 'px'
},{
easing: 'easeInOutQuart',
duration: 120,
progress: function(){
// repaint connections of current system
map.revalidate(systemId);
},
complete: function(){
map.revalidate(systemId);
// extend player name element
let systemBody = $(this);
let systemBodyItemNameWidth = newWidth - 50 - 10 - 20; // - bodyRight - icon - somePadding
systemBody.find('.' + config.systemBodyItemNameClass).css({width: systemBodyItemNameWidth + 'px'});
systemBody.find('.' + config.systemBodyRightClass).show();
}
}
);
},
out: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// stop animation (prevent visual bug if user spams hover-icon [in - out])
systemBody.velocity('stop');
// reduce player name element back to "normal" size (css class width is used)
systemBody.find('.' + config.systemBodyRightClass).hide();
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
systemBody.velocity('reverse', {
complete: function(){
// overwrite "complete" function from first "hover"-open
// set animated "with" back to default "100%" important in case of system with change (e.g. longer name)
$(this).css({width: ''});
map.revalidate(systemId);
}
});
},
selector: '.' + config.systemClass + ' .' + config.systemHeadExpandClass
});
// system "effect" popover ------------------------------------------------------------------------------------
// -> event delegation to system elements, popup only if needed (hover)
mapWrapper.hoverIntent({
over: function(e){
let effectElement = $(this);
let systemElement = effectElement.closest('.' + config.systemClass);
let security = systemElement.data('security');
let effect = systemElement.data('effect');
effectElement.addSystemEffectTooltip(security, effect, {
trigger: 'manual',
placement: 'right'
}).popover('show');
},
out: function(e){
$(this).popover('destroy');
},
selector: '.' + config.systemClass + ' .' + MapUtil.getEffectInfoForSystem('effect', 'class')
});
};
/**
@@ -2187,6 +2099,9 @@ define([
// hide tooltip
$(selectedSystems).toggleSystemTooltip('hide', {});
// destroy popovers
$(selectedSystems).destroyPopover(true);
// move them to the "top"
$(selectedSystems).updateSystemZIndex();
},
@@ -2800,6 +2715,119 @@ define([
}
});
// system body expand -----------------------------------------------------------------------------------------
mapContainer.hoverIntent({
over: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// bring system in front (increase zIndex)
system.updateSystemZIndex();
// get ship counter and calculate expand height
let userCount = parseInt(system.data('userCount'));
let expandHeight = userCount * config.systemBodyItemHeight;
// calculate width
let width = system[0].clientWidth;
let minWidth = 150;
let newWidth = width > minWidth ? width : minWidth; // in case of big systems
systemBody.velocity('stop').velocity(
{
height: expandHeight + 'px',
width: newWidth,
'min-width': minWidth + 'px'
},{
easing: 'easeInOutQuart',
duration: 120,
progress: function(){
// repaint connections of current system
map.revalidate(systemId);
},
complete: function(){
map.revalidate(systemId);
// extend player name element
let systemBody = $(this);
let systemBodyItemNameWidth = newWidth - 50 - 10 - 20; // - bodyRight - icon - somePadding
systemBody.find('.' + config.systemBodyItemNameClass).css({width: systemBodyItemNameWidth + 'px'});
systemBody.find('.' + config.systemBodyRightClass).show();
}
}
);
},
out: function(e){
let system = $(this).closest('.' + config.systemClass);
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
let systemId = system.attr('id');
let systemBody = system.find('.' + config.systemBodyClass);
// stop animation (prevent visual bug if user spams hover-icon [in - out])
systemBody.velocity('stop');
// reduce player name element back to "normal" size (css class width is used)
systemBody.find('.' + config.systemBodyRightClass).hide();
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
systemBody.velocity('reverse', {
complete: function(){
// overwrite "complete" function from first "hover"-open
// set animated "with" back to default "100%" important in case of system with change (e.g. longer name)
$(this).css({width: ''});
map.revalidate(systemId);
}
});
},
selector: '.' + config.systemClass + ' .' + config.systemHeadExpandClass
});
// system "effect" popover ------------------------------------------------------------------------------------
// -> event delegation to system elements, popup only if needed (hover)
mapContainer.hoverIntent({
over: function(e){
let effectElement = $(this);
let systemElement = effectElement.closest('.' + config.systemClass);
let security = systemElement.data('security');
let effect = systemElement.data('effect');
effectElement.addSystemEffectTooltip(security, effect, {
trigger: 'manual',
placement: 'right'
}).setPopoverSmall().popover('show');
},
out: function(e){
$(this).destroyPopover();
},
selector: '.' + config.systemClass + ' .' + MapUtil.getEffectInfoForSystem('effect', 'class')
});
// system "statics" popover -----------------------------------------------------------------------------------
// -> event delegation to system elements, popup only if needed (hover)
mapContainer.hoverIntent({
over: function(e){
let staticWormholeElement = $(this);
let wormholeName = staticWormholeElement.attr('data-name');
let wormholeData = Util.getObjVal(Init, 'wormholes.' + wormholeName);
if(wormholeData){
staticWormholeElement.addWormholeInfoTooltip(wormholeData, {
trigger: 'manual',
placement: 'right',
smaller: true,
show: true
});
}
},
out: function(e){
$(this).destroyPopover();
},
selector: '.' + config.systemHeadInfoClass + ' span[class^="pf-system-sec-"]'
});
// catch events ===============================================================================================
// toggle global map option (e.g. "grid snap", "magnetization")
@@ -2843,7 +2871,6 @@ define([
// delete map option
MapUtil.deleteLocalData('map', this.mapElement.data('id'), this.mapOption.option );
}else{
// toggle button class
button.addClass('active');
@@ -2983,7 +3010,6 @@ define([
default:
systemInfo.push('bad system query');
}
}
if(systemInfo.length === 1){
@@ -3000,7 +3026,6 @@ define([
* @returns {boolean}
*/
$.fn.updateUserData = function(userData){
let returnStatus = true;
// get new map instance or load existing

38
public/js/v1.3.5/app/map/system.js
View File

@@ -21,6 +21,9 @@ define([
mapClass: 'pf-map', // class for all maps
popoverTriggerClass: 'pf-popover-trigger', // class for "popover" trigger elements
systemHeadInfoClass: 'pf-system-head-info', // class for system info
systemActiveClass: 'pf-system-active', // class for an active system on a map
systemTooltipInnerIdPrefix: 'pf-system-tooltip-inner-', // id prefix for system tooltip content
systemTooltipInnerClass: 'pf-system-tooltip-inner', // class for system tooltip content
@@ -423,7 +426,7 @@ define([
// destroy tooltip/popover
system.toggleSystemTooltip('destroy', {});
system.find('.' + MapUtil.getEffectInfoForSystem('effect', 'class')).popover('destroy');
system.destroyPopover(true);
// remove system
system.velocity('transition.whirlOut', {
@@ -479,11 +482,42 @@ define([
return newPosition;
};
/**
* get new dom element for systemData that shows "info" data (additional data)
* -> this is show below the system base data on map
* @param data
* @returns {*}
*/
let getHeadInfoElement = (data) => {
let headInfo = null;
// check systemData if headInfo element is needed
if(data.statics && data.statics.length){
// format wh statics
let statics = [];
for(let staticData of data.statics){
statics.push(
'<span class="' +
Util.getSecurityClassForSystem(staticData.security) + ' ' +
config.popoverTriggerClass + '" data-name="' + staticData.name +
'">' + staticData.security + '</span>'
);
}
headInfo = $('<div>', {
class: config.systemHeadInfoClass
}).append(
statics.join('&nbsp;&nbsp;')
);
}
return headInfo;
};
return {
deleteSystems: deleteSystems,
removeSystems: removeSystems,
calculateNewSystemPosition: calculateNewSystemPosition
calculateNewSystemPosition: calculateNewSystemPosition,
getHeadInfoElement: getHeadInfoElement
};
});

28
public/js/v1.3.5/app/map/util.js
View File

@@ -997,9 +997,13 @@ define([
* @returns {*}
*/
$.fn.addSystemEffectTooltip = function(security, effect, options){
let effectClass = getEffectInfoForSystem(effect, 'class');
let systemEffectData = Util.getSystemEffectData(security, effect);
let title = '<span class="pf-font-capitalize">' + getEffectInfoForSystem(effect, 'name') + '</span>' +
let title = '<i class="fas fa-square fa-fw ' + effectClass + '"></i>&nbsp;' +
getEffectInfoForSystem(effect, 'name') +
'<span class="pull-right ' + Util.getSecurityClassForSystem(security) + '">' + security + '</span>';
let content = Util.getSystemEffectTable(systemEffectData);
let defaultOptions = {
@@ -1027,11 +1031,12 @@ define([
* @param tooltipData
* @returns {*}
*/
$.fn.addWormholeInfoTooltip = function(tooltipData){
$.fn.addWormholeInfoTooltip = function(tooltipData, options){
return this.each(function(){
let element = $(this);
requirejs(['text!templates/tooltip/wormhole_info.html', 'mustache'], (template, Mustache) => {
// format tooltip data
let data = {};
if(tooltipData.massTotal){
@@ -1051,12 +1056,15 @@ define([
}else{
data.signatureStrength = 'unknown';
}
if(!tooltipData.class){
tooltipData.class = Util.getSecurityClassForSystem(tooltipData.security);
}
let title = tooltipData.name +
'<span class="pull-right ' + tooltipData.class +'">' + tooltipData.security + '</span>';
let content = Mustache.render(template, data);
element.popover({
let defaultOptions = {
placement: 'top',
html: true,
trigger: 'hover',
@@ -1067,12 +1075,24 @@ define([
show: 150,
hide: 0
}
});
};
options = $.extend({}, defaultOptions, options);
element.popover(options);
// set new popover content
let popover = element.data('bs.popover');
popover.options.title = title;
popover.options.content = content;
if(options.smaller){
element.setPopoverSmall();
}
if(options.show){
element.popover('show');
}
});
});
};

1
public/js/v1.3.5/app/ui/system_info.js
View File

@@ -358,7 +358,6 @@ define([
popoverElement = $(popoverElement);
let popover = popoverElement.data('bs.popover');
$.ajax({
url: popoverElement.data('url'),
success: function(data){

2
public/js/v1.3.5/app/ui/system_route.js
View File

@@ -917,7 +917,7 @@ define([
autoWidth: false,
rowId: 'systemTo',
language: {
emptyTable: 'No routes added'
emptyTable: 'No routes added'
},
columnDefs: [
{

39
public/js/v1.3.5/app/util.js
View File

@@ -64,8 +64,8 @@ define([
animationPulseWarningClass: 'pf-animation-pulse-warning', // animation class
// popover
popoverSmallClass: 'pf-popover-small', // class for "small" popover
popoverTriggerClass: 'pf-popover-trigger' // class for "popover" trigger elements
};
let stopTimerCache = {}; // cache for stopwatch timer
@@ -392,7 +392,6 @@ define([
let valid = false;
let errorElements = form.find('.has-error');
if(errorElements.length === 0){
valid = true;
}
@@ -405,7 +404,6 @@ define([
* @returns {Array}
*/
$.fn.isInViewport = function(){
let visibleElement = [];
this.each(function(){
@@ -439,12 +437,10 @@ define([
* init the map-update-counter as "easy-pie-chart"
*/
$.fn.initMapUpdateCounter = function(){
let counterChart = $(this);
counterChart.easyPieChart({
barColor: function(percent){
let color = '#568a89';
if(percent <= 30){
color = '#d9534f';
@@ -453,7 +449,6 @@ define([
}
return color;
},
trackColor: '#2b2b2b',
size: 30,
@@ -660,6 +655,24 @@ define([
});
};
$.fn.destroyPopover = function(recursive){
return this.each(function() {
let element = $(this);
let popoverSelector = '.' + config.popoverTriggerClass;
let popoverElements = element.filter(popoverSelector);
if(recursive){
popoverElements = popoverElements.add(element.find(popoverSelector));
}
popoverElements.each(function() {
let popoverElement = $(this);
if(popoverElement.data('bs.popover')){
popoverElement.popover('destroy');
}
});
});
};
/**
* set "popover" close action on clicking "somewhere" on the <body>
* @param eventNamespace
@@ -692,6 +705,20 @@ define([
});
};
/**
* adds the small-class to a tooltip
* @returns {*}
*/
$.fn.setPopoverSmall = function(){
return this.each(function() {
let element = $(this);
let popover = element.data('bs.popover');
if(popover){
popover.tip().addClass(config.popoverSmallClass);
}
});
};
/**
* display a custom message (info/warning/error) to a container element
* check: $.fn.showFormMessage() for an other way of showing messages

1
sass/_variables.scss
View File

@@ -72,6 +72,7 @@ $font-family-sans-serif: 'Oxygen', "Helvetica Neue", Helvetica, Arial, sans-ser
$font-family-serif: 'Oxygen' Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Consolas, monospace, Menlo, Monaco, "Courier New";
$font-family-bold: 'Oxygen Bold', "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-readable: 'Arial', 'Oxygen Bold', "Helvetica Neue", Helvetica, sans-serif !default;
$font-family-base: $font-family-sans-serif;
$font-style-base: normal;
$font-weight-base: 400;

1
sass/layout/_all.scss
View File

@@ -9,6 +9,7 @@
@import "_dialogs";
@import "_log";
@import "_timeline";
@import "_popover";
@import "_ribbon";
@import "_loading-bar";
@import "sticky-panel";

78
sass/layout/_main.scss
View File

@@ -1028,84 +1028,6 @@ table{
border-left-color: $gray-light;
}
// global popover settings ========================================================================
.popover{
// on top of modals even if they are attached to <body>
z-index: $zindex-modal + 10;
// give large popups more space..
max-width: 600px;
// image in popover
img{
@include border-radius(5px);
}
h4{
color: $gray-lighter;
}
// table in pop popover
table{
color: $gray-lighter;
font-family: $font-family-bold;
line-height: 16px;
font-size: 11px;
td{
padding: 0 5px;
vertical-align: middle !important;
}
}
}
// specific "Pathfinder" Popover settings ---------------------------------------------------------
.pf-popover{
display: initial;
.popover-content{
padding: 0; // overwrite default popover padding
}
h6{
white-space: nowrap;
margin-right: 50px;
@include clearfix();
}
.well{
margin-top: 7px;
margin-bottom: 10px;
}
.list-group{
margin: 0;
.list-group-item{
color: $gray-dark;
&:hover{
color: $gray-darkest;
}
&.disabled{
background-color: $gray;
color: $gray-light;
cursor: not-allowed;
}
img{
width: 30px;
margin: -8px 10px -6px -8px;
border-radius: 0; // overwrite "global"
}
i{
margin-right: 20px;
}
}
}
}
// elements that are popover "triggers" (root elements) (e.g. open on right click)-----------------
td.pf-popover-trigger{
&:hover{

52
sass/layout/_map.scss
View File

@@ -8,7 +8,7 @@ $mapWrapperMinHeight: 250px;
$mapWrapperMaxHeight: 1000px; // no vertical scrollbar: $mapHeight + 35px;
$mapWrapperMaxWidth: $mapWidth + 35px;
// start bounce mixin =========================================================
// start bounce mixin =================================================================================================
@mixin bounce-up-down{
@include animation-duration( 1s);
@include animation-delay(0.5s);
@@ -35,7 +35,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
60% {transform: translateY(-4px);}
}
// end bounce mixin ===========================================================
// end bounce mixin ===================================================================================================
#pf-map-tab-element{
max-width: $mapWrapperMaxWidth;
margin: 0 auto;
@@ -72,10 +72,6 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
border-width: 12px 12px 0 0 ;
border-color: transparent $gray-dark transparent transparent;
cursor: nwse-resize;
&:hover{
border-color: blue;
}
}
&:focus, &:hover{
@@ -88,7 +84,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
}
}
// map overlay ================================================================
// map overlay ========================================================================================================
.pf-map-overlay{
position: absolute;
display: none; // triggered by js
@@ -251,7 +247,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
position: relative;
font-family: $font-family-bold;
// jsPlumb classes ==========================================================
// jsPlumb classes ==================================================================================================
.jsplumb-overlay{
opacity: 1;
pointer-events: none; // click through overlays
@@ -264,7 +260,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
@extend .pf-system-selected;
}
// hover effects ============================================================
// hover effects ====================================================================================================
.jsplumb-hover{
// hover effect for connections
@@ -283,7 +279,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
@include box-shadow(0 6px 12px rgba(0,0,0,.3));
}
// ==========================================================================
// ==================================================================================================================
.pf-system{
position: absolute;
min-width: 60px;
@@ -310,6 +306,10 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
// makes the systems "flying" :)
@include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
@include transform( translate3d(0, -1px, 0) !important);
&:not(.jsPlumb_dragged){
z-index: 2040 !important; // should overlap connection endpoint overlays,not for dragged elements -> prevent "show/hide flickering" of overlays
}
}
.pf-system-head{
@@ -348,7 +348,19 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
}
}
// ========================================================================
// ================================================================================================================
.pf-system-head-info{
color: lighten($gray-light, 10%);
font-size: 10px;
line-height: 10px;
margin-bottom: 2px;
[class^="pf-system-sec-"]{
cursor: help;
}
}
// ================================================================================================================
.pf-system-body{
height: 0px;
@@ -386,7 +398,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
text-overflow: ellipsis;
display: none; // hover effect
}
// user status ========================================================
// user status ================================================================================================
.pf-user-status{
font-size: 6px;
width: 10px;
@@ -430,7 +442,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
// selected system
.pf-system-selected:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
@include box-shadow($red-darkest 0px 0px 8px 0px);
background-color: $red-darkest;
.pf-system-head, .pf-system-body{
background-color: $red-darkest;
}
@@ -464,7 +476,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
z-index: 500;
}
// Endpoints ================================================================
// Endpoints ========================================================================================================
.pf-map-endpoint-source, .pf-map-endpoint-target{
z-index: 90;
@@ -517,7 +529,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
}
}
// Connections ==============================================================
// Connections ======================================================================================================
svg.jsplumb-connector{
cursor: pointer;
@@ -633,7 +645,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
filter: drop-shadow( 0px 0px 3px $yellow-lighter);
}
// Connection overlays ======================================================
// Connection overlays ==============================================================================================
.pf-map-connection-overlay{
padding: 1px 4px;
font-size: 10px;
@@ -659,7 +671,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
color: $pink-dark;
}
// Arrow overlays ===========================================================
// Arrow overlays ===================================================================================================
.pf-map-connection-arrow-overlay{
stroke: $gray-dark;
fill: $green;
@@ -674,7 +686,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
animation-iteration-count: infinite;
}
// Endpoint overlays ========================================================
// Endpoint overlays ================================================================================================
.pf-map-connection-small-overlay{
filter: blur(0.000001px);
-webkit-font-smoothing: antialiased;
@@ -690,14 +702,14 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
}
}
// dialoges ===================================================================
// dialogs ============================================================================================================
.ui-dialog-content{
label{
min-width: 60px;
}
}
// context menu ===============================================================
// context menu =======================================================================================================
.dropdown-menu{
font-family: $font-family-bold;
z-index: 1020; // over tooltips

100
sass/layout/_popover.scss Normal file
View File

@@ -0,0 +1,100 @@
.popover{
// on top of modals even if they are attached to <body>
z-index: $zindex-modal + 10;
// give large popups more space..
max-width: 600px;
.arrow{
pointer-events: none; // no pointer events (important on system popovers shout not 'detect' hover)
}
.popover-title{
text-transform: capitalize;
font-family: $font-family-readable;
font-weight: bold;
}
.popover-content {
font-family: $font-family-readable;
}
// image in popover
img{
@include border-radius(5px);
}
h4{
color: $gray-lighter;
}
// table in pop popover
table{
color: $gray-lighter;
line-height: 16px;
font-size: 11px;
td{
padding: 0 5px;
vertical-align: middle !important;
}
}
}
// smaller variant ----------------------------------------------------------------------------------------------------
.pf-popover-small{
.popover-title {
padding: 3px 6px;
}
.popover-content {
padding: 6px 1px 3px;
}
}
// specific "Pathfinder" Popover settings -----------------------------------------------------------------------------
.pf-popover{
display: initial;
.popover-content{
padding: 0; // overwrite default popover padding
}
h6{
white-space: nowrap;
margin-right: 50px;
@include clearfix();
}
.well{
margin-top: 7px;
margin-bottom: 10px;
}
.list-group{
margin: 0;
.list-group-item{
color: $gray-dark;
&:hover{
color: $gray-darkest;
}
&.disabled{
background-color: $gray;
color: $gray-light;
cursor: not-allowed;
}
img{
width: 30px;
margin: -8px 10px -6px -8px;
border-radius: 0; // overwrite "global"
}
i{
margin-right: 20px;
}
}
}
}