https://edukenya.org/tpl/BaseChildOne/js/template.js?1790831603

1$(document).ready(function () {
2    var mainContent = $('.tpl-section-main-container');
3    var header = $('.tpl-section-header-and-search');
4
5    var delay = (function() {
6        var timer = 0;
7        return function(callback, ms) {
8            clearTimeout(timer);
9            timer = setTimeout(callback, ms);
10        };
11    })();
12
13    /**
14     * Toggle header search position
15     */
16    header.find('.js-header-search-toggle').on('click.HeaderSearchToggleClick', function () {
17        if (mainContent.hasClass('open-search')) {
18            mainContent.removeClass('open-search');
19        } else {
20            mainContent.addClass('open-search');
21            setTimeout(function () {
22                header.find('.search-input input').focus();
23            }, 50);
24        }
25    });
26
27    // Close header search on X
28    header.find('.js-header-search-close').on('click.HeaderSearchCloseClick', function () {
29        mainContent.removeClass('open-search');
30    });
31
32    // Close header search on scroll
33    $(window).on('scroll', function () {
34        mainContent.removeClass('open-search');
35    });
36
37
38    var $flyoutOpenTrigger = $('.js-page-flyout-toggle');
39    var $flyoutCloseTrigger = $('.js-page-flyout-close');
40
41    // get scrollbar width
42    function getScrollbarWidth() {
43        var outer = document.createElement("div");
44        outer.style.visibility = "hidden";
45        outer.style.width = "100px";
46        outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
47
48        document.body.appendChild(outer);
49
50        var widthNoScroll = outer.offsetWidth;
51        // force scrollbars
52        outer.style.overflow = "scroll";
53
54        // add innerdiv
55        var inner = document.createElement("div");
56        inner.style.width = "100%";
57        outer.appendChild(inner);
58
59        var widthWithScroll = inner.offsetWidth;
60
61        // remove divs
62        outer.parentNode.removeChild(outer);
63
64        return widthNoScroll - widthWithScroll;
65    }
66
67    function toggleFlyout(forceClose) {
68
69        var scrollBarWidth = getScrollbarWidth();
70        var isMobile = window.matchMedia('(max-width: 900px)').matches;
71
72        var resetCss = {
73            'height': 'auto',
74            'overflow': 'auto',
75            'padding-right': 0,
76        };
77
78        var noScrollCss = {
79            'height': '100vh',
80            'overflow': 'hidden',
81            'padding-right': scrollBarWidth + 'px',
82        };
83
84        if (isMobile) {
85            resetCss.position = 'static';
86            noScrollCss.position = 'fixed';
87        }
88
89        if (mainContent.hasClass('flyout-open') || forceClose === true) {
90            mainContent.removeClass('flyout-open');
91
92            $('body').css(resetCss);
93            $('.tpl-section-header').css({paddingRight: 0});
94
95            if (isMobile && scrolled) {
96                window.scrollTo(0, scrolled);
97            }
98
99        } else {
100            scrolled = $(window).scrollTop();
101
102            mainContent.addClass('flyout-open');
103
104            $('body').css(noScrollCss);
105            $('.tpl-section-header').css({paddingRight: scrollBarWidth + 'px'});
106        }
107    }
108
109    // toggle flyout when flyout trigger is clicked
110    $flyoutOpenTrigger.on('click', function (event) {
111        toggleFlyout();
112        event.preventDefault();
113        event.stopPropagation();
114    });
115    // close flyout when flyout close trigger is clicked
116    $flyoutCloseTrigger.on('click', function (event) {
117        toggleFlyout(true);
118        event.preventDefault();
119        event.stopPropagation();
120    });
121
122    // close flyout if clicked outside
123    var $sectionFlyout = $('.tpl-section-flyout');
124    $(document).on('click', function (event) {
125        if (mainContent.hasClass('flyout-open') && $sectionFlyout.length && !$sectionFlyout.get(0).contains(event.target)) {
126            toggleFlyout(true);
127        }
128    });
129
130    /**
131     * Popup functionality
132     */
133    var $sectionPopup = $('.tpl-section-popup');
134
135    if($sectionPopup.length) {
136        var $popupTrigger = $('.open-popup');
137        var $popupCloseTrigger = $('.tpl-popup-close');
138
139        $popupTrigger.on('click', function (event) {
140            event.preventDefault();
141            $sectionPopup.addClass('visible');
142        });
143
144        $popupCloseTrigger.on('click', function (event) {
145            event.preventDefault();
146            $sectionPopup.removeClass('visible');
147        });
148
149        // close popup if clicked outside
150        $(document).on('click', function (event) {
151            if ($sectionPopup.hasClass('visible') && !$sectionPopup.find('.tpl-position-popup').get(0).contains(event.target) && !$popupTrigger.get(0).contains(event.target)) {
152                $sectionPopup.removeClass('visible');
153            }
154        });
155    }
156
157    /**
158     * Quick search functionality
159     */
160    var searchResults = $(".search-modules-results-responsive-view.quick-search");
161    var infiniteContainer = searchResults.find(".infinite-container");
162    var searchField = searchResults.find("input[name=query]");
163
164    // Disable normal form submit
165    searchResults.find("form").on("submit", function(e) {
166        e.preventDefault();
167        e.stopPropagation();
168        return false;

169    });
170
171    // Remove all items except first one on page load
172    var onLoadItems = infiniteContainer.find('.infinite-item:not(:first)');
173    if(onLoadItems.length > 0){
174        onLoadItems.remove();
175    }
176
177    function doBounce(element, times, distance, speed) {
178        for(i = 0; i < times; i++) {
179            element.animate({marginTop: '-='+distance},speed)
180                .animate({marginTop: '+='+distance},speed);
181        }
182    }
183
184    searchField.on("keyup", function() {
185        var thisSearchField = $(this);
186        var thisInfiniteContainer = thisSearchField.closest(".search-modules-results-responsive-view.quick-search").find(".infinite-container");
187        var searchModuleId = thisSearchField
188            .closest(".search-modules-results-responsive-view.quick-search")
189            .find(".search-modules-results-fields")
190            .data("module-item-id");
191        var submitUrl = thisSearchField.closest(".search-modules-results-responsive-view.quick-search").find(".search-modules-results-fields form").attr('action');
192
193        thisInfiniteContainer.addClass("infinite-loading");
194
195        delay(function() {
196            if (thisSearchField.val().length === 0) return;
197
198            $.ajax({
199                url: SS.route("Search", "Search", "resultsModule", null, false),
200                data: {
201                    _moduleItemId: searchModuleId,
202                    query: thisSearchField.val(),
203                }
204            }).done(function(html) {
205                var htmlEl = $(html);
206
207                var contentType = 'Missionaries';
208                if (htmlEl.find(".tpl-architect-campaign-one-quick-search").length) {
209                    contentType = "Projects";
210                }
211
212                var moreLink = htmlEl.find(".infinite-more-link");
213                if(moreLink && moreLink.length) {
214                    moreLink
215                        .text(__d('template','Find More') + " " + contentType)
216                        .addClass("tpl-button-outline-white")
217                        .attr("href", submitUrl + "?query=" + encodeURIComponent(thisSearchField.val()) + "#search");
218                } else {
219                    htmlEl.append('<a class="infinite-more-link tpl-button-outline-white" href="' + (submitUrl + "?query=" + encodeURIComponent(thisSearchField.val()) + "#search") + '">' + (__d('template', 'Find More') + " " + contentType) + '</a>');
220                }
221
222                htmlEl.find(".search-modules-results-no-results").prepend('<div class="no-results">' + __d('template','No Results Found') + '</div>');
223
224                doBounce(thisInfiniteContainer, 1, '50px', 100);
225
226                delay(function() {
227                    thisInfiniteContainer.removeClass("infinite-loading");
228
229                    thisInfiniteContainer
230                        .hide()
231                        .html(htmlEl.get(0))
232                        .slideDown(200);
233                }, 100)
234            });
235        }, 500);
236    });
237
238    /**
239     * Open/Close user content
240     */
241    var userContentTrigger = $('.open-user-content');
242    var userContent = $('.tpl-user-content');
243    if (userContent && userContent.length > 0) {
244        userContentTrigger.on('click.UserContentToggle', function (event) {
245            event.preventDefault();
246            userContent.toggleClass('visible');
247        });
248
249        // Close user menu popup on outside click
250        $(document).mouseup(function (e) {
251            if (userContent.is(':visible') && !userContent.is(e.target) && userContent.has(e.target).length === 0
252                && !userContentTrigger.is(e.target) && userContentTrigger.has(e.target).length === 0) {
253                userContent.removeClass('visible');
254            }
255        });
256
257        // Close user menu popup on ESC click
258        $(document).keyup(function (e) {
259            if (e.keyCode == 27) {
260                if (userContent.is(':visible')) {
261                    userContent.removeClass('visible');
262                }
263            }
264        });
265    }
266
267
268    $(window).on('load scroll resize', function (e) {
269
270        var win = $(window);
271
272        // if (e.type === 'resize' || e.type === 'load') {
273        //     var width = win.width();
274        //     if(width < 900){
275        //         mainContent.addClass('tpl-no-hero');
276        //     }else{
277        //         mainContent.removeClass('tpl-no-hero');
278        //     }
279        // }
280
281        var scrolled = win.scrollTop();
282
283        if (scrolled > 50) { // 50px of buffer
284            if (!mainContent.hasClass('scrolled')) {
285                mainContent.addClass('scrolled');
286                //headerImageAnimation.animate("14%");// -%15
287            }
288        } else {
289            if (mainContent.hasClass('scrolled')) {
290                mainContent.removeClass('scrolled');
291                //headerImageAnimation.animate("20%");
292            }
293        }
294    });
295
296});
297
298var headerImageAnimation = {
299    referenceWidth: false,
300    animating: false,
301    container: false,
302    containerSelector: '.tpl-section-header-left-alternate,.tpl-section-header-left',
303
304    _getContainer: function () {
305        if (this.container === false) {
306            let cont = $(this.containerSelector);
307            if (cont.length) {
308                this.container = cont;
309                this.referenceWidth = this._getContainerWidth();
310            }
311
312        }
313        return this.container;
314    },
315
316    _reset: function () {
317        this.container.width(this.referenceWidth);
318    },
319
320    _getContainerWidth: function () {
321        this._getContainer();
322        return (this.container) ? this.container.first().width() : false;

323    },
324
325    restart: function () {
326        this.container = false;
327    },
328
329    animate: function (val) {
330        this._getContainer();
331        if (!this.animating && this.container) {
332            this.animating = true;
333            this.container.animate({
334                width: val
335            }, 1500, 'swing', function () {
336                this.animating = false;
337            }.bind(this));
338        } else {
339            this._reset();
340        }
341    }
342};