https://xifengxx.github.io/js/src/utils.js?v=0.5.0

1/* global NexT: true */
2
3NexT.utils = NexT.$u = {
4  /**
5   * Wrap images with fancybox support.
6   */
7  wrapImageWithFancyBox: function () {
8    $('.content img').not('.group-picture img').each(function () {
9
10      var $image = $(this);
11      var imageTitle = $image.attr('title');
12      var $imageWrapLink = $image.parent('a');
13
14      if ($imageWrapLink.size() < 1) {
15        $imageWrapLink = $image.wrap('<a href="' + this.getAttribute('src') + '"></a>').parent('a');
16      }
17
18      $imageWrapLink.addClass('fancybox');
19      $imageWrapLink.attr('rel', 'group');
20
21      if (imageTitle) {
22        $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');
23        $imageWrapLink.attr('title', imageTitle); //make sure img title tag will show correctly in fancybox
24      }
25    });
26
27    $('.fancybox').fancybox({
28      helpers: {
29        overlay: {
30          locked: false
31        }
32      }
33    });
34  },
35
36  lazyLoadPostsImages: function () {
37    $('#posts').find('img').lazyload({
38      placeholder: '/images/loading.gif',
39      effect: 'fadeIn'
40    });
41  },
42
43  registerBackToTop: function () {
44    var THRESHOLD = 50;
45    var $top = $('.back-to-top');
46
47    $(window).on('scroll', function () {
48      $top.toggleClass('back-to-top-on', window.pageYOffset > THRESHOLD);
49    });
50
51    $top.on('click', function () {
52      $('body').velocity('scroll');
53    });
54  },
55
56  /**
57   * Transform embedded video to support responsive layout.
58   * @see http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/
59   */
60  embeddedVideoTransformer: function () {
61    var $iframes = $('iframe');
62
63    /*
64     * Supported Players. Extend this if you need more players.
65     */
66    var SUPPORTED_PLAYERS = [
67      'www.youtube.com',
68      'player.vimeo.com',
69      'player.youku.com',
70      'music.163.com',
71      'www.tudou.com'
72    ];
73    var pattern = new RegExp(SUPPORTED_PLAYERS.join('|'));
74
75    $iframes.each(function () {
76      var iframe = this;
77      var $iframe = $(this);
78
79      if (this.src.search(pattern) > 0) {
80        /*
81         * Calculate the video ratio based on the iframe's w/h dimensions
82         */
83        var videoRatio = ( $iframe.height() / $iframe.width() ) * 100;
84
85        // Add height for 163 music.
86        if (this.src.search('music.163.com') > 0) {
87          videoRatio += 10;
88        }
89
90        /*
91         * Replace the iframe's dimensions and position
92         * the iframe absolute, this is the trick to emulate
93         * the video ratio
94         */
95        $iframe
96          .width('100%')
97          .height('100%')
98          .css({
99            position: 'absolute',
100            top: '0',
101            left: '0'
102          });
103
104        /*
105         * Wrap the iframe in a new <div> which uses a
106         * dynamically fetched padding-top property based
107         * on the video's w/h dimensions
108         */
109        var wrap = document.createElement('div');
110        wrap.className = 'fluid-vids';
111        wrap.style.width = '100%';
112        wrap.style.position = 'relative';
113        wrap.style.paddingTop = videoRatio + '%';
114
115        /*
116         * Add the iframe inside our newly created <div>
117         */
118        var iframeParent = iframe.parentNode;
119        iframeParent.insertBefore(wrap, iframe);
120        wrap.appendChild(iframe);
121      }
122    });
123  },
124
125  /**
126   * Add `menu-item-active` class name to menu item
127   * via comparing location.path with menu item's href.
128   */
129  addActiveClassToMenuItem: function () {
130    var path = window.location.pathname;
131    path = path === '/' ? path : path.substring(0, path.length - 1);
132    $('.menu-item a[href="' + path + '"]').parent().addClass('menu-item-active');
133  },
134
135  hasMobileUA: function () {
136    var nav = window.navigator;
137    var ua = nav.userAgent;
138    var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
139
140    return pa.test(ua);
141  },
142
143  isTablet: function () {
144    return window.screen.width < 992 && window.screen.width > 767 && this.hasMobileUA();
145  },
146
147  isMobile: function () {
148    return window.screen.width < 767 && this.hasMobileUA();
149  },
150
151  isDesktop: function () {
152    return !this.isTablet() && !this.isMobile();
153  },
154
155  /**
156   * Escape meta symbols in jQuery selectors.
157   *
158   * @param selector
159   * @returns {string|void|XML|*}
160   */
161  escapeSelector: function (selector) {
162    return selector.replace(/[!"$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
163  },
164
165  displaySidebar: function () {
166    if (!this.isDesktop() || this.isPisces()) {
167      return;
168    }
169    $('.sidebar-toggle').trigger('click');
170  },
171
172  isMist: function () {
173    return CONFIG.scheme === 'Mist';
174  },
175
176  isPisces: function () {
177    return CONFIG.scheme === 'Pisces';
178  },
179
180  getScrollbarWidth: function () {

181    var $div = $('<div />').addClass('scrollbar-measure').prependTo('body');
182    var div = $div[0];
183    var scrollbarWidth = div.offsetWidth - div.clientWidth;
184
185    $div.remove();
186
187    return scrollbarWidth;
188  },
189
190  /**
191   * Affix behaviour for Sidebar.
192   *
193   * @returns {Boolean}
194   */
195  needAffix: function () {
196    return this.isPisces();
197  }
198};