| 1 |
<?php // @todo eventually we need to convert this to non jQuery ?> |
| 2 |
<script> |
| 3 |
/** |
| 4 |
* An AUI bootstrap adaptation of GreedyNav.js ( by Luke Jackson ). |
| 5 |
* |
| 6 |
* Simply add the class `greedy` to any <nav> menu and it will do the rest. |
| 7 |
* Licensed under the MIT license - http://opensource.org/licenses/MIT |
| 8 |
* @ver 0.0.1 |
| 9 |
*/ |
| 10 |
function aui_init_greedy_nav(){ |
| 11 |
jQuery('nav.greedy').each(function(i, obj) { |
| 12 |
// Check if already initialized, if so continue. |
| 13 |
if(jQuery(this).hasClass("being-greedy")){return true;} |
| 14 |
|
| 15 |
// Make sure its always expanded |
| 16 |
jQuery(this).addClass('navbar-expand'); |
| 17 |
jQuery(this).off('shown.bs.tab').on('shown.bs.tab', function (e) { |
| 18 |
if (jQuery(e.target).closest('.dropdown-menu').hasClass('greedy-links')) { |
| 19 |
jQuery(e.target).closest('.greedy').find('.greedy-btn.dropdown').attr('aria-expanded', 'false'); |
| 20 |
jQuery(e.target).closest('.greedy-links').removeClass('show').addClass('d-none'); |
| 21 |
} |
| 22 |
}); |
| 23 |
jQuery(document).off('mousemove', '.greedy-btn').on('mousemove', '.greedy-btn', function(e){ |
| 24 |
jQuery('.dropdown-menu.greedy-links').removeClass('d-none'); |
| 25 |
}); |
| 26 |
// vars |
| 27 |
var $vlinks = ''; |
| 28 |
var $dDownClass = ''; |
| 29 |
var ddItemClass = 'greedy-nav-item'; |
| 30 |
if(jQuery(this).find('.navbar-nav').length){ |
| 31 |
if(jQuery(this).find('.navbar-nav').hasClass("being-greedy")){return true;} |
| 32 |
$vlinks = jQuery(this).find('.navbar-nav').addClass("being-greedy w-100").removeClass('overflow-hidden'); |
| 33 |
}else if(jQuery(this).find('.nav').length){ |
| 34 |
if(jQuery(this).find('.nav').hasClass("being-greedy")){return true;} |
| 35 |
$vlinks = jQuery(this).find('.nav').addClass("being-greedy w-100").removeClass('overflow-hidden'); |
| 36 |
$dDownClass = ' mt-0 p-0 zi-5 '; |
| 37 |
ddItemClass += ' mt-0 me-0'; |
| 38 |
}else{ |
| 39 |
return false; |
| 40 |
} |
| 41 |
|
| 42 |
jQuery($vlinks).append('<li class="nav-item list-unstyled ml-auto greedy-btn d-none dropdown"><button data-bs-toggle="collapse" class="nav-link greedy-nav-link" role="button"><i class="fas fa-ellipsis-h"></i> <span class="greedy-count badge bg-dark rounded-pill"></span></button><ul class="greedy-links dropdown-menu dropdown-menu-end '+$dDownClass+'"></ul></li>'); |
| 43 |
|
| 44 |
var $hlinks = jQuery(this).find('.greedy-links'); |
| 45 |
var $btn = jQuery(this).find('.greedy-btn'); |
| 46 |
|
| 47 |
var numOfItems = 0; |
| 48 |
var totalSpace = 0; |
| 49 |
var closingTime = 1000; |
| 50 |
var breakWidths = []; |
| 51 |
|
| 52 |
// Get initial state |
| 53 |
$vlinks.children().outerWidth(function(i, w) { |
| 54 |
totalSpace += w; |
| 55 |
numOfItems += 1; |
| 56 |
breakWidths.push(totalSpace); |
| 57 |
}); |
| 58 |
|
| 59 |
var availableSpace, numOfVisibleItems, requiredSpace, buttonSpace ,timer; |
| 60 |
|
| 61 |
/* |
| 62 |
The check function. |
| 63 |
*/ |
| 64 |
function check() { |
| 65 |
// Get instant state |
| 66 |
buttonSpace = $btn.width(); |
| 67 |
availableSpace = $vlinks.width() - 10; |
| 68 |
numOfVisibleItems = $vlinks.children().length; |
| 69 |
requiredSpace = breakWidths[numOfVisibleItems - 1]; |
| 70 |
|
| 71 |
// There is not enough space |
| 72 |
if (numOfVisibleItems > 1 && requiredSpace > availableSpace) { |
| 73 |
var $li = $vlinks.children().last().prev(); |
| 74 |
$li.removeClass('nav-item').addClass(ddItemClass); |
| 75 |
if (!jQuery($hlinks).children().length) { |
| 76 |
$li.find('.nav-link').addClass('w-100 dropdown-item rounded-0 rounded-bottom'); |
| 77 |
} else { |
| 78 |
jQuery($hlinks).find('.nav-link').removeClass('rounded-top'); |
| 79 |
$li.find('.nav-link').addClass('w-100 dropdown-item rounded-0 rounded-top'); |
| 80 |
} |
| 81 |
$li.prependTo($hlinks); |
| 82 |
numOfVisibleItems -= 1; |
| 83 |
check(); |
| 84 |
// There is more than enough space |
| 85 |
} else if (availableSpace > breakWidths[numOfVisibleItems]) { |
| 86 |
$hlinks.children().first().insertBefore($btn); |
| 87 |
numOfVisibleItems += 1; |
| 88 |
check(); |
| 89 |
} |
| 90 |
// Update the button accordingly |
| 91 |
jQuery($btn).find(".greedy-count").html( numOfItems - numOfVisibleItems); |
| 92 |
if (numOfVisibleItems === numOfItems) { |
| 93 |
$btn.addClass('d-none'); |
| 94 |
} else $btn.removeClass('d-none'); |
| 95 |
} |
| 96 |
|
| 97 |
// Window listeners |
| 98 |
jQuery(window).on("resize",function() { |
| 99 |
check(); |
| 100 |
}); |
| 101 |
|
| 102 |
// do initial check |
| 103 |
check(); |
| 104 |
}); |
| 105 |
} |
| 106 |
|
| 107 |
function aui_select2_locale() { |
| 108 |
var aui_select2_params = <?php echo self::select2_locale(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>; |
| 109 |
|
| 110 |
return { |
| 111 |
theme: "bootstrap-5", |
| 112 |
width: jQuery( this ).data( 'width' ) ? jQuery( this ).data( 'width' ) : jQuery( this ).hasClass( 'w-100' ) ? '100%' : 'style', |
| 113 |
placeholder: jQuery( this ).data( 'placeholder' ), |
| 114 |
'language': { |
| 115 |
errorLoading: function() { |
| 116 |
// Workaround for https://github.com/select2/select2/issues/4355 instead of i18n_ajax_error. |
| 117 |
return aui_select2_params.i18n_searching; |
| 118 |
}, |
| 119 |
inputTooLong: function(args) { |
| 120 |
var overChars = args.input.length - args.maximum; |
| 121 |
if (1 === overChars) { |
| 122 |
return aui_select2_params.i18n_input_too_long_1; |
| 123 |
} |
| 124 |
return aui_select2_params.i18n_input_too_long_n.replace('%item%', overChars); |
| 125 |
}, |
| 126 |
inputTooShort: function(args) { |
| 127 |
var remainingChars = args.minimum - args.input.length; |
| 128 |
if (1 === remainingChars) { |
| 129 |
return aui_select2_params.i18n_input_too_short_1; |
| 130 |
} |
| 131 |
return aui_select2_params.i18n_input_too_short_n.replace('%item%', remainingChars); |
| 132 |
}, |
| 133 |
loadingMore: function() { |
| 134 |
return aui_select2_params.i18n_load_more; |
| 135 |
}, |
| 136 |
maximumSelected: function(args) { |
| 137 |
if (args.maximum === 1) { |
| 138 |
return aui_select2_params.i18n_selection_too_long_1; |
| 139 |
} |
| 140 |
return aui_select2_params.i18n_selection_too_long_n.replace('%item%', args.maximum); |
| 141 |
}, |
| 142 |
noResults: function() { |
| 143 |
return aui_select2_params.i18n_no_matches; |
| 144 |
}, |
| 145 |
searching: function() { |
| 146 |
return aui_select2_params.i18n_searching; |
| 147 |
} |
| 148 |
} |
| 149 |
}; |
| 150 |
} |
| 151 |
|
| 152 |
/** |
| 153 |
* Initiate Select2 items. |
| 154 |
*/ |
| 155 |
function aui_init_select2(){ |
| 156 |
var select2_args = jQuery.extend({}, aui_select2_locale()); |
| 157 |
jQuery("select.aui-select2").each(function() { |
| 158 |
if (!jQuery(this).hasClass("select2-hidden-accessible")) { |
| 159 |
jQuery(this).select2(select2_args); |
| 160 |
} |
| 161 |
}); |
| 162 |
} |
| 163 |
|
| 164 |
/** |
| 165 |
* A function to convert a time value to a "ago" time text. |
| 166 |
* |
| 167 |
* @param selector string The .class selector |
| 168 |
*/ |
| 169 |
function aui_time_ago(selector) { |
| 170 |
var aui_timeago_params = <?php echo self::timeago_locale(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>; |
| 171 |
|
| 172 |
var templates = { |
| 173 |
prefix: aui_timeago_params.prefix_ago, |
| 174 |
suffix: aui_timeago_params.suffix_ago, |
| 175 |
seconds: aui_timeago_params.seconds, |
| 176 |
minute: aui_timeago_params.minute, |
| 177 |
minutes: aui_timeago_params.minutes, |
| 178 |
hour: aui_timeago_params.hour, |
| 179 |
hours: aui_timeago_params.hours, |
| 180 |
day: aui_timeago_params.day, |
| 181 |
days: aui_timeago_params.days, |
| 182 |
month: aui_timeago_params.month, |
| 183 |
months: aui_timeago_params.months, |
| 184 |
year: aui_timeago_params.year, |
| 185 |
years: aui_timeago_params.years |
| 186 |
}; |
| 187 |
var template = function (t, n) { |
| 188 |
return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n))); |
| 189 |
}; |
| 190 |
|
| 191 |
var timer = function (time) { |
| 192 |
if (!time) |
| 193 |
return; |
| 194 |
time = time.replace(/\.\d+/, ""); // remove milliseconds |
| 195 |
time = time.replace(/-/, "/").replace(/-/, "/"); |
| 196 |
time = time.replace(/T/, " ").replace(/Z/, " UTC"); |
| 197 |
time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400 |
| 198 |
time = new Date(time * 1000 || time); |
| 199 |
|
| 200 |
var now = new Date(); |
| 201 |
var seconds = ((now.getTime() - time) * .001) >> 0; |
| 202 |
var minutes = seconds / 60; |
| 203 |
var hours = minutes / 60; |
| 204 |
var days = hours / 24; |
| 205 |
var years = days / 365; |
| 206 |
|
| 207 |
return templates.prefix + ( |
| 208 |
seconds < 45 && template('seconds', seconds) || |
| 209 |
seconds < 90 && template('minute', 1) || |
| 210 |
minutes < 45 && template('minutes', minutes) || |
| 211 |
minutes < 90 && template('hour', 1) || |
| 212 |
hours < 24 && template('hours', hours) || |
| 213 |
hours < 42 && template('day', 1) || |
| 214 |
days < 30 && template('days', days) || |
| 215 |
days < 45 && template('month', 1) || |
| 216 |
days < 365 && template('months', days / 30) || |
| 217 |
years < 1.5 && template('year', 1) || |
| 218 |
template('years', years) |
| 219 |
) + templates.suffix; |
| 220 |
}; |
| 221 |
|
| 222 |
var elements = document.getElementsByClassName(selector); |
| 223 |
if (selector && elements && elements.length) { |
| 224 |
for (var i in elements) { |
| 225 |
var $el = elements[i]; |
| 226 |
if (typeof $el === 'object') { |
| 227 |
$el.innerHTML = '<i class="far fa-clock"></i> ' + timer($el.getAttribute('title') || $el.getAttribute('datetime')); |
| 228 |
} |
| 229 |
} |
| 230 |
} |
| 231 |
|
| 232 |
// update time every minute |
| 233 |
setTimeout(function() { |
| 234 |
aui_time_ago(selector); |
| 235 |
}, 60000); |
| 236 |
|
| 237 |
} |
| 238 |
|
| 239 |
/** |
| 240 |
* Initiate tooltips on the page. |
| 241 |
*/ |
| 242 |
function aui_init_tooltips(){ |
| 243 |
if (typeof jQuery.fn.tooltip === 'function') { |
| 244 |
jQuery('[data-bs-toggle="tooltip"]').tooltip(); |
| 245 |
} else { |
| 246 |
console.log('jQuery.fn.tooltip not found'); |
| 247 |
} |
| 248 |
|
| 249 |
if (typeof jQuery.fn.popover === 'function') { |
| 250 |
jQuery('[data-bs-toggle="popover"]').popover(); |
| 251 |
jQuery('[data-bs-toggle="popover-html"]').popover({ |
| 252 |
html: true, |
| 253 |
sanitize: false |
| 254 |
}); |
| 255 |
} else { |
| 256 |
console.log('jQuery.fn.popover not found'); |
| 257 |
} |
| 258 |
|
| 259 |
// fix popover container compatibility |
| 260 |
jQuery('[data-bs-toggle="popover"],[data-bs-toggle="popover-html"]').on('inserted.bs.popover', function() { |
| 261 |
jQuery('body > .popover').wrapAll("<div class='bsui' />"); |
| 262 |
}); |
| 263 |
} |
| 264 |
|
| 265 |
/** |
| 266 |
* Initiate flatpickrs on the page. |
| 267 |
*/ |
| 268 |
$aui_doing_init_flatpickr = false; |
| 269 |
function aui_init_flatpickr(){ |
| 270 |
if ( typeof jQuery.fn.flatpickr === "function" && !$aui_doing_init_flatpickr) { |
| 271 |
$aui_doing_init_flatpickr = true; |
| 272 |
<?php if ( ! empty( $flatpickr_locale ) ) { ?>try{flatpickr.localize(<?php echo $flatpickr_locale; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>);}catch(err){console.log(err.message);}<?php } ?> |
| 273 |
jQuery('input[data-aui-init="flatpickr"]:not(.flatpickr-input)').flatpickr(); |
| 274 |
} |
| 275 |
$aui_doing_init_flatpickr = false; |
| 276 |
} |
| 277 |
|
| 278 |
/** |
| 279 |
* Initiate iconpicker on the page. |
| 280 |
*/ |
| 281 |
$aui_doing_init_iconpicker = false; |
| 282 |
function aui_init_iconpicker(){ |
| 283 |
if ( typeof jQuery.fn.iconpicker === "function" && !$aui_doing_init_iconpicker) { |
| 284 |
$aui_doing_init_iconpicker = true; |
| 285 |
jQuery('input[data-aui-init="iconpicker"]:not(.iconpicker-input)').iconpicker(); |
| 286 |
} |
| 287 |
$aui_doing_init_iconpicker= false; |
| 288 |
} |
| 289 |
|
| 290 |
function aui_modal_iframe($title,$url,$footer,$dismissible,$class,$dialog_class,$body_class,responsive){ |
| 291 |
if(!$body_class){$body_class = 'p-0';} |
| 292 |
var wClass = 'text-center position-absolute w-100 text-dark overlay overlay-white p-0 m-0 d-flex justify-content-center align-items-center'; |
| 293 |
var wStyle = ''; |
| 294 |
var sStyle = ''; |
| 295 |
var $body = "", sClass = "w-100 p-0 m-0"; |
| 296 |
if (responsive) { |
| 297 |
$body += '<div class="embed-responsive embed-responsive-16by9 ratio ratio-16x9">'; |
| 298 |
wClass += ' h-100'; |
| 299 |
sClass += ' embed-responsive-item'; |
| 300 |
} else { |
| 301 |
wClass += ' vh-100'; |
| 302 |
sClass += ' vh-100'; |
| 303 |
wStyle += ' height: 90vh !important;'; |
| 304 |
sStyle += ' height: 90vh !important;'; |
| 305 |
} |
| 306 |
$body += '<div class="ac-preview-loading ' + wClass + '" style="left:0;top:0;' + wStyle + '"><div class="spinner-border" role="status"></div></div>'; |
| 307 |
$body += '<iframe id="embedModal-iframe" class="' + sClass + '" style="' + sStyle + '" src="" width="100%" height="100%" frameborder="0" allowtransparency="true"></iframe>'; |
| 308 |
if (responsive) { |
| 309 |
$body += '</div>'; |
| 310 |
} |
| 311 |
$m = aui_modal($title,$body,$footer,$dismissible,$class,$dialog_class,$body_class); |
| 312 |
|
| 313 |
// myModalEl.addEventListener('hidden.bs.modal', event => { |
| 314 |
// jQuery(".aui-carousel-modal iframe").attr('src', ''); |
| 315 |
// }); |
| 316 |
|
| 317 |
const auiModal = document.getElementById('aui-modal'); |
| 318 |
auiModal.addEventListener( 'shown.bs.modal', function ( e ) { |
| 319 |
iFrame = jQuery( '#embedModal-iframe') ; |
| 320 |
|
| 321 |
jQuery('.ac-preview-loading').removeClass('d-none').addClass('d-flex'); |
| 322 |
|
| 323 |
iFrame.attr({ |
| 324 |
src: $url |
| 325 |
}); |
| 326 |
|
| 327 |
//resize the iframe once loaded. |
| 328 |
iFrame.load(function() { |
| 329 |
jQuery('.ac-preview-loading').removeClass('d-flex').addClass('d-none'); |
| 330 |
}); |
| 331 |
}); |
| 332 |
|
| 333 |
return $m; |
| 334 |
} |
| 335 |
|
| 336 |
function aui_modal($title,$body,$footer,$dismissible,$class,$dialog_class,$body_class) { |
| 337 |
if(!$class){$class = '';} |
| 338 |
if(!$dialog_class){$dialog_class = '';} |
| 339 |
if(!$body){$body = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';} |
| 340 |
|
| 341 |
// remove it first |
| 342 |
jQuery('.aui-modal').remove(); |
| 343 |
jQuery('.modal-backdrop').remove(); |
| 344 |
jQuery('body').css({'overflow': '','padding-right':''}); |
| 345 |
|
| 346 |
|
| 347 |
// var modal = document.getElementById('aui-modal'); |
| 348 |
|
| 349 |
var $modal = ''; |
| 350 |
|
| 351 |
$modal += '<div id="aui-modal" class="modal aui-modal fade shadow bsui '+$class+'" tabindex="-1">'+ |
| 352 |
'<div class="modal-dialog modal-dialog-centered '+$dialog_class+'">'+ |
| 353 |
'<div class="modal-content border-0 shadow">'; |
| 354 |
|
| 355 |
if($title) { |
| 356 |
$modal += '<div class="modal-header">' + |
| 357 |
'<h5 class="modal-title">' + $title + '</h5>'; |
| 358 |
|
| 359 |
if ($dismissible) { |
| 360 |
$modal += '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">' + |
| 361 |
'</button>'; |
| 362 |
} |
| 363 |
|
| 364 |
$modal += '</div>'; |
| 365 |
} |
| 366 |
$modal += '<div class="modal-body '+$body_class+'">'+ |
| 367 |
$body+ |
| 368 |
'</div>'; |
| 369 |
|
| 370 |
if($footer){ |
| 371 |
$modal += '<div class="modal-footer">'+ |
| 372 |
$footer + |
| 373 |
'</div>'; |
| 374 |
} |
| 375 |
|
| 376 |
$modal +='</div>'+ |
| 377 |
'</div>'+ |
| 378 |
'</div>'; |
| 379 |
|
| 380 |
jQuery('body').append($modal); |
| 381 |
|
| 382 |
|
| 383 |
|
| 384 |
// const ayeModal = modal ? bootstrap.Modal.getInstance( modal ) : new bootstrap.Modal('#aui-modal', {}); |
| 385 |
const ayeModal = new bootstrap.Modal('.aui-modal', {}); |
| 386 |
// ayeModal.hide().show(); |
| 387 |
ayeModal.show(); |
| 388 |
|
| 389 |
// return jQuery('.aui-modal').modal('hide').modal({ |
| 390 |
// //backdrop: 'static' |
| 391 |
// }); |
| 392 |
} |
| 393 |
|
| 394 |
/** |
| 395 |
* Show / hide fields depending on conditions. |
| 396 |
*/ |
| 397 |
function aui_conditional_fields(form){ |
| 398 |
jQuery(form).find(".aui-conditional-field").each(function () { |
| 399 |
|
| 400 |
var $element_require = jQuery(this).data('element-require'); |
| 401 |
|
| 402 |
if ($element_require) { |
| 403 |
|
| 404 |
$element_require = $element_require.replace("'", "'"); // replace single quotes |
| 405 |
$element_require = $element_require.replace(""", '"'); // replace double quotes |
| 406 |
if (aui_check_form_condition($element_require,form)) { |
| 407 |
jQuery(this).removeClass('d-none'); |
| 408 |
} else { |
| 409 |
jQuery(this).addClass('d-none'); |
| 410 |
} |
| 411 |
} |
| 412 |
}); |
| 413 |
} |
| 414 |
|
| 415 |
/** |
| 416 |
* Check form condition |
| 417 |
*/ |
| 418 |
function aui_check_form_condition(condition,form) { |
| 419 |
if (form) { |
| 420 |
condition = condition.replace(/\(form\)/g, "('"+form+"')"); |
| 421 |
} |
| 422 |
return new Function("return " + condition+";")(); |
| 423 |
} |
| 424 |
|
| 425 |
/** |
| 426 |
* A function to determine if a element is on screen. |
| 427 |
*/ |
| 428 |
jQuery.fn.aui_isOnScreen = function(){ |
| 429 |
|
| 430 |
var win = jQuery(window); |
| 431 |
|
| 432 |
var viewport = { |
| 433 |
top : win.scrollTop(), |
| 434 |
left : win.scrollLeft() |
| 435 |
}; |
| 436 |
viewport.right = viewport.left + win.width(); |
| 437 |
viewport.bottom = viewport.top + win.height(); |
| 438 |
|
| 439 |
var bounds = this.offset(); |
| 440 |
bounds.right = bounds.left + this.outerWidth(); |
| 441 |
bounds.bottom = bounds.top + this.outerHeight(); |
| 442 |
|
| 443 |
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); |
| 444 |
|
| 445 |
}; |
| 446 |
|
| 447 |
/** |
| 448 |
* Maybe show multiple carousel items if set to do so. |
| 449 |
*/ |
| 450 |
function aui_carousel_maybe_show_multiple_items($carousel){ |
| 451 |
var $items = {}; |
| 452 |
var $item_count = 0; |
| 453 |
|
| 454 |
// maybe backup |
| 455 |
if(!jQuery($carousel).find('.carousel-inner-original').length){ |
| 456 |
jQuery($carousel).append('<div class="carousel-inner-original d-none">'+jQuery($carousel).find('.carousel-inner').html().replaceAll('carousel-item','not-carousel-item')+'</div>'); |
| 457 |
} |
| 458 |
|
| 459 |
// Get the original items html |
| 460 |
jQuery($carousel).find('.carousel-inner-original .not-carousel-item').each(function () { |
| 461 |
$items[$item_count] = jQuery(this).html(); |
| 462 |
$item_count++; |
| 463 |
}); |
| 464 |
|
| 465 |
// bail if no items |
| 466 |
if(!$item_count){return;} |
| 467 |
|
| 468 |
if(jQuery(window).width() <= 576){ |
| 469 |
// maybe restore original |
| 470 |
if(jQuery($carousel).find('.carousel-inner').hasClass('aui-multiple-items') && jQuery($carousel).find('.carousel-inner-original').length){ |
| 471 |
jQuery($carousel).find('.carousel-inner').removeClass('aui-multiple-items').html(jQuery($carousel).find('.carousel-inner-original').html().replaceAll('not-carousel-item','carousel-item')); |
| 472 |
jQuery($carousel).find(".carousel-indicators li").removeClass("d-none"); |
| 473 |
} |
| 474 |
|
| 475 |
}else{ |
| 476 |
// new items |
| 477 |
var $md_count = jQuery($carousel).data('limit_show'); |
| 478 |
var $md_cols_count = jQuery($carousel).data('cols_show'); |
| 479 |
var $new_items = ''; |
| 480 |
var $new_items_count = 0; |
| 481 |
var $new_item_count = 0; |
| 482 |
var $closed = true; |
| 483 |
Object.keys($items).forEach(function(key,index) { |
| 484 |
|
| 485 |
// close |
| 486 |
if(index != 0 && Number.isInteger(index/$md_count) ){ |
| 487 |
$new_items += '</div></div>'; |
| 488 |
$closed = true; |
| 489 |
} |
| 490 |
|
| 491 |
// open |
| 492 |
if(index == 0 || Number.isInteger(index/$md_count) ){ |
| 493 |
$row_cols_class = $md_cols_count ? ' g-lg-4 g-3 row-cols-1 row-cols-lg-' + $md_cols_count : ''; |
| 494 |
$active = index == 0 ? 'active' : ''; |
| 495 |
$new_items += '<div class="carousel-item '+$active+'"><div class="row' + $row_cols_class + ' ">'; // mb to account for shadows (removed mb-3 as it was causing padding issues |
| 496 |
$closed = false; |
| 497 |
$new_items_count++; |
| 498 |
$new_item_count = 0; |
| 499 |
} |
| 500 |
|
| 501 |
// content |
| 502 |
$new_items += '<div class="col ">'+$items[index]+'</div>'; |
| 503 |
$new_item_count++; |
| 504 |
|
| 505 |
|
| 506 |
}); |
| 507 |
|
| 508 |
// close if not closed in the loop |
| 509 |
if(!$closed){ |
| 510 |
// check for spares |
| 511 |
if($md_count-$new_item_count > 0){ |
| 512 |
$placeholder_count = $md_count-$new_item_count; |
| 513 |
while($placeholder_count > 0){ |
| 514 |
$new_items += '<div class="col "></div>'; |
| 515 |
$placeholder_count--; |
| 516 |
} |
| 517 |
|
| 518 |
} |
| 519 |
|
| 520 |
$new_items += '</div></div>'; |
| 521 |
} |
| 522 |
|
| 523 |
// insert the new items |
| 524 |
jQuery($carousel).find('.carousel-inner').addClass('aui-multiple-items').html($new_items); |
| 525 |
|
| 526 |
// fix any lazyload images in the active slider |
| 527 |
jQuery($carousel).find('.carousel-item.active img').each(function () { |
| 528 |
// fix the srcset |
| 529 |
if(real_srcset = jQuery(this).attr("data-srcset")){ |
| 530 |
if(!jQuery(this).attr("srcset")) jQuery(this).attr("srcset",real_srcset); |
| 531 |
} |
| 532 |
// fix the src |
| 533 |
if(real_src = jQuery(this).attr("data-src")){ |
| 534 |
if(!jQuery(this).attr("srcset")) jQuery(this).attr("src",real_src); |
| 535 |
} |
| 536 |
}); |
| 537 |
|
| 538 |
// maybe fix carousel indicators |
| 539 |
$hide_count = $new_items_count-1; |
| 540 |
jQuery($carousel).find(".carousel-indicators li:gt("+$hide_count+")").addClass("d-none"); |
| 541 |
} |
| 542 |
|
| 543 |
// bootstrap.Carousel.dispose($carousel); |
| 544 |
// console.log( bootstrap.Carousel.getOrCreateInstance($carousel)._getItems() ); |
| 545 |
// trigger a global action to say we have |
| 546 |
jQuery( window ).trigger( "aui_carousel_multiple" ); |
| 547 |
} |
| 548 |
|
| 549 |
/** |
| 550 |
* Init Multiple item carousels. |
| 551 |
*/ |
| 552 |
function aui_init_carousel_multiple_items(){ |
| 553 |
jQuery(window).on("resize",function(){ |
| 554 |
jQuery('.carousel-multiple-items').each(function () { |
| 555 |
aui_carousel_maybe_show_multiple_items(this); |
| 556 |
}); |
| 557 |
}); |
| 558 |
|
| 559 |
// run now |
| 560 |
jQuery('.carousel-multiple-items').each(function () { |
| 561 |
aui_carousel_maybe_show_multiple_items(this); |
| 562 |
}); |
| 563 |
} |
| 564 |
|
| 565 |
/** |
| 566 |
* Allow navs to use multiple sub menus. |
| 567 |
*/ |
| 568 |
function init_nav_sub_menus(){ |
| 569 |
|
| 570 |
jQuery('.navbar-multi-sub-menus').each(function(i, obj) { |
| 571 |
// Check if already initialized, if so continue. |
| 572 |
if(jQuery(this).hasClass("has-sub-sub-menus")){return true;} |
| 573 |
|
| 574 |
// Make sure its always expanded |
| 575 |
jQuery(this).addClass('has-sub-sub-menus'); |
| 576 |
|
| 577 |
jQuery(this).find( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) { |
| 578 |
var $el = jQuery( this ); |
| 579 |
$el.toggleClass('active-dropdown'); |
| 580 |
var $parent = jQuery( this ).offsetParent( ".dropdown-menu" ); |
| 581 |
if ( !jQuery( this ).next().hasClass( 'show' ) ) { |
| 582 |
jQuery( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" ); |
| 583 |
} |
| 584 |
var $subMenu = jQuery( this ).next( ".dropdown-menu" ); |
| 585 |
$subMenu.toggleClass( 'show' ); |
| 586 |
|
| 587 |
jQuery( this ).parent( "li" ).toggleClass( 'show' ); |
| 588 |
|
| 589 |
jQuery( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) { |
| 590 |
jQuery( '.dropdown-menu .show' ).removeClass( "show" ); |
| 591 |
$el.removeClass('active-dropdown'); |
| 592 |
} ); |
| 593 |
|
| 594 |
if ( !$parent.parent().hasClass( 'navbar-nav' ) ) { |
| 595 |
$el.next().addClass('position-relative border-top border-bottom'); |
| 596 |
} |
| 597 |
|
| 598 |
return false; |
| 599 |
} ); |
| 600 |
|
| 601 |
}); |
| 602 |
} |
| 603 |
|
| 604 |
/** |
| 605 |
* Open a lightbox when an embed item is clicked. |
| 606 |
*/ |
| 607 |
function aui_lightbox_embed($link,ele){ |
| 608 |
ele.preventDefault(); |
| 609 |
|
| 610 |
// remove it first |
| 611 |
jQuery('.aui-carousel-modal').remove(); |
| 612 |
|
| 613 |
var $modal = '<div class="modal fade aui-carousel-modal bsui" id="aui-carousel-modal" tabindex="-1" role="dialog" aria-labelledby="aui-modal-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered modal-xl mw-100"><div class="modal-content bg-transparent border-0 shadow-none"><div class="modal-header"><h5 class="modal-title" id="aui-modal-title"></h5></div><div class="modal-body text-center"><i class="fas fa-circle-notch fa-spin fa-3x"></i></div></div></div></div>'; |
| 614 |
jQuery('body').append($modal); |
| 615 |
|
| 616 |
const ayeModal = new bootstrap.Modal('.aui-carousel-modal', {}); |
| 617 |
|
| 618 |
const myModalEl = document.getElementById('aui-carousel-modal'); |
| 619 |
myModalEl.addEventListener('hidden.bs.modal', event => { |
| 620 |
jQuery(".aui-carousel-modal iframe").attr('src', ''); |
| 621 |
}); |
| 622 |
|
| 623 |
jQuery('.aui-carousel-modal').on('shown.bs.modal', function(e) { |
| 624 |
jQuery('.aui-carousel-modal .carousel-item.active').find('iframe').each(function() { |
| 625 |
var $iframe = jQuery(this); |
| 626 |
$iframe.parent().find('.ac-preview-loading').removeClass('d-none').addClass('d-flex'); |
| 627 |
if (!$iframe.attr('src') && $iframe.data('src')) { |
| 628 |
$iframe.attr('src', $iframe.data('src')); |
| 629 |
} |
| 630 |
$iframe.on('load', function() { |
| 631 |
setTimeout(function() { |
| 632 |
$iframe.parent().find('.ac-preview-loading').removeClass('d-flex').addClass('d-none'); |
| 633 |
}, 1250); |
| 634 |
}); |
| 635 |
}); |
| 636 |
}); |
| 637 |
|
| 638 |
$container = jQuery($link).closest('.aui-gallery'); |
| 639 |
|
| 640 |
$clicked_href = jQuery($link).attr('href'); |
| 641 |
$images = []; |
| 642 |
$container.find('.aui-lightbox-image, .aui-lightbox-iframe').each(function() { |
| 643 |
var a = this; |
| 644 |
var href = jQuery(a).attr('href'); |
| 645 |
if (href) { |
| 646 |
$images.push(href); |
| 647 |
} |
| 648 |
}); |
| 649 |
|
| 650 |
if( $images.length ){ |
| 651 |
var $carousel = '<div id="aui-embed-slider-modal" class="carousel slide" >'; |
| 652 |
|
| 653 |
// indicators |
| 654 |
if($images.length > 1){ |
| 655 |
$i = 0; |
| 656 |
$carousel += '<ol class="carousel-indicators position-fixed">'; |
| 657 |
$container.find('.aui-lightbox-image, .aui-lightbox-iframe').each(function() { |
| 658 |
$active = $clicked_href == jQuery(this).attr('href') ? 'active' : ''; |
| 659 |
$carousel += '<li data-bs-target="#aui-embed-slider-modal" data-bs-slide-to="'+$i+'" class="'+$active+'"></li>'; |
| 660 |
$i++; |
| 661 |
|
| 662 |
}); |
| 663 |
$carousel += '</ol>'; |
| 664 |
} |
| 665 |
|
| 666 |
// items |
| 667 |
$i = 0; |
| 668 |
$rtl_class = '<?php echo is_rtl() ? 'justify-content-end' : 'justify-content-start'; ?>'; |
| 669 |
$carousel += '<div class="carousel-inner d-flex align-items-center ' + $rtl_class + '">'; |
| 670 |
$container.find('.aui-lightbox-image').each(function() { |
| 671 |
var a = this; |
| 672 |
var href = jQuery(a).attr('href'); |
| 673 |
|
| 674 |
$active = $clicked_href == jQuery(this).attr('href') ? 'active' : ''; |
| 675 |
$carousel += '<div class="carousel-item '+ $active+'"><div>'; |
| 676 |
|
| 677 |
// image |
| 678 |
var css_height = window.innerWidth > window.innerHeight ? '90vh' : 'auto'; |
| 679 |
var srcset = jQuery(a).find('img').attr('srcset'); |
| 680 |
var sizes = ''; |
| 681 |
if (srcset) { |
| 682 |
var sources = srcset.split(',') |
| 683 |
.map(s => { |
| 684 |
// Using regex /\s+/ handles multiple spaces between the URL and width |
| 685 |
var parts = s.trim().split(/\s+/).filter(Boolean); |
| 686 |
if (parts.length >= 2) { |
| 687 |
return { |
| 688 |
width: parseInt(parts[1].replace('w', '')), |
| 689 |
descriptor: parts[1].replace('w', 'px') // Ensuring the descriptor is in pixels |
| 690 |
}; |
| 691 |
} |
| 692 |
return null; |
| 693 |
}) |
| 694 |
.filter(item => item !== null) // Remove any empty entries |
| 695 |
.sort((a, b) => b.width - a.width); // Sort from largest to smallest for proper descending order |
| 696 |
|
| 697 |
// Build the sizes string |
| 698 |
sizes = sources.map((source, index, array) => { |
| 699 |
// For the largest source, do not include max-width to serve as default for larger viewports |
| 700 |
if (index === 0) { |
| 701 |
return `${source.descriptor}`; // Using full descriptor for the largest image |
| 702 |
} else { |
| 703 |
// For other sources, specify max-width for one pixel less than the current width |
| 704 |
return `(max-width: ${source.width - 1}px) ${array[index - 1].descriptor}`; |
| 705 |
} |
| 706 |
}).reverse().join(', '); // Reverse to start from smallest to largest for logical order |
| 707 |
} |
| 708 |
|
| 709 |
var img = href ? jQuery(a).find('img').clone().attr('src', href ).attr('sizes', sizes ).removeClass().addClass('mx-auto d-block w-auto rounded').css({'max-height':css_height,'max-width':'98%'}).get(0).outerHTML : jQuery(a).find('img').clone().removeClass().addClass('mx-auto d-block w-auto rounded').css({'max-height':css_height,'max-width':'98%'}).get(0).outerHTML; |
| 710 |
$carousel += img; |
| 711 |
// captions |
| 712 |
if(jQuery(a).parent().find('.carousel-caption').length ){ |
| 713 |
$carousel += jQuery(a).parent().find('.carousel-caption').clone().removeClass('sr-only visually-hidden').get(0).outerHTML; |
| 714 |
}else if(jQuery(a).parent().find('.figure-caption').length ){ |
| 715 |
$carousel += jQuery(a).parent().find('.figure-caption').clone().removeClass('sr-only visually-hidden').addClass('carousel-caption').get(0).outerHTML; |
| 716 |
} |
| 717 |
$carousel += '</div></div>'; |
| 718 |
$i++; |
| 719 |
}); |
| 720 |
|
| 721 |
$container.find('.aui-lightbox-iframe').each(function() { |
| 722 |
var a = this; |
| 723 |
var css_height = window.innerWidth > window.innerHeight ? '90vh;' : 'auto;'; |
| 724 |
var styleWidth = $images.length > 1 ? 'max-width:70%;' : ''; |
| 725 |
|
| 726 |
$active = $clicked_href == jQuery(this).attr('href') ? 'active' : ''; |
| 727 |
$carousel += '<div class="carousel-item '+ $active+'"><div class="modal-xl mx-auto ratio ratio-16x9" style="max-height:'+css_height+styleWidth+'">'; |
| 728 |
|
| 729 |
// iframe |
| 730 |
var url = jQuery(a).attr('href'); |
| 731 |
var iframe = '<div class="ac-preview-loading text-light d-none" style="left:0;top:0;height:'+css_height +'"><div class="spinner-border m-auto" role="status"></div></div>'; |
| 732 |
iframe += '<iframe class="aui-carousel-iframe" style="height:'+css_height +'" src="" data-src="'+url+'?rel=0&showinfo=0&modestbranding=1&autoplay=1" allow="autoplay"></iframe>'; |
| 733 |
var img = iframe ;//.css('height',css_height).get(0).outerHTML; |
| 734 |
$carousel += img; |
| 735 |
|
| 736 |
$carousel += '</div></div>'; |
| 737 |
$i++; |
| 738 |
}); |
| 739 |
$carousel += '</div>'; |
| 740 |
|
| 741 |
// next/prev indicators |
| 742 |
if($images.length > 1) { |
| 743 |
$carousel += '<a class="carousel-control-prev" href="#aui-embed-slider-modal" role="button" data-bs-slide="prev">'; |
| 744 |
$carousel += '<span class="carousel-control-prev-icon" aria-hidden="true"></span>'; |
| 745 |
$carousel += ' <a class="carousel-control-next" href="#aui-embed-slider-modal" role="button" data-bs-slide="next">'; |
| 746 |
$carousel += '<span class="carousel-control-next-icon" aria-hidden="true"></span>'; |
| 747 |
$carousel += '</a>'; |
| 748 |
} |
| 749 |
|
| 750 |
$carousel += '</div>'; |
| 751 |
|
| 752 |
var $close = '<button type="button" class="btn-close btn-close-white text-end position-fixed" style="right: 20px;top: 10px; z-index: 1055;" data-bs-dismiss="modal" aria-label="Close"></button>'; |
| 753 |
|
| 754 |
jQuery('.aui-carousel-modal .modal-content').html($carousel).prepend($close); |
| 755 |
|
| 756 |
// ayeModal.getOrCreateInstance(); |
| 757 |
ayeModal.show(); |
| 758 |
|
| 759 |
/* Support carousel swipe in BS modal on touch device */ |
| 760 |
try { |
| 761 |
if ('ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0) { |
| 762 |
let _bsC = new bootstrap.Carousel('#aui-embed-slider-modal'); |
| 763 |
} |
| 764 |
} catch(err) {} |
| 765 |
|
| 766 |
// enable ajax load |
| 767 |
//gd_init_carousel_ajax(); |
| 768 |
} |
| 769 |
} |
| 770 |
|
| 771 |
/** |
| 772 |
* Init lightbox embed. |
| 773 |
*/ |
| 774 |
function aui_init_lightbox_embed(){ |
| 775 |
// Open a lightbox for embeded items |
| 776 |
jQuery('.aui-lightbox-image, .aui-lightbox-iframe').off('click').on("click",function(ele) { |
| 777 |
aui_lightbox_embed(this,ele); |
| 778 |
}); |
| 779 |
} |
| 780 |
|
| 781 |
/** |
| 782 |
* Init modal iframe. |
| 783 |
*/ |
| 784 |
function aui_init_modal_iframe() { |
| 785 |
jQuery('.aui-has-embed, [data-aui-embed="iframe"]').each(function(e){ |
| 786 |
if (!jQuery(this).hasClass('aui-modal-iframed') && jQuery(this).data('embed-url')) { |
| 787 |
jQuery(this).addClass('aui-modal-iframed'); |
| 788 |
|
| 789 |
jQuery(this).on("click",function(e1) { |
| 790 |
aui_modal_iframe('',jQuery(this).data('embed-url'),'',true,'','modal-lg','aui-modal-iframe p-0',true); |
| 791 |
return false; |
| 792 |
}); |
| 793 |
} |
| 794 |
}); |
| 795 |
} |
| 796 |
|
| 797 |
/** |
| 798 |
* Show a toast. |
| 799 |
*/ |
| 800 |
$aui_doing_toast = false; |
| 801 |
function aui_toast($id,$type,$title,$title_small,$body,$time,$can_close){ |
| 802 |
|
| 803 |
if($aui_doing_toast){setTimeout(function(){ |
| 804 |
aui_toast($id,$type,$title,$title_small,$body,$time,$can_close); |
| 805 |
}, 500); return;} |
| 806 |
|
| 807 |
$aui_doing_toast = true; |
| 808 |
|
| 809 |
if($can_close == null){$can_close = false;} |
| 810 |
if($time == '' || $time == null ){$time = 3000;} |
| 811 |
|
| 812 |
// if already setup then just show |
| 813 |
if(document.getElementById($id)){ |
| 814 |
jQuery('#'+$id).toast('show'); |
| 815 |
setTimeout(function(){ $aui_doing_toast = false; }, 500); |
| 816 |
return; |
| 817 |
} |
| 818 |
|
| 819 |
var uniqid = Date.now(); |
| 820 |
if($id){ |
| 821 |
uniqid = $id; |
| 822 |
} |
| 823 |
|
| 824 |
$op = ""; |
| 825 |
$tClass = ''; |
| 826 |
$thClass = ''; |
| 827 |
$icon = ""; |
| 828 |
|
| 829 |
if ($type == 'success') { |
| 830 |
$op = "opacity:.92;"; |
| 831 |
$tClass = 'alert bg-success w-auto'; |
| 832 |
$thClass = 'bg-transparent border-0 text-white'; |
| 833 |
$icon = "<div class='h5 m-0 p-0'><i class='fas fa-check-circle me-2'></i></div>"; |
| 834 |
} else if ($type == 'error' || $type == 'danger') { |
| 835 |
$op = "opacity:.92;"; |
| 836 |
$tClass = 'alert bg-danger w-auto'; |
| 837 |
$thClass = 'bg-transparent border-0 text-white'; |
| 838 |
$icon = "<div class='h5 m-0 p-0'><i class='far fa-times-circle me-2'></i></div>"; |
| 839 |
} else if ($type == 'info') { |
| 840 |
$op = "opacity:.92;"; |
| 841 |
$tClass = 'alert bg-info w-auto'; |
| 842 |
$thClass = 'bg-transparent border-0 text-white'; |
| 843 |
$icon = "<div class='h5 m-0 p-0'><i class='fas fa-info-circle me-2'></i></div>"; |
| 844 |
} else if ($type == 'warning') { |
| 845 |
$op = "opacity:.92;"; |
| 846 |
$tClass = 'alert bg-warning w-auto'; |
| 847 |
$thClass = 'bg-transparent border-0 text-dark'; |
| 848 |
$icon = "<div class='h5 m-0 p-0'><i class='fas fa-exclamation-triangle me-2'></i></div>"; |
| 849 |
} |
| 850 |
|
| 851 |
|
| 852 |
// add container if not exist |
| 853 |
if(!document.getElementById("aui-toasts")){ |
| 854 |
jQuery('body').append('<div class="bsui" id="aui-toasts"><div class="position-fixed aui-toast-bottom-right pr-3 pe-3 mb-1" style="z-index: 500000;right: 0;bottom: 0;'+$op+'"></div></div>'); |
| 855 |
} |
| 856 |
|
| 857 |
$toast = '<div id="'+uniqid+'" class="toast fade hide shadow hover-shadow '+$tClass+'" style="" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="'+$time+'">'; |
| 858 |
if($type || $title || $title_small){ |
| 859 |
$toast += '<div class="toast-header '+$thClass+'">'; |
| 860 |
if($icon ){$toast += $icon;} |
| 861 |
if($title){$toast += '<strong class="me-auto">'+$title+'</strong>';} |
| 862 |
if($title_small){$toast += '<small>'+$title_small+'</small>';} |
| 863 |
if($can_close){$toast += '<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>';} |
| 864 |
$toast += '</div>'; |
| 865 |
} |
| 866 |
|
| 867 |
if($body){ |
| 868 |
$toast += '<div class="toast-body">'+$body+'</div>'; |
| 869 |
} |
| 870 |
|
| 871 |
$toast += '</div>'; |
| 872 |
|
| 873 |
jQuery('.aui-toast-bottom-right').prepend($toast); |
| 874 |
jQuery('#'+uniqid).toast('show'); |
| 875 |
setTimeout(function(){ $aui_doing_toast = false; }, 500); |
| 876 |
} |
| 877 |
|
| 878 |
/** |
| 879 |
* Animate a number. |
| 880 |
*/ |
| 881 |
function aui_init_counters(){ |
| 882 |
|
| 883 |
const animNum = (EL) => { |
| 884 |
|
| 885 |
if (EL._isAnimated) return; // Animate only once! |
| 886 |
EL._isAnimated = true; |
| 887 |
|
| 888 |
let end = EL.dataset.auiend; |
| 889 |
let start = EL.dataset.auistart; |
| 890 |
let duration = EL.dataset.auiduration ? EL.dataset.auiduration : 2000; |
| 891 |
let seperator = EL.dataset.auisep ? EL.dataset.auisep: ''; |
| 892 |
|
| 893 |
jQuery(EL).prop('Counter', start).animate({ |
| 894 |
Counter: end |
| 895 |
}, { |
| 896 |
duration: Math.abs(duration), |
| 897 |
easing: 'swing', |
| 898 |
step: function(now) { |
| 899 |
const text = seperator ? (Math.ceil(now)).toLocaleString('en-US') : Math.ceil(now); |
| 900 |
const html = seperator ? text.split(",").map(n => `<span class="count">${n}</span>`).join(",") : text; |
| 901 |
if(seperator && seperator!=','){ |
| 902 |
html.replace(',',seperator); |
| 903 |
} |
| 904 |
jQuery(this).html(html); |
| 905 |
} |
| 906 |
}); |
| 907 |
}; |
| 908 |
|
| 909 |
const inViewport = (entries, observer) => { |
| 910 |
// alert(1); |
| 911 |
entries.forEach(entry => { |
| 912 |
if (entry.isIntersecting) animNum(entry.target); |
| 913 |
}); |
| 914 |
}; |
| 915 |
|
| 916 |
jQuery("[data-auicounter]").each((i, EL) => { |
| 917 |
const observer = new IntersectionObserver(inViewport); |
| 918 |
observer.observe(EL); |
| 919 |
}); |
| 920 |
} |
| 921 |
|
| 922 |
|
| 923 |
/** |
| 924 |
* Initiate all AUI JS. |
| 925 |
*/ |
| 926 |
function aui_init(){ |
| 927 |
|
| 928 |
// init counters |
| 929 |
aui_init_counters(); |
| 930 |
|
| 931 |
// nav menu submenus |
| 932 |
init_nav_sub_menus(); |
| 933 |
|
| 934 |
// init tooltips |
| 935 |
aui_init_tooltips(); |
| 936 |
|
| 937 |
// init select2 |
| 938 |
aui_init_select2(); |
| 939 |
|
| 940 |
// init flatpickr |
| 941 |
aui_init_flatpickr(); |
| 942 |
|
| 943 |
// init iconpicker |
| 944 |
aui_init_iconpicker(); |
| 945 |
|
| 946 |
// init Greedy nav |
| 947 |
aui_init_greedy_nav(); |
| 948 |
|
| 949 |
// Set times to time ago |
| 950 |
aui_time_ago('timeago'); |
| 951 |
|
| 952 |
// init multiple item carousels |
| 953 |
aui_init_carousel_multiple_items(); |
| 954 |
|
| 955 |
// init lightbox embeds |
| 956 |
aui_init_lightbox_embed(); |
| 957 |
|
| 958 |
/* Init modal iframe */ |
| 959 |
aui_init_modal_iframe(); |
| 960 |
} |
| 961 |
|
| 962 |
// run on window loaded |
| 963 |
jQuery(window).on("load",function() { |
| 964 |
aui_init(); |
| 965 |
}); |
| 966 |
|
| 967 |
/* Fix modal background scroll on iOS mobile device */ |
| 968 |
jQuery(function($) { |
| 969 |
var ua = navigator.userAgent.toLowerCase(); |
| 970 |
var isiOS = ua.match(/(iphone|ipod|ipad)/); |
| 971 |
if (isiOS) { |
| 972 |
var pS = 0; pM = parseFloat($('body').css('marginTop')); |
| 973 |
|
| 974 |
$(document).on('show.bs.modal', function() { |
| 975 |
pS = window.scrollY; |
| 976 |
$('body').css({ |
| 977 |
marginTop: -pS, |
| 978 |
overflow: 'hidden', |
| 979 |
position: 'fixed', |
| 980 |
}); |
| 981 |
}).on('hidden.bs.modal', function() { |
| 982 |
$('body').css({ |
| 983 |
marginTop: pM, |
| 984 |
overflow: 'visible', |
| 985 |
position: 'inherit', |
| 986 |
}); |
| 987 |
window.scrollTo(0, pS); |
| 988 |
}); |
| 989 |
} |
| 990 |
|
| 991 |
$(document).on('slide.bs.carousel', function(el) { |
| 992 |
var $_modal = $(el.relatedTarget).closest('.aui-carousel-modal:visible').length ? $(el.relatedTarget).closest('.aui-carousel-modal:visible') : ''; |
| 993 |
if ($_modal && $_modal.find('.carousel-item iframe.aui-carousel-iframe').length) { |
| 994 |
/* Unset iframe src */ |
| 995 |
$_modal.find('.carousel-item.active iframe.aui-carousel-iframe').each(function(){ |
| 996 |
if ($(this).attr('src')) { |
| 997 |
$(this).data('src', $(this).attr('src')); |
| 998 |
$(this).attr('src', ''); |
| 999 |
} |
| 1000 |
}); |
| 1001 |
/* Set iframe src */ |
| 1002 |
if ($(el.relatedTarget).find('iframe.aui-carousel-iframe').length) { |
| 1003 |
$(el.relatedTarget).find('.ac-preview-loading').removeClass('d-none').addClass('d-flex'); |
| 1004 |
var $cIframe = $(el.relatedTarget).find('iframe.aui-carousel-iframe'); |
| 1005 |
if (! $cIframe.attr('src') && $cIframe.data('src')) { |
| 1006 |
$cIframe.attr('src', $cIframe.data('src')); |
| 1007 |
} |
| 1008 |
$cIframe.on('load', function(){ |
| 1009 |
setTimeout(function(){$_modal.find('.ac-preview-loading').removeClass('d-flex').addClass('d-none');},1250); |
| 1010 |
}); |
| 1011 |
} |
| 1012 |
} |
| 1013 |
}); |
| 1014 |
}); |
| 1015 |
|
| 1016 |
/** |
| 1017 |
* Show a "confirm" dialog to the user (using jQuery UI's dialog) |
| 1018 |
* |
| 1019 |
* @param {string} message The message to display to the user |
| 1020 |
* @param {string} okButtonText OPTIONAL - The OK button text, defaults to "Yes" |
| 1021 |
* @param {string} cancelButtonText OPTIONAL - The Cancel button text, defaults to "No" |
| 1022 |
* @returns {Q.Promise<boolean>} A promise of a boolean value |
| 1023 |
*/ |
| 1024 |
var aui_confirm = function (message, okButtonText, cancelButtonText, isDelete, large ) { |
| 1025 |
okButtonText = okButtonText || 'Yes'; |
| 1026 |
cancelButtonText = cancelButtonText || 'Cancel'; |
| 1027 |
message = message || 'Are you sure?'; |
| 1028 |
sizeClass = large ? '' : 'modal-sm'; |
| 1029 |
btnClass = isDelete ? 'btn-danger' : 'btn-primary'; |
| 1030 |
|
| 1031 |
deferred = jQuery.Deferred(); |
| 1032 |
var $body = ""; |
| 1033 |
$body += "<h3 class='h4 py-3 text-center text-dark'>"+message+"</h3>"; |
| 1034 |
$body += "<div class='d-flex'>"; |
| 1035 |
$body += "<button class='btn btn-outline-secondary w-50 btn-round' data-bs-dismiss='modal' onclick='deferred.resolve(false);'>"+cancelButtonText+"</button>"; |
| 1036 |
$body += "<button class='btn "+btnClass+" ms-2 w-50 btn-round' data-bs-dismiss='modal' onclick='deferred.resolve(true);'>"+okButtonText+"</button>"; |
| 1037 |
$body += "</div>"; |
| 1038 |
$modal = aui_modal('',$body,'',false,'',sizeClass); |
| 1039 |
|
| 1040 |
return deferred.promise(); |
| 1041 |
}; |
| 1042 |
|
| 1043 |
/** |
| 1044 |
* Flip the color scheem on scroll |
| 1045 |
* @param $value |
| 1046 |
* @param $iframe |
| 1047 |
*/ |
| 1048 |
function aui_flip_color_scheme_on_scroll($value, $iframe){ |
| 1049 |
if(!$value) $value = window.scrollY; |
| 1050 |
|
| 1051 |
var navbar = $iframe ? $iframe.querySelector('.color-scheme-flip-on-scroll') : document.querySelector('.color-scheme-flip-on-scroll'); |
| 1052 |
if (navbar == null) return; |
| 1053 |
|
| 1054 |
let cs_original = navbar.dataset.cso; |
| 1055 |
let cs_scroll = navbar.dataset.css; |
| 1056 |
|
| 1057 |
if (!cs_scroll && !cs_original) { |
| 1058 |
if( navbar.classList.contains('navbar-light') ){ |
| 1059 |
cs_original = 'navbar-light'; |
| 1060 |
cs_scroll = 'navbar-dark'; |
| 1061 |
}else if( navbar.classList.contains('navbar-dark') ){ |
| 1062 |
cs_original = 'navbar-dark'; |
| 1063 |
cs_scroll = 'navbar-light'; |
| 1064 |
} |
| 1065 |
|
| 1066 |
navbar.dataset.cso = cs_original; |
| 1067 |
navbar.dataset.css = cs_scroll; |
| 1068 |
} |
| 1069 |
|
| 1070 |
if($value > 0 || navbar.classList.contains('nav-menu-open') ){ |
| 1071 |
navbar.classList.remove(cs_original); |
| 1072 |
navbar.classList.add(cs_scroll); |
| 1073 |
}else{ |
| 1074 |
navbar.classList.remove(cs_scroll); |
| 1075 |
navbar.classList.add(cs_original); |
| 1076 |
} |
| 1077 |
} |
| 1078 |
|
| 1079 |
/** |
| 1080 |
* Add a window scrolled data element. |
| 1081 |
*/ |
| 1082 |
window.onscroll = function () { |
| 1083 |
aui_set_data_scroll(); |
| 1084 |
aui_flip_color_scheme_on_scroll(); |
| 1085 |
}; |
| 1086 |
|
| 1087 |
/** |
| 1088 |
* Set scroll data element. |
| 1089 |
*/ |
| 1090 |
function aui_set_data_scroll(){ |
| 1091 |
document.documentElement.dataset.scroll = window.scrollY; |
| 1092 |
} |
| 1093 |
|
| 1094 |
// call data scroll function ASAP. |
| 1095 |
aui_set_data_scroll(); |
| 1096 |
aui_flip_color_scheme_on_scroll(); |
| 1097 |
|
| 1098 |
<?php |
| 1099 |
// FSE tweaks. |
| 1100 |
if(!empty($_REQUEST['postType']) || !empty($_REQUEST['canvas']) ){ ?> |
| 1101 |
function aui_fse_set_data_scroll() { |
| 1102 |
console.log('init scroll'); |
| 1103 |
let Iframe = document.getElementsByClassName("edit-site-visual-editor__editor-canvas"); |
| 1104 |
if( Iframe[0] === undefined ){ return; } |
| 1105 |
let iframe_doc = Iframe[0].contentWindow ? Iframe[0].contentWindow.document : Iframe[0].contentDocument; |
| 1106 |
Iframe[0].contentWindow.onscroll = function () { |
| 1107 |
iframe_doc.documentElement.dataset.scroll = Iframe[0].contentWindow.scrollY; |
| 1108 |
aui_flip_color_scheme_on_scroll(Iframe[0].contentWindow.scrollY,iframe_doc); |
| 1109 |
}; |
| 1110 |
} |
| 1111 |
|
| 1112 |
setTimeout(function(){ |
| 1113 |
aui_fse_set_data_scroll(); |
| 1114 |
}, 3000); |
| 1115 |
|
| 1116 |
// fire when URL changes also. |
| 1117 |
let FSElastUrl = location.href; |
| 1118 |
new MutationObserver(() => { |
| 1119 |
const url = location.href; |
| 1120 |
if (url !== FSElastUrl) { |
| 1121 |
FSElastUrl = url; |
| 1122 |
aui_fse_set_data_scroll(); |
| 1123 |
// fire a second time incase of load delays. |
| 1124 |
setTimeout(function(){ |
| 1125 |
aui_fse_set_data_scroll(); |
| 1126 |
}, 2000); |
| 1127 |
} |
| 1128 |
}).observe(document, {subtree: true, childList: true}); |
| 1129 |
|
| 1130 |
|
| 1131 |
/** |
| 1132 |
* Convert hex color to rgb values. |
| 1133 |
* |
| 1134 |
* @param hex |
| 1135 |
* @returns {string|null} |
| 1136 |
*/ |
| 1137 |
function aui_fse_hexToRgb(hex) { |
| 1138 |
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim().substring(0, 7)); |
| 1139 |
return result ? parseInt(result[1], 16) +','+parseInt(result[2], 16)+','+parseInt(result[3], 16) : null; |
| 1140 |
} |
| 1141 |
|
| 1142 |
/** |
| 1143 |
* update colors as the style colour pallet is changed |
| 1144 |
* @param $color |
| 1145 |
*/ |
| 1146 |
function aui_fse_sync_site_colors($color){ |
| 1147 |
|
| 1148 |
const getColorHex = () => { |
| 1149 |
const element = jQuery(".edit-site-visual-editor__editor-canvas").contents().find(".editor-styles-wrapper").get(0); |
| 1150 |
const style = element == null ? '' : window.getComputedStyle(element).getPropertyValue('--wp--preset--color--'+$color); |
| 1151 |
return style; |
| 1152 |
}; |
| 1153 |
|
| 1154 |
// set the initial ColorHex |
| 1155 |
let colorHex = getColorHex(); |
| 1156 |
|
| 1157 |
|
| 1158 |
wp.data.subscribe(() => { |
| 1159 |
|
| 1160 |
// get the current ColorHex |
| 1161 |
const newColorHex = getColorHex(); |
| 1162 |
|
| 1163 |
// only do something if ColorHex has changed. |
| 1164 |
if( newColorHex && colorHex !== newColorHex ) { |
| 1165 |
jQuery(".edit-site-visual-editor__editor-canvas").contents().find("html body").get(0).style.setProperty('--bs-'+$color+'-rgb',aui_fse_hexToRgb(newColorHex)); |
| 1166 |
} |
| 1167 |
|
| 1168 |
// update the newColorHex variable. |
| 1169 |
colorHex = newColorHex; |
| 1170 |
|
| 1171 |
}); |
| 1172 |
} |
| 1173 |
|
| 1174 |
/** |
| 1175 |
* update colors as the style colour pallet is changed |
| 1176 |
* @param $color |
| 1177 |
*/ |
| 1178 |
function aui_fse_sync_site_typography(){ |
| 1179 |
const getGlobalStyles = () => { |
| 1180 |
const { select } = wp.data; |
| 1181 |
const settings = select('core/block-editor').getSettings(); |
| 1182 |
|
| 1183 |
return ( settings && settings.styles && settings.styles[3].css ? settings.styles[3].css : null ); |
| 1184 |
}; |
| 1185 |
|
| 1186 |
// set the initial styles |
| 1187 |
let Styles = getGlobalStyles(); |
| 1188 |
|
| 1189 |
wp.data.subscribe(() => { |
| 1190 |
// get the current styles |
| 1191 |
const newStyles = getGlobalStyles(); |
| 1192 |
|
| 1193 |
// only do something if newStyles has changed. |
| 1194 |
if( newStyles && Styles !== newStyles ) { |
| 1195 |
// heading sizes |
| 1196 |
aui_updateCssRule('body.editor-styles-wrapper h1', 'font-size', aui_parseCSS(newStyles, 'h1', 'font-size')); |
| 1197 |
aui_updateCssRule('body.editor-styles-wrapper h2', 'font-size', aui_parseCSS(newStyles, 'h2', 'font-size')); |
| 1198 |
aui_updateCssRule('body.editor-styles-wrapper h3', 'font-size', aui_parseCSS(newStyles, 'h3', 'font-size')); |
| 1199 |
aui_updateCssRule('body.editor-styles-wrapper h4', 'font-size', aui_parseCSS(newStyles, 'h4', 'font-size')); |
| 1200 |
aui_updateCssRule('body.editor-styles-wrapper h5', 'font-size', aui_parseCSS(newStyles, 'h5', 'font-size')); |
| 1201 |
aui_updateCssRule('body.editor-styles-wrapper h6', 'font-size', aui_parseCSS(newStyles, 'h6', 'font-size')); |
| 1202 |
|
| 1203 |
// ALl Headings |
| 1204 |
aui_updateCssRule('body.editor-styles-wrapper h1, body.editor-styles-wrapper h2, body.editor-styles-wrapper h3, body.editor-styles-wrapper h4, body.editor-styles-wrapper h5, body.editor-styles-wrapper h6', 'font-family', aui_parseCSS(newStyles, 'h1, h2, h3, h4, h5, h6', 'font-family')); |
| 1205 |
|
| 1206 |
// individual headings |
| 1207 |
aui_updateCssRule('body.editor-styles-wrapper h1', 'font-family', aui_parseCSS(newStyles, 'h1{', 'font-family')); |
| 1208 |
aui_updateCssRule('body.editor-styles-wrapper h2', 'font-family', aui_parseCSS(newStyles, 'h2{', 'font-family')); |
| 1209 |
aui_updateCssRule('body.editor-styles-wrapper h3', 'font-family', aui_parseCSS(newStyles, 'h3{', 'font-family')); |
| 1210 |
aui_updateCssRule('body.editor-styles-wrapper h4', 'font-family', aui_parseCSS(newStyles, 'h4{', 'font-family')); |
| 1211 |
aui_updateCssRule('body.editor-styles-wrapper h5', 'font-family', aui_parseCSS(newStyles, 'h5{', 'font-family')); |
| 1212 |
aui_updateCssRule('body.editor-styles-wrapper h6', 'font-family', aui_parseCSS(newStyles, 'h6{', 'font-family')); |
| 1213 |
|
| 1214 |
// console.log(aui_parseCSS(newStyles, 'h2{', 'font-family')); |
| 1215 |
|
| 1216 |
// color |
| 1217 |
aui_updateCssRule('body.editor-styles-wrapper h1, body.editor-styles-wrapper h2, body.editor-styles-wrapper h3, body.editor-styles-wrapper h4, body.editor-styles-wrapper h5, body.editor-styles-wrapper h6', 'color', aui_parseCSS(newStyles, 'h1, h2, h3, h4, h5, h6', 'color')); |
| 1218 |
|
| 1219 |
aui_updateCssRule('body.editor-styles-wrapper h1', 'color', aui_parseCSS(newStyles, 'h1{', 'color')); |
| 1220 |
aui_updateCssRule('body.editor-styles-wrapper h2', 'color', aui_parseCSS(newStyles, 'h2{', 'color')); |
| 1221 |
aui_updateCssRule('body.editor-styles-wrapper h3', 'color', aui_parseCSS(newStyles, 'h3{', 'color')); |
| 1222 |
aui_updateCssRule('body.editor-styles-wrapper h4', 'color', aui_parseCSS(newStyles, 'h4{', 'color')); |
| 1223 |
aui_updateCssRule('body.editor-styles-wrapper h5', 'color', aui_parseCSS(newStyles, 'h5{', 'color')); |
| 1224 |
aui_updateCssRule('body.editor-styles-wrapper h6', 'color', aui_parseCSS(newStyles, 'h6{', 'color')); |
| 1225 |
|
| 1226 |
|
| 1227 |
|
| 1228 |
//background |
| 1229 |
aui_updateCssRule('body.editor-styles-wrapper h1, body.editor-styles-wrapper h2, body.editor-styles-wrapper h3, body.editor-styles-wrapper h4, body.editor-styles-wrapper h5, body.editor-styles-wrapper h6', 'background', aui_parseCSS(newStyles, 'h1, h2, h3, h4, h5, h6', 'background')); |
| 1230 |
|
| 1231 |
aui_updateCssRule('body.editor-styles-wrapper h1', 'background', aui_parseCSS(newStyles, 'h1{', 'background')); |
| 1232 |
aui_updateCssRule('body.editor-styles-wrapper h2', 'background', aui_parseCSS(newStyles, 'h2{', 'background')); |
| 1233 |
aui_updateCssRule('body.editor-styles-wrapper h3', 'background', aui_parseCSS(newStyles, 'h3{', 'background')); |
| 1234 |
aui_updateCssRule('body.editor-styles-wrapper h4', 'background', aui_parseCSS(newStyles, 'h4{', 'background')); |
| 1235 |
aui_updateCssRule('body.editor-styles-wrapper h5', 'background', aui_parseCSS(newStyles, 'h5{', 'background')); |
| 1236 |
aui_updateCssRule('body.editor-styles-wrapper h6', 'background', aui_parseCSS(newStyles, 'h6{', 'background')); |
| 1237 |
|
| 1238 |
|
| 1239 |
|
| 1240 |
// console.log('Font size of h2 is:', fontSize); |
| 1241 |
} |
| 1242 |
|
| 1243 |
// update the newStyles variable. |
| 1244 |
Styles = newStyles; |
| 1245 |
|
| 1246 |
|
| 1247 |
}); |
| 1248 |
} |
| 1249 |
|
| 1250 |
setTimeout(function(){ |
| 1251 |
aui_sync_admin_styles(); |
| 1252 |
}, 10000); |
| 1253 |
|
| 1254 |
function aui_sync_admin_styles(){ |
| 1255 |
aui_fse_sync_site_colors('primary'); |
| 1256 |
aui_fse_sync_site_colors('danger'); |
| 1257 |
aui_fse_sync_site_colors('warning'); |
| 1258 |
aui_fse_sync_site_colors('info'); |
| 1259 |
aui_fse_sync_site_typography(); |
| 1260 |
} |
| 1261 |
|
| 1262 |
// setTimeout(function(){ |
| 1263 |
// aui_listen_global_style_click(); |
| 1264 |
// }, 3000); |
| 1265 |
// |
| 1266 |
// function aui_listen_global_style_click(){ |
| 1267 |
// setTimeout(function(){ |
| 1268 |
// // check for global stylebook clicks |
| 1269 |
// jQuery('.interface-pinned-items button').click(function() { |
| 1270 |
// aui_listen_stylebook_click(); |
| 1271 |
// }); |
| 1272 |
// }, 500); |
| 1273 |
// } |
| 1274 |
// |
| 1275 |
// |
| 1276 |
// |
| 1277 |
// function aui_listen_stylebook_click(){ |
| 1278 |
// setTimeout(function(){ |
| 1279 |
// // check for global stylebook clicks |
| 1280 |
// jQuery('.edit-site-global-styles-sidebar__header .components-button.has-icon').click(function() { |
| 1281 |
// setTimeout(function(){ |
| 1282 |
// aui_sync_admin_styles(); |
| 1283 |
// }, 500); |
| 1284 |
// }); |
| 1285 |
// }, 500); |
| 1286 |
// } |
| 1287 |
|
| 1288 |
|
| 1289 |
|
| 1290 |
|
| 1291 |
function aui_parseCSS(cssString, selector, property) { |
| 1292 |
// Split the CSS string on closing braces |
| 1293 |
const rules = cssString.split('}'); |
| 1294 |
|
| 1295 |
// Search for the selector and property |
| 1296 |
for (let rule of rules) { |
| 1297 |
if (rule.includes(selector) && rule.includes(property)) { |
| 1298 |
// Extract the rule's content |
| 1299 |
const ruleContent = rule.split('{')[1]; |
| 1300 |
|
| 1301 |
// Split properties and search for the desired property |
| 1302 |
const properties = ruleContent.split(';'); |
| 1303 |
for (let prop of properties) { |
| 1304 |
if (prop.includes(property)) { |
| 1305 |
// Extract and return the property value |
| 1306 |
return prop.split(':')[1].trim(); |
| 1307 |
} |
| 1308 |
} |
| 1309 |
} |
| 1310 |
} |
| 1311 |
|
| 1312 |
return null; |
| 1313 |
} |
| 1314 |
|
| 1315 |
// Function to update a CSS rule |
| 1316 |
function aui_updateCssRule(selector, property, value) { |
| 1317 |
// check fi we are viewing stylebook |
| 1318 |
|
| 1319 |
var aui_inline_css = jQuery(".edit-site-visual-editor__editor-canvas").contents().find("#ayecode-ui-fse-inline-css").get(0); |
| 1320 |
var aui_inline_css_stylebook = jQuery(".edit-site-style-book__iframe").contents().find("#ayecode-ui-fse-inline-css").get(0); |
| 1321 |
|
| 1322 |
if (aui_inline_css && aui_inline_css.sheet) { |
| 1323 |
var styleSheet = aui_inline_css.sheet; |
| 1324 |
}else if(aui_inline_css_stylebook && aui_inline_css_stylebook.sheet){ |
| 1325 |
var styleSheet = aui_inline_css_stylebook.sheet; |
| 1326 |
}else{ |
| 1327 |
return; |
| 1328 |
} |
| 1329 |
|
| 1330 |
var rules = styleSheet.cssRules || styleSheet.rules; |
| 1331 |
|
| 1332 |
// console.log(rules); |
| 1333 |
|
| 1334 |
for (var i = 0; i < rules.length; i++) { |
| 1335 |
if (rules[i].selectorText === selector) { |
| 1336 |
rules[i].style[property] = value; |
| 1337 |
// console.log('update rule'); |
| 1338 |
return; // Exit the function once the rule is found and updated |
| 1339 |
} |
| 1340 |
} |
| 1341 |
|
| 1342 |
// If the rule doesn't exist, optionally add it |
| 1343 |
styleSheet.insertRule(`${selector} { ${property}: ${value}; }`, rules.length); |
| 1344 |
// console.log(`insert rule ${selector}`); |
| 1345 |
} |
| 1346 |
|
| 1347 |
<?php } ?> |
| 1348 |
|
| 1349 |
|
| 1350 |
</script> |
| 1351 |
|
