Renamed tooltips and modals in plumed input files to plumedtooltip and plumedmodal

This prevents clashes between tooltip instructions that might already be in css files
and the ones that we use for our rendered inputs

Author: Gareth Aneurin Tribello

pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "PlumedToHTML"
-version = "0.101"
+version = "0.102"
 description = "A package for creating prettified HTML for PLUMED files"
 authors = [{ name = "Gareth Tribello", email = "[email protected]" }]
 maintainers = [{ name = "Daniele Rapetti", email = "[email protected]" }]

src/PlumedToHTML/PlumedFormatter.py

@@ -70,7 +70,7 @@ def format(self, tokensource, outfile):
                    outfile.write('<span style="background-color:yellow">__FILL__</span>')
                # This is for vim syntax expression
                elif "vim:" in value :
-                   outfile.write('<span class="tooltip" style="color:blue">' + value + '<span class="right">Enables syntax highlighting for PLUMED files in vim. See <a href="' + self.keyword_dict["vimlink"] + '">here for more details. </a><i></i></span></span>')
+                   outfile.write('<span class="plumedtooltip" style="color:blue">' + value + '<span class="right">Enables syntax highlighting for PLUMED files in vim. See <a href="' + self.keyword_dict["vimlink"] + '">here for more details. </a><i></i></span></span>')
                else : raise ValueError("found invalid Literal in input " + value)
             elif ttype==Comment.Hashbang :
                # This handles the mechanism for closing the expanding shortcut
@@ -157,14 +157,14 @@ def format(self, tokensource, outfile):
                                for kk in range(start,end+1) : 
                                    if kk<=len(allines) : shortversion += allines[kk-1] + "\n"
                            fcontent = shortversion
-                        outfile.write('<div class="tooltip">' + inp + '<div class="right"> Click <a onclick=\'openModal("' + self.egname + inp + str(nfiles) + '")\'>here</a> to see an extract from this file.<i></i></div></div>')
-                        outfile.write('<div id="' + self.egname + inp + str(nfiles) + '" class="modal">')
-                        outfile.write('  <div class="modal-content">')
-                        outfile.write('<div class="modal-header">')
+                        outfile.write('<div class="plumedtooltip">' + inp + '<div class="right"> Click <a onclick=\'openModal("' + self.egname + inp + str(nfiles) + '")\'>here</a> to see an extract from this file.<i></i></div></div>')
+                        outfile.write('<div id="' + self.egname + inp + str(nfiles) + '" class="plumedmodal">')
+                        outfile.write('  <div class="plumedmodal-content">')
+                        outfile.write('<div class="plumedmodal-header">')
                         outfile.write('  <span class="close" onclick=\'closeModal("' + self.egname + inp + str(nfiles) + '")\'>&times;</span>')
                         outfile.write('  <h2>FILE: ' + inp + '</h2>')
                         outfile.write('</div>')
-                        outfile.write('<div class="modal-body">')
+                        outfile.write('<div class="plumedmodal-body">')
                         outfile.write('    <pre>' + fcontent + '</pre>')
                         outfile.write('</div>')
                         outfile.write('  </div>')
@@ -185,7 +185,7 @@ def format(self, tokensource, outfile):
                         else : 
                             select = inp.strip()
                             if select in self.keyword_dict["groups"] : tooltip, link = self.keyword_dict["groups"][select]["description"], self.keyword_dict["groups"][select]["link"]
-                        if len(tooltip)>0 : outfile.write('<span class="tooltip">' + inp + '<span class="right">' + tooltip + '. <a href="' + link + '">Click here</a> for more information. <i></i></span></span>') 
+                        if len(tooltip)>0 : outfile.write('<span class="plumedtooltip">' + inp + '<span class="right">' + tooltip + '. <a href="' + link + '">Click here</a> for more information. <i></i></span></span>') 
                         else : outfile.write( html.escape(inp) )
                       else : outfile.write( html.escape(inp) )
                       nocomma = False 
@@ -238,15 +238,15 @@ def format(self, tokensource, outfile):
                      if "actionlink" in self.keyword_dict[action]["syntax"][mykey].keys() and self.keyword_dict[action]["syntax"][mykey]["actionlink"]!="none" : 
                         linkaction = self.keyword_dict[action]["syntax"][mykey]["actionlink"]
                         desc = desc + ". Options for this keyword are explained in the documentation for <a href=\"" + self.keyword_dict[linkaction]["hyperlink"] + "\">" + linkaction + "</a>.";  
-                     outfile.write('<span class="tooltip">' + value + '<span class="right">' + desc + '<i></i></span></span>')
+                     outfile.write('<span class="plumedtooltip">' + value + '<span class="right">' + desc + '<i></i></span></span>')
             elif ttype==Name.Constant :
                # @replicas in special replica syntax
                if value=="@replicas:" : 
