Added CSS styling for EXC blocks in search results and rule info.

asl_rulebook2/webapp/static/ASOP.js

@@ -1,5 +1,5 @@
 import { gMainApp, gASOPChapterIndex, gASOPSectionIndex, gEventBus } from "./MainApp.js" ;
-import { getURL, getASOPChapterIdFromSectionId, linkifyAutoRuleids, wrapMatches, isChildOf } from "./utils.js" ;
+import { getURL, getASOPChapterIdFromSectionId, linkifyAutoRuleids, wrapExcBlocks, isChildOf } from "./utils.js" ;
 
 let gSectionContentOverrides = {} ;
 
@@ -182,13 +182,7 @@ gMainApp.component( "asop", {
             return caption ;
         },
 
-        fixupContent( content ) {
-            return wrapMatches(
-                content,
-                new RegExp( /\[EXC: .*?\]/g ),
-                "<span class='exc'>", "</span>"
-            ) ;
-        },
+        fixupContent( content ) { return wrapExcBlocks( content ) ; },
 
     },
 

asl_rulebook2/webapp/static/RuleInfo.js

@@ -1,5 +1,5 @@
 import { gMainApp, gUrlParams } from "./MainApp.js" ;
-import { linkifyAutoRuleids, fixupSearchHilites, makeImagesZoomable, makeImageUrl } from "./utils.js" ;
+import { linkifyAutoRuleids, fixupSearchHilites, makeImagesZoomable, makeImageUrl, wrapExcBlocks } from "./utils.js" ;
 
 // --------------------------------------------------------------------
 
@@ -83,11 +83,11 @@ gMainApp.component( "qa-entry", {
                 <img :src=questionImageUrl class="icon" />
                 <div class="question">
                     <img v-if=content.image :src=makeQAImageUrl(content.image) class="imageZoom" />
-                    <div v-html=content.question />
+                    <div v-html=fixupContent(content.question) />
                 </div>
                 <div v-for="answer in content.answers" class="answer" >
                     <img :src=answerImageUrl :title=answer[1] class="icon" />
-                    <div v-html=answer[0] />
+                    <div v-html=fixupContent(answer[0]) />
                 </div>
             </div>
             <div v-else>
@@ -123,6 +123,8 @@ gMainApp.component( "qa-entry", {
             return fixupSearchHilites( val ) ;
         },
 
+        fixupContent( content ) { return wrapExcBlocks( content ) ; },
+
     },
 
 } ) ;
@@ -145,7 +147,7 @@ gMainApp.component( "annotation", {
     <collapsible ref="collapsible" >
         <div class="content">
             <img :src=makeIconImageUrl() :title=anno.source class="icon" />
-            <div v-html=anno.content />
+            <div v-html=fixupContent(anno.content) />
         </div>
     </collapsible>
 </div>`,
@@ -162,6 +164,7 @@ gMainApp.component( "annotation", {
             else
                 return null ;
         },
+        fixupContent( content ) { return wrapExcBlocks( content ) ; },
     },
 
 } ) ;

asl_rulebook2/webapp/static/SearchResult.js

@@ -1,5 +1,5 @@
 import { gMainApp, gContentDocs, gEventBus, gAppConfig } from "./MainApp.js" ;
-import { findTargets, getPrimaryTarget, isRuleid, getChapterResource, fixupSearchHilites, hasHilite } from "./utils.js" ;
+import { findTargets, getPrimaryTarget, isRuleid, getChapterResource, fixupSearchHilites, hasHilite, wrapExcBlocks } from "./utils.js" ;
 
 // --------------------------------------------------------------------
 
@@ -31,7 +31,7 @@ gMainApp.component( "index-sr", {
         <span v-if=sr.subtitle class="subtitle" v-html=sr.subtitle />
     </div>
     <div class="body">
-        <div v-if=sr.content class="content" v-html=sr.content />
+        <div v-if=sr.content class="content" v-html=fixupContent(sr.content) />
         <div v-if=sr.see_also class="see-also" > See also:
             <span v-for="(sa, sa_no) in sr.see_also" >
                 {{sa_no == 0 ? "" : ", "}}
@@ -117,6 +117,8 @@ gMainApp.component( "index-sr", {
             return this.expandRulerefs || hasHilite( ruleref.caption ) ;
         },
 
+        fixupContent( content ) { return wrapExcBlocks( content ) ; },
+
         fixupHilites( val ) {
             // convert search term highlights returned to us by the search engine to HTML
             return fixupSearchHilites( val ) ;

asl_rulebook2/webapp/static/utils.js

@@ -251,6 +251,15 @@ export function wrapMatches( val, searchFor, delim1, delim2 )
     return buf.join("") ;
 }
 
+export function wrapExcBlocks( val )
+{
+    // search for "[EXC: ...]" blocks and wrap them in a <span>
+    return wrapMatches( val,
+        new RegExp( /\[EXC: .*?\]/g ),
+        "<span class='exc'>", "</span>"
+    ) ;
+}
+
 export function isChildOf( elem, elemParent, strict )
 {
     // check if an element is a child of another element

asl_rulebook2/webapp/tests/fixtures/full/annotations.json

@@ -1,7 +1,7 @@
 [
 
 { "ruleid": "A24.3",
-  "content": "Mmmm, White Phosphorus (A24.31). Is there anything it can't do...?"
+  "content": "Mmmm, White Phosphorus (A24.31). Is there anything it can't do [EXC: Don't use while intoxicated]...?"
 }
 
 ]

asl_rulebook2/webapp/tests/fixtures/full/q+a/demo.json

@@ -17,10 +17,10 @@
 { "caption": "A7.7",
   "ruleids": [ "A7.7" ],
   "content": [
-    { "question": "All German units combine as a Fire Group to take a 30/+3 shot at the Russian 447. Given that the 247 is one of two units in the Fire Group that potentially enable the shot to cause Encirclement, and that the 247's shot alone is not sufficient to be an Encirclement-causing shot, does the shot from this Fire Group cause Encirclement?",
+    { "question": "All German units [EXC: the guy no-one likes] combine as a Fire Group to take a 30/+3 shot at the Russian 447. Given that the 247 is one of two units in the Fire Group that potentially enable the shot to cause Encirclement, and that the 247's shot alone is not sufficient to be an Encirclement-causing shot, does the shot from this Fire Group cause Encirclement?",
       "image": "a7.7.png",
       "answers": [
-        [ "Yes.", "ps" ]
+        [ "Yes [EXC: except when it doesn't].", "ps" ]
       ]
     }
   ]