maxart2501 / share-this Goto Github PK

View Code? Open in Web Editor NEW

806.0 22.0 53.0 1.97 MB

Medium-like text selection sharing without dependencies

Home Page: https://maxart2501.github.io/share-this/

License: MIT License

JavaScript 87.59% Less 6.06% SCSS 6.35%

sharing popover medium selection

share-this's Issues

How to center tooltip?

Is there any option by any chance to center tooltip?
If you look closely to Medium, they have it.

Truncate text by words

Consider using trunc-text instead of https://github.com/MaxArt2501/share-this/blob/master/src/sharers/twitter.js#L17, so that you don't get the last word butchered up when trying to share long bits of text.

Positioning fails if <html> element have a `margin-top`

Hello,

Yes, I know, a margin on <html> element seems awful.
But in my case a advertisement do it, I can’t fix it.

So this function fail to return real position of the root element.
https://github.com/MaxArt2501/share-this/blob/master/src/dom.js#L1-L6

Move the sharers to seperate packages

The sharers weren't meant to be a core part of the library, but rather ready-made examples of its usage.

On the other hand, they have been used like part of the library and became part of CI pipelines, causing issues like #37 when one has been removed.

For the next major release, remove the sharers from the library and move them in their separate packages.

shareThis is not a function

I'm probably doing something stupid but I need a hand please.

`
const shareThis = require("share-this");
const facebook = require("share-this/dist/sharers/facebook");
const email = require("share-this/dist/sharers/email");

const shareList = [facebook, email];

function configureShare() {
console.log("shareThis: ", shareThis);
shareThis({
selector: ".transcript",
sharers: shareList
}).init();
}

configureShare();
`

When I run this in Chrome I get:
"Uncaught Type Error: shareThis is not a function."

What am I doing wrong? thanks.

Reposition popover when changing orientation/resizing window

This should not redraw the popover or the sharer buttons.

controlling when to pop and when not ( based on selected text char length )

Is there a way to determine when to pop and not to pop based on the selected text char length?
Sometimes, you get a double click on a word, and this pop-up immediately fires, and clearly popping this for one word is false fire.
Any solutions to remedy?

Thank you

How to change append selector?

I see that the .share-this-popover is appended at the end of the body tag. Is there a way to change this to append it in another selector? Thanks.

Popover is not in sync with scrollable/movable content

a demo of the problem can be found here: https://jsfiddle.net/0swr3m18/

select content in the scrollable div
scroll

actual: the popup's position is wrong
expected: the popup stays with the content

share-this cannot solve the problem itself, since it cannot track all possible ways how content could move.
However, there is currently no way for users of the library to trigger a refresh of the popover.

Request: Expose a redraw/refresh function, as shown in PR #15

Check for selection's actual appearance

It may happen that a selection may comprise just white space that gets collapsed, thus producing no visible selection. This leads to range.getClientRects() to produce an empty array of rects, so the library has no way to position the popover.

It may happen whn double-clicking outside the area that triggers the popover, or by modifiying the existing selection.

A check has to be performed on the constrained range prior to re/draw the popover.

SCSS organisation omit customisation

Hi,

Actually it's impossible to modify the variables by doing this for exemple:

// Changing variables
$share-this-highlight-link: transparent;

// Import the lib
@import '../../../node_modules/share-this/style/scss/share-this.scss';

It's not working because changed variables will be reseted as you are importing default variables along the main style.

To change this, you just need to create a new file call _style.scss where you'll put only the style classes without import _vars.scss.

Then inside share-this.scss you can import everything:

@import "vars";
@import "mixins";
@import "style";

Also you should add !default to all your variables likes this:

