JavaScript 플러그인을 생성하여 텍스트 및 트위터 강조 표시

This article was originally posted on my blog. Head over to inspiredwebdev.com for more articles and tutorials. Check out my JavaScript course on Educative to learn everything from ES6 to ES2019.

 
안녕하십니까? 저는 알베르토 몬탈레시입니다. 창고에서 독학으로 인재가 된 개발자입니다.저는 제 사이트inspiredwebdev.com에 자바스크립트 강좌와 과정을 만들어서 다른 개발자들이 성장하고 원하는 직업을 갖도록 격려했습니다.

강조 표시 및 트위터 텍스트를 위한 플러그인 만들기

많은 경우에 나는 한 사이트에서 글을 읽는 것을 발견하고 내 친구나 랜덤으로 인터넷에 접속한 사람과 이 글을 공유하고 싶다고 생각하지만 때때로 사이트가 나에게 이 과정의 편의를 제공하는 경우는 드물다.
보통, 나는 내가 공유하고 싶은 글을 복사해서 트위터에 발표해야 하지만, 우리는 대다수 사람들이 게으르다는 것을 알고 있기 때문에, 당신의 사용자가 트위터에 당신의 글/블로그 등의 내용을 발표하고 싶다면...이 강좌에서, 이 점을 실현하기 위해 간단한 플러그인을 만드는 방법을 가르쳐 드리겠습니다.
또는, 만약 당신이 스스로 코드를 작성하고 싶지 않다면, 나는 이미 당신을 위해 포장을 마쳤습니다. 당신은 npmhighlight-to-tweet에서 그것을 찾을 수 있습니다.
대부분의 창의력과 코드의 학점은 WebFlow에서 이 사용자의 소유이다.저는 주로 JQuery 코드를 원생JavaScript 코드로 변환하여 npm 패키지로 발표합니다.
우리가 구축할 플러그인은 다음과 같은 방식으로 작동합니다.

사용자가 페이지의 일부 텍스트를 강조 표시합니다

버튼

으로 트윗하라는 메시지가 떴습니다.

그들은 버튼을 누르면 트위터에 올릴 수 있으며 당신의 사이트를 떠나지 않아도 된다

 

tweetHighlighted 함수 만들기

이제 시작할 준비가 되었습니다.JavaScript 파일을 열어 다음 내용부터 시작하겠습니다.

document.addEventListener('DOMContentLoaded', () => {

    window.tweetHighlighted = () => {
        // our function will be built here
    }

    // we call it once the page loads
    window.tweetHighlighted()
})

우리가 알고 싶은 첫 번째 일은 속성을 정의하는 것이다. 이 속성들은 잠시 후에 쓸모가 있을 것이다.window.tweetHighlighted = () => { 함수에 다음 코드를 추가합니다.

const settings = {
    node: "<a href='#'>Tweet</a>",
    maxLength: 280,    
    extra: null,
    via: null,
    popupArgs:'width=400,height=400,toolbar=0,location=0',
}

다음은 플러그인의 기본 설정입니다.

노드 정의가 팝업 버튼

에 포함된 요소

maxLength는 트위터가 허용하는 최대 길이입니다. 여기는 280으로 설정합니다. 트위터가 허용하는 최대 길이이기 때문입니다. 하지만 더 낮게 설정하려면 이렇게 할 수 있습니다

extra는 당신이 트위터에 포함하고 싶은 추가 텍스트입니다

via는 트위터의 처리 프로그램을 정의했습니다. 사용자가 사이트에서 글을 올릴 때 표시됩니다

popupArgs 트위터 팝업 창 정의

다음 단계에서는 DOM에 추가하고 이벤트 탐지기를 제공하는 단추를 만듭니다.
우리가 방금 작성한 코드가 끝난 후에 계속하여 다음 내용을 추가합니다.

let url = '';
let text = '';
const shareButton = document.createElement('div');
shareButton.style.display = 'none';
shareButton.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    window.open(url, '_blank', settings.popupArgs);
})
const body = document.querySelector('body');
body.appendChild(shareButton);

우선, 우리는 두 개의 빈 변수를 정의했는데 추문을 저장하는 데 사용되는 url 과 text 이다.
그 다음에 우리는 새로운 div 원소를 만들고 이를 변수 shareButton 에 분배했다.
그리고 우리는 display:'none' 사건을 숨기고 사건 탐지기를 추가해서 click 사건을 탐지했다.
사용자가 우리의 단추를 눌렀을 때, 우리는 stopPropagation 탭에 이벤트가 거품이 생기는 것을 피하기 위해 a 탭을 사용합니다. 설정에서 node 탭을 분배했고, window.open 나중에 채워질 url 과 파라미터를 호출하여 열 창의 크기를 정의합니다.
이후, 우리는 이 새로 만든 요소를 페이지의 body 에 추가하기만 하면 된다.
사용자가 페이지에 텍스트를 강조 표시할 때 우리가 어떻게 식별하는지 알고 싶을 수도 있습니다.
답은 간단합니다. mouseup 이벤트를 사용하고 사용자가 무엇을 선택했는지 확인하겠습니다.
 

함수에 이벤트 탐지기 추가

우리가 떠난 곳에서 계속하면 다음 코드를 추가합니다.

document.addEventListener('mouseup', (e) => {
    text = getSelectedText();
    const btnExists = shareButton.style.display !== 'none';
    if (btnExists || !text.length){
        return;
    } else {
        appendShareButton(e)
    }
})

 const getSelectedText = () => {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
};

