kopia lustrzana https://github.com/FacilMap/facilmap
Improve styling of infoBox, do not use layers anymore
Candid Dauth
rodzic
f2f69e0d37
commit
404f953d88
|
|
@ -1,9 +1,6 @@
|
|||
<div class="fm-info-box panel panel-default" ng-class="className">
|
||||
<div class="panel-body">
|
||||
<div class="layer" ng-repeat="layer in layers">
|
||||
<div class="cover" ng-if="!$last"></div>
|
||||
<button type="button" class="btn btn-link close-button" ng-click="layer.hide()">×</button>
|
||||
<div fm-info-box-bind="layer"></div>
|
||||
</div>
|
||||
<div class="html"></div>
|
||||
<button type="button" class="btn btn-link close-button" ng-click="hide()">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -7,7 +7,8 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
|||
return function(map) {
|
||||
let scope = $rootScope.$new();
|
||||
scope.className = css.className;
|
||||
scope.layers = [];
|
||||
|
||||
let currentObj = null;
|
||||
|
||||
let el = $(require("./infoBox.html"));
|
||||
|
||||
|
|
@ -16,102 +17,86 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
|||
$compile(el)(scope);
|
||||
});
|
||||
|
||||
let show = () => {
|
||||
return new Promise((resolve) => {
|
||||
let legendEl = map.el.find(".fm-map-legend");
|
||||
let legendPanelEl = legendEl.find("> .panel");
|
||||
|
||||
if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
|
||||
let legendSize = legendPanelEl[0].getBoundingClientRect();
|
||||
|
||||
el.show();
|
||||
|
||||
el.css({ transform: "", "transition": "all 0s ease 0s" });
|
||||
el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`);
|
||||
|
||||
setTimeout(() => { // We have to run this after the transform applies
|
||||
legendEl.addClass("fm-infoBox-hidden");
|
||||
el.css("transition", "");
|
||||
el.css("transform", ""); // Gets animated by CSS transition
|
||||
el.one("transitionend", resolve);
|
||||
}, 0);
|
||||
} else {
|
||||
el.css("transition", "all 0s ease 0s");
|
||||
el.fadeIn(700, () => {
|
||||
el.css("transition", "");
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let hide = () => {
|
||||
return new Promise((resolve) => {
|
||||
let legendEl = map.el.find(".fm-map-legend");
|
||||
let legendPanelEl = legendEl.find("> .panel");
|
||||
|
||||
if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
|
||||
let legendSize = legendPanelEl[0].getBoundingClientRect();
|
||||
|
||||
el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`).one("transitionend", () => {
|
||||
el.css("transform", "").hide();
|
||||
el.hide();
|
||||
legendEl.removeClass("fm-infoBox-hidden");
|
||||
resolve();
|
||||
});
|
||||
} else {
|
||||
el.css("transition", "all 0s ease 0s");
|
||||
el.fadeOut(700, () => {
|
||||
el.css("transition", "");
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let infoBox = {
|
||||
show(html, htmlScope, clearOpenLayers, onClose) {
|
||||
let obj = {
|
||||
html,
|
||||
onClose,
|
||||
scope: htmlScope || $rootScope,
|
||||
hide() {
|
||||
let newLayers = scope.layers.filter((it) => (!ng.equals(it, obj))); // Can't use !== because ng-repeat adds $$hashKey
|
||||
onClose && onClose();
|
||||
Promise.resolve().then(() => {
|
||||
if(newLayers.length == 0)
|
||||
return hide();
|
||||
}).then(() => {
|
||||
scope.layers = newLayers;
|
||||
show(html, htmlScope, onClose) {
|
||||
if(currentObj)
|
||||
currentObj.onClose && currentObj.onClose();
|
||||
|
||||
let htmlEl = $(".html", el).empty().append(html);
|
||||
if(htmlScope !== false)
|
||||
$compile(htmlEl)(htmlScope);
|
||||
|
||||
if(!currentObj) {
|
||||
let legendEl = map.el.find(".fm-map-legend");
|
||||
let legendPanelEl = legendEl.find("> .panel");
|
||||
|
||||
if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
|
||||
let legendSize = legendPanelEl[0].getBoundingClientRect();
|
||||
|
||||
el.show();
|
||||
|
||||
el.css({ transform: "", "transition": "all 0s ease 0s" });
|
||||
el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`);
|
||||
|
||||
setTimeout(() => { // We have to run this after the transform applies
|
||||
legendEl.addClass("fm-infoBox-hidden");
|
||||
el.css("transition", "");
|
||||
el.css("transform", ""); // Gets animated by CSS transition
|
||||
}, 0);
|
||||
} else {
|
||||
el.css("transition", "all 0s ease 0s");
|
||||
el.fadeIn(700, () => {
|
||||
el.css("transition", "");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if(scope.layers.length == 0)
|
||||
scope.$evalAsync(() => { $timeout(show); });
|
||||
|
||||
if(clearOpenLayers) {
|
||||
scope.layers.forEach((layer) => {
|
||||
layer.onClose && layer.onClose();
|
||||
});
|
||||
scope.layers = [];
|
||||
}
|
||||
|
||||
scope.layers.push(obj);
|
||||
let thisCurrentObj = currentObj = {
|
||||
onClose
|
||||
};
|
||||
|
||||
return obj;
|
||||
return {
|
||||
hide: () => {
|
||||
if(currentObj !== thisCurrentObj)
|
||||
return;
|
||||
|
||||
infoBox.hide();
|
||||
}
|
||||
};
|
||||
},
|
||||
hideAll() {
|
||||
return hide().then(() => {
|
||||
scope.layers.forEach((layer) => {
|
||||
layer.onClose && layer.onClose();
|
||||
});
|
||||
hide() {
|
||||
if(!currentObj)
|
||||
return Promise.resolve();
|
||||
|
||||
scope.layers = [ ];
|
||||
return new Promise((resolve) => {
|
||||
let legendEl = map.el.find(".fm-map-legend");
|
||||
let legendPanelEl = legendEl.find("> .panel");
|
||||
|
||||
if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
|
||||
let legendSize = legendPanelEl[0].getBoundingClientRect();
|
||||
|
||||
el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`).one("transitionend", () => {
|
||||
el.css("transform", "").hide();
|
||||
el.hide();
|
||||
legendEl.removeClass("fm-infoBox-hidden");
|
||||
resolve();
|
||||
});
|
||||
} else {
|
||||
el.css("transition", "all 0s ease 0s");
|
||||
el.fadeOut(700, () => {
|
||||
el.css("transition", "");
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
}).then(() => {
|
||||
currentObj.onClose && currentObj.onClose();
|
||||
currentObj = null;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
scope.hide = infoBox.hide;
|
||||
|
||||
return infoBox;
|
||||
};
|
||||
});
|
||||
|
|
@ -126,7 +111,9 @@ fm.app.directive("fmInfoBoxBind", function($compile) {
|
|||
scope.$watchGroup(["layer.html", "layer.scope"], () => {
|
||||
let el = $(scope.layer.html);
|
||||
element.empty().append(el);
|
||||
$compile(el)(scope.layer.scope);
|
||||
|
||||
if(scope.layer.scope !== false)
|
||||
$compile(el)(scope.layer.scope);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
.close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
right: 5px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
|
|
@ -37,16 +37,14 @@
|
|||
height: 200px;
|
||||
overflow: auto;
|
||||
|
||||
/* Make space for buttons at the bottom */
|
||||
padding-bottom: 1.5em;
|
||||
|
||||
/* Replace padding by margin to move horizontal scrollbar a bit to the left so that it can be covered by .buttons */
|
||||
/* Make space for close button on the top and don't cover round corners on top and bottom */
|
||||
padding-left: 0;
|
||||
margin: 20px 0 7px 15px;
|
||||
margin: 2px 0 28px 0;
|
||||
padding: 15px;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
/* Copy dl-horizontal styles, modify sizing, also apply for small screens (as popup size is always the same) */
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
|
|||
markersUi.deleteMarker(scope.marker);
|
||||
};
|
||||
|
||||
map.infoBox.show(require("./view-marker.html"), scope, true, () => {
|
||||
map.infoBox.show(require("./view-marker.html"), scope, () => {
|
||||
openMarkerId = null;
|
||||
markersById[marker.id].setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol));
|
||||
});
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue