Initial version of plugin

Created plugin according to original spec in bug723761. Will update according to gh issue log.
2012-02-26 22:14:53 -08:00 · 2012-02-26 22:14:53 -08:00 · a90b57f0be
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+*.py[co]
+*.sw[po]
+pip-log.txt
+.DS_Store
--- a/OpenSans-Light.ttf
+++ b/OpenSans-Light.ttf
--- a/README.md
+++ b/README.md
@ -0,0 +1,22 @@
+# Private Social Sharing
+
+## About
+Most "Share with Twitter/Facebook/Google+" buttons leak user data even
+when people don't don't use the button.
+
+This implementation of social sharing doesn't leak user data until a user goes
+to share the page.
+
+## Usage
+Insert the following code to get it to run
+
+```html
+<div class="socialshare" data-size="{{bubbles/small-bubbles}}"></div>
+<script src="socialshare.js"></script>
+```
+
+Put your images somewhere cool. Compile the css and include those too.
+
+TODO:
+
+Package everything/minify it put it in the readme how to clone and stuff.
--- a/SocialShare.js
+++ b/SocialShare.js
@ -0,0 +1,161 @@
+(function($) {
+
+    "use strict";
+
+    /* DROPDOWN CLASS DEFINITION */
+
+    var toggle = '[data-toggle="dropdown"]';
+    var share_selector = '.socialshare';
+    var fb_iframe = '.socialshare.open[data-type="small-bubbles"] .share-options div.fb-like iframe';
+    var $share_container;
+    var packaged_html = '' +
+    '<div class="dropdown-toggle" data-toggle="dropdown">' +
+    '    <div class="share-link"><div>' +
+    '        <div class="heart"></div>' +
+    '        <p class="text">Share This</p>' +
+    '        <div class="caret"><div></div></div></div>' +
+    '    </div><div class="clear">' +
+    '</div>' +
+    '<div class="share-options">' +
+    '    <ul>' +
+    '        <li><div class="fb-like"></div></li>' +
+    '        <li><div class="g-plusone"></div></li>' +
+    '        <li><a href="https://twitter.com/share" class="twitter-share-button"></a></li>' +
+    '    </ul>' +
+    '</div>';
+    var type;
+    var providers = {
+        facebook: {
+            id: 'facebook-jssdk',
+            src: '//connect.facebook.net/en_US/all.js#xfbml=1&appId=255566051148260',
+            selector: '.fb-like',
+            'small-bubbles': {
+                'data-send': 'false',
+                'data-layout': 'button_count',
+                'data-width': '105',
+                'data-show-face': 'false'
+            },
+            'bubbles': {
+                'data-send': 'false',
+                'data-layout': 'box_count',
+                'data-width': '12',
+                'data-show-faces': 'false'
+            },
+            'small': {
+                'data-send': 'false',
+                'data-width': '85',
+                'data-show-face': 'false'
+            }
+        },
+        googleplus: {
+            id: 'gplus-api',
+            src: 'https://apis.google.com/js/plusone.js',
+            selector: '.g-plusone',
+            'small-bubbles': {
+            },
+            'bubbles': {
+                'data-size': 'tall'
+            },
+            'small': {
+                'data-size': 'small',
+                'data-annotation': 'none'
+            }
+        },
+        twitter: {
+            id: 'twitter-wjs',
+            src: '//platform.twitter.com/widgets.js',
+            selector: '.twitter-share-button',
+            'small-bubbles': {
+                'data-via': 'firefox'
+            },
+            'bubbles': {
+                'data-via': 'firefox',
+                'data-count': 'vertical'
+            },
+            'small': {
+                'data-via': 'firefox',
+                'data-count': 'none'
+            }
+        }
+    };
+
+    var clear_menus = function() {
+        $(toggle).parent().removeClass('open');
+    };
+
+    var Dropdown = function(element) {
+        var $el = $(element).on('click.dropdown.data-api', this.toggle);
+        $('html').on('click.dropdown.data-api', function() {
+            $el.parent().removeClass('open');
+        });
+    };
+
+    Dropdown.prototype = {
+        constructor: Dropdown,
+        scripts_loaded: false,
+
+        toggle: function(e) {
+            var $parent = $(this).parent();
+            var isActive = $parent.hasClass('open');
+
+            clear_menus();
+            if (!isActive) {
+                $parent.toggleClass('open');
+            }
+            $share_container = $(fb_iframe).css('width',
+                providers.facebook['small-bubbles']['data-width']);
+
+            Dropdown.prototype.load_sharing();
+
+            return false;
+        },
+        load_sharing: function() {
+            if (!this.scripts_loaded) {
+                for (var key in providers) {
+                    this.load_script(providers[key].src, providers[key].id);
+                }
+                this.scripts_loaded = true;
+            }
+        },
+        load_script: function(src, id) {
+            var first_js = document.getElementsByTagName("script")[0];
+            var js = document.getElementById(id);
+            // If the script doesnt exist, create it.
+            if (!js) {
+                js = document.createElement("script");
+                js.id = id;
+                first_js.parentNode.insertBefore(js, first_js);
+            }
+            js.src = src;
+        }
+    };
+
+    /* DROPDOWN PLUGIN DEFINITION */
+
+    $.fn.dropdown = function(option) {
+        return this.each(function() {
+            var $this = $(this);
+            var data = $this.data('dropdown');
+            if (!data) {
+                $this.data('dropdown', (data = new Dropdown(this)));
+            }
+            if (typeof option === 'string') {
+                data[option].call($this);
+            }
+        });
+    };
+
+    $.fn.dropdown.Constructor = Dropdown;
+
+    /* APPLY TO DROPDOWN ELEMENTS */
+    $(function() {
+        $('html').on('click.dropdown.data-api', clear_menus);
+        $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle);
+        $share_container = $(share_selector);
+        $share_container.append(packaged_html);
+        for (var key in providers) {
+            $share_container.find(providers[key].selector)
+                .attr(providers[key][$share_container.attr('data-type')]);
+        }
+    });
+})(window.jQuery);
--- a/background-gradient.png
+++ b/background-gradient.png
--- a/demo.less
+++ b/demo.less
@ -0,0 +1,44 @@
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
+img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
+dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figure, figcaption, hgroup,
+menu, footer, header, nav, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+article, aside, canvas, figure, figure img, figcaption, hgroup,
+footer, header, nav, section, audio, video {
+    display: block;
+}
+
+a img {border: 0;}
+
+@font-face { font-family: "OpenSans"; src: url(OpenSans-Light.ttf) format("truetype"); }
+body {font: 16px/24px Georgia, serif; background: rgb(245,241,232) url('background-gradient.png') repeat-x top center; width: 100%;}
+
+.huge, .large, h1, h2, h3, h4 {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75);}
+
+.huge {font-size: 108px; letter-spacing: -4px; line-height: 100%;}
+.large {font-size: 72px; letter-spacing: -3px; line-height: 100%;}
+h1 {font-size: 48px; letter-spacing: -2px; line-height: 100%;}
+h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;}
+h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;}
+h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;}
+.small, small { font-size: 12px; line-height: 100%;}
+/* Type examples */
+
+#content {
+    width: 85%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.large{
+    margin-bottom: 20px;
+}
+
+
--- a/elements.less
+++ b/elements.less
@ -0,0 +1,151 @@
+/*---------------------------------------------------
+    LESS Elements 0.6
+  ---------------------------------------------------
+    A set of useful LESS mixins by Dmitry Fadeyev
+    Special thanks for mixin suggestions to:
+      Kris Van Herzeele,
+      Benoit Adam,
+      Portenart Emile-Victor,
+      Ryan Faerman
+
+    More info at: http://lesselements.com
+-----------------------------------------------------*/
+
+.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, @start),
+                               color-stop(1, @stop));
+  background: -ms-linear-gradient(bottom,
+                                  @start,
+                                  @stop);
+  background: -moz-linear-gradient(center bottom,
+                                   @start 0%,
+                                   @stop 100%);
+}
+.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, rgb(@start,@start,@start)),
+                               color-stop(1, rgb(@stop,@stop,@stop)));
+  background: -ms-linear-gradient(bottom,
+                                  rgb(@start,@start,@start) 0%,
+                                  rgb(@start,@start,@start) 100%);
+  background: -moz-linear-gradient(center bottom,
+                                   rgb(@start,@start,@start) 0%,
+                                   rgb(@stop,@stop,@stop) 100%);
+}
+.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
+  border-top: solid 1px @top-color;
+  border-left: solid 1px @left-color;
+  border-right: solid 1px @right-color;
+  border-bottom: solid 1px @bottom-color;
+}
+.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
+  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+}
+.rounded(@radius: 2px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
+}
+.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
+  -webkit-border-top-right-radius: @topright;
+  -webkit-border-bottom-right-radius: @bottomright;
+  -webkit-border-bottom-left-radius: @bottomleft;
+  -webkit-border-top-left-radius: @topleft;
+  -moz-border-radius-topright: @topright;
+  -moz-border-radius-bottomright: @bottomright;
+  -moz-border-radius-bottomleft: @bottomleft;
+  -moz-border-radius-topleft: @topleft;
+  border-top-right-radius: @topright;
+  border-bottom-right-radius: @bottomright;
+  border-bottom-left-radius: @bottomleft;
+  border-top-left-radius: @topleft;
+  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
+}
+.opacity(@opacity: 0.5) {
+  -moz-opacity: @opacity;
+  -khtml-opacity: @opacity;
+  -webkit-opacity: @opacity;
+  opacity: @opacity;
+}
+.transition-duration(@duration: 0.2s) {
+  -moz-transition-duration: @duration;
+  -webkit-transition-duration: @duration;
+  transition-duration: @duration;
+}
+.rotation(@deg:5deg){
+  -webkit-transform: rotate(@deg);
+  -moz-transform: rotate(@deg);
+  transform: rotate(@deg);
+}
+.scale(@ratio:1.5){
+  -webkit-transform:scale(@ratio);
+  -moz-transform:scale(@ratio);
+  transform:scale(@ratio);
+}
+.transition(@duration:0.2s, @ease:ease-out) {
+  -webkit-transition: all @duration @ease;
+  -moz-transition: all @duration @ease;
+  transition: all @duration @ease;
+}
+.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
+  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+}
+.box-shadow(@shadow1) {
+  -webkit-box-shadow: @shadow1;
+  -moz-box-shadow: @shadow1;
+  box-shadow: @shadow1;
+}
+.box-shadow(@shadow1, @shadow2) {
+  -webkit-box-shadow: @shadow1, @shadow2;
+  -moz-box-shadow: @shadow1, @shadow2;
+  box-shadow: @shadow1, @shadow2;
+}
+.box-shadow(@shadow1, @shadow2, @shadow3) {
+  -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
+  -moz-box-shadow: @shadow1, @shadow2, @shadow3;
+  box-shadow: @shadow1, @shadow2, @shadow3;
+}
+.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) {
+  -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
+  -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
+  box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
+}
+.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
+  -moz-column-width: @colwidth;
+  -moz-column-count: @colcount;
+  -moz-column-gap: @colgap;
+  -moz-column-rule-color: @columnRuleColor;
+  -moz-column-rule-style: @columnRuleStyle;
+  -moz-column-rule-width: @columnRuleWidth;
+  -webkit-column-width: @colwidth;
+  -webkit-column-count: @colcount;
+  -webkit-column-gap: @colgap;
+  -webkit-column-rule-color: @columnRuleColor;
+  -webkit-column-rule-style: @columnRuleStyle;
+  -webkit-column-rule-width: @columnRuleWidth;
+  column-width: @colwidth;
+  column-count: @colcount;
+  column-gap: @colgap;
+  column-rule-color: @columnRuleColor;
+  column-rule-style: @columnRuleStyle;
+  column-rule-width: @columnRuleWidth;
+}
+.translate(@x:0, @y:0) {
+  -moz-transform: translate(@x, @y);
+  -webkit-transform: translate(@x, @y);
+  -o-transform: translate(@x, @y);
+  -ms-transform: translate(@x, @y);
+  transform: translate(@x, @y);
+}
--- a/img/caret-open.png
+++ b/img/caret-open.png
--- a/img/caret.png
+++ b/img/caret.png
--- a/img/heart-hover.png
+++ b/img/heart-hover.png
--- a/img/heart.png
+++ b/img/heart.png
--- a/index.html
+++ b/index.html
--- a/large.html
+++ b/large.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+  <title>Social Share</title>
+
+  <link rel="stylesheet/less" href="demo.less" type="text/css">
+  <link rel="stylesheet/less" href="style.less" type="text/css">
+  <link rel="stylesheet/less" href="elements.less" type="text/css">
+
+</head>
+<body>
+  <div id="content">
+    <h1 class="large">
+      This is a test post. Please ignore.
+    </h1>
+    <div class="socialshare" data-type="bubbles">
+    </div>
+  </div>
+  <div id="fb-root"></div>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="socialshare.js"></script>
+  <script src="less.js"></script>
+</body>
+</html>
--- a/less.js
+++ b/less.js
--- a/script.js
+++ b/script.js
--- a/small.html
+++ b/small.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+  <title>Social Share</title>
+
+  <link rel="stylesheet/less" href="demo.less" type="text/css">
+  <link rel="stylesheet/less" href="style.less" type="text/css">
+  <link rel="stylesheet/less" href="elements.less" type="text/css">
+
+</head>
+<body>
+  <div id="content">
+    <h1 class="large">
+      This is a test post. Please ignore.
+    </h1>
+    <div class="socialshare" data-type="small-bubbles">
+    </div>
+  </div>
+  <div id="fb-root"></div>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="socialshare.js"></script>
+  <script src="less.js"></script>
+</body>
+</html>
--- a/style.css
+++ b/style.css
--- a/style.less
+++ b/style.less
@ -0,0 +1,152 @@
+@import "elements";
+
+/* Share CSS */
+@active-colour: rgb(175, 50, 50);
+
+@font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
+
+@heart-non-active: url('img/heart.png');
+
+@heart-active: url('img/heart-hover.png');
+
+@caret-non-active: url('img/caret.png');
+
+@caret-active: url('img/caret-open.png');
+
+.share-active-state {
+    color: @active-colour;
+    .heart {
+        background-image: @heart-active;
+    }
+    .caret {
+        div {
+            background-image: @caret-active;
+        }
+    }
+    .text{
+        border-color: lighten(@active-colour, 10%);
+    }
+}
+
+.socialshare{
+    font-family: @font-family;
+
+    .clear{
+        clear: both;
+    }
+
+    .share-link{
+        div {
+            cursor: pointer;
+            color: rgb(72,72,72);
+            &:hover{.share-active-state;}
+        }
+
+        .caret {
+            border: 1px solid rgba(0, 0, 0, 0.12);
+            background: rgba(255, 255, 255, 0.95);
+            float: left;
+            width: 18px;
+            height: 18px;
+            margin-left: 6px;
+            margin-top: 4px;
+            .rounded(3px);
+            .box-shadow(~'0 0 .25px rgba(0, 0, 0, 0.3)', ~'inset 0 -2px rgba(0, 0, 0, 0.1)');
+            div {
+                width: 18px;
+                height: 10px;
+                margin-top: 3px;
+                background: no-repeat center;
+                background-image: @caret-non-active;
+            }
+        }
+
+        .heart {
+            margin: 9px 5px 0 0;
+            float: left;
+            background: no-repeat center;
+            background-image: @heart-non-active;
+            width: 12px;
+            height: 10px;
+        }
+
+        .text {
+            border-bottom: 1px dotted rgba(72, 72, 72, 0.4);
+            letter-spacing: -0.25px;
+            float: left;
+        }
+    }
+
+    .share-options {
+        display: none;
+        position: absolute;
+        .rounded(3px);
+        background: #fff;
+        list-style: none;
+        .drop-shadow(0, 1px, 2px, 0.1);
+        ul {
+            list-style: none;
+        }
+    }
+
+    &.open {
+        .share-link div {
+            .share-active-state;
+            .caret {
+                width: 20px;
+                height: 20px;
+                border: 0;
+                .box-shadow(~'0 0 1px rgba(255,255,255,0.6)', ~'inset 0 2px .5px 0 rgba(0,0,0,0.35)', ~'inset 0 0 5px 0 rgba(170,170,170,0.2)');
+                background-color: rgba(74,74,74,0.1);
+                div {
+                    margin-top: 5px;
+                    width: 20px;
+                }
+            }
+        }
+        .share-options {
+            display: block;
+            margin-top: 12px;
+        }
+    }
+    &.open[data-type="bubbles"] .share-options {
+        width: 178px;
+        height: 68px;
+        padding: 12px 12px 6.5px 12px;
+        margin-left: 8px;
+        ul {
+            li {
+                float: left;
+                &:nth-child(1) {
+                    width: 48px;
+                }
+                &:nth-child(2) {
+                    margin-top:2px;
+                }
+                &:nth-child(-n+2) {
+                    padding-right: 12px;
+                }
+            }
+        }
+    }
+    &.open[data-type="small-bubbles"] .share-options {
+        padding: 12px 6px 6.5px 12px;
+        height: 92px;
+        width: 80px;
+        margin-left: 54px;
+
+        ul {
+            li {
+                &:nth-child(1) {
+                    margin-top: -4px;
+                }
+                &:nth-child(2) {
+                    height: 24px;
+                }
+                &:nth-child(-n+2) {
+                    padding-bottom: 12px;
+                }
+            }
+        }
+    }
+}