https://www.bolster.nl/js/kennisbank.js?ac=202609202k21

1/* 
2 * To change this license header, choose License Headers in Project Properties.
3 * To change this template file, choose Tools | Templates
4 * and open the template in the editor.
5 */
6
7var timer = {};
8var timer2 = {};
9
10jQuery(document).ready(function () {
11    $(window).resize(function () {
12        if(jQuery('.outerboxModule.Open').length) {
13            kennisbankMovePopup(jQuery('.outerboxModule.Open'));  
14        }
15    });
16
17    jQuery('body').delegate('.KennisModule, .outerboxModule', 'mouseenter', function (e) {
18
19        var KennisID = jQuery(this).attr('data-uniekid');
20
21        var Kennis = jQuery(this);
22
23        clearTimeout(timer[KennisID]);
24        if (typeof timer[KennisID] === "undefined" && typeof timer2[KennisID] !== "undefined") {
25            jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').remove();
26        }
27        clearTimeout(timer2[KennisID]);
28        delete timer[KennisID];
29        delete timer2[KennisID];
30
31        if (jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').length) {
32            if (jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').is(':visible')) {
33                return false;
34            }
35            else {
36                jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').remove();
37            }
38        }
39
40        var ID = Kennis.attr('wordid').replace('word', '');
41
42        var content = kennisbankteksten[ID];//vervangen met juiste content, hoe?
43
44        var mousex = jQuery(this).offset().top; //Get object coordinates
45        var mousey = mousex - jQuery(window).scrollTop();
46
47        //Berekenen van object hoogte
48        var objectHeight = 0;
49        var outerboxModule = '<div class="outerboxModule bottom" data-uniekid="' + KennisID + '"><i class="fal fa-times"></i><span class="ArrowDown"></span><div class="InnerBox">' + content + '</div></div>';
50        var outerboxModulTop = outerboxModule.replace('outerboxModule bottom', 'outerboxModule top');
51
52        Kennis.append(outerboxModule);
53        jQuery('body').addClass('KennisbankOverflow');
54        jQuery('html').addClass('KennisbankOverflow');
55        
56        var objectHeight = jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').height();
57        jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').remove();
58
59        if (mousey < objectHeight) {  // Als de afstand tot aan de top te klein is plaats hem er dan onder
60            var outerboxElement = jQuery(outerboxModule).appendTo(Kennis.closest('.Kennis'));
61        }
62        else {
63            var outerboxElement = jQuery(outerboxModulTop).prependTo(Kennis.closest('.Kennis'));
64            //Bepalen van de hoogte om te kijken hoe hoog hij moet komen
65            var hoogte = -(objectHeight + 10) + 'px';
66            jQuery(outerboxElement).css({"top": hoogte});
67        }
68
69            kennisbankMovePopup(outerboxElement);
70
71        //Bij het drukken op het kruisje sluit de popup
72        jQuery('.outerboxModule .fal.fa-times').on('click', function () {
73            clearTimeout(timer[KennisID]);
74            delete timer[KennisID];
75            clearTimeout(timer2[KennisID]);
76            delete timer2[KennisID];
77            
78            jQuery('body').removeClass('KennisbankOverflow');
79            jQuery('html').removeClass('KennisbankOverflow');
80
81            timer[KennisID] = setTimeout(function () {
82                jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').removeClass('Open');
83                //            timer2[KennisID] = setTimeout(function() {
84                //                jQuery('.outerboxModule[data-uniekid="'+KennisID+'"]').remove();
85                //            }, 300);
86                delete timer[KennisID];
87            }, 300);
88            timer2[KennisID] = setTimeout(function () {
89                jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').remove();
90                delete timer2[KennisID];
91            }, 600);
92        });
93
94
95        //Classe open toevoegen om de popup zichtbaar te maken 
96        setTimeout(function () {
97            jQuery(outerboxElement).addClass('Open');
98        }, 300);
99    }).delegate('.KennisModule, .outerboxModule', 'mouseleave', function () {//De 

99content er uithalen
100        var KennisID = jQuery(this).attr('data-uniekid');
101        
102        jQuery('body').removeClass('KennisbankOverflow');
103        jQuery('html').removeClass('KennisbankOverflow');
104
105        clearTimeout(timer[KennisID]);
106        delete timer[KennisID];
107        clearTimeout(timer2[KennisID]);
108        delete timer2[KennisID];
109
110        timer[KennisID] = setTimeout(function () {
111            jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').removeClass('Open');
112            //            timer2[KennisID] = setTimeout(function() {
113            //                jQuery('.outerboxModule[data-uniekid="'+KennisID+'"]').remove();
114            //            }, 300);
115            delete timer[KennisID];
116        }, 300);
117        timer2[KennisID] = setTimeout(function () {
118            jQuery('.outerboxModule[data-uniekid="' + KennisID + '"]').remove();
119            delete timer2[KennisID];
120        }, 600);
121    });
122});
123
124function kennisbankMovePopup(outerboxElement) {
125    var arrowleftStandard = 14;
126    
127    var windowsize = $( window ).width();
128    
129    if (windowsize < 578) {
130        var objectWidthStandard = 400;
131    }
132    else {
133        var objectWidthStandard = 320;
134    }
135    
136    //maincontainer gebruiken ivm desktop formaat (zorgt dat popup binnen content valt)
137    var maincontainerWidth = jQuery('.main-container').outerWidth();
138    var maincontainerleft = jQuery('.main-container').offset().left;
139    
140    //het woord waar de popup bij hoort
141    var wordelement = jQuery(outerboxElement).parent('.Kennis');
142    var widthToLeft = jQuery(wordelement).offset().left;
143    
144    //object breedte
145    var objectWidth = jQuery(outerboxElement).width();
146    //marge naast popup (1x)
147    var margin = 15;
148    
149    //standaard is 0, linkerkant popup uitlijnen met linkerkant woord, popup staat relatief aan het woord
150    var NegativeLeft = 0;
151    if(objectWidth < objectWidthStandard && (objectWidthStandard + (margin * 2)) <= maincontainerWidth) {
152        objectWidth = objectWidthStandard;
153    }
154    else if(objectWidth < objectWidthStandard && objectWidth < (maincontainerWidth - (margin * 2))) {
155        var newwidth = maincontainerWidth - (margin * 2);
156        if(newwidth <= objectWidthStandard) {
157            objectWidth = newwidth;
158        }
159    }
160    //als object + marges breder id dan de container waar het in moet blijven, pas breedte van container aan
161    if((objectWidth + (margin * 2)) > maincontainerWidth) {
162        objectWidth = (maincontainerWidth - (margin * 2));
163    }
164    //als popup links buiten beeld valt, bereken nieuwe positie aan de hand van maincontainer positie
165    if((widthToLeft + objectWidth + margin) > maincontainerWidth) {
166        NegativeLeft = widthToLeft - maincontainerleft - (maincontainerWidth - objectWidth - margin);
167    }
168    if(NegativeLeft < 0) {
169        NegativeLeft = 0;
170    }
171
172    var Negativebreedte = -(NegativeLeft);
173    var Positivebreedte = NegativeLeft;
174    if(Positivebreedte < arrowleftStandard) {
175        Positivebreedte = arrowleftStandard;
176    }
177    jQuery(outerboxElement).css({"left": Negativebreedte + 'px', "width": objectWidth+'px'});
178    jQuery(outerboxElement).find('.ArrowDown').css({"left": Positivebreedte + 'px'});
179}