Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT]: Add a Show Card back only button #1185

Open
liweibiao opened this issue Dec 8, 2024 · 0 comments
Open

[FEAT]: Add a Show Card back only button #1185

liweibiao opened this issue Dec 8, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@liweibiao
Copy link

liweibiao commented Dec 8, 2024

Is your feature request related to a problem? Please describe.

After the card is flipped, sometimes the screen is not high enough to show both sides

Describe the solution you'd like

Add a Show Card back only button
Snipaste_2024-12-08_10-30-58

Additional context

main.js
搜createCardControls

  // -> Controls
  _createCardControls() {
    this._createEditButton();
    this._createResetButton();
    this._createCardInfoButton();
	this.createShowBackButton();//添加按钮
    this._createSkipButton();
  }

搜View Card Info

  _createCardInfoButton() {
    this.infoButton = this.controls.createEl("button");
    this.infoButton.addClasses(["sr-button", "sr-info-button"]);
    (0, import_obsidian6.setIcon)(this.infoButton, "info");
    this.infoButton.setAttribute("aria-label", "View Card Info");
    this.infoButton.addEventListener("click", async () => {
      this._displayCurrentCardInfoNotice();
    });
  }
//添加以下代码,为按钮添加点击事件
  _createShowBackButton() {
    this.showBackButton = this.controls.createEl("button");
    this.showBackButton.addClasses(["sr-button", "sr-flip-button"]);
    (0, import_obsidian5.setIcon)(this.showBackButton, "eye");
    this.showBackButton.setAttribute("aria-label", "仅显示卡片背面");

    // 初始化状态为显示
    this.showBackButton.setAttribute("data-is-back-visible", "true");

    // 添加点击事件监听器
    this.showBackButton.addEventListener("click", async () => {
        // 获取当前状态
        const isBackVisible = this.showBackButton.getAttribute("data-is-back-visible") === "true";

        // 切换隐藏/显示 #sr-content 的第一个子元素 p
        const firstChildP = this.content.querySelector("p:first-child");
        if (firstChildP) {
            if (isBackVisible) {
                firstChildP.style.display = "none";
            } else {
                firstChildP.style.display = "block";
            }

            // 更新状态
            this.showBackButton.setAttribute("data-is-back-visible", isBackVisible ? "false" : "true");
            // 根据状态切换图标
            if (isBackVisible) {
                import_obsidian5.setIcon(this.showBackButton, "eye-off");
            } else {
                import_obsidian5.setIcon(this.showBackButton, "eye");
            }			
        }
    });
}  

搜_showAnswer

  _showAnswer() {
    const timeNow = (0, import_moment4.now)();
    if (this.lastPressed && timeNow - this.lastPressed < this.plugin.data.settings.reviewButtonDelay) {
      return;
    }
    this.lastPressed = timeNow;
    this.mode = 2 /* Back */;
    this.resetButton.disabled = false;
// ----------------注释问题答案之间的分隔线--------------
    //if (this._currentQuestion.questionType !== 4 /* Cloze */) {
      /*const hr = document.createElement("hr");
      hr.addClass("sr-card-divide");
      this.content.appendChild(hr);
    } else {
      this.content.empty();
    }*/
// ---------------- 检查按钮状态 ----------------
    const isBackVisible = this.showBackButton.getAttribute("data-is-back-visible") === "true";
    const firstChildP = this.sr-content.querySelector("p:first-child");
    if (firstChildP) {
        if (!isBackVisible) {
            firstChildP.style.display = "none";
        }
    }	
// -----------------------------------------
    wrapper.renderMarkdownWrapper(
      this._currentCard.back,
      this.content,
      this._currentQuestion.questionText.textDirection
    );
@liweibiao liweibiao added the enhancement New feature or request label Dec 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant