first steps to removing iframe
This commit is contained in:
igoradamenko
+259
-203
@@ -1,4 +1,4 @@
|
||||
/* eslint-disable no-console */
|
||||
/* eslint-disable */
|
||||
import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants';
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
@@ -33,215 +33,271 @@ function init() {
|
||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(remark_config[key])}`)
|
||||
.join('&');
|
||||
|
||||
const styles = document.createElement('style');
|
||||
styles.innerHTML = `
|
||||
#${NODE_ID} .preloader {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#${NODE_ID} .preloader_view_init {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#${NODE_ID} .preloader__bounce {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 3px;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
animation: remark42preloaderBounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
#${NODE_ID} .preloader__bounce:first-child {
|
||||
animation-delay: -.32s;
|
||||
}
|
||||
|
||||
#${NODE_ID} .preloader__bounce:nth-child(2) {
|
||||
animation-delay: -.16s;
|
||||
}
|
||||
|
||||
#${NODE_ID} .preloader__bounce:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@keyframes remark42preloaderBounce {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
#${NODE_ID} :focus:not(.focus-visible):not(.button) {
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
document.getElementsByTagName('head')[0].appendChild(styles);
|
||||
|
||||
node.innerHTML = `
|
||||
<iframe
|
||||
src="${BASE_URL}/web/iframe.html?${query}"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
allowtransparency="true"
|
||||
scrolling="no"
|
||||
tabindex="0"
|
||||
title="Remark42"
|
||||
style="width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
|
||||
horizontalscrolling="no"
|
||||
verticalscrolling="no"
|
||||
></iframe>
|
||||
<div class="preloader preloader_view_init">
|
||||
<div class="preloader__bounce"></div>
|
||||
<div class="preloader__bounce"></div>
|
||||
<div class="preloader__bounce"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const iframe = node.getElementsByTagName('iframe')[0];
|
||||
const remarkStyles = document.createElement('link');
|
||||
remarkStyles.setAttribute('rel', 'stylesheet');
|
||||
remarkStyles.setAttribute('href', `${BASE_URL}/web/remark.css`);
|
||||
document.getElementsByTagName('head')[0].appendChild(remarkStyles);
|
||||
|
||||
window.addEventListener('message', receiveMessages);
|
||||
window.addEventListener('hashchange', postHashToIframe);
|
||||
document.addEventListener('click', postClickOutsideToIframe);
|
||||
setTimeout(postHashToIframe, 1000);
|
||||
const remarkScripts = document.createElement('script');
|
||||
remarkScripts.setAttribute('src', `${BASE_URL}/web/remark.js`);
|
||||
document.getElementsByTagName('head')[0].appendChild(remarkScripts);
|
||||
|
||||
const remarkRootId = 'remark-km423lmfdslkm34';
|
||||
const userInfo = {
|
||||
node: null,
|
||||
back: null,
|
||||
closeEl: null,
|
||||
iframe: null,
|
||||
style: null,
|
||||
init(user) {
|
||||
this.animationStop();
|
||||
if (!this.style) {
|
||||
this.style = document.createElement('style');
|
||||
this.style.setAttribute('rel', 'stylesheet');
|
||||
this.style.setAttribute('type', 'text/css');
|
||||
this.style.innerHTML = `
|
||||
#${remarkRootId}-node {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
transition: transform 0.4s ease-out;
|
||||
max-width: 100%;
|
||||
transform: translate(400px, 0);
|
||||
}
|
||||
#${remarkRootId}-node[data-animation] {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
#${remarkRootId}-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-out;
|
||||
}
|
||||
#${remarkRootId}-back[data-animation] {
|
||||
opacity: 1;
|
||||
}
|
||||
#${remarkRootId}-close {
|
||||
top: 0px;
|
||||
right: 400px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
margin-right: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
@media all and (max-width: 430px) {
|
||||
#${remarkRootId}-close {
|
||||
right: 0px;
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
if (!this.node) {
|
||||
this.node = document.createElement('div');
|
||||
this.node.id = remarkRootId + '-node';
|
||||
}
|
||||
if (!this.back) {
|
||||
this.back = document.createElement('div');
|
||||
this.back.id = remarkRootId + '-back';
|
||||
this.back.onclick = () => this.close();
|
||||
}
|
||||
if (!this.closeEl) {
|
||||
this.closeEl = document.createElement('button');
|
||||
this.closeEl.id = remarkRootId + '-close';
|
||||
this.closeEl.innerHTML = '✖';
|
||||
this.closeEl.onclick = () => this.close();
|
||||
}
|
||||
const queryUserInfo =
|
||||
query +
|
||||
'&page=user-info&' +
|
||||
`&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`;
|
||||
this.node.innerHTML = `
|
||||
<iframe
|
||||
src="${BASE_URL}/web/iframe.html?${queryUserInfo}"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
allowtransparency="true"
|
||||
scrolling="no"
|
||||
tabindex="0"
|
||||
title="Remark42"
|
||||
verticalscrolling="no"
|
||||
horizontalscrolling="no"
|
||||
/>`;
|
||||
this.iframe = this.node.querySelector('iframe');
|
||||
this.node.appendChild(this.closeEl);
|
||||
document.body.appendChild(this.style);
|
||||
document.body.appendChild(this.back);
|
||||
document.body.appendChild(this.node);
|
||||
document.addEventListener('keydown', this.onKeyDown);
|
||||
setTimeout(() => {
|
||||
this.back.setAttribute('data-animation', '');
|
||||
this.node.setAttribute('data-animation', '');
|
||||
this.iframe.focus();
|
||||
}, 400);
|
||||
},
|
||||
close() {
|
||||
if (this.node) {
|
||||
this.onAnimationClose();
|
||||
this.node.removeAttribute('data-animation');
|
||||
}
|
||||
if (this.back) {
|
||||
this.back.removeAttribute('data-animation');
|
||||
}
|
||||
document.removeEventListener('keydown', this.onKeyDown);
|
||||
},
|
||||
delay: null,
|
||||
events: ['', 'webkit', 'moz', 'MS', 'o'].map(prefix => (prefix ? `${prefix}TransitionEnd` : 'transitionend')),
|
||||
onAnimationClose() {
|
||||
const el = this.node;
|
||||
if (!this.node) {
|
||||
return;
|
||||
}
|
||||
this.delay = setTimeout(this.animationStop, 1000);
|
||||
this.events.forEach(event => el.addEventListener(event, this.animationStop, false));
|
||||
},
|
||||
onKeyDown(e) {
|
||||
// ESCAPE key pressed
|
||||
if (e.keyCode == 27) {
|
||||
userInfo.close();
|
||||
}
|
||||
},
|
||||
animationStop() {
|
||||
const t = userInfo;
|
||||
if (!t.node) {
|
||||
return;
|
||||
}
|
||||
if (t.delay) {
|
||||
clearTimeout(t.delay);
|
||||
t.delay = null;
|
||||
}
|
||||
t.events.forEach(event => t.node.removeEventListener(event, t.animationStop, false));
|
||||
return t.remove();
|
||||
},
|
||||
remove() {
|
||||
const t = userInfo;
|
||||
t.node && t.node.remove();
|
||||
t.back && t.back.remove();
|
||||
t.style && t.style.remove();
|
||||
},
|
||||
};
|
||||
// const iframe = node.getElementsByTagName('iframe')[0];
|
||||
|
||||
function receiveMessages(event) {
|
||||
try {
|
||||
const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
|
||||
if (data.remarkIframeHeight) {
|
||||
iframe.style.height = `${data.remarkIframeHeight}px`;
|
||||
}
|
||||
// window.addEventListener('message', receiveMessages);
|
||||
// window.addEventListener('hashchange', postHashToIframe);
|
||||
// document.addEventListener('click', postClickOutsideToIframe);
|
||||
// setTimeout(postHashToIframe, 1000);
|
||||
|
||||
if (data.scrollTo) {
|
||||
window.scrollTo(window.pageXOffset, data.scrollTo + iframe.getBoundingClientRect().top + window.pageYOffset);
|
||||
}
|
||||
// const remarkRootId = 'remark-km423lmfdslkm34';
|
||||
// const userInfo = {
|
||||
// node: null,
|
||||
// back: null,
|
||||
// closeEl: null,
|
||||
// iframe: null,
|
||||
// style: null,
|
||||
// init(user) {
|
||||
// this.animationStop();
|
||||
// if (!this.style) {
|
||||
// this.style = document.createElement('style');
|
||||
// this.style.setAttribute('rel', 'stylesheet');
|
||||
// this.style.setAttribute('type', 'text/css');
|
||||
// this.style.innerHTML = `
|
||||
// #${remarkRootId}-node {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// width: 400px;
|
||||
// transition: transform 0.4s ease-out;
|
||||
// max-width: 100%;
|
||||
// transform: translate(400px, 0);
|
||||
// }
|
||||
// #${remarkRootId}-node[data-animation] {
|
||||
// transform: translate(0, 0);
|
||||
// }
|
||||
// #${remarkRootId}-back {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// background: rgba(0,0,0,0.7);
|
||||
// opacity: 0;
|
||||
// transition: opacity 0.4s ease-out;
|
||||
// }
|
||||
// #${remarkRootId}-back[data-animation] {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// #${remarkRootId}-close {
|
||||
// top: 0px;
|
||||
// right: 400px;
|
||||
// position: absolute;
|
||||
// text-align: center;
|
||||
// font-size: 25px;
|
||||
// cursor: pointer;
|
||||
// color: white;
|
||||
// border-color: transparent;
|
||||
// border-width: 0;
|
||||
// padding: 0;
|
||||
// margin-right: 4px;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// @media all and (max-width: 430px) {
|
||||
// #${remarkRootId}-close {
|
||||
// right: 0px;
|
||||
// font-size: 20px;
|
||||
// color: black;
|
||||
// }
|
||||
// }
|
||||
// `;
|
||||
// }
|
||||
// if (!this.node) {
|
||||
// this.node = document.createElement('div');
|
||||
// this.node.id = remarkRootId + '-node';
|
||||
// }
|
||||
// if (!this.back) {
|
||||
// this.back = document.createElement('div');
|
||||
// this.back.id = remarkRootId + '-back';
|
||||
// this.back.onclick = () => this.close();
|
||||
// }
|
||||
// if (!this.closeEl) {
|
||||
// this.closeEl = document.createElement('button');
|
||||
// this.closeEl.id = remarkRootId + '-close';
|
||||
// this.closeEl.innerHTML = '✖';
|
||||
// this.closeEl.onclick = () => this.close();
|
||||
// }
|
||||
// const queryUserInfo =
|
||||
// query +
|
||||
// '&page=user-info&' +
|
||||
// `&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`;
|
||||
// this.node.innerHTML = `
|
||||
// <iframe
|
||||
// src="${BASE_URL}/web/iframe.html?${queryUserInfo}"
|
||||
// width="100%"
|
||||
// height="100%"
|
||||
// frameborder="0"
|
||||
// allowtransparency="true"
|
||||
// scrolling="no"
|
||||
// tabindex="0"
|
||||
// title="Remark42"
|
||||
// verticalscrolling="no"
|
||||
// horizontalscrolling="no"
|
||||
// />`;
|
||||
// this.iframe = this.node.querySelector('iframe');
|
||||
// this.node.appendChild(this.closeEl);
|
||||
// document.body.appendChild(this.style);
|
||||
// document.body.appendChild(this.back);
|
||||
// document.body.appendChild(this.node);
|
||||
// document.addEventListener('keydown', this.onKeyDown);
|
||||
// setTimeout(() => {
|
||||
// this.back.setAttribute('data-animation', '');
|
||||
// this.node.setAttribute('data-animation', '');
|
||||
// this.iframe.focus();
|
||||
// }, 400);
|
||||
// },
|
||||
// close() {
|
||||
// if (this.node) {
|
||||
// this.onAnimationClose();
|
||||
// this.node.removeAttribute('data-animation');
|
||||
// }
|
||||
// if (this.back) {
|
||||
// this.back.removeAttribute('data-animation');
|
||||
// }
|
||||
// document.removeEventListener('keydown', this.onKeyDown);
|
||||
// },
|
||||
// delay: null,
|
||||
// events: ['', 'webkit', 'moz', 'MS', 'o'].map(prefix => (prefix ? `${prefix}TransitionEnd` : 'transitionend')),
|
||||
// onAnimationClose() {
|
||||
// const el = this.node;
|
||||
// if (!this.node) {
|
||||
// return;
|
||||
// }
|
||||
// this.delay = setTimeout(this.animationStop, 1000);
|
||||
// this.events.forEach(event => el.addEventListener(event, this.animationStop, false));
|
||||
// },
|
||||
// onKeyDown(e) {
|
||||
// // ESCAPE key pressed
|
||||
// if (e.keyCode == 27) {
|
||||
// userInfo.close();
|
||||
// }
|
||||
// },
|
||||
// animationStop() {
|
||||
// const t = userInfo;
|
||||
// if (!t.node) {
|
||||
// return;
|
||||
// }
|
||||
// if (t.delay) {
|
||||
// clearTimeout(t.delay);
|
||||
// t.delay = null;
|
||||
// }
|
||||
// t.events.forEach(event => t.node.removeEventListener(event, t.animationStop, false));
|
||||
// return t.remove();
|
||||
// },
|
||||
// remove() {
|
||||
// const t = userInfo;
|
||||
// t.node && t.node.remove();
|
||||
// t.back && t.back.remove();
|
||||
// t.style && t.style.remove();
|
||||
// },
|
||||
// };
|
||||
|
||||
if (data.hasOwnProperty('isUserInfoShown')) {
|
||||
if (data.isUserInfoShown) {
|
||||
userInfo.init(data.user || {});
|
||||
} else {
|
||||
userInfo.close();
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
// function receiveMessages(event) {
|
||||
// try {
|
||||
// const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
|
||||
// if (data.remarkIframeHeight) {
|
||||
// iframe.style.height = `${data.remarkIframeHeight}px`;
|
||||
// }
|
||||
//
|
||||
// if (data.scrollTo) {
|
||||
// window.scrollTo(window.pageXOffset, data.scrollTo + iframe.getBoundingClientRect().top + window.pageYOffset);
|
||||
// }
|
||||
//
|
||||
// if (data.hasOwnProperty('isUserInfoShown')) {
|
||||
// if (data.isUserInfoShown) {
|
||||
// userInfo.init(data.user || {});
|
||||
// } else {
|
||||
// userInfo.close();
|
||||
// }
|
||||
// }
|
||||
// } catch (e) {}
|
||||
// }
|
||||
|
||||
function postHashToIframe(e) {
|
||||
const hash = e ? `#${e.newURL.split('#')[1]}` : window.location.hash;
|
||||
|
||||
if (hash.indexOf(`#${COMMENT_NODE_CLASSNAME_PREFIX}`) === 0) {
|
||||
if (e) e.preventDefault();
|
||||
|
||||
iframe.contentWindow.postMessage(JSON.stringify({ hash }), '*');
|
||||
}
|
||||
}
|
||||
|
||||
function postClickOutsideToIframe(e) {
|
||||
if (!iframe.contains(e.target)) {
|
||||
iframe.contentWindow.postMessage(JSON.stringify({ clickOutside: true }), '*');
|
||||
}
|
||||
}
|
||||
// function postHashToIframe(e) {
|
||||
// const hash = e ? `#${e.newURL.split('#')[1]}` : window.location.hash;
|
||||
//
|
||||
// if (hash.indexOf(`#${COMMENT_NODE_CLASSNAME_PREFIX}`) === 0) {
|
||||
// if (e) e.preventDefault();
|
||||
//
|
||||
// iframe.contentWindow.postMessage(JSON.stringify({ hash }), '*');
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// function postClickOutsideToIframe(e) {
|
||||
// if (!iframe.contains(e.target)) {
|
||||
// iframe.contentWindow.postMessage(JSON.stringify({ clickOutside: true }), '*');
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user