Эх сурвалжийг харах

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

Fernando Ribeiro 9 жил өмнө
parent
commit
e95c1c9233

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