Merge pull request #4668 from moisseev/webui

[WebUI] Update map editor

.stylelintrc.json

@@ -10,6 +10,7 @@
         "**/*.min.css",
         "**/*.js",
         "interface/css/d3evolution.css",
+        "interface/css/codejar-linenumbers.css",
         "interface/css/nprogress.css",
         "interface/css/prism.css"
     ],

interface/css/codejar-linenumbers.css

@@ -0,0 +1,17 @@
+.codejar-linenumbers-inner-wrap {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    overflow: hidden;
+}
+
+.codejar-linenumbers {
+    mix-blend-mode: initial;
+    height: 100%;
+}
+
+.codejar-linenumber {
+    position: relative;
+    top: 0px;
+}

interface/css/rspamd.css

@@ -548,15 +548,15 @@ table#symbolsTable input[type="number"] {
     /* Fix line wrapping */
     scrollbar-width: thin;
 }
+.codejar-linenumbers-inner-wrap {
+    bottom: unset;
+}
 .codejar-linenumbers {
     background: rgba(255 255 255 / 0.07) !important;
-    bottom: unset !important;
+}
+.codejar-linenumber {
     color: rgba(120 120 120 / 1) !important;
-    height: inherit;
-    mix-blend-mode: unset !important;
     text-align: right;
-    overflow: unset !important;
-    user-select: none;
 }
 .editor {
     font-family: monospace;

interface/index.html

@@ -22,6 +22,7 @@
 	<link rel="stylesheet" type="text/css" href="./css/d3evolution.css">
 	<link rel="stylesheet" type="text/css" href="./css/d3pie.css">
 	<link rel="stylesheet" type="text/css" href="./css/nprogress.css"/>
+	<link rel="stylesheet" type="text/css" href="./css/codejar-linenumbers.css"/>
 	<link rel="stylesheet" type="text/css" href="./css/prism.css"/>
 	<link href="./css/rspamd.css" rel="stylesheet">
 </head>

interface/js/app/config.js

@@ -181,7 +181,6 @@ define(["jquery", "codejar", "linenumbers", "prism"],
                         mode = (new Blob([data[0].data]).size > 5120) ? "basic" : $("input[name=editorMode]:checked").val();
 
                         $("<" + editor[mode].elt + ' id="editor" class="' + editor[mode].class + '" data-id="' + item.map + '">' +
-                            rspamd.escapeHTML(data[0].data) +
                             "</" + editor[mode].elt + ">").appendTo("#modalBody");
 
                         if (editor[mode].codejar) {
@@ -189,6 +188,9 @@ define(["jquery", "codejar", "linenumbers", "prism"],
                                 document.querySelector("#editor"),
                                 withLineNumbers((el) => Prism.highlightElement(el))
                             );
+                            jar.updateCode(data[0].data);
+                        } else {
+                            document.querySelector("#editor").innerHTML = rspamd.escapeHTML(data[0].data);
                         }
 
                         var icon = "fa-edit";

interface/js/lib/codejar-linenumbers.min.js

@@ -0,0 +1,6 @@
+/*!
+ * codejar-linenumbers v1.0.0 (https://github.com/julianpoemp/codejar-linenumbers)
+ * Copyright (c) 2023, Julian Poemp, MIT
+ */
+function withLineNumbers(r,e={}){const d={class:"codejar-linenumbers",wrapClass:"codejar-wrap",width:"35px",backgroundColor:"rgba(128, 128, 128, 0.15)",color:"",...e};let l;return function(e){r(e),l||(l=init(e,d),e.addEventListener("scroll",()=>l.style.top=`-${e.scrollTop}px`));var t=(e.textContent||"").replace(/\n\n$/g,"\n").split("\n").length;let o="";for(let e=0;e<t;e++)o+=e+1+`
+`;l.innerText=o}}function init(e,t){var o=getComputedStyle(e),r=document.createElement("div"),d=(r.className=t.wrapClass,r.style.position="relative",document.createElement("div")),l=(d.className="codejar-linenumbers-inner-wrap",d.style.background=o.background,d.style.marginTop=o.borderTopWidth,d.style.marginBottom=o.borderBottomWidth,d.style.marginLeft=o.borderLeftWidth,d.style.borderTopLeftRadius=o.borderTopLeftRadius,d.style.borderBottomLeftRadius=o.borderBottomLeftRadius,document.createElement("div")),d=(l.className=t.class,d.appendChild(l),r.appendChild(d),l.style.width=t.width,l.style.overflow="hidden",l.style.backgroundColor=t.backgroundColor,l.style.fontFamily=o.fontFamily,l.style.fontSize=o.fontSize,l.style.lineHeight=o.lineHeight,l.style.paddingTop=`calc(${o.paddingTop})`,l.style.paddingLeft=o.paddingLeft,l.style.borderTopLeftRadius=o.borderTopLeftRadius,l.style.borderBottomLeftRadius=o.borderBottomLeftRadius,document.createElement("div"));return d.setAttribute("class","codejar-linenumber"),d.style.color=t.color||o.color,d.style.setProperty("mix-blend-mode","unset"),l.appendChild(d),e.style.paddingLeft=`calc(${t.width} + ${l.style.paddingLeft} + 5px)`,e.style.whiteSpace="pre",e.parentNode.insertBefore(r,e),r.appendChild(e),d}

interface/js/lib/linenumbers.min.js

@@ -1,5 +0,0 @@
-/*!
- * CodeJar 3.2.2 helper: lineNumbers (https://github.com/antonmedv/codejar)
- * Copyright (c) 2020, Anton Medvedev, MIT
- */
-function withLineNumbers(e,t={}){const o=Object.assign({class:"codejar-linenumbers",wrapClass:"codejar-wrap",width:"35px",backgroundColor:"rgba(128, 128, 128, 0.15)",color:""},t);let l;return function(t){e(t),l||(l=init(t,o),t.addEventListener("scroll",()=>l.style.top=`-${t.scrollTop}px`));const n=(t.textContent||"").replace(/\n+$/,"\n").split("\n").length+1;let s="";for(let e=1;e<n;e++)s+=`${e}\n`;l.innerText=s}}function init(e,t){const o=getComputedStyle(e),l=document.createElement("div");l.className=t.wrapClass,l.style.position="relative";const n=document.createElement("div");n.className=t.class,l.appendChild(n),n.style.position="absolute",n.style.top="0px",n.style.left="0px",n.style.bottom="0px",n.style.width=t.width,n.style.overflow="hidden",n.style.backgroundColor=t.backgroundColor,n.style.color=t.color||o.color,n.style.setProperty("mix-blend-mode","difference"),n.style.fontFamily=o.fontFamily,n.style.fontSize=o.fontSize,n.style.lineHeight=o.lineHeight,n.style.paddingTop=o.paddingTop,n.style.paddingLeft=o.paddingLeft,n.style.borderTopLeftRadius=o.borderTopLeftRadius,n.style.borderBottomLeftRadius=o.borderBottomLeftRadius;const s=document.createElement("div");return s.style.position="relative",s.style.top="0px",n.appendChild(s),e.style.paddingLeft=`calc(${t.width} + ${n.style.paddingLeft})`,e.style.whiteSpace="pre",e.parentNode.insertBefore(l,e),l.appendChild(e),s}

interface/js/main.js

@@ -14,7 +14,7 @@ requirejs.config({
         fontawesome: "fontawesome.min",
         fontawesome_solid: "solid.min",
         footable: "footable.min",
-        linenumbers: "linenumbers.min",
+        linenumbers: "codejar-linenumbers.min",
         nprogress: "nprogress.min",
         prism: "prism",
         stickytabs: "jquery.stickytabs.min"