forked from MapComplete/MapComplete
Cleanup of the image carousel code and index.css code
This commit is contained in:
Pieter Vander Vennet
parent
21c71febca
commit
c7f33a9490
14 changed files with 190 additions and 318 deletions
|
|
@ -3,7 +3,6 @@ import {Layout} from "./Layout";
|
|||
import {Groen} from "./Layouts/Groen";
|
||||
import Cyclofix from "./Layouts/Cyclofix";
|
||||
import {StreetWidth} from "./Layouts/StreetWidth";
|
||||
import {GRB} from "./Layouts/GRB";
|
||||
import {MetaMap} from "./Layouts/MetaMap";
|
||||
import {Natuurpunt} from "./Layouts/Natuurpunt";
|
||||
import {FromJSON} from "./JSON/FromJSON";
|
||||
|
|
@ -22,7 +21,6 @@ export class AllKnownLayouts {
|
|||
public static layoutsList: Layout[] = [
|
||||
new PersonalLayout(),
|
||||
new Natuurpunt(),
|
||||
new GRB(),
|
||||
new Cyclofix(),
|
||||
FromJSON.LayoutFromJSON(bookcases),
|
||||
FromJSON.LayoutFromJSON(aed),
|
||||
|
|
|
|||
|
|
@ -392,7 +392,7 @@ export class FromJSON {
|
|||
|
||||
}
|
||||
);
|
||||
layer.maxAllowedOverlapPercentage = json.hideUnderlayingFeaturesMinPercentage;
|
||||
layer.maxAllowedOverlapPercentage = json.hideUnderlayingFeaturesMinPercentage ?? 0;
|
||||
return layer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@ export default class Cyclofix extends Layout {
|
|||
this.icon = "./assets/bike/logo.svg"
|
||||
this.description = "Easily search and contribute bicycle data nearby";
|
||||
this.socialImage = "./assets/bike/cyclofix.jpeg";
|
||||
this.widenFactor = 0.5;
|
||||
this.widenFactor = 0.05;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export class UserDetails {
|
|||
}
|
||||
|
||||
export class OsmConnection {
|
||||
|
||||
|
||||
public auth;
|
||||
public userDetails: UIEventSource<UserDetails>;
|
||||
private _dryRun: boolean;
|
||||
|
|
|
|||
|
|
@ -37,10 +37,6 @@ export class PersonalLayersPanel extends UIElement {
|
|||
if (layout.id === PersonalLayout.NAME) {
|
||||
continue;
|
||||
}
|
||||
if (layout.hideFromOverview &&
|
||||
State.state.osmConnection.userDetails.data.name !== "Pieter Vander Vennet") {
|
||||
continue
|
||||
}
|
||||
|
||||
const header =
|
||||
new Combine([
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import {ImageSearcher} from "../../Logic/ImageSearcher";
|
|||
import {SlideShow} from "../SlideShow";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import {ConfirmDialog} from "../ConfirmDialog";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import {
|
||||
Dependencies,
|
||||
|
|
@ -12,8 +11,12 @@ import {
|
|||
} from "../../Customizations/UIElementConstructor";
|
||||
import {State} from "../../State";
|
||||
import Translation from "../i18n/Translation";
|
||||
import {CheckBox} from "../Input/CheckBox";
|
||||
import Combine from "../Base/Combine";
|
||||
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
||||
import Translations from "../i18n/Translations";
|
||||
|
||||
export class ImageCarouselConstructor implements TagDependantUIElementConstructor{
|
||||
export class ImageCarouselConstructor implements TagDependantUIElementConstructor {
|
||||
IsKnown(properties: any): boolean {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -46,12 +49,12 @@ export class ImageCarousel extends TagDependantUIElement {
|
|||
private readonly _uiElements: UIEventSource<UIElement[]>;
|
||||
|
||||
private readonly _deleteButton: UIElement;
|
||||
private readonly _isDeleted: UIElement;
|
||||
|
||||
constructor(tags: UIEventSource<any>) {
|
||||
|
||||
constructor(tags: UIEventSource<any>, osmConnection: OsmConnection = undefined) {
|
||||
super(tags);
|
||||
|
||||
|
||||
const self = this;
|
||||
osmConnection = osmConnection ?? State.state?.osmConnection;
|
||||
this.searcher = new ImageSearcher(tags);
|
||||
|
||||
this._uiElements = this.searcher.map((imageURLS: string[]) => {
|
||||
|
|
@ -68,12 +71,17 @@ export class ImageCarousel extends TagDependantUIElement {
|
|||
new FixedUiElement("")).HideOnEmpty(true);
|
||||
|
||||
|
||||
const showDeleteButton = this.slideshow._currentSlide.map((i) => {
|
||||
if(!State.state.osmConnection.userDetails.data.loggedIn){
|
||||
const showDeleteButton = this.slideshow._currentSlide.map((i: number) => {
|
||||
if (!osmConnection?.userDetails?.data?.loggedIn) {
|
||||
return false;
|
||||
}
|
||||
return self.searcher.IsDeletable(self.searcher.data[i]);
|
||||
}, [this.searcher, State.state.osmConnection.userDetails]);
|
||||
}, [this.searcher, osmConnection?.userDetails]);
|
||||
|
||||
const isDeleted: UIEventSource<boolean> = this.slideshow._currentSlide.map((i: number) => {
|
||||
return self.searcher._deletedImages.data.indexOf(self.searcher.data[i]) >= 0;
|
||||
}, [this.searcher, this.searcher._deletedImages]);
|
||||
|
||||
this.slideshow._currentSlide.addCallback(() => {
|
||||
showDeleteButton.ping(); // This pings the showDeleteButton, which indicates that it has to hide it's subbuttons
|
||||
})
|
||||
|
|
@ -84,43 +92,66 @@ export class ImageCarousel extends TagDependantUIElement {
|
|||
}
|
||||
|
||||
|
||||
this._deleteButton = new ConfirmDialog(showDeleteButton,
|
||||
"<img src='./assets/delete.svg' alt='Afbeelding verwijderen' class='delete-image'>",
|
||||
"<span>Afbeelding verwijderen</span>",
|
||||
"<span>Terug</span>",
|
||||
deleteCurrent,
|
||||
() => { },
|
||||
'delete-image-confirm',
|
||||
'delete-image-cancel');
|
||||
const style = ";padding:0.4em;height:2em;padding: 0.4em; font-weight:bold;";
|
||||
const backButton = Translations.t.image.dontDelete
|
||||
.SetStyle("background:black;border-radius:0.4em 0.4em 0 0" + style)
|
||||
|
||||
const deleteButton = Translations.t.image.doDelete
|
||||
.SetStyle("background:#ff8c8c;border-radius:0 0 0.4em 0.4em" + style)
|
||||
.onClick(deleteCurrent);
|
||||
|
||||
const mapping = this.slideshow._currentSlide.map((i) => {
|
||||
if (this.searcher._deletedImages.data.indexOf(
|
||||
this.searcher.data[i]
|
||||
) >= 0) {
|
||||
return "<div class='image-is-removed'>Deze afbeelding is verwijderd</div>"
|
||||
}
|
||||
const deleteButtonCheckbox = new CheckBox(
|
||||
new Combine([
|
||||
backButton,
|
||||
deleteButton]
|
||||
).SetStyle("display:flex;" +
|
||||
"flex-direction:column;" +
|
||||
"background:black;" +
|
||||
"color:white;" +
|
||||
"border-radius:0.5em;" +
|
||||
"width:max-content;" +
|
||||
"height:min-content;"),
|
||||
new VariableUiElement(
|
||||
showDeleteButton.map(showDelete => {
|
||||
|
||||
return "";
|
||||
});
|
||||
this._isDeleted = new VariableUiElement(
|
||||
mapping
|
||||
if (isDeleted.data) {
|
||||
return Translations.t.image.isDeleted
|
||||
.SetStyle("display:block;" +
|
||||
"background-color: black;color:white;padding:0.4em;border-radius:0.4em").Render()
|
||||
}
|
||||
if (!showDelete) {
|
||||
return "";
|
||||
}
|
||||
return new FixedUiElement("<img style='width:1.5em' src='./assets/delete.svg'>")
|
||||
.SetStyle("display:block;" +
|
||||
"width: 1.5em;" +
|
||||
"height: 1.5em;" +
|
||||
"padding: 0.5em;" +
|
||||
"border-radius: 3em;" +
|
||||
"background-color: black;").Render();
|
||||
}, [this.searcher._deletedImages, isDeleted]
|
||||
)));
|
||||
|
||||
this._deleteButton = deleteButtonCheckbox;
|
||||
this._deleteButton.SetStyle(
|
||||
"position:absolute;display:block;top:1em;left:5em;z-index: 7000;width:min-content;height:min-content;"
|
||||
)
|
||||
this.slideshow._currentSlide.addCallback(() => {
|
||||
deleteButtonCheckbox.isEnabled.setData(false)
|
||||
})
|
||||
|
||||
this.searcher._deletedImages.addCallback(() => {
|
||||
this.slideshow._currentSlide.ping();
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
return "<span class='image-carousel-container'>" +
|
||||
"<div class='image-delete-container'>" +
|
||||
this._deleteButton.Render() +
|
||||
this._isDeleted.Render() +
|
||||
"</div>" +
|
||||
this.slideshow.Render() +
|
||||
"</span>";
|
||||
return new Combine([
|
||||
this._deleteButton,
|
||||
this.slideshow
|
||||
]).SetStyle("position:relative").Render();
|
||||
}
|
||||
|
||||
IsKnown(): boolean {
|
||||
|
|
@ -139,12 +170,6 @@ export class ImageCarousel extends TagDependantUIElement {
|
|||
return 0;
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
super.InnerUpdate(htmlElement);
|
||||
this._deleteButton.Update();
|
||||
this._isDeleted.Update();
|
||||
}
|
||||
|
||||
|
||||
Activate() {
|
||||
super.Activate();
|
||||
|
|
|
|||
|
|
@ -44,13 +44,17 @@ export class ImageUploadFlow extends UIElement {
|
|||
{value: "CC-BY 4.0", shown: Translations.t.image.ccb}
|
||||
],
|
||||
preferedLicense
|
||||
); const t = Translations.t.image;
|
||||
|
||||
);
|
||||
licensePicker.SetStyle("float:left");
|
||||
|
||||
const t = Translations.t.image;
|
||||
|
||||
this._licensePicker = licensePicker;
|
||||
this._selectedLicence = licensePicker.GetValue();
|
||||
this._connectButton = new Combine([ t.pleaseLogin])
|
||||
|
||||
this._connectButton = new Combine([t.pleaseLogin])
|
||||
.onClick(() => State.state.osmConnection.AttemptLogin())
|
||||
.SetClass("login-button-friendly");
|
||||
.SetClass("login-button-friendly");
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -91,29 +95,37 @@ export class ImageUploadFlow extends UIElement {
|
|||
}
|
||||
}
|
||||
|
||||
return "" +
|
||||
"<div class='imageflow'>" +
|
||||
const extraInfo = new Combine([
|
||||
Translations.t.image.respectPrivacy,
|
||||
"<br/>",
|
||||
this._licensePicker,
|
||||
"<br/>",
|
||||
currentStateHtml,
|
||||
"<br/>"
|
||||
]);
|
||||
|
||||
"<label for='fileselector-" + this.id + "'>" +
|
||||
const label = new Combine([
|
||||
"<img style='width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;' src='./assets/camera-plus.svg'/> ",
|
||||
Translations.t.image.addPicture
|
||||
.SetStyle("width:max-content;font-size: 28px;font-weight: bold;float: left;margin-top: 4px;padding-top: 4px;padding-bottom: 4px;padding-left: 13px;"),
|
||||
|
||||
"<div class='imageflow-file-input-wrapper'>" +
|
||||
"<img src='./assets/camera-plus.svg' alt='upload image'/> " +
|
||||
`<span class='imageflow-add-picture'>${Translations.t.image.addPicture.R()}</span>` +
|
||||
"<div class='break'></div>" +
|
||||
"</div>" +
|
||||
currentStateHtml +
|
||||
Translations.t.image.respectPrivacy.Render() + "<br/>" +
|
||||
this._licensePicker.Render() + "<br/>" +
|
||||
]).SetStyle(" display: flex;cursor:pointer;padding: 0.5em;border-radius: 1em;border: 3px solid black;box-sizing:border-box;")
|
||||
|
||||
const actualInputElement =
|
||||
`<input style='display: none' id='fileselector-${this.id}' type='file' accept='image/*' name='picField' multiple='multiple' alt=''/>`;
|
||||
|
||||
const form = "<form id='fileselector-form-" + this.id + "'>" +
|
||||
`<label for='fileselector-${this.id}'>` +
|
||||
label.Render() +
|
||||
"</label>" +
|
||||
"<form id='fileselector-form-" + this.id + "'>" +
|
||||
"<input id='fileselector-" + this.id + "' " +
|
||||
"type='file' " +
|
||||
"class='imageflow-file-input' " +
|
||||
"accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
|
||||
"/>" +
|
||||
"</form>" +
|
||||
"</div>"
|
||||
;
|
||||
actualInputElement+
|
||||
"</form>";
|
||||
|
||||
return new Combine([
|
||||
form,
|
||||
extraInfo
|
||||
]).SetStyle("margin-top: 1em;margin-bottom: 2em;text-align: center;")
|
||||
.Render();
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
|
|
|
|||
|
|
@ -434,6 +434,18 @@ export default class Translations {
|
|||
nl: "<span class='thanks'>Je afbeelding is toegevoegd. Bedankt om te helpen!</span>",
|
||||
fr: "<span class='thanks'>Votre photo est ajouté. Merci beaucoup!</span>",
|
||||
gl: "<span class='thanks'>A túa imaxe foi engadida. Grazas por axudar.</span>"
|
||||
}),
|
||||
dontDelete: new T({
|
||||
"nl":"Terug",
|
||||
"en":"Cancel"
|
||||
}),
|
||||
doDelete: new T({
|
||||
"nl":"Verwijder afbeelding",
|
||||
"en":"Remove image"
|
||||
}),
|
||||
isDeleted: new T({
|
||||
"nl":"Verwijderd",
|
||||
"en":"Deleted"
|
||||
})
|
||||
},
|
||||
centerMessage: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
.tabs-header-bar {
|
||||
padding-left: 1em;
|
||||
padding-top: 10px; /* For the shadow */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
.tab-single-header img {
|
||||
height: 3em;
|
||||
max-width: 3em;
|
||||
padding: 0.5em;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
|
||||
.tab-content {
|
||||
z-index: 5002;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tab-single-header {
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
z-index: 5000;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background-color: white;
|
||||
z-index: 5001;
|
||||
box-shadow: 0 0 10px black;
|
||||
border: 1px solid white;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.tab-non-active {
|
||||
background-color: #e5f5ff;
|
||||
opacity: 0.5;
|
||||
border-left: 1px solid gray;
|
||||
border-right:1px solid gray;
|
||||
border-top: 1px solid gray;
|
||||
border-bottom: 1px solid lightgray;
|
||||
min-width: 4em;
|
||||
}
|
||||
222
index.css
222
index.css
|
|
@ -547,11 +547,8 @@
|
|||
box-shadow: unset;
|
||||
overflow-y: unset;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.to-the-map {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -619,9 +616,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.imgWithAttr {
|
||||
max-height: 20em;
|
||||
|
||||
|
|
@ -664,61 +658,12 @@
|
|||
}
|
||||
|
||||
|
||||
/**************** Image upload flow ***************/
|
||||
|
||||
.imageflow {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.imageflow-file-input-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5em;
|
||||
border-radius: 1em;
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
.imageflow-add-picture {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.imageflow-file-input-wrapper img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0.1em;
|
||||
margin-top: 5px;
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.license-picker {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.imageflow > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/***************** Info box (box containing features and questions ******************/
|
||||
|
||||
.leaflet-popup-content {
|
||||
width: 40em !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#messagesboxmobile .featureinfobox {
|
||||
max-height: unset;
|
||||
overflow-y: unset;
|
||||
|
|
@ -842,103 +787,6 @@
|
|||
display: inline-block
|
||||
}
|
||||
|
||||
/******* THe remove image buttons ****/
|
||||
|
||||
.image-carousel-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-is-removed{
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
top: 2.5em;
|
||||
|
||||
padding: 0.5em;
|
||||
padding-left: 0.75em;
|
||||
|
||||
height: 3em;
|
||||
width: 14em;
|
||||
border-radius: 1em;
|
||||
background-color: black;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: 1.5em; /* same as .delete-image */
|
||||
|
||||
z-index: 7000;
|
||||
}
|
||||
|
||||
.image-delete-container {
|
||||
position: absolute;
|
||||
left: 6em;
|
||||
top: 1.5em;
|
||||
display: inline-block;
|
||||
z-index: 7000;
|
||||
|
||||
}
|
||||
|
||||
.delete-image {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
padding: 0.5em;
|
||||
border-radius: 3em;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.delete-image-confirm {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
top: 2.5em;
|
||||
|
||||
padding: 0.5em;
|
||||
padding-left: 0.75em;
|
||||
|
||||
width: 14em;
|
||||
border-radius: 1em;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background-color: #ff8c8c;
|
||||
|
||||
color: white;
|
||||
height: 1.5em; /* same as .delete-image */
|
||||
|
||||
z-index: 7000;
|
||||
}
|
||||
|
||||
.delete-image-confirm span {
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.delete-image-cancel {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
left: 0em;
|
||||
padding: 0.5em;
|
||||
padding-left: 0.75em;
|
||||
|
||||
border-radius: 1em;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
height: 1.5em; /* same as .delete-image */
|
||||
width: 14em; /* Same as delete-image-confirm */
|
||||
|
||||
|
||||
background-color: black;
|
||||
color: white;
|
||||
z-index: 7000;
|
||||
}
|
||||
|
||||
.delete-image-cancel span {
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
/**** The save button *****/
|
||||
|
||||
.save {
|
||||
|
|
@ -946,9 +794,7 @@
|
|||
border: solid white 2px;
|
||||
background-color: #3a3aeb;
|
||||
color: white;
|
||||
padding: 0.2em;
|
||||
padding-left: 0.6em;
|
||||
padding-right: 0.6em;
|
||||
padding: 0.2em 0.6em;
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
border-radius: 1.5em;
|
||||
|
|
@ -991,66 +837,6 @@
|
|||
}
|
||||
|
||||
|
||||
/******** TabbedElement ****/
|
||||
|
||||
.tabs-header-bar {
|
||||
padding-left: 1em;
|
||||
padding-top: 10px; /* For the shadow */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
.tab-single-header img {
|
||||
height: 3em;
|
||||
max-width: 3em;
|
||||
padding: 0.5em;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
|
||||
.tab-content {
|
||||
z-index: 5002;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tab-single-header {
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
z-index: 5000;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background-color: white;
|
||||
z-index: 5001;
|
||||
box-shadow: 0 0 10px black;
|
||||
border: 1px solid white;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.tab-non-active {
|
||||
background-color: #e5f5ff;
|
||||
opacity: 0.5;
|
||||
border-left: 1px solid gray;
|
||||
border-right:1px solid gray;
|
||||
border-top: 1px solid gray;
|
||||
border-bottom: 1px solid lightgray;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
|
||||
/****** ShareScreen *****/
|
||||
|
||||
.literal-code {
|
||||
|
|
@ -1127,12 +913,6 @@
|
|||
font-size: large;
|
||||
}
|
||||
|
||||
|
||||
.custom-layer-panel {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.custom-layer-panel-header {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="stylesheet" href="./vendor/leaflet.css"/>
|
||||
<link rel="stylesheet" href="./index.css"/>
|
||||
<link rel="stylesheet" href="./css/userbadge.css"/>
|
||||
<link rel="stylesheet" href="./css/tabbedComponent.css"/>
|
||||
<link rel="stylesheet" href="./css/slideshow.css"/>
|
||||
<link rel="manifest" href="./manifest.manifest">
|
||||
<link rel="icon" href="assets/add.svg" sizes="any" type="image/svg+xml">
|
||||
|
|
|
|||
4
index.ts
4
index.ts
|
|
@ -37,9 +37,9 @@ let defaultLayout = "bookcases"
|
|||
let hash = window.location.hash;
|
||||
|
||||
const path = window.location.pathname.split("/").slice(-1)[0];
|
||||
if (path !== "index.html") {
|
||||
if (path !== "index.html" && path !== "") {
|
||||
defaultLayout = path.substr(0, path.length - 5);
|
||||
console.log("Using layout", defaultLayout)
|
||||
console.log("Using layout", defaultLayout);
|
||||
}
|
||||
|
||||
// Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
<head>
|
||||
<title>Small tests</title>
|
||||
<link href="index.css" rel="stylesheet"/>
|
||||
<link href="css/slideshow.css" rel="stylesheet"/>
|
||||
<link href="css/tabbedComponent.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.tag-input-row {
|
||||
display: block ruby;
|
||||
|
|
|
|||
33
test.ts
33
test.ts
|
|
@ -1,25 +1,14 @@
|
|||
import {CheckBoxes} from "./UI/Input/Checkboxes";
|
||||
import {FixedInputElement} from "./UI/Input/FixedInputElement";
|
||||
import {VariableUiElement} from "./UI/Base/VariableUIElement";
|
||||
import {ImageCarousel} from "./UI/Image/ImageCarousel";
|
||||
import {UIEventSource} from "./Logic/UIEventSource";
|
||||
import {OsmConnection} from "./Logic/Osm/OsmConnection";
|
||||
|
||||
const connection = new OsmConnection(true, new UIEventSource<string>(undefined), "qsdf");
|
||||
connection.AttemptLogin();
|
||||
|
||||
|
||||
const cb = new CheckBoxes(
|
||||
[ new FixedInputElement("One", 1),
|
||||
new FixedInputElement("Two",2),
|
||||
new FixedInputElement("Thee",3)]
|
||||
)
|
||||
const imageCarousel = new ImageCarousel(new UIEventSource<any>({
|
||||
"image": "https://i.imgur.com/kX3rl3v.jpg"
|
||||
}), connection);
|
||||
|
||||
cb.AttachTo("maindiv");
|
||||
new VariableUiElement(cb.GetValue().map(ts => ts?.join(", "))).AttachTo("extradiv")
|
||||
|
||||
window.setTimeout(() => {
|
||||
cb.GetValue().setData([2,3]);
|
||||
}, 2500)
|
||||
|
||||
window.setTimeout(() => {
|
||||
cb.GetValue().setData([2]);
|
||||
}, 3000)
|
||||
|
||||
window.setTimeout(() => {
|
||||
cb.GetValue().setData([1, 2]);
|
||||
}, 3500)
|
||||
imageCarousel.AttachTo("maindiv")
|
||||
imageCarousel.Activate();
|
||||
Loading…
Add table
Add a link
Reference in a new issue