Add aria-label. #60

overtrue · Jan 2, 2017 · d23bbc3 · d23bbc3
2 parents 5f97a07 + a2e2499
commit d23bbc3
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ HTML:
 <div class="social-share"></div>
 
 <!--  css & js -->
-<link href="dist/css/share.min.css">
+<link rel="stylesheet" href="dist/css/share.min.css">
 <script src="dist/js/share.min.js"></script>
 
 // 当你使用类名为 `social-share` 时不需要手动初始化

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "social-share.js",
   "description": "create social share buttons on your site.",
-  "main": "dist/js/share.min.js",
+  "main": "src/js/jquery.share.js",
   "authors": [
     "overtrue"
   ],
@@ -23,6 +23,7 @@
     "node_modules",
     "bower_components",
     "test",
-    "tests"
+    "tests",
+    "demo"
   ]
 }
diff --git a/dist/js/jquery.share.min.js b/dist/js/jquery.share.min.js
diff --git a/dist/js/social-share.min.js b/dist/js/social-share.min.js
diff --git a/src/js/jquery.share.js b/src/js/jquery.share.js
@@ -34,11 +34,13 @@
             title: $head.find('[name=title], [name=Title]').attr('content') || document.title,
             description: $head.find('[name=description], [name=Description]').attr('content') || '',
             image: $('img:first').prop('src') || '',
+            imageSelector: undefined,
 
             weiboKey: '',
 
             wechatQrcodeTitle: '微信扫一扫：分享',
             wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
+            wechatQrcodeSize: 100,
 
             mobileSites: [],
             sites: ['weibo','qq','wechat','tencent','douban','qzone','linkedin','diandian','facebook','twitter','google'],
@@ -50,7 +52,7 @@
 
         var $templates = {
             qzone       : 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESCRIPTION}}&summary={{SUMMARY}}&site={{SOURCE}}',
-            qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESCRIPTION}}&pics={{IMAGE}}',
+            qq          : 'http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESCRIPTION}}&pics={{IMAGE}}',
             tencent     : 'http://share.v.t.qq.com/index.php?c=share&a=index&title={{TITLE}}&url={{URL}}&pic={{IMAGE}}',
             weibo       : 'http://service.weibo.com/share/share.php?url={{URL}}&title={{TITLE}}&pic={{IMAGE}}&appkey={{WEIBOKEY}}',
             wechat      : 'javascript:;',
@@ -82,6 +84,11 @@
             }
 
             var $data      = $.extend({}, $globals, $(this).data());
+            if ($data.imageSelector) {
+                $data.image = $($data.imageSelector).map(function() {
+                    return $(this).prop('src');
+                }).get().join('||');
+            }
             var $container = $(this).addClass('share-component social-share');
 
             createIcons($container, $data);
@@ -105,7 +112,7 @@
 
             $.each($sites, function (i, $name) {
                 var $url  = makeUrl($name, $data);
-                var $link = $data.initialized ? $container.find('.icon-'+$name) : $('<a class="social-share-icon icon-'+$name+'" target="_blank"></a>');
+                var $link = $data.initialized ? $container.find('.icon-'+$name) : $('<a class="social-share-icon icon-'+$name+'"></a>');
 
                 if (!$link.length) {
                     return true;
@@ -114,6 +121,12 @@
 
                 $link.prop('href', $url);
 
+                if ($name === 'wechat') {
+                    $link.prop('tabindex', -1);
+                } else {
+                    $link.prop('target', '_blank');
+                }
+
                 if (!$data.initialized) {
                     $data.mode == 'prepend' ? $container.prepend($link) : $container.append($link);
                 }
@@ -133,7 +146,7 @@
 
             $wechat.append('<div class="wechat-qrcode"><h4>'+$data.wechatQrcodeTitle+'</h4><div class="qrcode"></div><div class="help">'+$data.wechatQrcodeHelper+'</div></div>');
 
-            $wechat.find('.qrcode').qrcode({render: 'image', size: 100, text: $data.url});
+            $wechat.find('.qrcode').qrcode({render: 'image', size: $data.wechatQrcodeSize, text: $data.url});
 
             if ($wechat.offset().top < 100) {
                 $wechat.find('.wechat-qrcode').addClass('bottom');
@@ -190,7 +203,7 @@
                         return $str.toUpperCase();
                     });
 
-                    var $value = encodeURIComponent($data[$camelCaseKey] || $data[$key]);
+                    var $value = encodeURIComponent($data[$camelCaseKey] === undefined ? $data[$key] : $data[$camelCaseKey]);
                     $template = $template.replace(new RegExp('{{'+$key.toUpperCase()+'}}', 'g'), $value);
                 }
             }
