diff --git a/c-button.css b/c-button.css index 7fc1857..a708dfb 100644 --- a/c-button.css +++ b/c-button.css @@ -1,30 +1,3 @@ -:host { - color: red; - --bg-color: red; - --blue-50: #8DCDFF; - --blue-100: #78C5FF; - --blue-200: #4FB3FF; - --blue-300: #27A1FF; - --blue-400: #008FFD; - --blue-500: #0078D4; - --blue-600: #00589C; - --blue-700: #003864; - --blue-800: #00192C; - --blue-900: #000000; - --blue-950: #000000; - --orange-50: #FFD4B8; - --orange-100: #FFC7A3; - --orange-200: #FFAE7A; - --orange-300: #FF9652; - --orange-400: #FF7D29; - --orange-500: #FF6400; - --orange-600: #C74E00; - --orange-700: #8F3800; - --orange-800: #572200; - --orange-900: #1F0C00; - --orange-950: #030100; -} - button { color: black; background-color: gray; diff --git a/index.html b/index.html index 1fb85d6..35ade06 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,37 @@ Webcomponent - tooltip @@ -58,7 +97,7 @@

Product carousel example

- +
Product name 1 - +
Product name 1 - +
Product name 1 - +
Product name 1 - +
Product name 1 - +
Product name 1 - - - - Lorem - - - - Add to cart - - - - Add to cart - +
+ + + Lorem + + + + Add to cart + + + + Add to cart + +
+ + +

+ Stars - rating +

+
+ + + + + + + + + +

With size

+ + + + +

With legend

+ + 5,0 + + +
+

Example 2 - render icon (?) with tooltip

@@ -183,13 +277,14 @@

Example 2 - render icon (?) with tooltip

Hotel reviews

-
- - - + + + + + diff --git a/popup.js b/popup.js index 293f37d..946373b 100644 --- a/popup.js +++ b/popup.js @@ -82,6 +82,15 @@ class PopupInfo extends HTMLElement { img { width: 1.2rem; } + .icon{ + width: 18px; + height:18px; + display: inline-block; + & img { + width: 18px; + height:18px; + } + } .icon:hover{ cursor: pointer; } diff --git a/src/stars/star-fill.svg b/src/stars/star-fill.svg new file mode 100644 index 0000000..664d119 --- /dev/null +++ b/src/stars/star-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/stars/star-outline.svg b/src/stars/star-outline.svg new file mode 100644 index 0000000..ef11c81 --- /dev/null +++ b/src/stars/star-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/stars/stars.css b/src/stars/stars.css new file mode 100644 index 0000000..901a952 --- /dev/null +++ b/src/stars/stars.css @@ -0,0 +1,49 @@ +:host { + display: inline-block; + line-height: 1; + height: var(--size); +} + + +svg { + display: block; + height: 100%; + width: 100%; +} + +slot.stars-slot { + margin-right: 0.5rem; + font-weight: bold; + display: inline-flex; + font-size: calc(var(--size) * 1) +} + +.stars-wrapper { + position: relative; + display: inline-flex; + align-items: center; + + justify-content: center; + font-size: var(--size); +} + +.stars { + display: inline-flex; + gap: 0.25rem; + color: #CED5D9; +} + +.star { + width: 1em; + height: 1em; +} + + +.star--filled { + color: #FFC40D; +} + + +c-stars:not(:defined)>template[shadowrootmode]~* { + display: none; +} \ No newline at end of file diff --git a/src/stars/stars.js b/src/stars/stars.js new file mode 100644 index 0000000..6d534d9 --- /dev/null +++ b/src/stars/stars.js @@ -0,0 +1,66 @@ +class cStars extends HTMLElement { + constructor() { + self = super(); + + // Detect whether we have SSR content already: + if (this.shadowRoot) { + // A Declarative Shadow Root exists! + // wire up event listeners, references, etc.: + const button = this.shadowRoot.querySelector('button'); + // button.addEventListener('click', this._handleClick.bind(this)); + } else { + // A Declarative Shadow Root doesn't exist. + // Create a new shadow root and populate it: + const shadow = this.attachShadow({ mode: 'open' }); + shadow.innerHTML = ``; + shadow.firstChild.addEventListener('click', this._handleClick.bind(this)); + } + this.handleAnalytics = this._sendAnalytics.bind(this); + } + _handleClick() { + console.log('clicked'); + this._sendAnalytics('toggle'); + } + _sendAnalytics(message) { + setTimeout(() => { + console.log('Sending analytics data...', message); + }, 500); + } + + connectedCallback() { + console.log('Custom c-stars added to page.'); + + let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute('width', '16'); + svg.setAttribute('height', '16'); + svg.setAttribute('fill', 'currentColor'); + svg.setAttribute('class', 'bi bi-star-fill'); + svg.setAttribute('viewBox', '0 0 16 16'); + svg.setAttribute('part', 'svg'); + + let path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + path.setAttribute('d', 'M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'); + + svg.appendChild(path); + + const stars_value = this.getAttribute('stars'); + const stars_elem = this.shadowRoot.querySelector('.stars'); + for (let i = 0; i < 5; i++) { + const star_wrapper = document.createElement('div'); + star_wrapper.setAttribute('class', 'star-wrapper'); + star_wrapper.setAttribute('class', 'star'); + if (i + 1 <= stars_value) { + star_wrapper.classList.add('class', 'star--filled'); + }; + star_wrapper.appendChild(svg.cloneNode(true)); + stars_elem.append(star_wrapper); + } + } + disconnectedCallback() { + window.removeEventListener('click', this._handleClick); + console.log('Custom c-stars removed from page.'); + + } +} + +customElements.define('c-stars', cStars); \ No newline at end of file