de-net/src/logic/content/nft.js

import { getOffsetRect, nextTick } from '@/uilts/help'
import { listJoinNftGroup } from '@/http/nft';
import { getChromeStorage } from '@/uilts/chromeExtension.js'
import { _setPublishContent, publishNFTTweetPost, bindTwitterArt, bindTwitterArtMethod, getSysTheme, systemInfo } from './twitter';
import { jumpTwitterDetailByAlert } from '@/logic/content/help/twitter.js';
import Report from "@/log-center/log"

var ifShowNftGroup = false;
var tempNftGroupPost = null;
var groupImgNoSelect = require("@/assets/img/icon-nft-group-entry.png");
var groupImgSelect = require("@/assets/img/icon-nft-group-select.png");

let fixProfileTabAutoTimer = null;

export const showNFTGroupIcon = () => {
    let urlInfo = new URL(window.location.href)
    let isTwitter = urlInfo.hostname === 'twitter.com'
    let toolElem = document.querySelector('div[data-testid="toolBar"]');
    let isAppend = toolElem && toolElem.querySelector('#de-nft-group-enter');
    let where = isTwitter && toolElem && !isAppend && ifShowNftGroup;
    if (where) {
        let oDiv = document.createElement(`div`);
            oDiv.id = 'de-nft-group-enter';
        let oImg = document.createElement('img');
            oImg.src = groupImgNoSelect;
            oImg.className = 'addGroup';
            oDiv.innerHTML = `
                ${oImg.outerHTML}
                <style>
                    #de-nft-group-enter {position:relative; display:flex; padding:0 8px;}
                    #de-nft-group-enter .addGroup {cursor:pointer; height:32px;}
                </style>
            `;
            oDiv.addEventListener('click', (e) => {
                showNFTGroupList(e);
                e.stopPropagation();
            })
        toolElem.firstChild.appendChild(oDiv)
    }
}

export const showNFTGroupList = (e) => {
    let rectObject = e.target.getBoundingClientRect();
    let { top, left, height } = rectObject;
    let oTop = top + height + 10;
    // 居底判断
    let wHeight = document.body.offsetHeight || document.body.clientHeight;
    if ((top + height + 290) > wHeight) oTop = top - 290;
    let iframe = document.createElement('iframe');
        iframe.src = chrome.runtime.getURL(`/iframe/nft-group.html`)
        iframe.style.cssText = 'border:medium none; width:315px; height:260px;';
    let html = document.createElement('div');
        html.id = 'de-nft-group-list';
        html.innerHTML = `
            <div class="de-nft-group-div">
                ${iframe.outerHTML}
            </div>
            <div class="de-nft-group-mask"></div>
            <style>
                .de-nft-group-div {position:fixed; display:flex; align-items:center; justify-content:center; z-index:100; width:350px; height:280px; left:${left}px; top:${oTop}px; background:#fff; border-radius:20px; box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.26);}
                .de-nft-group-mask {position:fixed; z-index:99; width:100%; height:100%; left:0; top:0;}
            </style>`;

    document.body.appendChild(html);
    document.querySelector('.de-nft-group-mask').addEventListener('click', () => {
        hideNFTGroupList();
    })
}

export const hideNFTGroupList = () => {
    let dom = document.querySelector('#de-nft-group-list');
    dom && document.body.removeChild(dom);
}

export const checkUserJoinGroup = (fn) => {
    getChromeStorage('userInfo', (res) => {
        // 如果登录
        if (res) {
            listJoinNftGroup({
                params: {
                    pageNum: 1,
                    pageSize: 1
                }
            }).then(res => {
                let { data = [] } = res;
                if (data !== null && data.length > 0) {
                    ifShowNftGroup = true;
                    if (fn) fn()
                }
            })
        }
    })
}

