From 8f476b81c55093571c5f416470c4fe60eaa543bf Mon Sep 17 00:00:00 2001 From: Bartosz Cylwik Date: Wed, 5 Jul 2023 08:05:12 +0200 Subject: [PATCH 1/2] Add rating component and update rating pages --- demo/sites/components/rating.html | 1540 +++++++-- .../docs/standard/components/rating/a-ss.html | 18 + .../docs/standard/components/rating/a.html | 510 +++ .../standard/components/rating/index-js.html | 38 + .../standard/components/rating/index-ss.html | 31 +- .../standard/components/rating/index.html | 2803 ++++++++++++++--- src/js/autoinit/index.js | 17 +- src/js/components/rating.js | 350 ++ src/js/index.es.js | 2 + src/js/index.umd.js | 3 + 10 files changed, 4559 insertions(+), 753 deletions(-) create mode 100644 site/content/docs/standard/components/rating/a-ss.html create mode 100644 site/content/docs/standard/components/rating/a.html create mode 100644 site/content/docs/standard/components/rating/index-js.html create mode 100644 src/js/components/rating.js diff --git a/demo/sites/components/rating.html b/demo/sites/components/rating.html index 0583bf0c8..b3b534664 100644 --- a/demo/sites/components/rating.html +++ b/demo/sites/components/rating.html @@ -5,15 +5,14 @@ - Album example · Bootstrap v5.1 + Rating example · Bootstrap v5.1 - - - - + + href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" + rel="stylesheet" /> + + @@ -45,334 +44,1164 @@

- - - - -
-
-
- - - -
-
-
- - - -
-
-
- - +

+ Rating +

+ +

Basic example

+ +
+ +
+ +
+
+
+ +

Read only

+ +
+ +
+ +
+
+
+ +

Events

+ +
+ +
+ +
+
+
+ +

Custom text

+ +
+ +
+ +
+
+
+ +

Custom icons

+ +
+ +
+ +
+
+
+ +

Number of icons

+ +
+ +
+ +
+
+
+ +

+ Icons custom color +

+ +
+ +
+ +
+
+
+ +

Dynamic icons

+
+ +
+ +
+
+
+ +

+ Styling active elements +

+ +
+ +
+ +
+
+
+ +

+ Popover implementation example +

+ +
+ +
+ +
+
+
+ +

+ Get selected value +

+ +
+ +
+ +
+
+



