https://huans.github.io/js/ocean.js

1(function ($) {
2  //
3  // Search ------------
4  var $searchWrap = $('.search-form-wrap'),
5    isSearchAnim = false,
6    searchAnimDuration = 200;
7
8  var startSearchAnim = function () {
9    isSearchAnim = true;
10  };
11
12  var stopSearchAnim = function (callback) {
13    setTimeout(function () {
14      isSearchAnim = false;
15      callback && callback();
16    }, searchAnimDuration);
17  };
18
19  $('.nav-item-search').on('click', function () {
20    if (isSearchAnim) return;
21    startSearchAnim();
22    $searchWrap.addClass('on');
23    stopSearchAnim(function () {
24      $('.local-search-input').focus();
25    });
26  });
27
28  $(document).mouseup(function (e) {
29    var _con = $('.local-search');
30    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
31      $searchWrap.removeClass('on');
32    }
33  });
34
35  //
36  // 移动设备侦测
37  var isMobile = {
38    Android: function () {
39      return navigator.userAgent.match(/Android/i);
40    },
41    BlackBerry: function () {
42      return navigator.userAgent.match(/BlackBerry/i);
43    },
44    iOS: function () {
45      return navigator.userAgent.match(/iPhone|iPad|iPod/i);
46    },
47    Opera: function () {
48      return navigator.userAgent.match(/Opera Mini/i);
49    },
50    Windows: function () {
51      return navigator.userAgent.match(/IEMobile/i);
52    },
53    any: function () {
54      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
55    }
56  };
57
58  //
59  // 建议在移动端不初始化，其实 /search.xml 文件还挺大的，
60  if ($('.local-search').size() && !isMobile.any()) {
61    $.getScript('/js/search.js', function () {
62      searchFunc("/search.xml", 'local-search-input', 'local-search-result');
63    });
64  }
65
66  //
67  // Share
68  $('body').on('click', function () {
69    $('.article-share-box.on').removeClass('on');
70  }).on('click', '.article-share-link', function (e) {
71    e.stopPropagation();
72
73    var $this = $(this),
74      url = $this.attr('data-url'),
75      encodedUrl = encodeURIComponent(url),
76      id = 'article-share-box-' + $this.attr('data-id'),
77      offset = $this.offset();
78
79    if ($('#' + id).length) {
80      var box = $('#' + id);
81
82      if (box.hasClass('on')) {
83        box.removeClass('on');
84        return;
85      }
86    } else {
87      var html = [
88        '<div id="' + id + '" class="article-share-box">',
89        '<input class="article-share-input" value="' + url + '">',
90        '<div class="article-share-links">',
91        '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
92        '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
93        '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
94        '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
95        '</div>',
96        '</div>'
97      ].join('');
98
99      var box = $(html);
100      $('body').append(box);
101    }
102    $('.article-share-box.on').hide();
103
104    box.css({
105      top: offset.top + 25,
106      left: offset.left
107    }).addClass('on');
108  }).on('click', '.article-share-box', function (e) {
109    e.stopPropagation();
110  }).on('click', '.article-share-box-input', function () {
111    $(this).select();
112  }).on('click', '.article-share-box-link', function (e) {
113    e.preventDefault();
114    e.stopPropagation();
115
116    window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
117  });
118
119  //
120  // fancybox
121  if ($.fancybox) {
122    $('[data-fancybox]').fancybox({
123      protect: true
124    });
125  }
126
127  //
128  // lazyload
129  $("img.lazy").lazyload({
130    effect : "fadeIn"
131  });
132
133  //
134  // justifiedGallery
135  $('#gallery').justifiedGallery({
136    rowHeight : 200,
137    margins : 5
138  });
139
140  //
141  $(document).ready(function ($) {
142    $('.anchor').click(function (event) {
143      event.preventDefault();
144      $('html,body').animate({scrollTop: $(this.hash).offset().top}, 'smooth');
145    });
146  });
147

148  // To top
149  (function($) {
150    // When to show the scroll link
151    // higher number = scroll link appears further down the page
152    var upperLimit = 1000;
153
154    // Our scroll link element
155    var scrollElem = $('#totop');
156
157    // Scroll to top speed
158    var scrollSpeed = 1600;
159
160    // Show and hide the scroll to top link based on scroll position
161    scrollElem.hide();
162    $(window).scroll(function () {
163      var scrollTop = $(document).scrollTop();
164      if ( scrollTop > upperLimit ) {
165        $(scrollElem).stop().fadeTo(300, 1); // fade back in
166      }else{
167        $(scrollElem).stop().fadeTo(300, 0); // fade out
168      }
169    });
170
171    // Scroll to top animation on click
172    $(scrollElem).click(function(){
173      $('html, body').animate({scrollTop:0}, scrollSpeed); return false;
174    });
175  })(jQuery);
176
177  // Mobile nav
178  var $content = $('.content'),
179    $sidebar = $('.sidebar'),
180    isMobileNavAnim = false,
181    mobileNavAnimDuration = 200;
182
183  var startMobileNavAnim = function () {
184    isMobileNavAnim = true;
185  };
186
187  var stopMobileNavAnim = function () {
188    setTimeout(function () {
189      isMobileNavAnim = false;
190    }, mobileNavAnimDuration);
191  };
192
193  $('.navbar-toggle').on('click', function () {
194    if (isMobileNavAnim) return;
195    startMobileNavAnim();
196    $content.toggleClass('on');
197    $sidebar.toggleClass('on');
198    stopMobileNavAnim();
199  });
200
201  $($content).on('click', function () {
202    if (isMobileNavAnim || !$content.hasClass('on')) return;
203    $content.removeClass('on');
204    $sidebar.removeClass('on');
205  });
206
207})(jQuery);
208
209