facilmap/frontend/app/legend/legend.html

31 wiersze
1.9 KiB
HTML

<div class="fm-map-legend" ng-show="legendItems.length > 0 || legend1 || legend2">
<div class="panel panel-default" ng-class="{'hidden-xs': !showXs}">
<div class="panel-body">
<div class="fm-legend1" ng-if="legend1">
<div ng-bind-html="legend1"></div>
<hr ng-if="legendItems.length > 0 || legend2" />
</div>
<hr ng-repeat-start="type in legendItems" ng-if="$index > 0">
<h3 ng-click="toggleFilter(type)" ng-class="{ filtered: type.filtered }">{{type.name}}</h3>
<dl ng-repeat-end>
<dt ng-repeat-start="item in type.items" ng-class="thisClass = [ 'fm-' + type.type, { filtered: item.filtered, first: item.first } ]" ng-click="toggleFilter(type, item)" ng-bind-html="item | fmMapLegendMakeSymbol:type" uib-popover-template="'fm-legend-popover'" popover-trigger="'mouseenter'" popover-placement="left" popover-append-to-body="true"></dt>
<dd ng-repeat-end ng-class="thisClass" ng-click="toggleFilter(type, item)" ng-style="item.strikethrough ? {'text-decoration': 'line-through'} : {}" uib-popover-template="'fm-legend-popover'" popover-trigger="'mouseenter'" popover-placement="left" popover-append-to-body="true">{{item.label}}</dd>
</dl>
<div class="fm-legend2" ng-if="legend2">
<hr ng-if="legendItems.length > 0" />
<div ng-bind-html="legend2"></div>
</div>
</div>
</div>
<button type="button" class="btn btn-default visible-xs-block mobile-menu-button" uib-btn-checkbox ng-model="showXs" uib-tooltip="{{showXs ? 'Hide legend' : 'Show legend'}}" tooltip-placement="left" tooltip-append-to-body="true"><fm-icon fm-icon="info-sign" alt="Legend"/></button>
<script type="text/ng-template" id="fm-legend-popover">
<div class="fm-map-legend-popover">
<div class="symbol" ng-bind-html="item | fmMapLegendMakeSymbol:type"></div>
<p>
{{item.label}}<br>
<small><em>Click to show/hide objects of this type.</em></small>
</p>
</div>
</script>
</div>