당신은 이 시리즈의 첫 번째 문장을 읽을 수 있습니다.

배경.

이 시리즈의 여정을 계속할 때, 우리는 내가 실현하고자 하는 주요 목표를 기억해야 한다.

Create An Easy Way For Web Devs To Save User Data

이 목표를 실현하기 위해서, 그림 목록 (그림 디렉터리) 을 저장하고 미리 보기 그림으로 표시할 수 있는 간단하지만 유용한 SPA (한 페이지 프로그램) 를 만들고 있습니다.
지금까지 상황은 다음과 같습니다.

진정한 애플리케이션처럼 만들려고 노력

이 작은 프로그램에서 우리가 필요로 하는 다음 일은 항목을 삭제하는 것이라고 나는 결정했다.
이것은 UI/UX와 관련된 커다란 구멍을 열었다.데스크톱 프로그램처럼 느껴지는 사용자 체험을 만들기로 결정했기 때문에 항목을 오른쪽 단추로 눌렀을 때 상하문 메뉴를 추가했습니다. (아래 그림 참조)그러나 이것은 모바일 응용 프로그램으로 바뀔 수 없기 때문에 앞으로 나는 모바일 응용 프로그램에 이를 실현하는 방법을 제공해야 한다.

컨텍스트 추가 메뉴

그 모양은 다음과 같습니다.

두 가지 주요 관점

내가 본문에서 토론하고 싶은 두 가지는 다음과 같다.

ContextMenu와 그 작업 원리를 어떻게 구축하는가

인터넷 응용 프로그램을 통해 클립보드로 복사하는 것은 매우 까다롭다. 좋은 이유가 없다

암호 가져오기

my GitHub repo 에서 본문의 모든 원본 코드를 얻을 수 있습니다.
복제 리포가 끝난 후 업데이트 UI 지점에 서명해야 합니다. 그렇지 않으면 코드의 첫 번째 t버전만 보일 것입니다.$ git checkout updateUI

브라우저에서 지금 시도

브라우저에서 업데이트를 시도하려면 mycodepen here로 이동하십시오.

이미지 추가

그림을 추가하기 시작하면 위아래 메뉴를 시도할 수 있습니다.이미지를 시도하려면 DuckDuckGo에서 이미지 검색을 수행하십시오.com(또는 당신이 견지한다면 구글)에서 어떤 그림을 오른쪽 단추로 눌러서 URL을 받습니다.응용 프로그램에 URL을 붙여 넣으면 축소판이 나타납니다.

웹 애플리케이션의 ContextMenu

사용자가 사용자 인터페이스에서 요소를 마우스 오른쪽 버튼으로 클릭할 때 표시되는 컨텍스트 메뉴는 기본적인 권한입니다.이것은 우리가 여러 해 동안 데스크톱 응용 프로그램과 상호작용하는 방식으로 매우 직관적이다.물론 모바일 애플리케이션은 정지 장치가 필요 없고 실제로는 마우스 왼쪽 버튼에 해당하는 터치 명령만 받는다.모바일 프로그램은 오른쪽 단추를 눌렀다는 개념이 없기 때문에 상하문 메뉴를 제공하지 않습니다.이것은 불행한 것이다.

자체 컨텍스트 작성 메뉴

또한 ContextMenu의 단순하고 직관적인 기능을 제공하기 위해 사용자가 직접 만들어야 한다는 것을 의미합니다.이를 위해서는 CSS 스타일과 브라우저 이벤트를 알아야 합니다.

리드 스타일

ContextMenu의 도형 디자인을 돕기 위해 최신 버전Bootstrap CSS Library을 사용했습니다.
이것은 내 상하문 메뉴가 Windows의 상하문 메뉴 스타일을 모방할 수 있도록 좋은 스타일을 제공했다.
그러나, 그것은 나에게 상하문 메뉴 기능을 제공하지 않았다.이를 위해서는 오랜 친구인 자바스크립트가 필요합니다.
HTML 모양은 다음과 같습니다.

ContextMenu의 기본 HTML

