avances en plantillas

storage/public/dist/libs/star-rating.js/src/defaults.js

@@ -0,0 +1,12 @@
+export const defaults = {
+    classNames: {
+        active: 'gl-active',
+        base: 'gl-star-rating',
+        selected: 'gl-selected',
+    },
+    clearable: true,
+    maxStars: 10,
+    prebuilt: false,
+    stars: null,
+    tooltip: 'Select a Rating',
+};

storage/public/dist/libs/star-rating.js/src/helpers.js

@@ -0,0 +1,61 @@
+export const addRemoveClass = (el, bool, className) => {
+    el.classList[bool ? 'add' : 'remove'](className);
+}
+
+export const createSpanEl = (attributes) => {
+    const el = document.createElement('span');
+    attributes = attributes || {};
+    for (let key in attributes) {
+        el.setAttribute(key, attributes[key]);
+    }
+    return el;
+}
+
+export const inRange = (value, min, max) => {
+    return /^\d+$/.test(value) && min <= value && value <= max;
+}
+
+export const insertSpanEl = (el, after, attributes) => {
+    const newEl = createSpanEl(attributes);
+    el.parentNode.insertBefore(newEl, after ? el.nextSibling : el);
+    return newEl;
+}
+
+export const isEmpty = (el) => {
+    return null === el.getAttribute('value') || '' === el.value;
+}
+
+export const merge = (...args) => { // adapted from https://github.com/firstandthird/aug
+    const results = {};
+    args.forEach(prop => {
+        Object.keys(prop || {}).forEach(propName => {
+            if (args[0][propName] === undefined) return; // restrict keys to the defaults
+            const propValue = prop[propName];
+            if (type(propValue) === 'Object' && type(results[propName]) === 'Object') {
+                results[propName] = merge(results[propName], propValue);
+                return;
+            }
+            results[propName] = propValue;
+        });
+    });
+    return results;
+}
+
+export const type = (value) => {
+    return {}.toString.call(value).slice(8, -1);
+};
+
+export const values = (selectEl) => {
+    const values = [];
+    [].forEach.call(selectEl.options, (el) => {
+        const value = parseInt(el.value, 10) || 0;
+        if (value > 0) {
+            values.push({
+                index: el.index,
+                text: el.text,
+                value: value,
+            })
+        }
+    });
+    return values.sort((a, b) => a.value - b.value);
+}

storage/public/dist/libs/star-rating.js/src/index.css