export const clearPostContent = (fn) => {
    let edit = document.querySelector('div[contenteditable="true"]')
    let where = (edit.innerText === '\n') || (edit.innerText === '')
    if (where) {
        fn()
    } else {
        nextTick(() => {
            let inputEle = document.querySelector('div[contenteditable="true"]');
            if (inputEle) {
                inputEle.focus();
            }
        }, 20).then(() => {
            document.execCommand('selectAll');
            document.execCommand('delete');
            clearPostContent(fn)
        })
    }
}

export const setPostContent = (res) => {
    nextTick(() => {
        let inputEle = document.querySelector('div[contenteditable="true"]');
        if (inputEle) {
            inputEle.focus();
        }
        setGroupIconStatus();
    }, 100).then(() => {
        _setPublishContent(res.srcContent + ' ');
    })
}

export const endPostContent = () => {
    return new Promise((resolve) => {
        let inputEle = document.querySelector('div[contenteditable="true"]');
        let range = document.createRange();
            range.selectNodeContents(inputEle);
            range.collapse(false);
        let sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        resolve()
    })
}

export const setNFTGroupContent = (res) => {
    tempNftGroupPost = res;

    let dialogDiv = document.querySelectorAll('div[role="dialog"]');
    if (dialogDiv.length === 0) {
        let bigBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
        if (bigBtn) {
            bigBtn.click();
        } else {
            let smallBtn = document.querySelector('a[href="/compose/tweet"]')
            smallBtn && smallBtn.click();
        }
    }

    let edit = document.querySelector('div[contenteditable="true"]')
    let where = (edit.innerText === '\n') || (edit.innerText === '')
    if (where) {
        setPostContent(res)
        nextTick(() => {
            _addTweetButtonListen()
        }, 100)
        
    } else {
        endPostContent().then(() => {
            let inputEle = document.querySelector('div[contenteditable="true"]');
            if (inputEle) {
                inputEle.focus();
            }
            setPostContent(res)
            nextTick(() => {
                _addTweetButtonListen()
            }, 100)
        })
    }
}

export const elemAddEventListener = (elem, action, fn) => {
    if (elem) {
        elem.removeEventListener(action, fn)
        elem.addEventListener(action, fn)
    }
}


export const addJoinedGroupList = () => {
    if(ifShowNftGroup) {
        let {pathname} = window.location;

        let iframe = document.createElement('iframe');
            iframe.id = 'de-joined-group-list';
            iframe.src = chrome.runtime.getURL('/iframe/joined-group-list.html');
            iframe.style.cssText = `border: medium none;height: 120px;border-radius: 16px;margin-bottom: 16px`

        let iframeContent = document.getElementById('de-joined-group-list');

        if (!iframeContent && pathname == '/home') {
            let sidebarColumn = document.querySelector('div[data-testid="sidebarColumn"]');
            if(sidebarColumn) {
                let searchDom = sidebarColumn.querySelector('form[role="search"]');
                if(searchDom) {
                    let listWrapperDom = searchDom.parentElement.parentElement.parentElement.parentElement;
                    if(listWrapperDom) {
                        let listParent = listWrapperDom.parentElement;
                        if(listParent) {
                            listParent.insertBefore(iframe, listWrapperDom.nextElementSibling.nextElementSibling);
                        }
                    }
                }
            } 
        }
    }
};

export const setJoinedGroupIframeStyle = (params) => {
    let {height = '321px'} = params;
    let iframeContent = document.getElementById('de-joined-group-list');
    if(iframeContent) {
        iframeContent.style.height = height;
    }
}

