diff --git a/dist/sharect.babel.js b/dist/sharect.babel.js
index 4df749a..bdc56d0 100644
--- a/dist/sharect.babel.js
+++ b/dist/sharect.babel.js
@@ -23,9 +23,11 @@ var Sharect = function () {
var _icons = {};
var _arrowSize = 5;
var _buttonMargin = 7 * 2;
- var _iconSize = 24 + _buttonMargin;
+ var _iconSize = 24;
+ var _iconSizePlusMargin = _iconSize + _buttonMargin;
var _selectableElements = ['body'];
var _customShareButtons = [];
+ var _isMobile = false;
function createShareButton(icon, url) {
var btn = new Button(icon, function () {
@@ -38,10 +40,16 @@ var Sharect = function () {
function appendIconStyle() {
var style = document.createElement('style');
+ style.id = 'sharect-style';
style.innerHTML = '.sharect__icon{fill:' + _iconColor + ';}';
document.body.appendChild(style);
}
+ function appendMobileIconStyle() {
+ var style = document.getElementById('sharect-style');
+ style.innerHTML = '.sharect__icon{fill:' + _iconColor + ';width:50px;height:50px;}';
+ }
+
function getIcons() {
var icons = document.createElement('div');
var length = 0;
@@ -71,12 +79,14 @@ var Sharect = function () {
function getTooltipPosition() {
var selection = _selection.getRangeAt(0).getBoundingClientRect();
var DOCUMENT_SCROLL_TOP = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
- var top = selection.top + DOCUMENT_SCROLL_TOP - _iconSize - _arrowSize;
- var left = selection.left + (selection.width - _iconSize * _icons.length) / 2;
+ var top = selection.top + DOCUMENT_SCROLL_TOP - _iconSizePlusMargin - _arrowSize;
+ var left = selection.left + (selection.width - _iconSizePlusMargin * _icons.length) / 2;
return { top: top, left: left };
}
function moveTooltip() {
+ if (_isMobile) return;
+
var _getTooltipPosition = getTooltipPosition(),
top = _getTooltipPosition.top,
left = _getTooltipPosition.left;
@@ -86,6 +96,16 @@ var Sharect = function () {
tooltip.style.left = left + 'px';
}
+ function createMobileTooltip() {
+ var tooltip = document.createElement('div');
+ tooltip.className = 'sharect';
+ tooltip.style.cssText = 'line-height:0;' + 'position:fixed;' + 'background-color:' + _backgroundColor + ';' + 'bottom:calc(50% - 64px);' + 'left:0;' + 'width:64px;' + 'transition:all .2s ease-in-out;' + 'border-top-right-radius:5px;' + 'border-bottom-right-radius:5px;';
+
+ tooltip.appendChild(_icons.icons);
+
+ return tooltip;
+ }
+
function createTooltip() {
var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -97,7 +117,7 @@ var Sharect = function () {
tooltip.appendChild(_icons.icons);
var arrow = document.createElement('div');
- arrow.style.cssText = 'position:absolute;' + 'border-left:' + _arrowSize + 'px solid transparent;' + 'border-right:' + _arrowSize + 'px solid transparent;' + 'border-top:' + _arrowSize + 'px solid ' + _backgroundColor + ';' + 'bottom:-' + (_arrowSize - 1) + 'px;' + 'left:' + (_iconSize * _icons.length / 2 - _arrowSize) + 'px;' + 'width:0;' + 'height:0;';
+ arrow.style.cssText = 'position:absolute;' + 'border-left:' + _arrowSize + 'px solid transparent;' + 'border-right:' + _arrowSize + 'px solid transparent;' + 'border-top:' + _arrowSize + 'px solid ' + _backgroundColor + ';' + 'bottom:-' + (_arrowSize - 1) + 'px;' + 'left:' + (_iconSizePlusMargin * _icons.length / 2 - _arrowSize) + 'px;' + 'width:0;' + 'height:0;';
tooltip.appendChild(arrow);
@@ -109,7 +129,12 @@ var Sharect = function () {
top = _getTooltipPosition2.top,
left = _getTooltipPosition2.left;
- var tooltip = createTooltip(top, left);
+ var tooltip = void 0;
+ if (_isMobile) {
+ tooltip = createMobileTooltip();
+ } else {
+ tooltip = createTooltip(top, left);
+ }
document.body.appendChild(tooltip);
}
@@ -148,23 +173,38 @@ var Sharect = function () {
}
function attachEvents() {
- window.addEventListener('mouseup', function () {
- setTimeout(function mouseTimeout() {
- if (hasTooltipDrawn()) {
+ window.addEventListener('DOMContentLoaded', function ready() {
+ window.addEventListener('mouseup', function () {
+ setTimeout(function mouseTimeout() {
+ if (hasTooltipDrawn()) {
+ if (hasSelection() && isSelectableElement()) {
+ updateTextSelection();
+ moveTooltip();
+ return;
+ } else {
+ document.querySelector('.sharect').remove();
+ }
+ }
if (hasSelection() && isSelectableElement()) {
updateTextSelection();
- moveTooltip();
- return;
- } else {
- document.querySelector('.sharect').remove();
+ drawTooltip();
}
- }
- if (hasSelection() && isSelectableElement()) {
- updateTextSelection();
- drawTooltip();
- }
- }, 10);
- }, false);
+ }, 10);
+ }, false);
+
+ if (window.onpointerup !== undefined) {
+ window.addEventListener('pointerup', function pointerUp(e) {
+ if (e.pointerType !== 'mouse' && e.isPrimary) {
+ _isMobile = true;
+ appendMobileIconStyle();
+ window.removeEventListener('pointerup', pointerUp);
+ }
+ }, false);
+ } else if (window.orientation !== undefined) {
+ appendMobileIconStyle();
+ _isMobile = true;
+ }
+ });
}
function config(options) {
@@ -177,6 +217,7 @@ var Sharect = function () {
return this;
}
+ // TODO: add .sharect__icon class to the icons
function appendCustomShareButton(arrayOfButtonObjects) {
_customShareButtons = arrayOfButtonObjects;
return this;
diff --git a/dist/sharect.min.js b/dist/sharect.min.js
index de70726..8592e3d 100644
--- a/dist/sharect.min.js
+++ b/dist/sharect.min.js
@@ -1 +1 @@
-"use strict";var Sharect=function(){function e(){function e(e,n){return new t(e,function(){var e=n.replace(/PAGE_URL/,window.location.href).replace(/TEXT_SELECTION/,x).replace(/USERNAME/,g.username);window.open(e,"Share","width=550, height=280")})}function n(){var e=document.createElement("style");e.innerHTML=".sharect__icon{fill:"+y+";}",document.body.appendChild(e)}function o(){var t=document.createElement("div"),n=0;if(v.twitter){var o=g.icon,r=g.url;t.appendChild(e(o,r)),n++}if(v.facebook){var i=E.icon,c=E.url;t.appendChild(e(i,c)),n++}N.length&&N.forEach(function(o){t.appendChild(e(o.icon,o.url)),n++}),C={icons:t,length:n}}function r(){var e=b.getRangeAt(0).getBoundingClientRect(),t=window.pageXOffset||document.documentElement.scrollTop||document.body.scrollTop;return{top:e.top+t-_-S,left:e.left+(e.width-_*C.length)/2}}function i(){var e=r(),t=e.top,n=e.left,o=document.querySelector(".sharect");o.style.top=t+"px",o.style.left=n+"px"}function c(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=document.createElement("div");n.className="sharect",n.style.cssText="line-height:0;position:absolute;background-color:"+T+";border-radius:3px;top:"+e+"px;left:"+t+"px;transition:all .2s ease-in-out;",n.appendChild(C.icons);var o=document.createElement("div");return o.style.cssText="position:absolute;border-left:"+S+"px solid transparent;border-right:"+S+"px solid transparent;border-top:"+S+"px solid "+T+";bottom:-"+(S-1)+"px;left:"+(_*C.length/2-S)+"px;width:0;height:0;",n.appendChild(o),n}function a(){var e=r(),t=e.top,n=e.left,o=c(t,n);document.body.appendChild(o)}function l(){return!!window.getSelection().toString()}function s(){return!!document.querySelector(".sharect")}function u(){b=window.getSelection(),x=b.toString()}function d(e,t){if(Element.prototype.closest)return e.closest(t);var n=e;do{if(n.matches(t))return n;n=n.parentNode}while(null!==n&&n.nodeType===Node.ELEMENT_NODE);return null}function h(){var e=window.getSelection().baseNode.parentNode;return k.some(function(t){return d(e,t)})}function p(){window.addEventListener("mouseup",function(){setTimeout(function(){if(s()){if(l()&&h())return u(),void i();document.querySelector(".sharect").remove()}l()&&h()&&(u(),a())},10)},!1)}function f(e){return v.twitter=void 0===e.twitter?v.twitter:e.twitter,v.facebook=void 0===e.facebook?v.facebook:e.facebook,g.username=void 0===e.twitterUsername?g.username:e.twitterUsername,T=e.backgroundColor||T,y=e.iconColor||y,k=e.selectableElements||k,this}function w(e){return N=e,this}function m(){return n(),o(),p(),this}var v={twitter:!0,facebook:!0},g={username:"",url:"https://twitter.com/intent/tweet?text=TEXT_SELECTION&via=USERNAME&url=PAGE_URL",icon:''},E={url:"https://www.facebook.com/sharer/sharer.php?u=PAGE_URL"e=TEXT_SELECTION",icon:''},b="",x="",T="#333",y="#fff",C={},S=5,_=38,k=["body"],N=[];return{config:f,appendCustomShareButton:w,init:m}}function t(e,t){var n=document.createElement("div");return n.style.cssText="display:inline-block;margin:7px;cursor:pointer;transition:all .2s ease-in-out;",n.innerHTML=e,n.onclick=t,n.onmouseover=function(){this.style.transform="scale(1.2)"},n.onmouseout=function(){this.style.transform="scale(1)"},n}return e}();
\ No newline at end of file
+"use strict";var Sharect=function(){function e(){function e(e,n){return new t(e,function(){var e=n.replace(/PAGE_URL/,window.location.href).replace(/TEXT_SELECTION/,T).replace(/USERNAME/,b.username);window.open(e,"Share","width=550, height=280")})}function n(){var e=document.createElement("style");e.id="sharect-style",e.innerHTML=".sharect__icon{fill:"+L+";}",document.body.appendChild(e)}function o(){document.getElementById("sharect-style").innerHTML=".sharect__icon{fill:"+L+";width:50px;height:50px;}"}function i(){var t=document.createElement("div"),n=0;if(E.twitter){var o=b.icon,i=b.url;t.appendChild(e(o,i)),n++}if(E.facebook){var r=x.icon,c=x.url;t.appendChild(e(r,c)),n++}M.length&&M.forEach(function(o){t.appendChild(e(o.icon,o.url)),n++}),S={icons:t,length:n}}function r(){var e=y.getRangeAt(0).getBoundingClientRect(),t=window.pageXOffset||document.documentElement.scrollTop||document.body.scrollTop;return{top:e.top+t-k-_,left:e.left+(e.width-k*S.length)/2}}function c(){if(!R){var e=r(),t=e.top,n=e.left,o=document.querySelector(".sharect");o.style.top=t+"px",o.style.left=n+"px"}}function a(){var e=document.createElement("div");return e.className="sharect",e.style.cssText="line-height:0;position:fixed;background-color:"+C+";bottom:calc(50% - 64px);left:0;width:64px;transition:all .2s ease-in-out;border-top-right-radius:5px;border-bottom-right-radius:5px;",e.appendChild(S.icons),e}function s(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=document.createElement("div");n.className="sharect",n.style.cssText="line-height:0;position:absolute;background-color:"+C+";border-radius:3px;top:"+e+"px;left:"+t+"px;transition:all .2s ease-in-out;",n.appendChild(S.icons);var o=document.createElement("div");return o.style.cssText="position:absolute;border-left:"+_+"px solid transparent;border-right:"+_+"px solid transparent;border-top:"+_+"px solid "+C+";bottom:-"+(_-1)+"px;left:"+(k*S.length/2-_)+"px;width:0;height:0;",n.appendChild(o),n}function l(){var e=r(),t=e.top,n=e.left,o=void 0;o=R?a():s(t,n),document.body.appendChild(o)}function u(){return!!window.getSelection().toString()}function d(){return!!document.querySelector(".sharect")}function p(){y=window.getSelection(),T=y.toString()}function h(e,t){if(Element.prototype.closest)return e.closest(t);var n=e;do{if(n.matches(t))return n;n=n.parentNode}while(null!==n&&n.nodeType===Node.ELEMENT_NODE);return null}function f(){var e=window.getSelection().baseNode.parentNode;return N.some(function(t){return h(e,t)})}function w(){window.addEventListener("DOMContentLoaded",function(){window.addEventListener("mouseup",function(){setTimeout(function(){if(d()){if(u()&&f())return p(),void c();document.querySelector(".sharect").remove()}u()&&f()&&(p(),l())},10)},!1),void 0!==window.onpointerup?window.addEventListener("pointerup",function e(t){"mouse"!==t.pointerType&&t.isPrimary&&(R=!0,o(),window.removeEventListener("pointerup",e))},!1):void 0!==window.orientation&&(o(),R=!0)})}function m(e){return E.twitter=void 0===e.twitter?E.twitter:e.twitter,E.facebook=void 0===e.facebook?E.facebook:e.facebook,b.username=void 0===e.twitterUsername?b.username:e.twitterUsername,C=e.backgroundColor||C,L=e.iconColor||L,N=e.selectableElements||N,this}function v(e){return M=e,this}function g(){return n(),i(),w(),this}var E={twitter:!0,facebook:!0},b={username:"",url:"https://twitter.com/intent/tweet?text=TEXT_SELECTION&via=USERNAME&url=PAGE_URL",icon:''},x={url:"https://www.facebook.com/sharer/sharer.php?u=PAGE_URL"e=TEXT_SELECTION",icon:''},y="",T="",C="#333",L="#fff",S={},_=5,k=38,N=["body"],M=[],R=!1;return{config:m,appendCustomShareButton:v,init:g}}function t(e,t){var n=document.createElement("div");return n.style.cssText="display:inline-block;margin:7px;cursor:pointer;transition:all .2s ease-in-out;",n.innerHTML=e,n.onclick=t,n.onmouseover=function(){this.style.transform="scale(1.2)"},n.onmouseout=function(){this.style.transform="scale(1)"},n}return e}();
\ No newline at end of file
diff --git a/src/sharect.js b/src/sharect.js
index 587a889..875daaf 100644
--- a/src/sharect.js
+++ b/src/sharect.js
@@ -21,9 +21,11 @@ const Sharect = (function() {
let _icons = {}
let _arrowSize = 5
let _buttonMargin = 7 * 2
- let _iconSize = 24 + _buttonMargin
+ let _iconSize = 24
+ let _iconSizePlusMargin = _iconSize + _buttonMargin
let _selectableElements = ['body']
let _customShareButtons = []
+ let _isMobile = false
function createShareButton(icon, url) {
const btn = new Button(icon, function() {
@@ -38,10 +40,16 @@ const Sharect = (function() {
function appendIconStyle() {
const style = document.createElement('style')
+ style.id = 'sharect-style'
style.innerHTML = `.sharect__icon{fill:${_iconColor};}`
document.body.appendChild(style)
}
+ function appendMobileIconStyle() {
+ const style = document.getElementById('sharect-style')
+ style.innerHTML = `.sharect__icon{fill:${_iconColor};width:50px;height:50px;}`
+ }
+
function getIcons() {
const icons = document.createElement('div')
let length = 0
@@ -69,17 +77,36 @@ const Sharect = (function() {
const DOCUMENT_SCROLL_TOP = window.pageXOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
- const top = selection.top + DOCUMENT_SCROLL_TOP - _iconSize - _arrowSize
- const left = selection.left + (selection.width - _iconSize * _icons.length) / 2
+ const top = selection.top + DOCUMENT_SCROLL_TOP - _iconSizePlusMargin - _arrowSize
+ const left = selection.left + (selection.width - _iconSizePlusMargin * _icons.length) / 2
return { top, left }
}
function moveTooltip() {
+ if (_isMobile) return
const { top, left } = getTooltipPosition()
let tooltip = document.querySelector('.sharect')
tooltip.style.top = `${top}px`
tooltip.style.left = `${left}px`
}
+
+ function createMobileTooltip() {
+ const tooltip = document.createElement('div')
+ tooltip.className = 'sharect'
+ tooltip.style.cssText = 'line-height:0;'
+ + 'position:fixed;'
+ + 'background-color:' + _backgroundColor + ';'
+ + 'bottom:calc(50% - 64px);'
+ + 'left:0;'
+ + 'width:64px;'
+ + 'transition:all .2s ease-in-out;'
+ + 'border-top-right-radius:5px;'
+ + 'border-bottom-right-radius:5px;'
+
+ tooltip.appendChild(_icons.icons)
+
+ return tooltip;
+ }
function createTooltip(top = 0, left = 0) {
const tooltip = document.createElement('div')
@@ -100,7 +127,7 @@ const Sharect = (function() {
+ 'border-right:' + _arrowSize + 'px solid transparent;'
+ 'border-top:' + _arrowSize + 'px solid ' + _backgroundColor + ';'
+ 'bottom:-' + (_arrowSize - 1) + 'px;'
- + 'left:' + (((_iconSize * _icons.length) / 2) - _arrowSize) + 'px;'
+ + 'left:' + (((_iconSizePlusMargin * _icons.length) / 2) - _arrowSize) + 'px;'
+ 'width:0;'
+ 'height:0;'
@@ -111,7 +138,12 @@ const Sharect = (function() {
function drawTooltip() {
const { top, left } = getTooltipPosition()
- const tooltip = createTooltip(top, left)
+ let tooltip
+ if (_isMobile) {
+ tooltip = createMobileTooltip()
+ } else {
+ tooltip = createTooltip(top, left)
+ }
document.body.appendChild(tooltip)
}
@@ -150,23 +182,38 @@ const Sharect = (function() {
}
function attachEvents() {
- window.addEventListener('mouseup', function() {
- setTimeout(function mouseTimeout() {
- if (hasTooltipDrawn()) {
+ window.addEventListener('DOMContentLoaded', function ready() {
+ window.addEventListener('mouseup', function() {
+ setTimeout(function mouseTimeout() {
+ if (hasTooltipDrawn()) {
+ if (hasSelection() && isSelectableElement()) {
+ updateTextSelection()
+ moveTooltip()
+ return
+ } else {
+ document.querySelector('.sharect').remove()
+ }
+ }
if (hasSelection() && isSelectableElement()) {
updateTextSelection()
- moveTooltip()
- return
- } else {
- document.querySelector('.sharect').remove()
+ drawTooltip()
}
- }
- if (hasSelection() && isSelectableElement()) {
- updateTextSelection()
- drawTooltip()
- }
- }, 10)
- }, false)
+ }, 10)
+ }, false)
+
+ if (window.onpointerup !== undefined) {
+ window.addEventListener('pointerup', function pointerUp(e) {
+ if (e.pointerType !== 'mouse' && e.isPrimary) {
+ _isMobile = true;
+ appendMobileIconStyle()
+ window.removeEventListener('pointerup', pointerUp)
+ }
+ }, false)
+ } else if (window.orientation !== undefined) {
+ appendMobileIconStyle()
+ _isMobile = true;
+ }
+ })
}
function config(options) {
@@ -185,6 +232,7 @@ const Sharect = (function() {
return this
}
+ // TODO: add .sharect__icon class to the icons
function appendCustomShareButton(arrayOfButtonObjects) {
_customShareButtons = arrayOfButtonObjects
return this