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

Add drill down icon on message

Browse Source
This commit is contained in:
Franzz
2019-07-06 22:58:52 +02:00
parent c9d0462b56
commit 7462b1573b
6 changed files with 106 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
masks/project.html
View File

@@ -28,6 +28,7 @@ oSpot.onSamePageMove = function(asHash) {
self.tmp('map').remove(); self.tmp('map').remove();
self.tmp('$Map').empty(); self.tmp('$Map').empty();
self.tmp('map', null); self.tmp('map', null);
self.tmp('$PostList').empty();
setFeedUpdateTimer(false); setFeedUpdateTimer(false);
initProject(asHash.items[0]); initProject(asHash.items[0]);
} }
@@ -73,6 +74,7 @@ function initPage(asHash) {
if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]); if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]);
else { else {
self.tmp('$Map', $('#map')); self.tmp('$Map', $('#map'));
self.tmp('$PostList', $('#posts_list'));
self.tmp('updatable', true); self.tmp('updatable', true);
self.tmp('out-of-data', false); self.tmp('out-of-data', false);
self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}')); self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
@@ -373,7 +375,7 @@ function initSpotMessages(aoMessages, aoTracks) {
riseOnHover: true, riseOnHover: true,
icon: L.divIcon({ icon: L.divIcon({
className: '', className: '',
html: '<i class="fa fa-message fa-stack-2x"></i><i class="fa fa-message-in fa-stack-1x fa-rotate-270"></i>', html: '<span class="fa-stack"><i class="fa fa-message fa-stack-2x"></i><i class="fa fa-message-in fa-stack-1x fa-rotate-270"></i></span>',
iconSize: [self.tmp('marker_size').width, self.tmp('marker_size').height], iconSize: [self.tmp('marker_size').width, self.tmp('marker_size').height],
iconAnchor: [self.tmp('marker_size').width / 2, self.tmp('marker_size').height] //position from icon's top left corner (iconAnchor = marker's position) iconAnchor: [self.tmp('marker_size').width / 2, self.tmp('marker_size').height] //position from icon's top left corner (iconAnchor = marker's position)
}) })
@@ -382,13 +384,13 @@ function initSpotMessages(aoMessages, aoTracks) {
//Tooltip //Tooltip
$Tooltip = $('<div>', {'class':'info-window'}) $Tooltip = $('<div>', {'class':'info-window'})
.append($('<h1>') .append($('<h1>')
.addIcon('fa-message') .addIcon('fa-message fa-fw fa-lg')
.append('Message '+oMsg.type+' '+oMsg.displayed_id)) .append('Message '+oMsg.type+' '+oMsg.displayed_id))
.append($('<p>', {'class':'time'}) .append($('<p>', {'class':'time'})
.addIcon('fa-time') .addIcon('fa-time fa-fw fa-lg')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')+self.tmp('site_tz_notice'))) .append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')+self.tmp('site_tz_notice')))
.append($('<p>', {'class':'coordinates'}) .append($('<p>', {'class':'coordinates'})
.addIcon('fa-coords', false) .addIcon('fa-coords fa-fw fa-lg', false)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude)); .append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
//Tooltip medias //Tooltip medias
@@ -398,16 +400,18 @@ function initSpotMessages(aoMessages, aoTracks) {
var bVideo = (asMedia.subtype == 'video'); var bVideo = (asMedia.subtype == 'video');
$Medias $Medias
.append($('<a>', { .append($('<a>', {
'class': 'drill '+(bVideo?'video':'picture'), 'class': 'drill',
href: asMedia.media_path, href: asMedia.media_path,
'data-lightbox': 'marker-medias', 'data-lightbox': 'marker-medias',
'data-video': (bVideo?'true':'false'), 'data-video': (bVideo?'true':'false'),
'data-title': (bVideo?'Vidéo':'Photo')+' prise le '+asMedia.formatted_time+self.tmp('site_tz_notice'), 'data-title': (bVideo?'Vidéo':'Photo')+' prise le '+asMedia.formatted_time+self.tmp('site_tz_notice'),
'data-orientation': asMedia.rotate}) 'data-orientation': asMedia.rotate})
.append($('<img>', {'src': asMedia.thumb_path}))); .append($('<img>', {'src': asMedia.thumb_path}))
.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')))
);
}); });
$Tooltip $Tooltip
.append($('<p>').addIcon('fa-picture').append('Photos')) .append($('<p>').addIcon('fa-media fa-fw fa-lg').append('Photos'))
.append($Medias); .append($Medias);
} }
@@ -441,7 +445,6 @@ function updateFeed(bFirstChunk, bDiscrete) {
if(!bDiscrete) $('#loading').show(); if(!bDiscrete) $('#loading').show();
var $Posts = $('<div>'); var $Posts = $('<div>');
var $PostsList = $('#posts_list');
if(bFirstChunk===true) { if(bFirstChunk===true) {
self.tmp('news_chunk', 0); self.tmp('news_chunk', 0);
@@ -457,8 +460,8 @@ function updateFeed(bFirstChunk, bDiscrete) {
self.tmp('news_chunk', self.tmp('news_chunk') + 1); self.tmp('news_chunk', self.tmp('news_chunk') + 1);
self.tmp('out-of-data', Object.keys(asData).length != self.vars('chunk_size')); self.tmp('out-of-data', Object.keys(asData).length != self.vars('chunk_size'));
if(bFirstChunk===true) $PostsList.empty(); if(bFirstChunk===true) self.tmp('$PostList').empty();
$PostsList.append($Posts.children()); self.tmp('$PostList').append($Posts.children());
self.tmp('updatable', true); self.tmp('updatable', true);
}, { }, {
@@ -491,6 +494,10 @@ function getPost(asPost) {
.append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice'))) .append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice')))
.append($('<a>', {'class':'drill'}) .append($('<a>', {'class':'drill'})
.append($('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)})) .append($('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)}))
.append($('<span>', {'class': 'drill-icon fa-stack'})
.addIcon('fa-message-in fa-stack-1x fa-rotate-270')
.addIcon('fa-message fa-stack-2x')
)
.click(function(){ .click(function(){
var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]); var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13); self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13);
@@ -514,12 +521,12 @@ function getPost(asPost) {
var sTakenOn = (asPost.taken_on == '0000-00-00 00:00:00')?'':' et prise le '+asPost.taken_on_formatted+self.tmp('site_tz_notice'); var sTakenOn = (asPost.taken_on == '0000-00-00 00:00:00')?'':' et prise le '+asPost.taken_on_formatted+self.tmp('site_tz_notice');
var $Image = $('<img>', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'}); var $Image = $('<img>', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'});
$Body = $('<a>', { $Body = $('<a>', {
'class': 'drill '+(bVideo?'video':'picture'), 'class': 'drill',
href: asPost.media_path, href: asPost.media_path,
'data-video': (bVideo?'true':'false'), 'data-video': (bVideo?'true':'false'),
'data-lightbox': 'post-medias', 'data-lightbox': 'post-medias',
'data-title': (bVideo?'Vidéo':'Photo')+' ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate 'data-title': (bVideo?'Vidéo':'Photo')+' ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate
}).append($Image); }).append($Image).append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
break; break;
case 'post': case 'post':
$Body = $('<div>') $Body = $('<div>')
@@ -549,7 +556,6 @@ function getPost(asPost) {
} }
function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) { function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
var sMarker = (sMapId=='static')?('&marker='+encodeURI('https://spot.lutran.fr/images/footprint_mapbox.png')):''; return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat;
return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat+sMarker;
} }
</script> </script>