-                  outfile.write('<span class="tooltip">' + value + '<span class="right">This keyword specifies that different replicas have different values for this quantity.  See <a href="' + self.keyword_dict["replicalink"] +'">here for more details.</a><i></i></span></span>')
+                  outfile.write('<span class="plumedtooltip">' + value + '<span class="right">This keyword specifies that different replicas have different values for this quantity.  See <a href="' + self.keyword_dict["replicalink"] +'">here for more details.</a><i></i></span></span>')
                # Deal with external libraries doing atom selections
                else :
                   if value not in self.keyword_dict["groups"] : raise Exception("special group " + value + " not in special group dictionary")
-                  outfile.write('<span class="tooltip">' + value + '<span class="right">' + self.keyword_dict["groups"][value]["description"] + '.  <a href="' + self.keyword_dict["groups"][value]["link"] + '">Click here</a> for more information. <i></i></span></span>');
+                  outfile.write('<span class="plumedtooltip">' + value + '<span class="right">' + self.keyword_dict["groups"][value]["description"] + '.  <a href="' + self.keyword_dict["groups"][value]["link"] + '">Click here</a> for more information. <i></i></span></span>');
             elif ttype==Keyword :
                # Name of action
                action, notooltips = value.strip().upper(), False
@@ -259,20 +259,20 @@ def format(self, tokensource, outfile):
                if default_state!=0 or shortcut_state==1 : 
                   if label!="" and label!=act_label : raise Exception("mismatched label and act_label for shortcut/default") 
                if notooltips :
-                    outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">This action is not part of PLUMED and was included by using a LOAD command <a href="' + self.keyword_dict["LOAD"]["hyperlink"] + '" style="color:green">More details</a><i></i></span></span>') 
+                    outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">This action is not part of PLUMED and was included by using a LOAD command <a href="' + self.keyword_dict["LOAD"]["hyperlink"] + '" style="color:green">More details</a><i></i></span></span>') 
                elif shortcut_state==1 and default_state==1 :
-                    outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action is <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + label + '");\'>a shortcut</a> and it has <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>hidden defaults</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>') 
+                    outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action is <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + label + '");\'>a shortcut</a> and it has <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>hidden defaults</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>') 
                elif shortcut_state==1 and default_state==2 :
-                    outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action is <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + act_label + '");\'>a shortcut</a> and uses the <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>defaults shown here</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
+                    outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action is <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + act_label + '");\'>a shortcut</a> and uses the <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>defaults shown here</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
                elif default_state==1 :
-                    outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action has <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>hidden defaults</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
+                    outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action has <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>hidden defaults</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
                elif default_state==2 :
-                    outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action uses the <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>defaults shown here</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
+                    outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action uses the <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + "def" + act_label + '");\'>defaults shown here</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
                elif shortcut_state==1 :
-                     if action=="INCLUDE" : outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a>. Show <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + act_label + '");\'>included file</a><i></i></span></span>')
-                     else : outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action is <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + act_label + '");\'>a shortcut</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
+                     if action=="INCLUDE" : outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a>. Show <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + act_label + '");\'>included file</a><i></i></span></span>')
+                     else : outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">' + self.keyword_dict[action]["description"] + ' This action is <a class="toggler" href=\'javascript:;\' onclick=\'toggleDisplay("' + self.egname + act_label + '");\'>a shortcut</a>. <a href="' + self.keyword_dict[action]["hyperlink"] + '">More details</a><i></i></span></span>')
                else :
-                     outfile.write('<span class="tooltip" style="color:green">' + value.strip() + '<span class="right">'+ self.keyword_dict[action]["description"] + ' <a href="' + self.keyword_dict[action]["hyperlink"] + '" style="color:green">More details</a><i></i></span></span>')
+                     outfile.write('<span class="plumedtooltip" style="color:green">' + value.strip() + '<span class="right">'+ self.keyword_dict[action]["description"] + ' <a href="' + self.keyword_dict[action]["hyperlink"] + '" style="color:green">More details</a><i></i></span></span>')
         # Check if there is stuff to output for the last action in the file
         if len(label)>0 and label not in all_labels and label not in self.valuedict.keys() :
            all_labels.add( label )

src/PlumedToHTML/PlumedToHTML.py

@@ -466,6 +466,40 @@ def get_html_header() :
     hfile.close()
     return codes
 