@@ -0,0 +1,159 @@
+/**
+ * Star Rating
+ * @version: 4.3.1
+ * @author: Paul Ryley (http://geminilabs.io)
+ * @url: https://github.com/pryley/star-rating.js
+ * @license: MIT
+ */
+
+:root {
+    --gl-star-color: #fdd835;
+    --gl-star-color-inactive: #dcdce6;
+    --gl-star-empty: url('../img/star-empty.svg');
+    --gl-star-full: url('../img/star-full.svg');
+    --gl-star-size: 24px;
+    --gl-tooltip-background: rgba(17,17,17, .9);
+    --gl-tooltip-border-radius: 4px;
+    --gl-tooltip-color: #fff;
+    --gl-tooltip-font-size: 0.875rem;
+    --gl-tooltip-font-weight: 400;
+    --gl-tooltip-line-height: 1;
+    --gl-tooltip-margin: 12px;
+    --gl-tooltip-padding: .5em 1em;
+}
+
+[data-star-rating] > select {
+    appearance:  none;
+    clip-path: circle(1px at 0 0) !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    height: 1px !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    pointer-events: none;
+    position: absolute !important;
+    top: 0 !important;
+    visibility: visible !important;
+    white-space: nowrap !important;
+    width: 1px !important;
+}
+[data-star-rating] > select::before,
+[data-star-rating] > select::after {
+    display: none !important;
+}
+[data-star-rating].gl-star-rating--ltr > select {
+    left: 0 !important;
+}
+[data-star-rating].gl-star-rating--rtl > select {
+    right: 0 !important;
+}
+[data-star-rating] {
+    align-items: center;
+    display: flex;
+    position: relative;
+}
+.gl-star-rating:not([data-star-rating]) .gl-star-rating--stars {
+    display: none;
+}
+[data-star-rating] .gl-star-rating--stars {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    position: relative;
+}
+[data-star-rating] > select:focus + .gl-star-rating--stars span:first-child::before {
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    box-shadow: 0 0 0 3px -webkit-focus-ring-color;
+    box-shadow: 0 0 0 3px Highlight;
+    content: '';
+    display: block;
+    height: 100%;
+    outline: 1px solid transparent;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+}
+[data-star-rating] select[disabled] + .gl-star-rating--stars {
+    cursor: default;
+}
+[data-star-rating] .gl-star-rating--stars > span {
+    display: flex;
+    height: var(--gl-star-size);
+    margin: 0;
+    width: var(--gl-star-size);
+}
+[data-star-rating] .gl-star-rating--stars[aria-label]::before,
+[data-star-rating] .gl-star-rating--stars[aria-label]::after {
+    backface-visibility: hidden;
+    bottom: auto;
+    box-sizing: border-box;
+    left: 100%;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform-origin: top;
+    transform: translate3d(0,-50%,0);
+    white-space: nowrap;
+    z-index: 10;
+}
+[data-star-rating] .gl-star-rating--stars[aria-label]::before {
+    background: var(--gl-tooltip-background);
+    clip-path: path('M6 14.998c0-3-6-5.499-6-7.499S5.999 3 5.999 0L6 14.998z');
+    content: '';
+    height: 15px;
+    margin: 0 0 0 6px;
+    width: 6px;
+}
+[data-star-rating] .gl-star-rating--stars[aria-label]::after {
+    background: var(--gl-tooltip-background);
+    border-radius: var(--gl-tooltip-border-radius);
+    color: var(--gl-tooltip-color);
+    content: attr(aria-label);
+    font-size: var(--gl-tooltip-font-size);
+    font-weight: normal;
+    margin-left: var(--gl-tooltip-margin);
+    padding: var(--gl-tooltip-padding);
+    text-transform: none;
+}
+[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]::before,
+[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]::after {
+    left: auto;
+    right: 100%;
+}
+[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]::before {
+    transform: scaleX(-1) translate3d(0,-50%,0);
+    margin: 0 6px 0 0;
+}
+[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]::after {
+    margin-left: 0;
+    margin-right: var(--gl-tooltip-margin);
+}
+[data-star-rating] svg {
+    height: 100%;
+    width: 100%;
+}
+[data-star-rating] .gl-star-half {
+    fill: none;
+    stroke: none;
+}
+[data-star-rating] .gl-star-full {
+    fill: var(--gl-star-color-inactive);
+    stroke: var(--gl-star-color-inactive);
+    transition: fill 0.15s ease-in-out, stroke 0.15s ease-in-out;
+}
+[data-star-rating] .gl-active .gl-star-full {
+    fill: var(--gl-star-color);
+    stroke: var(--gl-star-color);
+}
+
+/* Compatibilty with v3 */
+.gl-star-rating--stars[class*=" s"] > span {
+    background-image: var(--gl-star-empty) !important;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 90%;
+}
+.gl-star-rating--stars[class*=" s"] > span.gl-active,
+.gl-star-rating--stars[class*=" s"] > span.gl-active.gl-selected {
+    background-image: var(--gl-star-full) !important;
+}

storage/public/dist/libs/star-rating.js/src/index.js

@@ -0,0 +1,66 @@
+/**!
+ * Star Rating
+ * @version: 4.3.1
+ * @author: Paul Ryley (http://geminilabs.io)
+ * @url: https://github.com/pryley/star-rating.js
+ * @license: MIT
+ */
+
+import { defaults } from './defaults'
+import { merge, type } from './helpers'
+import { Widget } from './widget'
+
+class StarRating {
+    constructor (selector, props) { // (HTMLSelectElement|NodeList|string, object):void
+        this.destroy = this.destroy.bind(this);
+        this.props = props;
+        this.rebuild = this.rebuild.bind(this);
+        this.selector = selector;
+        this.widgets = [];
+        this.build();
+    }
+
+    build() { // (HTMLSelectElement|NodeList|string, object):void
+        this.queryElements(this.selector).forEach(el => {
+            const options = merge(defaults, this.props, JSON.parse(el.getAttribute('data-options')));
+            if ('SELECT' === el.tagName && !el.widget) { // check for an existing Widget reference
+                if (!options.prebuilt && el.parentNode.classList.contains(options.classNames.base)) {
+                    this.unwrap(el);
+                }
+                this.widgets.push(new Widget(el, options));
+            }
+        });
+    }
+
+    destroy () { // ():void
+        this.widgets.forEach(widget => widget.destroy());
+        this.widgets = [];
+    }
+
+    queryElements (selector) { // (HTMLSelectElement|NodeList|string):array
+        if ('HTMLSelectElement' === type(selector)) {
+            return [selector];
+        }
+        if ('NodeList' === type(selector)) {
+            return [].slice.call(selector);
+        }
+        if ('String' === type(selector)) {
+            return [].slice.call(document.querySelectorAll(selector))
+        }
+        return []
+    }
+
+    rebuild () { // ():void
+        this.destroy();
+        this.build();
+    }
+
+    unwrap (el) {
+        const removeEl = el.parentNode;
+        const parentEl = removeEl.parentNode;
+        parentEl.insertBefore(el, removeEl);
+        parentEl.removeChild(removeEl);
+    }
+}
+
+export default StarRating

