selection-sharer 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 6fc01f2267804ebe55e7a96f49382062becf0690
4
+ data.tar.gz: e81656e0415093d2d97e95bc31365a22d8e7c625
5
+ SHA512:
6
+ metadata.gz: 4b5a958dfb6f91eecec8e582c50aa45ab43e5c83b3fb5a8b51ba1b594826f569d35defc2dece66655e492c575743f5cffc4d3f43a380bccccefa0f8617a816ce
7
+ data.tar.gz: 07a00eab428c8bf966f6d50d5d6711f622fb8cb36221740b175e7ebce0b76ee4e41df412583edf30f96c67add6ec73b9722940f936c29443eebb28082e865a76
@@ -0,0 +1,5 @@
1
+ module SelectionSharer
2
+ module Rails
3
+ VERSION = "0.0.1"
4
+ end
5
+ end
@@ -0,0 +1,8 @@
1
+ require "SelectionSharer/version"
2
+
3
+ module SelectionSharer
4
+ module Rails
5
+ class Engine < ::Rails::Engine
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,368 @@
1
+ /*
2
+ * share-selection: Medium like popover menu to share on Twitter or by email any text selected on the page
3
+ *
4
+ * -- Requires jQuery --
5
+ * -- AMD compatible --
6
+ *
7
+ * Author: Xavier Damman (@xdamman)
8
+ * GIT: https://github.com/xdamman/share-selection
9
+ * MIT License
10
+ */
11
+
12
+ (function($) {
13
+
14
+ var SelectionSharer = function(options) {
15
+
16
+ var self = this;
17
+
18
+ options = options || {};
19
+ if(typeof options == 'string')
20
+ options = { elements: options };
21
+
22
+ this.sel = null;
23
+ this.textSelection='';
24
+ this.htmlSelection='';
25
+
26
+ this.appId = $('meta[property="fb:app_id"]').attr("content") || $('meta[property="fb:app_id"]').attr("value");
27
+ this.url2share = $('meta[property="og:url"]').attr("content") || $('meta[property="og:url"]').attr("value") || window.location.href;
28
+
29
+ this.getSelectionText = function(sel) {
30
+ var html = "", text = "";
31
+ sel = sel || window.getSelection();
32
+ if (sel.rangeCount) {
33
+ var container = document.createElement("div");
34
+ for (var i = 0, len = sel.rangeCount; i < len; ++i) {
35
+ container.appendChild(sel.getRangeAt(i).cloneContents());
36
+ }
37
+ text = container.textContent;
38
+ html = container.innerHTML;
39
+ }
40
+ self.textSelection = text;
41
+ self.htmlSelection = html || text;
42
+ return text;
43
+ };
44
+
45
+ this.selectionDirection = function(selection) {
46
+ var sel = selection || window.getSelection();
47
+ var range = document.createRange();
48
+ if(!sel.anchorNode) return 0;
49
+ range.setStart(sel.anchorNode, sel.anchorOffset);
50
+ range.setEnd(sel.focusNode, sel.focusOffset);
51
+ var direction = (range.collapsed) ? "backward" : "forward";
52
+ range.detach();
53
+ return direction;
54
+ };
55
+
56
+ this.showPopunder = function() {
57
+ self.popunder = self.popunder || document.getElementById('selectionSharerPopunder');
58
+
59
+ var sel = window.getSelection();
60
+ var selection = self.getSelectionText(sel);
61
+
62
+ if(sel.isCollapsed || selection.length < 10 || !selection.match(/ /))
63
+ return self.hidePopunder();
64
+
65
+ if(self.popunder.classList.contains("fixed")) {
66
+ self.popunder.style.bottom = 0;
67
+ return self.popunder.style.bottom;
68
+ }
69
+
70
+ var range = sel.getRangeAt(0);
71
+ var node = range.endContainer.parentNode; // The <p> where the selection ends
72
+
73
+ // If the popunder is currently displayed
74
+ if(self.popunder.classList.contains('show')) {
75
+ // If the popunder is already at the right place, we do nothing
76
+ if(Math.ceil(self.popunder.getBoundingClientRect().top) == Math.ceil(node.getBoundingClientRect().bottom))
77
+ return;
78
+
79
+ // Otherwise, we first hide it and the we try again
80
+ return self.hidePopunder(self.showPopunder);
81
+ }
82
+
83
+ if(node.nextElementSibling) {
84
+ // We need to push down all the following siblings
85
+ self.pushSiblings(node);
86
+ }
87
+ else {
88
+ // We need to append a new element to push all the content below
89
+ if(!self.placeholder) {
90
+ self.placeholder = document.createElement('div');
91
+ self.placeholder.className = 'selectionSharerPlaceholder';
92
+ }
93
+
94
+ // If we add a div between two <p> that have a 1em margin, the space between them
95
+ // will become 2x 1em. So we give the placeholder a negative margin to avoid that
96
+ var margin = window.getComputedStyle(node).marginBottom;
97
+ self.placeholder.style.height = margin;
98
+ self.placeholder.style.marginBottom = (-2 * parseInt(margin,10))+'px';
99
+ node.parentNode.insertBefore(self.placeholder);
100
+ }
101
+
102
+ // scroll offset
103
+ var offsetTop = window.pageYOffset + node.getBoundingClientRect().bottom;
104
+ self.popunder.style.top = Math.ceil(offsetTop)+'px';
105
+
106
+ setTimeout(function() {
107
+ if(self.placeholder) self.placeholder.classList.add('show');
108
+ self.popunder.classList.add('show');
109
+ },0);
110
+
111
+ };
112
+
113
+ this.pushSiblings = function(el) {
114
+ while(el=el.nextElementSibling) { el.classList.add('selectionSharer'); el.classList.add('moveDown'); }
115
+ };
116
+
117
+ this.hidePopunder = function(cb) {
118
+ cb = cb || function() {};
119
+
120
+ if(self.popunder == "fixed") {
121
+ self.popunder.style.bottom = '-50px';
122
+ return cb();
123
+ }
124
+
125
+ self.popunder.classList.remove('show');
126
+ if(self.placeholder) self.placeholder.classList.remove('show');
127
+ // We need to push back up all the siblings
128
+ var els = document.getElementsByClassName('moveDown');
129
+ while(el=els[0]) {
130
+ el.classList.remove('moveDown');
131
+ }
132
+
133
+ // CSS3 transition takes 0.6s
134
+ setTimeout(function() {
135
+ if(self.placeholder) document.body.insertBefore(self.placeholder);
136
+ cb();
137
+ }, 600);
138
+
139
+ };
140
+
141
+ this.show = function(e) {
142
+ setTimeout(function() {
143
+ var sel = window.getSelection();
144
+ var selection = self.getSelectionText(sel);
145
+ if(!sel.isCollapsed && selection && selection.length>10 && selection.match(/ /)) {
146
+ var range = sel.getRangeAt(0);
147
+ var topOffset = range.getBoundingClientRect().top - 5;
148
+ var top = topOffset + self.getPosition().y - self.$popover.height();
149
+ var left = 0;
150
+ if(e) {
151
+ left = e.pageX;
152
+ }
153
+ else {
154
+ var obj = sel.anchorNode.parentNode;
155
+ left += obj.offsetWidth / 2;
156
+ do {
157
+ left += obj.offsetLeft;
158
+ }
159
+ while(obj = obj.offsetParent);
160
+ }
161
+ switch(self.selectionDirection(sel)) {
162
+ case 'forward':
163
+ left -= self.$popover.width();
164
+ break;
165
+ case 'backward':
166
+ left += self.$popover.width();
167
+ break;
168
+ default:
169
+ return;
170
+ }
171
+ self.$popover.removeClass("anim").css("top", top+10).css("left", left).show();
172
+ setTimeout(function() {
173
+ self.$popover.addClass("anim").css("top", top);
174
+ }, 0);
175
+ }
176
+ }, 10);
177
+ };
178
+
179
+ this.hide = function(e) {
180
+ self.$popover.hide();
181
+ };
182
+
183
+ this.smart_truncate = function(str, n){
184
+ if (!str || !str.length) return str;
185
+ var toLong = str.length>n,
186
+ s_ = toLong ? str.substr(0,n-1) : str;
187
+ s_ = toLong ? s_.substr(0,s_.lastIndexOf(' ')) : s_;
188
+ return toLong ? s_ +'...' : s_;
189
+ };
190
+
191
+ this.getRelatedTwitterAccounts = function() {
192
+ var usernames = [];
193
+
194
+ var creator = $('meta[name="twitter:creator"]').attr("content") || $('meta[name="twitter:creator"]').attr("value");
195
+ if(creator) usernames.push(creator);
196
+
197
+
198
+ // We scrape the page to find a link to http(s)://twitter.com/username
199
+ var anchors = document.getElementsByTagName('a');
200
+ for(var i=0, len=anchors.length;i<len;i++) {
201
+ if(anchors[i].attributes.href && typeof anchors[i].attributes.href.value == 'string') {
202
+ var matches = anchors[i].attributes.href.value.match(/^https?:\/\/twitter\.com\/([a-z0-9_]{1,20})/i);
203
+ if(matches && matches.length > 1 && ['widgets','intent'].indexOf(matches[1])==-1)
204
+ usernames.push(matches[1]);
205
+ }
206
+ }
207
+
208
+ if(usernames.length > 0)
209
+ return usernames.join(',');
210
+ else
211
+ return '';
212
+ };
213
+
214
+ this.shareTwitter = function(e) {
215
+ e.preventDefault();
216
+
217
+ var text = "“"+self.smart_truncate(self.textSelection.trim(), 114)+"”";
218
+ var url = 'http://twitter.com/intent/tweet?text='+encodeURIComponent(text)+'&related='+self.relatedTwitterAccounts+'&url='+encodeURIComponent(window.location.href);
219
+
220
+ // We only show the via @twitter:site if we have enough room
221
+ if(self.viaTwitterAccount && text.length < (120-6-self.viaTwitterAccount.length))
222
+ url += '&via='+self.viaTwitterAccount;
223
+
224
+ var w = 640, h=440;
225
+ var left = (screen.width/2)-(w/2);
226
+ var top = (screen.height/2)-(h/2)-100;
227
+ window.open(url, "share_twitter", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
228
+ self.hide();
229
+ return false;
230
+ };
231
+
232
+ this.shareFacebook = function(e) {
233
+ e.preventDefault();
234
+ var text = self.htmlSelection.replace(/<p[^>]*>/ig,'\n').replace(/<\/p>| /ig,'').trim();
235
+
236
+ var url = 'https://www.facebook.com/dialog/feed?' +
237
+ 'app_id='+self.appId +
238
+ '&display=popup'+
239
+ '&caption='+encodeURIComponent(text)+
240
+ '&link='+encodeURIComponent(self.url2share)+
241
+ '&href='+encodeURIComponent(self.url2share)+
242
+ '&redirect_uri='+encodeURIComponent(self.url2share);
243
+ var w = 640, h=440;
244
+ var left = (screen.width/2)-(w/2);
245
+ var top = (screen.height/2)-(h/2)-100;
246
+
247
+ window.open(url, "share_facebook", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
248
+ };
249
+
250
+ this.shareEmail = function(e) {
251
+ var text = self.textSelection.replace(/<p[^>]*>/ig,'\n').replace(/<\/p>| /ig,'').trim();
252
+ var email = {};
253
+ email.subject = encodeURIComponent("Quote from "+document.title);
254
+ email.body = encodeURIComponent("“"+text+"”")+"%0D%0A%0D%0AFrom: "+document.title+"%0D%0A"+window.location.href;
255
+ $(this).attr("href","mailto:?subject="+email.subject+"&body="+email.body);
256
+ self.hide();
257
+ return true;
258
+ };
259
+
260
+ this.render = function() {
261
+ var popoverHTML = '<div class="selectionSharer" id="selectionSharerPopover" style="position:absolute;">'
262
+ + ' <div id="selectionSharerPopover-inner">'
263
+ + ' <ul>'
264
+ + ' <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>'
265
+ + ' <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>'
266
+ + ' <li><a class="action email" href="" title="Share this selection by email" target="_blank"><svg width="20" height="20"><path stroke="%23FFF" stroke-width="6" d="m16,25h82v60H16zl37,37q4,3 8,0l37-37M16,85l30-30m22,0 30,30"/></svg></a></li>'
267
+ + ' </ul>'
268
+ + ' </div>'
269
+ + ' <div class="selectionSharerPopover-clip"><span class="selectionSharerPopover-arrow"></span></div>'
270
+ + '</div>';
271
+
272
+ var popunderHTML = '<div id="selectionSharerPopunder" class="selectionSharer">'
273
+ + ' <div id="selectionSharerPopunder-inner">'
274
+ + ' <label>Share this selection</label>'
275
+ + ' <ul>'
276
+ + ' <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>'
277
+ + ' <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>'
278
+ + ' <li><a class="action email" href="" title="Share this selection by email" target="_blank"><svg width="20" height="20"><path stroke="%23FFF" stroke-width="6" d="m16,25h82v60H16zl37,37q4,3 8,0l37-37M16,85l30-30m22,0 30,30"/></svg></a></li>'
279
+ + ' </ul>'
280
+ + ' </div>'
281
+ + '</div>';
282
+ self.$popover = $(popoverHTML);
283
+ self.$popover.find('a.tweet').click(self.shareTwitter);
284
+ self.$popover.find('a.facebook').click(self.shareFacebook);
285
+ self.$popover.find('a.email').click(self.shareEmail);
286
+
287
+ $('body').append(self.$popover);
288
+
289
+ self.$popunder = $(popunderHTML);
290
+ self.$popunder.find('a.tweet').click(self.shareTwitter);
291
+ self.$popunder.find('a.facebook').click(self.shareFacebook);
292
+ self.$popunder.find('a.email').click(self.shareEmail);
293
+ $('body').append(self.$popunder);
294
+
295
+ if (self.appId && self.url2share){
296
+ $(".selectionSharer a.facebook").css('display','inline-block');
297
+ }
298
+ };
299
+
300
+ this.setElements = function(elements) {
301
+ if(typeof elements == 'string') elements = $(elements);
302
+ self.$elements = elements instanceof $ ? elements : $(elements);
303
+ self.$elements.mouseup(self.show).mousedown(self.hide).addClass("selectionShareable");
304
+
305
+ self.$elements.bind('touchstart', function(e) {
306
+ self.isMobile = true;
307
+ });
308
+
309
+ document.onselectionchange = self.selectionChanged;
310
+ };
311
+
312
+ this.selectionChanged = function(e) {
313
+ if(!self.isMobile) return;
314
+
315
+ if(self.lastSelectionChanged) {
316
+ clearTimeout(self.lastSelectionChanged);
317
+ }
318
+ self.lastSelectionChanged = setTimeout(function() {
319
+ self.showPopunder(e);
320
+ }, 300);
321
+ };
322
+
323
+ this.getPosition = function() {
324
+ var supportPageOffset = window.pageXOffset !== undefined;
325
+ var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
326
+
327
+ var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
328
+ var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
329
+ return {x: x, y: y};
330
+ };
331
+
332
+ this.render();
333
+
334
+ if(options.elements) {
335
+ this.setElements(options.elements);
336
+ }
337
+
338
+ };
339
+
340
+ // jQuery plugin
341
+ // Usage: $( "p" ).selectionSharer();
342
+ $.fn.selectionSharer = function() {
343
+ var sharer = new SelectionSharer();
344
+ sharer.setElements(this);
345
+ return this;
346
+ };
347
+
348
+ // For AMD / requirejs
349
+ // Usage: require(["selection-sharer!"]);
350
+ // or require(["selection-sharer"], function(selectionSharer) { var sharer = new SelectionSharer('p'); });
351
+ if(typeof define == 'function') {
352
+ define(function() {
353
+ SelectionSharer.load = function (name, req, onLoad, config) {
354
+ var sharer = new SelectionSharer();
355
+ sharer.setElements('p');
356
+ onLoad();
357
+ };
358
+ return SelectionSharer;
359
+ });
360
+
361
+ }
362
+ else {
363
+ // Registering SelectionSharer as a global
364
+ // Usage: var sharer = new SelectionSharer('p');
365
+ window.SelectionSharer = SelectionSharer;
366
+ }
367
+
368
+ })(jQuery);
@@ -0,0 +1,219 @@
1
+ /*
2
+ * share-selection: Medium like popover menu to share on Twitter or by email any text selected on the page
3
+ *
4
+ * -- Requires jQuery --
5
+ * -- AMD compatible --
6
+ *
7
+ * Author: Xavier Damman (@xdamman)
8
+ * GIT: https://github.com/xdamman/share-selection
9
+ * MIT License
10
+ */
11
+
12
+ @keyframes selectionSharerPopover-animation {
13
+ 0%{
14
+ transform:matrix(0.97,0,0,1,0,12);
15
+ filter:alpha(opacity=0);
16
+ opacity:0
17
+ }
18
+ 20%{
19
+ transform:matrix(0.99,0,0,1,0,2);
20
+ filter:alpha(opacity=70);
21
+ opacity:.7
22
+ }
23
+ 40%{
24
+ transform:matrix(1,0,0,1,0,-1);
25
+ filter:alpha(opacity=100);
26
+ opacity:1
27
+ }
28
+ 70%{
29
+ transform:matrix(1,0,0,1,0,0);
30
+ filter:alpha(opacity=100);
31
+ opacity:1
32
+ }
33
+ 100%{
34
+ transform:matrix(1,0,0,1,0,0);
35
+ filter:alpha(opacity=100);
36
+ opacity:1
37
+ }
38
+ }
39
+
40
+ #selectionSharerPopover {
41
+ display: none;
42
+ position: absolute;
43
+ top: -100px;
44
+ left: -100px;
45
+ z-index: 1010;
46
+ }
47
+
48
+ #selectionSharerPopover:after {
49
+ content: '';
50
+ display: block;
51
+ position: absolute;
52
+ bottom: -3px;
53
+ left: 50%;
54
+ margin-left: -4px;
55
+ width: 8px;
56
+ height: 8px;
57
+ -webkit-transform: rotate(45deg);
58
+ transform: rotate(45deg);
59
+ background: #262625;
60
+ box-shadow: 0 0 2px #262625;
61
+ }
62
+
63
+ #selectionSharerPopover.anim {
64
+ transition: top .075s ease-out;
65
+ animation: selectionSharerPopover-animation 180ms forwards linear;
66
+ -webkit-animation: selectionSharerPopover-animation 180ms forwards linear;
67
+ }
68
+
69
+ #selectionSharerPopover-inner {
70
+ position:relative;
71
+ overflow: hidden;
72
+ -webkit-border-radius: 5px;
73
+ border-radius: 5px;
74
+ border: 1px solid;
75
+ border-color: #262625 #1c1c1b #121211;
76
+ box-shadow: 0 1px 3px -1px rgba(0,0,0,0.7),inset 0 0 1px rgba(255,255,255,0.07),inset 0 0 2px rgba(255,255,255,0.15);
77
+ background-image: linear-gradient(to bottom,rgba(49,49,47,0.97),#262625);
78
+ background-repeat: repeat-x;
79
+ }
80
+
81
+ #selectionSharerPopover .selectionSharerPopover-clip {
82
+ position: absolute;
83
+ bottom: -11px;
84
+ display: block;
85
+ left: 50%;
86
+ clip: rect(12px 24px 24px 0);
87
+ margin-left: -12px;
88
+ width: 24px;
89
+ height: 24px;
90
+ line-height: 24px;
91
+ }
92
+
93
+ #selectionSharerPopover .selectionSharerPopover-arrow {
94
+ display: block;
95
+ width: 20px;
96
+ height: 20px;
97
+ -webkit-transform: rotate(45deg) scale(0.5);
98
+ transform: rotate(45deg) scale(0.5);
99
+ background-color: #454543;
100
+ border: 2px solid #121211;
101
+ box-sizing:content-box;
102
+ }
103
+
104
+
105
+ .selectionSharer ul {
106
+ padding: 0;
107
+ display: inline;
108
+ }
109
+
110
+ .selectionSharer ul li {
111
+ float: left;
112
+ list-style: none;
113
+ background: none;
114
+ margin: 0;
115
+ }
116
+
117
+ .selectionSharer a.action {
118
+ display:block;
119
+ text-indent: -200px;
120
+ margin: 5px 7px;
121
+ width:20px;
122
+ height: 20px;
123
+ border: none;
124
+ }
125
+
126
+ .selectionSharer a:hover {
127
+ color: #ccc;
128
+ }
129
+
130
+ .selectionSharer a.tweet {
131
+ background: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='171' height='139'%3e%3cg transform='translate(-282.32053,-396.30734)'%3e%3cpath style='fill:white' d='m 453.82593,412.80619 c -6.3097,2.79897 -13.09189,4.68982 -20.20852,5.54049 7.26413,-4.35454 12.84406,-11.24992 15.47067,-19.46675 -6.79934,4.03295 -14.3293,6.96055 -22.34461,8.53841 -6.41775,-6.83879 -15.56243,-11.111 -25.68298,-11.111 -19.43159,0 -35.18696,15.75365 -35.18696,35.18525 0,2.75781 0.31128,5.44359 0.91155,8.01875 -29.24344,-1.46723 -55.16995,-15.47582 -72.52461,-36.76396 -3.02879,5.19662 -4.76443,11.24048 -4.76443,17.6891 0,12.20777 6.21194,22.97747 15.65332,29.28716 -5.76773,-0.18265 -11.19331,-1.76565 -15.93716,-4.40083 -0.004,0.14663 -0.004,0.29412 -0.004,0.44248 0,17.04767 12.12889,31.26806 28.22555,34.50266 -2.95247,0.80436 -6.06101,1.23398 -9.26989,1.23398 -2.2673,0 -4.47114,-0.22124 -6.62011,-0.63114 4.47801,13.97857 17.47214,24.15143 32.86992,24.43441 -12.04227,9.43796 -27.21366,15.06335 -43.69965,15.06335 -2.84014,0 -5.64082,-0.16722 -8.39349,-0.49223 15.57186,9.98421 34.06703,15.8094 53.93768,15.8094 64.72024,0 100.11301,-53.61524 100.11301,-100.11387 0,-1.52554 -0.0343,-3.04251 -0.10204,-4.55261 6.87394,-4.95995 12.83891,-11.15646 17.55618,-18.21305 z' /%3e%3c/g%3e%3c/svg%3e") no-repeat;
132
+ background-size: 18px;
133
+ background-position: 2px 4px;
134
+ }
135
+
136
+ .selectionSharer a.facebook {
137
+ background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 33 33' width='25' height='25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
138
+ background-size: 18px;
139
+ background-position: 0px 2px;
140
+ display:none;
141
+ }
142
+
143
+ .selectionSharer a.email {
144
+ background: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='64'%3e%3cg transform='translate(-10, -10)' fill='transparent'%3e%3crect x='0' y='0' width='114' height='114'%3e%3c/rect%3e%3cpath d='M12,12 L102,12 L102,72 L12,72 L12,12 Z M16,12 L53,49 C55.6666667,51 58.3333333,51 61,49 L98,12 L16,12 Z M15,72 L45,42 L15,72 Z M69,42 L99,72 L69,42 Z' stroke='white' stroke-width='5'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
145
+ background-size: 20px;
146
+ background-position: 0px 4px;
147
+ }
148
+
149
+
150
+ #selectionSharerPopunder.fixed {
151
+ transition: bottom 0.5s ease-in-out;
152
+ width: 100%;
153
+ position: fixed;
154
+ left: 0;
155
+ bottom:-50px;
156
+ }
157
+
158
+ .selectionSharer {
159
+ transition: -webkit-transform 0.6s ease-in-out;
160
+ }
161
+
162
+ .selectionSharer.moveDown {
163
+ -webkit-transform: translate3d(0,60px,0);
164
+ }
165
+
166
+ #selectionSharerPopunder {
167
+ position: absolute;
168
+ left: 0;
169
+ width: 100%;
170
+ height: 0px;
171
+ transition: height 0.5s ease-in-out;
172
+ background: #ccc;
173
+ border: none;
174
+ box-shadow: inset 0px 10px 5px -10px rgba(0,0,0,0.5), inset 0px -10px 5px -10px rgba(0,0,0,0.5);
175
+ border-radius: 0;
176
+ overflow: hidden;
177
+ }
178
+
179
+ #selectionSharerPopunder.show {
180
+ height: 50px;
181
+ }
182
+
183
+ .selectionSharerPlaceholder {
184
+ height: 1em;
185
+ margin-bottom: -2em;
186
+ transition: height 0.5s ease-in-out;
187
+ }
188
+
189
+ .selectionSharerPlaceholder.show {
190
+ height: 50px !important;
191
+ }
192
+
193
+ #selectionSharerPopunder-inner ul {
194
+ overflow: hidden;
195
+ float:right;
196
+ margin: 0px;
197
+ }
198
+
199
+ #selectionSharerPopunder-inner ul li {
200
+ padding: 5px;
201
+ overflow: hidden;
202
+ }
203
+
204
+ #selectionSharerPopunder-inner label {
205
+ color: white;
206
+ font-weight: 300;
207
+ line-height: 50px;
208
+ margin: 0px 20px 0px 10px;
209
+ }
210
+
211
+ #selectionSharerPopunder-inner a {
212
+ width: 30px;
213
+ height: 30px;
214
+ background-size: 30px;
215
+ }
216
+
217
+ #selectionSharerPopunder-inner a.tweet {
218
+ background-position: 0px 2px;
219
+ }
metadata ADDED
@@ -0,0 +1,48 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: selection-sharer
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Ashish Prajapati
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2016-01-16 00:00:00.000000000 Z
12
+ dependencies: []
13
+ description: Popover menu to share on Twitter or by email any text selected on the
14
+ page with support for mobile devices (with a popunder).
15
+ email: mail@ashishprajapati.com
16
+ executables: []
17
+ extensions: []
18
+ extra_rdoc_files: []
19
+ files:
20
+ - lib/SelectionSharer/version.rb
21
+ - lib/selection-sharer.rb
22
+ - vendor/assets/javascripts/selection-sharer.js
23
+ - vendor/assets/stylesheets/selection-sharer.css
24
+ homepage: https://github.com/ashishprajapati/selection-sharer
25
+ licenses:
26
+ - MIT
27
+ metadata: {}
28
+ post_install_message:
29
+ rdoc_options: []
30
+ require_paths:
31
+ - lib
32
+ required_ruby_version: !ruby/object:Gem::Requirement
33
+ requirements:
34
+ - - ">="
35
+ - !ruby/object:Gem::Version
36
+ version: '0'
37
+ required_rubygems_version: !ruby/object:Gem::Requirement
38
+ requirements:
39
+ - - ">="
40
+ - !ruby/object:Gem::Version
41
+ version: '0'
42
+ requirements: []
43
+ rubyforge_project:
44
+ rubygems_version: 2.4.8
45
+ signing_key:
46
+ specification_version: 4
47
+ summary: Popover menu to share on Twitter or by email
48
+ test_files: []