<div class="RADcontextMenu card border border-primary">
 <div class="card-body">
 <ul>
  <li onclick="onContextMenuClick(this)" 
       id="delete_item" class="contextMenuItem">Delete item</li>
  <li onclick="onContextMenuClick(this)" 
       id="copy_address" class="contextMenuItem">Copy image address</li>
  <li onclick="onContextMenuClick(this)" 
       id="other_thing" class="contextMenuItem">Do other thing</li>
  <li onclick="onContextMenuClick(this)" 
       id="more_stuff" class="contextMenuItem">Do more stuff</li>
 </ul>
 </div>
 </div>

이것은 일반div 탭과 무질서한 항목 목록일 뿐입니다.목록에 있는 항목마다 메뉴 항목이 있습니다. 클릭할 수 있습니다.각 메뉴 항목마다 클릭한 HTML 요소를 전송하는 동일한 JavaScript 메서드onContextMenuClick()가 트리거됩니다.
이 요소에서 연관된 ID 값을 얻어 트리거할 컨텍스트 메뉴 논리를 쉽게 결정할 수 있습니다.

HTML 클래스 이름

많은 클래스 이름(CSS 스타일 적용)은 Bootstrap에서 가져옵니다.

카드,2.경계국경 초등학교와카드 주체는 모두 안내 양식에서 나온다.

내가 만든 스타일은 주 RADcontextMenu 스타일입니다.
다음은 주요 모든 스타일입니다.css.

사용자 인터페이스 작성을 위한 CSS 스타일

