Possibilité de faire une correspondance entre un style et plusieurs classes différentes

README.md

@@ -16,7 +16,7 @@ En mode développement, les fichiers de *src/js/currency*, *src/js/xmlwriter* et
 
 ## Attributs spéciaux des éléments HTML
 
-L'exporation peut être configurée à l'aide d'attributs nommés `data-od-*`. Ils sont tous facultatifs et sont placés au niveau des différents éléments composants le tableau.
+L'exportation peut être configurée à l'aide d'attributs nommés `data-od-*`. Ils sont tous facultatifs et sont placés au niveau des différents éléments composants le tableau.
 
 Il est à noter que les attributs `colspan` et `rowspan` sont reconnus et appliqués ainsi que l'attribut `span` pour les éléments `<col>` ou `<colgroup>`.
 
@@ -110,4 +110,6 @@ Le seul lien possible entre les styles est celui de la parenté, le style enfant
 
 Il est fort probable que certaines éléments du tableau disposent déjà de classes CSS pour la mise en forme de la version HTML. Pour éviter d'utiliser l'attribut `data-od-styles` pour ces éléments, il est possible d'établir une correspondance entre un style et une classe CSS. Pour cela, on utilisera l'opérateur CSS `~` (qui est donc détourné de sa signification habituelle en CSS) sous la forme `cell.NomDuStyle  ~ .ClasseHtml`.
 
-Pour le moment, la correspondance n'est possible que vers une classe unique, tout autre sélecteur ne fonctionnera pas : les sélecteur d'identifiant (`#Id`) ou de plusieurs classes (`.Classe1.Classe2`), notamment, ne sont pas reconnus.
+L'opérateur `~` doit être placé à la fin (notamment après l'indication d'une éventuelle parenté avec `+`) car le style peut correspondre à plusieurs classes différentes : `cell.NomDuStyle  ~ .Classe1 .Classe2`.
+
+

demos/dev.css

@@ -47,6 +47,10 @@ cell.Heritage + cell.Bold {
     border: 0.75pt solid #333;
 }
 
+cell.Correspondance ~ .class1 .class2 {
+    color: #ff00ff;
+}
+
 
 column.Longue ~ .longuecolonne {
     width: 12cm;

demos/dev.html

@@ -88,6 +88,11 @@ function fodsContent() {
 			<td data-od-type="date" data-od-text="2020-12-01">01/12/2020</td>
 			<td data-od-type="date" data-od-text="2021-01-11">11/01/2021</td>
 		</tr>
+                <tr>
+                    <td>Exemple de correspondance de plusieurs classes</td>
+                    <td class="class1">Classe 1</td>
+                    <td class="class2">Classe 2</td>
+                </tr>
 	</tbody> 
  </table> 
 	<pre id="text"></pre> 

src/js/opendocument/OpenDocument.StyleManager.js

@@ -270,11 +270,13 @@ OpenDocument.StyleManager.readStyleSheet = function (styleManager, styleSheet) {
                 let operatorToken = tokens[index];
                 switch(operatorToken) {
                     case '~':
-                        __addMatchingClass(_parseClass(tokens[index +1]));
-                        index ++;
+                        for(let i = index +1; i <= length; i++)  {
+                            __addMatchingClasses(tokens[i]);
+                        }
+                        index = length;
                         break;
                     case '+':
-                        __setParent(_parseClass(tokens[index +1]));
+                        __setParent(tokens[index +1]);
                         index ++;
                         break;
                 }
@@ -282,31 +284,29 @@ OpenDocument.StyleManager.readStyleSheet = function (styleManager, styleSheet) {
             }
         }
         
-        function __addMatchingClass(matchingClass) {
-            if (!matchingClass) {
+        function __addMatchingClasses(token) {
+            if (!token) {
                 return;
             }
             let map = styleManager.matchingClassMaps.get(type);
-            if (map) {
-                map.set(matchingClass, style.styleName);
-            }
-        }
-        
-        function __setParent(parentStyleName) {
-            if (!parentStyleName) {
+            if (!map) {
                 return;
             }
-            style.setParent(parentStyleName);
+            if (token.startsWith('.')) {
+                map.set(token.substring(1), style.styleName);
+            }
         }
         
-    }
-
-    function _parseClass(classToken) {
-        let dotIndex = classToken.indexOf('.');
-        if (dotIndex === -1) {
-            return false;
+        function __setParent(token) {
+            if (!token) {
+                return;
+            }
+            let dotIndex = token.indexOf('.');
+            if (dotIndex !== -1) {
+                style.setParent(token.substring(dotIndex + 1));
+            }
         }
-        return classToken.substring(dotIndex + 1);
+        
     }
 
 };