selection-sharer 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -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: []