[edit] keywordReminder

src/logic/content/keywordReminder.js

@@ -0,0 +1,154 @@
+import { debounce } from "@/uilts/help";
+
+const keywordData = [
+  {
+    type: 1,
+    keyword: 'giveaway',
+    tips: ''
+  },
+  {
+    type: 1,
+    keyword: 'follow',
+    tips: ''
+  },
+  {
+    type: 2,
+    keyword: 'ToolBox',
+    tips: ''
+  },
+  {
+    type: 1,
+    keyword: 'retweet',
+    tips: ''
+  },
+  {
+    type: 2,
+    keyword: 'PostEditor',
+    tips: ''
+  },
+]
+
+let tagData = []
+
+const getInputBox = () => {
+  return document.querySelector('div[data-testid="tweetTextarea_0"]');
+}
+
+export const keywordReminderInit = () => {
+  listenerKeywordInput();
+  addHighlightEleWrapper();
+  console.log('keywordReminderInit')
+};
+
+export const listenerKeywordInput = debounce(function() {
+  let inputBox = getInputBox();
+  if(inputBox) {
+    inputBox.oninput = function () {
+        highlightKeyword();
+    }
+  }
+}, 800);
+
+export const highlightKeyword = () => {
+  let inputBox = getInputBox();
+  if(inputBox) {
+    let textEleArr = inputBox.querySelectorAll('span[data-text="true"]');
+    let lastRange;
+
+    if(textEleArr && textEleArr.length) {
+      for(let i = 0; i < keywordData.length; i++) {
+        let keyword = keywordData[i]['keyword'];
+        for(let j = 0; j < textEleArr.length; j++) {
+          let txt = textEleArr[j]['innerHTML'];
+          let startPos = txt.indexOf(keyword), endPos;
+          if(startPos > -1) {
+            endPos = startPos + keyword.length;
+
+            if(checkHasTag({keyword, startPos, endPos, rowIndex: j})) {
+              continue;
+            }
+
+            lastRange = window.getSelection().getRangeAt(0)
+
+            let range = new Range();
+            range.setStart(textEleArr[j].firstChild, startPos);
+            range.setEnd(textEleArr[j].firstChild, endPos);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+
+            var range1 = window.getSelection().getRangeAt(0);
+            var rectDom = range1.getBoundingClientRect();
+            console.log(rectDom);
+
+            window.getSelection().removeAllRanges();
+
+            if(lastRange) {
+              window.getSelection().addRange(lastRange)
+            }
+
+            tagData.push({
+              keyword,
+              rowIndex: j,
+              startPos,
+              endPos
+            })
+
+            let inputBoxRect = inputBox.getBoundingClientRect();
+            let left = rectDom.left - inputBoxRect.left;
+            let top = rectDom.top - inputBoxRect.top + 2;
+
+            let cssText = `left: ${left}px;top: ${top}px;width: ${rectDom.width}px;height: ${rectDom.height}px;`;
+            addHighlightDom({cssText, rowIndex: j, keyword})
+          } else {
+            removeTag({rowIndex: j, keyword})
+          }
+        }
+      }
+    }
+  }
+}
+
+const checkHasTag = (params) => {
+  let hasTag = false;
+  for(let i = 0; i < tagData.length; i++) {
+    let item = tagData[i];
+    if(params.rowIndex == item.rowIndex && params.keyword == item.keyword && item.startPos == params.startPos && item.endPos == params.endPos) {
+      hasTag = true;
+      break;
+    }
+  }
+
+  return hasTag;
+}
+
+const removeTag = (params) => {
+  let tagDom = document.getElementsByClassName(`${params.rowIndex}-${params.keyword}`);
+  tagData = tagData.filter(item => item.rowIndex == params.rowIndex && params.keyword == item.keyword)
+  if(tagDom && tagDom.length) {
+    for(let i = 0; i < tagDom.length; i++) {
+      tagDom[i].remove();
+    }
+  }
+}
+
+export const addHighlightEleWrapper = () => {
+  let ele = document.createElement('div');
+  ele.style.cssText = 'pointer-events: none;mix-blend-mode: darken;';
+  ele.id = 'denet-keword-highlight-wrapper';
+  let inputBox = getInputBox();
+  if(inputBox) {
+    inputBox.parentNode.appendChild(ele);
+  }
+};
+
+export const addHighlightDom = (params) => {
+  let ele = document.createElement('div');
+  let defaultCssText = 'position: absolute;border: 1.5px dashed #FCAB40;box-sizing: border-box';
+  ele.style.cssText = params.cssText + defaultCssText;
+  ele.id = params.id || '';
+  ele.setAttribute("class", `${params.rowIndex}-${params.keyword}`);
+  let highlightEleWrapper = document.getElementById('denet-keword-highlight-wrapper');
+  if(highlightEleWrapper) {
+    highlightEleWrapper.appendChild(ele);
+  }
+}