3
readme.md
View File

@@ -5,5 +5,4 @@
* php-imagick * php-imagick
* ffprobe (ffmpeg) * ffprobe (ffmpeg)
## To Do List ## To Do List
* require js * require js
* Video support on markers

4
style/_fa.scss
View File

@@ -37,15 +37,15 @@ $fa-css-prefix: fa;
.#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); } .#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); }
.#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); } .#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }
.#{$fa-css-prefix}-elev-chart:before { content: fa-content($fa-var-chart-area); } .#{$fa-css-prefix}-elev-chart:before { content: fa-content($fa-var-chart-area); }
.#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
.#{$fa-css-prefix}-distance:before { content: fa-content($fa-var-arrow-circle-right); } .#{$fa-css-prefix}-distance:before { content: fa-content($fa-var-arrow-circle-right); }
.#{$fa-css-prefix}-elev-drop:before { content: fa-content($fa-var-arrow-circle-down); } .#{$fa-css-prefix}-elev-drop:before { content: fa-content($fa-var-arrow-circle-down); }
.#{$fa-css-prefix}-elev-gain:before { content: fa-content($fa-var-arrow-circle-up); } .#{$fa-css-prefix}-elev-gain:before { content: fa-content($fa-var-arrow-circle-up); }
/* Feed */ /* Feed */
.#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); } .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
.#{$fa-css-prefix}-picture:before { content: fa-content($fa-var-camera-alt); } .#{$fa-css-prefix}-media:before { content: fa-content($fa-var-camera-alt); }
.#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); } .#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
.#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
.#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); } .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
.#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); } .#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
.#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); } .#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }

154
style/_mask_project.scss
View File

@@ -89,20 +89,6 @@ $legend-color: #222;
} }
} }
} }
.leaflet-marker-icon {
.fa-message {
font-size: 32px;
text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
color: $message-bg;
}
.fa-message-in {
font-size: 13px;
color: $message-color;
top: 3px;
}
}
} }
/* Leaflet patches */ /* Leaflet patches */
@@ -196,23 +182,42 @@ $legend-color: #222;
} }
} }
/* Drill & Map icons */
a.drill { a.drill {
position: relative; position: relative;
@extend .fa;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
display: inline-block;
&:before { .drill-icon {
position: absolute; position: absolute;
display: inline-block;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
font-size: 3em;
color: transparent; i {
transition: all 0.3s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
}
} }
} }
.fa-stack {
.fa-message {
font-size: 32px;
text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
color: $message-bg;
}
.fa-message-in {
font-size: 13px;
color: $message-color;
top: 1px;
}
}
/* Feed Panel */
#feed { #feed {
position: absolute; position: absolute;
@@ -311,13 +316,6 @@ $legend-color: #222;
.body { .body {
clear: both; clear: both;
padding: 0em 1em 0.5em; padding: 0em 1em 0.5em;
a.drill {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
}
} }
&.headerless { &.headerless {
.header { .header {
@@ -331,31 +329,36 @@ $legend-color: #222;
background: $media-bg; background: $media-bg;
color: $media-color; color: $media-color;
a.drill { a {
&.video { display: inline-block;
@extend .fa-drill-video; width: 100%;
&:before { line-height: 0;
margin: 0;
&.drill {
font-size: 3em;
.fa-drill-picture {
color: transparent;
}
.fa-drill-video {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
&:hover:before {
color: rgba($media-bg, 0.75); &:hover {
.fa-drill-picture, .fa-drill-video {
color: rgba($media-bg, 0.75);
}
} }
} }
&.picture { img {
@extend .fa-drill-picture; width: 100%;
&:hover:before { image-orientation: from-image;
color: rgba($media-bg, 0.75); outline: none;
} border-radius: 3px;
} }
} }
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
} }
&.message { &.message {
background: $message-bg; background: $message-bg;
@@ -367,12 +370,25 @@ $legend-color: #222;
} }
a.drill { a.drill {
@extend .fa-drill-message; .drill-icon {
&:hover:before { transform: translate(-16px, -32px);
color: rgba($message-bg, 0.75);
.fa-message-in {
top: 0;
left: -1px;
}
}
&:hover {
.fa-message {
@extend .#{$fa-css-prefix}-drill-message;
}
.fa-message-in {
display: none;
}
} }
} }
.staticmap { .staticmap {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
@@ -405,40 +421,32 @@ $legend-color: #222;
p { p {
font-size: 1.0em; font-size: 1.0em;
margin: 0.5em 0 0 0; margin: 0.5em 0 0 0;
i {
padding-right: 0.5em;
}
} }
i {
padding-right: 0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.medias { .medias {
margin-top: 0.5em; margin-top: 0.5em;
line-height: 0;
a { a {
display: inline-block; display: inline-block;
margin-right: 15px; margin-right: 15px;
&.drill { &.drill {
&.video { font-size: 2em;
@extend .fa-drill-video;
&:before { .fa-drill-picture {
color: rgba(255, 255, 255, 0.5); color: transparent;
}
&:hover:before {
color: rgba(255, 255, 255, 0.75);
}
} }
.fa-drill-video {
&.picture { color: rgba(255, 255, 255, 0.5);
@extend .fa-drill-picture; }
&:before {
color: transparent; &:hover {
} .fa-drill-video, .fa-drill-picture {
&:hover:before {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
} }

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

2
style/spot.css.map
View File

File diff suppressed because one or more lines are too long