+def get_javascript() :
+    """
+       Get the javascript from the header of the html file to make the interactive PLUMED inputs work
+    """
+    inscript, fullheader, jscode = False, get_html_header().splitlines(), ""
+    for line in fullheader :
+        if "</script>" in line and inscript :
+            inscript = False
+            break
+        elif "<script>" in line :
+            inscript = True
+        elif inscript :
+            if ("<style>" in line) or ("</style>" in line) or ("<script>" in line) or ("</script>" in line) : 
+               raise Exception('found invalid html tag in javascript line ' + line)
+            jscode += line + "\n"
+    return jscode
+
+def get_css() :
+    """
+       Get the css from the header of the html file to make the interactive PLUMED inputs work
+    """
+    inscript, fullheader, css = False, get_html_header().splitlines(), ""
+    for line in fullheader :
+        if "</style>" in line and inscript :
+            inscript = False
+            break
+        elif "<style>" in line :
+            inscript = True
+        elif inscript :
+            if ("<style>" in line) or ("</style>" in line) or ("<script>" in line) or ("</script>" in line) : 
+               raise Exception('found invalid html tag in css line ' + line)
+            css += line + "\n"               
+    return css 
+
 def compare_to_reference( output, reference ) :
     """
       Compare the html that is output by PlumedFormatter with the reference data.  This function is used for 
@@ -483,7 +517,7 @@ def compare_to_reference( output, reference ) :
     # Check that everything that should be rendered as a tooltip has been rendered as a tooltip
     # This is action names and keywords
     if "tooltips" in reference.keys() :
-       soup_tooltips = soup.find_all(attrs={'class': 'tooltip'})
+       soup_tooltips = soup.find_all(attrs={'class': 'plumedtooltip'})
        print("CHECK TOOLTIP",  soup_tooltips )
        print("TOOLTIP NUMBER CORRECT", len(soup_tooltips), len(reference["tooltips"]))
        if len(soup_tooltips)!=len(reference["tooltips"]) : return False

src/PlumedToHTML/__init__.py

@@ -1 +1 @@
-from .PlumedToHTML import test_plumed, test_and_get_html, get_html, get_html_header, compare_to_reference, get_mermaid, processMarkdown
+from .PlumedToHTML import test_plumed, test_and_get_html, get_html, get_html_header, compare_to_reference, get_mermaid, processMarkdown, get_javascript, get_css

src/PlumedToHTML/assets/header.html

@@ -11,13 +11,13 @@
     font-family: monospace, fixed;
     font-size: 105%;
 }
-.tooltip {
+.plumedtooltip {
     display:inline-block;
     position:relative;
     border-bottom:1px dotted #666;
     text-align:left;
 }
-.tooltip .right {
+.plumedtooltip .right {
     min-width:400px;
     white-space: normal;
     top:50%;
@@ -36,10 +36,10 @@
     box-shadow:0 1px 8px rgba(0,0,0,0.5);
     display:none;
 }
-.tooltip:hover .right {
+.plumedtooltip:hover .right {
     display:block;
 }
-.tooltip .right i {
+.plumedtooltip .right i {
     position:absolute;
     top:50%;
     right:100%;
@@ -48,7 +48,7 @@
     height:24px;
     overflow:hidden;
 }
-.tooltip .right i::after {
+.plumedtooltip .right i::after {
     content:;
     position:absolute;
     width:12px;
@@ -59,7 +59,7 @@
     background-color:#EEEEEE;
     box-shadow:0 1px 8px rgba(0,0,0,0.5);
 }
-.modal {
+.plumedmodal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
@@ -71,13 +71,13 @@
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
-.modal-header {
+.plumedmodal-header {
   padding: 2px 16px;
   background-color: #5cb85c;
   color: white;
 }
-.modal-body {padding: 2px 16px;}
-.modal-content {
+.plumedmodal-body {padding: 2px 16px;}
+.plumedmodal-content {
   position: relative;
   background-color: #fefefe;
   margin: auto;
@@ -134,4 +134,3 @@
   }
 }
 </script>
-

tests/test_markdown.py

@@ -67,3 +67,16 @@ def testHeader(self) :
        codes = hfile.read()
        hfile.close()
        self.assertTrue( codes==PlumedToHTML.get_html_header() )
+
+   def testJavascriptAndCSS(self) : 
+       headerfilename = os.path.join(os.path.dirname(__file__),"../src/PlumedToHTML/assets/header.html")
+       hfile = open( headerfilename )
+       codes = hfile.read()
+       hfile.close()
+       reference = "<style>\n"
+       reference += PlumedToHTML.get_css()
+       reference += "</style>\n<script>\n"
+       reference += PlumedToHTML.get_javascript()
+       reference += "</script>\n"
+       print( reference )
+       self.assertTrue( codes==reference )