improvement:seperate javascript file from cpp code.

article_maker.cc

@@ -82,7 +82,6 @@ std::string ArticleMaker::makeHtmlHeader( QString const & word,
 
   // Add a css stylesheet
   {
-    QByteArray css;
     result += "<link href=\"qrc:///article-style.css\"  media=\"all\" rel=\"stylesheet\" type=\"text/css\">";
 
     if ( displayStyle.size() )
@@ -136,51 +135,17 @@ std::string ArticleMaker::makeHtmlHeader( QString const & word,
     result += "<link rel=\"icon\" type=\"image/png\" href=\"qrcx://localhost/flags/" + Html::escape( icon.toUtf8().data() ) + "\" />\n";
 
   result += "<script type=\"text/javascript\">"
-            "var gdAudioLinks = { first: null, current: null };"
+            "function tr(key) {"
-            "function gdMakeArticleActive( newId ) {"
+            " var tr_map = {"
-            "if ( gdCurrentArticle != 'gdfrom-' + newId ) {"
+            "\"Expand article\":\"";
-            "el=document.getElementById( gdCurrentArticle ); el.className = el.className.replace(' gdactivearticle','');"
+  result += tr("Expand article").toUtf8().data();
-            "el=document.getElementById( 'gdfrom-' + newId ); el.className = el.className + ' gdactivearticle';"
+  result += "\",\"Collapse article\":\"";
-            "gdCurrentArticle = 'gdfrom-' + newId; gdAudioLinks.current = newId;"
+  result += tr("Collapse article").toUtf8().data();
-            "articleview.onJsActiveArticleChanged(gdCurrentArticle); } }"
+  result += "\"  };"
-            "var overIframeId = null;"
+            "return tr_map[key] || '';"
-            "function gdSelectArticle( id ) {"
+            "}"
-            "var selection = window.getSelection(); var range = document.createRange();"
-            "range.selectNodeContents(document.getElementById('gdfrom-' + id));"
-            "selection.removeAllRanges(); selection.addRange(range); }"
-            "function processIframeMouseOut() { overIframeId = null; top.focus(); }"
-            "function processIframeMouseOver( newId ) { overIframeId = newId; }"
-            "function processIframeClick() { if( overIframeId != null ) { overIframeId = overIframeId.replace( 'gdexpandframe-', '' ); gdMakeArticleActive( overIframeId ) } }"
-            "function init() { window.addEventListener('blur', processIframeClick, false); }"
-            "window.addEventListener('load', init, false);"
-            "function gdExpandOptPart( expanderId, optionalId ) {  var d1=document.getElementById(expanderId); var i = 0; if( d1.alt == '[+]' ) {"
-            "d1.alt = '[-]'; d1.src = 'qrcx://localhost/icons/collapse_opt.png'; for( i = 0; i < 1000; i++ ) { var d2=document.getElementById( optionalId + i ); if( !d2 ) break; d2.style.display='inline'; } }"
-            "else { d1.alt = '[+]'; d1.src = 'qrcx://localhost/icons/expand_opt.png'; for( i = 0; i < 1000; i++ ) { var d2=document.getElementById( optionalId + i ); if( !d2 ) break; d2.style.display='none'; } } };"
-            "function gdExpandArticle( id ) { elem = document.getElementById('gdarticlefrom-'+id); ico = document.getElementById('expandicon-'+id); art=document.getElementById('gdfrom-'+id);"
-            "ev=window.event; t=null;"
-            "if(ev) t=ev.target || ev.srcElement;"
-            "if(elem.style.display=='inline' && t==ico) {"
-            "elem.style.display='none'; ico.className='gdexpandicon';"
-            "art.className = art.className+' gdcollapsedarticle';"
-            "nm=document.getElementById('gddictname-'+id); nm.style.cursor='pointer';"
-            "if(ev) ev.stopPropagation(); ico.title=''; nm.title=\"";
-  result += tr( "Expand article" ).toUtf8().data();
-  result += "\" } else if(elem.style.display=='none') {"
-            "elem.style.display='inline'; ico.className='gdcollapseicon';"
-            "art.className=art.className.replace(' gdcollapsedarticle','');"
-            "nm=document.getElementById('gddictname-'+id); nm.style.cursor='default';"
-            "nm.title=''; ico.title=\"";
-  result += tr( "Collapse article").toUtf8().data();
-  result += "\" } }"
-            "function gdCheckArticlesNumber() {"
-            "elems=document.getElementsByClassName('gddictname');"
-            "if(elems.length == 1) {"
-              "el=elems.item(0); s=el.id.replace('gddictname-','');"
-              "el=document.getElementById('gdfrom-'+s);"
-              "if(el && el.className.search('gdcollapsedarticle')>0) gdExpandArticle(s);"
-            "} }"
             "</script>";
-
+  result+= "<script type=\"text/javascript\" src=\"qrc:///resources/gd_builtin.js\"></script>";
   result += "</head><body>";
 
   return result;

resources.qrc

@@ -86,5 +86,6 @@
         <file>icons/ontop.png</file>
         <file>resources/jquery-3.6.0.slim.min.js</file>
         <file>resources/gd_custom.js</file>
+        <file>resources/gd_builtin.js</file>
     </qresource>
 </RCC>

resources/gd_builtin.js

@@ -0,0 +1,99 @@
+// seperate from cpp code.
+var gdAudioLinks = { first: null, current: null };
+
+function gdMakeArticleActive(newId) {
+    if (gdCurrentArticle != 'gdfrom-' + newId) {
+        el = document.getElementById(gdCurrentArticle);
+        el.className = el.className.replace(' gdactivearticle', '');
+        el = document.getElementById('gdfrom-' + newId);
+        el.className = el.className + ' gdactivearticle';
+        gdCurrentArticle = 'gdfrom-' + newId;
+        gdAudioLinks.current = newId;
+        articleview.onJsActiveArticleChanged(gdCurrentArticle);
+    }
+}
+var overIframeId = null;
+
+function gdSelectArticle(id) {
+    var selection = window.getSelection();
+    var range = document.createRange();
+    range.selectNodeContents(document.getElementById('gdfrom-' + id));
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+
+function processIframeMouseOut() {
+    overIframeId = null;
+    top.focus();
+}
+
+function processIframeMouseOver(newId) { overIframeId = newId; }
+
+function processIframeClick() {
+    if (overIframeId != null) {
+        overIframeId = overIframeId.replace('gdexpandframe-', '');
+        gdMakeArticleActive(overIframeId)
+    }
+}
+
+function init() { window.addEventListener('blur', processIframeClick, false); }
+window.addEventListener('load', init, false);
+
+function gdExpandOptPart(expanderId, optionalId) {
+    var d1 = document.getElementById(expanderId);
+    var i = 0;
+    if (d1.alt == '[+]') {
+        d1.alt = '[-]';
+        d1.src = 'qrcx://localhost/icons/collapse_opt.png';
+        for (i = 0; i < 1000; i++) {
+            var d2 = document.getElementById(optionalId + i);
+            if (!d2) break;
+            d2.style.display = 'inline';
+        }
+    } else {
+        d1.alt = '[+]';
+        d1.src = 'qrcx://localhost/icons/expand_opt.png';
+        for (i = 0; i < 1000; i++) {
+            var d2 = document.getElementById(optionalId + i);
+            if (!d2) break;
+            d2.style.display = 'none';
+        }
+    }
+};
+
+function gdExpandArticle(id) {
+    elem = document.getElementById('gdarticlefrom-' + id);
+    ico = document.getElementById('expandicon-' + id);
+    art = document.getElementById('gdfrom-' + id);
+    ev = window.event;
+    t = null;
+    if (ev) t = ev.target || ev.srcElement;
+    if (elem.style.display == 'inline' && t == ico) {
+        elem.style.display = 'none';
+        ico.className = 'gdexpandicon';
+        art.className = art.className + ' gdcollapsedarticle';
+        nm = document.getElementById('gddictname-' + id);
+        nm.style.cursor = 'pointer';
+        if (ev) ev.stopPropagation();
+        ico.title = tr("Expand article");
+        nm.title = '';
+    } else if (elem.style.display == 'none') {
+        elem.style.display = 'inline';
+        ico.className = 'gdcollapseicon';
+        art.className = art.className.replace(' gdcollapsedarticle', '');
+        nm = document.getElementById('gddictname-' + id);
+        nm.style.cursor = 'default';
+        nm.title = '';
+        ico.title = tr("Collapse article");
+    }
+}
+
+function gdCheckArticlesNumber() {
+    elems = document.getElementsByClassName('gddictname');
+    if (elems.length == 1) {
+        el = elems.item(0);
+        s = el.id.replace('gddictname-', '');
+        el = document.getElementById('gdfrom-' + s);
+        if (el && el.className.search('gdcollapsedarticle') > 0) gdExpandArticle(s);
+    }
+}