/** * Star Ratings (js) */ 'use strict'; document.addEventListener('DOMContentLoaded', function (e) { const basicRatings = document.querySelector('.basic-ratings'), readOnlyRatings = document.querySelector('.read-only-ratings'), customSvg = document.querySelector('.custom-svg-ratings'), halfStar = document.querySelector('.half-star-ratings'), onSetEvents = document.querySelector('.onset-event-ratings'), onChangeEvents = document.querySelector('.onChange-event-ratings'), ratingMethods = document.querySelector('.methods-ratings'), initializeRatings = document.querySelector('.btn-initialize'), destroyRatings = document.querySelector('.btn-destroy'), getRatings = document.querySelector('.btn-get-rating'), setRatings = document.querySelector('.btn-set-rating'), iconStar = document.querySelector('.icon-star-ratings'), iconStarSm = document.querySelector('.icon-star-sm-ratings'), iconStarMd = document.querySelector('.icon-star-md-ratings'), iconStarLg = document.querySelector('.icon-star-lg-ratings'), iconStarPrimary = document.querySelector('.icon-star-primary-ratings'), iconStarWarning = document.querySelector('.icon-star-warning-ratings'), iconStarSuccess = document.querySelector('.icon-star-success-ratings'), iconStarDanger = document.querySelector('.icon-star-danger-ratings'); let r = parseInt(window.Helpers.getCssVar('gray-200', true).slice(1, 3), 16); let g = parseInt(window.Helpers.getCssVar('gray-200', true).slice(3, 5), 16); let b = parseInt(window.Helpers.getCssVar('gray-200', true).slice(5, 7), 16); const halfStarGray = window.Helpers.getCssVar('gray-200', true).replace('#', '%23'); const halfStarGradient = isRtl ? `%3Cstop offset='50%25' style='stop-color:${halfStarGray}' /%3E%3Cstop offset='50%25' style='stop-color:%23FFD700' /%3E` : `%3Cstop offset='50%25' style='stop-color:%23FFD700' /%3E%3Cstop offset='50%25' style='stop-color:${halfStarGray}' /%3E`; const fullStarSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD700' d='m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0z'/%3E%3C/svg%3E`; const halfStarSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='halfStarGradient'%3E${halfStarGradient}%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23halfStarGradient)' d='m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0z'/%3E%3C/svg%3E`; const emptyStarSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(${r},${g},${b})' d='m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0z'/%3E%3C/svg%3E`; // Basic Ratings // -------------------------------------------------------------------- if (basicRatings) { let ratings = new Raty(basicRatings, { starOn: fullStarSVG, starHalf: halfStarSVG, starOff: emptyStarSVG }); ratings.init(); } // Read Only Ratings // -------------------------------------------------------------------- if (readOnlyRatings) { let ratings = new Raty(readOnlyRatings, { number: 5, starOn: fullStarSVG, starHalf: halfStarSVG, starOff: emptyStarSVG }); ratings.init(); } // custom-svg icons const customFullStarSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD700' d='m6.516 14.323l-1.49 6.452a.998.998 0 0 0 1.529 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4l4.536-4.082a1 1 0 0 0-.59-1.74l-5.701-.454l-2.467-5.461a.998.998 0 0 0-1.822 0L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713zm2.853-4.326a1 1 0 0 0 .832-.586L12 5.43l1.799 3.981a1 1 0 0 0 .832.586l3.972.315l-3.271 2.944c-.284.256-.397.65-.293 1.018l1.253 4.385l-3.736-2.491a.995.995 0 0 0-1.109 0l-3.904 2.603l1.05-4.546a1 1 0 0 0-.276-.94l-3.038-2.962z'/%3E%3C/svg%3E`; const customEmptyStarSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(${r},${g},${b})' d='m6.516 14.323l-1.49 6.452a.998.998 0 0 0 1.529 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4l4.536-4.082a1 1 0 0 0-.59-1.74l-5.701-.454l-2.467-5.461a.998.998 0 0 0-1.822 0L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713zm2.853-4.326a1 1 0 0 0 .832-.586L12 5.43l1.799 3.981a1 1 0 0 0 .832.586l3.972.315l-3.271 2.944c-.284.256-.397.65-.293 1.018l1.253 4.385l-3.736-2.491a.995.995 0 0 0-1.109 0l-3.904 2.603l1.05-4.546a1 1 0 0 0-.276-.94l-3.038-2.962z'/%3E%3C/svg%3E`; // Custom SVG Ratings // -------------------------------------------------------------------- if (customSvg) { let ratings = new Raty(customSvg, { starOn: customFullStarSVG, starOff: customEmptyStarSVG }); ratings.init(); } // Half Star Ratings // -------------------------------------------------------------------- if (halfStar) { let ratings = new Raty(halfStar, { starOn: fullStarSVG, starHalf: halfStarSVG, starOff: emptyStarSVG, rtl: isRtl }); ratings.init(); } // Ratings Events // -------------------------------------------------------------------- // onSet Event if (onSetEvents) { let ratings = new Raty(onSetEvents, { starOn: fullStarSVG, starHalf: halfStarSVG, starOff: emptyStarSVG, click: function (score) { alert('The rating is set to ' + score + ' !'); } }); ratings.init(); } // onChange Event if (onChangeEvents) { let ratings = new Raty(onChangeEvents, { starOn: fullStarSVG, starHalf: halfStarSVG, starOff: emptyStarSVG, half: true, mouseover: function (score) { const counterElement = onChangeEvents.parentElement.querySelector('.counter'); if (counterElement) { counterElement.textContent = (Math.round(score * 2) / 2).toFixed(1); } }, mouseout: function () { const counterElement = onChangeEvents.parentElement.querySelector('.counter'); if (counterElement) { const currentScore = ratings.score() || 0; counterElement.textContent = (Math.round(currentScore * 2) / 2).toFixed(1); } } }); const initialCounter = onChangeEvents.parentElement.querySelector('.counter'); if (initialCounter) { initialCounter.textContent = '0.0'; } ratings.init(); } // Ratings Methods // -------------------------------------------------------------------- let currentScore = 0; let ratingInstance = null; // Initialize rating function initializeRating(score = currentScore) { if (!ratingInstance) { ratingInstance = new Raty(ratingMethods, { starOn: fullStarSVG, starHalf: halfStarSVG, starOff: emptyStarSVG, click: function (newScore) { currentScore = newScore; }, score: score, readOnly: false, rtl: isRtl }); ratingInstance.init(); } } initializeRating(currentScore); // Destroy rating function destroyRating() { if (ratingInstance) { ratingMethods.innerHTML = ''; ratingInstance = null; currentScore = 0; } else { alert('Please Initialize Ratings First'); } } // Get Current Rating function getRating() { if (ratingInstance) { alert('Current Ratings are ' + currentScore); } else { alert('Please Initialize Ratings First'); } } function setRating(score) { if (ratingInstance) { destroyRating(); initializeRating(score); currentScore = score; } else { alert('Please Initialize Ratings First'); } } if (initializeRatings) { initializeRatings.addEventListener('click', () => initializeRating(currentScore)); } if (destroyRatings) { destroyRatings.addEventListener('click', destroyRating); } if (getRatings) { getRatings.addEventListener('click', getRating); } if (setRatings) { setRatings.addEventListener('click', () => setRating(1)); } // icon Star Ratings // -------------------------------------------------------------------- if (iconStar) { let ratings = new Raty(iconStar, { starType: 'i', starOff: 'icon-base icon-xl ti tabler-heart-filled bg-danger-subtle', starOn: 'icon-base icon-xl ti tabler-heart-filled text-danger' }); ratings.init(); } // size variant star Ratings // -------------------------------------------------------------------- if (iconStarSm) { let ratings = new Raty(iconStarSm, { starType: 'i', starOff: 'icon-base ti tabler-star-filled bg-secondary-subtle', starOn: 'icon-base ti tabler-star-filled text-secondary' }); ratings.init(); } if (iconStarMd) { let ratings = new Raty(iconStarMd, { starType: 'i', starOff: 'icon-base icon-xl ti tabler-star-filled bg-secondary-subtle', starOn: 'icon-base icon-xl ti tabler-star-filled text-secondary' }); ratings.init(); } if (iconStarLg) { let ratings = new Raty(iconStarLg, { starType: 'i', starOff: 'icon-base icon-42px ti tabler-star-filled bg-secondary-subtle', starOn: 'icon-base icon-42px ti tabler-star-filled text-secondary' }); ratings.init(); } // color variant star Ratings // -------------------------------------------------------------------- if (iconStarPrimary) { let ratings = new Raty(iconStarPrimary, { starType: 'i', starOff: 'icon-base icon-xl ti tabler-star-filled bg-primary-subtle', starOn: 'icon-base icon-xl ti tabler-star-filled text-primary' }); ratings.init(); } if (iconStarWarning) { let ratings = new Raty(iconStarWarning, { starType: 'i', starOff: 'icon-base icon-xl ti tabler-star-filled bg-warning-subtle', starOn: 'icon-base icon-xl ti tabler-star-filled text-warning' }); ratings.init(); } if (iconStarSuccess) { let ratings = new Raty(iconStarSuccess, { starType: 'i', starOff: 'icon-base icon-xl ti tabler-star-filled bg-success-subtle', starOn: 'icon-base icon-xl ti tabler-star-filled text-success' }); ratings.init(); } if (iconStarDanger) { let ratings = new Raty(iconStarDanger, { starType: 'i', starOff: 'icon-base icon-xl ti tabler-star-filled bg-danger-subtle', starOn: 'icon-base icon-xl ti tabler-star-filled text-danger' }); ratings.init(); } });