franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New Tooltip interface

Browse Source
This commit is contained in:
Franzz
2021-06-13 14:00:12 +02:00
parent 7240b766f9
commit c98abaaff6
6 changed files with 127 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
masks/project.html
View File

@@ -411,8 +411,8 @@ function initSpotMessages(aoMessages, aoTracks) {
//Controls: Elevation
if(!isMobile()) {
var aoElevTracks = {type: 'FeatureCollection', features:[], properties: {summary: 'Elevation'}};
var aoLegend = {Elevation: {}};
var aoElevTracks = {type: 'FeatureCollection', features:[], properties: {summary: 'trackType'}};
var aoLegend = {trackType: {}};
for(var i in aoTracks.features) {
if(aoTracks.features[i].properties.type != 'hitchhiking') {
//Feature
@@ -422,7 +422,7 @@ function initSpotMessages(aoMessages, aoTracks) {
aoElevTracks.features.push(oTrack);
//Legend
aoLegend.Elevation[sType] = {text: oSpot.lang('track_'+sType), color: self.tmp(['track-type-styles', sType, 'color'])};
aoLegend.trackType[sType] = {text: oSpot.lang('track_'+sType), color: self.tmp(['track-type-styles', sType, 'color'])};
}
}
var oElev = L.control.heightgraph({
@@ -476,7 +476,10 @@ function initSpotMessages(aoMessages, aoTracks) {
onEachFeature: function(feature, oLayer) {
var asProperties = feature.properties;
var $Tooltip = $('<div>', {'class':'track_tooltip'});
$('<p>', {'class':'name', 'title':asProperties.name}).addIcon('fa-track-'+asProperties.type+' fa-fw', true).append(asProperties.name).appendTo($Tooltip);
$('<h1>', {'title':asProperties.name})
.addIcon('fa-track-'+asProperties.type+' fa-fw', true)
.append(asProperties.name)
.appendTo($Tooltip);
var $TooltipDetails = $('<div>', {'class':'details'});
if(asProperties.Name != asProperties.description && asProperties.description != '') {
@@ -567,6 +570,7 @@ function initSpotMessages(aoMessages, aoTracks) {
else oMap.fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(5 + iPanelWidth, 5)});
//Spot Messages
var iWorkSpaceMinWidth = self.tmp('$Projects').width() - self.tmp('$Feed').outerWidth(true) - self.tmp('$Settings').outerWidth(true);
$.each(aoMessages, function(iKey, oMsg){
//Marker
@@ -579,13 +583,16 @@ function initSpotMessages(aoMessages, aoTracks) {
//Tooltip
$Tooltip = $('<div>', {'class':'info-window'})
.append($('<h1>')
.addIcon('fa-message fa-fw fa-lg')
.append('Message '+oMsg.type+' '+oSpot.lang('counter', oMsg.displayed_id)))
.addIcon('fa-message fa-lg push')
.append($('<span>').text('Message '+oSpot.lang('counter', oMsg.displayed_id)))
.append($('<span>', {'class':'message-type'}).text('('+oMsg.type+')'))
)
.append($('<div>', {'class':'separator'}))
.append($('<p>', {'class':'coordinates'})
.addIcon('fa-coords fa-fw fa-lg', false)
.addIcon('fa-coords fa-fw fa-lg', true)
.append(getGoogleMapsLink(oMsg)))
.append($('<p>', {'class':'time'})
.addIcon('fa-time fa-fw fa-lg')
.addIcon('fa-time fa-fw fa-lg', true)
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')));
//Tooltip: Time Zone
@@ -601,13 +608,11 @@ function initSpotMessages(aoMessages, aoTracks) {
$.each(oMsg.medias, function(iKey, asMedia) {
$Medias.append(getMediaLink(asMedia, 'marker'));
});
$Tooltip
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append(oSpot.lang('images')))
.append($Medias);
$Tooltip.append($Medias);
}
oMarker.bindPopup($Tooltip[0], {
maxWidth: self.tmp('$Projects').width(),
maxWidth: iWorkSpaceMinWidth,
autoPan: false,
closeOnClick: true,
offset: new L.Point(0, -30)