reprogl

1
'use strict';
2

3
var anima = (function ($) {
4

5
    var
6

7
    userAgentInit = function() {
8
        document.documentElement.setAttribute('data-useragent', navigator.userAgent);
9
    },
10

11
    // main menu open/close init
12
    mainMenu = function () {
13
        $('.js-open-main-menu').on('click', function (e) {
14
            e.preventDefault();
15
            $('.js-menu-container').addClass('show-menu');
16
            $('.js-menu-overlay').addClass('visible');
17
        });
18
        $('.js-close-main-menu, .js-menu-overlay').on('click', function (e) {
19
            e.preventDefault();
20
            $('.js-menu-container').removeClass('show-menu');
21
            $('.js-menu-overlay').removeClass('visible');
22
        });
23
    },
24

25
    // nice scroll plugin init
26
    niceSroll = function() {
27
        var $niceScrollHandler = $('html:has(body.nicescroll)');
28
        if ($niceScrollHandler.length) {
29
            $niceScrollHandler.niceScroll({
30
                cursorcolor:'#222',
31
                cursorwidth: 6,
32
                cursorborder: '1px solid #222',
33
                zindex: 99999,
34
                cursorborderradius: 0,
35
                scrollspeed: 80,
36
                mousescrollstep: 20,
37
                autohidemode: 'leave',
38
                railpadding: {right: 2},
39
                smoothscroll: true
40
            });
41
        }
42
    },
43

44
    niceScrollReinit = function () {
45
        if (!$('html').getNiceScroll().length) {
46
            niceSroll();
47
        }
48
        document.addEventListener('visibilitychange', function() {
49
            if(!document.hidden && !$('html').getNiceScroll().length) {
50
                niceSroll();
51
            }
52
        });
53
    },
54

55
    niceScrollShowEvent = function () {
56
        document.addEventListener('visibilitychange', function() {
57
            if(!document.hidden && $('html').getNiceScroll().length) {
58
                $('html').getNiceScroll()[0].show();
59
            }
60
        });
61
    },
62

63
    // sticky header
64
    headroom = function () {
65
        $('.headroom').headroom({
66
            offset: 200,
67
            classes : {
68
                pinned : '',
69
                unpinned : ''
70
            }
71
        });
72
    },
73

74
    // go to top button
75
    goToTopBtn = function() {
76
        var $backBtn = $('.js-back-to-top-btn');
77
        if($backBtn.length) {
78
            $(window).scroll(function () {
79
                if ($(this).scrollTop() > 300) {
80
                    $backBtn.removeClass('hidden');
81
                } else {
82
                    $backBtn.addClass('hidden');
83
                }
84
            });
85
            $backBtn.on('click', function (e) {
86
                e.preventDefault();
87
                if ($('body.nicescroll').length) {
88
                    $('html').getNiceScroll()[0].doScrollTop(0, 1000);
89
                } else {
90
                    $('body, html').stop(true, false).animate({
91
                        scrollTop: 0
92
                    }, 400);
93
                }
94
            });
95
        }
96
    },
97

98
    // based on : 'Reading Position Indicator' article
99
    // http://css-tricks.com/reading-position-indicator/
100
    positionIndicator = function () {
101
        if ($('.js-post-reading-time').is(':visible')) {
102
            imagesLoaded('.post-view-article', function () {
103
                var getMax = function() {
104
                    return $(document).height() - $(window).height();
105
                };
106
                var getValue = function() {
107
                    return $(window).scrollTop();
108
                };
109
                var progressBar, max, value, width;
110
                if('max' in document.createElement('progress')){
111
                    // Browser supports progress element
112
                    progressBar = $('progress');
113
                    // Set the Max attr for the first time
114
                    progressBar.attr({ max: getMax() });
115
                    $(document).on('scroll', function(){
116
                        // On scroll only Value attr needs to be calculated
117
                        progressBar.attr({ value: getValue() });
118
                    });
119
                    $(window).resize(function(){
120
                        // On resize, both Max/Value attr needs to be calculated
121
                        progressBar.attr({ max: getMax(), value: getValue() });
122
                    });
123
                }
124
                else {
125
                    progressBar = $('.progress-bar'),
126
                        max = getMax(),
127
                        value, width;
128
                    var getWidth = function(){
129
                        // Calculate width in percentage
130
                        value = getValue();
131
                        width = (value/max) * 100;
132
                        width = width + '%';
133
                        return width;
134
                    };
135
                    var setWidth = function(){
136
                        progressBar.css({ width: getWidth() });
137
                    };
138
                    $(document).on('scroll', setWidth);
139
                    $(window).on('resize', function(){
140
                        // Need to reset the Max attr
141
                        max = getMax();
142
                        setWidth();
143
                    });
144
                }
145
            });
146
        }
147
    },
148

149
    readingTime = function () {
150
        var $postArticleContent = $('.post-article-content');
151
        if ($postArticleContent.length) {
152
            $postArticleContent.readingTime({
153
                wordCountTarget: $('.js-post-reading-time').find('.js-word-count'),
154
                lessThanAMinuteString: 'меньше минуты',
155
                minShortFormString: 'мин'
156
            });
157
        }
158
    },
159

160
    // magnific popup init
161
    // http://dimsemenov.com/plugins/magnific-popup/
162
    imageLightbox = function () {
163
        if ($('.anima-image-popup').length) {
164
            var mfOptions = {
165
                type: 'image',
166
                removalDelay: 200,
167
                midClick: true,
168
                callbacks: {
169
                    beforeOpen: function() {
170
                        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
171
                        this.st.mainClass = 'mfp-zoom-in';
172
                        /* other css animations: http://codepen.io/dimsemenov/pen/GAIkt */
173
                    }
174
                },
175
                closeOnContentClick: true,
176
                gallery: {
177
                    enabled: true
178
                },
179
                image: {
180
                    titleSrc: function (item) {
181
                        if (item.img && item.img.length > 0) {
182
                            var alt = item.img.attr('alt');
183
                            if (alt && alt !== "undefined") {
184
                                return alt
185
                            }
186
                        }
187
                    }
188
                }
189
            };
190
            $('.anima-image-popup').magnificPopup(mfOptions);
191
        }
192
    },
193

194
    // filter tags selector styling
195
    filterTagsSelector = function () {
196
        [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
197
            new SelectFx(el, {
198
                newTab: false,
199
            });
200
        });
201
    },
202

203
    flassMessages = function() {
204
        var successMessage = $('.success-flash');
205
        if(successMessage.length) {
206
            setTimeout(function () {
207
                successMessage.hide(300);
208
            }, 3000);
209
        }
210
    },
211

212
    // anima javascripts initialization
213
    init = function () {
214
        $(document).foundation();
215
        userAgentInit();
216
        mainMenu();
217
        goToTopBtn();
218
        readingTime();
219
        positionIndicator();
220
        headroom();
221
        niceSroll();
222
        niceScrollShowEvent();
223
        filterTagsSelector();
224
        imageLightbox();
225
        flassMessages();
226
    };
227

228
    return {
229
        init: init
230
    };
231

232
})(jQuery);
233

234
(function () {
235
    anima.init();
236
})();
237