mirror of
https://github.com/ONLYOFFICE/onlyoffice.github.io.git
synced 2026-04-07 14:04:30 +08:00
changed the annotation pop-up window
This commit is contained in:
Artur
@ -34,6 +34,7 @@
|
||||
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
|
||||
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
|
||||
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
|
||||
<style id="pluginStyles"></style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Annotation popup</title>
|
||||
@ -45,13 +46,15 @@
|
||||
window.Asc.plugin.sendToPlugin("onWindowReady", {});
|
||||
window.Asc.plugin.attachEvent("onUpdateContent", function(obj) {
|
||||
document.body.innerHTML = obj.content;
|
||||
document.querySelectorAll('strong').forEach(function(el){
|
||||
el.style.color = obj.color;
|
||||
});
|
||||
if (obj.theme) {
|
||||
onThemeChanged(obj.theme);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.Asc.plugin.attachEvent("onThemeChanged", function(theme) {
|
||||
window.Asc.plugin.attachEvent("onThemeChanged", onThemeChanged);
|
||||
|
||||
function onThemeChanged(theme) {
|
||||
let backColor = theme["background-normal"];
|
||||
let textColor = theme["text-normal"];
|
||||
let borderColor = theme["border-divider"];
|
||||
@ -76,7 +79,29 @@
|
||||
for (let i = 0; i < ballonColorElements.length; i++) {
|
||||
ballonColorElements[i].style.background = ballonColor;
|
||||
}
|
||||
});
|
||||
|
||||
let textRules =
|
||||
".original { color: " +
|
||||
theme["border-error"] +
|
||||
"; }\n";
|
||||
if (theme.name !== "theme-white" && theme.name !== "theme-night") {
|
||||
textRules +=
|
||||
".corrected strong { color: " +
|
||||
"#009900" +
|
||||
"; }\n";
|
||||
}
|
||||
textRules += ".corrected strong { font-weight:normal; }\n";
|
||||
|
||||
let styleTheme = document.getElementById("pluginStyles");
|
||||
if (!styleTheme) {
|
||||
styleTheme = document.createElement("style");
|
||||
styleTheme.id = "pluginStyles";
|
||||
styleTheme.innerHTML = textRules;
|
||||
document.getElementsByTagName("head")[0].appendChild(styleTheme);
|
||||
} else {
|
||||
styleTheme.innerHTML = textRules;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -29,7 +29,7 @@
|
||||
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
*
|
||||
*/
|
||||
// @ts-check
|
||||
|
||||
/// <reference path="./types.js" />
|
||||
|
||||
function CustomAnnotationPopup()
|
||||
@ -85,35 +85,9 @@ function CustomAnnotationPopup()
|
||||
|
||||
let _t = this;
|
||||
popup.attachEvent("onWindowReady", function() {
|
||||
let name2color = {
|
||||
"theme-light": "#F62211",
|
||||
"theme-classic-light": "#D9534F",
|
||||
|
||||
"theme-dark": "#F62211",
|
||||
"theme-contrast-dark": "#F62211",
|
||||
|
||||
"theme-gray": "#F62211",
|
||||
|
||||
"theme-white": "#F23D3D",
|
||||
"theme-night": "#F23D3D"
|
||||
};
|
||||
let type2color = {
|
||||
"light": "#F62211",
|
||||
"dark": "#F62211"
|
||||
};
|
||||
|
||||
let color = type2color["light"];
|
||||
if (window.Asc.plugin.theme)
|
||||
{
|
||||
if (window.Asc.plugin.theme.Name && name2color[window.Asc.plugin.theme.Name])
|
||||
color = name2color[window.Asc.plugin.theme.Name];
|
||||
else if (window.Asc.plugin.theme.Type && type2color[window.Asc.plugin.theme.Type])
|
||||
color = type2color[window.Asc.plugin.theme.Type];
|
||||
}
|
||||
|
||||
popup.command("onUpdateContent", {
|
||||
content : _t.content,
|
||||
color : color
|
||||
theme : window.Asc.plugin.theme
|
||||
});
|
||||
});
|
||||
|
||||
@ -174,15 +148,15 @@ function CustomAnnotationPopup()
|
||||
<div style="padding:16px 16px 0px 16px;">
|
||||
|
||||
<div style="margin-bottom:12px;">
|
||||
<div class="text-color" style="font-size:11px; font-weight:700; color:${textColor}; margin-bottom:6px;">
|
||||
<div class="text-color" style="font-size:11px; font-weight:700; margin-bottom:6px;">
|
||||
${window.Asc.plugin.tr("Suggested correction")}
|
||||
</div>
|
||||
|
||||
<div class="ballon-color text-color border-color" style="font-size:12px; color:${textColor}; line-height:1.5; background:${ballonColor}; border:1px solid ${borderColor}; border-radius:3px; padding:10px;">
|
||||
<div class="ballon-color text-color border-color" style="font-size:12px; line-height:1.5; background:${ballonColor}; border:1px solid ${borderColor}; border-radius:3px; padding:10px;">
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<span class="text-color" style="color:${textColor}; font-weight:normal;">${data.original}</span>
|
||||
<span class="text-color" style="color:${textColor}; font-weight:bold;">→</span>
|
||||
<span class="text-color" style="color:${textColor}; font-weight:normal;">${data.suggested}</span>
|
||||
<span class="original" font-weight:normal;">${data.original}</span>
|
||||
<span class="style="font-weight:bold;">→</span>
|
||||
<span class="corrected" style="font-weight:normal;">${data.suggested}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
@ -82,6 +82,11 @@ Object.assign(AssistantReplaceHint.prototype, {
|
||||
length: [...origin].length,
|
||||
id: rangeId,
|
||||
});
|
||||
if (difference.indexOf(origin + " → ") === 0) {
|
||||
difference = difference.slice(
|
||||
origin.length + 3,
|
||||
);
|
||||
}
|
||||
_t.paragraphs[paraId][rangeId] = {
|
||||
original: origin,
|
||||
suggestion: suggestion,
|
||||
@ -123,7 +128,7 @@ Object.assign(AssistantReplaceHint.prototype, {
|
||||
"origin": "exact text fragment that matches the query",
|
||||
"suggestion": "suggested replacement (plain text)",
|
||||
"reason": "detailed explanation why it matches the criteria",
|
||||
"difference":"difference between origin and suggestion"
|
||||
"difference":"visual representation showing exact changes between origin and suggestion"
|
||||
"paragraph": paragraph_number,
|
||||
"occurrence": 1,
|
||||
"confidence": 0.95
|
||||
@ -136,11 +141,16 @@ Object.assign(AssistantReplaceHint.prototype, {
|
||||
* Ensure it aligns with the user's criteria.
|
||||
* Maintain coherence with surrounding text.
|
||||
- "reason": Clear explanation of why this fragment matches the criteria; IF the user's request contains words like "source", "reference", "link", "cite", "website", "URL", "Wikipedia", "proof", "evidence", "verify" - then you MUST include actual working links in your explanations in html format.
|
||||
- "difference": The difference between origin and suggestion in html format: that is, you need to take the suggestion field and highlight the differences in it by wrapping them in the <strong> tag.
|
||||
- "difference": The difference between origin and suggestion in html format.
|
||||
- "paragraph": Paragraph number where the fragment is found (0-based index)
|
||||
- "occurrence": Which occurrence of this sentence if it appears multiple times (1 for first, 2 for second, etc.)
|
||||
- "confidence": Value between 0 and 1 indicating certainty (1.0 = completely certain, 0.5 = uncertain)
|
||||
|
||||
CRITICAL: Rules for the "difference" field:
|
||||
- Format: "original → corrected", you need to leave only "corrected", never show the "original"
|
||||
- "<strong>" for added characters - use for the corrected version
|
||||
- Show exact character-level changes
|
||||
|
||||
CRITICAL:
|
||||
- Output should be in the exact this format
|
||||
- No any comments are allowed
|
||||
|
||||
Reference in New Issue
Block a user