fix: render Step1 term HTML via safeHtml, step header back goes one card

Made-with: Cursor
This commit is contained in:
posimai 2026-04-19 15:48:36 +09:00
parent b5b9b2f88f
commit 0f2ae7f332
3 changed files with 44 additions and 3 deletions

View File

@ -660,7 +660,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
<i data-lucide="layers" style="width:13px;height:13px"></i>
3ステップで学ぶ
</div>
<button class="btn-sm" type="button" @click="exitStepMode()">
<button class="btn-sm" type="button" @click="stepGoBack()" aria-label="1つ前に戻る">
<i data-lucide="arrow-left" style="width:11px;height:11px"></i>
戻る
</button>
@ -681,7 +681,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
<div class="flash-card" role="button" tabindex="0" :aria-expanded="stepFlashRevealed || !keypointHasFlip(stepKpIdx)"
@click="advanceStep1Card()" @keydown.enter.prevent="advanceStep1Card()" @keydown.space.prevent="advanceStep1Card()">
<div class="flash-card-front" x-show="!stepFlashRevealed && keypointHasFlip(stepKpIdx)">
<div class="flash-card-term" x-text="keypointTerm(stepKpIdx)"></div>
<div class="flash-card-term" x-html="safeHtml(keypointTerm(stepKpIdx))"></div>
<div class="flash-card-hint">タップして全文を表示</div>
</div>
<div class="flash-card-back" x-show="stepFlashRevealed"

View File

@ -409,6 +409,47 @@ document.addEventListener('alpine:init', () => {
this.stepMode=false;
this.$nextTick(()=>{ if(window.lucide) lucide.createIcons(); });
},
/** ヘッダ「戻る」: 同一ステップ内なら1枚前、先頭なら3ステップを終了 */
stepGoBack(){
if(!this.stepMode) return;
if(this.stepStep===1){
if(this.stepKpIdx>0){
this.stepKpIdx--;
this.resetFlashRevealState();
} else {
this.exitStepMode();
}
} else if(this.stepStep===2){
if(this.stepDrillIdx>0){
this.stepDrillIdx--;
this.stepDrillAnswered=false;
this.stepDrillSelected=-1;
} else {
const kps=this.currentUnit?.keypoints||[];
this.stepStep=1;
this.stepKpIdx=Math.max(0,kps.length-1);
this.resetFlashRevealState();
}
} else if(this.stepStep===3){
const drills=this.unitDrills;
if(drills.length>0){
this.stepStep=2;
this.stepDrillIdx=drills.length-1;
this.stepDrillAnswered=false;
this.stepDrillSelected=-1;
} else {
const kps=this.currentUnit?.keypoints||[];
this.stepStep=1;
this.stepKpIdx=Math.max(0,kps.length-1);
this.resetFlashRevealState();
}
}
this.$nextTick(()=>{
if(window.lucide) lucide.createIcons();
const m=document.getElementById('main');
if(m) m.scrollTo({top:0,behavior:'smooth'});
});
},
stepPipCls(n){
if(this.stepStep===n) return 's-active';
if(this.stepStep>n) return 's-done';

2
sw.js
View File

@ -1,5 +1,5 @@
// posimai-boki SW — stale-while-revalidate + skipWaiting
const CACHE = 'posimai-boki-v14';
const CACHE = 'posimai-boki-v15';
const STATIC = ['/', '/index.html', '/manifest.json', '/logo.png', '/js/app.js', '/js/data/drills.js', '/js/data/categories.js'];
self.addEventListener('install', e => {