$share-this-vertical-offset: -.25em !default;
$share-this-background: #333333 !default;
$share-this-foreground: #ffffff !default;
$share-this-highlight-link: rgba(#ffffff, .25) !default;
$share-this-border-radius: .25em !default;
$share-this-arrow-size: .5em !default;
$share-this-sharer-width: 2em !default;
$share-this-sharer-height: 2em !default;
$share-this-sharer-padding: .35em !default;
$share-this-border-distance: 4em !default;
$share-this-animation-length: .3s !default;
$share-this-small-devices-max: 575px !default;

This will not break naming for actuals users but it will offer the possibility to change the variables.

And that's great ! 😄

Library name change

As ShareThis is a known commercial project, this library should change its name.

Suggestions accepted.

Popover goes over scrollable content

Hello Max,

Reposition method works as expected, it follows the text as it scrolls, but there is still one small problem here. If you scroll up while a text is selected and the popup is active, you will notice that popup goes over the "parent"(div that holds the text) and doesn't follow the text under it.

I made small fiddle example of the problem and you can check it at the following link: https://jsfiddle.net/Nikola22/oL5ha3tw/

Hi Max,

Probably it is no news to you, but I just want to tell that I appreciate your code. :)

I've got one question on how to bring in new sharers..
I've checked the twitter.js to understand what is going on there.
But the code there is minimized/uglified for a good reason.

Could you recommend a place where I can go get/or study & build ,say WhatsApp sharing, capability for example?

Uncaught TypeError: Cannot set property 'ShareThis' of undefined

First off, thanks for creating and sharing this tool!

I'm a Mac user running Codekit and have copied your code from the demo page. I'm getting this error when the page loads:

Uncaught TypeError: Cannot set property 'ShareThis' of undefined

Any thoughts? Thnx!

BUG: Line height 2em breaking design

Hi @MaxArt2501 !

I have a new train coding chalenge for you haha.

There is a little gap in the bottom of each buttons. (easier to see on hover)

The problem come from the line-height property set to 2em on .share-this-popover>ul>li.
It should be reset to 1 without unit.

That's it 😄

Feature request: ability to change email icon

Social icon are pretty much all the same but there is no standard for icon.

Because of that it can break the design and uniformity and it could be nice to be able to change it in the config of each sharers.

By the way I've shared above a mail icon that would probably be a better choice than the actual one.
It is plain like other sharers contrary of the actual mail icon that is outline...

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M4.527 9.819l.983-.983 10.489 8.991 10.489-8.991.983.983-11.473 9.834L4.525 9.819zM3.221 6.26A2.435 2.435 0 0 0 .782 8.688v14.624a2.428 2.428 0 0 0 2.439 2.428H28.78a2.435 2.435 0 0 0 2.439-2.428V8.688A2.428 2.428 0 0 0 28.78 6.26H3.221z"/>
</svg>

babel-preset-es2015 is deprecated

Hello,

I use this plugin as dependency in my project but I remove recently babel-preset-es2015 because it is deprecated.

I replace it by babel-preset-env as recommended.

