2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

fix leaflet section control on mobile devices

Browse source
This commit is contained in:
Laura Klünder 2017-05-15 03:30:54 +02:00
parent 26f131f5e7
commit d580c5de3a
2 changed files with 24 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/c3nav/editor/static/editor/css/editor.css
View file

@ -42,16 +42,29 @@ form button.invisiblesubmit {
font-size: 14px;
padding: 0 7px;
}
.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
width: auto;
height:36px;
line-height:37px;
font-size: 14px;
padding: 0 12px;
}
.leaflet-control-sections a, .leaflet-control-sections a:hover {
opacity:0;
margin-top:-26px;
}
.leaflet-control-sections a.current, .leaflet-control-sections-expanded a, .leaflet-control-sections-expanded a:hover {
.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
margin-top:-36px;
}
.leaflet-control-sections a.current, .leaflet-control-sections-expanded a, .leaflet-control-sections-expanded a:hover,
.leaflet-touch .leaflet-control-sections a.current, .leaflet-touch .leaflet-control-sections-expanded a,
.leaflet-touch .leaflet-control-sections-expanded a:hover {
opacity:1;
margin-top:0;
}
.leaflet-control-sections:not(.leaflet-control-sections-expanded) a.current {
border-radius:4px;
border-width:0;
}
.leaflet-control-sections a.current {
font-weight:bold;

18
src/c3nav/editor/static/editor/js/editor.js
View file

@ -432,6 +432,7 @@ SectionControl = L.Control.extend({
this._container = L.DomUtil.create('div', 'leaflet-control-sections leaflet-bar');
this._sectionButtons = [];
this._disabled = true;
this._expanded = false;
this.hide();
if (!L.Browser.android) {
@ -441,11 +442,7 @@ SectionControl = L.Control.extend({
}, this);
}
if (L.Browser.touch) {
L.DomEvent
.on(this._container, 'click', L.DomEvent.stop)
.on(this._container, 'click', this.collapse, this);
} else {
if (!L.Browser.touch) {
L.DomEvent.on(this._container, 'focus', this.expand, this);
}
@ -461,7 +458,7 @@ SectionControl = L.Control.extend({
L.DomEvent
.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
.on(link, 'click', this._sectionClick, this)
.on(link, 'click', this._sectionClick, this);
this._sectionButtons.push(link);
return link;
@ -498,9 +495,12 @@ SectionControl = L.Control.extend({
},
_sectionClick: function (e) {
console.log('click');
e.preventDefault();
if (!this._disabled) {
e.stopPropagation();
if (!this._expanded) {
this.expand();
} else if (!this._disabled) {
$(e.target).addClass('current').siblings().removeClass('current');
editor.sidebar_get(e.target.href);
this.collapse();
}
@ -508,11 +508,13 @@ SectionControl = L.Control.extend({
expand: function () {
if (this._disabled) return;
this._expanded = true;
L.DomUtil.addClass(this._container, 'leaflet-control-sections-expanded');
return this;
},
collapse: function () {
this._expanded = false;
L.DomUtil.removeClass(this._container, 'leaflet-control-sections-expanded');
return this;
}