feat: Add Share Platform

source/js/ayer.js

@@ -65,56 +65,7 @@
 
   //
   // Share
-  $('body').on('click', function () {
-    $('.article-share-box.on').removeClass('on');
-  }).on('click', '.article-share-link', function (e) {
-    e.stopPropagation();
-
-    var $this = $(this),
-      url = $this.attr('data-url'),
-      encodedUrl = encodeURIComponent(url),
-      id = 'article-share-box-' + $this.attr('data-id'),
-      offset = $this.offset();
-
-    if ($('#' + id).length) {
-      var box = $('#' + id);
-
-      if (box.hasClass('on')) {
-        box.removeClass('on');
-        return;
-      }
-    } else {
-      var html = [
-        '<div id="' + id + '" class="article-share-box">',
-        '<input class="article-share-input" value="' + url + '">',
-        '<div class="article-share-links">',
-        '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
-        '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
-        '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
-        '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
-        '</div>',
-        '</div>'
-      ].join('');
-
-      var box = $(html);
-      $('body').append(box);
-    }
-    $('.article-share-box.on').hide();
-
-    box.css({
-      top: offset.top + 25,
-      left: offset.left
-    }).addClass('on');
-  }).on('click', '.article-share-box', function (e) {
-    e.stopPropagation();
-  }).on('click', '.article-share-box-input', function () {
-    $(this).select();
-  }).on('click', '.article-share-box-link', function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
-  });
+  $('.share-outer').click(()=>$('.share-wrap').fadeToggle())
 
   //
   // fancybox
@@ -195,8 +146,8 @@
 
   // reward
   $('#reward-btn').on('click', function () {
-    $('#mask').fadeIn(100)
-    $('#reward').fadeIn(100)
+    $('#reward').fadeIn(150)
+    $('#mask').fadeIn(150)
   });
   $('#reward .close, #mask').on('click', function () {
     $('#mask').fadeOut(100)

source/js/share.js

@@ -0,0 +1,75 @@
+
+function generate(url, opts) {
+  var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl))
+    .replace(/<%-sTitle%>/g, opts.sTitle)
+    .replace(/<%-sDesc%>/g, opts.sDesc)
+    .replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic));
+
+  window.open(url);
+}
+
+function showWX() {
+  let $wx = $('.wx-share-modal')
+  let $mask = $('#share-mask')
+  $wx.addClass('in')
+  $wx.addClass('ready')
+  $mask.show()
+}
+
+function hideWX() {
+  let $wx = $('.wx-share-modal')
+  let $mask = $('#share-mask')
+  $wx.removeClass('in')
+  $wx.removeClass('ready')
+  $mask.hide()
+}
+
+function handleClick(type, opts) {
+  if (type === 'weibo') {
+    generate('http://service.weibo.com/share/share.php?url=<%-sUrl%>&title=<%-sTitle%>&pic=<%-sPic%>', opts)
+  } else if (type === 'qq') {
+    generate('http://connect.qq.com/widget/shareqq/index.html?url=<%-sUrl%>&title=<%-sTitle%>&source=<%-sDesc%>', opts)
+  } else if (type === 'douban') {
+    generate('https://www.douban.com/share/service?image=<%-sPic%>&href=<%-sUrl%>&name=<%-sTitle%>&text=<%-sDesc%>', opts)
+  } else if (type === 'qzone') {
+    generate('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%-sUrl%>&title=<%-sTitle%>&pics=<%-sPic%>&summary=<%-sDesc%>', opts)
+  } else if (type === 'facebook') {
+    generate('https://www.facebook.com/sharer/sharer.php?u=<%-sUrl%>', opts)
+  } else if (type === 'twitter') {
+    generate('https://twitter.com/intent/tweet?text=<%-sTitle%>&url=<%-sUrl%>&via=<%-config.url%>', opts)
+  } else if (type === 'google') {
+    generate('https://plus.google.com/share?url=<%-sUrl%>', opts)
+  } else if (type === 'weixin') {
+    showWX();
+  }
+}
+
+let init = function () {
+  let $sns = document.querySelectorAll('.share-sns');
+  if (!$sns || $sns.length === 0) return;
+
+  let sUrl = window.location.href;
+  let sTitle = document.querySelector('title').innerHTML;
+  let $img = document.querySelectorAll('.article-entry img');
+  let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : '';
+  if ((sPic !== '') && !/^(http:|https:)?\/\//.test(sPic)) {
+    sPic = window.location.origin + sPic
+  }
+
+  $sns.forEach(($em) => {
+    $em.onclick = (e) => {
+      let type = $em.getAttribute('data-type')
+      handleClick(type, {
+        sUrl: sUrl,
+        sPic: sPic,
+        sTitle: sTitle,
+        sDesc: sTitle
+      })
+    }
+  })
+
+  document.querySelector('#mask').onclick = hideWX
+  document.querySelector('.modal-close').onclick = hideWX
+}
+
+init()