export function setGroupIconStatus() {
    let editElem = document.querySelector('div[contenteditable="true"]');
    let main_observer = new MutationObserver(() => {
        let groupImg = document.querySelector('#de-nft-group-enter');
        let innerText = editElem.innerText || '';
        if (groupImg && innerText) {
            let where = innerText.indexOf('#DNFT') !== -1 && innerText.indexOf('nft_group') !== -1;
            if (where) {
                groupImg.querySelector('.addGroup').src = groupImgSelect;
            } else {
                groupImg.querySelector('.addGroup').src = groupImgNoSelect;
            }
        }
    });
    main_observer.observe(editElem, { attributes: false, childList: true, subtree: true })
}
function _addTweetButtonListen() {
    let btn = document.querySelector('div[data-testid="tweetButton"]');

    btn.removeEventListener('click', _postTweetContent);
    btn.addEventListener('click', _postTweetContent)
}
function _postTweetContent() {
    if (tempNftGroupPost && tempNftGroupPost.groupId) {
        publishNFTTweetPost(tempNftGroupPost)
        bindTwitterArt.needBind = true;
        bindTwitterArt.postId = tempNftGroupPost.postId;
        bindTwitterArtMethod();
        // 非首页处理
        let homeTag = document.querySelectorAll('div[data-testid="toolBar"]');
        if (homeTag.length === 1) {
            jumpTwitterDetailByAlert()
        }
    }
}

/**
 * mask web3 Tab
 * 
 */
 const getMaskWeb3Tab = () => {
    let tab = document.querySelector('div[data-testid="ScrollSnap-nextButtonWrapper"] + span');
    return tab;
}

const getGroupTabNode = () => {
    let tab = document.querySelector('#de-nav-tab-group');
    return tab;
}

const getGroupTabContentNode = () => {
    let content = document.getElementById('de-tab-group-content');
    return content;
}

/**
 * 
 * 获取 twitter tab 下的内容
 */
const getTweetTabContent = () => {
    let tweetTabContent = document.querySelector('[data-testid="primaryColumn"] [role="navigation"] + * > div[aria-label]:not([role="progressbar"])') || document.querySelector('div[data-testid="emptyState"]');
    return tweetTabContent;
}

export const setGroupInfo = (params = {}) => {
    let groupTab = getGroupTabNode();

    if (!params.nftGroupId) {
        let { pathname = '' } = window.location;
        if (pathname == "/compose/tweet") {
            return;
        };
        if (groupTab) {
            groupTab.style.display = 'none';
        } else {
            setTimeout(() => {
                groupTab = getGroupTabNode();
                if (groupTab) {
                    groupTab.style.display = 'none';
                }
            }, 800)
        }
    } else {
        if (groupTab) {
            let { display } = groupTab.style;
            if (display == 'none') {
                groupTab.style.display = 'block';
            }
        }
    }
}

/**
 * 
 * 设置Tab Group Iframe 样式
 */
export const setTabGroupIframeStyle = (params, isReSize = false) => {
    if(!isReSize) {
        getSysTheme();
    }
    let iframeContent = getGroupTabContentNode();
    if (iframeContent) {
        let htmlHeight = document.querySelector('html').offsetHeight;
        let primaryColumnHeightn = document.querySelector('div[data-testid="primaryColumn"]').offsetHeight;
        let height = primaryColumnHeightn > htmlHeight ? primaryColumnHeightn : htmlHeight;
        iframeContent.style.height = height + 'px';
    }
}

export const setGroupTabStatus = () => {
    let groupTab = getGroupTabNode();
    if (groupTab) {
        let line = groupTab.querySelector('#de-tab-line');
        if (line) {
            let { display } = line.style;
            if (display != 'none') {
                groupTab.click();
            }
        }
    } else {
        setTimeout(() => {
            addGroupTab();
        }, 2000)
    }

    clearInterval(fixProfileTabAutoTimer);
    fixProfileTabAutoSwitch();
};

const fixProfileTabAutoSwitch = () => {
    fixProfileTabAutoTimer = setInterval(() => {
        let groupTab = getGroupTabNode();
        let tweetTab = document.querySelector('a[aria-selected="true"]');

        if (groupTab) {
            let line = groupTab.querySelector('#de-tab-line');
            if (line) {
                let { display } = line.style;
                if (display != 'none' && tweetTab) {
                    let groupContent = getGroupTabContentNode();
                    if (groupContent) {
                        let tweetTabContent = getTweetTabContent();
                        let { visibility } = tweetTabContent.style;
                        let { display } = groupContent.style;

                        if (display == 'block' && visibility != 'hidden') {
                            groupTab.click();
                        }
                    }
                }
            }
        }
    }, 1000)
}

