Skip to content

I
IPC-footer
Commit 5517dd9b authored by Allen Bai's avatar Allen Bai
Browse files
Options

feat: 修改定位方式

parent 3f5da8d9
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 62 deletions
.prettierrc
View file @ 5517dd9b
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"jsxBracketSameLine": true, "jsxBracketSameLine": true,
"arrowParens": "avoid", "arrowParens": "avoid",
"insertPragma": true, "insertPragma": true,
"tabWidth": 4, "tabWidth": 2,
"useTabs": false, "useTabs": false,
"bracketSpacing": true "bracketSpacing": true
} }
\ No newline at end of file
example/inHTML/h5_scroll.html 0 → 100644
View file @ 5517dd9b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>直接用script引入</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: rgb(35, 155, 86);
}
</style>
</head>
<body>
<div style="height: 200vh;border:5px slateblue solid"></div>
<script>
(function (e) {
const IPCFooterConfig = {}
function loadScript() {
var r = document.createElement("script");
(r.async = !0),
(r.src = "../../dist/IPCHelper.main.js"),
(r.crossOrigin = "anonymous"),
(r.onload = function () {
window.__TUIA_IPC_HELPER__ && window.__TUIA_IPC_HELPER__.mountIPCFooter(IPCFooterConfig)
}),
document.body && document.body.appendChild(r);
};
loadScript()
})(window);
</script>
</body>
</html>
example/inHTML/h5_without_scroll.html 0 → 100644
View file @ 5517dd9b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>直接用script引入</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: rgb(35, 155, 86);
}
</style>
</head>
<body>
<script>
(function (e) {
const IPCFooterConfig = {}
function loadScript() {
var r = document.createElement("script");
(r.async = !0),
(r.src = "../../dist/IPCHelper.main.js"),
(r.crossOrigin = "anonymous"),
(r.onload = function () {
window.__TUIA_IPC_HELPER__ && window.__TUIA_IPC_HELPER__.mountIPCFooter(IPCFooterConfig)
}),
document.body && document.body.appendChild(r);
};
loadScript()
})(window);
</script>
</body>
</html>
example/inHTML/index.html
View file @ 5517dd9b
...@@ -3,38 +3,46 @@ ...@@ -3,38 +3,46 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>直接用script引入</title> <title>直接用script引入</title>
<style> <style>
* { * {
margin: 0;
padding: 0; padding: 0;
margin: 0;
}
iframe {
border: 1px solid black;
display: block;
}
.box {
margin: 10px 20px;
}
.phone {
width: 375px;
height: 667px;
} }
html, .desk {
body { width: 1200px;
background-color: rgb(35, 155, 86); height: 600px;
} }
</style> </style>
</head> </head>
<body> <body>
<script> <div style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;padding:30px;">
(function (e) { <div class="box">
const IPCFooterConfig = {} <h5>不带滚动的</h5>
function loadScript() { <iframe class="phone" src="./h5_without_scroll.html" frameborder="0"></iframe>
var r = document.createElement("script"); </div>
(r.async = !0), <div class="box">
(r.src = "../../dist/IPCHelper.main.js"), <h5>带滚动的</h5>
(r.crossOrigin = "anonymous"), <iframe class="phone" src="./h5_scroll.html" frameborder="0"></iframe>
(r.onload = function () { </div>
window.__TUIA_IPC_HELPER__ && window.__TUIA_IPC_HELPER__.mountIPCFooter(IPCFooterConfig) </div>
}),
document.body && document.body.appendChild(r);
};
loadScript()
})(window);
</script>
</body> </body>
</html> </html>
src/index.ts
View file @ 5517dd9b
...@@ -2,59 +2,59 @@ ...@@ -2,59 +2,59 @@
type Optional<T> = { [P in keyof T]?: T[P] } type Optional<T> = { [P in keyof T]?: T[P] }
function getIPCByDomain(domain: string) { function getIPCByDomain(domain: string) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
resolve('1231232123') resolve('1231232123')
}) })
} }
type IPCFooterOptions = { type IPCFooterOptions = {
domain?: string domain?: string
dom?: HTMLElement dom?: HTMLElement
footerStyles?: Optional<CSSStyleDeclaration> footerStyles?: Optional<CSSStyleDeclaration>
boardStyles?: Optional<CSSStyleDeclaration> boardStyles?: Optional<CSSStyleDeclaration>
} }
function addStyles(ele: HTMLElement, styles: Optional<CSSStyleDeclaration> = {}) { function addStyles(ele: HTMLElement, styles: Optional<CSSStyleDeclaration> = {}) {
Object.entries(styles).forEach(([key, val]) => { Object.entries(styles).forEach(([key, val]) => {
ele.style[key] = val ele.style[key] = val
}) })
} }
const defaultFooterStyles: Optional<CSSStyleDeclaration> = { const defaultFooterStyles: Optional<CSSStyleDeclaration> = {
width: '100vw', width: '100vw',
position: 'absolute', position: 'fixed',
left: '0', left: '0',
right: '0', right: '0',
bottom: '0', bottom: '0',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'center'
} }
const defaultBoardStyles: Optional<CSSStyleDeclaration> = { const defaultBoardStyles: Optional<CSSStyleDeclaration> = {
display: 'inline-block', display: 'inline-block',
textDecoration: 'none', textDecoration: 'none',
color: '#FFF', color: '#FFF',
backgroundColor: 'rgba(0,0,0,.4)', backgroundColor: 'rgba(0,0,0,.4)',
margin: '4px auto', margin: '4px auto',
height: '22px', height: '22px',
lineHeight: '22px', lineHeight: '22px',
padding: '0 20px', padding: '0 20px',
borderRadius: '4px', borderRadius: '4px',
fontSize: '12px' fontSize: '12px'
} }
async function mountIPCFooter(opts: IPCFooterOptions) { async function mountIPCFooter(opts: IPCFooterOptions) {
const icpNumber = await getIPCByDomain(opts.domain || location.host) const icpNumber = await getIPCByDomain(opts.domain || location.host)
const IPCFooter = document.createElement('div') const IPCFooter = document.createElement('div')
const IPCBoard = document.createElement('a') const IPCBoard = document.createElement('a')
const targetDom = opts.dom || document.querySelector('body') const targetDom = opts.dom || document.querySelector('body')
IPCFooter.id = '__IPC_footer__' IPCFooter.id = '__IPC_footer__'
IPCBoard.id = '__IPC_board__' IPCBoard.id = '__IPC_board__'
addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) }) addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) })
addStyles(IPCBoard, { ...defaultBoardStyles, ...(opts.footerStyles || {}) }) addStyles(IPCBoard, { ...defaultBoardStyles, ...(opts.footerStyles || {}) })
IPCBoard.innerText = `浙ICP备${icpNumber}号` IPCBoard.innerText = `浙ICP备${icpNumber}号`
IPCFooter.appendChild(IPCBoard) IPCFooter.appendChild(IPCBoard)
targetDom.appendChild(IPCFooter) targetDom.appendChild(IPCFooter)
} }
export default { getIPCByDomain, mountIPCFooter } export default { getIPCByDomain, mountIPCFooter }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment