| 1 |
"use strict"; |
| 2 |
(function ($) { |
| 3 |
$(window).on("elementor/frontend/init", () => { |
| 4 |
elementorFrontend.hooks.addAction( |
| 5 |
"frontend/element_ready/king-addons-magazine-grid.default", |
| 6 |
($scope) => { |
| 7 |
elementorFrontend.elementsHandler.addHandler( |
| 8 |
elementorModules.frontend.handlers.Base.extend({ |
| 9 |
onInit() { |
| 10 |
const $element = this.$element; |
| 11 |
const $grid = $element.find(".king-addons-magazine-grid-wrap"); |
| 12 |
const slickSettings = $grid.attr("data-slick"); |
| 13 |
const slideEffect = $grid.attr("data-slide-effect"); |
| 14 |
|
| 15 |
// Initialize Slick if settings exist. |
| 16 |
if (typeof slickSettings !== "undefined" && slickSettings !== false) { |
| 17 |
$grid.slick({ fade: slideEffect === "fade" }); |
| 18 |
} |
| 19 |
// Make grid visible once the document is ready. |
| 20 |
$(document).ready(() => $grid.css("opacity", 1)); |
| 21 |
|
| 22 |
// --- Overlay Link Handling --- |
| 23 |
const $mediaWrap = $grid.find(".king-addons-grid-media-wrap"); |
| 24 |
if ( |
| 25 |
$mediaWrap.attr("data-overlay-link") === "yes" && |
| 26 |
!$("body").hasClass("elementor-editor-active") |
| 27 |
) { |
| 28 |
$mediaWrap.css("cursor", "pointer").on("click", function (event) { |
| 29 |
const targetClass = event.target.className; |
| 30 |
if ( |
| 31 |
targetClass.includes("inner-block") || |
| 32 |
targetClass.includes("king-addons-cv-inner") || |
| 33 |
targetClass.includes("king-addons-grid-media-hover") |
| 34 |
) { |
| 35 |
event.preventDefault(); |
| 36 |
const itemUrl = $(this) |
| 37 |
.find(".king-addons-grid-media-hover-bg") |
| 38 |
.attr("data-url"); |
| 39 |
const $link = $grid.find(".king-addons-grid-item-title a"); |
| 40 |
if ($link.length && itemUrl) { |
| 41 |
try { |
| 42 |
const url = new URL(itemUrl); |
| 43 |
const allowedProtocols = ["http:", "https:"]; |
| 44 |
if (allowedProtocols.includes(url.protocol)) { |
| 45 |
const safeUrl = url.href; |
| 46 |
if ($link.attr("target") === "_blank") { |
| 47 |
window.open(safeUrl, "_blank").focus(); |
| 48 |
} else { |
| 49 |
window.location.href = safeUrl; |
| 50 |
} |
| 51 |
} else { |
| 52 |
console.error("Invalid URL scheme:", url.protocol); |
| 53 |
} |
| 54 |
} catch (e) { |
| 55 |
console.error("Invalid URL:", itemUrl); |
| 56 |
} |
| 57 |
} |
| 58 |
} |
| 59 |
}); |
| 60 |
} |
| 61 |
|
| 62 |
// --- Sharing Trigger Handling --- |
| 63 |
const $sharingTrigger = $element.find(".king-addons-sharing-trigger"); |
| 64 |
if ($sharingTrigger.length) { |
| 65 |
const $sharingInner = $element.find(".king-addons-post-sharing-inner"); |
| 66 |
let totalWidth = 5; |
| 67 |
$sharingInner |
| 68 |
.first() |
| 69 |
.find("a") |
| 70 |
.each(function () { |
| 71 |
const $link = $(this); |
| 72 |
totalWidth += $link.outerWidth() + parseInt($link.css("margin-right"), 10); |
| 73 |
}); |
| 74 |
const sharingMargin = parseInt($sharingInner.find("a").css("margin-right"), 10); |
| 75 |
const direction = $sharingTrigger.attr("data-direction"); |
| 76 |
|
| 77 |
switch (direction) { |
| 78 |
case "left": |
| 79 |
$sharingInner.css({ |
| 80 |
width: `${totalWidth}px`, |
| 81 |
left: `-${sharingMargin + totalWidth}px` |
| 82 |
}); |
| 83 |
break; |
| 84 |
case "right": |
| 85 |
$sharingInner.css({ |
| 86 |
width: `${totalWidth}px`, |
| 87 |
right: `-${sharingMargin + totalWidth}px` |
| 88 |
}); |
| 89 |
break; |
| 90 |
case "top": |
| 91 |
$sharingInner.find("a").css({ |
| 92 |
"margin-right": "0", |
| 93 |
"margin-top": `${sharingMargin}px` |
| 94 |
}); |
| 95 |
$sharingInner.css({ |
| 96 |
top: `-${sharingMargin}px`, |
| 97 |
left: "50%", |
| 98 |
"-webkit-transform": "translate(-50%, -100%)", |
| 99 |
transform: "translate(-50%, -100%)" |
| 100 |
}); |
| 101 |
break; |
| 102 |
case "bottom": |
| 103 |
$sharingInner.find("a").css({ |
| 104 |
"margin-right": "0", |
| 105 |
"margin-bottom": `${sharingMargin}px` |
| 106 |
}); |
| 107 |
$sharingInner.css({ |
| 108 |
bottom: `-${sharingMargin}px`, |
| 109 |
left: "50%", |
| 110 |
"-webkit-transform": "translate(-50%, 100%)", |
| 111 |
transform: "translate(-50%, 100%)" |
| 112 |
}); |
| 113 |
break; |
| 114 |
} |
| 115 |
|
| 116 |
// Helper function to toggle sharing visibility. |
| 117 |
const toggleSharing = ($inner) => { |
| 118 |
const $links = $inner.find("a"); |
| 119 |
if ($inner.css("visibility") === "hidden") { |
| 120 |
$inner.css("visibility", "visible"); |
| 121 |
$links.css({ opacity: 1, top: 0 }); |
| 122 |
setTimeout(() => $links.addClass("king-addons-no-transition-delay"), $links.length * 100); |
| 123 |
} else { |
| 124 |
$links.removeClass("king-addons-no-transition-delay").css({ opacity: 0, top: "-5px" }); |
| 125 |
setTimeout(() => $inner.css("visibility", "hidden"), $links.length * 100); |
| 126 |
} |
| 127 |
}; |
| 128 |
|
| 129 |
if ($sharingTrigger.attr("data-action") === "click") { |
| 130 |
$sharingTrigger.on("click", function () { |
| 131 |
toggleSharing($(this).next()); |
| 132 |
}); |
| 133 |
} else { |
| 134 |
$sharingTrigger.on("mouseenter", function () { |
| 135 |
const $inner = $(this).next(); |
| 136 |
$inner.css("visibility", "visible"); |
| 137 |
$inner.find("a").css({ opacity: 1, top: 0 }); |
| 138 |
setTimeout( |
| 139 |
() => $inner.find("a").addClass("king-addons-no-transition-delay"), |
| 140 |
$inner.find("a").length * 100 |
| 141 |
); |
| 142 |
}); |
| 143 |
$element.find(".king-addons-grid-item-sharing").on("mouseleave", function () { |
| 144 |
const $inner = $(this).find(".king-addons-post-sharing-inner"); |
| 145 |
$inner.find("a").removeClass("king-addons-no-transition-delay").css({ opacity: 0, top: "-5px" }); |
| 146 |
setTimeout(() => $inner.css("visibility", "hidden"), $inner.find("a").length * 100); |
| 147 |
}); |
| 148 |
} |
| 149 |
} |
| 150 |
|
| 151 |
// --- Post Like Button Handling --- |
| 152 |
const $likeButton = $element.find(".king-addons-post-like-button"); |
| 153 |
if ($likeButton.length) { |
| 154 |
$likeButton.on("click", function () { |
| 155 |
const $btn = $(this); |
| 156 |
const postId = $btn.attr("data-post-id"); |
| 157 |
if (postId !== "") { |
| 158 |
$.ajax({ |
| 159 |
type: "POST", |
| 160 |
url: $btn.attr("data-ajax"), |
| 161 |
data: { |
| 162 |
action: "king_addons_likes_init", |
| 163 |
post_id: postId, |
| 164 |
nonce: $btn.attr("data-nonce") |
| 165 |
}, |
| 166 |
beforeSend: () => $btn.fadeTo(500, 0.5), |
| 167 |
success(response) { |
| 168 |
const iconClass = $btn.attr("data-icon"); |
| 169 |
let countHTML = response.count; |
| 170 |
if (!countHTML.replace(/<\/?[^>]+(>|$)/g, "")) { |
| 171 |
countHTML = `<span class="king-addons-post-like-count">${$btn.attr("data-text")}</span>`; |
| 172 |
if (!$btn.hasClass("king-addons-likes-zero")) { |
| 173 |
$btn.addClass("king-addons-likes-zero"); |
| 174 |
} |
| 175 |
} else { |
| 176 |
$btn.removeClass("king-addons-likes-zero"); |
| 177 |
} |
| 178 |
|
| 179 |
if ($btn.hasClass("king-addons-already-liked")) { |
| 180 |
$btn.prop("title", "Like") |
| 181 |
.removeClass("king-addons-already-liked") |
| 182 |
.html(`<i class="${iconClass.replace("fas", "far")}"></i>${countHTML}`); |
| 183 |
} else { |
| 184 |
$btn.prop("title", "Unlike") |
| 185 |
.addClass("king-addons-already-liked") |
| 186 |
.html(`<i class="${iconClass.replace("far", "fas")}"></i>${countHTML}`); |
| 187 |
} |
| 188 |
$btn.fadeTo(500, 1); |
| 189 |
} |
| 190 |
}); |
| 191 |
} |
| 192 |
return false; |
| 193 |
}); |
| 194 |
} |
| 195 |
} |
| 196 |
}), |
| 197 |
{ $element: $scope } |
| 198 |
); |
| 199 |
} |
| 200 |
); |
| 201 |
}); |
| 202 |
})(jQuery); |
