悄悄话留言改半屏面板（最高 2/3，留出星空）+ 说一句下面加入口、「全部」也开面板；留言可回复；星星划走后再冒出来；100 条留言重写成大白话 (v26110618)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
29
js/app.js
29
js/app.js
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26110616';
|
||||
var VER = '26110618';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -4565,6 +4565,7 @@
|
||||
m.el.remove();
|
||||
m.btn.classList.remove('flare', 'gone');
|
||||
m.btn.classList.add('used');
|
||||
reborn(m.btn);
|
||||
mts.delete(m.i);
|
||||
if (done) paintCard(m.it, m.i);
|
||||
checkDone();
|
||||
@@ -4575,8 +4576,20 @@
|
||||
· 声音用 WebAudio 现合成，不加载音频文件：点星 = 一声随机五声音阶的「叮」（连点几颗像在弹琴），
|
||||
唰出去 = 一道由低到高的风声；右上角喇叭可关，记在本地。 */
|
||||
function checkDone() {
|
||||
const all = $$('.wsk-st', page);
|
||||
$('#wskDone').classList.toggle('show', all.length > 0 && all.every(b => b.classList.contains('used')) && !mts.size);
|
||||
/* 11-07 用户：点完不要整片星空都空掉 —— 星星会再冒出来（reborn），「星星都落下来啦」不再出现 */
|
||||
$('#wskDone').classList.remove('show');
|
||||
}
|
||||
/* 11-07 用户：「星星跑掉了，过一会儿还有其他星星出来，相当于其他妈妈说的话能出来，而不是都点完之后整个星空就不能点了」
|
||||
划走的星 8～16 秒后换个位置重新亮起来（同一句话；整片夜空一直有星可点） */
|
||||
function reborn(btn) {
|
||||
setTimeout(() => {
|
||||
if (!btn.isConnected || !btn.classList.contains('used')) return;
|
||||
btn.style.left = (36 + Math.random() * 58).toFixed(1) + '%';
|
||||
btn.style.top = (21 + Math.random() * 38).toFixed(1) + '%';
|
||||
btn.classList.remove('used', 'cur', 'flare', 'gone');
|
||||
btn.classList.add('born');
|
||||
setTimeout(() => btn.classList.remove('born'), 1500);
|
||||
}, 8000 + Math.random() * 8000);
|
||||
}
|
||||
const SND = 'mmbox.whsnd.v1';
|
||||
let actx = null, sndOn = true;
|
||||
@@ -4686,7 +4699,7 @@
|
||||
const btn = $('.wsk-st[data-go="' + i + '"]', page);
|
||||
if (!btn) { paintCard(it, i); return; }
|
||||
btn.classList.add('cur');
|
||||
if (RM) { btn.classList.add('used'); paintCard(it, i); checkDone(); return; }
|
||||
if (RM) { btn.classList.add('used'); reborn(btn); paintCard(it, i); checkDone(); return; }
|
||||
const pr = page.getBoundingClientRect(), br = btn.getBoundingClientRect();
|
||||
const x0 = br.left + br.width / 2 - pr.left, y0 = br.top + br.height / 2 - pr.top;
|
||||
/* 瞄准左下（屏幕左边外、六成高处）：越靠左起步角度越陡，保证在屏幕里拖得够长 */
|
||||
@@ -4768,7 +4781,7 @@
|
||||
/* 2026-10-02 用户：「每个星星都是孕妈的一句话，类似这个感觉，替换掉今晚多少句悄悄话」→ 标题不再报条数 */
|
||||
/* 2026-10-02 用户：上半部分文字太占地方、挡住星星 → 标题收成一行，话题做成一行小胶囊；副标题去掉，话题说明挪进写悄悄话弹窗 */
|
||||
const th = theme();
|
||||
$('#wskTitle').innerHTML = '<div class="wsk-t">每一颗星星，都是<b>一位孕妈</b>的一句话</div>' +
|
||||
$('#wskTitle').innerHTML = '<div class="wsk-t">每颗星星，都是<b>一个妈妈</b>说的话</div>' +
|
||||
(th ? '<div class="wsk-topic"><em>本周话题</em><b>' + esc(th.name) + '</b></div>' : '<p>' + (night ? '今晚' : '今天') + '，她们和你一样在等宝宝来</p>');
|
||||
$('#whSay').firstElementChild.textContent = th && th.say ? th.say : '说一句悄悄话';
|
||||
paintDeco();
|
||||
@@ -4776,7 +4789,7 @@
|
||||
paintList(l);
|
||||
if (cur && list()[cur - 1]) $$('.wsk-st[data-go="' + cur + '"]', page).forEach(x => x.classList.add('cur'));
|
||||
$('#whpLeft').textContent = !data ? '' : !oid() || !data.canPost ? '填好预产期，就能说一句' :
|
||||
window.MBWhCm ? '说的话先审核再公开，攒够 ' + MBWhCm.starLikes() + ' 个赞就挂上星星' : /* 11-07 悄悄话第 2 步：说一句 = 发进下面的留言区 */
|
||||
window.MBWhCm ? '先审核再公开，被赞 ' + MBWhCm.starLikes() + ' 次就变成星星' : /* 11-07 悄悄话第 2 步：说一句 = 发进下面的留言区 */
|
||||
data.left ? '今天还能说 ' + data.left + ' 句' : '今天的 3 句说完啦，明天再来';
|
||||
}
|
||||
function drawer(on) {
|
||||
@@ -4928,7 +4941,7 @@
|
||||
ta.placeholder = th && th.ph ? th.ph : '今天想对谁说点什么？';
|
||||
$('#whPresets').innerHTML = ((th && th.presets && th.presets.length) ? th.presets : (data.presets || [])).map(t => '<button class="wh-pre" type="button">' + esc(t) + '</button>').join('');
|
||||
$('#whLeft').textContent = window.MBWhCm ? '' : '今天还能说 ' + data.left + ' 句';
|
||||
if (window.MBWhCm) { $('#whMLead').textContent = '发出后先审核，通过了会出现在星空下面的留言区；攒够 ' + MBWhCm.starLikes() + ' 个赞，就会挂到星空上，同孕期的妈妈都能点到。'; }
|
||||
if (window.MBWhCm) { $('#whMLead').textContent = '发出去先审核，通过了大家就能在留言里看到。被赞够 ' + MBWhCm.starLikes() + ' 次，它会变成天上的一颗星星，同孕周的妈妈都点得到。'; }
|
||||
openModal('modalWhisper');
|
||||
});
|
||||
$('#whPresets').addEventListener('click', e => {
|
||||
@@ -4949,7 +4962,7 @@
|
||||
/* 11-07 悄悄话第 2 步（用户定）：星空页「说一句」并入留言区 —— 发成置顶笔记下的留言（先审后发），赞够门槛自动挂星 */
|
||||
if (window.MBWhCm) {
|
||||
MBWhCm.post(t, data.week)
|
||||
.then(m => { if (m) { toast(m); return; } closeModal(); toast('发出去啦，审核通过后会出现在留言区'); })
|
||||
.then(m => { if (m) { toast(m); return; } closeModal(); toast('发出去了，审核通过后大家就能看到'); })
|
||||
.then(() => { busy = false; btn.disabled = false; btn.textContent = '悄悄发出'; });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -108,11 +108,11 @@
|
||||
var REC = ['taidong', 'yunqitizhong', 'yun', 'yunqixuetang', 'gongsuopinlv', 'taierguzhong', 'chanjianrili', 'bushui']
|
||||
.map(function (t) { return '#htGrid .tg[data-tool="' + t + '"]'; }).join(',');
|
||||
var SEL = {
|
||||
home: REC + ',#vitals .vt-it,.tab-fab,.fab,.fab-w,#htEdit,.tg-add,#homeExchMod,#meExchCard,#meExchGo,#meExchOrders,#bbBanner,[data-modal="modalProfile"],[data-modal="modalWhisper"],#bfMe,.preg-card,#whSay,[data-hug],[data-wcl]',
|
||||
home: REC + ',#vitals .vt-it,.tab-fab,.fab,.fab-w,#htEdit,.tg-add,#homeExchMod,#meExchCard,#meExchGo,#meExchOrders,#bbBanner,[data-modal="modalProfile"],[data-modal="modalWhisper"],#bfMe,.preg-card,#whSay,[data-hug],[data-wcl],[data-wrp],#wcsSend',
|
||||
plaza: '#blk,#bfv,#csend,#cpic,#cemo,#cpOk,[data-like],[data-cl],[data-rk],#cmgo,[data-write],[data-mywrite],#tabRec',
|
||||
topic: '.tc-lk,.tc-go,.tc-in .pic-b,.tc-in .emo-b'
|
||||
};
|
||||
var IN = { plaza: '#cin', topic: '.tc-in textarea' };
|
||||
var IN = { home: '#wcsIn', plaza: '#cin', topic: '.tc-in textarea' };
|
||||
function page() {
|
||||
if (document.getElementById('homeBody')) return 'home';
|
||||
if (document.getElementById('wf')) return 'plaza';
|
||||
|
||||
85
js/wh-cm.css
85
js/wh-cm.css
@@ -1,19 +1,41 @@
|
||||
/* 星空页 · 妈妈们的留言（2026-11-07，js/wh-cm.js）：深靛紫玻璃，跟星空一个色系，不用白底 */
|
||||
.wcm{position:absolute;inset:0;z-index:4;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
|
||||
.wcm::-webkit-scrollbar{display:none}
|
||||
.wcm-sp{height:calc(100% - 158px - env(safe-area-inset-bottom))}
|
||||
.wcm-in{position:relative;min-height:calc(100% - 60px);padding-bottom:calc(24px + env(safe-area-inset-bottom));
|
||||
background:linear-gradient(180deg,rgba(28,22,52,0) 0,rgba(28,22,52,.9) 56px,rgba(26,20,48,.97) 150px,#1E1838 100%)}
|
||||
.wcm .whp-bar{position:relative;left:auto;right:auto;bottom:auto;padding:22px 24px 4px;background:none}
|
||||
.wcm-hd{display:flex;align-items:baseline;gap:8px;margin:14px 18px 6px;color:#F4ECFF}
|
||||
.wcm-hd b{font-size:15px;font-weight:800;letter-spacing:1px}
|
||||
.wcm-hd span{font-size:12px;color:rgba(232,222,255,.5)}
|
||||
.wcm-up{margin-left:auto;font-style:normal;font-size:11.5px;color:rgba(255,214,170,.75);transition:opacity .3s}
|
||||
.wcm-up::after{content:"";display:inline-block;width:6px;height:6px;margin-left:5px;border:solid currentColor;border-width:1.5px 0 0 1.5px;transform:translateY(1px) rotate(45deg)}
|
||||
.wcm.up .wcm-up{opacity:0}
|
||||
.wcm-ls{padding:0 12px}
|
||||
.wcm-e{margin:18px 0;text-align:center;font-size:12.5px;color:rgba(232,222,255,.45)}
|
||||
.wcm-it{display:flex;gap:10px;margin-top:8px;padding:12px 10px 12px 12px;border-radius:16px;
|
||||
/* 星空页 · 妈妈们的留言（2026-11-07，js/wh-cm.js）
|
||||
二改：从「整页上滑盖住星空」改成半屏面板 —— 最高 68%，上面始终露出星空；深靛紫玻璃，跟星空一个色系 */
|
||||
|
||||
/* 入口：「说一句」下面一条 */
|
||||
.wcm-go{display:flex;align-items:center;gap:8px;width:100%;margin:10px 0 0;height:44px;padding:0 14px 0 10px;border:0;border-radius:14px;font:inherit;color:#F4ECFF;text-align:left;
|
||||
background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
|
||||
.wcm-go:active{transform:scale(.985)}
|
||||
.wcm-go-av{display:flex;flex:none}
|
||||
.wcm-go-av img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #2A1F48;background:#3A2F5E}
|
||||
.wcm-go-av img+img{margin-left:-7px}
|
||||
.wcm-go-t{flex:1;min-width:0;font-size:14px;font-weight:700}
|
||||
.wcm-go-t em{margin-left:6px;font-style:normal;font-size:12px;font-weight:400;color:rgba(232,222,255,.55)}
|
||||
.wcm-go-up{flex:none;width:8px;height:8px;margin-top:4px;border:solid #FFD9B8;border-width:2px 0 0 2px;transform:rotate(45deg);animation:wcmUp 1.6s ease-in-out infinite}
|
||||
@keyframes wcmUp{50%{transform:translateY(-3px) rotate(45deg)}}
|
||||
.wh-page .whp-left{margin-top:7px}
|
||||
/* 入口占了一行，流星内容卡往上让一让 */
|
||||
.wh-page .wsc{bottom:calc(150px + env(safe-area-inset-bottom))}
|
||||
/* 原来的「全部」抽屉不用了 */
|
||||
.wh-page .whd{display:none}
|
||||
|
||||
/* 半屏面板 */
|
||||
.wcs{position:absolute;inset:0;z-index:8;background:rgba(10,6,24,0);visibility:hidden;transition:background .3s,visibility .3s}
|
||||
.wcs.show{visibility:visible;background:rgba(10,6,24,.32)}
|
||||
.wcs-p{position:absolute;left:0;right:0;bottom:0;height:68%;display:flex;flex-direction:column;border-radius:22px 22px 0 0;color:#F4ECFF;
|
||||
background:linear-gradient(#2A1F48,#1E1634);box-shadow:0 -10px 40px rgba(0,0,0,.4);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
|
||||
.wcs-hd{flex:none;padding:8px 0 6px;touch-action:none}
|
||||
.wcs-grab{display:block;width:38px;height:4px;margin:0 auto 8px;border-radius:2px;background:rgba(255,255,255,.28)}
|
||||
.wcs-tt{display:flex;align-items:baseline;gap:8px;padding:0 16px 0 18px}
|
||||
.wcs-tt b{font-size:16px;font-weight:800;letter-spacing:.5px}
|
||||
.wcs-tt span{font-size:12px;color:rgba(232,222,255,.5)}
|
||||
.wcs-x{margin-left:auto;align-self:center;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
|
||||
.wcm-tb{display:flex;align-items:center;gap:6px;margin:10px 18px 2px}
|
||||
.wcm-tb button{height:26px;padding:0 12px;border-radius:99px;border:0;background:rgba(255,255,255,.07);color:rgba(232,222,255,.62);font:inherit;font-size:12.5px}
|
||||
.wcm-tb button.on{background:linear-gradient(135deg,rgba(255,214,170,.92),rgba(255,170,160,.92));color:#3A2312;font-weight:800}
|
||||
.wcm-rule{margin-left:auto;font-size:11px;color:rgba(232,222,255,.42)}
|
||||
.wcs-ls{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 12px 14px}
|
||||
.wcm-e{margin:24px 0;text-align:center;font-size:12.5px;color:rgba(232,222,255,.45)}
|
||||
.wcm-it{display:flex;gap:10px;margin-top:8px;padding:12px 10px 10px 12px;border-radius:16px;
|
||||
background:linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
|
||||
.wcm-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;background:#3A2F5E;box-shadow:0 0 0 1.5px rgba(255,220,180,.35)}
|
||||
.wcm-bd{flex:1;min-width:0}
|
||||
@@ -25,22 +47,29 @@
|
||||
.wcm-rp p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(242,236,250,.78)}
|
||||
.wcm-rp p+p{margin-top:4px}
|
||||
.wcm-rp b{font-weight:700;color:#C9B8FF}
|
||||
.wcm-rp p.me b:first-child{color:#FFD9B8}
|
||||
.wcm-re{margin-top:6px;padding:2px 0;border:0;background:none;font:inherit;font-size:12px;color:rgba(232,222,255,.5)}
|
||||
.wcm-star{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:2px 8px 2px 6px;border-radius:99px;font-size:11px;font-weight:700;color:#FFE2B8;
|
||||
background:linear-gradient(135deg,rgba(122,79,214,.55),rgba(90,59,170,.35));box-shadow:0 0 10px rgba(255,214,170,.25)}
|
||||
.wcm-star svg{width:10px;height:10px;fill:currentColor}
|
||||
.wcm-lk{flex:none;align-self:flex-start;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:32px;padding:2px 0;border:0;background:none;font:inherit;color:rgba(232,222,255,.5)}
|
||||
.wcm-lk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s}
|
||||
.wcm-lk span{font-size:11px}
|
||||
.wcm-lk.on{color:#FF8FA6}.wcm-lk.on svg{fill:currentColor;transform:scale(1.12)}
|
||||
.wcm-more{display:block;margin:14px auto 0;height:34px;padding:0 22px;border-radius:99px;border:1px solid rgba(255,220,180,.35);background:rgba(255,255,255,.05);color:#FFD9B8;font:inherit;font-size:13px}
|
||||
.wcm-more[hidden]{display:none}
|
||||
/* 内容卡 / 落完提示往上让一让，别被留言面板顶住 */
|
||||
.wh-page .wsc{bottom:calc(172px + env(safe-area-inset-bottom))}
|
||||
/* 11-07 第 2 步：最热 / 最新 / 同孕周 + 挂星标记 */
|
||||
.wcm-tb{display:flex;align-items:center;gap:6px;margin:0 18px 4px}
|
||||
.wcm-tb button{height:26px;padding:0 12px;border-radius:99px;border:0;background:rgba(255,255,255,.07);color:rgba(232,222,255,.62);font:inherit;font-size:12.5px}
|
||||
.wcm-tb button.on{background:linear-gradient(135deg,rgba(255,214,170,.92),rgba(255,170,160,.92));color:#3A2312;font-weight:800}
|
||||
.wcm-rule{margin-left:auto;font-size:11px;color:rgba(232,222,255,.42)}
|
||||
.wcm-star{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:2px 8px 2px 6px;border-radius:99px;font-size:11px;font-weight:700;color:#FFE2B8;
|
||||
background:linear-gradient(135deg,rgba(122,79,214,.55),rgba(90,59,170,.35));box-shadow:0 0 10px rgba(255,214,170,.25)}
|
||||
.wcm-star svg{width:10px;height:10px;fill:currentColor}
|
||||
.wcm-lk.me{opacity:.7}
|
||||
.wcm-lk.pop svg{animation:wcmPop .45s ease}
|
||||
@keyframes wcmPop{40%{transform:scale(1.45)}100%{transform:scale(1.12)}}
|
||||
.wcm-more{display:block;margin:14px auto 0;height:34px;padding:0 22px;border-radius:99px;border:1px solid rgba(255,220,180,.35);background:rgba(255,255,255,.05);color:#FFD9B8;font:inherit;font-size:13px}
|
||||
.wcm-more[hidden]{display:none}
|
||||
/* 底部输入框：发新留言 / 回复某一楼 */
|
||||
.wcs-in{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);background:#1E1634}
|
||||
.wcs-to{flex:none;max-width:7em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:#FFD9B8}
|
||||
.wcs-to[hidden]{display:none}
|
||||
.wcs-in input{flex:1;min-width:0;height:36px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.09);color:#fff;font:inherit;font-size:14px;outline:none}
|
||||
.wcs-in input::placeholder{color:rgba(232,222,255,.4)}
|
||||
.wcs-in button{flex:none;height:34px;padding:0 14px;border:0;border-radius:99px;background:linear-gradient(135deg,#FFD6AA,#FFAAA0);color:#3A2312;font:inherit;font-size:13.5px;font-weight:800}
|
||||
.wcs-in button:disabled{opacity:.5}
|
||||
|
||||
/* 星星点完会再冒出来（app.js reborn） */
|
||||
.wsk-st.born i{animation:wskBorn 1.4s ease-out both}
|
||||
@keyframes wskBorn{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:none}}
|
||||
|
||||
280
js/wh-cm.js
280
js/wh-cm.js
@@ -1,28 +1,43 @@
|
||||
/* 星空页 · 妈妈们的留言（2026-11-07 用户：广场点「孕妈悄悄话」直接进星空页，留言自带在「说一句悄悄话」下面，
|
||||
样式跟星空搭，不要白底）。
|
||||
· 版式：#wcm 盖满星空页、自己滚动；上面一段透明垫高，下面是留言面板，
|
||||
把原来的 .whp-bar（说一句悄悄话）挪进面板顶上，往上滑留言就盖上来。
|
||||
/* 星空页 · 妈妈们的留言（2026-11-07）
|
||||
· 二改（用户：「往下滑评论就挡住整个背景，不好；改成点『全部』那种半弹窗，最多拉到 2/3，一定留出一块星空；
|
||||
首页要有个明显入口，别只放右上角『全部』」）：
|
||||
「说一句」按钮下面一条入口 → 半屏面板（先开到半屏，拖把手 / 往上划能拉到 2/3，再往上就不动了；往下拖关掉）。
|
||||
面板里自己滚动看全部留言。右上角「全部」也打开这个面板（原来那个只列悄悄话的抽屉不用了）。
|
||||
· 数据：广场置顶笔记 wh-<话题 from> 的评论 = cm.json 模拟（AGENTS.md 12c，不得挂星）+ /plaza/comments 已审核通过的真实评论
|
||||
+ 我自己发的（含审核中）。进星空页才拉 cm.json（600K+，gzip 后小很多；版本号跟广场 index.html 引的一致，共用缓存）。
|
||||
· 11-07 第 2 步：真实留言的赞走服务端（POST /plaza/comment/like，每人每条一次、不能赞自己），赞够 starLikes（后台可改，先 3）
|
||||
自动挂到星空，挂上的标「已挂上星星」；模拟留言的赞只记本机 mmbox.whcm.v1（模拟的永远不挂星）。
|
||||
最热 / 最新 / 同孕周 三种看法；星空页「说一句」发的话也进这里（window.MBWhCm.post，app.js 调），先审后发。 */
|
||||
+ 我自己发的（含审核中）。打开星空页才拉 cm.json（版本号跟广场 index.html 引的一致，共用缓存）。
|
||||
· 真实留言的赞走服务端（POST /plaza/comment/like，每人每条一次、不能赞自己），赞够 starLikes（后台可改，先 3）自动挂星；
|
||||
模拟留言的赞只记本机 mmbox.whcm.v1。最热 / 最新 / 同孕周 三种看法。
|
||||
· 三改（用户：「我不能给别人的留言回复」）：点留言上的「回复」→ 底部输入框回复那一楼（先审后发）；
|
||||
底部输入框不点「回复」时就是发一条新留言。楼的 key 同广场：模拟 = wh-xxx#序号，真实 = r:<id>。
|
||||
· 星空页「说一句」发的话也进这里（window.MBWhCm.post，app.js 调）。 */
|
||||
(function () {
|
||||
var page = document.getElementById('whPage'), bar = page && page.querySelector('.whp-bar');
|
||||
if (!page || !bar || !window.MB_WH_THEME) return;
|
||||
var TH = MB_WH_THEME(), PID = 'wh-' + TH.from.replace(/-/g, '');
|
||||
var esc = function (s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]; }); };
|
||||
var m = ((location.hash || '') + '&').match(/[#&]openid=([^&]*)/), OID = m ? decodeURIComponent(m[1]) : '';
|
||||
var HEART = '<svg viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0112 7.6a4.3 4.3 0 017.5 2.7c0 5.6-7.5 10.2-7.5 10.2z"/></svg>';
|
||||
|
||||
var box = document.createElement('div');
|
||||
box.className = 'wcm'; box.id = 'wcm';
|
||||
box.innerHTML = '<div class="wcm-sp" aria-hidden="true"></div><div class="wcm-in"><div class="wcm-hd"><b>妈妈们的留言</b><span id="wcmN"></span><i class="wcm-up">上滑看看</i></div>' +
|
||||
/* 入口：「说一句」下面一条，带几个头像 + 条数，看得出能点 */
|
||||
var go = document.createElement('button');
|
||||
go.type = 'button'; go.className = 'wcm-go'; go.id = 'wcmGo';
|
||||
go.innerHTML = '<span class="wcm-go-av" id="wcmGoAv"></span><span class="wcm-go-t">看看大家说了啥<em id="wcmGoN"></em></span><i class="wcm-go-up" aria-hidden="true"></i>';
|
||||
bar.appendChild(go);
|
||||
|
||||
/* 半屏面板 */
|
||||
var sh = document.createElement('div');
|
||||
sh.className = 'wcs'; sh.id = 'wcs'; sh.setAttribute('aria-hidden', 'true');
|
||||
sh.innerHTML = '<div class="wcs-p" role="dialog" aria-label="妈妈们的留言">' +
|
||||
'<div class="wcs-hd"><i class="wcs-grab" aria-hidden="true"></i><div class="wcs-tt"><b>妈妈们的留言</b><span id="wcmN"></span>' +
|
||||
'<button type="button" class="wcs-x" aria-label="收起"><svg viewBox="0 0 24 24" width="14" height="14"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg></button></div>' +
|
||||
'<div class="wcm-tb" role="tablist"><button type="button" class="on" data-wso="hot">最热</button><button type="button" data-wso="new">最新</button><button type="button" data-wso="wk">同孕周</button>' +
|
||||
'<span class="wcm-rule" id="wcmRule"></span></div>' +
|
||||
'<div class="wcm-ls" id="wcmLs"><p class="wcm-e">留言加载中…</p></div><button type="button" class="wcm-more" id="wcmMore" hidden>再看看</button></div>';
|
||||
box.querySelector('.wcm-in').insertBefore(bar, box.querySelector('.wcm-hd'));
|
||||
page.appendChild(box);
|
||||
var ls = box.querySelector('#wcmLs'), more = box.querySelector('#wcmMore');
|
||||
'<span class="wcm-rule" id="wcmRule"></span></div></div>' +
|
||||
'<div class="wcs-ls" id="wcsLs"><div id="wcmLs"><p class="wcm-e">留言加载中…</p></div><button type="button" class="wcm-more" id="wcmMore" hidden>再看看</button></div>' +
|
||||
'<div class="wcs-in"><span class="wcs-to" id="wcsTo" hidden></span><input id="wcsIn" type="text" maxlength="200" enterkeyhint="send" placeholder="说点什么…"><button type="button" id="wcsSend">发送</button></div>' +
|
||||
'</div>';
|
||||
page.appendChild(sh);
|
||||
var P = sh.querySelector('.wcs-p'), lsBox = sh.querySelector('#wcsLs'), ls = sh.querySelector('#wcmLs'), more = sh.querySelector('#wcmMore');
|
||||
var inp = sh.querySelector('#wcsIn'), toEl = sh.querySelector('#wcsTo'), sendB = sh.querySelector('#wcsSend');
|
||||
|
||||
var LK = 'mmbox.whcm.v1', LIKE = {};
|
||||
try { LIKE = JSON.parse(localStorage.getItem(LK) || '{}') || {}; } catch (e) {}
|
||||
@@ -34,37 +49,46 @@
|
||||
if (d < 86400) return Math.round(d / 3600) + ' 小时前';
|
||||
var t = new Date(ts + 8 * 3600e3); return (t.getUTCMonth() + 1) + '-' + t.getUTCDate();
|
||||
};
|
||||
var tT;
|
||||
function toast(t) { var x = document.getElementById('toast'); if (!x) return; x.textContent = t; x.classList.add('show'); clearTimeout(tT); tT = setTimeout(function () { x.classList.remove('show'); }, 1800); }
|
||||
|
||||
var SIM = null, REAL = null, ALL = [], shown = 0, loading = false, SORT = 'hot', STAR_N = 3;
|
||||
/* ---------- 数据 ---------- */
|
||||
var SIM = null, REAL = null, RREP = [], ALL = [], shown = 0, loading = false, SORT = 'hot', STAR_N = 3;
|
||||
var top = function (c) { return !c.parent; };
|
||||
function realOf(c) {
|
||||
return { key: 'r:' + c.id, id: c.id, real: 1, n: c.nickname || '孕妈', av: c.avatar || 'assets/img/mom/k01.jpg', s: c.stage, t: c.text,
|
||||
likes: c.likes || 0, liked: !!c.liked, star: !!c.star, ts: c.at, r: [] };
|
||||
}
|
||||
function repOf(c, me) { return { p: c.parent, n: me ? '我' : (c.nickname || '孕妈'), me: me, to: c.parentName, t: c.text, ts: c.at, st: me ? c.status : '' }; }
|
||||
function load() {
|
||||
if (loading || SIM) return; loading = true;
|
||||
fetch('guangchang/cm.json?v=26110612').then(function (r) { return r.json(); }).then(function (j) {
|
||||
var P = j.p;
|
||||
fetch('guangchang/cm.json?v=26110618').then(function (r) { return r.json(); }).then(function (j) {
|
||||
var PP = j.p;
|
||||
SIM = (j.c[PID] || []).map(function (c, k) {
|
||||
var p = P[c[0]];
|
||||
return { key: 's' + k, n: p[0], av: avP(p[1]), s: p[2], t: c[1], likes: c[2],
|
||||
r: c[3].map(function (x) { var q = x[0] < 0 ? null : P[x[0]]; return { n: q ? q[0] : '孕妈悄悄话', t: x[1] }; }) };
|
||||
var p = PP[c[0]];
|
||||
return { key: PID + '#' + k, n: p[0], av: avP(p[1]), s: p[2], t: c[1], likes: c[2],
|
||||
r: c[3].map(function (x) { var q = x[0] < 0 ? null : PP[x[0]]; return { n: q ? q[0] : '孕妈悄悄话', t: x[1] }; }) };
|
||||
});
|
||||
build();
|
||||
build(); paintGo();
|
||||
}).catch(function () { SIM = []; build(); });
|
||||
fetch('/api/mp/public/mama-box/plaza/comments?kind=post&target=' + encodeURIComponent(PID) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
|
||||
fetchReal();
|
||||
}
|
||||
function fetchReal() {
|
||||
return fetch('/api/mp/public/mama-box/plaza/comments?kind=post&target=' + encodeURIComponent(PID) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
|
||||
.then(function (r) { return r.json(); }).then(function (j) {
|
||||
var R = j && j.code === 200 && j.result || {};
|
||||
if (R.starLikes) STAR_N = R.starLikes;
|
||||
REAL = (R.list || []).filter(top).map(realOf).concat((R.mine || []).filter(function (c) { return top(c) && c.status !== 'rejected'; }).map(function (c) {
|
||||
var o = realOf(c); o.n = '我'; o.me = 1; o.st = c.status; return o; }));
|
||||
build();
|
||||
}).catch(function () { REAL = []; build(); });
|
||||
var mine = (R.mine || []).filter(function (c) { return c.status !== 'rejected'; });
|
||||
REAL = (R.list || []).filter(top).map(realOf).concat(mine.filter(top).map(function (c) { var o = realOf(c); o.n = '我'; o.me = 1; o.st = c.status; return o; }));
|
||||
RREP = (R.list || []).filter(function (c) { return !top(c); }).map(function (c) { return repOf(c, 0); })
|
||||
.concat(mine.filter(function (c) { return !top(c); }).map(function (c) { return repOf(c, 1); }));
|
||||
build(); paintGo();
|
||||
}).catch(function () { if (!REAL) { REAL = []; build(); } });
|
||||
}
|
||||
var top = function (c) { return !c.parent; };
|
||||
function realOf(c) {
|
||||
return { key: 'r' + c.id, id: c.id, real: 1, n: c.nickname || '孕妈', av: c.avatar || 'assets/img/mom/k01.jpg', s: c.stage, t: c.text,
|
||||
likes: c.likes || 0, liked: !!c.liked, star: !!c.star, ts: c.at, r: [] };
|
||||
}
|
||||
var wkOf = function (c) { var m = /孕\s*(\d+)\s*周/.exec(c.s || ''); return m ? +m[1] : 0; };
|
||||
var wkOf = function (c) { var x = /孕\s*(\d+)\s*周/.exec(c.s || ''); return x ? +x[1] : 0; };
|
||||
var likesOf = function (c) { return c.real ? c.likes : c.likes + (LIKE[c.key] ? 1 : 0); };
|
||||
var likedOf = function (c) { return c.real ? c.liked : !!LIKE[c.key]; };
|
||||
/* 最热：赞多的在前（挂了星的真实留言再往前提）；最新：真实留言按时间，模拟的接在后面；同孕周：和我差 ±1 周的，按最热 */
|
||||
/* 最热：挂了星的在前，再按赞；最新：真实留言按时间，模拟的接在后面；同孕周：和我差 ±1 周的，按最热。我自己发的永远在最上面 */
|
||||
function sorted() {
|
||||
var mine = REAL.filter(function (c) { return c.me; }), rest = REAL.filter(function (c) { return !c.me; }).concat(SIM);
|
||||
var hot = function (a, b) { return (!!b.star - !!a.star) || (likesOf(b) - likesOf(a)); };
|
||||
@@ -76,37 +100,64 @@
|
||||
} else rest.sort(hot);
|
||||
return mine.sort(function (a, b) { return b.ts - a.ts; }).concat(rest);
|
||||
}
|
||||
function total() { return (REAL ? REAL.length : 0) + (SIM ? SIM.length : 0); }
|
||||
function paintGo() {
|
||||
var n = total();
|
||||
document.getElementById('wcmGoN').textContent = n ? n + ' 条' : '';
|
||||
var av = (SIM || []).slice(0, 3).map(function (c) { return '<img src="' + esc(c.av) + '" alt="">'; }).join('');
|
||||
document.getElementById('wcmGoAv').innerHTML = av;
|
||||
}
|
||||
function build() {
|
||||
if (!SIM || !REAL) return;
|
||||
ALL = sorted(); shown = 0; ls.innerHTML = '';
|
||||
document.getElementById('wcmN').textContent = (REAL.length + SIM.length) ? (REAL.length + SIM.length) + ' 条' : '';
|
||||
document.getElementById('wcmRule').textContent = '赞够 ' + STAR_N + ' 个挂上星星';
|
||||
document.getElementById('wcmN').textContent = total() ? total() + ' 条' : '';
|
||||
document.getElementById('wcmRule').textContent = '被赞 ' + STAR_N + ' 次就变成星星';
|
||||
if (!ALL.length) {
|
||||
ls.innerHTML = '<p class="wcm-e">' + (SORT === 'wk' ? (window.MB_WH_WEEK ? '同孕周的妈妈还没留言，说一句吧' : '填好预产期，就能看同孕周妈妈的留言') : '还没有留言') + '</p>';
|
||||
ls.innerHTML = '<p class="wcm-e">' + (SORT === 'wk' ? (window.MB_WH_WEEK ? '同孕周的妈妈还没留言，你先说一句吧' : '填好预产期，就能看同孕周妈妈说了啥') : '还没有人留言') + '</p>';
|
||||
more.hidden = true; return;
|
||||
}
|
||||
add(20);
|
||||
}
|
||||
function repsOf(c) {
|
||||
var x = c.r.slice();
|
||||
RREP.forEach(function (r) { if (r.p === c.key) x.push(r); });
|
||||
return x;
|
||||
}
|
||||
function item(c) {
|
||||
var on = likedOf(c);
|
||||
return '<div class="wcm-it"><img class="wcm-av" src="' + esc(c.av) + '" alt="" loading="lazy" onerror="this.style.visibility=\'hidden\'">' +
|
||||
var on = likedOf(c), rp = repsOf(c);
|
||||
return '<div class="wcm-it" data-k="' + esc(c.key) + '"><img class="wcm-av" src="' + esc(c.av) + '" alt="" loading="lazy" onerror="this.style.visibility=\'hidden\'">' +
|
||||
'<div class="wcm-bd"><p class="wcm-nm"><b>' + esc(c.n) + '</b>' + (c.s ? '<span>' + esc(c.s) + '</span>' : '') + (c.ts ? '<span>' + ago(c.ts) + '</span>' : '') + '</p>' +
|
||||
'<p class="wcm-tx">' + esc(c.t) + '</p>' + (c.st === 'pending' ? '<p class="wcm-st">审核中 · 通过后大家才能看到</p>' : '') +
|
||||
(c.star ? '<p class="wcm-star"><svg viewBox="0 0 20 20"><path d="M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z"/></svg>已挂上星星</p>' : '') +
|
||||
(c.r.length ? '<div class="wcm-rp">' + c.r.map(function (x) { return '<p><b>' + esc(x.n) + '</b>：' + esc(x.t) + '</p>'; }).join('') + '</div>' : '') + '</div>' +
|
||||
(c.me ? '<span class="wcm-lk me"><svg viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0112 7.6a4.3 4.3 0 017.5 2.7c0 5.6-7.5 10.2-7.5 10.2z"/></svg><span>' + fmt(likesOf(c)) + '</span></span></div>' :
|
||||
'<button type="button" class="wcm-lk' + (on ? ' on' : '') + '" data-wcl="' + esc(c.key) + '" aria-label="赞"><svg viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0112 7.6a4.3 4.3 0 017.5 2.7c0 5.6-7.5 10.2-7.5 10.2z"/></svg><span>' + fmt(likesOf(c)) + '</span></button></div>');
|
||||
'<p class="wcm-tx">' + esc(c.t) + '</p>' + (c.st === 'pending' ? '<p class="wcm-st">审核中，通过了大家才看得到</p>' : '') +
|
||||
(c.star ? '<p class="wcm-star"><svg viewBox="0 0 20 20"><path d="M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z"/></svg>已经变成星星了</p>' : '') +
|
||||
(rp.length ? '<div class="wcm-rp">' + rp.map(function (x) {
|
||||
return '<p' + (x.me ? ' class="me"' : '') + '><b>' + esc(x.n) + '</b>' + (x.to && x.to !== c.n ? ' 回复 <b>' + esc(x.to) + '</b>' : '') + '：' + esc(x.t) +
|
||||
(x.st === 'pending' ? '<span class="wcm-st">（审核中）</span>' : '') + '</p>';
|
||||
}).join('') + '</div>' : '') +
|
||||
(c.me ? '' : '<button type="button" class="wcm-re" data-wrp="' + esc(c.key) + '">回复</button>') + '</div>' +
|
||||
(c.me ? '<span class="wcm-lk me">' + HEART + '<span>' + fmt(likesOf(c)) + '</span></span></div>' :
|
||||
'<button type="button" class="wcm-lk' + (on ? ' on' : '') + '" data-wcl="' + esc(c.key) + '" aria-label="赞">' + HEART + '<span>' + fmt(likesOf(c)) + '</span></button></div>');
|
||||
}
|
||||
function add(k) {
|
||||
ls.insertAdjacentHTML('beforeend', ALL.slice(shown, shown + k).map(item).join(''));
|
||||
shown = Math.min(ALL.length, shown + k); more.hidden = shown >= ALL.length;
|
||||
}
|
||||
function rerender(c) { var el = ls.querySelector('.wcm-it[data-k="' + CSS.escape(c.key) + '"]'); if (el) el.outerHTML = item(c); }
|
||||
more.addEventListener('click', function () { add(30); });
|
||||
/* 用首页同一个 #toast（app.js 的 toast 在闭包里拿不到，这里照它的写法） */
|
||||
var tT;
|
||||
function toast(t) { var x = document.getElementById('toast'); if (!x) return; x.textContent = t; x.classList.add('show'); clearTimeout(tT); tT = setTimeout(function () { x.classList.remove('show'); }, 1800); }
|
||||
|
||||
/* ---------- 点赞 / 回复 ---------- */
|
||||
function paintLk(b, c) { var on = likedOf(c); b.classList.toggle('on', on); b.querySelector('span').textContent = fmt(likesOf(c)); }
|
||||
var REPLY = null;
|
||||
function setReply(c) {
|
||||
REPLY = c;
|
||||
toEl.hidden = !c; toEl.textContent = c ? '回复 ' + c.n : '';
|
||||
inp.placeholder = c ? '回复 ' + c.n + '…' : '说点什么…';
|
||||
}
|
||||
ls.addEventListener('click', function (e) {
|
||||
var r = e.target.closest('[data-wrp]');
|
||||
if (r) {
|
||||
var rc = ALL.filter(function (x) { return x.key === r.dataset.wrp; })[0]; if (!rc) return;
|
||||
setReply(rc); snap('full'); inp.focus(); return;
|
||||
}
|
||||
var b = e.target.closest('[data-wcl]'); if (!b) return;
|
||||
var k = b.dataset.wcl, c = ALL.filter(function (x) { return x.key === k; })[0]; if (!c) return;
|
||||
if (!c.real) {
|
||||
@@ -121,49 +172,118 @@
|
||||
c.liked = true; c.likes++; paintLk(b, c); b.classList.add('pop'); setTimeout(function () { b.classList.remove('pop'); }, 500);
|
||||
if (navigator.vibrate) navigator.vibrate(8);
|
||||
fetch('/api/mp/public/mama-box/plaza/comment/like?openid=' + encodeURIComponent(OID) + '&id=' + encodeURIComponent(c.id), { method: 'POST' })
|
||||
.then(function (r) { return r.json(); }).then(function (j) {
|
||||
.then(function (x) { return x.json(); }).then(function (j) {
|
||||
if (!j || j.code !== 200) throw j;
|
||||
c.likes = j.result.likes; var was = c.star; c.star = !!j.result.star; paintLk(b, c);
|
||||
if (c.star && !was) { toast('这句被赞够 ' + STAR_N + ' 次，挂上星星啦'); var it = b.closest('.wcm-it'); if (it) it.outerHTML = item(c); }
|
||||
if (c.star && !was) { toast('被赞够 ' + STAR_N + ' 次，这句变成星星啦'); rerender(c); }
|
||||
}).catch(function (j) { c.liked = false; c.likes--; paintLk(b, c); toast((j && j.message) || '网络不太好，再点一次试试'); });
|
||||
});
|
||||
box.querySelector('.wcm-tb').addEventListener('click', function (e) {
|
||||
sh.querySelector('.wcm-tb').addEventListener('click', function (e) {
|
||||
var b = e.target.closest('[data-wso]'); if (!b || b.dataset.wso === SORT) return;
|
||||
SORT = b.dataset.wso;
|
||||
[].forEach.call(this.querySelectorAll('[data-wso]'), function (x) { x.classList.toggle('on', x === b); });
|
||||
build();
|
||||
build(); lsBox.scrollTop = 0;
|
||||
});
|
||||
|
||||
function post(text, week, reply) {
|
||||
if (!OID) return Promise.resolve('登录后就能留言啦');
|
||||
var body = { kind: 'post', target: PID, title: '孕妈悄悄话 · ' + TH.name, text: text, stage: week ? '孕 ' + week + ' 周' : '' };
|
||||
if (reply) { body.parent = reply.key; body.parentName = reply.n; }
|
||||
return fetch('/api/mp/public/mama-box/plaza/comment?openid=' + encodeURIComponent(OID), {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
|
||||
}).then(function (r) { return r.json(); }).then(function (j) {
|
||||
if (!j || j.code !== 200 || !j.result) return (j && j.message) || '没发出去，再试一次';
|
||||
if (reply) { RREP.push(repOf(j.result, 1)); rerender(reply); }
|
||||
else {
|
||||
var o = realOf(j.result); o.n = '我'; o.me = 1; o.st = j.result.status;
|
||||
REAL = [o].concat(REAL || []);
|
||||
if (SIM) { build(); lsBox.scrollTop = 0; }
|
||||
paintGo();
|
||||
}
|
||||
return null;
|
||||
}).catch(function () { return '网络不太好，再试一次'; });
|
||||
}
|
||||
var busy = false;
|
||||
function send() {
|
||||
var t = inp.value.trim();
|
||||
if (t.length < 2) { toast('多写一两个字吧'); return; }
|
||||
if (busy) return; busy = true; sendB.disabled = true;
|
||||
post(t, +window.MB_WH_WEEK || 0, REPLY).then(function (msg) {
|
||||
busy = false; sendB.disabled = false;
|
||||
if (msg) { toast(msg); return; }
|
||||
inp.value = ''; inp.blur(); setReply(null);
|
||||
toast('发出去了，审核通过后大家就能看到');
|
||||
});
|
||||
}
|
||||
sendB.addEventListener('click', send);
|
||||
inp.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); send(); } });
|
||||
|
||||
/* ---------- 半屏面板：开 / 关 / 拖 ----------
|
||||
面板高 = 星空页 68%（上面至少留 1/3 星空）；half = 露出 50%，full = 露出 68%，再往上拉不动；往下拖过一半关掉 */
|
||||
var state = 'closed';
|
||||
function ph() { return page.clientHeight; }
|
||||
function H() { return P.offsetHeight; }
|
||||
function offFor(s) { return s === 'full' ? 0 : s === 'half' ? Math.max(0, H() - ph() * .5) : H() + 20; }
|
||||
function setY(y, anim) { P.style.transition = anim ? '' : 'none'; P.style.transform = 'translateY(' + y + 'px)'; }
|
||||
function snap(s) {
|
||||
state = s;
|
||||
sh.classList.toggle('show', s !== 'closed');
|
||||
sh.setAttribute('aria-hidden', s === 'closed' ? 'true' : 'false');
|
||||
setY(offFor(s), true);
|
||||
if (s === 'closed') { inp.blur(); setReply(null); }
|
||||
}
|
||||
function open() { load(); snap('half'); }
|
||||
go.addEventListener('click', open);
|
||||
sh.querySelector('.wcs-x').addEventListener('click', function () { snap('closed'); });
|
||||
sh.addEventListener('click', function (e) { if (e.target === sh) snap('closed'); });
|
||||
/* 右上角「全部」也开这个面板（原来那个只列悄悄话的抽屉不再用） */
|
||||
var all = document.getElementById('whvAll');
|
||||
if (all) all.addEventListener('click', function (e) { e.stopImmediatePropagation(); open(); }, true);
|
||||
/* 入口上往上划也能拉开 */
|
||||
var gy = null;
|
||||
go.addEventListener('touchstart', function (e) { gy = e.touches[0].clientY; }, { passive: true });
|
||||
go.addEventListener('touchmove', function (e) { if (gy != null && gy - e.touches[0].clientY > 24) { gy = null; open(); } }, { passive: true });
|
||||
/* 拖：抓把手 / 标题拖；列表在顶上时往下拖 = 拖面板；半屏时在列表上往上划 = 先把面板拉满 */
|
||||
var d0 = null;
|
||||
P.addEventListener('touchstart', function (e) {
|
||||
if (e.touches.length !== 1 || e.target.closest('.wcs-in')) return;
|
||||
d0 = { y: e.touches[0].clientY, base: offFor(state), hd: !!e.target.closest('.wcs-hd'), drag: false, t: Date.now() };
|
||||
}, { passive: true });
|
||||
P.addEventListener('touchmove', function (e) {
|
||||
if (!d0) return;
|
||||
var dy = e.touches[0].clientY - d0.y;
|
||||
if (!d0.drag) {
|
||||
if (Math.abs(dy) < 6) return;
|
||||
var canDown = dy > 0 && (d0.hd || lsBox.scrollTop <= 0);
|
||||
var canUp = dy < 0 && (d0.hd || state === 'half');
|
||||
if (!canDown && !canUp) { d0 = null; return; }
|
||||
d0.drag = true;
|
||||
}
|
||||
if (e.cancelable) e.preventDefault();
|
||||
setY(Math.min(H() + 20, Math.max(0, d0.base + dy)), false);
|
||||
}, { passive: false });
|
||||
P.addEventListener('touchend', function (e) {
|
||||
if (!d0) return;
|
||||
var dd = d0; d0 = null;
|
||||
if (!dd.drag) return;
|
||||
var dy = e.changedTouches[0].clientY - dd.y, y = dd.base + dy, v = dy / Math.max(1, Date.now() - dd.t);
|
||||
if (v > .6 || y > H() - ph() * .25) snap('closed');
|
||||
else if (v < -.4 || y < offFor('half') / 2) snap('full');
|
||||
else snap('half');
|
||||
});
|
||||
|
||||
/* 关掉星空页时面板一起收 */
|
||||
new MutationObserver(function () {
|
||||
if (page.classList.contains('show')) load(); else snap('closed');
|
||||
}).observe(page, { attributes: true, attributeFilter: ['class'] });
|
||||
if (page.classList.contains('show')) load();
|
||||
|
||||
/* 星空页「说一句」→ 发成留言（app.js 的 #whSend 调）。返回 Promise：resolve(null) = 成功，resolve('提示') = 没发出去 */
|
||||
window.MBWhCm = {
|
||||
starLikes: function () { return STAR_N; },
|
||||
post: function (text, week) {
|
||||
if (!OID) return Promise.resolve('登录后就能说一句啦');
|
||||
return fetch('/api/mp/public/mama-box/plaza/comment?openid=' + encodeURIComponent(OID), {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ kind: 'post', target: PID, title: '孕妈悄悄话 · ' + TH.name, text: text, stage: week ? '孕 ' + week + ' 周' : '' })
|
||||
}).then(function (r) { return r.json(); }).then(function (j) {
|
||||
if (!j || j.code !== 200 || !j.result) return (j && j.message) || '没发出去，再试一次';
|
||||
var o = realOf(j.result); o.n = '我'; o.me = 1; o.st = j.result.status;
|
||||
REAL = [o].concat(REAL || []);
|
||||
if (SIM) { build(); box.scrollTo({ top: box.querySelector('.wcm-hd').offsetTop + box.querySelector('.wcm-sp').offsetHeight - 80, behavior: 'smooth' }); }
|
||||
return null;
|
||||
}).catch(function () { return '网络不太好，再试一次'; });
|
||||
}
|
||||
return post(text, week, null).then(function (msg) { if (!msg) setTimeout(function () { snap('half'); }, 400); return msg; });
|
||||
},
|
||||
open: open
|
||||
};
|
||||
/* 11-07 用户：页面滑不动 —— 原来垫高层 pointer-events:none，手机上按在星空上滑，滚动不归 #wcm。
|
||||
现在整层都接触摸（按哪都能滑），点在垫高层上就把点击转给底下的星星 / 顶栏按钮 / 内容卡 */
|
||||
var sp = box.querySelector('.wcm-sp');
|
||||
sp.addEventListener('click', function (e) {
|
||||
box.style.pointerEvents = 'none';
|
||||
var el = document.elementFromPoint(e.clientX, e.clientY);
|
||||
box.style.pointerEvents = '';
|
||||
if (el && el !== sp && page.contains(el)) el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, clientX: e.clientX, clientY: e.clientY }));
|
||||
});
|
||||
/* 上滑过半：面板压暗星空的那层渐变加深，「上滑看看」收起 */
|
||||
box.addEventListener('scroll', function () { box.classList.toggle('up', box.scrollTop > 40); }, { passive: true });
|
||||
/* 进星空页才拉数据；关掉回到顶部 */
|
||||
new MutationObserver(function () {
|
||||
if (page.classList.contains('show')) load(); else { box.scrollTop = 0; box.classList.remove('up'); }
|
||||
}).observe(page, { attributes: true, attributeFilter: ['class'] });
|
||||
if (page.classList.contains('show')) load();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user