diff --git a/web/app/common/settings.js b/web/app/common/settings.js index 941e0d2e..8cee687c 100644 --- a/web/app/common/settings.js +++ b/web/app/common/settings.js @@ -1,5 +1,3 @@ -/* eslint-disable */ - const querySettings = window.location.search .substr(1) @@ -10,7 +8,7 @@ const querySettings = return acc; }, {}) || {}; -export const siteId = remark_config.site_id; -export const url = remark_config.url; -export const maxShownComments = remark_config.max_shown_comments; +export const siteId = querySettings['site_id']; +export const url = querySettings['url']; +export const maxShownComments = querySettings['max_shown_comments']; export const token = querySettings['token']; diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index 345b628c..be5a4e16 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -120,8 +120,7 @@ export default class Root extends Component { const newWindow = window.open( `${BASE_URL}/auth/${provider}/login?from=${encodeURIComponent( location.origin + location.pathname + '?selfClose' - )}&site=${siteId}`, - '_blank' + )}&site=${siteId}` ); let secondsPass = 0; diff --git a/web/app/embed.js b/web/app/embed.js index ca7ebdb1..9c6b9997 100644 --- a/web/app/embed.js +++ b/web/app/embed.js @@ -1,4 +1,4 @@ -/* eslint-disable */ +/* eslint-disable no-console */ import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants'; if (document.readyState === 'loading') { @@ -33,271 +33,215 @@ 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 = ` -
-
-
-
-
+ `; - const remarkStyles = document.createElement('link'); - remarkStyles.setAttribute('rel', 'stylesheet'); - remarkStyles.setAttribute('href', `${BASE_URL}/web/remark.css`); - document.getElementsByTagName('head')[0].appendChild(remarkStyles); + const iframe = node.getElementsByTagName('iframe')[0]; - const remarkScripts = document.createElement('script'); - remarkScripts.setAttribute('src', `${BASE_URL}/web/remark.js`); - document.getElementsByTagName('head')[0].appendChild(remarkScripts); + window.addEventListener('message', receiveMessages); + window.addEventListener('hashchange', postHashToIframe); + document.addEventListener('click', postClickOutsideToIframe); + setTimeout(postHashToIframe, 1000); - // const iframe = node.getElementsByTagName('iframe')[0]; + 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 = ` +