Added cross-references to headings, focus image in full size format

EmbedHtmlArticleGalleyHeaderPlugin.inc.php

@@ -149,8 +149,19 @@ function articleViewCallback($hookName, $args)
                   'isFullWidth' => true,
                   'headerTemplatePath' => $this->getTemplateResource('header.tpl'),
                   'breadcrumbsTemplatePath' => $this->getTemplateResource('breadcrumbs_galley.tpl'),
-                  'footerTemplatePath' => $this->getTemplateResource('footer.tpl')
+                  'footerTemplatePath' => $this->getTemplateResource('footer.tpl'),
+                  'blockTemplatePath' => $this->getTemplateResource('block.tpl')
                 ));
+
+                $templateMgr->addJavaScript(
+                    'articleHTML',
+                    $request->getBaseUrl() . '/' . $this->getPluginPath() . '/js/articleHTML.js'
+                );
+                $templateMgr->addStyleSheet(
+                    'style',
+                    $request->getBaseUrl() . '/' . $this->getPluginPath() . '/css/style.css'
+                );
+
                 $templateMgr->display($this->getTemplateResource('display.tpl'));
                 return true;
             }

css/style.css

@@ -0,0 +1,23 @@
+#htmlContainer img {
+    max-width: 70%;
+}
+#htmlContainer img[tabindex="0"] {
+    cursor: zoom-in;
+}
+
+#htmlContainer img[tabindex="0"]:focus {
+    position: fixed; z-index: 1000;
+    top: 0; left: 0; bottom: 0; right: 0;
+    width: auto; max-width: 100%;
+    height: auto; max-height: 100%;
+    margin: auto;
+    box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0,0,0,.3);
+    -webkit-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0,0,0,.3);
+    -moz-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0,0,0,.3);
+}
+
+#htmlContainer img[tabindex="0"]:focus, /* Привязка на возврат фото в привычное состояние после клика на увеличенное */
+#htmlContainer img[tabindex="0"]:focus ~ * {
+    cursor: zoom-out;
+    pointer-events: none;
+}

js/articleHTML.js

@@ -0,0 +1,53 @@
+/**
+ *
+ * @file plugins/generic/embedHtmlArticleGalleyHeader/js/articleHTML.js
+ *
+ * Copyright (c) 2023 Belgorod State University
+ * Copyright (c) 2023 Eryomin Oleg
+ * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
+ *
+ */
+
+const heads = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+const imgs = document.getElementById("htmlContainer").querySelectorAll("img");
+let paddings = new Map();
+let value = 0;
+for (i = 1; i <= 6; i++){
+    let key = "H" + i;
+    paddings.set(key, value);
+    value  +=  20;
+}
+const ul = document.getElementById("heads");
+heads.forEach((h, index) => {
+    let id = "head" + index;
+    h.id = id;
+    let li = document.createElement("li");
+    li.style = "padding-left:" + paddings.get(h.tagName) + "px";
+    let a  = document.createElement("a");
+    a.href = "#";
+    a.id = index;
+    a.addEventListener("click", function() {
+        const id = "head" + this.id;
+        document.getElementById(id).scrollIntoView();
+    }, false);
+    if (index !== 0) {
+        a.innerHTML = h.innerText;
+    } else {
+        a.innerHTML = "Article title";
+    }
+    if (h.innerText !== "Contents"){
+        if (h.innerText){
+            li.append(a);
+            ul.append(li);
+        }
+    }
+});
+imgs.forEach((img) => {
+    img.tabIndex = "0";
+    let a  = document.createElement("a");
+    const icon = document.createElement("img");
+    icon.src = "https://" + window.location.hostname + "/plugins/generic/embedHtmlArticleGalleyHeader/images/download-icon-30.png"
+    a.append(icon);
+    a.href = img.getAttribute("src");
+    img.parentElement.append(a);
+});

templates/block.tpl

@@ -0,0 +1,22 @@
+{**
+ * plugins/generic/embedHtmlArticleGalley/display.tpl
+ *
+ * Copyright (c) 2023 Belgorod State University
+ * Copyright (c) 2023 Eryomin Oleg
+ * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
+ *}
+
+<div class="pkp_structure_sidebar left" role="complementary" aria-label="Sidebar">
+	<div class="pkp_block">
+		<h2 class="title">
+			Contents
+		</h2>
+		<div class="content">
+			<div style="padding: 10px; height: 60vh; overflow: auto; width: 25vw;">
+			<ul id="heads"></ul>
+			</div>
+		</div>
+	</div>
+
+</div>
+

templates/display.tpl

@@ -9,6 +9,7 @@
  *}
 {include file=$headerTemplatePath}
 {include file=$breadcrumbsTemplatePath}
+<div style="padding: 10px; height: 65vh; overflow: auto; width: 100%;">
 		<div id="htmlContainer">
 			{if !$isLatestPublication}
 				<div class="galley_view_notice">
@@ -61,7 +62,8 @@
         		{* END UZH CHANGE OJS-67 *}
 		</div>
 	</div>
-
+</div>
+	{include file=$blockTemplatePath}
 	{call_hook name="Templates::Common::Footer::PageFooter"}
 	{include file=$footerTemplatePath}
 </body>