Merge slick carousel
This commit is contained in:
pietervdvn
commit
b9d5a85cd0
|
|
@ -17,17 +17,17 @@ import {UIEventSource} from "../UIEventSource";
|
|||
* Note that this list is embedded into an UIEVentSource, ready to put it into a carousel.
|
||||
*
|
||||
*/
|
||||
export class ImageSearcher {
|
||||
export class ImageSearcher extends UIEventSource<{ key: string, url: string }[]>{
|
||||
|
||||
public readonly images = new UIEventSource<{ key: string, url: string }[]>([]);
|
||||
private readonly _wdItem = new UIEventSource<string>("");
|
||||
private readonly _commons = new UIEventSource<string>("");
|
||||
|
||||
constructor(tags: UIEventSource<any>, imagePrefix = "image", loadSpecial = true) {
|
||||
super([])
|
||||
const self = this;
|
||||
|
||||
function AddImages(images: { key: string, url: string }[]) {
|
||||
const oldUrls = self.images.data.map(kurl => kurl.url);
|
||||
const oldUrls = self.data.map(kurl => kurl.url);
|
||||
let somethingChanged = false;
|
||||
for (const image of images) {
|
||||
const url = image.url;
|
||||
|
|
@ -41,11 +41,11 @@ export class ImageSearcher {
|
|||
continue;
|
||||
}
|
||||
|
||||
self.images.data.push(image);
|
||||
self.data.push(image);
|
||||
somethingChanged = true;
|
||||
}
|
||||
if (somethingChanged) {
|
||||
self.images.ping();
|
||||
self.ping();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ export default class Hash {
|
|||
return;
|
||||
}
|
||||
|
||||
h = h.replace(/\//g, "_");
|
||||
window.location.hash = "#" + h;
|
||||
});
|
||||
|
||||
|
|
|
|||
18
UI/Image/Attribution.ts
Normal file
18
UI/Image/Attribution.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import Combine from "../Base/Combine";
|
||||
import Translations from "../i18n/Translations";
|
||||
|
||||
export default class Attribution extends Combine {
|
||||
|
||||
constructor(author: UIElement | string, license: UIElement | string, icon: UIElement) {
|
||||
super([
|
||||
icon?.SetClass("block left").SetStyle("height: 2em; width: 2em; padding-right: 0.5em"),
|
||||
new Combine([
|
||||
Translations.W(author).SetClass("block font-bold"),
|
||||
Translations.W((license ?? "") === "undefined" ? "CC0" : (license ?? ""))
|
||||
]).SetClass("flex flex-col")
|
||||
]);
|
||||
this.SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 rounded");
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ export default class DeleteImage extends UIElement {
|
|||
}
|
||||
|
||||
InnerRender(): string {
|
||||
if(!State.state.featureSwitchUserbadge.data){
|
||||
if(! State.state?.featureSwitchUserbadge?.data){
|
||||
return "";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import {ImageSearcher} from "../../Logic/Actors/ImageSearcher";
|
||||
import {SlideShow} from "./SlideShow";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Combine from "../Base/Combine";
|
||||
|
|
@ -9,31 +8,31 @@ import {ImgurImage} from "./ImgurImage";
|
|||
import {MapillaryImage} from "./MapillaryImage";
|
||||
import {SimpleImageElement} from "./SimpleImageElement";
|
||||
|
||||
|
||||
export class ImageCarousel extends UIElement{
|
||||
|
||||
public readonly slideshow: UIElement;
|
||||
|
||||
constructor(tags: UIEventSource<any>, imagePrefix: string = "image", loadSpecial: boolean =true) {
|
||||
super(tags);
|
||||
const searcher : UIEventSource<{url:string}[]> = new ImageSearcher(tags, imagePrefix, loadSpecial).images;
|
||||
const uiElements = searcher.map((imageURLS: {key: string, url:string}[]) => {
|
||||
constructor(images: UIEventSource<{key: string, url:string}[]>, tags: UIEventSource<any>) {
|
||||
super(images);
|
||||
const uiElements = images.map((imageURLS: {key: string, url:string}[]) => {
|
||||
const uiElements: UIElement[] = [];
|
||||
for (const url of imageURLS) {
|
||||
let image = ImageCarousel.CreateImageElement(url.url);
|
||||
let image = ImageCarousel.CreateImageElement(url.url)
|
||||
if(url.key !== undefined){
|
||||
image = new Combine([
|
||||
image,
|
||||
new DeleteImage(url.key, tags)
|
||||
]);
|
||||
}
|
||||
image
|
||||
.SetClass("w-full block")
|
||||
uiElements.push(image);
|
||||
}
|
||||
return uiElements;
|
||||
});
|
||||
|
||||
this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
|
||||
|
||||
this.SetClass("block image-carousel-marker");
|
||||
}
|
||||
|
||||
/***
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@ import {UIElement} from "../UIElement";
|
|||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import {LicenseInfo} from "../../Logic/Web/Wikimedia";
|
||||
import {Imgur} from "../../Logic/Web/Imgur";
|
||||
import Combine from "../Base/Combine";
|
||||
import Attribution from "./Attribution";
|
||||
import {SimpleImageElement} from "./SimpleImageElement";
|
||||
|
||||
|
||||
export class ImgurImage extends UIElement {
|
||||
|
|
@ -33,21 +36,20 @@ export class ImgurImage extends UIElement {
|
|||
}
|
||||
|
||||
InnerRender(): string {
|
||||
const image = `<img src='${this._imageLocation}' alt='' >`;
|
||||
const image = new SimpleImageElement( new UIEventSource (this._imageLocation));
|
||||
|
||||
if(this._imageMeta.data === null){
|
||||
return image;
|
||||
return image.Render();
|
||||
}
|
||||
|
||||
const meta = this._imageMeta.data;
|
||||
return new Combine([
|
||||
image,
|
||||
new Attribution(meta.artist, meta.license, undefined),
|
||||
|
||||
]).SetClass('block relative')
|
||||
.Render();
|
||||
|
||||
const attribution =
|
||||
"<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
|
||||
|
||||
return "<div class='imgWithAttr'>" +
|
||||
image +
|
||||
"<div class='attribution'>" +
|
||||
attribution +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import {UIEventSource} from "../../Logic/UIEventSource";
|
|||
import {LicenseInfo} from "../../Logic/Web/Wikimedia";
|
||||
import {Mapillary} from "../../Logic/Web/Mapillary";
|
||||
import Svg from "../../Svg";
|
||||
import {SimpleImageElement} from "./SimpleImageElement";
|
||||
import Combine from "../Base/Combine";
|
||||
import Attribution from "./Attribution";
|
||||
|
||||
|
||||
export class MapillaryImage extends UIElement {
|
||||
|
|
@ -39,22 +42,21 @@ export class MapillaryImage extends UIElement {
|
|||
|
||||
InnerRender(): string {
|
||||
const url = `https://images.mapillary.com/${this._imageLocation}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`;
|
||||
const image = `<img src='${url}'>`;
|
||||
const image =new SimpleImageElement(new UIEventSource<string>(url))
|
||||
|
||||
if (this._imageMeta === undefined || this._imageMeta.data === null) {
|
||||
return image;
|
||||
if (!this._imageMeta?.data ) {
|
||||
return image.Render();
|
||||
}
|
||||
|
||||
const meta = this._imageMeta.data;
|
||||
|
||||
const attribution =
|
||||
"<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
|
||||
|
||||
return "<div class='imgWithAttr'>" +
|
||||
image +
|
||||
"<div class='attribution'>" +
|
||||
Svg.mapillary_ui().Render() +
|
||||
attribution +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
|
||||
return new Combine([
|
||||
image,
|
||||
new Attribution(meta.artist, meta.license, Svg.mapillary_svg())
|
||||
|
||||
]).SetClass("relative block").Render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,86 +1,32 @@
|
|||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import {UIElement} from "../UIElement";
|
||||
import Combine from "../Base/Combine";
|
||||
import Svg from "../../Svg";
|
||||
// @ts-ignore
|
||||
import $ from "jquery"
|
||||
|
||||
export class SlideShow extends UIElement {
|
||||
|
||||
private readonly _embeddedElements: UIEventSource<UIElement[]>
|
||||
|
||||
public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
|
||||
private _prev: UIElement;
|
||||
private _next: UIElement;
|
||||
|
||||
constructor(
|
||||
embeddedElements: UIEventSource<UIElement[]>) {
|
||||
super(embeddedElements);
|
||||
this._embeddedElements = embeddedElements;
|
||||
this.ListenTo(this._currentSlide);
|
||||
this._embeddedElements
|
||||
.stabilized(1000)
|
||||
.addCallback(embedded => {
|
||||
// Always move to the last image - but at most once per second
|
||||
this._currentSlide.setData(this._embeddedElements.data.length - 1);
|
||||
});
|
||||
|
||||
this.dumbMode = false;
|
||||
const self = this;
|
||||
this._prev = new Combine([
|
||||
"<div class='vspan'></div>",
|
||||
Svg.arrow_left_smooth_img])
|
||||
.SetClass("prev-button")
|
||||
.onClick(() => {
|
||||
const current = self._currentSlide.data;
|
||||
self.MoveTo(current - 1);
|
||||
});
|
||||
this._next = new Combine([
|
||||
"<div class='vspan'></div>",
|
||||
Svg.arrow_right_smooth_img])
|
||||
.SetClass("next-button")
|
||||
.onClick(() => {
|
||||
const current = self._currentSlide.data;
|
||||
self.MoveTo(current + 1);
|
||||
});
|
||||
this._embeddedElements.addCallbackAndRun(elements => {
|
||||
for (const element of elements ?? []) {
|
||||
element.SetClass("slick-carousel-content")
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
if (this._embeddedElements.data.length == 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (this._embeddedElements.data.length == 1) {
|
||||
return "<div class='image-slideshow'><div class='slides'><div class='slide'>" +
|
||||
this._embeddedElements.data[0].Render() +
|
||||
"</div></div></div>";
|
||||
}
|
||||
|
||||
|
||||
let slides = ""
|
||||
for (let i = 0; i < this._embeddedElements.data.length; i++) {
|
||||
let embeddedElement = this._embeddedElements.data[i];
|
||||
let state = "hidden"
|
||||
if (this._currentSlide.data === i) {
|
||||
state = "active-slide";
|
||||
}
|
||||
slides += " <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n";
|
||||
}
|
||||
return new Combine([
|
||||
this._prev
|
||||
, "<div class='slides'>", slides, "</div>"
|
||||
, this._next])
|
||||
.SetClass('image-slideshow')
|
||||
return new Combine(
|
||||
this._embeddedElements.data,
|
||||
).SetClass("block slick-carousel")
|
||||
.Render();
|
||||
}
|
||||
|
||||
public MoveTo(index: number) {
|
||||
if (index < 0) {
|
||||
index = this._embeddedElements.data.length - 1;
|
||||
}
|
||||
index = index % this._embeddedElements.data.length;
|
||||
this._currentSlide.setData(index);
|
||||
}
|
||||
|
||||
Update() {
|
||||
super.Update();
|
||||
for (const uiElement of this._embeddedElements.data) {
|
||||
|
|
@ -88,4 +34,22 @@ export class SlideShow extends UIElement {
|
|||
}
|
||||
}
|
||||
|
||||
protected InnerUpdate(htmlElement: HTMLElement) {
|
||||
super.InnerUpdate(htmlElement);
|
||||
require("slick-carousel")
|
||||
if(this._embeddedElements.data.length == 0){
|
||||
return;
|
||||
}
|
||||
$('.slick-carousel').not('.slick-initialized').slick({
|
||||
// autoplay: true,
|
||||
arrows: true,
|
||||
dots: true,
|
||||
lazyLoad: 'progressive',
|
||||
variableWidth: true,
|
||||
centerMode: true,
|
||||
centerPadding: "60px",
|
||||
adaptive: true
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -30,8 +30,8 @@ export default class ShowDataLayer {
|
|||
this._layerDict[layer.id] = layer;
|
||||
}
|
||||
|
||||
|
||||
function openSelectedElementFeature(feature: any){
|
||||
|
||||
function openSelectedElementFeature(feature: any) {
|
||||
if (feature === undefined) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ export default class ShowDataLayer {
|
|||
action();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function update() {
|
||||
if (features.data === undefined) {
|
||||
return;
|
||||
|
|
@ -66,6 +66,7 @@ export default class ShowDataLayer {
|
|||
}
|
||||
mp.addLayer(geoLayer);
|
||||
oldGeoLayer = geoLayer;
|
||||
openSelectedElementFeature(State.state.selectedElement.data);
|
||||
}
|
||||
|
||||
features.addCallback(() => update());
|
||||
|
|
@ -109,7 +110,7 @@ export default class ShowDataLayer {
|
|||
// No popup action defined -> Don't do anything
|
||||
return;
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const popup = L.popup({
|
||||
autoPan: true,
|
||||
closeOnEscapeKey: true,
|
||||
|
|
@ -121,17 +122,14 @@ export default class ShowDataLayer {
|
|||
const uiElement = new LazyElement(() =>
|
||||
FeatureInfoBox.construct(tags, layer, () => {
|
||||
State.state.selectedElement.setData(undefined);
|
||||
leafletLayer.closePopup();
|
||||
popup.remove();
|
||||
leafletLayer.closePopup();
|
||||
ScrollableFullScreen.RestoreLeaflet();
|
||||
}),
|
||||
"<div style='height: 90vh'>Rendering</div>"); // By setting 90vh, leaflet will attempt to fit the entire screen and move the feature down
|
||||
popup.setContent(uiElement.Render());
|
||||
popup.on('remove', () => {
|
||||
ScrollableFullScreen.RestoreLeaflet(); // Just in case...
|
||||
if (!popup.isOpen()) {
|
||||
return;
|
||||
}
|
||||
State.state.selectedElement.setData(undefined);
|
||||
});
|
||||
leafletLayer.bindPopup(popup);
|
||||
|
|
@ -139,6 +137,7 @@ export default class ShowDataLayer {
|
|||
// But at least it'll be visible already
|
||||
|
||||
leafletLayer.on("popupopen", () => {
|
||||
console.log("Popup opened")
|
||||
uiElement.Activate();
|
||||
State.state.selectedElement.setData(feature);
|
||||
})
|
||||
|
|
@ -146,8 +145,10 @@ export default class ShowDataLayer {
|
|||
this._onSelectedTrigger[id]
|
||||
= () => {
|
||||
if (!popup.isOpen()) {
|
||||
leafletLayer.openPopup();
|
||||
uiElement.Activate();
|
||||
console.log("Action triggered")
|
||||
// Close all the popups which might still be opened
|
||||
self._leafletMap.data.closePopup();
|
||||
leafletLayer.openPopup()
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import ReviewForm from "./Reviews/ReviewForm";
|
|||
import OpeningHoursVisualization from "./OpeningHours/OhVisualization";
|
||||
|
||||
import State from "../State";
|
||||
import {ImageSearcher} from "../Logic/Actors/ImageSearcher";
|
||||
|
||||
export default class SpecialVisualizations {
|
||||
|
||||
|
|
@ -56,7 +57,11 @@ export default class SpecialVisualizations {
|
|||
doc: "Also include images given via 'Wikidata', 'wikimedia_commons' and 'mapillary"
|
||||
}],
|
||||
constr: (state: State,tags, args) => {
|
||||
return new ImageCarousel(tags, args[0], args[1].toLowerCase() === "true");
|
||||
const imagePrefix = args[0];
|
||||
const loadSpecial = args[1].toLowerCase() === "true";
|
||||
const searcher : UIEventSource<{ key: string, url: string }[]> = new ImageSearcher(tags, imagePrefix, loadSpecial);
|
||||
|
||||
return new ImageCarousel(searcher, tags);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,9 @@ export class SubstitutedTranslation extends UIElement {
|
|||
}
|
||||
|
||||
InnerRender(): string {
|
||||
if(this.content.length == 1){
|
||||
return this.content[0].Render();
|
||||
}
|
||||
return new Combine(this.content).Render();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@
|
|||
|
||||
.review-attribution img {
|
||||
height: 3em;
|
||||
width: auto;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
|
|
|
|||
61
index.css
61
index.css
|
|
@ -71,12 +71,28 @@
|
|||
--shadow-color: #00000066;
|
||||
--variable-title-height: 0px; /* Set by javascript */
|
||||
--return-to-the-map-height: 2em;
|
||||
|
||||
--image-carousel-height: 400px;
|
||||
}
|
||||
|
||||
.hide-when-fullscreen-is-shown {
|
||||
.clutter {
|
||||
/*Clutter is actually a class indicating that the element should be hidden when a scrollableFullScreen is opened
|
||||
It doesn't actually define any rules*/
|
||||
}
|
||||
.slick-carousel-content {
|
||||
width: 300px;
|
||||
max-height: var(--image-carousel-height);
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.slick-carousel-content img {
|
||||
/**
|
||||
Workaround to patch images within a slick carousel
|
||||
*/
|
||||
height: var(--image-carousel-height);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
|
@ -423,49 +439,6 @@ a {
|
|||
}
|
||||
|
||||
|
||||
.imgWithAttr {
|
||||
max-height: 20em;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.attribution {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: smaller;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 6em; /* Offset for the go left button*/
|
||||
padding: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
border-radius: 0.5em;
|
||||
|
||||
}
|
||||
|
||||
.attribution img {
|
||||
height: 1.2em !important;
|
||||
padding-right: 0.5em;
|
||||
padding-left: 0.2em;
|
||||
|
||||
}
|
||||
|
||||
.attribution-author {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.license {
|
||||
font-size: small;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.attribution a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/***************** Info box (box containing features and questions ******************/
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@
|
|||
<link rel="stylesheet" href="./css/openinghourstable.css"/>
|
||||
<link rel="stylesheet" href="./css/tagrendering.css"/>
|
||||
<link rel="stylesheet" href="./css/imageUploadFlow.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
|
||||
|
||||
|
||||
<link href="css/ReviewElement.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="vendor/MarkerCluster.css"/>
|
||||
|
|
|
|||
27
package-lock.json
generated
27
package-lock.json
generated
|
|
@ -3745,6 +3745,14 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-1.0.6.tgz",
|
||||
"integrity": "sha512-Xqg/lIZMrUd0VRmSRbCAewtwGZiAk3mEUDvV4op1tGl+LvyPcb/MIOSxTl9z+9+J+R4/vpjiCAT4xeKzH9ji1w=="
|
||||
},
|
||||
"@types/jquery": {
|
||||
"version": "3.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
|
||||
"integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==",
|
||||
"requires": {
|
||||
"@types/sizzle": "*"
|
||||
}
|
||||
},
|
||||
"@types/leaflet": {
|
||||
"version": "1.5.17",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.17.tgz",
|
||||
|
|
@ -3788,6 +3796,20 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
|
||||
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
|
||||
},
|
||||
"@types/sizzle": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
|
||||
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
|
||||
},
|
||||
"@types/slick-carousel": {
|
||||
"version": "1.6.34",
|
||||
"resolved": "https://registry.npmjs.org/@types/slick-carousel/-/slick-carousel-1.6.34.tgz",
|
||||
"integrity": "sha512-LdsK0BLNYqe3uBuWCBwzGQVy+8g8LDe3u1XGlaOelrDD07cjJGVVoKBSyKieK4dmfqilmP+DJp7lNRaTI7rRAg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/jquery": "*"
|
||||
}
|
||||
},
|
||||
"@types/strip-bom": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
|
||||
|
|
@ -10562,6 +10584,11 @@
|
|||
"resolved": "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz",
|
||||
"integrity": "sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg=="
|
||||
},
|
||||
"slick-carousel": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
|
||||
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
|
||||
},
|
||||
"snapdragon": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
"license": "GPL",
|
||||
"dependencies": {
|
||||
"@tailwindcss/postcss7-compat": "^2.0.2",
|
||||
"@types/jquery": "^3.5.5",
|
||||
"@types/leaflet-markercluster": "^1.0.3",
|
||||
"@types/leaflet-providers": "^1.2.0",
|
||||
"@types/leaflet.markercluster": "^1.4.3",
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
"email-validator": "^2.0.4",
|
||||
"escape-html": "^1.0.3",
|
||||
"i18next-client": "^1.11.4",
|
||||
"jquery": "latest",
|
||||
"jquery": "^3.5.1",
|
||||
"latlon2country": "^1.0.8",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet-providers": "^1.10.2",
|
||||
|
|
@ -52,13 +53,15 @@
|
|||
"osmtogeojson": "^3.0.0-beta.4",
|
||||
"parcel": "^1.12.4",
|
||||
"postcss": "^7.0.35",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
|
||||
"sharp": "^0.27.0",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
|
||||
"turf": "^3.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/polyfill": "^7.10.4",
|
||||
"@types/node": "^7.0.5",
|
||||
"@types/slick-carousel": "^1.6.34",
|
||||
"assert": "^2.0.0",
|
||||
"fs": "0.0.1-security",
|
||||
"marked": "^1.1.1",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
<link href="css/tagrendering.css" rel="stylesheet"/>
|
||||
<link href="css/ReviewElement.css" rel="stylesheet"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
47
test.ts
47
test.ts
|
|
@ -1,44 +1,19 @@
|
|||
//*
|
||||
import MangroveReviews from "./Logic/Web/MangroveReviews";
|
||||
import ReviewElement from "./UI/Reviews/ReviewElement";
|
||||
|
||||
import {ImageCarousel} from "./UI/Image/ImageCarousel";
|
||||
import {UIEventSource} from "./Logic/UIEventSource";
|
||||
import ReviewForm from "./UI/Reviews/ReviewForm";
|
||||
import Combine from "./UI/Base/Combine";
|
||||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||||
|
||||
/*
|
||||
window.setTimeout(
|
||||
() => {
|
||||
mangroveReviews.AddReview({
|
||||
comment: "These are liars - not even an island here!",
|
||||
author: "Lost Tourist",
|
||||
date: new Date(),
|
||||
affiliated: false,
|
||||
rating: 10
|
||||
}, (() => {alert("Review added");return undefined;}));
|
||||
|
||||
}, 1000
|
||||
)
|
||||
const images = new UIEventSource<{ url: string, key: string }[]>(
|
||||
[{url: "https://2.bp.blogspot.com/-fQiZkz9Zlzg/T_xe2X2Ia3I/AAAAAAAAA0Q/VPS8Mb8xtIQ/s1600/cat+15.jpg", key: "image:1"},
|
||||
{
|
||||
url: "https://www.mapillary.com/map/im/VEOhKqPcJMuT4F2olz_wHQ",
|
||||
key: "mapillary"
|
||||
},
|
||||
{url: "https://i.imgur.com/mWlghx0.jpg", key: "image:1"}])
|
||||
new ImageCarousel(images, new UIEventSource<any>({"image:1":"https://2.bp.blogspot.com/-fQiZkz9Zlzg/T_xe2X2Ia3I/AAAAAAAAA0Q/VPS8Mb8xtIQ/s1600/cat+15.jpg"}))
|
||||
.AttachTo("maindiv")
|
||||
|
||||
window.setTimeout(
|
||||
() => {
|
||||
mangroveReviews.AddReview({
|
||||
comment: "Excellent conditions to measure weather!!",
|
||||
author: "Weather-Boy",
|
||||
date: new Date(),
|
||||
affiliated: true,
|
||||
rating: 90
|
||||
}, (() => {
|
||||
alert("Review added");
|
||||
return undefined;
|
||||
}));
|
||||
|
||||
}, 1000
|
||||
)
|
||||
*/
|
||||
/*/
|
||||
|
||||
|
||||
import {Utils} from "./Utils";
|
||||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue