1// Functies voor de menus 2$(function() { 3 $( ".jqMenu" ).menu(); 4 5 $("body").bind("click touchstart", function() { $('.jqMenu').fadeOut('fast'); }); 6 $(".jqMenu").bind("click touchstart", function(e) { e.stopPropagation(); }); 7 $(".jqMenuButton").bind("click touchstart", function(e) { e.stopPropagation(); }); 8 $("#tabs").bind("tabsselect", function(event, ui) { window.location.hash = ui.tab.hash; }); 9 10 $('div.spoiler-title').click(function() { 11 $(this) 12 .children() 13 .first() 14 .toggleClass('show-icon') 15 .toggleClass('hide-icon'); 16 $(this) 17 .parent().children().last().toggle(200); 18 }); 19 20 $('a[href*="#"]:not([href="#"])').click(function() { 21 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 22 var target = $(this.hash); 23 target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 24 if (target.length) { 25 $('html, body').animate({ 26 scrollTop: target.offset().top 27 }, 1000); 28 return false; 29 } 30 } 31 }); 32 33 34 35// $('form').validatr({ location: 'bottom', showall: true }); 36// $('form').validate(); 37 38// var is_safari = navigator.userAgent.indexOf("Safari") > -1; 39// if (is_safari) { 40 var forms = document.getElementsByTagName('form'); 41 42 for (var i = 0; i < forms.length; i++) { 43 forms[i].noValidate = true; 44 forms[i].addEventListener('submit', function(event) { 45 //Prevent submission if checkValidity on the form returns false. 46 if (!event.target.checkValidity()) { 47 event.preventDefault(); 48 var boodschap = ''; 49 50 var els = event.currentTarget.elements; 51 for (var y = 0; y < els.length; y++) { 52/* console.log(els[y].name);
53 if (els[y].validity.valid) { 54 console.log('geldig'); 55 } else console.log('ongeldig');*/ 56 57 if ($(els[y]).hasClass('ongeldig')) { // && String($(els[y]).attr('title')) != 'undefined') { 58 console.log('CLASSONGELDIG'); 59 var labelBoodschap = $("label[for='" + $(els[y]).attr('id') + "']");//.html();// 60 //if (typeof labelBoodschap === "object") labelBoodschap.replace(' *', ''); 61 if (String($.type(labelBoodschap)) == 'object') { 62 labelBoodschap = labelBoodschap.html(); 63 } else labelBoodschap = ''; 64 65 if (String(labelBoodschap) != '' && String(labelBoodschap) != 'undefined' && String(labelBoodschap) != 'null') { 66 if (boodschap != '') boodschap += ', '; 67 boodschap += labelBoodschap.replace(' *', ''); 68 } 69 70 console.log(boodschap); 71 } 72 } 73 if (boodschap != '') boodschap = ":<br>" + boodschap; 74 75 if ($('#systaal').val() == 'en') { 76 showBoodschap('<strong>Be Aware</strong><br>You have not filled in all mandatory fields', 'error'); 77 } else showBoodschap('<strong>LET OP</strong><br>Niet alle verplichte velden zijn ingevuld' + boodschap, 'error'); 78 } 79 }, false); 80 } 81 82 document.addEventListener('keyup', function(e){ 83 var input = e.target; 84 if (!$.nodeName(input, 'input')) return; 85 input.checkValidity(); 86 var element = $(input).parent(); 87 if(input.validity.valid) { 88 $(input).removeClass('ongeldig'); 89 } else { 90 $(input).addClass('ongeldig'); 91 } 92 }); 93 94 if (document.addEventListener) { 95 document.addEventListener('invalid', function(e) { 96 var element = $(e.target); 97 98// if (String(element.attr('title')) != 'undefined') { 99// showBoodschap(element.attr('title'), 'error'); 100// } 101 102 element.addClass('ongeldig'); 103 }, true); 104 } 105}); 106 107/** 108 * iosCheckbox.js 109 * Version: 1.0.0 110 * Author: Ron Masas 111 */ 112 113(function( $ ){ 114 $.fn.extend({ 115 iosCheckbox: function ( ) { 116 $(this).each(function (){ 117 /** 118 * Original checkbox element 119 */ 120 var org_checkbox = $(this); 121 /** 122 * iOS checkbox div 123 */ 124 var ios_checkbox = jQuery("<div>",{class: 'ios-ui-select'}).append(jQuery("<div>",{class: 'inner'})); 125 126 // If the original checkbox is checked, add checked class to the ios checkbox. 127 if (org_checkbox.is(":checked")){ 128 ios_checkbox.addClass("checked"); 129 } 130 // Hide the original checkbox and print the new one. 131 org_checkbox.hide().after(ios_checkbox); 132 // Add click event listener to the ios checkbox 133 ios_checkbox.click(function (){ 134 // Toggel the check state 135 ios_checkbox.toggleClass("checked"); 136 // Check if the ios checkbox is checked 137 if (ios_checkbox.hasClass("checked")){ 138 // Update state 139 org_checkbox.prop('checked', true); 140 }else{ 141 // Update state 142 org_checkbox.prop('checked', false); 143 } 144 }); 145 }); 146 } 147 }); 148})(jQuery); 149 150function iframeHoogte() { 151 var iFrameID = document.getElementById('iFrameContent'); 152 if(iFrameID) { 153// iFrameID.height = ""; 154 iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; 155 } 156} 157//Function to convert hex format to a rgb color 158function rgb2hex(rgb){ 159 rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); 160 return (rgb && rgb.length === 4) ? "#" + 161 ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + 162 ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + 163 ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; 164} 165 166// Deze functie zorgt voor een template voor "select2" die opmaak in een selectmenu mogelijk maakt 167function formatState(state) { 168 169 if (!state.id) { return state.text; } 170 171 var $state = $('<span>' + state.text + '</span>'); 172 return $state; 173} 174 175function beeldenbankBladeren(veld, veldType, groepsID="") 176{ 177 var url = "/beeldenbank/bladeren.html?veldnaam=" + veld + "&outside=1&groepsID=" + groepsID; 178 var beeldenbank = window.open(url,"beeldenbankBladeren","width=" + (screen.width * 0.5) + ",height=" + (screen.height * 0.85) + ",resizable"); 179} 180 181function fetchNotificaties(){ 182 if (Notify.needsPermission && Notify.isSupported()) { Notify.requestPermission(); } 183 184 setInterval(function() { 185 $.ajax({ url: '/notificaties/_getNew.html?lastid=' + $('#notid').val(), success: function(data) { 186 // update notificaties 187 $(data).find('item').each(function() { 188 var curr = $(this); 189 var id = curr.find("id").text(); 190 var datum = curr.find("datum").text(); 191 var meldingtype = curr.find("meldingtype").text(); 192 var melding = curr.find("melding").text(); 193 var img = curr.find("img").text(); 194 var url = curr.find("url").text(); 195 var getoond = curr.find("getoond").text(); 196 197 var invoegen = '<li class="new">'; 198 if (url != "") invoegen += '<a href="' + url + '">'; 199 invoegen += '<i class="fa ' + meldingtype + '"></i><div class="foto" style="background-image: url(\'' + img + '\');"></div>' + melding + ' <div style="font-size: 10px;">' + datum + '</div><div style="clear: both;"></div>'; 200 if (url != "") invoegen += '</a>'; 201 invoegen += '</li>'; 202 203 if (id > $('#notid').val()) $('#notid').val(id); 204 $(invoegen).prependTo('#notificaties'); 205 $('#notificaties').fadeIn('slow'); 206 207 if (!Notify.needsPermission) { 208 var myNotification = new Notify($('#ksnaam').val(), { 209 body: melding, 210 tag: id, 211 icon: img, 212 // notifyShow: onShowNotification,
213 // notifyClose: onCloseNotification, 214 notifyClick: openURL(url), 215 // notifyError: onErrorNotification, 216 timeout: 20 217 }); 218 219// myNotification.show(); 220 } else if (Notify.isSupported()) { 221 Notify.requestPermission(); 222 } 223 }); 224 }, dataType: 'xml'}); 225 }, 10000); 226 227} 228 229/* GRID FUNCTIES */ 230function resizeGridItem(item){ 231 grid = document.getElementsByClassName("gridks")[0]; 232 rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows')); 233 rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')); 234 rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap)); 235 item.style.gridRowEnd = "span "+rowSpan; 236} 237 238function resizeAllGridItems(){ 239 allItems = document.getElementsByClassName("gridItem"); 240 for(x=0;x<allItems.length;x++){ 241 resizeGridItem(allItems[x]); 242 } 243} 244 245function resizeInstance(instance){ 246 item = instance.elements[0]; 247 resizeGridItem(item); 248} 249 250window.addEventListener("resize", resizeAllGridItems); 251 252allItems = document.getElementsByClassName("gridItem"); 253 254for(x=0;x<allItems.length;x++){ 255 imagesLoaded( allItems[x], resizeInstance); 256} 257/* EINDE GRID FUNCTIES */ 258 259function scrollDown(pixels) { 260 $('html, body').animate({scrollTop: '+=' + pixels + 'px'}, 800); 261} 262 263function scrollToTop(el) { 264 var pos = el.offset(); 265 $('html, body').animate({scrollTop: pos.top}, 800); 266} 267 268function openURL(url) { 269 if (url != "") window.location = url; 270} 271 272function openbox(url, width, height) { openBox(url, width, height); } 273function openbox2(title, url, width, height) { openBox2(title, url, width, height); } 274 275function openModal(url, width, height) { 276 $.fancybox.open({ 277 src: url, 278 type: 'iframe', 279 opts: { 280 iframe: { 281 css: { 282 width: width, 283 height: height 284 } 285 }, 286 buttons: ['slideShow','fullScreen','close'], 287 modal: true 288 } 289 }); 290 291} 292 293function openBox(url, width, height) { 294 $.fancybox.open({ 295 src: url, 296 type: 'iframe', 297 opts: { 298 iframe: { 299 css: { 300 width: width, 301 height: height 302 } 303 }, 304 smallBtn: false, 305 buttons: ['slideShow','fullScreen','close'] 306 } 307 }) 308 309} 310 311function openBox2(title, url, width, height) { 312 313 $.fancybox.open({ 314 src: url, 315 type: 'iframe', 316 opts: { 317 iframe: { 318 css: { 319 width: width, 320 height: height 321 } 322 }, 323 smallBtn: false, 324 buttons: ['slideShow','fullScreen','close'] 325 } 326 }) 327} 328 329/** 330 * Toont een dynamische Web Awesome drawer. 331 * 332 * Voorbeeld: 333 * 334 * drawer({ 335 * title: 'Lid bewerken', 336 * icon: 'fa-regular fa-user', 337 * iconColor: 'var(--primaire_kleur)', 338 * width: '700px', 339 * placement: 'end', 340 * url: '/leden/bewerk.html' 341 * }); 342 * 343 * Ondersteunde opties: 344 * title 345 * icon 346 * iconVariant 347 * iconColor 348 * width 349 * placement start | end | top | bottom 350 * url URL die in een iframe wordt geladen 351 * html HTML-content 352 * content DOM-element 353 * withoutHeader 354 * lightDismiss 355 * buttons 356 * headerActions 357 * onShow 358 * onHide 359 */ 360function drawer(options) { 361 362 options = Object.assign({ 363 title: '', 364 icon: null, 365 iconVariant: '', 366 iconColor: '', 367 width: '700px', 368 placement: 'end', 369 url: '', 370 html: '', 371 content: null, 372 withoutHeader: false, 373 lightDismiss: false, 374 buttons: [], 375 headerActions: [], 376 onShow: null, 377 onHide: null 378 }, options); 379 380 return new Promise(resolve => { 381 const drawer = document.createElement('wa-drawer'); 382 383 drawer.placement = options.placement; 384 drawer.style.setProperty('--size', options.width); 385 386 if (options.lightDismiss) drawer.setAttribute('light-dismiss', ''); 387 if (options.withoutHeader) drawer.setAttribute('without-header', ''); 388 if (options.buttons.length) drawer.setAttribute('with-footer', ''); 389 390 if (!options.withoutHeader && options.title) { 391 const label = document.createElement('span'); 392 label.slot = 'label'; 393 394 const icon = createIcon( 395 options.icon, 396 options.iconVariant, 397 options.iconColor 398 ); 399 400 if (icon) label.appendChild(icon); 401 label.append(options.title); 402 drawer.appendChild(label); 403 } 404 405 options.headerActions.forEach(function(action) { 406 const btn = document.createElement('wa-button'); 407 408 btn.slot = 'header-actions'; 409 btn.appearance = 'plain'; 410 411 const icon = createIcon( 412 action.icon, 413 action.iconVariant, 414 action.iconColor 415 ); 416 417 if (icon) { 418 if (icon.tagName === 'WA-ICON') icon.slot = 'start'; 419 btn.appendChild(icon); 420 } 421 422 if (action.title) btn.title = action.title; 423 424 btn.addEventListener('click', function() { 425 if (typeof action.callback === 'function') { 426 action.callback(drawer, btn); 427 } 428 }); 429 430 drawer.appendChild(btn); 431 432 }); 433 434 if (options.url) { 435 const iframe = document.createElement('iframe'); 436 iframe.src = options.url; 437 iframe.style.width = '100%'; 438 iframe.style.height = '100%'; 439 iframe.style.border = '0'; 440 drawer.appendChild(iframe); 441 } else if (options.html) { 442 const div = document.createElement('div'); 443 div.innerHTML = options.html; 444 drawer.appendChild(div); 445 } else if (options.content) { 446 drawer.appendChild(options.content); 447 } 448 449 options.buttons.forEach(function(button) { 450 const btn = document.createElement('wa-button'); 451 btn.slot = 'footer'; 452 453 if (button.variant) { 454 btn.variant = button.variant; 455 } else { 456 btn.appearance = 'outlined'; 457 } 458 459 if (button.appearance) btn.appearance = button.appearance; 460 btn.disabled = !!button.disabled; 461 462 const icon = createIcon( 463 button.icon, 464 button.iconVariant, 465 button.iconColor 466 ); 467 468 if (icon) { 469 if (icon.tagName === 'WA-ICON') icon.slot = 'start'; 470 btn.appendChild(icon); 471 } 472 473 btn.append(button.text); 474 btn.addEventListener('click', function() { 475 if (typeof button.callback === 'function') { 476 button.callback(drawer, btn); 477 } else if (button.url) { 478 window.location = button.url; 479 } 480 481 if (button.autoClose !== false) drawer.open = false;
482 }); 483 drawer.appendChild(btn); 484 }); 485 486 drawer.addEventListener('wa-show', function() { 487 if (typeof options.onShow === 'function') { 488 options.onShow(drawer); 489 } 490 }); 491 492 drawer.addEventListener('wa-hide', function() { 493 if (typeof options.onHide === 'function') { 494 options.onHide(drawer); 495 } 496 resolve(); 497 }); 498 499 drawer.addEventListener('wa-after-hide', function() { 500 drawer.remove(); 501 }, { once: true }); 502 503 document.body.appendChild(drawer); 504 505 requestAnimationFrame(() => { 506 requestAnimationFrame(() => { 507 drawer.open = true; 508 }); 509 }); 510 }); 511 512} 513 514function openSidebox(title, url, width, height) { 515 516 drawer({ 517 title, 518 url, 519 width 520 }); 521} 522 523function popupIMG(url) { 524 $.fancybox.open({src: url}); 525} 526 527function popupPDF(url) { 528 $.fancybox.open({src: url, 'type':'iframe', opts: { smallBtn: false}}); 529} 530 531function popup(url, width, height) { 532 window.open(url, 'popup', 'width=' + width + ', height=' + height); 533} 534 535/** 536 * Toont een Web Awesome toastmelding. 537 * 538 * Oude syntax: 539 * showBoodschap('Opgeslagen'); 540 * showBoodschap('Opgeslagen', 'success'); 541 * 542 * Nieuwe syntax: 543 * showBoodschap({ 544 * text: 'Opgeslagen', 545 * variant: 'success', 546 * icon: 'fa-regular fa-circle-check', 547 * iconColor: 'var(--wa-color-success-60)', 548 * accentWidth: '10px', 549 * padding: '', 550 * placement: 'top-end', 551 * size: 'm', 552 * duration: 3500, 553 * allowHtml: false, 554 * url: '', 555 * callback: null, 556 * onHide: null 557 * }); 558 */ 559async function showBoodschap(options, msgType) { 560 561 // Backwards compatibility 562 if (typeof options === 'string') { 563 564 const map = { 565 success: 'success', 566 warning: 'warning', 567 error: 'danger', 568 information: 'neutral', 569 info: 'neutral' 570 }; 571 572 options = { 573 text: options, 574 variant: map[msgType] || 'neutral' 575 }; 576 } 577 578 options = Object.assign({ 579 text: '', 580 variant: 'brand', 581 icon: null, 582 iconVariant: '', 583 iconColor: '', 584 accentWidth: '10px', 585 padding: '', 586 placement: 'top-center', 587 size: 'm', 588 duration: 3500, 589 allowHtml: true, 590 url: '', 591 callback: null, 592 onHide: null 593 }, options); 594 595 // Standaard iconen 596 if (!options.icon) { 597 switch (options.variant) { 598 case 'success': options.icon = 'check'; break; 599 case 'warning': options.icon = 'triangle-exclamation'; break; 600 case 'danger': options.icon = 'circle-xmark'; break; 601 default: options.icon = 'circle-info'; break; 602 } 603 } 604 605 // Eén globale toast-container 606 let toast = document.getElementById('ks-toast'); 607 608 if (!toast) { 609 toast = document.createElement('wa-toast'); 610 toast.id = 'ks-toast'; 611 document.body.appendChild(toast); 612 613 } 614 615 toast.placement = options.placement; 616 617 const variant = 618 (options.variant === 'danger' || options.variant === 'warning') 619 ? options.variant 620 : 'brand'; 621 622 623 // Wacht tot toast volledig is geïnitialiseerd 624 await customElements.whenDefined('wa-toast'); 625 await toast.updateComplete; 626 627 // Toast maken via de officiële API 628 const toastItem = await toast.create(options.text, { 629 variant, 630 size: options.size, 631 duration: options.duration, 632 allowHtml: options.allowHtml 633 }); 634 635 if (options.accentWidth) toastItem.style.setProperty('--accent-width', options.accentWidth); 636 if (options.padding) toastItem.style.setProperty('--padding', options.padding); 637 638 // Eigen icoon overschrijft standaardicoon 639 const icon = createIcon( 640 options.icon, 641 options.iconVariant, 642 options.iconColor 643 ); 644 645 if (icon) { 646 icon.slot = 'icon'; 647 const oldIcon = toastItem.querySelector('[slot="icon"]'); 648 if (oldIcon) oldIcon.remove(); 649 toastItem.prepend(icon); 650 } 651 652 // Klikbare toast 653 if (options.url || typeof options.callback === 'function') { 654 toastItem.style.cursor = 'pointer'; 655 toastItem.addEventListener('click', function() { 656 if (typeof options.callback === 'function') { 657 options.callback(toastItem); 658 } else if (options.url) { 659 window.location = options.url; 660 } 661 }); 662 } 663 664 // Callback na sluiten 665 if (typeof options.onHide === 'function') { 666 toastItem.addEventListener('wa-after-hide', function() { 667 options.onHide(toastItem); 668 }); 669 } 670 671 return toastItem; 672} 673 674function showBottomModal(tekst, msgType, url) { 675 msgType = typeof msgType !== 'undefined' ? msgType : 'information'; 676 url = typeof url !== 'undefined' ? url : ''; 677 678 var n = noty({text: tekst, 679 theme: 'defaultTheme', 680 layout: 'bottomCenter', 681 type: msgType, 682 timeout: false, 683 progressBar: false, 684 callback: { 685 onClose: function() { window.location = url; } 686 }, 687 animation: { open: 'animated bounceInDown', close: 'animated fadeOutUpBig' } 688 }); 689} 690 691function bevestigredirect(options, redirect) { 692 if (typeof options === 'string') { 693 options = { 694 text: options, 695 ok: 'Ja', 696 cancel: 'Nee' 697 }; 698 } 699 700 confirm(options).then(function(ok) { 701 if (ok) { 702 window.location = redirect; 703 } 704 }); 705 706} 707 708function del3(txt,module,id,op) { 709 var url = '/' + module + '/' + op + '-' + id + '.html'; 710 711 confirm(txt, 'Ja', 'Nee').then(function(ok){ if (ok) { 712 window.location = url; 713 }}); 714 715} 716 717function del2(txt,module,id,onderdeel) { 718 if (onderdeel == '') { 719 var url = '/' + module + '/del-' + id + '.html'; 720 } else var url = '/' + module + '/' + onderdeel + '/del-' + id + '.html'; 721 722 confirm(txt, 'Ja', 'Nee').then(function(ok){ if (ok) { 723 if (onderdeel == '') { 724 window.location = '/' + module + '/del-' + id + '.html'; 725 } else { window.location = '/' + module + '/' + onderdeel + '/del-' + id + '.html'; } 726 }}); 727 728} 729 730function _del(txt,module,id,onderdeel) { 731 if (onderdeel == '') { 732 var url = '/' + module + '/_del-' + id + '.html'; 733 } else var url = '/' + module + '/' + onderdeel + '/_del-' + id + '.html'; 734 735 confirm(txt, 'Ja', 'Nee').then(function(ok){ if (ok) { 736 if (onderdeel == '') { 737 window.location = '/' + module + '/_del-' + id + '.html'; 738 } else { window.location = '/' + module + '/' + onderdeel + '/_del-' + id + '.html'; } 739 }}); 740 741} 742
743function del(module,id,onderdeel) { 744 745 if (onderdeel == '') { 746 var url = '/' + module + '/del-' + id + '.html'; 747 } else var url = '/' + module + '/' + onderdeel + '/del-' + id + '.html'; 748 749 confirm('Weet u zeker dat u dit item\n(en alle koppelingen)\nwilt verwijderen?', 'Ja', 'Nee').then(function(ok){ if (ok) { 750 if (onderdeel == '') { 751 window.location = '/' + module + '/del-' + id + '.html'; 752 } else { window.location = '/' + module + '/' + onderdeel + '/del-' + id + '.html'; } 753 }}); 754 755} 756 757/** 758 * Toont een bevestigingsvenster. 759 * 760 * Oude syntax: 761 * confirm('Tekst', 'Ja', 'Nee'); 762 * 763 * Nieuwe syntax: 764 * confirm({ 765 * title: 'Verwijderen', 766 * text: 'Weet je het zeker?', 767 * icon: 'fa-regular fa-trash', 768 * ok: 'Verwijderen', 769 * cancel: 'Annuleren' 770 * }); 771 * 772 * Retourneert een Promise<boolean>. 773 */ 774function confirm(options, okTXT, cancelTXT) { 775 776 if (typeof options === 'string') { 777 options = { 778 title: '', 779 text: options, 780 allowHtml: true, 781 ok: okTXT || 'Ok', 782 cancel: cancelTXT || 'Annuleren', 783 variant: 'brand', 784 icon: null, 785 iconColor: '', 786 iconVariant: '' 787 }; 788 } 789 790 return dialog({ 791 title: options.title, 792 text: options.text, 793 allowHtml: options.allowHtml, 794 icon: options.icon, 795 iconColor: options.iconColor, 796 iconVariant: options.iconVariant, 797 buttons: [ 798 { 799 text: options.cancel, 800 appearance: 'outlined', 801 value: false 802 }, 803 { 804 text: options.ok, 805 variant: options.variant || 'brand', 806 value: true, 807 primary: true 808 } 809 ] 810 }); 811 812} 813 814/** 815 * Maakt een Font Awesome of Web Awesome icoon aan. 816 * 817 * @param {string} iconName 818 * @param {string} iconVariant 819 * @param {string} iconColor 820 * @returns {HTMLElement|null} 821 */ 822function createIcon(iconName, iconVariant = '', iconColor = '') { 823 if (!iconName) return null; 824 let icon; 825 826 if (typeof iconName === 'string' && iconName.startsWith('fa-')) { 827 icon = document.createElement('i'); 828 icon.className = iconName + ' fa-fw'; 829 icon.style.marginRight = '.5rem'; 830 } else { 831 icon = document.createElement('wa-icon'); 832 icon.name = iconName; 833 if (iconVariant) icon.variant = iconVariant; 834 } 835 836 if (iconColor) icon.style.color = iconColor; 837 838 return icon; 839 840} 841 842/** 843 * Toont een dynamisch Web Awesome dialoogvenster. 844 * Voorbeeld: 845 * 846 * dialog({ 847 * title: 'Bewerken', 848 * text: 'Wat wil je doen?', 849 * icon: 'fa-regular fa-pen', 850 * iconColor: 'var(--primaire_kleur)', 851 * width: '600px', 852 * 853 * buttons: [ 854 * { 855 * text: 'Opslaan', 856 * icon: 'fa-regular fa-floppy-disk', 857 * variant: 'brand', 858 * value: true 859 * }, 860 * { 861 * text: 'Annuleren', 862 * appearance: 'outlined', 863 * value: false 864 * } 865 * ] 866 * }).then(function(result) { 867 * console.log(result); 868 * }); 869 * 870 * Ondersteunde opties: 871 * title Titel van de dialog 872 * text Bericht (ondersteunt \n voor nieuwe regels)
873 * icon Web Awesome of Font Awesome icoon 874 * iconVariant Variant voor Web Awesome iconen 875 * iconColor CSS-kleur van het icoon 876 * width Breedte van de dialog (bijv. '600px' of '50vw') 877 * buttons Array met knoppen 878 * 879 * Per button: 880 * text 881 * icon 882 * iconVariant 883 * iconColor 884 * variant 885 * appearance 886 * disabled 887 * value 888 * url 889 * callback(dialog, button, close) 890 * autoClose 891 * primary (primaire button wordt gelinkt aan de enterknop) 892 */ 893function dialog(options) { 894 895 options = Object.assign({ 896 title: '', 897 text: '', 898 allowHtml: false, 899 icon: null, 900 iconVariant: '', 901 iconColor: '', 902 width: '', 903 buttons: [] 904 }, options); 905 906 return new Promise(resolve => { 907 908 const dialog = document.createElement('wa-dialog'); 909 910 if (options.buttons.length) dialog.setAttribute('with-footer', ''); 911 912 // Header 913 if (options.title && options.title.trim() !== '') { 914 const label = document.createElement('span'); 915 label.slot = 'label'; 916 const icon = createIcon(options.icon, options.iconVariant, options.iconColor); 917 if (icon) label.appendChild(icon); 918 label.append(options.title); 919 dialog.appendChild(label); 920 } else { 921 dialog.setAttribute('without-header', ''); 922 } 923 924 if (options.width) dialog.style.setProperty('--width', options.width); 925 926 // Tekst 927 const body = document.createElement('div'); 928 929 if (options.allowHtml) { 930 body.innerHTML = options.text; 931 } else { 932 body.style.whiteSpace = 'pre-line'; 933 body.textContent = options.text; 934 } 935 936 dialog.appendChild(body); 937 938 let handled = false; 939 940 function close(result) { 941 if (handled) return; 942 handled = true; 943 resolve(result); 944 dialog.open = false; 945 } 946 947 // Buttons 948 let primaryButton = null; 949 950 options.buttons.forEach(function(button) { 951 const btn = document.createElement('wa-button'); 952 btn.slot = 'footer'; 953 954 if (button.variant) { 955 btn.variant = button.variant; 956 } else { 957 btn.appearance = 'outlined'; 958 } 959 960 if (button.appearance) btn.appearance = button.appearance; 961 if (button.primary) primaryButton = btn; 962 btn.disabled = !!button.disabled; 963 964 const icon = createIcon(button.icon, button.iconVariant, button.iconColor); 965 966 if (icon) { 967 if (icon.tagName === 'WA-ICON') icon.slot = 'start'; 968 btn.appendChild(icon); 969 } 970 971 btn.append(button.text); 972 btn.addEventListener('click', function() { 973 if (typeof button.callback === 'function') { 974 button.callback(dialog, btn, close); 975 } else if (button.url) { 976 window.location = button.url; 977 } 978 979 if (button.autoClose !== false) { 980 if ('value' in button) { 981 close(button.value); 982 } else { 983 close(button.text); 984 } 985 } 986 987 }); 988 dialog.appendChild(btn); 989 }); 990 991 dialog.addEventListener('keydown', function(e) { 992 if (e.key !== 'Enter' || !primaryButton) return; 993 const active = document.activeElement; 994 if (active && dialog.contains(active) && active.tagName === 'WA-BUTTON') { 995 e.preventDefault(); 996 active.click(); 997 } else { 998 e.preventDefault(); 999 primaryButton.click(); 1000 } 1001 }); 1002 1003 1004 dialog.addEventListener('wa-hide', function() { 1005 if (!handled) { 1006 handled = true; 1007 resolve(false); 1008 } 1009 }); 1010 1011 dialog.addEventListener('wa-after-hide', function() { 1012 dialog.remove(); 1013 }, { once: true }); 1014 1015 document.body.appendChild(dialog); 1016 1017 dialog.open = true; 1018 1019 }); 1020 1021} 1022 1023 1024
1025function tabsToAccordions(){$(".tabs").each(function(){var e=$('<div class="accordion">');var t=new Array;$(this).find(">ul>li").each(function(){t.push("<h3>"+$(this).html()+"</h3>")});var n=new Array;$(this).find(">div").each(function(){n.push("<div>"+$(this).html()+"</div>")});for(var r=0;r<t.length;r++){e.append(t[r]).append(n[r])}$(this).before(e);$(this).remove()});$(".accordion").accordion({heightStyle: "content"})} 1026 1027// changes accordions to tabs (jquery ui) 1028function accordionsToTabs(){$(".accordion").each(function(){var e=$('<div class="tabs">');var t=0;var n=$("<ul>");$(this).find(">h3").each(function(){t++;n.append('<li><a href="#tabs-'+t+'" style="text-decoration: none;">'+$(this).text()+"</a></li>")});var t=0;var r=$("");$(this).find(">div").each(function(){t++;r=r.add('<div id="tabs-'+t+'">'+$(this).html()+"</div>")});e.append(n).append(r);$(this).before(e);$(this).remove()});$(".tabs").tabs()} 1029 1030 1031function formatSecondsAsTime(secs, format) { 1032 var hr = Math.floor(secs / 3600); 1033 var min = Math.floor((secs - (hr * 3600))/60); 1034 var sec = Math.floor(secs - (hr * 3600) - (min * 60)); 1035 1036 if (min < 10){ 1037 min = "0" + min; 1038 } 1039 if (sec < 10){ 1040 sec = "0" + sec; 1041 } 1042 1043 return min + ':' + sec; 1044} 1045 1046function replaceAll(zoek, vervang, str) { 1047 return str.replace(new RegExp(zoek, 'g'), vervang); 1048} 1049 1050// hex kleurcode checker 1051function checkHex(input, hexcode, colorpickerSelector='') { 1052 if (!/^#?[0-9A-Fa-f]{6}$/.test(hexcode)) { 1053 if (colorpickerSelector != '') { 1054 // de colorpicker geeft tijdens het typen zelf een hexcode aan -> die gebruiken 1055 return checkHex(input, $(colorpickerSelector).val()); 1056 } 1057 1058 input.value = ''; 1059 return; 1060 } 1061 1062 // Zorg dat er altijd een # voor staat 1063 if (!hexcode.startsWith('#')) { 1064 hexcode = '#' + hexcode; 1065 } 1066 input.value = hexcode; 1067}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.