https://dutchcountryside.com/wp-content/themes/wpzoom-diamond/js/functions.js?ver=20150317

1/**
2 * Theme functions file
3 */
4
5(function($) {
6    var $document = $(document);
7    var $window = $(window);
8
9    $document.ready(function() {
10        /**
11         * Activate parallax effect on FlexSlider.
12         */
13        $('#slider').sllider();
14
15        /**
16         * Activate Headroom.
17         */
18        $('.header-inner-wrap').headroom({
19            tolerance: {
20                up: 75,
21                down: 5
22            },
23            offset : 91
24        });
25
26        /**
27         * Fix content position after Headeroom.
28         */
29        $('.headroom').next().css('padding-top', $('.headroom').outerHeight());
30
31        /**
32         * Clickable divs.
33         */
34        $(".clickable").on('click', function() {
35            window.location.href = $(this).data("href");
36        });
37
38        /**
39         * Don't duplicate placeholders.
40         */
41        var $fields = $('#respond input, #respond textarea');
42        if ( $fields.length > 0 && 'placeholder' in $fields[0] ) {
43            $('#respond').find('#commentform p label').hide();
44        }
45
46        mobileadjust();
47
48        $window.on('resize', function() {
49            mobileadjust();
50        });
51    });
52
53    /**
54     * Mobile menu support.
55     */
56    (function() {
57        var pageOffsetY;
58        var $toggleBtn = $('.navbar-toggle');
59        var $menu = $($toggleBtn.data('target'));
60        var $header = $('#header');
61
62        $toggleBtn.on('click', function() {
63            if ($toggleBtn.hasClass('active')) {
64                disablePopover();
65            } else {
66                enablePopover();
67            }
68
69            return false;
70        });
71
72        $window.on('resize orientationchange', update);
73        update();
74
75        function update() {
76            disablePopover();
77            $menu.attr('style', '');
78
79            if($window.width() <= 1200) {
80                $('#menu ul.dropdown').superfish('destroy');
81            } else {
82                $('#menu ul.dropdown:not(.sf-js-enabled)').superfish({
83                    delay: 0,
84                    animation: { height: 'show', opacity: 'show' },
85                    speed: 'fast'
86                });
87            }
88
89            /**
90             * Headroom compatibility.
91             */
92            $('.headroom').next().css('padding-top', $('.headroom').outerHeight());
93        }
94
95        function enablePopover() {
96            $toggleBtn.addClass('active');
97            pageOffsetY = window.pageYOffset;
98
99            $menu.css('display', 'block');
100            $header.addClass('has-menu-overlay');
101            $menu.addClass('menu-overlay').css('top', $('.headroom').outerHeight());
102
103            $('#header').height('50%');
104
105            $('.site-container').css({
106                height: '100%',
107                overflow: 'hidden'
108            });
109
110            $('body')
111                .addClass('noscroll')
112                .css('top', -pageOffsetY + 'px');
113        }
114
115        function disablePopover() {
116            $toggleBtn.removeClass('active');
117            $menu
118                .css('display', 'none')
119                .removeClass('menu-overlay');
120            $header.removeClass('has-menu-overlay');
121            $('#header').height('auto');
122            $('body').removeClass('noscroll');
123            $(window).scrollTop(pageOffsetY);
124        }
125    })();
126
127    /**
128     * Parallax slider effects jQuery plugin.
129     */
130    $.fn.sllider = function() {
131        var features = {
132            bind : !!(function(){}.bind),
133            rAF : !!(window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame)
134        };
135
136        if (typeof features === 'undefined' || !features.rAF || !features.bind) return;
137
138        /**
139         * Handles debouncing of events via requestAnimationFrame
140         * @see http://www.html5rocks.com/en/tutorials/speed/animations/
141         * @param {Function} callback The callback to handle whichever event
142         */
143        function Debouncer (callback) {
144            this.callback = callback;
145            this.ticking = false;
146        }
147        Debouncer.prototype = {
148            constructor : Debouncer,
149
150            /**
151             * dispatches the event to the supplied callback
152             * @private
153             */
154            update : function() {
155                this.callback && this.callback();
156                this.ticking = false;

157            },
158
159            /**
160             * ensures events don't get stacked
161             * @private
162             */
163            requestTick : function() {
164                if(!this.ticking) {
165                    requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
166                    this.ticking = true;
167                }
168            },
169
170            /**
171             * Attach this as the event listeners
172             */
173            handleEvent : function() {
174                this.requestTick();
175            }
176        };
177
178        return this.each(function () {
179            var $this = $(this);
180            var debouncer = new Debouncer(update.bind(this));
181
182            $(window).on('scroll', debouncer.handleEvent.bind(debouncer));
183            debouncer.handleEvent();
184
185            function update() {
186                var sliderBottom = $this.position().top + $this.outerHeight();
187                var scrollPos = $(document).scrollTop() + 91;
188
189                if (scrollPos > sliderBottom) return;
190
191                scrollPos -= $('.headroom').outerHeight();
192
193                var x = f(scrollPos, 0, 1, sliderBottom);
194
195                var offset = x * ($this.outerHeight() - 46 ) / 4;
196
197                var opacity = Math.max(1 - x, 0.6);
198                var navOpacity = Math.min(Math.max(2 - Math.pow(2*x, 2), 0.1), 1);
199
200                $this.find('.li-wrap').css({
201                    top: offset,
202                    opacity: opacity
203                });
204
205                $this.find('.flex-control-nav').css({
206                    opacity: navOpacity
207                });
208            }
209
210            function f(t, b, c, d) {
211                return c * Math.sin(t/d * (Math.PI/2)) + b;
212            }
213        });
214    };
215
216    function mobileadjust() {
217        windowWidth = $window.width();
218
219        if( windowWidth < 680 ) {
220            $('#slider .slides li').each(function(){
221                var bgurl = $(this).css('background-image').match(/^url\(['"]?(.+)["']?\)$/)[1],
222                    smallimg = $(this).data('smallimg');
223                if ( !bgurl || typeof smallimg === 'undefined' || bgurl == smallimg ) return;
224                $(this).css('background-image', 'url("' + smallimg + '")');
225            });
226        }
227
228        if( windowWidth > 680 ) {
229            $('#slider .slides li').each(function(){
230                var bgurl = $(this).css('background-image').match(/^url\(['"]?(.+)["']?\)$/)[1],
231                    bigimg = $(this).data('bigimg');
232                if ( !bgurl || typeof bigimg === 'undefined' || bgurl == bigimg ) return;
233                if ( !$(this).data('smallimg') ) $(this).data('smallimg', bgurl);
234                $(this).css('background-image', 'url("' + bigimg + '")');
235            });
236        }
237
238    }
239})(jQuery);
240
241function wpz_sliderTextAnimate(slider) {
242    var $slides = slider.find('.slides > li');
243    var $currentSlide = $slides.not('.clone').eq(slider.currentSlide);
244    var $nextSlide = $slides.not('.clone').eq(slider.animatingTo);
245
246    if (slider.vars.animation == 'swing' && typeof slider.direction !== 'undefined') {
247        if (slider.count == slider.currentSlide + 1 && slider.direction == 'next') {
248            $nextSlide = $nextSlide.add(slider.find('.clone:last'));
249        } else if (slider.currentSlide == 0 && slider.direction == 'prev') {
250            $nextSlide = $nextSlide.add(slider.find('.clone:first'));
251        } else {
252            slider.find('.clone h3').css({ 'margin-top': 0, 'opacity': 0 });
253            slider.find('.clone .excerpt').css({ 'opacity': 0 });
254        }
255    }
256
257    /* Text animation for slide that is dissapearing */
258    $currentSlide.find('h3').stop().animate({'margin-top': 0, 'opacity': 0}, 800);
259    $currentSlide.find('.excerpt').stop().animate({'opacity': 0}, 800);
260
261    /* Text animation fro slide that is appearing */
262    $nextSlide.find('h3').stop(true, true).css('opacity', 0).animate({'margin-top': '130px', 'opacity': 1}, 800);
263    $nextSlide.find('.excerpt').stop(true, true).css('opacity', 0).animate({'opacity': 1}, 800);
264}