But import of hightlight-share fail without babel-preset-es2015

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error: ./node_modules/share-this/src/core.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "…/node_modules/share-this"
    at …/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (…/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (…/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (…/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (…/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (…/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (…/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (…/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (…/node_modules/babel-loader/lib/index.js:50:20)
 @ ./app/Resources/assets/js/highlightshare.js 3:17-38
 @ ./app/Resources/assets/js/main.js
 @ multi ./app/Resources/assets/js/main.js

I use webpack and babel-loader.
Babel seems to read .babelrc file of your package because I try to import a file heriting of this babel config. But babel-preset-es2015 is not present.

I think you should remove your .babelrc file form the prod package.

Translate

I have A One Suggestion For You......

● That Add One another option in Pop-Up Window that , It Will Translate The Word or Sentence In User's Mother Tongue
•So that users can easily read and understand the blogs and readable content .

z-index

Hello and happy new year!

I've notice a small improvement because of a bug on my side.

There is no way to modify the z-index.

Could you had a variable so we can adapt it to each case?

Thank you so much

Latest release(1.3.0) is a breaking change.

I'd consider removal of "linked-in" a breaking change (definitely broke our build). Would it be better to bump the version to 2.0.0 instead?
Thank You.

controlling when not to pop

Hello, many times, I see that the pop-up fires unintentionally. That happens when you highlight a text. Many times you get single word selections... Is there a way to tell the system that if the selection, say, more than 10 chars, only then pop?

cannot change the background color of the popup

Facebook sharer error

Hi,

first of all big thank for this library and your coding skills.

I am just finishing highlighting feature as a new "sharer", based on https://github.com/timdown/rangy
I hope to share it with you soon.

In the meantime I have also tried to test facebook sharer but unfortunately Facebook returns this error: "Invalid App ID: The provided app ID does not look like a valid app ID." Any hint how to update facebook sharer code?

Thank you very much

need help

hello.....first of all...thanks for this amazing code... I am learning java script...so its kinda hard for me grasp the code...and I wanted to learn this code...so .can you please help me...on where to start on this code...and the steps of this code....

Missing ShareThisViaNotes

Hello,

In the demo (https://maxart2501.github.io/share-this/) I can see there is an option to add selection to notes.
As well checking the Resources of the page there is a sharer named: "notes.js"

Why this sharer is missing from the repository?

LinkedIn not pulling in data

Im using the default implementation of the script and Facebook and Twitter are pull in dynamic text thats highlighted but LinkedIn opens the sharing window but dosent seem to be pulling in anything.

  var twitterSharer = window.ShareThisViaTwitter;
  var facebookSharer = window.ShareThisViaFacebook;
  var linkedinSharer = window.ShareThisViaLinkedIn;
  ShareThis({
    sharers: [ facebookSharer, twitterSharer, linkedinSharer ],
  }).init();

Sharers not available in window object

<script src="https://cdn.jsdelivr.net/npm/share-this/dist/share-this.js"></script>

<script type="text/javascript">
	var shareThis = window.ShareThis;
	var twitterSharer = window.ShareThisViaTwitter;
	var facebookSharer = window.ShareThisViaFacebook;
	var linkedInSharer = window.ShareThisViaLinkedIn;
	var emailSharer = window.ShareThisViaEmail;

	console.log("TWT", twitterSharer);

	var selectionShare = shareThis({
    		sharers: [ twitterSharer, facebookSharer, linkedInSharer, emailSharer ]
	});

	selectionShare.init();
</script>

Inject above script in a web page, console.log("TWT", twitterSharer); is undefined. Same for other sharers

The ES module points to non-transpiled src/core.js file

This module claims support for various older versions of browsers.

But there is an edge case where this is not true.

When used with webpack or similar tools, it's a common practice to use import. Even the docs suggest using

// ES6
import shareThis from "share-this";

But there's a catch. The module resolver prefers module over main in package.json. This is true only for JS Modules (import syntax).

https://github.com/MaxArt2501/share-this/blob/v1.3.1/package.json#L13-L14

  "main": "dist/share-this.js",
  "module": "src/core.js",

In the case of share-this, it means that the import syntax will take the src/core.js. The usual webpack config will not compile anything from node_modules folder for performance reasons.

So when we put all of this together, the result is the raw src/* code landing in the vendor bundle, with const and everything. Internet Explorer says 👎 😄

There are a few possible solutions:

Ship a transpiled dist/share-this.es.js and change the module to point to it.
Remove the module and leave only the main. Most current build pipelines will work with the old commonjs way. Not sure if this will hold true in the future.
Leave it to the consumers to figure it out, either import share-this/dist/share-this or transpile it on their end. It's like this at the moment, so no work required. It's a solution, but a bad one.

Pop up windows open not centred (top right corner)

Hi @MaxArt2501 !

Just notice that pop up windows is not centred.

I'm using an other sharing JS lib that does sizing and centering:

http://www.ellison.rocks/sharer.js/

Maybe you could reuse this code?

Thank you

Popover text not showing

Hey I tried implementing this in my React Project, in the useEffect Hook. But its is not working

Disabling this as a user

Hello, I am a computer scientist who likes to highlight text of articles as I read them (similar to using my finger while reading a book). I do not like this extension and would like to disable it on my web-browser permanently. While I am technically savvy enough to add a rule on ublock-origin to stop this popup, I doubt most web-users are.

While I realize a global blocking rule is not feasible, I would love to have a little "x" to click on the first share-this popup that lets me disable this feature for whatever website, hopefully larger websites would keep this feature enabled as a positive user experience.

Fix popover positioning when page is zoomed

It happens when the user pinch-zooms the page, not when using Ctrl/Cmd++/-.

The scrolling amount is then multiplied by the zoom factor.

Conflict with twitter widget script: Double popun

I use twitter widget for embedded tweet in articles and share-this (this module) for tweet button on highlight.

Twitter script manage link with web-intent href and open the popin on click.

So we have 2 popin.

I don’t know how to fix it.

Source map support

A project that utilizes this package and has source maps, emits this sort of trace when there is an error thrown from this package:

TypeError: Argument not optional
1
File "webpack:///./node_modules/share-this/dist/share-this.js" line 1 col 1655 in a
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"...
2
File "webpack:///./node_modules/share-this/dist/share-this.js" line 1 col 3262 in f
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"...
3
File "webpack:///./node_modules/share-this/dist/share-this.js" line 1 col 3162 in Anonymous function
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"...

I'm not 100% sure how to resolve this, it's either going to be one of two ways:

Emit a source map .js.map alongside each file in dist/. I'm unsure if typical tooling can utilize source maps like this, but maybe!
Maintain a ES2015 module entry point - so instead of importing share-this, the user can import share-this/es2015 and whatever compilation process a user uses can create the mappings.

How i can add more social share?

I want to add other social share like whatsapp, facebook, instagram, etc.. Please give me an idea to figure this out.

Cannot read property 'getSelection' of undefined when unmounting React component

Hi,

first of all great little library! Congrats. We are trying to create a React component that will serve as a wrapper around share-this library. We have an issue when unmounting that component. It says

Cannot read property 'getSelection' of undefined

Here is the codesandbox that you can take a look https://codesandbox.io/s/0pl29v3p5l

Steps to reproduce:

Select a text
Clear selection by clicking outside of the text
Click on toggle button

Expected results

No error is thrown

undesired action with email sharer: create a new tab

Hi,

It's not really a bug but really ugly 🤓 !

Because of target"_blank" in the mailto link a new tab is create in browser on click.

Can you remove this attribute please?
It's not needed for mailto link as it will always open the mail client which is a different program.

Thank you 😄

BUG: share-this display with empty selection

Hi,

Just want to report a small bug.

If double click on a line-end it can select a space or a line-break.
Because share-this doesn't check the selection length when the previous happen, share-this popup.

You should add condition check to handle this (for exemple selection > 1)

Here is a screenshot so you can see by yourself the BUG:

Extend to textbox's

Is it possible to extend this to text boxes?

More control over where the popup appears

I would like finer control over where the popup appears. The 'selector' option is OK but I could do with the option to exclude elements which are marked up with a specific class.

e.g. if I set my selector to 'body' then within the body I have

<p class="no-sharethis">blah blah</p>

Then the popup would not trigger when 'blah blah' is selected.

Thanks

How to change popover animation?

Hi. Will I be able to change popover animation? How to do that? I found default animation pretty awful.

Does not work properly on iPhone

I discovered this bug in December 2021.
Reproduce on the latest iOS.

When I display share-this and try to tap the share button, it disappears.
https://maxart2501.github.io/share-this/
Perhaps the click event isn't working properly, but I'm not sure.

It works on PC and Android, so I think it's a problem only for iOS.
Is there any improvement plan?

Support for hiding the popover

Once the action is performed, it should be possible to call hide/close/killPopover. At the moment, it's only possible to destroy.

maxart2501 / share-this Goto Github PK

share-this's Issues

Recommend Projects

Recommend Topics

Recommend Org