Procházet zdrojové kódy

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

Fernando Ribeiro před 10 roky
rodič
revize
e95c1c9233
12 změnil soubory, kde provedl 291 přidání a 47 odebrání
  1. 1 1
      conf/default.php
  2. 1 1
      conf/metadata.php
  3. binární
      images/facebook.ico
  4. binární
      images/googleplus.ico
  5. binární
      images/linkedin.ico
  6. binární
      images/pinterest.ico
  7. binární
      images/reddit.ico
  8. binární
      images/tumblr.ico
  9. binární
      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ární
images/facebook.ico


binární
images/googleplus.ico


binární
images/linkedin.ico


binární
images/pinterest.ico


binární
images/reddit.ico


binární
images/tumblr.ico


binární
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 '';
+    //     }
+    // }
 
 }