script.js 3.9 KB

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