@@ -381,13 +1210,50 @@ - - - + diff --git a/site/content/docs/standard/components/rating/a-ss.html b/site/content/docs/standard/components/rating/a-ss.html new file mode 100644 index 000000000..3a1053ecf --- /dev/null +++ b/site/content/docs/standard/components/rating/a-ss.html @@ -0,0 +1,18 @@ +--- +--- + +
  • + Import +
    • +
  • + Usage +
    • +
  • + Options +
    • +
  • + Methods +
    • +
  • + Events +
    • diff --git a/site/content/docs/standard/components/rating/a.html b/site/content/docs/standard/components/rating/a.html new file mode 100644 index 000000000..5a9d5db0a --- /dev/null +++ b/site/content/docs/standard/components/rating/a.html @@ -0,0 +1,510 @@ +--- +--- + + +
    + +
    + +

    + Import +

    + +

    + Importing components depends on how your application works. If you intend + to use the Tailwind Elements ES format, you must first import + the component and then initialize it with the initTE method. + If you are going to use the UMD format, just import the + tw-elements package. +

    + + + {{< twsnippet/no-demo id="api-example41" >}} + + +
    + + +
    + + +
    + +

    + Usage +

    + +

    Via data attributes

    + +

    + Elements with the + data-te-toggle="rating" + attribute will be automatically initialized - you can set all available + options with data attributes. For ES format, you must first import and + call the initTE method. +

    + + + {{< twsnippet/no-demo id="api-example1" >}} + + + +

    Via JavaScript

    + +

    + You can access an instance from your Javascript code, by using the + getInstance static + method of the Select class - it allows making use of all the public + methods listed in the + Methods section. +

    + + + {{< twsnippet/no-demo id="api-example4" >}} + + + +
    + +
    + + +
    + +

    + Options +

    + +

    + Options can be passed via data attributes or JavaScript. For data + attributes, append the option name to + data-te-, as in + data-te-value="1". +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Name + + Type + + Default + Description
    + active + + string + + fill-current + + Changes the classes added to the active rating elements +
    + after + + string + + - + + Sets a custom text after the icon +
    + before + + string + + - + + Sets a custom text before the icon +
    + dynamic + + boolean + + false + + Dynamically change previous icons to the currently + selected/hovered icon +
    + readonly + + Boolean + + false + + Disable hover, click and keypress events +
    + tooltip + + String + + "top" + + Sets tooltip position. Available directions are: + top, right, bottom, left +
    + value + + string | number + + - + + Sets default rating value +
    +
    +
    +
    +
    +
    + + +
    + + +
    + +

    + Methods +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Method + + Description + Example
    + dispose + + Removes a Rating instance + + myRating.dispose() +
    + getInstance + + Static method which allows you to get the rating instance + associated to a DOM element. + + Rating.getInstance(myRatingEl) +
    + getOrCreateInstance + + Static method which returns the rating instance associated + to a DOM element or create a new one in case it wasn't + initialized. + + Rating.getOrCreateInstance(myRatingEl) +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example5" >}} + + + +
    + +
    + + +
    + +

    + Events +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + +
    + Event type + Description
    + onSelect.te.rating + + + This event fires immediately when you clicked on icon. The + clicked element is available as the + target property of the event, and selected + value as the value property. +
    + onHover.te.rating + + This event fires immediately when you hovered on icon. The + hovered element is available as the + target property of the event, and hovered value + as the value property. +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example6" >}} + + + +
    + +
    diff --git a/site/content/docs/standard/components/rating/index-js.html b/site/content/docs/standard/components/rating/index-js.html new file mode 100644 index 000000000..a3efde376 --- /dev/null +++ b/site/content/docs/standard/components/rating/index-js.html @@ -0,0 +1,38 @@ +--- +--- + + diff --git a/site/content/docs/standard/components/rating/index-ss.html b/site/content/docs/standard/components/rating/index-ss.html index 5a2fd3d1e..7e7d2277b 100644 --- a/site/content/docs/standard/components/rating/index-ss.html +++ b/site/content/docs/standard/components/rating/index-ss.html @@ -4,11 +4,36 @@
  • Basic example
    • -
  • Filled
  • - Custom icons + Read only +
    • +
  • + Events +
    • +
  • + Custom text +
    • +
  • + Custom icons +
    • +
  • + Number of icons +
    • +
  • + Icons colors +
    • +
  • + Dynamic icons +
    • +
  • + Styling active elements +
    • +
  • + Popover implementation +
    • +
  • + Get selected value
    • -
  • Emoji
  • Related resources
    • diff --git a/site/content/docs/standard/components/rating/index.html b/site/content/docs/standard/components/rating/index.html index 9af65ed28..dc0d8e67d 100644 --- a/site/content/docs/standard/components/rating/index.html +++ b/site/content/docs/standard/components/rating/index.html @@ -12,6 +12,7 @@ menu: components: name: "Rating" +autoinits: "Rating" --- @@ -21,7 +22,7 @@ class="mb-5 mt-0 text-3xl font-semibold leading-normal" id="basic" data-te-spy-item> - Basic + Basic example

    @@ -30,164 +31,216 @@

    - Use the following code to create a rating with unfilled stars. + You can automatically initialize the rating component using + data-te-toggle="rating"

    {{< twsnippet/demo id="example1">}} - - {{< /twsnippet/demo >}} - - - - +

    - Filled + Read only

    +

    - Use data-prefix=fas to fill in empty rating icons. + If you want to use a rating to show the score you can use the + readonly option

    {{< twsnippet/demo id="example2">}} - - {{< /twsnippet/demo >}} - - - - + - +

    - Custom icons + Events

    +

    - Use custom - icons - such as hearts for rating. + Rating emits events after click and hover element. Check the browser console + to test it.

    {{< twsnippet/demo id="example3">}} -
      -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    - {{< /twsnippet/demo >}} - - - - + - +

    - Emoji + Custom text

    +

    - Use emoji to well represent the type of emotion of the user. + You can add extra text before or after the icon using + data-te-after and data-te-before

    {{< twsnippet/demo id="example4">}} -
      -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    • - - - -
      • -
    +
    +
      +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    +
    {{< /twsnippet/demo >}} +
    + + + +
    + +

    + Custom icons +

    + + +

    + You can use other icons easily. Just change the svg code inside the spans + with data-te-rating-icon-ref attribute. +

    + + + {{< twsnippet/demo id="example5">}} +
    +
      +
    • + + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor"> + stroke-linecap="round" + stroke-linejoin="round" + d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /> -
      • -
    • + +
      • +
    • + + stroke="currentColor"> + d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /> -
      • -
    • + +
      • +
    • + + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor"> + stroke-linecap="round" + stroke-linejoin="round" + d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /> -
      • -
    • + +
      • +
    • + + stroke="currentColor"> + d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /> -
      • -
    • + +
      • +
    • + + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor"> + stroke-linecap="round" + stroke-linejoin="round" + d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /> + +
      • +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Number of icons +

    + + +

    + If you want to display more or less icons in your rating, all you have to do + is add as many icons as you like inside the <ul> tag. +

    + + + {{< twsnippet/demo id="example6">}} +
    +
      +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Icons custom color +

    + + +

    + If you want to set your own icon color for each rating level, you can change + the text class in the + data-te-rating-icon-ref element. +

    + + + {{< twsnippet/demo id="example7">}} +
    +
      +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Dynamic icons +

    + + +

    + You can make your rating more dynamic by adding + data-te-dynamic="true" +

    + + + {{< twsnippet/demo id="example8">}} +
    +
      +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Styling active elements +

    + + +

    + You can use data-te-active attribute to change the classes + added to the selected elements +

    + + + {{< twsnippet/demo id="example9">}} +
    +
      +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Popover implementation example +

    + + +

    Rating allows you to easily add popover functionality

    + + + {{< twsnippet/demo id="example10">}} +
    +
      +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Get selected value +

    + + +

    + To get the value selected by the user just listen for the + onSelect.te.rating event that returns a value. Open the browser + console to test how it's work +

    + + + {{< twsnippet/demo id="example11">}} +
    +
      +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    • + + + + + +
      • +
    +
    + {{< /twsnippet/demo >}} + + +
    - +
    diff --git a/src/js/autoinit/index.js b/src/js/autoinit/index.js index 2a0f3ae23..040141ab3 100644 --- a/src/js/autoinit/index.js +++ b/src/js/autoinit/index.js @@ -61,6 +61,11 @@ const defaultInitSelectors = { selector: "[data-te-perfect-scrollbar-init]", isToggler: false, }, + rating: { + name: "Rating", + selector: "[data-te-rating-init]", + isToggler: false, + }, scrollspy: { name: "ScrollSpy", selector: "[data-te-spy='scroll']", @@ -91,12 +96,6 @@ const defaultInitSelectors = { selector: "[data-te-toast-init]", isToggler: false, }, - tooltip: { - name: "Tooltip", - selector: "[data-te-toggle='tooltip']", - isToggler: false, - callback: tooltipsCallback, - }, // advancedInits chart: { @@ -150,6 +149,12 @@ const defaultInitSelectors = { isToggler: true, callback: tabCallback, }, + tooltip: { + name: "Tooltip", + selector: "[data-te-toggle='tooltip']", + isToggler: false, + callback: tooltipsCallback, + }, popover: { name: "Popover", selector: "[data-te-toggle='popover']", diff --git a/src/js/components/rating.js b/src/js/components/rating.js new file mode 100644 index 000000000..1e4b3d4e4 --- /dev/null +++ b/src/js/components/rating.js @@ -0,0 +1,350 @@ +/* +-------------------------------------------------------------------------- +Tailwind Elements is an open-source UI kit of advanced components for TailwindCSS. +Copyright © 2023 MDBootstrap.com + +Unless a custom, individually assigned license has been granted, this program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. +In addition, a custom license may be available upon request, subject to the terms and conditions of that license. Please contact tailwind@mdbootstrap.com for more information on obtaining a custom license. +This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. +-------------------------------------------------------------------------- +*/ + +import { typeCheckConfig } from "../util/index"; +import Data from "../dom/data"; +import EventHandler from "../dom/event-handler"; +import SelectorEngine from "../dom/selector-engine"; +import Manipulator from "../dom/manipulator"; +import Tooltip from "./tooltip"; + +/** + * ------------------------------------------------------------------------ + * Constants + * ------------------------------------------------------------------------ + */ + +const NAME = "rating"; +const DATA_KEY = "te.rating"; +const DATA_INIT = "data-te-rating-init"; +const SELECTOR_ICON = "[data-te-rating-icon-ref]"; +const EVENT_KEY = `.${DATA_KEY}`; + +const ARROW_LEFT_KEY = "ArrowLeft"; +const ARROW_RIGHT_KEY = "ArrowRight"; + +const DefaultType = { + tooltip: "string", + value: "(string|number)", + readonly: "boolean", + after: "string", + before: "string", + dynamic: "boolean", + active: "string", +}; + +const Default = { + tooltip: "top", + value: "", + readonly: false, + after: "", + before: "", + dynamic: false, + active: "fill-current", +}; + +const EVENT_SELECT = `onSelect${EVENT_KEY}`; +const EVENT_HOVER = `onHover${EVENT_KEY}`; +const EVENT_KEYUP = `keyup${EVENT_KEY}`; +const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`; +const EVENT_KEYDOWN = `keydown${EVENT_KEY}`; +const EVENT_MOUSEDOWN = `mousedown${EVENT_KEY}`; + +/** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ + +class Rating { + constructor(element, options) { + this._element = element; + this._icons = SelectorEngine.find(SELECTOR_ICON, this._element); + this._options = this._getConfig(options); + this._index = -1; + this._savedIndex = null; + this._originalClassList = []; + this._originalIcons = []; + this._fn = {}; + this._tooltips = []; + + if (this._element) { + Data.setData(element, DATA_KEY, this); + this._init(); + } + } + + // Getters + static get NAME() { + return NAME; + } + + dispose() { + Data.removeData(this._element, DATA_KEY); + + if (!this._options.readonly) { + EventHandler.off(this._element, EVENT_KEYUP); + EventHandler.off(this._element, EVENT_FOCUSOUT); + EventHandler.off(this._element, EVENT_KEYDOWN); + this._element.removeEventListener("mouseleave", this._fn.mouseleave); + + this._icons.forEach((el, i) => { + EventHandler.off(el, EVENT_MOUSEDOWN); + el.removeEventListener("mouseenter", this._fn.mouseenter[i]); + Manipulator.removeClass(el, "cursor-pointer"); + }); + + this._tooltips.forEach((el) => { + el._element.removeAttribute(DATA_INIT); + el.dispose(); + }); + + this._icons.removeAttribute("tabIndex"); + } + + this._element = null; + } + + // Private + _init() { + if (!this._options.readonly) { + this._bindMouseEnter(); + this._bindMouseLeave(); + this._bindMouseDown(); + this._bindKeyDown(); + this._bindKeyUp(); + this._bindFocusLost(); + + this._icons.forEach((el) => { + Manipulator.addClass(el, "cursor-pointer"); + }); + } + + if (this._options.dynamic) { + this._saveOriginalClassList(); + this._saveOriginalIcons(); + } + + this._setCustomText(); + this._setToolTips(); + + if (this._options.value) { + this._index = this._options.value - 1; + this._updateRating(this._index); + } + } + + _getConfig(config) { + const dataAttributes = Manipulator.getDataAttributes(this._element); + + config = { + ...Default, + ...dataAttributes, + ...config, + }; + + typeCheckConfig(NAME, config, DefaultType); + + return config; + } + + _bindMouseEnter() { + this._fn.mouseenter = []; + this._icons.forEach((el, i) => { + // EventHandler.on changes mouseenter to mouseover - use addEventListener + el.addEventListener( + "mouseenter", + // this._fn.mouseenter[i] is needed to create reference and unpin events after call dispose + // prettier-ignore + this._fn.mouseenter[i] = (e) => { + this._index = this._icons.indexOf(e.target); + this._updateRating(this._index); + this._triggerEvents(el, EVENT_HOVER); + // prettier-ignore + } + ); + }); + } + + _bindMouseLeave() { + // EventHandler.on changes mouseleave to mouseout - use addEventListener + this._element.addEventListener( + "mouseleave", + // this._fn.mouseleave is needed to create reference and unpin events after call dispose + // prettier-ignore + this._fn.mouseleave = () => { + if (this._savedIndex !== null) { + this._updateRating(this._savedIndex); + this._index = this._savedIndex; + } else if (this._options.value) { + this._updateRating(this._options.value - 1); + this._index = this._options.value - 1 + } else { + this._index = -1; + this._clearRating(); + } + // prettier-ignore + } + ); + } + + _bindMouseDown() { + this._icons.forEach((el) => { + EventHandler.on(el, EVENT_MOUSEDOWN, () => { + this._setElementOutline("none"); + this._savedIndex = this._index; + this._triggerEvents(el, EVENT_SELECT); + }); + }); + } + + _bindKeyDown() { + this._element.tabIndex = 0; + EventHandler.on(this._element, EVENT_KEYDOWN, (e) => + this._updateAfterKeyDown(e) + ); + } + + _bindKeyUp() { + EventHandler.on(this._element, EVENT_KEYUP, () => + this._setElementOutline("auto") + ); + } + + _bindFocusLost() { + EventHandler.on(this._element, EVENT_FOCUSOUT, () => + this._setElementOutline("none") + ); + } + + _setElementOutline(value) { + this._element.style.outline = value; + } + + _triggerEvents(el, event) { + EventHandler.trigger(el, event, { + value: this._index + 1, + }); + } + + _updateAfterKeyDown(e) { + const maxIndex = this._icons.length - 1; + const indexBeforeChange = this._index; + + if (e.key === ARROW_RIGHT_KEY && this._index < maxIndex) { + this._index += 1; + } + + if (e.key === ARROW_LEFT_KEY && this._index > -1) { + this._index -= 1; + } + + if (indexBeforeChange !== this._index) { + this._savedIndex = this._index; + this._updateRating(this._savedIndex); + this._triggerEvents(this._icons[this._savedIndex], EVENT_SELECT); + } + } + + _updateRating(index) { + this._clearRating(); + + if (this._options.dynamic) { + this._restoreOriginalIcon(index); + } + + this._icons.forEach((el, i) => { + if (i <= index) { + Manipulator.addClass(el.querySelector("svg"), this._options.active); + } + }); + } + + _clearRating() { + this._icons.forEach((el, i) => { + const element = el.querySelector("svg"); + if (this._options.dynamic) { + el.classList = this._originalClassList[i]; + element.innerHTML = this._originalIcons[i]; + } + Manipulator.removeClass(element, this._options.active); + }); + } + + _setToolTips() { + this._icons.forEach((el, i) => { + const hasOwnTooltips = Manipulator.getDataAttribute(el, "toggle"); + + if (el.title && !hasOwnTooltips) { + Manipulator.setDataAttribute(el, "toggle", "tooltip"); + this._tooltips[i] = new Tooltip(el, { + placement: this._options.tooltip, + }); + } + }); + } + + _setCustomText() { + this._icons.forEach((el) => { + const after = Manipulator.getDataAttribute(el, "after"); + const before = Manipulator.getDataAttribute(el, "before"); + + if (after) { + el.insertAdjacentHTML("afterEnd", after); + } + + if (before) { + el.insertAdjacentHTML("beforeBegin", before); + } + }); + } + + _saveOriginalClassList() { + this._icons.forEach((el) => { + const classList = el.classList.value; + this._originalClassList.push(classList); + }); + } + + _saveOriginalIcons() { + this._icons.forEach((el) => { + const svgHtml = el.querySelector("svg").innerHTML; + this._originalIcons.push(svgHtml); + }); + } + + _restoreOriginalIcon(index) { + const classList = this._originalClassList[index]; + const icon = this._originalIcons[index]; + this._icons.forEach((el, i) => { + if (i <= index) { + const element = el.querySelector("svg"); + element.innerHTML = icon; + el.classList = classList; + } + }); + } + + // Static + + static getInstance(element) { + return Data.getData(element, DATA_KEY); + } + + static getOrCreateInstance(element, config = {}) { + return ( + this.getInstance(element) || + new this(element, typeof config === "object" ? config : null) + ); + } +} + +export default Rating; diff --git a/src/js/index.es.js b/src/js/index.es.js index 206d4aab1..6b19074a9 100644 --- a/src/js/index.es.js +++ b/src/js/index.es.js @@ -33,6 +33,7 @@ import ChipsInput from "./components/chips"; import Chip from "./components/chips/chip"; import Chart from "./data/chart/charts"; import PerfectScrollbar from "./methods/perfect-scrollbar"; +import Rating from "./components/rating"; import initTE from "./autoinit/index"; export { @@ -60,5 +61,6 @@ export { Input, Chart, PerfectScrollbar, + Rating, initTE, }; diff --git a/src/js/index.umd.js b/src/js/index.umd.js index f40dd29b4..e0751ae3b 100644 --- a/src/js/index.umd.js +++ b/src/js/index.umd.js @@ -33,6 +33,7 @@ import ChipsInput from "./components/chips"; import Chip from "./components/chips/chip"; import Chart from "./data/chart/charts"; import PerfectScrollbar from "./methods/perfect-scrollbar"; +import Rating from "./components/rating"; import initTE from "./autoinit/index"; const te = { @@ -59,6 +60,7 @@ const te = { Stepper, Input, PerfectScrollbar, + Rating, Chart, }; @@ -89,5 +91,6 @@ export { Input, Chart, PerfectScrollbar, + Rating, initTE, }; From 5798417407fcdba5f95a51374be83c34a2060a05 Mon Sep 17 00:00:00 2001 From: Bartosz Cylwik Date: Wed, 5 Jul 2023 09:21:56 +0200 Subject: [PATCH 2/2] Update rating init via data attributes info --- site/content/docs/standard/components/rating/a.html | 4 +--- site/content/docs/standard/components/rating/index.html | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/site/content/docs/standard/components/rating/a.html b/site/content/docs/standard/components/rating/a.html index 5a9d5db0a..ab214d551 100644 --- a/site/content/docs/standard/components/rating/a.html +++ b/site/content/docs/standard/components/rating/a.html @@ -58,9 +58,7 @@

    Via data attributes

    Elements with the - data-te-toggle="rating" + data-te-rating-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTE method. diff --git a/site/content/docs/standard/components/rating/index.html b/site/content/docs/standard/components/rating/index.html index dc0d8e67d..e8eca6e64 100644 --- a/site/content/docs/standard/components/rating/index.html +++ b/site/content/docs/standard/components/rating/index.html @@ -32,7 +32,7 @@

    You can automatically initialize the rating component using - data-te-toggle="rating" + data-te-rating-init