Skip to content

Commit

Permalink
feat: hide-all-test-one tag for clozes, incremental list
Browse files Browse the repository at this point in the history
  • Loading branch information
@debanjandhar12
debanjandhar12 committed Feb 4, 2024
1 parent a3adb18 commit 1089fc5
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 99 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "logseq-anki-sync",
"version": "6.0.1",
"version": "6.0.4",
"title": "Logseq Anki Sync",
"description": "An logseq to anki syncing plugin with superpowers - image occlusion, card direction, incremental cards, and a lot more.",
"main": "dist/index.html",
Expand Down
4 changes: 2 additions & 2 deletions src/notes/ClozeNote.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ export class ClozeNote extends Note {
background: unset !important;
text-decoration: underline 1px dashed var(--ls-primary-text-color) !important;
text-underline-position: under !important;
}
.anki-cloze:hover {
}
.anki-cloze:hover {
color: var(--ls-primary-text-color) !important;
background: unset !important;
}
Expand Down
10 changes: 9 additions & 1 deletion src/notes/MultilineCardNote.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ export class MultilineCardNote extends Note {
["editor/input", `#card #incremental`],
["editor/clear-current-slash"],
]);
logseq.Editor.registerSlashCommand("Card (Incremental + Hide all, Test one)", [
["editor/input", `#card #incremental #hide-all-test-one`],
["editor/clear-current-slash"],
]);
logseq.provideStyle(`
.page-reference[data-ref=flashcard], a[data-ref=flashcard] {
opacity: .3;
Expand All @@ -66,7 +70,10 @@ export class MultilineCardNote extends Note {
.page-reference[data-ref^=depth-], a[data-ref^=depth-] {
opacity: .3;
}
.page-reference[data-ref=flashcard], a[data-ref=card-group] {
.page-reference[data-ref=card-group], a[data-ref=card-group] {
opacity: .3;
}
.page-reference[data-ref=hide-all-test-one], a[data-ref=hide-all-test-one] {
opacity: .3;
}
`);
Expand All @@ -76,6 +83,7 @@ export class MultilineCardNote extends Note {
LogseqProxy.Editor.createPageSilentlyIfNotExists("reversed");
LogseqProxy.Editor.createPageSilentlyIfNotExists("bidirectional");
LogseqProxy.Editor.createPageSilentlyIfNotExists("incremental");
LogseqProxy.Editor.createPageSilentlyIfNotExists("hide-all-test-one");
};

