diff --git a/src/css/main.css b/src/css/main.css index daa51af..0a047a1 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,3 +1,22 @@ +blockquote { + background: #f9f9f9; + border-left: 6px solid #ccc; + + margin: 1.5em 10px; + padding: 0.5em 10px; +} + +blockquote cite { + color: #6bbbdb; + font-weight: 500; + font-style: normal; +} + +blockquote * { + display: inline; + color: #aaa; +} + div#artitalk_main { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } @@ -467,8 +486,31 @@ div#artitalk_main { vertical-align: middle; } #artitalk_main span.cbp_tmlabel>p { + display: flex; + flex-wrap: wrap; + overflow: unset; } + +@media screen and (max-width: 768px) { + #artitalk_main span.cbp_tmlabel>p { + flex-direction: row-reverse; + } +} + +@media screen and (min-width: 768px) { + #artitalk_main span.cbp_tmlabel>p { + flex-direction: row; + align-items: flex-end; + } + + #artitalk_main span.cbp_tmlabel > p.shuoshuo_time .label_attachment { + flex-grow: 1; + flex-basis: 3%; + text-align: right; + } +} + #artitalk_main ul#maina>li { list-style: none; } diff --git a/src/main.js b/src/main.js index 5a49fbd..b68b388 100644 --- a/src/main.js +++ b/src/main.js @@ -246,6 +246,14 @@ function preview() { let clickPre = document.getElementById('clickForPreview'); clickPre.click(); } + +/// This function is used to find the closest ancestor of `element` with `selector`. +/// It is similar to `Element.closest()`. However, only major browsers support this. +function findAncestor(element, selector) { + while ((element = element.parentElement) && !((element.matches || element.matchesSelector).call(element,selector))); + return element; +} + function Artitalk(options) { return new atEvery(options); } @@ -309,6 +317,7 @@ atEvery.prototype._init = function () { color2, color3, blackAndWhiteTheme, + ascendingComments, onLogin, onShuoPublished, onCommentsPublished, @@ -480,12 +489,11 @@ atEvery.prototype._init = function () { color2 = typeof (color2) === "undefined" || color2 === '' ? "#9BCD9B" : color2; color3 = typeof (color3) === "undefined" || color3 === '' ? "white" : color3; pageSize = typeof (pageSize) === "undefined" ? '5' : pageSize; - blackAndWhiteTheme = typeof (blackAndWhiteTheme) === "undefined" || blackAndWhiteTheme === '' ? false : blackAndWhiteTheme; - onLogin = typeof (onLogin) === "function" ? onLogin : function () { }; - onShuoPublished = typeof (onShuoPublished) === "function" ? onShuoPublished : function () { }; - onCommentsPublished = typeof (onCommentsPublished) === "function" ? onCommentsPublished : function () { }; - + ascendingComments = typeof (ascendingComments) === "undefined" || ascendingComments === '' ? false : ascendingComments; + onLogin = typeof (onLogin) === "function" ? onLogin : function () { }; + onShuoPublished = typeof (onShuoPublished) === "function" ? onShuoPublished : function () { }; + onCommentsPublished = typeof (onCommentsPublished) === "function" ? onCommentsPublished : function () { }; let apiUrl = ""; try { if (serverURL !== '') { @@ -565,22 +573,19 @@ atEvery.prototype._init = function () { } //Insert css let atCss = ""; - // If the black and white theme is enabled while the cssUrl is not defined, its style will be loaded after // the default atStyle, which makes it possible to preserve original settings. // If the black and white theme is enabled yet the cssUrl is set, its style will be loaded before // the customized style, ensuring the user defined style will be accepted. const blackAndWhiteStyle = `#artitalk_main{margin-top:5vh}#artitalk_main .cbp_tmtimeline>li .cbp_tmlabel{font-size:large;font-weight:400;color:#3d3d3d;background:#fff!important;box-shadow:0 1px 12px rgb(0 0 0 / 30%);border-radius:12px}#artitalk_main p.shuoshuo_time{font-size:small;border-top:1px dashed}p.shuoshuo_time span:first-child{font-size:medium}p.shuoshuo_time span:nth-child(3)>span>span{vertical-align:inherit;color:#3d3d3d!important}#artitalk_main .cbp_tmtimeline>li .cbp_tmlabel:after,#artitalk_main span.cbp_tmlabel>p:nth-child(4){display:none}#artitalk_main span.cbp_tmlabel>p{margin-bottom:5px}#artitalk_main .delete_right{right:2rem}#artitalk_main .shuoshuo_author_img img{border:none;box-shadow:0 0 6px rgb(0 0 0 / 30%)}#artitalk_main svg{width:1.5rem;height:1.5rem}#artitalk_main svg>path{fill:#3d3d3d}#artitalk_main .shuoshuo_text{background-image:url(https://leolovedairy.life/images/kanwo.png)!important;background-repeat:no-repeat;background-size:contain;color:#3d3d3d;box-shadow:0 0 12px rgb(0 0 0 / 30%);border:none;font-size:large;border-radius:12px}#artitalk_main .shuoshuo_inputs{color:#3d3d3d;box-shadow:0 0 12px rgb(0 0 0 / 30%);border:none;font-size:medium;border-radius:8px}#artitalk_main .at_button,#operare_artitalk .at_button{background-color:#fff;border:none;color:#3d3d3d;font-size:medium;font-weight:500;border-radius:8px;outline:0;box-shadow:0 0 8px rgb(0 0 0 / 30%)}#artitalk_main .at_button:hover,#operare_artitalk .at_button:hover{background-color:#fff}#artitalk_main .shuoshuo_emoji{border:none;padding:1rem;border-radius:12px 12px 0 0;box-shadow:0 -2px 4px rgb(0 0 0 / 30%);margin-top:2rem}#artitalk_main div#shuoshuo_emojiswitch{border:none;box-shadow:0 0 4px rgb(0 0 0 / 30%);border-radius:0 0 12px 12px}#artitalk_main .shuoshuo_emoji_part{font-size:medium;border-radius:inherit}#artitalk_main .shuoshuo_emoji_part:hover{background-color:#3d3d3daa}#artitalk_main .zuiliangdezai{background-color:#3d3d3d}#artitalk_main .shuoshuo_row{margin-top:2rem}#artitalk_main #preview{font-size:large;margin:2rem 0;padding:1rem 2rem;border-radius:12px;box-shadow:0 0 16px rgb(0 0 0 / 30%)}#artitalk_main .power a{font-size:1.5rem;font-weight:500;color:#3d3d3d;margin-left:.5rem}#artitalk_main .power>div{margin:0 .5rem;width:4rem;height:4rem;padding:8px;background-size:80%;background-repeat:no-repeat;background-position:center}#artitalk_main .power>div>svg{opacity:0}#pubComment,#pubShuo{background-image:url("https://leolovedairy.life/images/icon_write.svg")}#switchUser{background-image:url("https://leolovedairy.life/images/icon_smile.svg")}#uploadSource{background-image:url("https://leolovedairy.life/images/icon_upload.svg")}#operare_artitalk .c2{opacity:1}`; - if (!document.getElementById('add-Artitalk_Style')) { if (cssUrl === "" || typeof (cssUrl) === "undefined") { - atCss = "div#artitalk_main { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } #artitalk_main .shuoshuo_row { width: 100%; margin-top: 10px; display: flex; } #artitalk_main .artitalk_child { width: 100%; } #artitalk_main #shuoshuo_content { padding: 10px; /* min-height: 500px; */ } #artitalk_main body.theme-dark .cbp_tmtimeline::before { background: RGBA(255, 255, 255, 0.06); } #artitalk_main ul.cbp_tmtimeline { padding: 0; } #artitalk_main .cbp_tmtimeline { margin: 30px 0 0 0; padding: 0; list-style: none; display: inline; position: relative; } #artitalk_main .cbp_tmtimeline>li .cbp_tmtime { display: block; /* width: 29%; */ /* padding-right: 110px; */ max-width: 70px; position: absolute; } #artitalk_main .cbp_tmtimeline>li .cbp_tmtime span { display: block; text-align: right; } #artitalk_main .cbp_tmtimeline>li .cbp_tmtime span:first-child { font-size: 0.9em; color: #bdd0db; } #artitalk_main .cbp_tmtimeline>li .cbp_tmtime span:last-child { font-size: 1.2em; color: #9bcd9b; } #artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child { color: RGBA(255, 125, 73, 0.75); } #artitalk_main div.cbp_tmlabel>p { margin-bottom: 0; } #artitalk_main div class.cdp_tmlabel>li .cbp_tmlabel { margin-bottom: 0; } #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel { margin: 0 0 45px 65px; z-index: 1; background: " + color2 + "; color: " + color3 + " ; padding: 0.8em 1.2em 0.4em 1.2em; /* font-size: 1.2em; */ font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px; transition: all 0.3s ease 0s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); display: block; } #artitalk_main .cbp_tmlabel:hover { /* transform: scale(1.05); */ transform: translateY(-3px); z-index: 1; box-shadow: 0 15px 32px rgba(0,0,0,0.15) ; } #artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel { background: " + color1 + "; } #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel:after { right: 100%; border: solid transparent; z-index: -1; content: \" \"; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: " + color2 + "; border-width: 10px; top: 4px; } #artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after { border-right-color: " + color1 + "; } #artitalk_main p.shuoshuo_time { margin-top: 10px; border-top: 1px dashed #fff; padding-top: 5px; font-size: 12px; } @media screen and (max-width: 65.375em) { #artitalk_main .cbp_tmtimeline>li .cbp_tmtime span:last-child { font-size: 1.2em; } } #artitalk_main .shuoshuo_author_img img { border: 1px solid #ddd; padding: 2px; float: left; border-radius: 64px; transition: all 1s; } #artitalk_main .artitalk_avatar { border-radius: 100% ; -moz-border-radius: 100% ; box-shadow: inset 0 -1px 0 3333sf; -webkit-box-shadow: inset 0 -1px 0 3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } #artitalk_main .artitalk_avatar:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } #artitalk_main .shuoshuo_text { width: 100%; height: 130px; padding: 8px 16px; background-repeat: no-repeat; background-position: right; transition: all 0.35s ease-in-out 0s; outline-style: none; border: 1px solid #ccc; border-radius: 6px; resize: none; background-color: transparent; color: #999; } #artitalk_main .shuoshuo_inputs { outline-style: none; border: 1px solid #ccc; padding: 8px 16px; width: 40%; font-size: 12px; background-color: transparent; color: #999; } #operare_artitalk .at_button, #artitalk_main .at_button { background-color: " + color1 + "; /* Green */ border: none; margin-left: 5px; color: " + color3 + "; padding: 8px 16px; text-align: center; text-decoration: none; height: auto; line-height: 20px; display: inline-block; font-size: 12px; border-radius: 12px; /* circle */ outline: none; cursor: pointer; } #operare_artitalk .at_button:hover, #artitalk_main .at_button:hover { background-color: " + color2 + "; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.24), 0 8px 16px 0 rgba(0,0,0,0.19); } #artitalk_main #article-container ul p { margin: 0 0 1rem; } #artitalk_main .power { text-align: right; color: #999; margin-top: 10px; font-size: 0.75em; padding: 0.5em 0; } #artitalk_main .power a { font-size: 0.75em; position: relative; cursor: pointer; color: #1abc9c; text-decoration: none; display: inline-block; } #artitalk_main .shuoshuo_row .col.col-80 { width: 80%; float: left; } #artitalk_main .shuoshuo_row .col.col-20 { width: 20%; float: right; text-align: right; } #artitalk_main #preview { width: 100%; float: left; margin: 0.5rem 0 0; padding: 7px; box-shadow: 0 0 1px #f0f0f0; } #artitalk_main #lazy { background: #fff; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; } #artitalk_main .preloader { position: absolute; margin-left: -55px; margin-top: -100px; height: 110px; width: 110px; left: 50%; top: 50%; } #artitalk_main .preloader>svg>g>path { stroke: #9ea1a4; stroke-width: 0.25; } #artitalk_main .preloader>svg>path { stroke: #9ea1a4; stroke-width: 0.25; } #artitalk_main #cloud { position: relative; z-index: 2; } #artitalk_main #cloud path { fill: #efefef; } #artitalk_main #sun { margin-left: -10px; margin-top: 6px; opacity: 0; width: 60px; height: 60px; position: absolute; left: 45px; top: 15px; z-index: 1; animation-name: rotate; animation-duration: 16000ms; animation-iteration-count: infinite; animation-timing-function: linear; } #artitalk_main #sun path { stroke-width: 0.18; fill: #9ea1a4; } #artitalk_main .rain { position: absolute; width: 70px; height: 70px; margin-top: -32px; margin-left: 19px; } #artitalk_main .drop { opacity: 1; background: #9ea1a4; display: block; float: left; width: 3px; height: 10px; margin-left: 4px; border-radius: 0px 0px 6px 6px; animation-name: drop; animation-duration: 350ms; animation-iteration-count: infinite; } #artitalk_main .drop:nth-child(1) { animation-delay: -130ms; } #artitalk_main .drop:nth-child(2) { animation-delay: -240ms; } #artitalk_main .drop:nth-child(3) { animation-delay: -390ms; } #artitalk_main .drop:nth-child(4) { animation-delay: -525ms; } #artitalk_main .drop:nth-child(5) { animation-delay: -640ms; } #artitalk_main .drop:nth-child(6) { animation-delay: -790ms; } #artitalk_main .drop:nth-child(7) { animation-delay: -900ms; } #artitalk_main .drop:nth-child(8) { animation-delay: -1050ms; } #artitalk_main .drop:nth-child(9) { animation-delay: -1130ms; } #artitalk_main .drop:nth-child(10) { animation-delay: -1300ms; } #artitalk_main .artitalk_loading_text { font-family: Helvetica, \" Helvetica Neue \", sans-serif; letter-spacing: 1px; text-align: center; margin-left: -43px; font-weight: bold; margin-top: 20px; font-size: 11px; color: #a0a0a0; width: 200px; } #artitalk_main .shuoshuoimg { cursor: pointer; transition: all 1s; z-index: 2; } #artitalk_main .shuoshuoimg:hover { transform: scale(3.5); } #artitalk_main .hide, #operare_artitalk .hide { display: none; } #operare_artitalk .c1 { position: fixed; top: 0; bottom: 0; left: 0;right: 0; background: rgba(0,0,0,0.5); z-index: 2; } #operare_artitalk .c2 { background-color: #fff; position: fixed; width: 400px; height: auto; top: 50%; left: 50%; z-index: 3; margin-top: -150px; margin-left: -200px; box-shadow: 0 15px 35px rgba(50,50,93,0.1), 0 5px 15px rgba(0,0,0,0.07); opacity: 0.85; border: 0; border-radius: 10px; } #operare_artitalk .shuoshuo_input_log { outline-style: none; margin-top: 10px; border: 1px solid #ccc; border-radius: 6px; padding: 8px 16px; font-size: 12px; background-color: transparent; color: #999; } #artitalk_main .delete_right { cursor: pointer; width: 12px; height: 12px; position: absolute; right: 12px; } #artitalk_main svg { display: inline; } #artitalk_main .cbp_tmlabel>p, #artitalk_main h1, #artitalk_main h2, #artitalk_main h3, #artitalk_main h4, #artitalk_main h5, #artitalk_main h6, #artitalk_main em { word-wrap: break-word; word-break: break-all; } #artitalk_main .shuoshuo_emoji { border: 1px solid #ccc; border-radius: 6px 6px 0 0; height: 120px; overflow: auto; margin-top: 10px; border-bottom: none; } #artitalk_main .atemoji { max-height: 28px; width: 28px; display: inline; vertical-align: middle; } #artitalk_main .shuoshuo_emoji>.atemoji { cursor: pointer; margin: 0 0 0 10px; display: inline; } #artitalk_main i>.atemoji { cursor: pointer; margin: 0 0 0 10px; } #artitalk_main .shuoshuo_emoji>a { display: inline; } #artitalk_main #preview>p>.atemoji { display: inline; } #artitalk_main .shuoshuo_emoji>.atemoji:hover { transform: scale(1.5); } #artitalk_main div#shuoshuo_emojiswitch { height: 40px; width: auto; border-radius: 0 0 6px 6px; border-collapse: collapse; border: 1px solid #ccc; border-top: none; } #artitalk_main .shuoshuo_emoji_part { width: 25%; cursor: pointer; align-content: center; text-align: center; line-height: 40px; } #artitalk_main .shuoshuo_emoji_part:hover { background-color: #ccc; color: #fff; } #artitalk_main .zuiliangdezai { background-color: #ccc; color: #fff; } #artitalk_main .pingjun { display: flex; } #artitalk_main #article-container img { margin: 0 0 0 0; } #artitalk_main .preview_now { display: none; } #artitalk_main div#loading_txt { font-size: 20px; } #artitalk_main audio { display: block; width: 100%; outline: none; opacity: 0.8; } #artitalk_main video { z-index: 0; }p.shuoshuo_time>span>a:hover {color: red;}p.shuoshuo_time>span>a {color: black;text-decoration: none;} #artitalk_main textarea#neirong:focus { background-position-y: 150px; transition: all 0.35s ease-in-out 0s; } #artitalk_main img.atemoji { max-height: 28px; width: 28px; display: inline; vertical-align: middle; } #artitalk_main span.cbp_tmlabel>p { overflow: unset; } #artitalk_main ul#maina>li { list-style: none; } #artitalk_main div#artitalk_main { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } #artitalk_main .c2>center>p { margin-top: 10px; margin-bottom: 10px; } @-moz-keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @-webkit-keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @-o-keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @-moz-keyframes drop { 50% { height: 45px; opacity: 0; } 51% { opacity: 0; } 100% { height: 1px; opacity: 0; } } @-webkit-keyframes drop { 50% { height: 45px; opacity: 0; } 51% { opacity: 0; } 100% { height: 1px; opacity: 0; } } @-o-keyframes drop { 50% { height: 45px; opacity: 0; } 51% { opacity: 0; } 100% { height: 1px; opacity: 0; } } @keyframes drop { 50% { height: 45px; opacity: 0; } 51% { opacity: 0; } 100% { height: 1px; opacity: 0; } }"; + atCss = "#artitalk_main .shuoshuo_inputs,#artitalk_main .shuoshuo_text{outline-style:none;background-color:transparent;color:#999;padding:8px 16px}blockquote{background:#f9f9f9;border-left:6px solid #ccc;margin:1.5em 10px;padding:.5em 10px}blockquote cite{color:#6bbbdb;font-weight:500;font-style:normal}blockquote *{display:inline;color:#aaa}#artitalk_main div#artitalk_main,div#artitalk_main{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}#artitalk_main .shuoshuo_row{width:100%;margin-top:10px;display:flex}#artitalk_main .artitalk_child{width:100%}#artitalk_main #shuoshuo_content{padding:10px}#artitalk_main body.theme-dark .cbp_tmtimeline: : before{background:RGBA(255,255,255,.06)}#artitalk_main ul.cbp_tmtimeline{padding:0}#artitalk_main .cbp_tmtimeline{margin:30px 0 0;padding:0;list-style:none;display:inline;position:relative}#artitalk_main .cbp_tmtimeline>li .cbp_tmtime{display:block;max-width:70px;position:absolute}#artitalk_main .cbp_tmtimeline>li .cbp_tmtime span{display:block;text-align:right}#artitalk_main .cbp_tmtimeline>li .cbp_tmtime span: first-child{font-size:.9em;color:#bdd0db}#artitalk_main .cbp_tmtimeline>li .cbp_tmtime span: last-child{font-size:1.2em;color:#9bcd9b}#artitalk_main .cbp_tmtimeline>li: nth-child(odd) .cbp_tmtime span: last-child{color:RGBA(255,125,73,.75)}#artitalk_main div class.cdp_tmlabel>li .cbp_tmlabel,#artitalk_main div.cbp_tmlabel>p{margin-bottom:0}#artitalk_main .cbp_tmtimeline>li .cbp_tmlabel{margin:0 0 45px 65px;z-index:1;color:" + color3 + ";padding:.8em 1.2em .4em;font-weight:300;line-height:1.4;position:relative;border-radius:5px;transition:.3s;box-shadow:0 1px 2px rgba(0,0,0,.15);display:block}#artitalk_main .cbp_tmlabel: hover{transform:translateY(-3px);z-index:1;box-shadow:0 15px 32px rgba(0,0,0,.15)}#artitalk_main .cbp_tmtimeline>li .cbp_tmlabel: after{right:100%;border:10px solid transparent;z-index:-1;height:0;width:0;position:absolute;pointer-events:none;border-right-color:" + color2 + ";top:4px}#artitalk_main .cbp_tmtimeline>li: nth-child(odd) .cbp_tmlabel: after{border-right-color:" + color1 + "}#artitalk_main p.shuoshuo_time{margin-top:10px;border-top:1px dashed #fff;padding-top:5px;font-size:12px}@media screen and (max-width:65.375em){#artitalk_main .cbp_tmtimeline>li .cbp_tmtime span: last-child{font-size:1.2em}}#artitalk_main .shuoshuo_author_img img{border:1px solid #ddd;padding:2px;float:left;border-radius:64px;transition:1s}#artitalk_main .artitalk_avatar{border-radius:100%;-moz-border-radius:100%;box-shadow:inset 0 -1px 0 3333sf;-webkit-box-shadow:inset 0 -1px 0 3333sf;-webkit-transition:-webkit-transform .4s ease-out;transition:transform .4s ease-out;-moz-transition:-moz-transform .4s ease-out}#artitalk_main .artitalk_avatar: hover{-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);transform:rotateZ(360deg)}#artitalk_main .shuoshuo_text{width:100%;height:130px;background-repeat:no-repeat;background-position:right;transition:.35s ease-in-out;border:1px solid #ccc;border-radius:6px;resize:none}#artitalk_main .shuoshuo_inputs{border:1px solid #ccc;width:40%;font-size:12px}#artitalk_main .at_button,#operare_artitalk .at_button{background-color:" + color1 + ";border:none;margin-left:5px;color:" + color3 + ";padding:8px 16px;text-align:center;text-decoration:none;height:auto;line-height:20px;display:inline-block;font-size:12px;border-radius:12px;outline:0;cursor:pointer}#artitalk_main .at_button: hover,#operare_artitalk .at_button: hover{background-color:" + color2 + ";box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 8px 16px 0 rgba(0,0,0,.19)}#artitalk_main #article-container ul p{margin:0 0 1rem}#artitalk_main .power{text-align:right;color:#999;margin-top:10px;font-size:.75em;padding:.5em 0}#artitalk_main .power a{font-size:.75em;position:relative;cursor:pointer;color:#1abc9c;text-decoration:none;display:inline-block}#artitalk_main .shuoshuo_row .col.col-80{width:80%;float:left}#artitalk_main .shuoshuo_row .col.col-20{width:20%;float:right;text-align:right}#artitalk_main #preview{width:100%;float:left;margin:.5rem 0 0;padding:7px;box-shadow:0 0 1px #f0f0f0}#artitalk_main #lazy{background:#fff;bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999}#artitalk_main .preloader{position:absolute;margin-left:-55px;margin-top:-100px;height:110px;width:110px;left:50%;top:50%}#artitalk_main .preloader>svg>g>path,#artitalk_main .preloader>svg>path{stroke:#9ea1a4;stroke-width:.25}#artitalk_main #cloud{position:relative;z-index:2}#artitalk_main #cloud path{fill:#efefef}#artitalk_main #sun{margin-left:-10px;margin-top:6px;opacity:0;width:60px;height:60px;position:absolute;left:45px;top:15px;z-index:1;animation-name:rotate;animation-duration:16s;animation-iteration-count:infinite;animation-timing-function:linear}#artitalk_main #sun path{stroke-width:.18;fill:#9ea1a4}#artitalk_main .rain{position:absolute;width:70px;height:70px;margin-top:-32px;margin-left:19px}#artitalk_main .drop{opacity:1;background:#9ea1a4;display:block;float:left;width:3px;height:10px;margin-left:4px;border-radius:0 0 6px 6px;animation-name:drop;animation-duration:350ms;animation-iteration-count:infinite}#artitalk_main .drop: first-child{animation-delay:-130ms}#artitalk_main .drop: nth-child(2){animation-delay:-240ms}#artitalk_main .drop: nth-child(3){animation-delay:-390ms}#artitalk_main .drop: nth-child(4){animation-delay:-525ms}#artitalk_main .drop: nth-child(5){animation-delay:-640ms}#artitalk_main .drop: nth-child(6){animation-delay:-790ms}#artitalk_main .drop: nth-child(7){animation-delay:-.9s}#artitalk_main .drop: nth-child(8){animation-delay:-1.05s}#artitalk_main .drop: nth-child(9){animation-delay:-1.13s}#artitalk_main .drop: nth-child(10){animation-delay:-1.3s}#artitalk_main .artitalk_loading_text{font-family:Helvetica,\" Helvetica Neue \",sans-serif;letter-spacing:1px;text-align:center;margin-left:-43px;font-weight:700;margin-top:20px;font-size:11px;color:#a0a0a0;width:200px}#artitalk_main .shuoshuoimg{cursor:pointer;transition:1s;z-index:2}#artitalk_main .shuoshuoimg: hover{transform:scale(3.5)}#artitalk_main .hide,#artitalk_main .preview_now,#operare_artitalk .hide{display:none}#operare_artitalk .c1{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);z-index:2}#operare_artitalk .c2{background-color:#fff;position:fixed;width:400px;height:auto;top:50%;left:50%;z-index:3;margin-top:-150px;margin-left:-200px;box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);opacity:.85;border:0;border-radius:10px}#operare_artitalk .shuoshuo_input_log{outline-style:none;margin-top:10px;border:1px solid #ccc;border-radius:6px;padding:8px 16px;font-size:12px;background-color:transparent;color:#999}#artitalk_main .delete_right{cursor:pointer;width:12px;height:12px;position:absolute;right:12px}#artitalk_main #preview>p>.atemoji,#artitalk_main .shuoshuo_emoji>a,#artitalk_main svg{display:inline}#artitalk_main .cbp_tmlabel>p,#artitalk_main em,#artitalk_main h1,#artitalk_main h2,#artitalk_main h3,#artitalk_main h4,#artitalk_main h5,#artitalk_main h6{word-wrap:break-word;word-break:break-all}#artitalk_main .shuoshuo_emoji{border:1px solid #ccc;border-radius:6px 6px 0 0;height:120px;overflow:auto;margin-top:10px;border-bottom:none}#artitalk_main .atemoji,#artitalk_main img.atemoji{max-height:28px;width:28px;display:inline;vertical-align:middle}#artitalk_main .shuoshuo_emoji>.atemoji{cursor:pointer;margin:0 0 0 10px;display:inline}#artitalk_main i>.atemoji{cursor:pointer;margin:0 0 0 10px}#artitalk_main .shuoshuo_emoji>.atemoji: hover{transform:scale(1.5)}#artitalk_main div#shuoshuo_emojiswitch{height:40px;width:auto;border-radius:0 0 6px 6px;border-collapse:collapse;border:1px solid #ccc;border-top:none}#artitalk_main .shuoshuo_emoji_part{width:25%;cursor:pointer;align-content:center;text-align:center;line-height:40px}#artitalk_main .shuoshuo_emoji_part: hover{background-color:#ccc;color:#fff}#artitalk_main .zuiliangdezai{background-color:#ccc;color:#fff}#artitalk_main .pingjun{display:flex}#artitalk_main #article-container img{margin:0}#artitalk_main div#loading_txt{font-size:20px}#artitalk_main audio{display:block;width:100%;outline:0;opacity:.8}#artitalk_main video{z-index:0}#artitalk_main textarea#neirong: focus{background-position-y:150px;transition:.35s ease-in-out}#artitalk_main span.cbp_tmlabel>p{display:flex;flex-wrap:wrap;overflow:unset}@media screen and (max-width:768px){#artitalk_main span.cbp_tmlabel>p{flex-direction:row-reverse}}@media screen and (min-width:768px){#artitalk_main span.cbp_tmlabel>p{flex-direction:row;align-items:flex-end}#artitalk_main span.cbp_tmlabel>p.shuoshuo_time .label_attachment{flex-grow:1;flex-basis:3%;text-align:right}}#artitalk_main ul#maina>li{list-style:none}#artitalk_main .c2>center>p{margin-top:10px;margin-bottom:10px}@-moz-keyframes rotate{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}@-webkit-keyframes rotate{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}@-o-keyframes rotate{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}@keyframes rotate{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}@-moz-keyframes drop{50%{height:45px;opacity:0}51%{opacity:0}100%{height:1px;opacity:0}}@-webkit-keyframes drop{50%{height:45px;opacity:0}51%{opacity:0}100%{height:1px;opacity:0}}@-o-keyframes drop{50%{height:45px;opacity:0}51%{opacity:0}100%{height:1px;opacity:0}}@keyframes drop{50%{height:45px;opacity:0}51%{opacity:0}100%{height:1px;opacity:0}}p.shuoshuo_time>span>a:hover{color:red}p.shuoshuo_time>span>a{color:#00f;text-decoration:none}"; let atStyle = document.createElement("style"); atStyle.type = "text/css"; atStyle.innerHTML = atCss; atStyle.id = "add-Artitalk-Style"; document.head.appendChild(atStyle); - if (blackAndWhiteTheme) { let blackAndWhiteStyleElement = document.createElement("style"); blackAndWhiteStyleElement.innerHTML = blackAndWhiteStyle; @@ -592,7 +597,6 @@ atEvery.prototype._init = function () { blackAndWhiteStyleElement.innerHTML = blackAndWhiteStyle; document.head.appendChild(blackAndWhiteStyleElement); } - let atStyle = document.createElement('link'); atStyle.rel = 'stylesheet'; atStyle.href = cssUrl; @@ -772,9 +776,9 @@ atEvery.prototype._init = function () { let shuoshuoContentMd = shuoshuoContent; atObject.set('atContentMd', shuoshuoContentMd); shuoshuoContent = translate(shuoshuoContent); - let converte = new showdown.Converter(); - converte.setOption('strikethrough', 1); - let shuoshuoContentHtml = converte.makeHtml(shuoshuoContent); + let converter = new showdown.Converter(); + converter.setOption('strikethrough', 1); + let shuoshuoContentHtml = converter.makeHtml(shuoshuoContent); let atAvatar = typeof (currentUser.attributes.img) === "undefined" ? "https://fastly.jsdelivr.net/gh/drew233/cdn/logol.png" : currentUser.attributes.img; // alert(deFaultavatar); let userClient = new Client(); @@ -792,17 +796,24 @@ atEvery.prototype._init = function () { fadeOut('preview'); root.seeContent(0, root.config); fadeOut('shuoshuo_input'); - onShuoPublished(currentUser.attributes.username, shuoshuoContent); - }) } clickPre.onclick = function () { let unPre = document.getElementById('neirong').value; unPre = translate(unPre); - let converter = new showdown.Converter(); - converter.setOption('strikethrough', 1); + let converter = new showdown.Converter({ + strikethrough: true, + metadata: true, + }); let finishPre = converter.makeHtml(unPre); + + let metadata = converter.getMetadata(); + if (metadata["replyTo"] && metadata["reply"]) { + // console.log(metadata); + finishPre = atEvery.prototype.renderReply(metadata) + finishPre; + } + document.getElementById('preview').innerHTML = finishPre; } deleteSus.onclick = function () { @@ -953,6 +964,7 @@ atEvery.prototype.seeContent = function (pageNum, option) { color2, color3, atComment, + ascendingComments, onCommentsPublished, } = root.config; lang = typeof (lang) === "undefined" || lang === '' ? 'zh' : lang; @@ -1115,9 +1127,8 @@ atEvery.prototype.seeContent = function (pageNum, option) { color2 = typeof (color2) === "undefined" || color2 === '' ? "#9BCD9B" : color2; color3 = typeof (color3) === "undefined" || color3 === '' ? "white" : color3; pageSize = typeof (pageSize) === "undefined" ? '5' : pageSize; - - onCommentsPublished = typeof (onCommentsPublished) === "function" ? onCommentsPublished : function () { }; - + ascendingComments = typeof (ascendingComments) === "undefined" || ascendingComments === '' ? false : ascendingComments; + onCommentsPublished = typeof (onCommentsPublished) === "function" ? onCommentsPublished : function () { }; function fadeIn(id) { if (!document.getElementById(id)) return; let nowEle = document.getElementById(id); @@ -1197,7 +1208,7 @@ atEvery.prototype.seeContent = function (pageNum, option) { let id = atContent.id; let shuoshuoPerContent = atContent.attributes.atContentHtml; let commentSvg = ""; - let contengMid = "
  • " + shuoshuoPerContent + "

    " + " " + " " + osSvg + atOs + "  " + timeSvg + resDate + " " + resTime + "" + "" + commentSvg + "loading 

    • "; + let contengMid = "
  • " + shuoshuoPerContent + "

    " + " " + " " + osSvg + atOs + "  " + timeSvg + resDate + " " + resTime + "" + "" + commentSvg + "loading 

    • "; mid += contengMid; }) let originString = document.getElementById('ccontent').innerHTML; @@ -1314,9 +1325,9 @@ atEvery.prototype.seeContent = function (pageNum, option) { location.reload(); return; } - let converte = new showdown.Converter(); - converte.setOption('strikethrough', 1); - let shuoshuoContentHtml = converte.makeHtml(shuoshuoContent); + let converter = new showdown.Converter(); + converter.setOption('strikethrough', 1); + let shuoshuoContentHtml = converter.makeHtml(shuoshuoContent); atEditOver.set('atContentHtml', shuoshuoContentHtml); atEditOver.save().then(function () { location.reload(); @@ -1373,9 +1384,18 @@ atEvery.prototype.seeContent = function (pageNum, option) { let comment = AV.Object.extend('atComment'); let atComment = new comment(); comContent = translate(comContent); - let converte = new showdown.Converter(); - converte.setOption('strikethrough', 1); - let atCommentHtml = converte.makeHtml(comContent); + let converter = new showdown.Converter({ + strikethrough: true, + metadata: true, + }); + let atCommentHtml = converter.makeHtml(comContent); + + let metadata = converter.getMetadata(); + if (metadata["replyTo"] && metadata["reply"]) { + // console.log(metadata); + atCommentHtml = atEvery.prototype.renderReply(metadata) + atCommentHtml; + } + let currentUser = AV.User.current(); let comEmail = document.getElementById('email').value; let comNick = document.getElementById('commentNick').value; @@ -1427,25 +1447,65 @@ atEvery.prototype.seeContent = function (pageNum, option) { } atComment.set('nick', comNick); atComment.save().then(function (res) { - let replySvg = ""; - let originComment = document.getElementById('ccontent').innerHTML; - let comList = "
  • " + atCommentHtml + "

    " + "" + comNick + "  " + timeSvg + resDate + " " + resTime + replySvg + "

    • "; - let positon = originComment.indexOf('') + 5; - let nowComment = originComment.slice(0, positon) + comList + originComment.slice(positon); - document.getElementById('ccontent').innerHTML = ""; + let replySvg = ""; + + let commentList = document.createElement("li"); + commentList.style.margin = "0 0 0 48px"; + commentList.innerHTML = "
    " + atCommentHtml + "

    " + "" + comNick + "  " + timeSvg + resDate + " " + resTime + "" + replySvg + "

    ".trim(); + + let commentContainer = document.getElementById("maina"); // what is maina? ??:D + ascendingComments ? + commentContainer.appendChild(commentList) : + // commentContainer's `firstChild` is a
  • for shuo and his `nextSibling` is the first comment + commentContainer.insertBefore(commentList, commentContainer.firstChild.nextSibling); + document.getElementById('neirong').value = ""; document.getElementById('email').value = ""; document.getElementById('commentNick').value = ""; - document.getElementById('ccontent').innerHTML = nowComment; fadeOut('preview'); fadeOut('lazy'); - - onCommentsPublished(comNick, comContent); + onCommentsPublished(comNick, comContent, comEmail); }) } - atEvery.prototype.atReply = function () { + atEvery.prototype.atReply = function (clickedElement) { + let label = findAncestor(clickedElement, "span.cbp_tmlabel"); + let content = label.querySelector("div").innerHTML; + content = content.replaceAll("\n", "
    "); + content = content.replaceAll(/:\s+/g, ":"); // to fix Showdown.js' bug on matching colons + let commentator = label.querySelector("p.shuoshuo_time > span").innerText; + // console.log(content); + + // not showing editor + if (document.getElementById('shuoshuo_input').style.display !== "") { + document.getElementById('pubComment').click(); + } + + if (content) { + let editor = document.getElementById("shuoshuo_edit").querySelector("textarea.shuoshuo_text"); + // the same way Showdown.js matches meta data + const metadataMatchingPattern = /^\s*---+\s*(\S*?)\n([\s\S]+?)\n---+/; + if (editor.value.search(metadataMatchingPattern) !== -1) { + editor.value = editor.value.replace(metadataMatchingPattern, `---\nreplyTo: ${commentator}\nreply: ${content}\n---`); + } else { + editor.value = `---\nreplyTo: ${commentator}\nreply: ${content}\n---\n${editor.value}`; + } + editor.focus(); + } + } + /// Takes an object with "replyTo" and "reply" keys in. + /// Generates HTML text. + atEvery.prototype.renderReply = function (metadata) { + let commentator = metadata["replyTo"]; + let content = metadata["reply"]; + + if (commentator && content) { + let processedContent = content.replaceAll(""", "'"); + // in case that the old reference will be quoted again + processedContent = processedContent.replace(new RegExp("
    (.*)
    ", "g"), ""); + return `
    @${commentator}: ${processedContent}
    `; + } - document.getElementById('pubComment').click(); + return ""; } atEvery.prototype.commentInit = function (id, option) { function fadeIn(id) { @@ -1484,7 +1544,7 @@ atEvery.prototype.seeContent = function (pageNum, option) { let currentUser = AV.User.current(); let commentQuery = new AV.Query('atComment'); commentQuery.equalTo('atId', id); - commentQuery.descending('createdAt'); + ascendingComments ? commentQuery.ascending('createdAt') : commentQuery.descending('createdAt'); commentQuery.find().then(res => { res.forEach(function (comment) { let timeForm = comment.createdAt; @@ -1523,10 +1583,8 @@ atEvery.prototype.seeContent = function (pageNum, option) { atGravatar = adminAvatar; } let comAvatar = atGravatar; - - let replySvg = ""; - - let comList = "
  • " + comContent + "

    " + "" + commentNick + "  " + timeSvg + resDate + " " + resTime + replySvg + "

    • "; + let replySvg = ""; + let comList = "
  • " + comContent + "

    " + "" + commentNick + "  " + timeSvg + resDate + " " + resTime + "" + replySvg + "

    • "; mid += comList; }) let originString = document.getElementById('ccontent').innerHTML; diff --git a/test/test_page.html b/test/test_page.html index dac54d7..e1bb4d5 100644 --- a/test/test_page.html +++ b/test/test_page.html @@ -22,12 +22,15 @@