마우스를 컨텍스트 메뉴 항목에 놓으면 배경은 파란색, 글꼴은 흰색으로 바뀝니다..contextMenuItem:hover {background-color: #4281F4;color:white; }주 연관 메뉴가 뷰에서 숨겨짐(가시성:숨김;표시:없음;)사용자가 그 중 한 장의 그림을 오른쪽 단추로 눌렀을 때까지

.RADcontextMenu {z-index:1000;
                    visibility:hidden;
                    display:none;
                    width:200px;
                    height:100px;
                    position:absolute;
                    font-family:'Microsoft Sans Serif';
                    font-size:11px;
    }

사용자가 이미지 축소판을 마우스 오른쪽 버튼으로 클릭

사용자가 이미지 중 하나를 마우스 오른쪽 버튼으로 클릭하면 이미지를 처리하는 코드가 포함된 연관 메뉴가 나타납니다.

function drawContextMenu()
{
  isContextMenuDisplayed = true;
  console.log('drawContextMenu : ' + new Date())
  //console.log($('.EScontextMenu').text());
  document.querySelector('.RADcontextMenu').style.visibility = "visible";
  document.querySelector('.RADcontextMenu').style.display = "block";
  document.querySelector('.RADcontextMenu').style.top = mousePos.y + "px";
  document.querySelector('.RADcontextMenu').style.left = mousePos.x + "px";
}

컨텍스트 메뉴에 (블록)이 표시되고 표시되도록 스타일을 설정합니다.
또한 상하문 메뉴의 왼쪽 상단이 사용자가 오른쪽 단추로 눌렀던 위치(mousePos.x,mousePos.y)와 같음을 확보합니다.
우리는 마우스 패드를 사용할 수 있다.x & 마우스 패드.사용자가 페이지에서 마우스를 이동할 때 아래의 JavaScript 함수를 사용하여 이동을 추적하기 때문입니다.

function onMouseMove(e)
{
  mousePos = { x: e.clientX, y: e.clientY };
}

사용자가 클릭한 컨텍스트 메뉴 항목

사용자가 상하문 메뉴의 항목을 클릭하면 사례 설명에 사용된 ID에 의해 어떤 항목이 클릭되었는지 알 수 있습니다.
다음은 우리가 사용하고 있는 두 가지 중요한 상하문 메뉴 항목의 코드입니다.
참고: 이것은 onContextMenuClick(e)의 전체 소스가 아닙니다.

function onContextMenuClick(e)
{
  console.log("onContextMenuClick()");
  hideContextMenu();

  console.log(e.id);
  switch (e.id)
  {
    case 'delete_item':
      {
        // load all localStorage images into array.
        let allImg = JSON.parse(localStorage.getItem("allImg"));
        // remove targeted item
        allImg.splice(currentHoverImageIdx,1);
        // store updated array to localStorage
        localStorage.setItem("allImg",JSON.stringify(allImg));
        removeMainDiv();
        displayImages();
        break;
      }
    case 'copy_address':
      {
        // ### --- Because of limitations on copying to clipboard 
        // ###     we have to copy from text input.
        // ####    Since we don't want that 
        let clipboard = document.querySelector("#clipboard");
        clipboard.style.visibility = "visible";
        clipboard.style.display = "block";
        clipboard.value=currentImageAddress;
        clipboard.select();
        clipboard.setSelectionRange(0,1000);
        document.execCommand("copy");
        clipboard.style.visibility = "hidden";
        clipboard.style.display = "none";

        break;
      }

항목 삭제

이제 사용자가 항목을 삭제하도록 선택한 경우 다음을 수행합니다.

모든 이미지(URL)를 로컬 스토리지에서 로컬 스토리지로 로드

배열의 JavaScript splice () 방법을 호출하여 색인에 따라 현재 항목을 삭제합니다.

모든 항목(우리가 방금 삭제한 항목을 빼고)localStorage에 저장합니다.

주 div(화면 지우기)

제거

displayImages() - 로컬 저장소의 모든 이미지를 표시합니다.

이미지 URL 복사

또한 사용자는 이미지 URL을 쉽게 액세스할 수 있습니다.
사용자의 클립보드에 이미지 URL을 복사하고 싶습니다.이상한 브라우저 기능 때문에 웹 프로그램에서 클립보드에서 복사하는 것은 이상하고 어려운 작업이었다.일부 개발자들은 클립보드에 복사하는 것이 위험한 행위라고 생각하는 것 같다.왜 그런지 모르겠어요.나는 클립보드에서 복사하는 것이 위험할 수도 있다는 것을 알 수 있지만, 정반대는 아니다.

클립보드로 복사하는 변통 방법

이런 상황에서 이 업무를 크로스 브라우저/크로스 플랫폼으로 하기 위해 나는 해결 방법을 찾았다.
나는 숨겨진 입력 텍스트 상자를 가지고 있는데, 나는 그것을 클립보드로 명명했다.
이 텍스트 상자의 텍스트 값을 이미지 URL 값으로 설정합니다.
다음에 텍스트 상자에 있는 모든 텍스트를 선택하십시오: clipboard.setSelectionRange(0,1000);문서에 execCommand() 라는 특수 명령이 있습니다. 이것은 실행하고자 하는 동작에 따라 다른 매개 변수 값을 수락합니다.이것은 사용자의 클립보드에 데이터를 복사하고 마지막으로 선택한 내용을 복사할 수 있도록 하기 때문에 우리는 현재 이 방법을 document.execCommand("copy");라고 부른다.
우리가 이렇게 한 후에, 우리는 클립보드 입력 텍스트 상자를 다시 숨겨서, 사용자는 영원히 그것이 발생하는 것을 보지 못할 것이다.
이제 이미지 URL을 클립보드에 복사하여 원하는 곳에 붙여 넣을 수 있습니다.

RFC: 사용자 클립보드에 더 나은 복사 방법이 있습니까?

의견 구하기 - 클립보드에 더 잘 복사할 수 있는 방법을 알고 있다면 알려주세요.
나는 이미 이것에 대해 상당히 광범위한 연구를 진행했고, 많은 제품이 있지만, 결코 모든 곳에 적용되는 것은 아니다.

요약

윈포드가 개발하는 시대에 자동적인 일을 하려면 많은 일을 해야 한다.
WinForm dev의 Visual Studio에서도 이제는 자체 컨트롤을 설계하고 이벤트 처리를 자체적으로 설계해야 합니다.
이 모든 것은 단지 좋은 사용자 체험, 즉 직관적인 인터페이스를 얻기 위해서이다.

사전 예방 및 데이터 공유

그러나 이 모든 것들은 우리의 데이터에 쉽게 접근할 수 없게 한다.

데이터 저장소 웹 API

다음 글에서는 C#을 쉽게 구축하는 방법을 보여드리겠습니다.NET 핵심 웹 API는 다음과 같은 방법을 제공합니다.

사용자의 데이터를 원격으로 저장합니다.

사용자 데이터 검색

(설명 시작) AES256 알고리즘(JavaScript를 통해)을 사용하여 사용자 데이터를 암호화하는 방법

웹 개발자로서 이 데이터 저장 웹 API는 우리에게 많은 것을 열어줄 것입니다. 당신은 이러한 해결 방안을 만드는 데 어려움을 겪을 것입니다.

역사.

2022-01-10: 본문의 원시 출판물.