[add] deNet btn

src/entry/content.js

@@ -2,14 +2,33 @@
 let deBtn = document.createElement('span');
 const shadowRoot = deBtn.attachShadow({mode: 'closed'})
 const shadowDiv = document.createElement('div');
-shadowDiv.innerText = 'Test Btn';
+shadowDiv.innerText = 'DeNet';
 shadowDiv.id = 'de-btn';
-shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px';
+shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px;cursor: pointer;';
 shadowRoot.appendChild(shadowDiv);
+
+
+const deBtn1 = document.createElement('div');
+const smallDeBtnStyle = 'width:30px;height: 30px;text-align:center;line-height:30px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:12px;font-weight:500;border-radius:4px;cursor: pointer;';
+deBtn1.innerText = 'De';
+deBtn1.id = 'de-btn1';
+deBtn1.style.cssText = smallDeBtnStyle;
+
+const deBtn2 = document.createElement('div');
+deBtn2.innerText = 'De';
+deBtn2.id = 'de-btn2';
+deBtn2.style.cssText = smallDeBtnStyle;
+
 let tweetBtn;
 
 deBtn.addEventListener('click', () => {
-	document.getElementById('iframe-test').contentWindow.postMessage({actionType : 'showGiveDialog'}, '*');
+	showGiveDialog();
+})
+deBtn1.addEventListener('click', () => {
+	showGiveDialog();
+})
+deBtn2.addEventListener('click', () => {
+	showGiveDialog();
 })
 
 document.addEventListener('DOMContentLoaded', function () {
@@ -19,6 +38,10 @@ document.addEventListener('DOMContentLoaded', function () {
 		
 		tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
 		tweetBtn.addEventListener('click', function () {
+			setTimeout(() => {
+				let dialogScheduleBtn = getScheduleDom(true);
+				addDeNetEditBtn(dialogScheduleBtn, deBtn2);
+			}, 800)
 		})
 	}, 1000)
 })
@@ -36,12 +59,22 @@ window.addEventListener('message', function (event) {
 			case "showTwitterPublishDialog":
 				// iframe.style.display = 'none';
 				tweetBtn.click();
+				publishTweetEvent();
 				break;
 		}
 	}
 	console.log('message',event);
 });
 
+function publishTweetEvent () {
+	let publishTweetBtn = document.querySelector('div[role="dialog"]').querySelector('div[data-testid="tweetButton"]');
+	publishTweetBtn.addEventListener('click', function () {
+		setTimeout(() => {
+			let twitterArtId = getTwitterArtId();
+		}, 1000)
+	});
+}
+
 function addDeNetEditBtn (parent, dom, isClick = false) {
 	setTimeout(() => {
 		if (parent) {
@@ -57,10 +90,13 @@ function addDeNetEditBtn (parent, dom, isClick = false) {
 
 function addDeNetBtn (dom) {
 	setTimeout(() => {
-		let node = document.querySelector('.r-1habvwh');
+		let node = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
 		if (node) {
 			node.appendChild(dom);
 		}
+		
+		let dialogScheduleBtn = getScheduleDom(false);
+		addDeNetEditBtn(dialogScheduleBtn, deBtn1);
 	}, 1000)
 }
 
@@ -90,11 +126,28 @@ function addIframe () {
 	document.getElementById('layers').appendChild(iframe)
 }
 
-setInterval(() => {
+function getTwitterArtId () {
+	let firstTwitterArtId = document.querySelector('article[data-testid="tweet"]').querySelector('a[dir="auto"]').getAttribute('href');
+	
+	return firstTwitterArtId;
+}
+
+function showGiveDialog() {
+	document.getElementById('iframe-test').contentWindow.postMessage({actionType : 'showGiveDialog'}, '*');
+}
+
+function setPublishContent (content) {
+	setTimeout(() => {
+		document.execCommand("insertText", false, content);
+	});
+}
+
+
+/* setInterval(() => {
 	let toolBar = document.querySelector('div[data-testid="toolBar"]');
 	let innerDeIcon = document.getElementById('de-icon');
 	if (toolBar && !innerDeIcon) {
 		// let dialogScheduleBtn = getScheduleDom(false);
-		// addDeNetEditBtn(dialogScheduleBtn, deBtn);
+		// addDeNetEditBtn(dialogScheduleBtn, deBtn1);
 	}
-}, 800)
+}, 800) */

src/view/components/give-dialog.vue

@@ -2,7 +2,9 @@
   <div class="overlay" v-if="visible">
     <div class="content">
       <div class="head">
-
+        <div class="close-btn" @click="close">
+          ×
+        </div>
       </div>
       <div class="body">
         <div class="left"></div>
@@ -14,7 +16,7 @@
                   USD
                 </div>
                 <el-input v-model="baseFormData.amount"
-                          placeholder="Please input"
+                          placeholder="$0.00"
                           :input-style="{'box-shadow': 'none'}" />
               </div>
               <div class="item">
@@ -22,7 +24,7 @@
                   Quantity
                 </div>
                 <el-input v-model="baseFormData.quantity"
-                          placeholder="Please input"
+                          placeholder="Enter quantity"
                           :input-style="{'box-shadow': 'none'}" />
               </div>
             </div>
@@ -69,19 +71,13 @@
             </div>
           </div>
 
-          <div class="submit-btn">
+          <div class="submit-btn" @click="confirm">
             NEXT
           </div>
         </div>
       </div>
     </div>
   </div>
-<!--  <el-dialog
-    v-model="visible"
-    title="give Dialog"
-    width="30%"
-    @close="close">
-  </el-dialog>-->
 </template>
 
 <script setup>
@@ -180,6 +176,14 @@
         border-bottom: 1px solid #ECECEC;
         height: 48px;
         box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        .close-btn {
+          width: max-content;
+          font-size: 20px;
+          margin-left: 20px;
+          cursor: pointer;
+        }
       }
       .body {
         box-sizing: border-box;
@@ -301,6 +305,4 @@
       }
     }
   }
-
-
 </style>