src/logic/content/twitter.js

@@ -7,6 +7,7 @@ import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
 import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, elemAddEventListener, addJoinedGroupList } from '@/logic/content/nft';
 import { jumpTwitterDetailByAlert, showEditTweet } from '@/logic/content/help/twitter.js'
 import { clearPostContent, setGroupIconStatus } from '@/logic/content/nft.js'
+import { keywordReminderInit } from '@/logic/content/keywordReminder.js'
 import { toolBox } from '@/logic/content/ToolBox'
 import axios from 'axios';
 import messageCenter from '@/uilts/messageCenter';
@@ -283,6 +284,7 @@ function _addDeNetEditBtn(params = {}) {
         if (!innerDeIcon) {
             toolElem.firstChild.appendChild(createTweetToolbarDenet());
             popupShowGiveawayDialog();
+            keywordReminderInit();
             Report.reportLog({
                 pageSource: Report.pageSource.mainPage,
                 businessType: Report.businessType.buttonView,
@@ -311,6 +313,7 @@ function _addDeNetEditBtn(params = {}) {
                 if (!innerDeIcon) {
                     toolElem.firstChild.appendChild(createTweetToolbarDenet());
                     popupShowGiveawayDialog();
+                    keywordReminderInit();
                     Report.reportLog({
                         pageSource: Report.pageSource.mainPage,
                         businessType: Report.businessType.buttonView,
@@ -602,10 +605,34 @@ function createTweetToolbarDenet() {
     let src = require("@/assets/img/icon-gift-pack.png");
     const smallDeBtnStyle = 'width:20px;height: 20px;cursor: pointer;margin: 0px 8px';
 
-    const deBtn1 = document.createElement('img');
+    const deBtnInnerBtn = document.createElement('img');
+    deBtnInnerBtn.style.cssText = smallDeBtnStyle;
+    deBtnInnerBtn.src = src;
+
+    const deBtn1 = document.createElement('span');
     deBtn1.id = 'de-btn1';
-    deBtn1.style.cssText = smallDeBtnStyle;
-    deBtn1.src = src;
+    deBtn1.style.cssText = 'margin: 0;padding: 0;display: flex;align-items: center;justify-content: center;'
+    deBtn1.innerHTML = `
+        ${deBtnInnerBtn.outerHTML}
+        <style>
+        @keyframes tilt-shaking {
+          0% { transform: rotate(0deg) scale(1.3); }
+          10% { transform: rotate(45deg) scale(1.3); }
+          20% { transform: rotate(0eg) scale(1.3); }
+          30% { transform: rotate(-45deg) scale(1.3); }
+          40% { transform: rotate(0eg) scale(1.3); }
+          50% { transform: rotate(45deg) scale(1.3); }
+          60% { transform: rotate(0eg) scale(1.3); }
+          70% { transform: rotate(-45deg) scale(1.3); }
+          80% { transform: rotate(0eg) scale(1.3); }
+          90% { transform: rotate(45deg) scale(1.3); }
+          100% { transform: rotate(0deg) scale(1); }
+        }
+        #de-btn1 {
+          animation: tilt-shaking 2s linear;
+        }
+        </style>
+    `;
 
     deBtn1.addEventListener('click', () => {
         Report.reportLog({