From 4971a002e919029dac7c48c858362569e790a6e0 Mon Sep 17 00:00:00 2001 From: Vincent Calame Date: Sat, 30 Jul 2022 13:00:39 +0200 Subject: [PATCH] =?UTF-8?q?Possibilit=C3=A9=20de=20faire=20une=20correspon?= =?UTF-8?q?dance=20entre=20un=20style=20et=20plusieurs=20classes=20diff?= =?UTF-8?q?=C3=A9rentes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++- demos/dev.css | 4 ++ demos/dev.html | 5 +++ .../opendocument/OpenDocument.StyleManager.js | 40 +++++++++---------- 4 files changed, 33 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 9423886..633066b 100644 --- a/README.md +++ b/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 `` ou ``. @@ -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`. + + diff --git a/demos/dev.css b/demos/dev.css index 6c593e3..f78c28f 100644 --- a/demos/dev.css +++ b/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; diff --git a/demos/dev.html b/demos/dev.html index cdfc34e..b7704b2 100644 --- a/demos/dev.html +++ b/demos/dev.html @@ -88,6 +88,11 @@ function fodsContent() { 01/12/2020 11/01/2021 + + Exemple de correspondance de plusieurs classes + Classe 1 + Classe 2 +
 
diff --git a/src/js/opendocument/OpenDocument.StyleManager.js b/src/js/opendocument/OpenDocument.StyleManager.js
index 1fb9fbc..7672980 100644
--- a/src/js/opendocument/OpenDocument.StyleManager.js
+++ b/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);
+        
     }
 
 };