Add layer-control-toggle to the URL bar and in the share-screen, fix #90

This commit is contained in:
Pieter Vander Vennet 2020-08-22 13:02:31 +02:00
parent 734f571b5d
commit 0e4cd630e6
4 changed files with 32 additions and 5 deletions

View file

@ -127,7 +127,10 @@ export class InitUiElements {
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => { InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
const checkbox = new CheckBox(layerControl, closedFilterButton); const checkbox = new CheckBox(layerControl, closedFilterButton,
QueryParameters.GetQueryParameter("layer-control-toggle", "false")
.map((str) => str !== "false", [], b => "" + b)
);
checkbox.AttachTo("filter__selection"); checkbox.AttachTo("filter__selection");
State.state.bm.Location.addCallback(() => { State.state.bm.Location.addCallback(() => {
checkbox.isEnabled.setData(false); checkbox.isEnabled.setData(false);

View file

@ -441,10 +441,14 @@ export class ThemeGenerator extends UIElement {
private readonly allQuestionFields: UIElement[]; private readonly allQuestionFields: UIElement[];
public url: UIEventSource<string>; public url: UIEventSource<string>;
private loginButton: Button
constructor(connection: OsmConnection, windowHash) { constructor(connection: OsmConnection, windowHash) {
super(connection.userDetails); super(connection.userDetails);
this.userDetails = connection.userDetails; this.userDetails = connection.userDetails;
this.loginButton = new Button("Log in with OSM", () => {
connection.AttemptLogin()
})
const defaultTheme = {layers: [], icon: "./assets/bug.svg"}; const defaultTheme = {layers: [], icon: "./assets/bug.svg"};
let loadedTheme = undefined; let loadedTheme = undefined;
@ -573,7 +577,7 @@ export class ThemeGenerator extends UIElement {
InnerRender(): string { InnerRender(): string {
if (!this.userDetails.data.loggedIn) { if (!this.userDetails.data.loggedIn) {
return "Not logged in. You need to be logged in to create a theme." return new Combine(["Not logged in. You need to be logged in to create a theme.", this.loginButton]).Render();
} }
if (this.userDetails.data.csCount < 500) { if (this.userDetails.data.csCount < 500) {
return "You need at least 500 changesets to create your own theme."; return "You need at least 500 changesets to create your own theme.";

View file

@ -97,7 +97,8 @@ export class ShareScreen extends UIElement {
{urlName: "fs-welcome-message", human: "Enable the welcome message"}, {urlName: "fs-welcome-message", human: "Enable the welcome message"},
{urlName: "fs-layers", human: "Enable layer control"}, {urlName: "fs-layers", human: "Enable layer control"},
{urlName: "fs-add-new", human: "Enable the 'add new POI' button"}, {urlName: "fs-add-new", human: "Enable the 'add new POI' button"},
{urlName: "fs-geolocation", human: "Enable the 'geolocate-me' button"} {urlName: "fs-geolocation", human: "Enable the 'geolocate-me' button"},
{urlName: "layer-control-toggle", human: "Start with the layer control expanded", reverse:true}
] ]
@ -106,13 +107,19 @@ export class ShareScreen extends UIElement {
const checkbox = new CheckBox( const checkbox = new CheckBox(
new Combine([Img.checkmark, swtch.human]), new Combine([Img.checkmark, swtch.human]),
new Combine([Img.no_checkmark, swtch.human]), new Combine([Img.no_checkmark, swtch.human]),
true swtch.reverse ? false : true
); );
optionCheckboxes.push(checkbox); optionCheckboxes.push(checkbox);
optionParts.push(checkbox.isEnabled.map((isEn) => { optionParts.push(checkbox.isEnabled.map((isEn) => {
if (isEn) { if (isEn) {
if(swtch.reverse){
return `${swtch.urlName}=true`
}
return null; return null;
} else { } else {
if(swtch.reverse){
return null;
}
return `${swtch.urlName}=false` return `${swtch.urlName}=false`
} }
})) }))
@ -127,7 +134,8 @@ export class ShareScreen extends UIElement {
let literalText = "https://pietervdvn.github.io/MapComplete/" + layout.name + ".html" let literalText = "https://pietervdvn.github.io/MapComplete/" + layout.name + ".html"
const parts = Utils.NoNull(optionParts.map((eventSource) => eventSource.data)); const parts =
Utils.NoEmpty(Utils.NoNull(optionParts.map((eventSource) => eventSource.data)));
let hash = ""; let hash = "";
if (State.state.layoutDefinition !== undefined) { if (State.state.layoutDefinition !== undefined) {
@ -136,6 +144,7 @@ export class ShareScreen extends UIElement {
parts.push("userlayout=true"); parts.push("userlayout=true");
} }
if (parts.length === 0) { if (parts.length === 0) {
return literalText + hash; return literalText + hash;
} }

View file

@ -47,6 +47,17 @@ export class Utils {
return ls; return ls;
} }
public static NoEmpty(array: string[]): string[]{
const ls: string[] = [];
for (const t of array) {
if (t === "") {
continue;
}
ls.push(t);
}
return ls;
}
public static CreateLanguagePicker(label: string | UIElement = "") { public static CreateLanguagePicker(label: string | UIElement = "") {
return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => { return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => {