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

foldable feed panel

Browse Source
This commit is contained in:
Franzz
2019-03-10 15:50:58 +01:00
parent 930cf74d34
commit 0717001a08
7 changed files with 138 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
masks/index.html
View File

@@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png?v=GvmqYyKwbb"> <link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png?v=GvmqYyKwbb">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png?v=GvmqYyKwbb"> <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png?v=GvmqYyKwbb">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png?v=GvmqYyKwbb"> <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png?v=GvmqYyKwbb">

62
masks/project.html
View File

@@ -1,4 +1,4 @@
<div id="messages"> <div id="projects">
<div id="submap"> <div id="submap">
<div class="loader fa fa-fw fa-map flicker" id="map_loading"></div> <div class="loader fa fa-fw fa-map flicker" id="map_loading"></div>
</div> </div>
@@ -11,6 +11,7 @@
</div> </div>
</div> </div>
<div id="elems"> <div id="elems">
<div id="post-button"><i class="fa fa-fw"></i></div>
<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"> <div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
<div class="line main">Trajet principal</div> <div class="line main">Trajet principal</div>
<div class="line off-track">Variante</div> <div class="line off-track">Variante</div>
@@ -18,6 +19,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="mobile" class="mobile"></div>
<script type="text/javascript" src="script/lightbox.min.js"></script> <script type="text/javascript" src="script/lightbox.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
oSpot.onSamePageMove = function(asHash) { oSpot.onSamePageMove = function(asHash) {
@@ -42,6 +44,7 @@ function initPage(asHash) {
self.tmp('$Map', $('#map')); self.tmp('$Map', $('#map'));
self.tmp('updatable', true); self.tmp('updatable', true);
self.tmp('out-of-data', false); self.tmp('out-of-data', false);
self.tmp('mobile', $('#mobile').is(':visible'));
self.tmp('feed_width', $('#feed').outerWidth(true)); self.tmp('feed_width', $('#feed').outerWidth(true));
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true)); self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}'); self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}');
@@ -133,15 +136,23 @@ function initPosts() {
} }
//Feed auto-update //Feed auto-update
if(self.vars(['project', 'mode']) != self.consts.modes.histo) onAutoUpdate(); self.tmp('simple-bar').getScrollElement().scrollTop = 0;
if(self.vars(['project', 'mode']) != self.consts.modes.histo) onAutoUpdate(true);
else updateFeed(true); else updateFeed(true);
} }
function onAutoUpdate() { function onAutoUpdate(bFirstExec) {
if(self.tmp('simple-bar').scrollContentEl.scrollTop == 0) updateFeed(true, true); bFirstExec = bFirstExec || false;
if(bFirstExec) updateFeed(true);
else if(self.tmp('simple-bar').getScrollElement().scrollTop == 0) updateFeed(true, true);
setFeedUpdateTimer(60, onAutoUpdate); setFeedUpdateTimer(60, onAutoUpdate);
} }
function toggleFeedPanel(bShow) {
if(typeof bShow === 'undefined') $('#projects').toggleClass('with-feed');
else $('#projects').toggleClass('with-feed', bShow);
}
function initSpotMessages(aoMessages, aoTracks) { function initSpotMessages(aoMessages, aoTracks) {
//Tile layers //Tile layers
@@ -159,6 +170,14 @@ function initSpotMessages(aoMessages, aoTracks) {
}); });
self.tmp('map', oMap); self.tmp('map', oMap);
//Controls: Feed Panel
var oFeedPanel = L.control({position: 'topright'});
var $PostButton = $('#post-button').clone();
$PostButton.click(toggleFeedPanel);
toggleFeedPanel(!self.tmp('mobile'));
oFeedPanel.onAdd = function(oMap) {return $PostButton[0];};
oFeedPanel.addTo(oMap);
//Controls: Legend //Controls: Legend
var oLegend = L.control({position: 'bottomleft'}); var oLegend = L.control({position: 'bottomleft'});
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];}; oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
@@ -255,7 +274,7 @@ function initSpotMessages(aoMessages, aoTracks) {
} }
else oMap.fitBounds(oTracks.getBounds(), {paddingTopLeft: L.point(5, 42), paddingBottomRight: L.point(self.tmp('feed_width')+5, 5)}); else oMap.fitBounds(oTracks.getBounds(), {paddingTopLeft: L.point(5, 42), paddingBottomRight: L.point(self.tmp('feed_width')+5, 5)});
//Building messages //Spot Messages
$.each(aoMessages, function(iKey, oMsg){ $.each(aoMessages, function(iKey, oMsg){
//Marker //Marker
@@ -277,7 +296,7 @@ function initSpotMessages(aoMessages, aoTracks) {
.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')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':''))) .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', false)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude)); .append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
@@ -296,7 +315,7 @@ function initSpotMessages(aoMessages, aoTracks) {
oMarker.bindPopup($Tooltip[0], { oMarker.bindPopup($Tooltip[0], {
maxWidth: 1000, maxWidth: 1000,
keepInView: true, autoPan: false,
closeOnClick: true, closeOnClick: true,
offset: new L.Point(0, -30) offset: new L.Point(0, -30)
}); });
@@ -367,12 +386,12 @@ function updateFeed(bFirstChunk, bDiscrete)
if(bFirstChunk===true) { if(bFirstChunk===true) {
self.tmp('news_chunk', 0); self.tmp('news_chunk', 0);
$('#submap').removeClass('with_feed'); $('#projects').removeClass('with-feed');
} }
self.get('feed', function(asData) { self.get('feed', function(asData) {
$('#loading').hide(); $('#loading').hide();
$('#submap').addClass('with_feed'); $('#projects').addClass('with-feed');
$.each(asData, function(iKey, asPost){ $.each(asData, function(iKey, asPost){
$Posts.append(getPost(asPost)); $Posts.append(getPost(asPost));
@@ -411,24 +430,27 @@ function getPost(asPost) {
{ {
case 'message': case 'message':
$Body = $('<div>') $Body = $('<div>')
.data('id', asPost.id_message)
.append($('<p>').addIcon('fa-coords', true).append(asPost.lat_dms+' '+asPost.lon_dms)) .append($('<p>').addIcon('fa-coords', true).append(asPost.lat_dms+' '+asPost.lon_dms))
.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( .append(
$('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getStaticMapUrl(asPost.latitude, asPost.longitude)}) $('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getStaticMapUrl(asPost.latitude, asPost.longitude)})
.data('lat', asPost.latitude)
.data('lng', asPost.longitude)
.click(function(){ .click(function(){
var $This = $(this); var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
var oCenter = L.latLng(parseFloat($This.data('lat')), parseFloat($This.data('lng'))); self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13);
self.tmp('map').setOffsetView(self.tmp('map_offset'), oCenter, 13); if(!oMarker.isPopupOpen()) oMarker.openPopup();
}) })
) )
.data('id', asPost.id_message) .hover(
.hover(function(){ function(){
var oMarker = oSpot.tmp(['markers', $(this).data('id')]); var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng())) oMarker.togglePopup(); if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng()) && !oMarker.isPopupOpen()) oMarker.openPopup();
else if(oMarker.isPopupOpen()) oMarker.closePopup(); },
}); function(){
var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
if(oMarker.isPopupOpen()) oMarker.closePopup();
}
);
break; break;
case 'picture': case 'picture':
var $Image = $('<img>', {'src': asPost.thumb_path, title: 'Click pour zoomer'/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/}); var $Image = $('<img>', {'src': asPost.thumb_path, title: 'Click pour zoomer'/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});

123
style/_mask_project.scss
View File

@@ -1,6 +1,7 @@
//Feed width //Feed width
$feed-width: "30% - 1rem"; $block-spacing: 1rem;
$feed-width-max: "400px + 3rem"; $feed-width: 30%;
$feed-width-max: "400px + 3 * #{$block-spacing}";
//Feed colors //Feed colors
$post-input-bg: #d9deff; $post-input-bg: #d9deff;
@@ -17,7 +18,30 @@ $track-off-track-color: #0000ff;
$track-hitchhiking-color: #FF7814; $track-hitchhiking-color: #FF7814;
$legend-color: #222; $legend-color: #222;
#messages { #projects {
&.with-feed {
#submap {
width: calc(100% - #{$feed-width});
min-width: calc(100% - #{$feed-width-max});
}
.leaflet-right {
width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max});
}
#post-button {
.fa {
@extend .fa-next;
}
}
}
&:not(.with-feed) {
#feed #posts {
right: -100%;
}
}
#submap { #submap {
position: absolute; position: absolute;
@@ -26,11 +50,6 @@ $legend-color: #222;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
&.with_feed {
width: calc(100% - #{$feed-width});
min-width: calc(100% - #{$feed-width-max});
}
.loader { .loader {
position: absolute; position: absolute;
font-size: 3em; font-size: 3em;
@@ -82,7 +101,7 @@ $legend-color: #222;
font-family: Roboto, Arial, sans-serif; font-family: Roboto, Arial, sans-serif;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
margin: 1em; margin: $block-spacing;
&+ .leaflet-control { &+ .leaflet-control {
margin-top: 0; margin-top: 0;
@@ -104,8 +123,9 @@ $legend-color: #222;
/* Pull right controls by $feed-width % */ /* Pull right controls by $feed-width % */
.leaflet-right { .leaflet-right {
width: calc(#{$feed-width}); transition: all 0.5s;
max-width: calc(#{$feed-width-max}); width: 0;
max-width: 0;
.leaflet-control { .leaflet-control {
left: -100%; left: -100%;
@@ -148,6 +168,23 @@ $legend-color: #222;
} }
} }
} }
#post-button {
cursor: pointer;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
width: 44px;
text-align: center;
&:hover .fa {
color: white;
}
.fa {
color: #CCC;
@extend .control-icon;
@extend .fa-post;
}
}
#feed { #feed {
position: absolute; position: absolute;
@@ -157,57 +194,58 @@ $legend-color: #222;
width: calc(#{$feed-width}); width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max}); max-width: calc(#{$feed-width-max});
z-index: 999; z-index: 999;
overflow: hidden;
input, textarea, button {
border: none;
padding: 0.5em 1em;
border-radius: 3px;
background-color: $post-input-bg;
color: $post-color;
}
button {
background-color: $post-color;
color: $post-bg;
&:hover {
background-color: $post-input-bg;
color: $post-color;
}
}
#posts { #posts {
position: absolute; position: absolute;
top: 0; transition: all 0.5s;
top: $block-spacing;
bottom: 0; bottom: 0;
right: 0;
width: 100%; width: 100%;
#poster { #poster {
textarea#post {
input, textarea, button {
border: none;
padding: 0.5em 1em;
border-radius: 3px;
background-color: $post-input-bg;
color: $post-color;
}
#post {
margin-bottom: 1em; margin-bottom: 1em;
width: calc(100% - 2em); width: calc(100% - 2em);
} }
#name { input#name {
width: calc(100% - 6em); width: calc(100% - 6em);
} }
#submit { button#submit {
margin-left: 1em; margin-left: 1em;
background-color: $post-color;
color: $post-bg;
margin-bottom: 0.5em; margin-bottom: 0.5em;
&:hover {
background-color: $post-input-bg;
color: $post-color;
}
} }
} }
.post { .post {
margin-bottom: 1em; margin-bottom: $block-spacing;
background: $post-bg; background: $post-bg;
color: $post-color; color: $post-color;
border-radius: 3px; border-radius: 3px;
width: calc(100% - 1em); width: calc(100% - #{$block-spacing});
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
&:first-child {
margin-top: 1em;
}
.message { .message {
margin: 0.3em 0 0 0; margin: 0.3em 0 0 0;
} }
@@ -219,15 +257,14 @@ $legend-color: #222;
.header { .header {
font-style: italic; font-style: italic;
font-size: 0.8em; font-size: 0.8em;
padding: 0.5em 1em;
span { span {
padding: 0.5em 1em;
display: inline-block; display: inline-block;
width: calc(50% - 2em); width: 50%;
cursor: default; cursor: default;
&.index { &.index {
float: left;
font-style: normal; font-style: normal;
} }
@@ -275,10 +312,6 @@ $legend-color: #222;
margin: 0.5em 0; margin: 0.5em 0;
} }
p: first-child {
margin-top: 1em;
}
.staticmap { .staticmap {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;

11
style/_mobile.scss Normal file
View File

@@ -0,0 +1,11 @@
@media only screen and (max-width: 800px) {
.desktop, .leaflet-control-container {
display: none;
}
}
@media only screen and (min-width: 801px) {
.mobile {
display: none;
}
}

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

4
style/spot.css.map
View File

File diff suppressed because one or more lines are too long

4
style/spot.scss
View File

@@ -10,4 +10,6 @@
/* Pages Specific CSS (masks) */ /* Pages Specific CSS (masks) */
@import 'mask_project'; @import 'mask_project';
@import 'mask_upload'; @import 'mask_upload';
@import 'mobile';