TweenMax.js
1 year ago
anime.js
1 year ago
flipster.js
1 year ago
headroom.js
1 year ago
iscroll.js
1 year ago
isotope.js
1 year ago
jquery-countdown.js
1 year ago
jquery-mousewheel.js
1 year ago
jquery-slimscroll.js
1 year ago
lottie.js
1 year ago
luxon.js
1 year ago
markerclusterer.js
1 year ago
modal.js
1 year ago
motionpath.js
1 year ago
pa-gsap.js
1 year ago
pa-scrolldir.js
1 year ago
premium-addons.js
1 year ago
premium-banner.js
1 year ago
premium-blog.js
1 year ago
premium-button.js
1 year ago
premium-carousel-widget.js
1 year ago
premium-contact-form.js
1 year ago
premium-countdown-timer.js
1 year ago
premium-counter.js
1 year ago
premium-dis-conditions.js
1 year ago
premium-dual-header.js
1 year ago
premium-eq-height.js
1 year ago
premium-fancy-text.js
1 year ago
premium-floating-effects.js
1 year ago
premium-global-tooltips.js
1 year ago
premium-icon-list.js
1 year ago
premium-image-button.js
1 year ago
premium-image-scroll.js
1 year ago
premium-img-gallery.js
1 year ago
premium-maps.js
1 year ago
premium-media-wheel.js
1 year ago
premium-mini-cart.js
1 year ago
premium-mobile-menu.js
1 year ago
premium-modal-box.js
1 year ago
premium-nav-menu.js
1 year ago
premium-notifications.js
1 year ago
premium-person.js
1 year ago
premium-pinterest-feed.js
1 year ago
premium-post-ticker.js
1 year ago
premium-progressbar.js
1 year ago
premium-search-form.js
1 year ago
premium-shape-divider.js
1 year ago
premium-svg-drawer.js
1 year ago
premium-tcloud.js
1 year ago
premium-testimonials.js
1 year ago
premium-textual-showcase.js
1 year ago
premium-tiktok-feed.js
1 year ago
premium-title.js
1 year ago
premium-video-box.js
1 year ago
premium-vscroll.js
1 year ago
premium-weather.js
1 year ago
premium-woo-categories.js
1 year ago
premium-woo-cta.js
1 year ago
premium-woo-products.js
1 year ago
premium-world-clock.js
1 year ago
premium-wrapper-link.js
1 year ago
prettyPhoto.js
1 year ago
scrollTrigger.js
1 year ago
slick.js
1 year ago
tooltipster.js
1 year ago
typed.js
1 year ago
universal-tilt.js
1 year ago
vticker.js
1 year ago
premium-world-clock.js
246 lines
| 1 | (function ($) { |
| 2 | |
| 3 | var PremiumWorldClockHandler = function ($scope, $) { |
| 4 | |
| 5 | var _ = luxon, |
| 6 | id = $scope.data('id'), |
| 7 | settings = $scope.find('.premium-world-clock__clock-wrapper').data('settings'), |
| 8 | isParentHotspot = $scope.closest('#tooltip_content').length > 0, |
| 9 | analogclocks = ['skin-1', 'skin-5', 'skin-6', 'skin-7'], |
| 10 | inc = isParentHotspot ? 300 : 1000; |
| 11 | |
| 12 | if (!settings) |
| 13 | return; |
| 14 | |
| 15 | window['clockInterval-' + id]; |
| 16 | |
| 17 | if (window['clockInterval-' + id]) { |
| 18 | clearInterval(window['clockInterval-' + id]); |
| 19 | } |
| 20 | |
| 21 | if (analogclocks.includes(settings.skin) && settings.showClockNum) { |
| 22 | window['clockNumbers-' + id] = false; |
| 23 | drawClockNumbers($scope); |
| 24 | } |
| 25 | |
| 26 | window['clockInterval-' + id] = setInterval(clockInit, inc, settings, $scope, id); |
| 27 | |
| 28 | function clockInit(settings, $scope, id) { |
| 29 | |
| 30 | var isInHotspots = $('.elementor-element-' + id).closest('.premium-tooltipster-base').length > 0; |
| 31 | |
| 32 | if (isInHotspots) { |
| 33 | $scope = $('.elementor-element-' + id); |
| 34 | |
| 35 | settings = $scope.find('.premium-world-clock__clock-wrapper').data('settings'); |
| 36 | |
| 37 | if (!window['clockNumbers-' + id] && analogclocks.includes(settings.skin) && settings.showClockNum) { |
| 38 | drawClockNumbers($scope); |
| 39 | window['clockNumbers-' + id] = true; |
| 40 | } |
| 41 | } |
| 42 | |
| 43 | var time = getTimeComponents(settings); |
| 44 | |
| 45 | if (!time) { |
| 46 | var htmlNotice = '<div class="premium-error-notice">This Is An Invalid Timezone Name. Please Enter a Valid Timezone Name</div>'; |
| 47 | $scope.find('.premium-world-clock__clock-wrapper').html(htmlNotice); |
| 48 | } |
| 49 | |
| 50 | if (['skin-1', 'skin-5', 'skin-6', 'skin-7'].includes(settings.skin)) { |
| 51 | |
| 52 | $scope.find('.premium-world-clock__hours').css('transform', 'rotate(' + ((time.hours * 30) + (time.minutes * 6 / 12)) + 'deg)').text(''); |
| 53 | $scope.find('.premium-world-clock__minutes').css('transform', 'rotate(' + time.minutes * 6 + 'deg)').text(''); |
| 54 | $scope.find('.premium-world-clock__seconds').css('transform', 'rotate(' + time.seconds * 6 + 'deg)').text(''); |
| 55 | |
| 56 | if (settings.showMeridiem) { |
| 57 | $scope.find('.premium-world-clock__meridiem').text(time.meridiem); |
| 58 | } |
| 59 | |
| 60 | } else { |
| 61 | |
| 62 | $scope.find('.premium-world-clock__hours').text(time.hours); |
| 63 | $scope.find('.premium-world-clock__minutes').text(time.minutes); |
| 64 | |
| 65 | if (settings.showSeconds) { |
| 66 | $scope.find('.premium-world-clock__seconds').text(time.seconds); |
| 67 | } |
| 68 | |
| 69 | if (settings.showMeridiem) { |
| 70 | var type = settings.meridiemType; |
| 71 | |
| 72 | if ('text' === type) { |
| 73 | |
| 74 | $scope.find('.premium-world-clock__meridiem').text(time.meridiem); |
| 75 | |
| 76 | } else { |
| 77 | var meridiemIcons = { |
| 78 | 'AM': '<svg id="Weather_Icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#333;}</style></defs><g id="Clear_Sky"><circle class="cls-1" cx="12" cy="12" r="5.5"/><path class="cls-1" d="m21.76,12.74h-1.95c-.98,0-.98-1.47,0-1.47h1.95c.98,0,.98,1.47,0,1.47Z"/><path class="cls-1" d="m19.39,5.62l-1.38,1.38c-.29.29-.75.29-1.04,0-.29-.29-.29-.75,0-1.04l1.38-1.38c.29-.28.75-.28,1.04,0,.28.29.28.75,0,1.04Z"/><path class="cls-1" d="m12.74,2.24v1.95c0,.4-.33.73-.73.73s-.74-.33-.74-.73v-1.95c0-.41.33-.74.74-.74s.73.33.73.74Z"/><path class="cls-1" d="m5.96,7.03l-1.38-1.38c-.32-.31-.29-.75,0-1.04s.72-.31,1.03,0l1.38,1.38c.69.69-.34,1.73-1.03,1.04Z"/><path class="cls-1" d="m4.19,12.74h-1.95c-.98,0-.98-1.47,0-1.47h1.95c.98,0,.98,1.47,0,1.47Z"/><path class="cls-1" d="m7.02,18.04l-1.38,1.38c-.31.31-.75.29-1.04,0s-.31-.72,0-1.03l1.38-1.38c.32-.31.75-.29,1.04,0,.29.28.31.72,0,1.03Z"/><path class="cls-1" d="m12.74,19.82v1.95c0,.98-1.47.98-1.47,0v-1.95c0-.98,1.47-.98,1.47,0Z"/><path class="cls-1" d="m19.43,19.4c-.29.28-.73.31-1.04,0l-1.38-1.39c-.31-.31-.29-.75,0-1.03.28-.29.72-.31,1.03,0l1.39,1.38c.31.31.28.75,0,1.04Z"/></g></svg>', |
| 79 | 'PM': '<svg id="Weather_Icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#333;}</style></defs><path id="Moon" class="cls-1" d="m21.93,17.23c-1.89,3.24-5.4,5.27-9.26,5.27-5.89,0-10.67-4.7-10.67-10.51S6.37,1.87,11.95,1.5c.4-.02.67.41.46.76-.83,1.42-1.28,3.04-1.28,4.73,0,5.25,4.33,9.51,9.68,9.51.22,0,.44,0,.65-.02.4-.03.67.4.47.75Z"/></svg>' |
| 80 | }, |
| 81 | currentIcon = (6 <= time.hoursNotPadded && time.hoursNotPadded <= 17) ? meridiemIcons['AM'] : meridiemIcons['PM']; |
| 82 | |
| 83 | $scope.find('.premium-world-clock__meridiem').html(currentIcon); |
| 84 | } |
| 85 | } |
| 86 | |
| 87 | if (settings.equalWidth) { |
| 88 | equalWidth(); |
| 89 | } |
| 90 | } |
| 91 | |
| 92 | if (settings.date) { |
| 93 | |
| 94 | if ('skin-3' === settings.skin) { |
| 95 | |
| 96 | var daysNum = settings.daysNum, |
| 97 | currentDay = time.date.d.toLowerCase(), |
| 98 | $daysWrapper = $scope.find('.premium-world-clock__days-wrapper'), |
| 99 | daysMap = { |
| 100 | 0: 'mon', |
| 101 | 1: 'tue', |
| 102 | 2: 'wed', |
| 103 | 3: 'thu', |
| 104 | 4: 'fri', |
| 105 | 5: 'sat', |
| 106 | 6: 'sun', |
| 107 | }, |
| 108 | currentDayOrder = parseInt(time.date.order) - 1; |
| 109 | |
| 110 | $daysWrapper.html('<span class="premium-world-clock__day-name current-day">' + currentDay + '</span>'); |
| 111 | |
| 112 | for (var i = 1; i <= parseInt(daysNum); i++) { |
| 113 | |
| 114 | var dayBefore = currentDayOrder - i, |
| 115 | dayAfter = currentDayOrder + i; |
| 116 | |
| 117 | if (dayBefore < 0) { |
| 118 | dayBefore += 7; |
| 119 | } |
| 120 | |
| 121 | if (dayAfter > 6) { |
| 122 | dayAfter -= 7; |
| 123 | } |
| 124 | |
| 125 | $daysWrapper.prepend('<span class="premium-world-clock__day-name">' + daysMap[dayBefore] + '</span>'); |
| 126 | $daysWrapper.append('<span class="premium-world-clock__day-name">' + daysMap[dayAfter] + '</span>'); |
| 127 | } |
| 128 | |
| 129 | $scope.find('.premium-world-clock__month').text(time.date.m); |
| 130 | $scope.find('.premium-world-clock__day').text(time.date.dn); |
| 131 | |
| 132 | } else if ('skin-4' === settings.skin) { |
| 133 | |
| 134 | $scope.find('.premium-world-clock__date-wrapper').html(''); |
| 135 | |
| 136 | settings.dateFormat.forEach(function (format) { |
| 137 | if (time.date[format] !== undefined && time.date[format] !== null) { |
| 138 | var html = '<span class="premium-world-clock__date-segment">' + time.date[format] + '</span>'; |
| 139 | $scope.find('.premium-world-clock__date-wrapper').append(html); |
| 140 | } |
| 141 | }); |
| 142 | |
| 143 | } else { |
| 144 | $scope.find('.premium-world-clock__date').text(time.date); |
| 145 | } |
| 146 | } |
| 147 | |
| 148 | if (settings.gmtOffset) { |
| 149 | var offset = 'Z' === settings.offsetFormat ? time.offset + 'HRS' : time.offset; |
| 150 | $scope.find('.premium-world-clock__gmt-offset').text(offset); |
| 151 | } |
| 152 | |
| 153 | $scope.find('.premium-addons__v-hidden').removeClass('premium-addons__v-hidden'); |
| 154 | } |
| 155 | |
| 156 | function getTimeComponents(settings) { |
| 157 | |
| 158 | var skin = settings.skin, |
| 159 | showDate = settings.date, |
| 160 | showGmtOffset = settings.gmtOffset, |
| 161 | time = { |
| 162 | hours: '', |
| 163 | minutes: '', |
| 164 | seconds: '', |
| 165 | meridiem: '', |
| 166 | date: '', |
| 167 | }, |
| 168 | dateTime = _.DateTime.local().setLocale(settings.language || 'en').setZone(settings.timezone); |
| 169 | |
| 170 | if (!dateTime.isValid) { |
| 171 | return false; |
| 172 | } |
| 173 | |
| 174 | time.hours = dateTime.toFormat(settings.format); |
| 175 | time.minutes = dateTime.toFormat('mm'); |
| 176 | time.seconds = dateTime.toFormat('ss'); |
| 177 | |
| 178 | if (showDate) { |
| 179 | if ('skin-3' === skin || 'skin-4' === skin) { |
| 180 | time.date = { |
| 181 | d: dateTime.toFormat('ccc'), |
| 182 | dn: dateTime.toFormat('dd'), |
| 183 | m: dateTime.toFormat('LLL'), |
| 184 | order: dateTime.toFormat('c') |
| 185 | }; |
| 186 | |
| 187 | } else { |
| 188 | time.date = dateTime.toFormat(settings.dateFormat); |
| 189 | } |
| 190 | } |
| 191 | |
| 192 | if (showGmtOffset) { |
| 193 | time.offset = dateTime.toFormat(settings.offsetFormat); |
| 194 | } |
| 195 | |
| 196 | if (settings.showMeridiem) { |
| 197 | time.meridiem = dateTime.toFormat('a'); |
| 198 | time.hoursNotPadded = parseInt(dateTime.toFormat('H')); |
| 199 | } |
| 200 | |
| 201 | return time; |
| 202 | } |
| 203 | |
| 204 | function equalWidth(skin) { |
| 205 | var width = 0, |
| 206 | selector = 'skin-3' === skin ? '.premium-world-clock__hand:not(.premium-world-clock__seconds)' : '.premium-world-clock__hand'; |
| 207 | |
| 208 | $scope.find(selector).each(function (index, slot) { |
| 209 | if (width < $(slot).outerWidth()) { |
| 210 | width = $(slot).outerWidth(); |
| 211 | } |
| 212 | }); |
| 213 | |
| 214 | $scope.find(selector).css('min-width', width); |
| 215 | } |
| 216 | |
| 217 | function drawClockNumbers($scope) { |
| 218 | |
| 219 | var $clockNumbers = $scope.find('.premium-world-clock__clock-number'); |
| 220 | |
| 221 | for (var i = 0; i < 12; i++) { |
| 222 | var point = getCirclePoint(50, i * 30, 50, 50); |
| 223 | |
| 224 | $($clockNumbers[i]).css('left', point.x + '%'); |
| 225 | $($clockNumbers[i]).css('top', point.y + '%'); |
| 226 | } |
| 227 | } |
| 228 | |
| 229 | function getCirclePoint(r, degrees, cx, cy) { |
| 230 | var angleInRadians = degrees * (Math.PI / 180); |
| 231 | var xp = cx + r * Math.cos(angleInRadians); |
| 232 | var yp = cy + r * Math.sin(angleInRadians); |
| 233 | |
| 234 | return { |
| 235 | x: xp, |
| 236 | y: yp |
| 237 | }; |
| 238 | } |
| 239 | }; |
| 240 | |
| 241 | $(window).on('elementor/frontend/init', function () { |
| 242 | elementorFrontend.hooks.addAction('frontend/element_ready/premium-world-clock.default', PremiumWorldClockHandler); |
| 243 | }); |
| 244 | |
| 245 | })(jQuery); |
| 246 |