storage/public/dist/libs/star-rating.js/src/widget.js

@@ -0,0 +1,198 @@
+import { addRemoveClass, createSpanEl, inRange, insertSpanEl, isEmpty, values } from './helpers'
+import { supportsPassiveEvents } from 'detect-it'
+
+export class Widget {
+    constructor (el, props) { // (HTMLElement, object):void
+        this.direction = window.getComputedStyle(el, null).getPropertyValue('direction');
+        this.el = el;
+        this.events = {
+            change: this.onChange.bind(this),
+            keydown: this.onKeyDown.bind(this),
+            mousedown: this.onPointerDown.bind(this),
+            mouseleave: this.onPointerLeave.bind(this),
+            mousemove: this.onPointerMove.bind(this),
+            reset: this.onReset.bind(this),
+            touchend: this.onPointerDown.bind(this),
+            touchmove: this.onPointerMove.bind(this),
+        };
+        this.indexActive = null; // the active span index
+        this.indexSelected = null; // the selected span index
+        this.props = props;
+        this.tick = null;
+        this.ticking = false;
+        this.values = values(el);
+        this.widgetEl = null;
+        if (this.el.widget) {
+            this.el.widget.destroy(); // remove any stale event listeners
+        }
+        if (inRange(this.values.length, 1, this.props.maxStars)) {
+            this.build();
+        } else {
+            this.destroy();
+        }
+    }
+
+    build () { // ():void
+        this.destroy();
+        this.buildWidget();
+        this.selectValue((this.indexSelected = this.selected()), false); // set the initial value but do not trigger change event
+        this.handleEvents('add');
+        this.el.widget = this; // store a reference to this widget on the SELECT so that we can remove stale event listeners
+    }
+
+    buildWidget () { // ():void
+        let parentEl = null;
+        let widgetEl = null;
+        if (this.props.prebuilt) {
+            parentEl = this.el.parentNode
+            widgetEl = parentEl.querySelector('.' + this.props.classNames.base + '--stars')
+        }
+        if (null === widgetEl) {
+            parentEl = insertSpanEl(this.el, false, { class: this.props.classNames.base });
+            parentEl.appendChild(this.el);
+            widgetEl = insertSpanEl(this.el, true, { class: this.props.classNames.base + '--stars' });
+            this.values.forEach((item, index) => {
+                const el = createSpanEl({ 'data-index': index, 'data-value': item.value });
+                if ('function' === typeof this.props.stars) {
+                    this.props.stars.call(this, el, item, index);
+                }
+                [].forEach.call(el.children, el => el.style.pointerEvents = 'none');
+                widgetEl.innerHTML += el.outerHTML;
+            })
+        }
+        parentEl.dataset.starRating = '';
+        parentEl.classList.add(this.props.classNames.base + '--' + this.direction);
+        if (this.props.tooltip) {
+            widgetEl.setAttribute('role', 'tooltip');
+        }
+        this.widgetEl = widgetEl
+    }
+
+    changeIndexTo (index, force) { // (int):void
+        if (this.indexActive !== index || force) {
+            [].forEach.call(this.widgetEl.children, (el, i) => { // i starts at zero
+                addRemoveClass(el, i <= index, this.props.classNames.active);
+                addRemoveClass(el, i === this.indexSelected, this.props.classNames.selected);
+            });
+            this.widgetEl.setAttribute('data-rating', index + 1);
+            if ('function' !== typeof this.props.stars && !this.props.prebuilt) { // @v3 compat
+                this.widgetEl.classList.remove('s' + (10 * (this.indexActive + 1)));
+                this.widgetEl.classList.add('s' + (10 * (index + 1)));
+            }
+            if (this.props.tooltip) {
+                const label = index < 0 ? this.props.tooltip : this.values[index]?.text;
+                this.widgetEl.setAttribute('aria-label', label);
+            }
+            this.indexActive = index;
+        }
+        this.ticking = false;
+    }
+
+    destroy () { // ():void
+        this.indexActive = null; // the active span index
+        this.indexSelected = this.selected(); // the selected span index
+        const parentEl = this.el.parentNode;
+        if (parentEl.classList.contains(this.props.classNames.base)) {
+            if (this.props.prebuilt) {
+                this.widgetEl = parentEl.querySelector('.' + this.props.classNames.base + '--stars')
+                parentEl.classList.remove(this.props.classNames.base + '--' + this.direction);
+                delete parentEl.dataset.starRating
+            } else {
+                parentEl.parentNode.replaceChild(this.el, parentEl);
+            }
+            this.handleEvents('remove');
+        }
+        delete this.el.widget // remove the widget reference
+    }
+
+    eventListener (el, action, events, items) { // (HTMLElement, string, array, object):void
+        events.forEach(ev => el[action + 'EventListener'](ev, this.events[ev], items || false));
+    }
+
+    handleEvents (action) { // (string):void
+        const formEl = this.el.closest('form');
+        if (formEl && formEl.tagName === 'FORM') {
+            this.eventListener(formEl, action, ['reset']);
+        }
+        this.eventListener(this.el, action, ['change']); // always trigger the change event, even when SELECT is disabled
+        if ('add' === action && this.el.disabled) return;
+        this.eventListener(this.el, action, ['keydown']);
+        this.eventListener(this.widgetEl, action, ['mousedown', 'mouseleave', 'mousemove', 'touchend', 'touchmove'],
+            supportsPassiveEvents ? { passive: false } : false
+        );
+    }
+
+    indexFromEvent (ev) { // (MouseEvent|TouchEvent):void
+        const origin = ev.touches?.[0] || ev.changedTouches?.[0] || ev;
+        const el = document.elementFromPoint(origin.clientX, origin.clientY);
+        if (el.parentNode === this.widgetEl) {
+            return [].slice.call(el.parentNode.children).indexOf(el);
+        }
+        return this.indexActive;
+    }
+
+    onChange () { // ():void
+        this.changeIndexTo(this.selected(), true);
+    }
+
+    onKeyDown (ev) { // (KeyboardEvent):void
+        const key = ev.key.slice(5);
+        if (!~['Left', 'Right'].indexOf(key)) return;
+        ev.preventDefault();
+        let increment = key === 'Left' ? -1 : 1;
+        if (this.direction === 'rtl') {
+            increment *= -1;
+        }
+        const maxIndex = this.values.length - 1;
+        const minIndex = -1;
+        const index = Math.min(Math.max(this.selected() + increment, minIndex), maxIndex);
+        this.selectValue(index, true); // trigger change event
+    }
+
+    onPointerDown (ev) { // (MouseEvent|TouchEvent):void
+        ev.preventDefault();
+        // this.el.focus(); // highlight the rating field
+        let index = this.indexFromEvent(ev);
+        if (this.props.clearable && index === this.indexSelected) {
+            index = -1; // remove the value
+        }
+        this.selectValue(index, true); // trigger change event
+    }
+
+    onPointerLeave (ev) { // (MouseEvent):void
+        ev.preventDefault();
+        cancelAnimationFrame(this.tick);
+        requestAnimationFrame(() => this.changeIndexTo(this.indexSelected));
+    }
+
+    onPointerMove (ev) { // (MouseEvent|TouchEvent):void
+        ev.preventDefault();
+        if (!this.ticking) {
+            this.tick = requestAnimationFrame(() => this.changeIndexTo(this.indexFromEvent(ev)));
+            this.ticking = true;
+        }
+    }
+
+    onReset () { // ():void
+        const index = this.valueIndex(this.el.querySelector('[selected]')?.value)
+        this.selectValue(index || -1, false); // do not trigger change event
+    }
+
+    selected () { // ():int
+        return this.valueIndex(this.el.value); // get the selected span index
+    }
+
+    selectValue (index, triggerChangeEvent) { // (int, bool):void
+        this.el.value = this.values[index]?.value || ''; // first set the new value
+        this.indexSelected = this.selected(); // get the actual index from the selected value
+        if (false === triggerChangeEvent) {
+            this.changeIndexTo(this.selected(), true);
+        } else {
+            this.el.dispatchEvent(new Event('change'));
+        }
+    }
+
+    valueIndex (value) {
+        return this.values.findIndex(val => val.value === +value);
+    }
+}