kopia lustrzana https://github.com/FacilMap/facilmap
Improve styling of infoBox, do not use layers anymore
rodzic
f2f69e0d37
commit
404f953d88
|
@ -1,9 +1,6 @@
|
||||||
<div class="fm-info-box panel panel-default" ng-class="className">
|
<div class="fm-info-box panel panel-default" ng-class="className">
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="layer" ng-repeat="layer in layers">
|
<div class="html"></div>
|
||||||
<div class="cover" ng-if="!$last"></div>
|
<button type="button" class="btn btn-link close-button" ng-click="hide()">×</button>
|
||||||
<button type="button" class="btn btn-link close-button" ng-click="layer.hide()">×</button>
|
|
||||||
<div fm-info-box-bind="layer"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -7,7 +7,8 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
||||||
return function(map) {
|
return function(map) {
|
||||||
let scope = $rootScope.$new();
|
let scope = $rootScope.$new();
|
||||||
scope.className = css.className;
|
scope.className = css.className;
|
||||||
scope.layers = [];
|
|
||||||
|
let currentObj = null;
|
||||||
|
|
||||||
let el = $(require("./infoBox.html"));
|
let el = $(require("./infoBox.html"));
|
||||||
|
|
||||||
|
@ -16,102 +17,86 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
||||||
$compile(el)(scope);
|
$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 = {
|
let infoBox = {
|
||||||
show(html, htmlScope, clearOpenLayers, onClose) {
|
show(html, htmlScope, onClose) {
|
||||||
let obj = {
|
if(currentObj)
|
||||||
html,
|
currentObj.onClose && currentObj.onClose();
|
||||||
onClose,
|
|
||||||
scope: htmlScope || $rootScope,
|
let htmlEl = $(".html", el).empty().append(html);
|
||||||
hide() {
|
if(htmlScope !== false)
|
||||||
let newLayers = scope.layers.filter((it) => (!ng.equals(it, obj))); // Can't use !== because ng-repeat adds $$hashKey
|
$compile(htmlEl)(htmlScope);
|
||||||
onClose && onClose();
|
|
||||||
Promise.resolve().then(() => {
|
if(!currentObj) {
|
||||||
if(newLayers.length == 0)
|
let legendEl = map.el.find(".fm-map-legend");
|
||||||
return hide();
|
let legendPanelEl = legendEl.find("> .panel");
|
||||||
}).then(() => {
|
|
||||||
scope.layers = newLayers;
|
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() {
|
hide() {
|
||||||
return hide().then(() => {
|
if(!currentObj)
|
||||||
scope.layers.forEach((layer) => {
|
return Promise.resolve();
|
||||||
layer.onClose && layer.onClose();
|
|
||||||
});
|
|
||||||
|
|
||||||
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;
|
return infoBox;
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -126,7 +111,9 @@ fm.app.directive("fmInfoBoxBind", function($compile) {
|
||||||
scope.$watchGroup(["layer.html", "layer.scope"], () => {
|
scope.$watchGroup(["layer.html", "layer.scope"], () => {
|
||||||
let el = $(scope.layer.html);
|
let el = $(scope.layer.html);
|
||||||
element.empty().append(el);
|
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 {
|
.close-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 5px;
|
||||||
color: #000;
|
color: #000;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
|
@ -37,16 +37,14 @@
|
||||||
height: 200px;
|
height: 200px;
|
||||||
overflow: auto;
|
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 */
|
/* 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 */
|
/* Make space for close button on the top and don't cover round corners on top and bottom */
|
||||||
padding-left: 0;
|
margin: 2px 0 28px 0;
|
||||||
margin: 20px 0 7px 15px;
|
padding: 15px;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 0;
|
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) */
|
/* 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);
|
markersUi.deleteMarker(scope.marker);
|
||||||
};
|
};
|
||||||
|
|
||||||
map.infoBox.show(require("./view-marker.html"), scope, true, () => {
|
map.infoBox.show(require("./view-marker.html"), scope, () => {
|
||||||
openMarkerId = null;
|
openMarkerId = null;
|
||||||
markersById[marker.id].setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol));
|
markersById[marker.id].setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol));
|
||||||
});
|
});
|
||||||
|
|
Ładowanie…
Reference in New Issue