Further fixes to clear up the fullscreen

This commit is contained in:
pietervdvn 2021-03-12 14:52:34 +01:00
parent 482a81b40a
commit 558265eba9
9 changed files with 50 additions and 17 deletions

View file

@ -219,6 +219,7 @@ def changes_per_theme_daily(contents):
for row in contents: for row in contents:
def main(): def main():
print("Creating graphs...") print("Creating graphs...")
with open('stats.csv', newline='') as csvfile: with open('stats.csv', newline='') as csvfile:

View file

@ -280,7 +280,8 @@ export class InitUiElements {
Translations.t.general.attribution.attributionContent, Translations.t.general.attribution.attributionContent,
"<br/>", "<br/>",
new Attribution(undefined, undefined, State.state.layoutToUse, undefined) new Attribution(undefined, undefined, State.state.layoutToUse, undefined)
]) ]),
"copyright"
) )
; ;
@ -420,7 +421,8 @@ export class InitUiElements {
const addNewPoint = new ScrollableFullScreen( const addNewPoint = new ScrollableFullScreen(
() => Translations.t.general.add.title.Clone(), () => Translations.t.general.add.title.Clone(),
() => new SimpleAddUI()); () => new SimpleAddUI(),
"new");
addNewPoint.isShown.addCallback(isShown => { addNewPoint.isShown.addCallback(isShown => {
if (!isShown) { if (!isShown) {

View file

@ -18,7 +18,9 @@ export default class SelectedFeatureHandler {
this._featureSource = featureSource; this._featureSource = featureSource;
const self = this; const self = this;
hash.addCallback(h => { hash.addCallback(h => {
console.log("SelectedFeatureHandler: hash is now ", h)
if (h === undefined || h === "") { if (h === undefined || h === "") {
console.log("Deselecting...")
selectedFeature.setData(undefined); selectedFeature.setData(undefined);
}else{ }else{
self.selectFeature(); self.selectFeature();

View file

@ -50,6 +50,15 @@ export default class Hash {
hash.setData(newValue) hash.setData(newValue)
} }
window.addEventListener('popstate', e => {
let newValue = window.location.hash.substr(1);
console.log("Popstate: the hash is now:", newValue)
if (newValue === "") {
newValue = undefined;
}
hash.setData(newValue)
})
return hash; return hash;
} }

View file

@ -2,7 +2,7 @@ import { Utils } from "../Utils";
export default class Constants { export default class Constants {
public static vNumber = "0.5.7"; public static vNumber = "0.5.8";
// The user journey states thresholds when a new feature gets unlocked // The user journey states thresholds when a new feature gets unlocked
public static userJourney = { public static userJourney = {

View file

@ -4,6 +4,7 @@ import Combine from "./Combine";
import Ornament from "./Ornament"; import Ornament from "./Ornament";
import {FixedUiElement} from "./FixedUiElement"; import {FixedUiElement} from "./FixedUiElement";
import {UIEventSource} from "../../Logic/UIEventSource"; import {UIEventSource} from "../../Logic/UIEventSource";
import Hash from "../../Logic/Web/Hash";
/** /**
* Wraps some contents into a panel that scrolls the content _under_ the title * Wraps some contents into a panel that scrolls the content _under_ the title
@ -13,13 +14,20 @@ export default class ScrollableFullScreen extends UIElement {
public isShown: UIEventSource<boolean>; public isShown: UIEventSource<boolean>;
private _component: UIElement; private _component: UIElement;
private _fullscreencomponent: UIElement; private _fullscreencomponent: UIElement;
private static readonly _actor = ScrollableFullScreen.InitActor();
private _hashToSet: string;
private static _currentlyOpen : ScrollableFullScreen;
constructor(title: ((mode: string) => UIElement), content: ((mode: string) => UIElement), constructor(title: ((mode: string) => UIElement), content: ((mode: string) => UIElement),
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false)) { hashToSet: string,
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false)
) {
super(); super();
this.isShown = isShown; this.isShown = isShown;
this._hashToSet = hashToSet;
this._component = this.BuildComponent(title("desktop"), content("desktop"), isShown); this._component = this.BuildComponent(title("desktop"), content("desktop"), isShown)
.SetClass("hidden md:block");
this._fullscreencomponent = this.BuildComponent(title("mobile"), content("mobile"), isShown); this._fullscreencomponent = this.BuildComponent(title("mobile"), content("mobile"), isShown);
this.dumbMode = false; this.dumbMode = false;
const self = this; const self = this;
@ -27,8 +35,7 @@ export default class ScrollableFullScreen extends UIElement {
if (isShown) { if (isShown) {
self.Activate(); self.Activate();
} else { } else {
self.clear(); ScrollableFullScreen.clear();
} }
}) })
} }
@ -40,7 +47,11 @@ export default class ScrollableFullScreen extends UIElement {
Activate(): void { Activate(): void {
this.isShown.setData(true) this.isShown.setData(true)
this._fullscreencomponent.AttachTo("fullscreen"); this._fullscreencomponent.AttachTo("fullscreen");
if(this._hashToSet != undefined){
Hash.hash.setData(this._hashToSet)
}
const fs = document.getElementById("fullscreen"); const fs = document.getElementById("fullscreen");
ScrollableFullScreen._currentlyOpen = this;
fs.classList.remove("hidden") fs.classList.remove("hidden")
} }
@ -69,11 +80,21 @@ export default class ScrollableFullScreen extends UIElement {
} }
private clear() { private static clear() {
ScrollableFullScreen.empty.AttachTo("fullscreen") ScrollableFullScreen.empty.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen"); const fs = document.getElementById("fullscreen");
ScrollableFullScreen._currentlyOpen.isShown.setData(false);
fs.classList.add("hidden") fs.classList.add("hidden")
Hash.hash.setData(undefined);
} }
private static InitActor(){
Hash.hash.addCallback(hash => {
if(hash === undefined || hash === ""){
ScrollableFullScreen.clear()
}
});
return true;
}
} }

View file

@ -33,7 +33,7 @@ export default class FullWelcomePaneWithTabs extends UIElement {
this._component = new ScrollableFullScreen( this._component = new ScrollableFullScreen(
() => layoutToUse.title.Clone(), () => layoutToUse.title.Clone(),
() => FullWelcomePaneWithTabs.GenerateContents(layoutToUse, State.state.osmConnection.userDetails), () => FullWelcomePaneWithTabs.GenerateContents(layoutToUse, State.state.osmConnection.userDetails),
isShown "welcome" ,isShown
) )
} }

View file

@ -11,7 +11,7 @@ import {UIEventSource} from "../../Logic/UIEventSource";
export default class LayerControlPanel extends ScrollableFullScreen { export default class LayerControlPanel extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) { constructor(isShown: UIEventSource<boolean>) {
super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, isShown); super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, "layers", isShown);
} }
private static GenTitle(): UIElement { private static GenTitle(): UIElement {

View file

@ -17,8 +17,9 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
tags: UIEventSource<any>, tags: UIEventSource<any>,
layerConfig: LayerConfig layerConfig: LayerConfig
) { ) {
super((mode:string) => FeatureInfoBox.GenerateTitleBar(tags, layerConfig, mode), super(() => FeatureInfoBox.GenerateTitleBar(tags, layerConfig),
(mode:string) => FeatureInfoBox.GenerateContent(tags, layerConfig, mode)); () => FeatureInfoBox.GenerateContent(tags, layerConfig),
tags.data.id);
if (layerConfig === undefined) { if (layerConfig === undefined) {
throw "Undefined layerconfig"; throw "Undefined layerconfig";
@ -48,10 +49,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
} }
private static GenerateContent(tags: UIEventSource<any>, private static GenerateContent(tags: UIEventSource<any>,
layerConfig: LayerConfig, layerConfig: LayerConfig): UIElement {
mode: string): UIElement {
let questionBox: UIElement = undefined; let questionBox: UIElement = undefined;
if (State.state.featureSwitchUserbadge.data) { if (State.state.featureSwitchUserbadge.data) {
questionBox = new QuestionBox(tags, layerConfig.tagRenderings); questionBox = new QuestionBox(tags, layerConfig.tagRenderings);