浏览代码

start using classes to select between text, icon and color styles
serve icons from our server

Fernando Ribeiro 10 年之前
父节点
当前提交
e95c1c9233
共有 12 个文件被更改,包括 291 次插入47 次删除
  1. 1 1
      conf/default.php
  2. 1 1
      conf/metadata.php
  3. 二进制
      images/facebook.ico
  4. 二进制
      images/googleplus.ico
  5. 二进制
      images/linkedin.ico
  6. 二进制
      images/pinterest.ico
  7. 二进制
      images/reddit.ico
  8. 二进制
      images/tumblr.ico
  9. 二进制
      images/twitter.ico
  10. 1 1
      lang/en/settings.php
  11. 266 29
      style.css
  12. 22 15
      syntax/button.php

+ 1 - 1
conf/default.php

@@ -10,4 +10,4 @@
 
 $conf['networks']   = 'twitter facebook googleplus linkedin pinterest tumblr reddit';
 
-$conf['display']    = 'text';
+$conf['display']    = 'color';

+ 1 - 1
conf/metadata.php

@@ -10,4 +10,4 @@
 
 $meta['networks']   = array('string', '_pattern' => '/^[a-zA-Z\s]*$/');
 
-$meta['display']    = array('multichoice','_choices' => array('text', 'icon'));
+$meta['display']    = array('multichoice','_choices' => array('name', 'icon', 'color'));

二进制
images/facebook.ico


二进制
images/googleplus.ico


二进制
images/linkedin.ico


二进制
images/pinterest.ico


二进制
images/reddit.ico


二进制
images/tumblr.ico


二进制
images/twitter.ico


+ 1 - 1
lang/en/settings.php

@@ -11,4 +11,4 @@
 $lang['networks']   = 'List of your favorite social buttons, space separated and in order of appearance.';
 $lang['networks']  .= ' Valid names are: twitter facebook googleplus linkedin pinterest tumblr reddit';
 
-$lang['display']    = 'Display options: show text or just the icon.';
+$lang['display']    = 'Display options: show social buttons with icon and name, just the icon or name and backgroud color.';

+ 266 - 29
style.css

@@ -1,63 +1,300 @@
 /* -- Begin social sharing buttons
 ------------------------------------------------------------- */
+
 .lsb {
     padding-left: 0;
     list-style: none;
 }
 
-.lsb-item {
-    display: inline-block;
-    margin: .25em;
-    line-height: 24px;
-}
 
-.lsb-link {
-    font-size: .75em;
-    padding: .5em .5em .5em 2.25em;
-    background-color: #f5f5f5;
+[class*="lsb-link-"] {
+    font-size: .875em;
     border-radius: 2px;
+    border: 1px solid;
     box-shadow: 0 0 .5em #999;
-    transition: background-color ease-in-out .5s, color ease-in-out .5s, border-color ease-in-out .5s;
+    transition: background-color ease-in-out .5s, color ease-in-out .5s, border-color ease-in-out .5s, box-shadow ease-in-out .5s;
+    width: 16px;
+    height: 16px;
+}
+
+[class*="lsb-link-"]:hover {
+    box-shadow: 0 0 1em #666;
 }
 
-.lsb-link:hover, .lsb-link:active, .lsb-link:focus {
-    color: #000;
-    background-color: #e5e5e5;
+[class*="lsb-link-name-"] {
+    padding: .25em .25em .25em 1.75em;
 }
 
-[class*="ico-"] {
+[class*="lsb-link-icon-"],
+[class*="lsb-link-color-"] {
+    padding: .25em .25em .25em .25em;
+}
+
+[class*="lsb-link-color-"],
+[class*="lsb-link-color-"]:hover {
+      color: #ffffff;
+}
+
+
+[class*="lsb-item-name-"],
+[class*="lsb-item-icon-"] {
     background-size: 16px 16px;
     background-repeat: no-repeat;
-    background-position: 6px center;
+    background-position: 5px center;
+}
+
+[class*="lsb-item-"] {
+    display: inline-block;
+    margin: .25em;
+    line-height: 24px;
+}
+
+[class*="lsb-item-"] a:link,
+[class*="lsb-item-"] a:visited {
+    text-decoration: none;
+}
+
+[class*="lsb-item-name-"] a:link,
+[class*="lsb-item-name-"] a:visited,
+[class*="lsb-item-icon-"] a:link,
+[class*="lsb-item-icon-"] a:visited {
+    color: #000000;
+}
+
+[class*="lsb-item-color-"] a:link,
+[class*="lsb-item-color-"] a:visited {
+    color: #ffffff;
+}
+
+
+/* 
+ * Social network specific settings
+ */
+
+/* Twitter */
+.lsb-item-name-twitter {
+    background-image: url("images/twitter.ico");
+}
+.lsb-link-icon-twitter{
+    content:url("images/twitter.ico");
 }
 
-.ico-twitter {
-    background-image: url("http://twitter.com/favicons/favicon.ico");
+.lsb-link-name-twitter,
+.lsb-link-icon-twitter,
+.lsb-link-color-twitter {
+    border-color: #41b7d8;
 }
 
-.ico-facebook {
-    background-image: url("http://www.facebook.com/favicon.ico");
+.lsb-link-color-twitter {
+    background-color: #41b7d8;
 }
 
-.ico-googleplus {
-    background-image: url("https://ssl.gstatic.com/s2/oz/images/faviconr2.ico");
+.lsb-link-color-twitter:hover,
+a .lsb-link-color-twitter:hover {
+    background-color: #238caa;
+    border-color: #238caa;
 }
 
-.ico-linkedin {
-    background-image: url("https://www.linkedin.com/favicon.ico");
+/* Facebook */
+.lsb-item-name-facebook {
+    background-image: url("images/facebook.ico");
+}
+
+.lsb-link-icon-facebook{
+    content:url("images/facebook.ico");
+}
+
+.lsb-link-name-facebook,
+.lsb-link-icon-facebook,
+.lsb-link-color-facebook {
+    border-color: #3b5997;
+}
+
+.lsb-link-color-facebook {
+    background-color: #3b5997;
+}
+
+.lsb-link-color-facebook:hover,
+a .lsb-link-color-facebook:hover {
+    background-color: #263960;
+    border-color: #263960;
+}
+
+/* Google+ */
+.lsb-item-name-googleplus {
+    background-image: url("images/googleplus.ico");
+}
+
+.lsb-link-icon-googleplus{
+    content:url("images/googleplus.ico");
+}
+
+.lsb-link-name-googleplus,
+.lsb-link-icon-googleplus,
+.lsb-link-color-googleplus {
+    border-color: #d64937;
+}
+
+.lsb-link-color-googleplus {
+    background-color: #d64937;
+}
+
+.lsb-link-color-google:hover,
+a .lsb-link-color-google:hover {
+    background-color: #a02f21;
+    border-color: #a02f21;
+}
+
+/* LinkedIn */
+.lsb-item-name-linkedin {
+    background-image: url("images/linkedin.ico");
+}
+
+.lsb-link-icon-linkedin{
+    content:url("images/linkedin.ico");
+}
+
+.lsb-link-name-linkedin,
+.lsb-link-icon-linkedin,
+.lsb-link-color-linkedin {
+    border-color: #0073b2;
+}
+
+.lsb-link-color-linkedin {
+    background-color: #0073b2;
+
 }
 
-.ico-pinterest {
-    background-image: url("https://www.pinterest.com/favicon.ico");
+.lsb-link-color-linkedin:hover,
+a .lsb-link-color-linkedin:hover {
+    background-color: #004265;
+    border-color: #004265;
 }
 
-.ico-tumblr {
-    background-image: url("https://www.tumblr.com/favicon.ico");
+/* Pinterest */
+.lsb-item-name-pinterest {
+    background-image: url("images/pinterest.ico");
 }
 
-.ico-reddit {
-    background-image: url("https://www.reddit.com/favicon.ico");
+.lsb-link-icon-pinterest{
+    content:url("images/pinterest.ico");
 }
 
+.lsb-link-name-pinterest,
+.lsb-link-icon-pinterest,
+.lsb-link-color-pinterest {
+    border-color: #cb2027;
+}
+
+.lsb-link-color-pinterest {
+    background-color: #cb2027;
+}
+
+.lsb-link-color-pinterest:hover,
+a .lsb-link-color-pinterest:hover {
+    background-color: #89161a;
+    border-color: #89161a;
+}
+
+/* Tumblr */
+.lsb-item-name-tumblr {
+    background-image: url("images/tumblr.ico");
+}
+
+.lsb-link-icon-tumblr{
+    content:url("images/tumblr.ico");
+}
+
+.lsb-link-name-tumblr,
+.lsb-link-icon-tumblr,
+.lsb-link-color-tumblr {
+    border-color: #35465c;
+}
+
+.lsb-link-color-tumblr {
+    background-color: #35465c;
+}
+
+.lsb-link-color-tumblr:hover,
+a .lsb-link-color-tumblr:hover {
+    background-color: #19212b;
+    border-color: #19212b;
+}
+
+/* Reddit */
+.lsb-item-name-reddit {
+    background-image: url("images/reddit.ico");
+}
+
+.lsb-link-icon-reddit{
+    content:url("images/reddit.ico");
+}
+
+.lsb-link-name-reddit,
+.lsb-link-icon-reddit,
+.lsb-link-color-reddit {
+    border-color: #ff5700;
+}
+
+.lsb-link-color-reddit {
+    background-color: #ff5700;
+}
+
+.lsb-link-color-reddit:hover,
+a .lsb-link-color-reddit:hover {
+    background-color: #b33d00;
+    border-color: #b33d00;
+}
+
+
+
+
+
+
+
+
+/* buttons with backgroud colors */
+
+
+
+
+
+
+
+
+
+
+.lsb-link-color-vk {
+  background-color: #5e82a8;
+  border-color: #5e82a8;
+}
+
+.lsb-link-color-vk:hover,
+a .lsb-link-color-vk:hover {
+  background-color: #415c78;
+  border-color: #415c78;
+}
+
+.lsb-link-color-xing {
+  background-color: #175e60;
+  border-color: #175e60;
+}
+
+.lsb-link-color-xing:hover,
+a .lsb-link-color-xing:hover {
+  background-color: #082222;
+  border-color: #082222;
+}
+
+.lsb-link-color-tumblr {
+  background-color: #35465c;
+  border-color: #35465c;
+}
+
+.lsb-link-color-tumblr:hover,
+a .lsb-link-color-tumblr:hover {
+  background-color: #19212b;
+  border-color: #19212b;
+}
 
 

+ 22 - 15
syntax/button.php

@@ -69,12 +69,11 @@ class syntax_plugin_lsb_button extends DokuWiki_Syntax_Plugin {
 
         if($mode != 'xhtml') return false;
 
-        $renderer->doc .= '<ul class="lsb">';
-
         // validation list of available social networks
         $protected = array('twitter', 'facebook', 'googleplus', 'linkedin', 'pinterest', 'tumblr', 'reddit');
 
 
+        $renderer->doc .= '<ul class="lsb">';
         foreach ($data as $network) {
             if (in_array($network, $protected)) {
                 $renderer->doc .= $this->lsb_button($network);
@@ -98,9 +97,10 @@ class syntax_plugin_lsb_button extends DokuWiki_Syntax_Plugin {
         $url      = rawurlencode(wl($ID,'',true));
         $title    = rawurlencode(($INFO['meta']['title']) ? $INFO['meta']['title'] : $meta);
         $abstract = rawurlencode($INFO['meta']['description']['abstract']);
-        $text     = $this->lsb_getText($network);
-        $class    = 'ico-' . $network;
+        //$text     = $this->lsb_getText($network);
+        $class    = $this->getConf('display') . '-' . $network;
 
+        // see: http://builtbyboon.com/blog/simple-social-sharing-buttons
         // see: https://github.com/cferdinandi/social-sharing
         // <a href="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE">Tweet</a>
         // <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR-URL">Share on Facebook</a>
@@ -114,30 +114,37 @@ class syntax_plugin_lsb_button extends DokuWiki_Syntax_Plugin {
 
         switch ($network) {
             case 'twitter':
+                $name = 'Twitter';
                 $href = 'https://twitter.com/intent/tweet?url=' . $url . '&text='. $title;
                 break;
             case 'facebook':
+                $name = 'Facebook';
                 $href = 'http://www.facebook.com/sharer.php?u='. $url;
                 break;
             case 'googleplus':
+                $name = 'Google+';
                 $href = 'https://plus.google.com/share?url='. $url;
                 break;
             case 'linkedin':
+                $name = 'LinkedIn';
                 $href = 'https://www.linkedin.com/shareArticle?url='. $url .'&title=' . $title . '&summary=' . $abstract . '&mini=true&source=' . $url;
                 break;
             case 'pinterest':
+                $name = 'Pinterest';
                 $href = 'https://pinterest.com/pin/create/button/?url='. $url .'&description=' . $abstract;
                 break;
             case 'tumblr':
+                $name = 'Tumblr';
                 $href = 'http://www.tumblr.com/share/link?url='. $url .'&description=' . $abstract;
                 break;
             case 'reddit':
+                $name = 'Reddit';
                 $href = 'http://www.reddit.com/submit?url='. $url .'&title=' . $title;
                 break;
         }
 
-        $xhtml  = '<li class="lsb-item">';
-        $xhtml .= '<a class="lsb-link ' . $class . '" href="' . $href . '">' . $text . '</a>';
+        $xhtml  = '<li class="lsb-item-' . $class . '">';
+        $xhtml .= '<a class="lsb-link-' . $class . '" href="' . $href . '">' . $name . '</a>';
         $xhtml .= '</li>';
 
         return $xhtml;
@@ -149,16 +156,16 @@ class syntax_plugin_lsb_button extends DokuWiki_Syntax_Plugin {
      * @param string    $network    The social network to get the text to
      * @return string   text for button or empty string to show just the icon.
      */
-    protected function lsb_getText($network) {
+    // protected function lsb_getText($network) {
 
-        $display = $this->getConf('display');
+    //     $display = $this->getConf('display');
 
-        if ($display == 'text') {
-            return $this->getLang($network . '_text');
-        } else {
-            // no text, just the icon
-            return '';
-        }
-    }
+    //     if ($display == 'text') {
+    //         return $this->getLang($network . '_text');
+    //     } else {
+    //         // no text, just the icon
+    //         return '';
+    //     }
+    // }
 
 }