|
@@ -1307,11 +1307,14 @@ export const showTwitterPost = (data) => {
|
|
|
content_get_nft_post_pre({
|
|
|
groupId: data.groupId
|
|
|
})
|
|
|
- setGroupTabSelfStyle({
|
|
|
- groupColor: 'rgb(83, 100, 113)',
|
|
|
- groupFontWeight: '500',
|
|
|
- lineDisplay: 'none'
|
|
|
- });
|
|
|
+ let groupTab = getGroupTabNode();
|
|
|
+ if(groupTab) {
|
|
|
+ groupTab.click();
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ addGroupTab();
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
// addPublishTipsIframe({ type: 'nft' })
|
|
|
}
|
|
|
|
|
@@ -1690,6 +1693,62 @@ export const setPopupConfByPopupPage = () => {
|
|
|
* Group Tab List Start
|
|
|
*/
|
|
|
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * 创建 Group Tab
|
|
|
+ */
|
|
|
+const createGroupTabNode = () => {
|
|
|
+ let groupIcon = document.createElement('img');
|
|
|
+ groupIcon.id = 'de-group-tab-icon'
|
|
|
+ groupIcon.src = require("@/assets/img/icon-group-tab-item.png");
|
|
|
+ groupIcon.style.cssText = 'width:20px;height: 20px;margin-right:4px;';
|
|
|
+
|
|
|
+ let divNode = document.createElement('div');
|
|
|
+ divNode.style.cssText = 'display: flex; align-items: center;height: 100%';
|
|
|
+ divNode.appendChild(groupIcon);
|
|
|
+ divNode.appendChild(document.createTextNode('Group'));
|
|
|
+
|
|
|
+
|
|
|
+ let lineDom = document.createElement('div');
|
|
|
+ lineDom.id = 'de-tab-line';
|
|
|
+ lineDom.style.cssText = `border-radius: 9999px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ min-width: 56px;
|
|
|
+ align-self: center;
|
|
|
+ height: 4px;
|
|
|
+ background-color: rgb(29, 155, 240);
|
|
|
+ display: none`;
|
|
|
+
|
|
|
+ let groupTab = document.createElement('div');
|
|
|
+ groupTab.id = 'de-nav-tab-group';
|
|
|
+ groupTab.style.cssText = `z-index: 1;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ min-width: 56px;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0px 16px;
|
|
|
+ color: rgb(83, 100, 113);
|
|
|
+ font-weight: 700;
|
|
|
+ height: 53px;
|
|
|
+ cursor: pointer;
|
|
|
+ font: 500 15px / 20px TwitterChirp, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;`;
|
|
|
+
|
|
|
+ groupTab.appendChild(divNode);
|
|
|
+ groupTab.appendChild(lineDom);
|
|
|
+
|
|
|
+ return groupTab;
|
|
|
+}
|
|
|
+
|
|
|
+const getGroupTabNode = () => {
|
|
|
+ let tab = document.querySelector('#de-nav-tab-group');
|
|
|
+ return tab;
|
|
|
+}
|
|
|
+
|
|
|
const addGroupTab = () => {
|
|
|
let illegalPages = ['notifications', 'explore', 'followers', 'following'];
|
|
|
let page = window.location.pathname.split('/');
|
|
@@ -1698,78 +1757,40 @@ const addGroupTab = () => {
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
- main();
|
|
|
- function main() {
|
|
|
- let tabListDom = document.querySelector('div[role="tablist"]');
|
|
|
- let groupItemTab = document.querySelector('#de-nav-tab-group');
|
|
|
-
|
|
|
- let groupIcon = document.createElement('img');
|
|
|
- groupIcon.id = 'de-group-tab-icon'
|
|
|
- groupIcon.src = require("@/assets/img/icon-group-tab-item.png");
|
|
|
- groupIcon.style.cssText = 'width:20px;height: 20px;margin-right:4px;';
|
|
|
-
|
|
|
- let divNode = document.createElement('div');
|
|
|
- divNode.style.cssText = 'display: flex; align-items: center';
|
|
|
- divNode.appendChild(groupIcon);
|
|
|
- divNode.appendChild(document.createTextNode('Group'));
|
|
|
-
|
|
|
- if (tabListDom && !groupItemTab) {
|
|
|
- let lineDom = document.createElement('div');
|
|
|
- lineDom.id = 'de-tab-line';
|
|
|
- lineDom.style.cssText = `border-radius: 9999px;
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- min-width: 56px;
|
|
|
- align-self: center;
|
|
|
- height: 4px;
|
|
|
- background-color: rgb(29, 155, 240);
|
|
|
- display: none`;
|
|
|
-
|
|
|
- let groupTab = document.createElement('div');
|
|
|
- groupTab.id = 'de-nav-tab-group';
|
|
|
- groupTab.style.cssText = `z-index: 1;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- min-width: 56px;
|
|
|
- -webkit-box-pack: center;
|
|
|
- justify-content: center;
|
|
|
- -webkit-box-align: center;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- padding: 0px 16px;
|
|
|
- color: rgb(83, 100, 113);
|
|
|
- font-weight: 700;
|
|
|
- height: 53px;
|
|
|
- cursor: pointer;
|
|
|
- font: 500 15px / 20px TwitterChirp, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;`;
|
|
|
-
|
|
|
- groupTab.appendChild(divNode);
|
|
|
- groupTab.appendChild(lineDom);
|
|
|
- tabListDom.appendChild(groupTab);
|
|
|
-
|
|
|
- groupTab.addEventListener('mouseenter', function () {
|
|
|
- groupTab.style.background = 'rgba(15, 20, 25, 0.1)'
|
|
|
- });
|
|
|
- groupTab.addEventListener('mouseleave', function () {
|
|
|
- groupTab.style.background = 'none'
|
|
|
- });
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- let count = 0;
|
|
|
- hiddenMaskWeb3Tab(count);
|
|
|
- }, 2000)
|
|
|
+ let tabListDom = document.querySelector('div[role="tablist"]');
|
|
|
+ let groupItemTab = getGroupTabNode();
|
|
|
+
|
|
|
+ if (tabListDom && !groupItemTab) {
|
|
|
+ let groupTab = createGroupTabNode();
|
|
|
|
|
|
- addGroupTabEventListener({ groupTab });
|
|
|
- }
|
|
|
+ tabListDom.appendChild(groupTab);
|
|
|
|
|
|
- addTweetTabEventListener({
|
|
|
- tabListDom
|
|
|
+ groupTab.addEventListener('mouseenter', function () {
|
|
|
+ groupTab.style.background = 'rgba(15, 20, 25, 0.1)'
|
|
|
});
|
|
|
-
|
|
|
- addTabGroupContent(() => {
|
|
|
- checkNeedSelectGroupTab();
|
|
|
+ groupTab.addEventListener('mouseleave', function () {
|
|
|
+ groupTab.style.background = 'none'
|
|
|
});
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ let count = 0;
|
|
|
+ hiddenMaskWeb3Tab(count);
|
|
|
+ }, 1300)
|
|
|
+
|
|
|
+ addGroupTabEventListener();
|
|
|
}
|
|
|
+
|
|
|
+ removeTweetTabEvent({
|
|
|
+ tabListDom
|
|
|
+ });
|
|
|
+
|
|
|
+ addTweetTabEventListener({
|
|
|
+ tabListDom
|
|
|
+ });
|
|
|
+
|
|
|
+ addTabGroupContent(() => {
|
|
|
+ checkNeedSelectGroupTab();
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
const hiddenMaskWeb3Tab = (count) => {
|
|
@@ -1804,7 +1825,7 @@ const checkNeedSelectGroupTab = () => {
|
|
|
|
|
|
/** 选中 Group tab */
|
|
|
export const selectGroupTab = () => {
|
|
|
- let groupTab = document.querySelector('#de-nav-tab-group');
|
|
|
+ let groupTab = getGroupTabNode();
|
|
|
if (groupTab) {
|
|
|
groupTab.click();
|
|
|
}
|
|
@@ -1814,8 +1835,8 @@ export const selectGroupTab = () => {
|
|
|
*
|
|
|
* Group tab点击事件监听
|
|
|
*/
|
|
|
-const addGroupTabEventListener = (params) => {
|
|
|
- let { groupTab } = params;
|
|
|
+const addGroupTabEventListener = () => {
|
|
|
+ let groupTab = getGroupTabNode();
|
|
|
groupTab.addEventListener('click', function () {
|
|
|
let groupColor = systemInfo.theme == 'light' ? 'rgb(15, 20, 25)' : '#fff';
|
|
|
setGroupTabSelfStyle({
|
|
@@ -1858,6 +1879,9 @@ const onShowGroupBanner = () => {
|
|
|
actionType: "SWITCH_GROUP_BANNER_STATUS",
|
|
|
data: { type: 'btn' }
|
|
|
}, () => { });
|
|
|
+ if(!getGroupTabNode()) {
|
|
|
+ addGroupTab();
|
|
|
+ }
|
|
|
break
|
|
|
}
|
|
|
})
|
|
@@ -1878,13 +1902,27 @@ const addPageScrollEvent = () => {
|
|
|
}, () => { });
|
|
|
};
|
|
|
|
|
|
+const removeTweetTabEvent = (params) => {
|
|
|
+ let { tabListDom } = params;
|
|
|
+
|
|
|
+ if (tabListDom) {
|
|
|
+ let tweetTabItem = tabListDom.querySelectorAll('div[role="presentation"]');
|
|
|
+ if (tweetTabItem.length) {
|
|
|
+ for (let i = 0; i < tweetTabItem.length; i++) {
|
|
|
+ let item = tweetTabItem[i];
|
|
|
+ item.removeEventListener('click', TweetTabEventHandler)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
*
|
|
|
* twitter tab点击事件监听
|
|
|
*/
|
|
|
const addTweetTabEventListener = (params) => {
|
|
|
let { tabListDom } = params;
|
|
|
- let groupItemTab = document.querySelector('#de-nav-tab-group');
|
|
|
+ let groupItemTab = getGroupTabNode();
|
|
|
|
|
|
if (tabListDom && groupItemTab) {
|
|
|
// 监听twitter tab点击事件
|
|
@@ -1892,43 +1930,48 @@ const addTweetTabEventListener = (params) => {
|
|
|
if (tweetTabItem.length) {
|
|
|
for (let i = 0; i < tweetTabItem.length; i++) {
|
|
|
let item = tweetTabItem[i];
|
|
|
- item.addEventListener('click', function () {
|
|
|
- window.removeEventListener('scroll', addPageScrollEvent);
|
|
|
-
|
|
|
- setGroupTabSelfStyle({
|
|
|
- groupColor: 'rgb(83, 100, 113)',
|
|
|
- groupFontWeight: '500',
|
|
|
- lineDisplay: 'none'
|
|
|
- });
|
|
|
-
|
|
|
- setTabContentStyle({
|
|
|
- tweetTabContentDisply: 'block',
|
|
|
- iframeContentDisplay: 'none'
|
|
|
- });
|
|
|
-
|
|
|
- setTweetActiveTabStyle({
|
|
|
- color: 'rgb(15, 20, 25)',
|
|
|
- display: 'block'
|
|
|
- });
|
|
|
-
|
|
|
- chrome.runtime.sendMessage({
|
|
|
- actionType: "SWITCH_GROUP_BANNER_STATUS",
|
|
|
- data: { type: 'arrow' }
|
|
|
- }, () => { });
|
|
|
- })
|
|
|
+ item.addEventListener('click', TweetTabEventHandler)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+const TweetTabEventHandler = () => {
|
|
|
+ window.removeEventListener('scroll', addPageScrollEvent);
|
|
|
+
|
|
|
+ setGroupTabSelfStyle({
|
|
|
+ groupColor: 'rgb(83, 100, 113)',
|
|
|
+ groupFontWeight: '500',
|
|
|
+ lineDisplay: 'none'
|
|
|
+ });
|
|
|
+
|
|
|
+ setTabContentStyle({
|
|
|
+ tweetTabContentDisply: 'block',
|
|
|
+ iframeContentDisplay: 'none'
|
|
|
+ });
|
|
|
+
|
|
|
+ setTweetActiveTabStyle({
|
|
|
+ color: 'rgb(15, 20, 25)',
|
|
|
+ display: 'block'
|
|
|
+ });
|
|
|
+
|
|
|
+ chrome.runtime.sendMessage({
|
|
|
+ actionType: "SWITCH_GROUP_BANNER_STATUS",
|
|
|
+ data: { type: 'arrow' }
|
|
|
+ }, () => { });
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
/**
|
|
|
* 设置 Group Tab 样式
|
|
|
* */
|
|
|
const setGroupTabSelfStyle = (params = {}) => {
|
|
|
let { groupColor, groupFontWeight, lineDisplay } = params;
|
|
|
- let groupTab = document.querySelector('#de-nav-tab-group');
|
|
|
- groupTab.style.color = groupColor;
|
|
|
- groupTab.style.fontWeight = groupFontWeight;
|
|
|
+ let groupTab = getGroupTabNode();
|
|
|
+ if(groupTab) {
|
|
|
+ groupTab.style.color = groupColor;
|
|
|
+ groupTab.style.fontWeight = groupFontWeight;
|
|
|
+ }
|
|
|
|
|
|
let lineDom = groupTab.querySelector('#de-tab-line');
|
|
|
if (lineDom) {
|
|
@@ -1952,12 +1995,17 @@ export const refreshTabGroup = () => {
|
|
|
*/
|
|
|
const setTweetActiveTabStyle = (params) => {
|
|
|
let { color, display } = params || {};
|
|
|
- let tweetActiveTab = document.querySelector('a[aria-selected="true"]').querySelector('div');
|
|
|
- tweetActiveTab.style.color = color;
|
|
|
-
|
|
|
- let tweetTabLine = tweetActiveTab.querySelector('div');
|
|
|
- if (tweetTabLine) {
|
|
|
- tweetTabLine.style.display = display;
|
|
|
+ let tab = document.querySelector('a[aria-selected="true"]');
|
|
|
+ if(tab) {
|
|
|
+ let tweetActiveTab = tab.querySelector('div');
|
|
|
+ if(tweetActiveTab) {
|
|
|
+ tweetActiveTab.style.color = color;
|
|
|
+
|
|
|
+ let tweetTabLine = tweetActiveTab.querySelector('div');
|
|
|
+ if (tweetTabLine) {
|
|
|
+ tweetTabLine.style.display = display;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1983,13 +2031,13 @@ const setTabContentStyle = (params) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- let iframeContent = document.getElementById('de-tab-group-content');
|
|
|
+ let iframeContent = getGroupTabContentNode();
|
|
|
|
|
|
if (!iframeContent) {
|
|
|
addTabGroupContent();
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
- iframeContent = document.getElementById('de-tab-group-content');
|
|
|
+ iframeContent =getGroupTabContentNode();
|
|
|
if (iframeContent) {
|
|
|
iframeContent.style.display = iframeContentDisplay;
|
|
|
}
|
|
@@ -2017,7 +2065,7 @@ const addTabGroupContent = (cb) => {
|
|
|
iframe.src = chrome.runtime.getURL('/iframe/tab-group.html') + `?params=${JSON.stringify(params)}`;
|
|
|
iframe.style.cssText = `border: medium none; height: 500px;display: none`
|
|
|
|
|
|
- let iframeContent = document.getElementById('de-tab-group-content');
|
|
|
+ let iframeContent = getGroupTabContentNode();
|
|
|
|
|
|
let tweetTabContent = getTweetTabContent();
|
|
|
if (!iframeContent) {
|
|
@@ -2028,19 +2076,24 @@ const addTabGroupContent = (cb) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const getGroupTabContentNode = () => {
|
|
|
+ let content = document.getElementById('de-tab-group-content');
|
|
|
+ return content;
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
*
|
|
|
* 设置Tab Group Iframe 样式
|
|
|
*/
|
|
|
export const setTabGroupIframeStyle = (params) => {
|
|
|
- let iframeContent = document.getElementById('de-tab-group-content');
|
|
|
+ let iframeContent = getGroupTabContentNode();
|
|
|
if (iframeContent) {
|
|
|
iframeContent.style.height = document.querySelector('html').offsetHeight + 'px';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * mask Tab
|
|
|
+ * mask web3 Tab
|
|
|
*
|
|
|
*/
|
|
|
const getMaskWeb3Tab = () => {
|
|
@@ -2066,36 +2119,35 @@ export const getTweetProfileNavTop = (params) => {
|
|
|
}, () => { })
|
|
|
}
|
|
|
|
|
|
-/**
|
|
|
- *
|
|
|
- * Group Tab List End
|
|
|
- *
|
|
|
- */
|
|
|
-
|
|
|
-
|
|
|
-export const loginSuccessHandle = () => {
|
|
|
- // 检查是否漏出group图标
|
|
|
- checkUserJoinGroup(() => {
|
|
|
- showNFTGroupIcon()
|
|
|
- addEventAction()
|
|
|
- addJoinedGroupList();
|
|
|
- })
|
|
|
-}
|
|
|
|
|
|
export const setGroupInfo = (params = {}) => {
|
|
|
- console.log('params', params)
|
|
|
tweetAccountBindGroupInfo.groupInfo = params;
|
|
|
+ let groupTab = getGroupTabNode();
|
|
|
+
|
|
|
if (!params.nftGroupId) {
|
|
|
- let groupTab = document.querySelector('#de-nav-tab-group');
|
|
|
+ let {pathname = ''} = window.location;
|
|
|
+ if(pathname == "/compose/tweet") {
|
|
|
+ if(groupTab) {
|
|
|
+ groupTab.click();
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ };
|
|
|
if (groupTab) {
|
|
|
groupTab.style.display = 'none';
|
|
|
} else {
|
|
|
setTimeout(() => {
|
|
|
- groupTab = document.querySelector('#de-nav-tab-group');
|
|
|
+ groupTab = getGroupTabNode();
|
|
|
if (groupTab) {
|
|
|
groupTab.style.display = 'none';
|
|
|
}
|
|
|
- }, 500)
|
|
|
+ }, 800)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(groupTab) {
|
|
|
+ let {display} = groupTab.style;
|
|
|
+ if(display == 'none') {
|
|
|
+ groupTab.style.display = 'block';
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -2115,4 +2167,21 @@ const getSysTheme = () => {
|
|
|
systemInfo.theme = 'dark'
|
|
|
}
|
|
|
});
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * Group Tab List End
|
|
|
+ *
|
|
|
+ */
|
|
|
+
|
|
|
+
|
|
|
+export const loginSuccessHandle = () => {
|
|
|
+ // 检查是否漏出group图标
|
|
|
+ checkUserJoinGroup(() => {
|
|
|
+ showNFTGroupIcon()
|
|
|
+ addEventAction()
|
|
|
+ addJoinedGroupList();
|
|
|
+ })
|
|
|
+}
|