Browse Source

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

Fernando Ribeiro 10 years ago
parent
commit
e95c1c9233
12 changed files with 291 additions and 47 deletions
  1. 1 1
      conf/default.php
  2. 1 1
      conf/metadata.php
  3. BIN
      images/facebook.ico
  4. BIN
      images/googleplus.ico
  5. BIN
      images/linkedin.ico
  6. BIN
      images/pinterest.ico
  7. BIN
      images/reddit.ico
  8. BIN
      images/tumblr.ico
  9. BIN
      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'));

BIN
images/facebook.ico


BIN
images/googleplus.ico


BIN
images/linkedin.ico


BIN
images/pinterest.ico


BIN
images/reddit.ico


BIN
images/tumblr.ico


BIN
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 '';
+    //     }
+    // }
 
 }