private getCardDirection(): string {
Expand Down
2 changes: 2 additions & 0 deletions src/templates/AnkiCardTemplates.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,14 @@ function getTemplate() {
export function getTemplateFront() {
return `<script src="_logseq_anki_sync_front.js" type='text/javascript' async=false defer=false></script>
${getTemplate()}
<span style="display: none" class="anki-card-front-side"></span>
<link rel="stylesheet" href="_logseq_anki_sync_front.css">`;
}

export function getTemplateBack() {
return `<script src="_logseq_anki_sync_back.js" type='text/javascript' async=false defer=false></script>
${getTemplate()}
<span style="display: none" class="anki-card-back-side"></span>
<link rel="stylesheet" href="_logseq_anki_sync_back.css">`;
}

Expand Down
5 changes: 5 additions & 0 deletions src/templates/_logseq_anki_sync.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ p {
color: blue;
}

.cloze-inactive-hidden {
font-weight: bold;
/* coloring for this element is handled in _logseq_anki_sync_front.js */
}

.extra {
background-color: antiquewhite;
border-radius: 4px;
Expand Down
4 changes: 4 additions & 0 deletions src/templates/_logseq_anki_sync_back.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
*/

const onLoadHandler = () => {
if (!document.getElementsByClassName("anki-card-back-side")[0]) {
console.log("Not front side of anki card")
return;
}
if (type == "image_occlusion") {
// Show the main content
document.getElementById("main-content").style.visibility = "visible";
Expand Down
232 changes: 137 additions & 95 deletions src/templates/_logseq_anki_sync_front.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,106 +6,148 @@ import {createOcclusionRectEl} from "../ui/customized/OcclusionEditor";
import path from "path-browserify";

const onLoadHandler = () => {
if (window.type == "image_occlusion") {
// Get current cloze id (only works for image occlusion)
let currentClozeId = "-1";
for (let i = 1; i <= 9; i++)
if (document.getElementById(`c${i}`)) currentClozeId = `${i}`;
console.log(`Current cloze id: ${currentClozeId}`);
if (currentClozeId == "-1") return;
if (!document.getElementById("localImgBasePath")) return;
// Get localImgBasePath
let localImgBasePath = document.getElementById("localImgBasePath").src;
localImgBasePath = localImgBasePath.substring(0, localImgBasePath.lastIndexOf("/"));
// Replace all images with canvas
let imgToCanvasListHashMap = {};
let images = Array.from(document.getElementsByTagName("img"));
for (let image of images) {
image.style.visibility = "hidden";
let canvasEl = document.createElement("canvas");
canvasEl.width = image.width;
canvasEl.height = image.height;
let canvas = new fabric.Canvas(canvasEl, {
imageSmoothingEnabled: false,
if (!document.getElementsByClassName("anki-card-front-side")[0]) {
console.log("Not front side of anki card")
return;
}
handleImageOcclusion();
handleShowAllTestOneTagForClozesAndMultilineIncrementalCards();
};

function handleImageOcclusion() {
if (window.type !== "image_occlusion") return;

// Get current cloze id (only works for image occlusion)
let currentClozeId = "-1";
for (let i = 1; i <= 9; i++)
if (document.getElementById(`c${i}`)) currentClozeId = `${i}`;
console.log(`Current cloze id: ${currentClozeId}`);
if (currentClozeId == "-1") return;
if (!document.getElementById("localImgBasePath")) return;
// Get localImgBasePath
let localImgBasePath = document.getElementById("localImgBasePath").src;
localImgBasePath = localImgBasePath.substring(0, localImgBasePath.lastIndexOf("/"));
// Replace all images with canvas
let imgToCanvasListHashMap = {};
let images = Array.from(document.getElementsByTagName("img"));
for (let image of images) {
image.style.visibility = "hidden";
let canvasEl = document.createElement("canvas");
canvasEl.width = image.width;
canvasEl.height = image.height;
let canvas = new fabric.Canvas(canvasEl, {
imageSmoothingEnabled: false,
});
let imgEl = new Image();
imgEl.src = image.src;
imgEl.onload = function () {
let imgFabric = new fabric.Image(imgEl);
let scaleX = canvas.width / imgFabric.width,
scaleY = canvas.height / imgFabric.height;
canvas.setViewportTransform([scaleX, 0, 0, scaleY, 0, 0]);
canvas.setBackgroundImage(imgFabric, canvas.renderAll.bind(canvas), {
scaleX: 1,
scaleY: 1,
});
let imgEl = new Image();
imgEl.src = image.src;
imgEl.onload = function () {
let imgFabric = new fabric.Image(imgEl);
let scaleX = canvas.width / imgFabric.width,
scaleY = canvas.height / imgFabric.height;
canvas.setViewportTransform([scaleX, 0, 0, scaleY, 0, 0]);
canvas.setBackgroundImage(imgFabric, canvas.renderAll.bind(canvas), {
scaleX: 1,
scaleY: 1,
});
};
canvasEl.style.position = "relative";
image.replaceWith(canvasEl);
if (imgToCanvasListHashMap[image.src] == null)
imgToCanvasListHashMap[image.src] = [];
imgToCanvasListHashMap[image.src].push(canvas);
}
};
canvasEl.style.position = "relative";
image.replaceWith(canvasEl);
if (imgToCanvasListHashMap[image.src] == null)
imgToCanvasListHashMap[image.src] = [];
imgToCanvasListHashMap[image.src].push(canvas);
}

// Show the main content (without images)
document.getElementById("main-content").style.visibility = "visible";
// Show the main content (without images)
document.getElementById("main-content").style.visibility = "visible";

// Iterate the images in imgToOcclusionDataHashMap and inject the canvas into dom instead of images
let imgToOcclusionDataHashMap = JSON.parse(
document.getElementById("imgToOcclusionDataHashMap").innerHTML,
);
for (let image in imgToOcclusionDataHashMap) {
let occlusionElements = imgToOcclusionDataHashMap[image].elements;
let occlusionConfig = imgToOcclusionDataHashMap[image].config;
console.log(occlusionConfig);
occlusionElements.forEach((occlusionElem) => {
let canvasList =
imgToCanvasListHashMap[localImgBasePath + "/" + path.basename(image)] ||
imgToCanvasListHashMap[
encodeURI(localImgBasePath + "/" + path.basename(image))
// Iterate the images in imgToOcclusionDataHashMap and inject the canvas into dom instead of images
let imgToOcclusionDataHashMap = JSON.parse(
document.getElementById("imgToOcclusionDataHashMap").innerHTML,
);
for (let image in imgToOcclusionDataHashMap) {
let occlusionElements = imgToOcclusionDataHashMap[image].elements;
let occlusionConfig = imgToOcclusionDataHashMap[image].config;
console.log(occlusionConfig);
occlusionElements.forEach((occlusionElem) => {
let canvasList =
imgToCanvasListHashMap[localImgBasePath + "/" + path.basename(image)] ||
imgToCanvasListHashMap[
encodeURI(localImgBasePath + "/" + path.basename(image))
] ||
imgToCanvasListHashMap[image] ||
imgToCanvasListHashMap[encodeURI(image)] ||
[];
if (occlusionElem.cId == currentClozeId) {
canvasList.forEach((canvas) => {
let occlusion = createOcclusionRectEl(
occlusionElem.left,
occlusionElem.top,
occlusionElem.width,
occlusionElem.height,
occlusionElem.angle,
occlusionElem.cId,
);
occlusion._objects[0].set("opacity", 1);
canvas.add(occlusion);
canvas.renderAll();
});
} else if (
occlusionElem.cId != currentClozeId &&
occlusionConfig.hideAllTestOne == true
) {
canvasList.forEach((canvas) => {
let occlusion = createOcclusionRectEl(
occlusionElem.left,
occlusionElem.top,
occlusionElem.width,
occlusionElem.height,
occlusionElem.angle,
occlusionElem.cId,
);
occlusion._objects[0].set("opacity", 1);
occlusion._objects[0].set("fill", "#3b4042");
occlusion._objects[0].set("stroke", "#2a3942");
occlusion._objects[1].set("opacity", 0);
canvas.add(occlusion);
canvas.renderAll();
});
}
});
}
imgToCanvasListHashMap[image] ||
imgToCanvasListHashMap[encodeURI(image)] ||
[];
if (occlusionElem.cId == currentClozeId) {
canvasList.forEach((canvas) => {
let occlusion = createOcclusionRectEl(
occlusionElem.left,
occlusionElem.top,
occlusionElem.width,
occlusionElem.height,
occlusionElem.angle,
occlusionElem.cId,
);
occlusion._objects[0].set("opacity", 1);
canvas.add(occlusion);
canvas.renderAll();
});
} else if (
occlusionElem.cId != currentClozeId &&
occlusionConfig.hideAllTestOne == true
) {
canvasList.forEach((canvas) => {
let occlusion = createOcclusionRectEl(
occlusionElem.left,
occlusionElem.top,
occlusionElem.width,
occlusionElem.height,
occlusionElem.angle,
occlusionElem.cId,
);
occlusion._objects[0].set("opacity", 1);
occlusion._objects[0].set("fill", "#3b4042");
occlusion._objects[0].set("stroke", "#2a3942");
occlusion._objects[1].set("opacity", 0);
canvas.add(occlusion);
canvas.renderAll();
});
}
});
}
};
}

function handleShowAllTestOneTagForClozesAndMultilineIncrementalCards() {
if (window.type !== "multiline_card" && window.type !== "cloze") return;
if (!document.getElementById('tags').getAttribute('tags_name').split(' ')
.includes('hide-all-test-one')) return; // If the card does not have the tag, do nothing

[...document.getElementsByClassName('cloze-inactive')].forEach((el) => {
function hideElement(el) {
if (el.classList.contains('cloze-inactive-hidden')) return;
el.classList.add('cloze-inactive-hidden');
el.setAttribute('data-html-content', el.innerHTML);
el.innerHTML = "[...]";
el.style.color = "rgb(115, 115, 115)";
el.style.cursor = "pointer";
}
function showElement(el) {
if (!el.classList.contains('cloze-inactive-hidden')) return;
el.classList.remove('cloze-inactive-hidden');
el.innerHTML = el.getAttribute('data-html-content');
}
function toggleVisibility(el) {
if (el.classList.contains('cloze-inactive-hidden')) {
showElement(el);
} else {
hideElement(el);
}
}
el.onclick = function() {
toggleVisibility(el);
}
hideElement(el);
});
}

if (document.readyState === "complete") {
onLoadHandler();
Expand Down

0 comments on commit 1089fc5

Please sign in to comment.