https://nullcc.github.io/js/script.js

1(function($){
2  // Search
3  var $searchWrap = $('#search-form-wrap'),
4    isSearchAnim = false,
5    searchAnimDuration = 200;
6
7  var startSearchAnim = function(){
8    isSearchAnim = true;
9  };
10
11  var stopSearchAnim = function(callback){
12    setTimeout(function(){
13      isSearchAnim = false;
14      callback && callback();
15    }, searchAnimDuration);
16  };
17
18  $('#nav-search-btn').on('click', function(){
19    if (isSearchAnim) return;
20
21    startSearchAnim();
22    $searchWrap.addClass('on');
23    stopSearchAnim(function(){
24      $('.search-form-input').focus();
25    });
26  });
27
28  $('.search-form-input').on('blur', function(){
29    startSearchAnim();
30    $searchWrap.removeClass('on');
31    stopSearchAnim();
32  });
33
34  // Share
35  $('body').on('click', function(){
36    $('.article-share-box.on').removeClass('on');
37  }).on('click', '.article-share-link', function(e){
38    e.stopPropagation();
39
40    var $this = $(this),
41      url = $this.attr('data-url'),
42      encodedUrl = encodeURIComponent(url),
43      id = 'article-share-box-' + $this.attr('data-id'),
44      offset = $this.offset();
45
46    if ($('#' + id).length){
47      var box = $('#' + id);
48
49      if (box.hasClass('on')){
50        box.removeClass('on');
51        return;
52      }
53    } else {
54      var html = [
55        '<div id="' + id + '" class="article-share-box">',
56          '<input class="article-share-input" value="' + url + '">',
57          '<div class="article-share-links">',
58            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
59            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
60            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
61            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
62          '</div>',
63        '</div>'
64      ].join('');
65
66      var box = $(html);
67
68      $('body').append(box);
69    }
70
71    $('.article-share-box.on').hide();
72
73    box.css({
74      top: offset.top + 25,
75      left: offset.left
76    }).addClass('on');
77  }).on('click', '.article-share-box', function(e){
78    e.stopPropagation();
79  }).on('click', '.article-share-box-input', function(){
80    $(this).select();
81  }).on('click', '.article-share-box-link', function(e){
82    e.preventDefault();
83    e.stopPropagation();
84
85    window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
86  });
87
88  // Caption
89  $('.article-entry').each(function(i){
90    $(this).find('img').each(function(){
91      if ($(this).parent().hasClass('fancybox')) return;
92      if ($(this).parent().parent().hasClass('entry-thumbnail')) return;
93
94      var alt = this.alt;
95
96      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
97
98      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
99    });
100
101    $(this).find('.fancybox').each(function(){
102      $(this).attr('rel', 'article' + i);
103    });
104  });
105
106  if ($.fancybox){
107    $('.fancybox').fancybox();
108  }
109
110  // Mobile nav
111  var $container = $('#container'),
112    isMobileNavAnim = false,
113    mobileNavAnimDuration = 200;
114
115  var startMobileNavAnim = function(){
116    isMobileNavAnim = true;
117  };
118
119  var stopMobileNavAnim = function(){
120    setTimeout(function(){
121      isMobileNavAnim = false;
122    }, mobileNavAnimDuration);
123  }
124
125  $('#main-nav-toggle').on('click', function(){
126    if (isMobileNavAnim) return;
127
128    startMobileNavAnim();
129    $container.toggleClass('mobile-nav-on');
130    stopMobileNavAnim();
131  });
132
133  $('#wrap').on('click', function(){
134    if (isMobileNavAnim || !$container.hasClass('mobile-nav-on')) return;
135
136    $container.removeClass('mobile-nav-on');
137  });
138})(jQuery);