@@ -221,4 +234,4 @@
     $(function () {
         $('.share-component,.social-share').share();
     });
-})(jQuery);
+})(jQuery);
diff --git a/src/js/social-share.js b/src/js/social-share.js
@@ -38,11 +38,13 @@
         title: title,
         description: description,
         image: image,
+        imageSelector: undefined,
 
         weiboKey: '',
 
         wechatQrcodeTitle: '微信扫一扫：分享',
         wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
+        wechatQrcodeSize: 100,
 
         sites: ['weibo', 'qq', 'wechat', 'tencent', 'douban', 'qzone', 'linkedin', 'diandian', 'facebook', 'twitter', 'google'],
         mobileSites: [],
@@ -67,7 +69,7 @@
 
     /**
      * Expose API to the global
-     * 
+     *
      * @param  {String|Element} elem
      * @param  {Object} options
      */
@@ -101,6 +103,12 @@
     function share(elem, options) {
         var data = mixin({}, defaults, options || {}, dataset(elem));
 
+        if (data.imageSelector) {
+            data.image = querySelectorAlls(data.imageSelector).map(function(item) {
+                return item.src;
+            }).join('||');
+        }
+
         addClass(elem, 'share-component social-share');
         createIcons(elem, data);
         createWechat(elem, data);
@@ -121,14 +129,20 @@
 
         each(isPrepend ? sites.reverse() : sites, function (name) {
             var url = makeUrl(name, data);
-            var link = data.initialized ? getElementsByClassName(elem, '.icon-' + name) : createElementByString('<a class="social-share-icon icon-' + name + '" target="_blank"></a>');
+            var link = data.initialized ? getElementsByClassName(elem, 'icon-' + name) : createElementByString('<a class="social-share-icon icon-' + name + '"></a>');
 
             if (!link.length) {
                 return true;
             }
 
             link[0].href = url;
 
+            if (name === 'wechat') {
+                link[0].tabindex = -1;
+            } else {
+                link[0].target = '_blank';
+            }
+
             if (!data.initialized) {
                 isPrepend ? elem.insertBefore(link[0], elem.firstChild) : elem.appendChild(link[0]);
             }
@@ -153,7 +167,7 @@
         var qrcode = getElementsByClassName(elems[0], 'qrcode', 'div');
 
         wechat[0].appendChild(elems[0]);
-        new QRCode(qrcode[0], {text: data.url, width: 100, height: 100});
+        new QRCode(qrcode[0], {text: data.url, width: data.wechatQrcodeSize, height: data.wechatQrcodeSize});
     }
 
 
@@ -207,7 +221,7 @@
             var nameKey = name + fix + key.toLowerCase();
             key = (fix + key).toLowerCase();
 
-            return encodeURIComponent(data[nameKey] || data[key] || '');
+            return encodeURIComponent((data[nameKey] === undefined ? data[key] : data[nameKey]) || '');
         });
     }
 
@@ -228,7 +242,7 @@
      * Simple selector.
      *
      * @param {String} str #ID or .CLASS
-     * 
+     *
      * @returns {Array}
      */
     function selector(str) {