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-tcloud.js
350 lines
| 1 | |
| 2 | |
| 3 | (function ($) { |
| 4 | $(window).on('elementor/frontend/init', function () { |
| 5 | |
| 6 | var PremiumTermsCloud = elementorModules.frontend.handlers.Base.extend({ |
| 7 | |
| 8 | getDefaultSettings: function () { |
| 9 | |
| 10 | return { |
| 11 | selectors: { |
| 12 | container: '.premium-tcloud-container', |
| 13 | canvas: '.premium-tcloud-canvas', |
| 14 | termWrap: '.premium-tcloud-term', |
| 15 | }, |
| 16 | } |
| 17 | |
| 18 | }, |
| 19 | |
| 20 | getDefaultElements: function () { |
| 21 | |
| 22 | var selectors = this.getSettings('selectors'); |
| 23 | |
| 24 | return { |
| 25 | $container: this.$element.find(selectors.container), |
| 26 | $canvas: this.$element.find(selectors.canvas), |
| 27 | $termWrap: this.$element.find(selectors.termWrap), |
| 28 | } |
| 29 | |
| 30 | }, |
| 31 | |
| 32 | bindEvents: function () { |
| 33 | this.run(); |
| 34 | }, |
| 35 | |
| 36 | run: function () { |
| 37 | |
| 38 | var widgetSettings = this.getElementSettings(), |
| 39 | $container = this.elements.$container, |
| 40 | _this = this, |
| 41 | $canvas = this.elements.$canvas; |
| 42 | |
| 43 | |
| 44 | |
| 45 | if (['shape', 'sphere'].includes(widgetSettings.words_order)) { |
| 46 | |
| 47 | var computedStyle = getComputedStyle($canvas[0]); |
| 48 | |
| 49 | $canvas.attr({ |
| 50 | width: computedStyle.getPropertyValue('--pa-tcloud-width'), |
| 51 | height: computedStyle.getPropertyValue('--pa-tcloud-height') |
| 52 | }); |
| 53 | } |
| 54 | |
| 55 | setTimeout(function () { |
| 56 | |
| 57 | if ('shape' === widgetSettings.words_order) { |
| 58 | |
| 59 | // elementorFrontend.waypoint($canvas, function () { |
| 60 | // _this.renderWordCloud(); |
| 61 | // }); |
| 62 | // unsing IntersectionObserverAPI. |
| 63 | var eleObserver = new IntersectionObserver(function(entries) { |
| 64 | entries.forEach(function(entry) { |
| 65 | if (entry.isIntersecting) { |
| 66 | _this.renderWordCloud(); |
| 67 | eleObserver.unobserve(entry.target); // to only excecute the callback func once. |
| 68 | } |
| 69 | }); |
| 70 | }); |
| 71 | |
| 72 | eleObserver.observe($canvas[0]); |
| 73 | |
| 74 | } else if ('sphere' === widgetSettings.words_order) { |
| 75 | |
| 76 | _this.renderWordSphere(); |
| 77 | |
| 78 | } else { |
| 79 | _this.handleTermsGrid(); |
| 80 | } |
| 81 | |
| 82 | $container.removeClass('premium-tcloud-hidden'); |
| 83 | }, 500); |
| 84 | |
| 85 | }, |
| 86 | |
| 87 | renderWordSphere: function () { |
| 88 | |
| 89 | var widgetID = this.getID(), |
| 90 | widgetSettings = this.getElementSettings(), |
| 91 | $termWrap = this.elements.$termWrap, |
| 92 | _this = this; |
| 93 | |
| 94 | var colorScheme = widgetSettings.colors_select; |
| 95 | |
| 96 | if ('custom' === colorScheme && widgetSettings.words_colors) { |
| 97 | var colors = widgetSettings.words_colors.split("\n"); |
| 98 | } |
| 99 | |
| 100 | $termWrap.map(function (index, term) { |
| 101 | |
| 102 | var generatedColor = null; |
| 103 | |
| 104 | |
| 105 | if ('custom' !== colorScheme) { |
| 106 | |
| 107 | generatedColor = _this.genRandomColor(colorScheme); |
| 108 | |
| 109 | } else if (widgetSettings.words_colors) { |
| 110 | generatedColor = Math.floor(Math.random() * colors.length); |
| 111 | |
| 112 | generatedColor = colors[generatedColor]; |
| 113 | } |
| 114 | |
| 115 | if (generatedColor) |
| 116 | $(term).find('.premium-tcloud-term-link').css(('background' === widgetSettings.colors_target ? 'background-' : '') + 'color', generatedColor); |
| 117 | |
| 118 | }); |
| 119 | |
| 120 | setTimeout(function () { |
| 121 | |
| 122 | $('#premium-tcloud-canvas-' + widgetID).tagcanvas({ |
| 123 | |
| 124 | decel: 'yes' === widgetSettings.stop_onDrag ? 0.95 : 1, |
| 125 | |
| 126 | overlap: false, |
| 127 | textColour: null, |
| 128 | |
| 129 | weight: 'yes' === widgetSettings.sphere_weight, |
| 130 | weightFrom: 'data-weight', |
| 131 | weightSizeMin: 'yes' === widgetSettings.sphere_weight ? widgetSettings.weight_min.size : 10, |
| 132 | weightSizeMax: 'yes' === widgetSettings.sphere_weight ? widgetSettings.weight_max.size : 20, |
| 133 | |
| 134 | textHeight: widgetSettings.text_height || 15, |
| 135 | textFont: widgetSettings.font_family, |
| 136 | textWeight: widgetSettings.font_weight, |
| 137 | |
| 138 | wheelZoom: 'yes' === widgetSettings.wheel_zoom, |
| 139 | reverse: 'yes' === widgetSettings.reverse, |
| 140 | dragControl: 'yes' === widgetSettings.drag_control, |
| 141 | initial: [widgetSettings.start_xspeed.size, widgetSettings.start_yspeed.size], |
| 142 | |
| 143 | bgColour: 'tag', |
| 144 | |
| 145 | padding: 'background' === widgetSettings.colors_target ? widgetSettings.sphere_term_padding.size : 0, |
| 146 | bgRadius: 'background' === widgetSettings.colors_target ? widgetSettings.sphere_term_radius.size : 0, |
| 147 | |
| 148 | outlineColour: 'rgba(2,2,2,0)', |
| 149 | maxSpeed: 0.03, |
| 150 | depth: 0.75 |
| 151 | |
| 152 | }, 'premium-tcloud-terms-container-' + widgetID); |
| 153 | }, 100); |
| 154 | |
| 155 | }, |
| 156 | |
| 157 | handleTermsGrid: function () { |
| 158 | |
| 159 | var widgetSettings = this.getElementSettings(), |
| 160 | $termWrap = this.elements.$termWrap, |
| 161 | _this = this; |
| 162 | |
| 163 | var colorScheme = widgetSettings.colors_select; |
| 164 | |
| 165 | if ('custom' === colorScheme && widgetSettings.words_colors) { |
| 166 | var colors = widgetSettings.words_colors.split("\n"); |
| 167 | } |
| 168 | |
| 169 | $termWrap.map(function (index, term) { |
| 170 | |
| 171 | var generatedColor = null, |
| 172 | fontSize = $(term).find('.premium-tcloud-term-link').css('font-size').replace('px', ''); |
| 173 | |
| 174 | if (widgetSettings.fsize_scale.size > 0) |
| 175 | fontSize = parseFloat(fontSize) + ($(term).find('.premium-tcloud-term-link').data('weight') * widgetSettings.fsize_scale.size); |
| 176 | |
| 177 | if ('custom' !== colorScheme) { |
| 178 | generatedColor = _this.genRandomColor(colorScheme, 'grid'); |
| 179 | |
| 180 | var opacities = { |
| 181 | original: 'random-light' === colorScheme ? '0.15)' : '80%)', |
| 182 | replaced: 'random-light' === colorScheme ? '0.3)' : '100%)' |
| 183 | }; |
| 184 | |
| 185 | $(term).get(0).style.setProperty("--tag-hover-color", generatedColor.replace(opacities.original, opacities.replaced)); |
| 186 | $(term).get(0).style.setProperty("--tag-text-color", 'random-dark' === colorScheme ? '#fff' : generatedColor.replace('42%,0.15)', '35%,100%)')); |
| 187 | |
| 188 | } else if (widgetSettings.words_colors) { |
| 189 | |
| 190 | generatedColor = Math.floor(Math.random() * colors.length); |
| 191 | |
| 192 | generatedColor = colors[generatedColor]; |
| 193 | |
| 194 | $(term).get(0).style.setProperty("--tag-hover-color", generatedColor); |
| 195 | |
| 196 | } |
| 197 | |
| 198 | $(term).get(0).style.setProperty("--tag-color", generatedColor); |
| 199 | |
| 200 | if (widgetSettings.fsize_scale.size > 0) |
| 201 | $(term).find('.premium-tcloud-term-link').css('font-size', Math.ceil(fontSize) + 'px'); |
| 202 | |
| 203 | |
| 204 | if ('ribbon' === widgetSettings.words_order) { |
| 205 | $(term).get(0).style.setProperty("--tag-ribbon-size", (Math.ceil($(term).outerHeight(false)) / 2) + 'px'); |
| 206 | } |
| 207 | |
| 208 | |
| 209 | }) |
| 210 | |
| 211 | |
| 212 | |
| 213 | }, |
| 214 | |
| 215 | renderWordCloud: function () { |
| 216 | |
| 217 | var widgetID = this.getID(), |
| 218 | widgetSettings = this.getElementSettings(), |
| 219 | $container = this.elements.$container, |
| 220 | settings = $container.data("chart"); |
| 221 | |
| 222 | var wordsArr = settings.wordsArr, |
| 223 | colors = [], |
| 224 | rotationRatio = rotationSteps = null, |
| 225 | minRot = -90 * (Math.PI / 180), |
| 226 | maxRot = 90 * (Math.PI / 180); |
| 227 | |
| 228 | |
| 229 | switch (widgetSettings.rotation_select) { |
| 230 | |
| 231 | case 'horizontal': |
| 232 | rotationRatio = 0; |
| 233 | rotationSteps = 0; |
| 234 | break; |
| 235 | |
| 236 | case 'vertical': |
| 237 | rotationRatio = 1; |
| 238 | rotationSteps = 2; |
| 239 | break; |
| 240 | |
| 241 | case 'hv': |
| 242 | rotationRatio = 0.5; |
| 243 | rotationSteps = 2; |
| 244 | break; |
| 245 | |
| 246 | case 'custom': |
| 247 | rotationRatio = widgetSettings.rotation.size || 0.3; |
| 248 | |
| 249 | minRot = widgetSettings.degrees.size * (Math.PI / 180) || 45; |
| 250 | maxRot = widgetSettings.degrees.size * (Math.PI / 180) || 45; |
| 251 | |
| 252 | break; |
| 253 | |
| 254 | case 'random': |
| 255 | rotationRatio = Math.random(); |
| 256 | rotationSteps = 0; |
| 257 | |
| 258 | break; |
| 259 | |
| 260 | default: |
| 261 | rotationRatio = 0.3; |
| 262 | break; |
| 263 | } |
| 264 | |
| 265 | |
| 266 | if ('custom' === widgetSettings.colors_select) { |
| 267 | colors = widgetSettings.words_colors.split("\n"); |
| 268 | } |
| 269 | |
| 270 | WordCloud(document.getElementById('premium-tcloud-canvas-' + widgetID), |
| 271 | { |
| 272 | |
| 273 | backgroundColor: 'rgba(0, 0, 0, 0)', |
| 274 | shuffle: false, |
| 275 | |
| 276 | list: wordsArr, |
| 277 | shape: widgetSettings.shape, |
| 278 | color: widgetSettings.colors_select, |
| 279 | wordsColors: colors, |
| 280 | |
| 281 | wait: (widgetSettings.interval.size * 1000) || 0, |
| 282 | |
| 283 | gridSize: widgetSettings.grid_size.size || 8, |
| 284 | |
| 285 | weightFactor: widgetSettings.weight_scale || 5, |
| 286 | |
| 287 | minRotation: minRot, |
| 288 | maxRotation: maxRot, |
| 289 | |
| 290 | rotateRatio: rotationRatio, |
| 291 | rotationSteps: rotationSteps, |
| 292 | |
| 293 | fontFamily: widgetSettings.font_family || 'Arial', |
| 294 | fontWeight: widgetSettings.font_weight, |
| 295 | |
| 296 | click: function (item) { |
| 297 | |
| 298 | if (!elementorFrontend.isEditMode()) { |
| 299 | var link = item[2]; |
| 300 | |
| 301 | window.open(link, 'yes' === widgetSettings.new_tab ? '_blank' : '_top'); |
| 302 | } |
| 303 | } |
| 304 | |
| 305 | // minSize: 10 |
| 306 | // rotationSteps: 90 |
| 307 | } |
| 308 | ); |
| 309 | |
| 310 | |
| 311 | |
| 312 | }, |
| 313 | |
| 314 | genRandomColor: function (scheme, shape) { |
| 315 | |
| 316 | var min = 50, |
| 317 | max = 90; |
| 318 | |
| 319 | if ('random-dark' === scheme) { |
| 320 | min = 10; |
| 321 | max = 50; |
| 322 | } |
| 323 | |
| 324 | var lightandOpacity = (Math.random() * (max - min) + min).toFixed() + '%, 100%'; |
| 325 | if (shape) { |
| 326 | lightandOpacity = '42%,' + ('random-dark' === scheme ? '80%' : '0.15'); |
| 327 | } |
| 328 | |
| 329 | |
| 330 | return 'hsla(' + |
| 331 | (Math.random() * 360).toFixed() + ',' + |
| 332 | '100%,' + |
| 333 | lightandOpacity + ')'; |
| 334 | |
| 335 | }, |
| 336 | |
| 337 | genRandomRotate: function () { |
| 338 | |
| 339 | return Math.floor(Math.random() * 361); |
| 340 | |
| 341 | }, |
| 342 | |
| 343 | |
| 344 | }); |
| 345 | |
| 346 | elementorFrontend.elementsHandler.attachHandler('premium-tcloud', PremiumTermsCloud); |
| 347 | }); |
| 348 | |
| 349 | })(jQuery); |
| 350 |