diff --git a/example/common.css b/example/common.css new file mode 100644 index 0000000..832067d --- /dev/null +++ b/example/common.css @@ -0,0 +1,160 @@ +@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap'); +@import "icons.css"; +@import "reset.css"; + +:root { + font-family: "PT Sans", sans-serif; + font-size: 16px; + font-weight: 400; + font-style: normal; + --padding-sides: 4rem; + --shadow-value: rgba(0, 0, 0, 0.24) 0 3px 8px; + --white-bg-color: #fafafa; + --white-bg-text-color: #ccccc; + --dark-bg-color: #151F29; + --dark-bg-text-color: #fafafa; + --border-radius-value: .4rem +} + +body { + background-color: var(--white-bg-color); + color: var(--white-bg-text-color); + display: flex; + flex-direction: column; + height: 100dvh; +} + +.header { + display: flex; + padding: .5rem; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.header__title { + display: flex; + align-items: center; + gap: 1rem; + font-weight: 700; + font-size: 1.5rem; +} + +.nav__link { + display: none; +} + +.nav__link--mobile { + display: inline-block; +} + +.container { + position: relative; + flex: 1 1 0; +} + +.map { + width: 100%; + height: 100%; +} + +.events { + position: absolute; + display: flex; + flex-direction: column; + gap: .3rem; + bottom: 3.5rem; + right: .5rem; + z-index: 401; + background-color: var(--white-bg-color); + border-radius: var(--border-radius-value); + box-shadow: var(--shadow-value); + padding: .3rem; + width: 55%; + height: 35%; +} + +.events__title { + font-size: 1.3rem; + font-weight: 700; +} + +.events__type { + font-size: 1rem; + font-weight: 400; + padding: .2rem 0 .2rem 0; +} + +.events__output { + font-family: "Google Sans Code", monospace; + font-size: .8rem; + overflow-y: scroll; + background-color: var(--dark-bg-color); + border-radius: var(--border-radius-value); + color: var(--dark-bg-text-color); + padding: .5rem; + flex: 1 1 0; +} + +.footer { + display: none; +} + +@media screen and (min-width: 769px) { + .header { + padding: .3rem var(--padding-sides); + } + + .nav { + display: flex; + gap: 1rem; + justify-content: space-between; + align-items: center; + } + + .nav__link { + display: inline-block; + } + + .nav__link { + text-decoration: none; + color: var(--white-bg-text-color); + } + + .nav__link:hover { + color: cornflowerblue; + } + + .container { + padding: 2rem var(--padding-sides); + } + + .map { + border-radius: var(--border-radius-value); + box-shadow: var(--shadow-value); + } + + .events { + bottom: 4rem; + right: 4.5rem; + width: 35%; + height: 35%; + } + + .footer { + display: flex; + flex-direction: column; + padding: .3rem var(--padding-sides); + } + + .footer__text { + color: var(--white-bg-text-color); + font-size: .8rem; + } + + .footer__text--link { + text-decoration: none; + color: var(--white-bg-text-color); + } +} diff --git a/example/folder-pois.svg b/example/folder-pois.svg new file mode 100644 index 0000000..0c6c5ad --- /dev/null +++ b/example/folder-pois.svg @@ -0,0 +1,58 @@ + + + + + + + + image/svg+xml + + + + + + + diff --git a/example/github.svg b/example/github.svg new file mode 100644 index 0000000..5e48698 --- /dev/null +++ b/example/github.svg @@ -0,0 +1,19 @@ + + + + + github [#142] + Created with Sketch. + + + + + + + + + + + + + diff --git a/example/icons.css b/example/icons.css new file mode 100644 index 0000000..cb8673b --- /dev/null +++ b/example/icons.css @@ -0,0 +1,25 @@ +.folder-pois-icon { + display: inline-block; + background-image: url("./folder-pois.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +.github-icon { + display: inline-block; + background-image: url("./github.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +.icon--medium { + width: 2rem; + height: 2rem; +} + +.icon--small { + width: 1.5rem; + height: 1.5rem; +} diff --git a/example/index.html b/example/index.html index 3fe415f..86f9131 100644 --- a/example/index.html +++ b/example/index.html @@ -1,76 +1,128 @@ - - Leaflet.BetterFileLayer - - - - - - - - + + Leaflet.BetterFileLayer + + + + + + - + + + + + -
- Leaflet.BetterFileLayer - github.com/gabriel-russo/Leaflet.BetterFileLayer -
-
-
Example with external html input
+
+

+
+ Leaflet Better FileLayer +

+ +
+
+
+

Event Log

+

Event Type:

+
+
+
+
+
+
+ + + + map.on("bfl:layerloaderror", (e) => { + // Removing unwanted properties + const {layer, target, sourceTarget, ...data} = e; + + event_type.innerText = data.type; + + event_output.innerText = JSON.stringify(data, undefined, 2); + }); + + map.on("bfl:filenotsupported", (e) => { + // Removing unwanted properties + const {layer, target, sourceTarget, ...data} = e; + + event_type.innerText = data.type; + + event_output.innerText = JSON.stringify(data, undefined, 2); + }); + + map.on("bfl:layerisempty", (e) => { + // Removing unwanted properties + const {layer, target, sourceTarget, ...data} = e; + + event_type.innerText = data.type; + event_output.innerText = JSON.stringify(data, undefined, 2); + }); + + map.on("bfl:filesizelimit", (e) => { + // Removing unwanted properties + const {layer, target, sourceTarget, ...data} = e; + + event_type.innerText = data.type; + + event_output.innerText = JSON.stringify(data, undefined, 2); + }); + + diff --git a/example/reset.css b/example/reset.css new file mode 100644 index 0000000..64ad8e1 --- /dev/null +++ b/example/reset.css @@ -0,0 +1,53 @@ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +}