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 add272ade6
commit 9d09171a73
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').empty();
self.tmp('map', null);
self.tmp('$PostList').empty();
setFeedUpdateTimer(false);
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')]);
else {
self.tmp('$Map', $('#map'));
self.tmp('$PostList', $('#posts_list'));
self.tmp('updatable', true);
self.tmp('out-of-data', false);
self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
@@ -373,7 +375,7 @@ function initSpotMessages(aoMessages, aoTracks) {
riseOnHover: true,
icon: L.divIcon({
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],
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 = $('<div>', {'class':'info-window'})
.append($('<h1>')
.addIcon('fa-message')
.addIcon('fa-message fa-fw fa-lg')
.append('Message '+oMsg.type+' '+oMsg.displayed_id))
.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($('<p>', {'class':'coordinates'})
.addIcon('fa-coords', false)
.addIcon('fa-coords fa-fw fa-lg', false)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
//Tooltip medias
@@ -398,16 +400,18 @@ function initSpotMessages(aoMessages, aoTracks) {
var bVideo = (asMedia.subtype == 'video');
$Medias
.append($('<a>', {
'class': 'drill '+(bVideo?'video':'picture'),
'class': 'drill',
href: asMedia.media_path,
'data-lightbox': 'marker-medias',
'data-video': (bVideo?'true':'false'),
'data-title': (bVideo?'Vidéo':'Photo')+' prise le '+asMedia.formatted_time+self.tmp('site_tz_notice'),
'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
.append($('<p>').addIcon('fa-picture').append('Photos'))
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append('Photos'))
.append($Medias);
}
@@ -441,7 +445,6 @@ function updateFeed(bFirstChunk, bDiscrete) {
if(!bDiscrete) $('#loading').show();
var $Posts = $('<div>');
var $PostsList = $('#posts_list');
if(bFirstChunk===true) {
self.tmp('news_chunk', 0);
@@ -457,8 +460,8 @@ function updateFeed(bFirstChunk, bDiscrete) {
self.tmp('news_chunk', self.tmp('news_chunk') + 1);
self.tmp('out-of-data', Object.keys(asData).length != self.vars('chunk_size'));
if(bFirstChunk===true) $PostsList.empty();
$PostsList.append($Posts.children());
if(bFirstChunk===true) self.tmp('$PostList').empty();
self.tmp('$PostList').append($Posts.children());
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($('<a>', {'class':'drill'})
.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(){
var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
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 $Image = $('<img>', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'});
$Body = $('<a>', {
'class': 'drill '+(bVideo?'video':'picture'),
'class': 'drill',
href: asPost.media_path,
'data-video': (bVideo?'true':'false'),
'data-lightbox': 'post-medias',
'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;
case 'post':
$Body = $('<div>')
@@ -549,7 +556,6 @@ function getPost(asPost) {
}
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+sMarker;
return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat;
}
</script>

3
readme.md
View File

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

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