훌륭합니다. 이 두 함수는 사용자가 mouseup 이벤트를 촉발할 때 강조 표시된 텍스트가 있으면 포획하여 text 변수에 저장하고 함수 appendShareButton 를 호출하여 이 단추를 DOM에 추가합니다.
함수를 계속 정의합니다.

const appendShareButton = (e) => {

    url = getTweetURL(text, settings.extra, settings.via);

    shareButton.innerHTML = '';
    shareButton.innerHTML += settings.node;
    shareButton.innerHTML += tweetIcon;
    if(settings.cssClassess && settings.cssClassess.length){
        shareButton.classList.add(settings.cssClassess);
    }
    shareButton.style.top = `${e.pageY}px`;
    shareButton.style.left = `${e.pageX}px`;
    shareButton.style.position = 'absolute';
    shareButton.style.cursor = 'pointer';
    shareButton.style.display = 'flex';
    shareButton.style.justifyContent = 'space-between';
    shareButton.style.alignContent = 'center';
    shareButton.style.alignItems = 'center';
    shareButton.style.opacity = 0;

    shareButton.style.fontFamily = 'Arial, Helvetica, sans-serif';
    shareButton.style.backgroundColor = '#3898EC';
    shareButton.style.padding = '10px 15px';
    shareButton.style.width = '100px'
    shareButton.style.borderRadius = '5px';
    shareButton.style.color = 'white';
    shareButton.firstChild.style.color = 'white';
    shareButton.firstChild.style.textDecoration = 'none';
    shareButton.lastChild.style.fill = 'white';
}

와, 이것은 매우 긴 함수이지만, 걱정하지 마라. 그것은 얼마 할 수 없다.이 라인들은 대부분 스타일링일 뿐이다.
우선, 우리는 우리가 정의하지 않은 다른 함수 url 를 호출하여 전체 getTweetURL 를 만들고, 하이라이트로 표시된 텍스트, 추가 텍스트,via 프로세서를 전달합니다.
그리고 우리는 shareButton 에서 스타일 목록을 정의하여 그것을 표시하고 적당한 위치를 정합니다.
유일하게 중요한 것은 단추의 위치와 관련된 것이고, 다른 모든 것은 순수한 조형이다.
이렇게 서로 다른 줄에서 모든 스타일을 정의하는 것은 좀 메스꺼울 수도 있지만, 나는 이것이 너로 하여금 더욱 분명하게 보게 할 것이라고 생각한다.필요한 경우 스타일을 정의할 수도 있습니다.

shareButton.style.cssText = `
/* your list of style here, same as how you would add it in a CSS file*/
`

이 줄에 대해 알아차렸을 수 있습니다: shareButton.innerHTML += tweetIcon;우리는 아직 정의tweetIcon가 없기 때문에 이 함수를 벗어나 이 코드를 복사합시다.

 const tweetIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>`;

이것은 트위터 아이콘입니다. 이것은 제가 인터넷에서 찾은 간단한 SVG입니다. 이것은 우리가 CDN이나 다른 곳에서 그것을 호출하지 않아도 됩니다.
훌륭합니다. 이제 단추를 DOM에 추가하는 함수가 생겼습니다. 이 함수getTweetURL를 정의하기만 하면 됩니다.
이제 이렇게 합시다.
 

구문 URL

const getTweetURL = function (text, extra, via) {
    let url = 'https://twitter.com/intent/tweet?text=';
    // trim the text to fit in the max allowed 280 characters
    const viaUrl = `&via=${via}`;
    const maxLength = settings.maxLength > 280 ? 280 : settings.maxLength;
    const maxAllowedLength = maxLength - viaUrl.length - extra.length;
    let textToTweet = text;
    if(text.length > maxAllowedLength){
        textToTweet = text.substring(0,maxAllowedLength -1);
    }
    url += encodeURIComponent(textToTweet);
    if (extra)
        url += encodeURIComponent(' ' + extra);

    if (via)
        url += viaUrl

    return url;
    };

우리는 이 함수를 분해한다.

우선 필요한 기본 URL을 정의합니다

.

그리고 via 프로세서

를 포함하는 URL 섹션을 만듭니다.

그리고 우리가 정의한 최대 길이(또는 최대 280),via 프로세서와 추가 텍스트

에 따라 텍스트에 포함할 수 있는 문자 수를 계산합니다

만약 텍스트가 너무 길다면, 우리는 substring 그 중 일부만 취할 것이다

그리고 우리는 모든 내용을 한데 붙이고 encodeURIComponent 모든 문자가 정확하게 바뀌었는지 확인

자, 이 함수는 완벽한 URL로 추문을 공유합니다.
지금 너는 너의 웹 페이지에서 이 코드를 시도할 수 있다. 너는 모든 것이 매우 좋을 것이라는 것을 발견할 수 있을 것이다.
더 맞춤형 플러그인을 원한다면, 내가 발표한 플러그인 Github 을 볼 수 있습니다.
 
읽어주셔서 감사합니다.내 블로그inspiredwebdev나 팔로우해.보기Educative.io 상호작용 프로그래밍 과정을 이해합니다.
면책 성명: 아마존과 Educative를 가리키는 링크는 부속 링크입니다. 당신의 구매는 저에게 추가 커미션을 발생시킬 것입니다.정말 감사합니다.



Amazon과Leanpub에서 내 전자책을 가져오기