kopia lustrzana https://github.com/FacilMap/facilmap
Dealing with popups moving out of view
Candid Dauth
rodzic
59f25fb847
commit
c9ce1284aa
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
facilpadApp.directive("fpColourPicker", function($compile) {
|
||||
facilpadApp.directive("fpColourPicker", function() {
|
||||
var colourPicker = $("#colour-picker").hide();
|
||||
|
||||
function textColour(colour) {
|
||||
|
|
@ -99,6 +99,37 @@
|
|||
}
|
||||
});
|
||||
|
||||
facilpadApp.directive("fpPopup", function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, element, attrs) {
|
||||
var el = $(element);
|
||||
|
||||
el.addClass("fp-popup fp-popup-hidden fp-popup-bottom fp-popup-right");
|
||||
|
||||
scope.$watchCollection(attrs.fpPopup, function(v) {
|
||||
if(v == null)
|
||||
el.addClass("fp-popup-hidden");
|
||||
else {
|
||||
el.removeClass("fp-popup-hidden").css({ top: v.y + 'px', left: v.x + 'px' });
|
||||
|
||||
var vpDim = { width: $(window).width(), height: $(window).height() };
|
||||
|
||||
if(el.hasClass("fp-popup-bottom") && v.y + el.outerHeight(true) > vpDim.height)
|
||||
el.removeClass("fp-popup-bottom").addClass("fp-popup-top");
|
||||
if(el.hasClass("fp-popup-top") && v.y + parseInt(el.css("margin-top")) < 0)
|
||||
el.removeClass("fp-popup-top").addClass("fp-popup-bottom");
|
||||
|
||||
if(el.hasClass("fp-popup-left") && v.x + parseInt(el.css("margin-left")) < 0)
|
||||
el.removeClass("fp-popup-left").addClass("fp-popup-right");
|
||||
if(el.hasClass("fp-popup-right") && v.x + el.outerWidth(true) > vpDim.width)
|
||||
el.removeClass("fp-popup-right").addClass("fp-popup-left");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
facilpadApp.controller("PadCtrl", function($scope, socket, $timeout, $sce, $parse) {
|
||||
|
||||
setTimeout(function() { $("#toolbox").menu(); }, 0);
|
||||
|
|
|
|||
|
|
@ -56,6 +56,9 @@ var FacilPad = {
|
|||
|
||||
fp.map = new FacilMap.Map("map");
|
||||
|
||||
// Deal with z-indexes: Popups should be below map controls
|
||||
$("#view-marker-popup,#view-line-popup").appendTo(fp.map.viewPortDiv);
|
||||
|
||||
fp.map.addLayer(new fm.Layer.OSM.Mapnik(ol.i18n("Mapnik"), { permalinkName : "Mpnk" }));
|
||||
fp.map.addLayer(new fm.Layer.OSM.MapSurfer.Road(ol.i18n("MapSurfer Road"), { permalinkName : "MSfR" }));
|
||||
fp.map.addLayer(new fm.Layer.OSM.CycleMap(ol.i18n("OpenCycleMap"), { permalinkName : "OCyc" }));
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ html,body {
|
|||
}
|
||||
|
||||
#map-disabled-cover {
|
||||
z-index: 10001;
|
||||
background-color: #888;
|
||||
opacity: 0.7;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
|
|
@ -118,7 +117,6 @@ table td.button button {
|
|||
top: 10px;
|
||||
width: 50%;
|
||||
left: 25%;
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
#messages p {
|
||||
|
|
@ -141,18 +139,20 @@ textarea {
|
|||
height: 5em;
|
||||
}
|
||||
|
||||
#view-marker-popup,#view-line-popup {
|
||||
.fp-popup {
|
||||
background: #fff;
|
||||
position:absolute;
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px #888;
|
||||
margin-top: 50px;
|
||||
margin-left: -28px;
|
||||
}
|
||||
|
||||
#view-marker-popup .content,#view-line-popup .content {
|
||||
.fp-popup-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fp-popup .content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -162,22 +162,53 @@ textarea {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
#view-marker-popup:before,#view-line-popup:before {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:-50px;
|
||||
left:30px;
|
||||
border:0;
|
||||
border-left-width:15px; /* vary this value to change the angle of the vertex */
|
||||
border-top-width:50px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
|
||||
border-style:solid;
|
||||
border-color:transparent #fff;
|
||||
/* reduce the damage in FF3.0 */
|
||||
display:block;
|
||||
width:0;
|
||||
.fp-popup:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent #fff;
|
||||
display: block;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#view-marker-popup .buttons,#view-line-popup .buttons {
|
||||
.fp-popup-bottom {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.fp-popup-bottom:before {
|
||||
top: -50px;
|
||||
border-top-width: 50px;
|
||||
}
|
||||
|
||||
.fp-popup-right {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.fp-popup-right:before {
|
||||
left: 30px;
|
||||
border-left-width: 15px;
|
||||
}
|
||||
|
||||
.fp-popup-top {
|
||||
margin-top: -264px;
|
||||
}
|
||||
|
||||
.fp-popup-top:before {
|
||||
bottom: -50px;
|
||||
border-bottom-width: 50px;
|
||||
}
|
||||
|
||||
.fp-popup-left {
|
||||
margin-left: -319px;
|
||||
}
|
||||
|
||||
.fp-popup-left:before {
|
||||
right: 30px;
|
||||
border-right-width: 15px;
|
||||
}
|
||||
|
||||
.fp-popup .buttons {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
|
|
@ -186,7 +217,7 @@ textarea {
|
|||
box-shadow: 0 0 10px #fff;
|
||||
}
|
||||
|
||||
#view-marker-popup .close-button,#view-line-popup .close-button {
|
||||
.fp-popup .close-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
|
|
@ -214,7 +245,6 @@ textarea {
|
|||
list-style-type: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
#colour-picker li {
|
||||
|
|
@ -229,4 +259,26 @@ textarea {
|
|||
|
||||
#colour-picker li:hover {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
|
||||
/********* z-index **************/
|
||||
|
||||
/* jQuery popup has a z-index of 100 */
|
||||
/* OpenLayers Controls have z-index: 1008 (inside the map viewport) */
|
||||
|
||||
#map-disabled-cover {
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
#messages {
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
#colour-picker {
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
#map .fp-popup {
|
||||
z-index: 1007;
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div id="view-marker-popup" ng-show="currentMarker" ng-style="{ top: currentMarker.xy.y + 'px', left: currentMarker.xy.x + 'px' }">
|
||||
<div id="view-marker-popup" fp-popup="currentMarker.xy">
|
||||
<div class="content">
|
||||
<h2>{{currentMarker.name}}</h2>
|
||||
<p class="pos">Coordinates: {{round(currentMarker.position.lat, 5)}}, {{round(currentMarker.position.lon, 5)}}</p>
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
<a href="javascript:" ng-click="currentMarker=null" class="close-button">×</a>
|
||||
</div>
|
||||
|
||||
<div id="view-line-popup" ng-show="currentLine && !drawing" ng-style="{ top: currentLine.clickXy.y + 'px', left: currentLine.clickXy.x + 'px' }">
|
||||
<div id="view-line-popup" fp-popup="currentLine.clickXy">
|
||||
<div class="content">
|
||||
<h2>{{currentLine.name}}</h2>
|
||||
<p class="distance">Distance: {{round(currentLine.distance, 2)}} km <span ng-show="currentLine.time != null">({{formatTime(currentLine.time)}} h{{routingMode(currentLine.mode)}})</span></p>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue