(function($){
'use strict';
class KingAddonsCollapseExpandText {
constructor(){
this.init();
}
init(){
$(document).ready(()=> {
this.initElements();
});
if(typeof elementor!=='undefined'){
elementor.hooks.addAction('frontend/element_ready/global', ()=> {
this.initElements();
});
}
$(window).on('elementor/frontend/init', ()=> {
elementorFrontend.hooks.addAction('frontend/element_ready/global', ()=> {
this.initElements();
});
});
}
initElements(){
$('.kng-collapse-expand-yes').each((index, element)=> {
this.setupCollapseExpand ($(element));
});
}
setupCollapseExpand ($element){
if($element.data('kng-collapse-initialized')){
return;
}
if(!$element.hasClass('kng-collapse-expand-yes')){
return;
}
let $textContent=this.findTextContent($element);
if(!$textContent||$textContent.length===0){
return;
}
const collapsedHeight=parseInt($element.data('kng-collapse-height'))||80;
const showMoreText=$element.data('kng-collapse-show-more')||'Read more';
const showLessText=$element.data('kng-collapse-show-less')||'Read less';
const animationDuration=parseInt($element.data('kng-collapse-duration'))||300;
const buttonPosition=$element.data('kng-collapse-position')||'right';
if(!this.needsCollapsing($textContent, collapsedHeight)){
return;
}
$element.data('kng-collapse-initialized', true);
this.wrapContent($textContent, $element, showMoreText, showLessText, buttonPosition);
this.setCollapsedState($element);
this.bindButtonClick($element, animationDuration);
}
findTextContent($element){
if($element.find('.king-addons-styled-text-builder-items').length){
return $element.find('.king-addons-styled-text-builder-items');
}
if($element.find('.elementor-text-editor').length){
return $element.find('.elementor-text-editor');
}
if($element.find('.elementor-heading-title').length){
return $element.find('.elementor-heading-title');
}
if($element.find('p, h1, h2, h3, h4, h5, h6, div').length){
return $element.find('p, h1, h2, h3, h4, h5, h6, div').first();
}
return null;
}
needsCollapsing($content, maxHeight){
const $clone=$content.clone();
$clone.css({
'position': 'absolute',
'top': '-9999px',
'left': '-9999px',
'width': $content.width()||'auto',
'visibility': 'hidden'
});
$('body').append($clone);
const contentHeight=$clone.height();
$clone.remove();
return contentHeight > maxHeight;
}
wrapContent($content, $element, showMoreText, showLessText, buttonPosition){
$content.wrap('<div class="kng-collapse-expand-content collapsed"></div>');
const buttonHtml=`
<div class="kng-collapse-expand-button-wrapper">
<button class="kng-collapse-expand-button"
data-show-more-text="${showMoreText}"
data-show-less-text="${showLessText}"
aria-expanded="false">
${showMoreText}
</button>
</div>
`;
$element.find('.kng-collapse-expand-content').after(buttonHtml);
}
setCollapsedState($element){
const $content=$element.find('.kng-collapse-expand-content');
const $button=$element.find('.kng-collapse-expand-button');
$content.addClass('collapsed').removeClass('expanded');
$button.attr('aria-expanded', 'false');
$button.text($button.data('show-more-text'));
}
setExpandedState($element){
const $content=$element.find('.kng-collapse-expand-content');
const $button=$element.find('.kng-collapse-expand-button');
$content.addClass('expanded').removeClass('collapsed');
$button.attr('aria-expanded', 'true');
$button.text($button.data('show-less-text'));
}
bindButtonClick($element, animationDuration){
const $button=$element.find('.kng-collapse-expand-button');
const $content=$element.find('.kng-collapse-expand-content');
$button.on('click', (e)=> {
e.preventDefault();
if($content.hasClass('collapsed')){
this.setExpandedState($element);
}else{
this.setCollapsedState($element);
this.scrollToElementIfNeeded($element);
}});
}
scrollToElementIfNeeded($element){
const elementTop=$element.offset().top;
const viewportTop=$(window).scrollTop();
const elementHeight=$element.height();
if(elementTop < viewportTop){
$('html, body').animate({
scrollTop: elementTop - 20
}, 300);
}}
}
new KingAddonsCollapseExpandText();
})(jQuery);