selection-sharer 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
ADDED
@@ -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,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: []
|