From 847178dd7933146c139062f5f3867981a1de126e Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Wed, 17 Jul 2024 19:37:13 +0200 Subject: [PATCH 1/3] feat: Icons as web components, example --- src/alpaca-map-icon.js | 69 ++++++++++++++++++++++++++++++++++++++++ src/alpaca-map-marker.js | 17 +++------- 2 files changed, 73 insertions(+), 13 deletions(-) create mode 100644 src/alpaca-map-icon.js diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js new file mode 100644 index 0000000..fa93db0 --- /dev/null +++ b/src/alpaca-map-icon.js @@ -0,0 +1,69 @@ +import { LitElement, html, css, svg } from "lit"; + +export default class AlpacaMapIcon extends LitElement { + static properties = { + icon: { type: String }, + }; + + static styles = [ + css` + .icon { + width: 1em; + height: 1em; + vertical-align: -0.125em; + } + + .private { + fill: var(--private-farm); + } + + .public { + fill: var(--public-farm); + } + `, + ]; + + constructor() { + super(); + this.icon; + } + + // When element is connected to the DOM connectedCallback() is called. + // This is needed in order to know the value of this.key which is passed in from the attribute + + connectedCallback() { + super.connectedCallback(); + } + + _iconKey() { + const path = svg``; + + return html`${path}`; + } + + _iconStore() { + const path = svg``; + + return html`${path}`; + } + + render() { + let icon; + switch (this.icon) { + case "key": + icon = this._iconKey(); + break; + case "store": + icon = this._iconStore(); + break; + default: + return ""; + } + + return icon; + } +} + +if (!customElements.get("alpaca-map-icon")) { + customElements.define("alpaca-map-icon", AlpacaMapIcon); +} diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index d26daa1..06264e5 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -1,5 +1,6 @@ import { LitElement, html, css } from "lit"; import { iconStyles, iconHouseFlag, iconKey } from "./svg-icons"; +import "./alpaca-map-icon"; export default class AlpacaMapMarker extends LitElement { static properties = { @@ -107,14 +108,6 @@ export default class AlpacaMapMarker extends LitElement { .farm.public::after { border-top: 9px solid var(--public-farm); } - - .farm.private .icon svg { - fill: var(--private-farm); - } - - .farm.public .icon svg { - fill: var(--public-farm); - } `, ]; @@ -139,11 +132,9 @@ export default class AlpacaMapMarker extends LitElement { render() { return html`
-
- ${this.category === "private" - ? iconKey().htmlObject - : iconHouseFlag().htmlObject} -
+
${this.count} 🦙
From 8a79ce4418c76a77e9e8d8ea1075f5c7f748c59a Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Wed, 17 Jul 2024 19:42:24 +0200 Subject: [PATCH 2/3] feat: Icon house flag as web component --- src/alpaca-map-icon.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js index fa93db0..fd12683 100644 --- a/src/alpaca-map-icon.js +++ b/src/alpaca-map-icon.js @@ -35,6 +35,12 @@ export default class AlpacaMapIcon extends LitElement { super.connectedCallback(); } + _iconHouseFlag() { + const path = svg``; + + return html`${path}`; + } + _iconKey() { const path = svg``; @@ -50,6 +56,9 @@ export default class AlpacaMapIcon extends LitElement { render() { let icon; switch (this.icon) { + case "houseFlag": + icon = this._iconHouseFlag(); + break; case "key": icon = this._iconKey(); break; From f06735f435ae4233f2de123c37054163758e613d Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Mon, 12 Aug 2024 14:25:29 +0200 Subject: [PATCH 3/3] feat: Rest of icons as web component. Styles in one place. --- src/alpaca-map-icon.js | 62 +++++++++++++++++++++- src/alpaca-map-marker.js | 2 - src/alpaca-map.js | 50 +++++++----------- src/svg-icons.js | 108 --------------------------------------- 4 files changed, 78 insertions(+), 144 deletions(-) delete mode 100644 src/svg-icons.js diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js index fd12683..f974179 100644 --- a/src/alpaca-map-icon.js +++ b/src/alpaca-map-icon.js @@ -10,7 +10,11 @@ export default class AlpacaMapIcon extends LitElement { .icon { width: 1em; height: 1em; - vertical-align: -0.125em; + + font-size: 1.5em; + fill: currentcolor; + + padding: 0 0.1em 0 0.1em; } .private { @@ -35,6 +39,24 @@ export default class AlpacaMapIcon extends LitElement { super.connectedCallback(); } + _iconBed() { + const path = svg``; + + return html`${path}`; + } + + _iconCalendarCheck() { + const path = svg``; + + return html`${path}`; + } + + _iconHandshake() { + const path = svg``; + + return html`${path}`; + } + _iconHouseFlag() { const path = svg``; @@ -47,21 +69,57 @@ export default class AlpacaMapIcon extends LitElement { return html`${path}`; } + _iconMars() { + const path = svg``; + + return html`${path}`; + } + + _iconPersonHiking() { + const path = svg``; + + return html`${path}`; + } + + _iconStore() { + const path = svg``; + + return html`${path}`; + } + _iconStore() { const path = svg``; - return html`${path}`; + return html`${path}`; } render() { let icon; switch (this.icon) { + case "bed": + icon = this._iconBed(); + break; + case "calendarCheck": + icon = this._iconCalendarCheck(); + break; + case "handShake": + icon = this._iconHandshake(); + break; case "houseFlag": icon = this._iconHouseFlag(); break; case "key": icon = this._iconKey(); break; + case "mars": + icon = this._iconMars(); + break; + case "personHiking": + icon = this._iconPersonHiking(); + break; + case "store": + icon = this._iconStore(); + break; case "store": icon = this._iconStore(); break; diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 06264e5..cb346c6 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -1,5 +1,4 @@ import { LitElement, html, css } from "lit"; -import { iconStyles, iconHouseFlag, iconKey } from "./svg-icons"; import "./alpaca-map-icon"; export default class AlpacaMapMarker extends LitElement { @@ -23,7 +22,6 @@ export default class AlpacaMapMarker extends LitElement { }; static styles = [ - iconStyles, css` /********* Farm styles in unhighlighted state *********/ /* Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */ diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 1584b9e..d4759db 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -3,18 +3,8 @@ import { LitElement, html, css } from "lit"; import { MarkerClusterer } from "@googlemaps/markerclusterer"; import STYLED_MAP_TYPE from "./styles-map"; import stylesGoogle from "./styles-google"; -import { - iconStyles, - iconBed, - iconCalendarCheck, - iconHandshake, - iconHouseFlag, - iconKey, - iconMars, - iconPersonHiking, - iconStore, -} from "./svg-icons"; import "./alpaca-map-marker"; +import "./alpaca-map-icon"; export default class AlpacaMap extends LitElement { static properties = { @@ -25,7 +15,6 @@ export default class AlpacaMap extends LitElement { static styles = [ stylesGoogle, - iconStyles, css` /********* Overall layout *********/ @@ -155,18 +144,6 @@ export default class AlpacaMap extends LitElement { justify-content: center; } - .icon { - padding: 0 0.1em 0 0.1em; - } - - svg { - font-size: 1.5em; - - path { - fill: currentcolor; - } - } - input[type="checkbox"] { margin: 0em 0.4em 0em 0.1em; width: 1.5em; @@ -406,21 +383,24 @@ export default class AlpacaMap extends LitElement { Public + farms Private + farms Alpaca + sales @@ -431,20 +411,24 @@ export default class AlpacaMap extends LitElement { name="alpacaWalking" /> Alpaca + walking Bookable - + @@ -454,14 +438,16 @@ export default class AlpacaMap extends LitElement { name="overnightStay" /> Overnight + stay Stud + services
diff --git a/src/svg-icons.js b/src/svg-icons.js deleted file mode 100644 index 4d930ba..0000000 --- a/src/svg-icons.js +++ /dev/null @@ -1,108 +0,0 @@ -import { css, svg, html } from "lit"; -import { unsafeSVG } from "lit/directives/unsafe-svg.js"; /* This is safe since this is duplicating internal known markup, not markup from user */ - -export const iconStyles = [ - css` - .icon { - width: 1em; - height: 1em; - vertical-align: -0.125em; - } - `, -]; - -export const iconBed = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconCalendarCheck = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconHandshake = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconHouseFlag = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconKey = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconMars = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconPersonHiking = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconStore = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const toSVGString = (path) => { - return `${path}`; -}; - -export const toHTMLObject = (svgFragment) => { - return html`${svgFragment}`; -};