const hiddenMaskWeb3Tab = (count) => {
    setTimeout(() => {
        count++;
        if (count < 6) {
            let tab = getMaskWeb3Tab();
            if (tab) {
                tab.style.display = 'none'
            } else {
                hiddenMaskWeb3Tab(count);
            }
        }
    }, 1000);
}

/**
 * 注入 Group List 内容
 */
 const addTabGroupContent = (cb) => {
    let params = {
        windowLocation: window.location
    }
    let iframe = document.createElement('iframe');
    iframe.id = 'de-tab-group-content';
    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 = getGroupTabContentNode();

    let tweetTabContent = getTweetTabContent();
    if (!iframeContent) {
        if (tweetTabContent && tweetTabContent.parentElement) {
            tweetTabContent.parentElement.appendChild(iframe);
            cb && cb();
        }
    }
};

/**
 * 
 * 设置 tab 切换时 tab内容的样式（显示隐藏）
 */
 const setTabContentStyle = (params) => {
    let { tweetTabContentDisply, iframeContentDisplay } = params;
    let tweetTabContent = getTweetTabContent();
    if (tweetTabContent) {
        if (tweetTabContentDisply == 'block') {
            let { visibility } = tweetTabContent.style;
            if (visibility == 'hidden') {
                tweetTabContent.style.visibility = 'visible';
                tweetTabContent.style.height = 'auto';
                tweetTabContent.style.overflow = 'auto';
            }
        } else {
            tweetTabContent.style.visibility = 'hidden';
            tweetTabContent.style.height = '0px';
            tweetTabContent.style.overflow = 'hidden';
            tweetTabContent.style.margin = '0';
        }
    }

    let iframeContent = getGroupTabContentNode();

    if (!iframeContent) {
        addTabGroupContent();
    }
    setTimeout(() => {
        iframeContent = getGroupTabContentNode();
        if (iframeContent) {
            iframeContent.style.display = iframeContentDisplay;
        }
    })
};

/**
 * 切换到 Group tab时 刷新列表
 */
 export const refreshTabGroup = () => {
    chrome.runtime.sendMessage({
        actionType: "CONTENT_REFRESH_TAB_GROUP_LIST",
        data: {}
    }, () => { });
}

/**
 * 
 * tab选中时设置 激活 的字体样式和选中条
 */
 const setTweetActiveTabStyle = (params) => {
    let { color, display } = params || {};
    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;
            }
        }
    }
}

/**
 * 设置 Group Tab 样式 
 * */
export const setGroupTabSelfStyle = (params = {}) => {
    let { groupColor, groupFontWeight, lineDisplay } = params;
    let groupTab = getGroupTabNode();
    if (groupTab) {
        groupTab.style.color = groupColor;
        groupTab.style.fontWeight = groupFontWeight;

        let lineDom = groupTab.querySelector('#de-tab-line');
        if (lineDom) {
            lineDom.style.display = lineDisplay;
        }
    }
};

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'
    });

    sendMessageToGroupBanner({ type: 'arrow' })
};

export const sendMessageToGroupBanner = (params) => {
    chrome.runtime.sendMessage({
        actionType: "SWITCH_GROUP_BANNER_STATUS",
        data: params
    }, (res) => {
        if (!res) {
            Report.reportLog({
                objectType: Report.objectType.chrome_extension_sendmessage_error
            })
        }
    });
}

/**
 * 
 * twitter tab点击事件监听
 */
 const addTweetTabEventListener = (params) => {
    let { tabListDom } = params;
    let groupItemTab = getGroupTabNode();

    if (tabListDom && groupItemTab) {
        // 监听twitter tab点击事件
        let tweetTabItem = tabListDom.querySelectorAll('div[role="presentation"]');
        if (tweetTabItem.length) {
            for (let i = 0; i < tweetTabItem.length; i++) {
                let item = tweetTabItem[i];
                item.addEventListener('click', TweetTabEventHandler)
            }
        }
    }
}

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)
            }
        }
    }
}

const addPageScrollEvent = () => {
    let wrapperDom = document.querySelector('html');
    let contentDom = document.querySelector('main[role="main"]');
    let data = {
        wrapperHeight: wrapperDom.offsetHeight,
        wrapperScrollTop: wrapperDom.scrollTop,
        contentHeight: contentDom.offsetHeight
    }

    chrome.runtime.sendMessage({
        actionType: "CONTENT_GROUP_LIST_SCROLL",
        data: data
    }, () => { });
};

const onShowGroupBanner = () => {
    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
        switch (req.actionType) {
            case 'IFRAME_SHOW_GROUP_TIP':
                sendMessageToGroupBanner({ type: 'btn' })
                if (!getGroupTabNode()) {
                    addGroupTab();
                }
                break
        }
    })
}

/**
 * 
 * Group tab点击事件监听
 */
 const addGroupTabEventListener = () => {
    let groupTab = getGroupTabNode();
    groupTab.addEventListener('click', function () {
        let bgColor = document.querySelector('body').style.backgroundColor;

        let groupColor = systemInfo.theme == 'dark' && bgColor == 'rgb(0, 0, 0)' ? '#fff' : 'rgb(15, 20, 25)';

        // let groupColor = systemInfo.theme == 'light' ? 'rgb(15, 20, 25)' : '#fff';

        setGroupTabSelfStyle({
            groupColor: groupColor,
            groupFontWeight: '700',
            lineDisplay: 'block'
        });

        setTweetActiveTabStyle({
            color: 'rgb(83, 100, 113)',
            display: 'none'
        });

        setTabContentStyle({
            tweetTabContentDisply: 'none',
            iframeContentDisplay: 'block'
        });

        refreshTabGroup();

        window.addEventListener('scroll', addPageScrollEvent);

        let tipsDom = document.querySelector('#denet_group_banner');
        if (tipsDom) {
            sendMessageToGroupBanner({ type: 'btn' })
        } else {
            onShowGroupBanner();
        }
    })
}

/** 选中 Group tab */
export const selectGroupTab = () => {
    let groupTab = getGroupTabNode();
    if (groupTab) {
        groupTab.click();
    }
};


/**
 * 跳转到个人主页 检查是否需要选中 Group tab
 */
const checkNeedSelectGroupTab = () => {
    if (window.location.pathname != '/home') {
        setTimeout(() => {
            getChromeStorage('groupTabData', (res) => {
                console.log('groupTabData', res);
                if (res && res.deTabVal == 'deGroupTab') {
                    chrome.storage.local.remove("groupTabData");
                    setTimeout(() => {
                        selectGroupTab();
                    }, 300)
                }
            })
        }, 1300)
    }
}

export const groupTipsSelectGroupTab = (params = {}) => {
    if (params.type == 'btn') {
        let groupTab = getGroupTabNode();
        if (groupTab) {
            let line = groupTab.querySelector('#de-tab-line');
            if (line) {
                let { display } = line.style;
                if (display == 'none') {
                    groupTab.click();
                }
            }
        }
    } else {
        selectGroupTab();
    }
}

export const addGroupTab = () => {
    if (!document.querySelector('div[data-testid=UserName]')) {
        return
    }
    let tabListDom = document.querySelector('div[role="tablist"]');
    let groupItemTab = getGroupTabNode();

    if (tabListDom && !groupItemTab) {
        let groupTab = createGroupTabNode();

        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);
        }, 1300)

        addGroupTabEventListener();
    }

    removeTweetTabEvent({
        tabListDom
    });

    addTweetTabEventListener({
        tabListDom
    });

    addTabGroupContent(() => {
        checkNeedSelectGroupTab();
    });
}

/**
 * 
 * 创建 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;
}

export const groupBtnStyleChange = () => {
    let tab = getGroupTabNode();
    if (tab) {
        let line = tab.querySelector('#de-tab-line');
        if (line) {
            let { display } = line.style;
            if (display != 'none') {
                sendMessageToGroupBanner({ type: 'btn' })
            }
        }
    }
}