add management of baseline for elements with class and/or id

baseline/js/baseline.js

@@ -9,15 +9,15 @@ function snapBaseline(config){
     const elementBaseline = config.element; 
 
     /* set the baseline*/
-    let setBaseline = ':root{ --baseline: ' + baselineDoc + 'px}'
+    let setBaseline = ':root{ --pagedjs-baseline: ' + baselineDoc + 'px}'
     addcss(setBaseline)
 
     /* Visibility of the baseline */
     let showBaselineCSS = elementBaseline + `{
-        background: linear-gradient( white 0%, white calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px),  #999 var(--baseline)), transparent;
-        background-size: 100% var(--baseline);
+        background: linear-gradient( white 0%, white calc(var(--pagedjs-baseline) - 1px), #999 calc(var(--pagedjs-baseline) - 1px),  #999 var(--pagedjs-baseline)), transparent;
+        background-size: 100% var(--pagedjs-baseline);
         background-repeat: repeat-y;
-        background-position-y: var(--baseline-position);
+        background-position-y: var(--pagedjs-baseline-position);
     }`
 
     if(showBaseline) { 
@@ -26,13 +26,13 @@ function snapBaseline(config){
 
     /* baseline position + vertical Rythm of paragraphs */
     const paragraph = 'p';
-    verticalRythm(paragraph, baselineDoc, strict);
-    let baselinePosition = verticalRythm(paragraph, baselineDoc, strict);
-    let baselinePositionCSS = ':root{ --baseline-position : -' + baselinePosition + 'px; }'
+    // verticalRythm(paragraph, '', '', baselineDoc, strict);
+    let baselinePosition = verticalRythm(paragraph, '', '', baselineDoc, strict);
+    let baselinePositionCSS = ':root{ --pagedjs-baseline-position : -' + baselinePosition + 'px; }'
     addcss(baselinePositionCSS);   
 
     /* elements to which the script applies */
-    ["h1", "h2", "h3", "h4", "h5", "h6", "ul", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, strict));
+    ["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, strict));
 }
 
 
@@ -46,17 +46,34 @@ ________________________________________________________________________________
 
 function snapTextElement(elementSelector, baselinePosition, baselineDoc, strict) {
 
+    let elem = document.querySelectorAll(elementSelector);
     let configStrict = strict;
-    verticalRythm(elementSelector, baselineDoc, configStrict);
-    let gapBaselineElem = verticalRythm(elementSelector, baselineDoc, configStrict);
+
+
+    // do calculation on each tag element
+    // verticalRythm(elementSelector, '', '', baselineDoc, configStrict);
+    let gapBaselineElem = verticalRythm(elementSelector, '', '', baselineDoc, configStrict);
     let newgapBaselineElem = gapBaselineElem -  baselinePosition;
-    let elem = document.querySelectorAll(elementSelector);
-    console.log(elem);
 
-    for(var i = 0; i < elem.length; i++) {
+    for(let i = 0; i < elem.length; i++) {
         elem[i].style.position = "relative";
         elem[i].style.top = newgapBaselineElem + "px";
     }
+
+    // do calculation for specific class or id
+    for (let i = 0; i < elem.length; i++) {
+        let allClasses = elem[i].classList;
+        let elemId = elem[i].id;
+        if(allClasses.length != 0 || elemId != ""){
+            // verticalRythm(elementSelector, allClasses, elemId, baselineDoc, configStrict);
+            let gapBaselineThisElem = verticalRythm(elementSelector, allClasses, elemId, baselineDoc, configStrict);
+            let newgapBaselineThisElem = gapBaselineThisElem -  baselinePosition;
+            elem[i].style.top = newgapBaselineThisElem + "px";
+        }
+    }
+
+
+
 }
 
 
@@ -102,13 +119,16 @@ ________________________________________________________________________________
 ___________________________________________________________________________________________________
 */
 
-function verticalRythm(elem, base, strict){
+function verticalRythm(elem, elemClass, elemId, base, strict){
     let baseline = base;
     let configStrict = strict;
+    // let elemClass = elemClass;
+    // let elemId = elemId;
 
     /* render element */
     let element = document.createElement(elem);
-    element.setAttribute("id", "font-metrics" + elem);
+    element.setAttribute("id", elemId);
+    element.setAttribute("class", elemClass);
     document.body.prepend(element); 
 
     /* get styles of the font */
@@ -137,7 +157,7 @@ function verticalRythm(elem, base, strict){
 
     /* New line-height of the font (multiple of baseline)*/
     let ceilLineHeight = Math.ceil(styles.lineHeight/baseline);
-    var newLineHeight = ceilLineHeight*baseline;
+    let newLineHeight = ceilLineHeight*baseline;
 
     let newPaddingTop;
     let newPaddingBottom;
@@ -180,19 +200,47 @@ function verticalRythm(elem, base, strict){
     }
 
 
-    /* set new paddings and margins for all element */
-    let elementTag = document.querySelectorAll(elem);
-
-    for(var i = 0; i < elementTag.length; i++) {
-        elementTag[i].style.lineHeight = newLineHeight + "px";
-        elementTag[i].style.paddingTop = newPaddingTop + "px";
-        elementTag[i].style.paddingBottom = newPaddingBottom + "px";
-        elementTag[i].style.marginTop = newMarginTop + "px";
-        elementTag[i].style.marginBottom = newMarginBottom + "px";
+    /* set new paddings and margins for the element */
+    if(elemClass == "" && elemId == ""){
+        // tag element without class and id
+        let elementTag = document.querySelectorAll(elem);
+        for(let i = 0; i < elementTag.length; i++) {        
+            elementTag[i].style.lineHeight = newLineHeight + "px";
+            elementTag[i].style.paddingTop = newPaddingTop + "px";
+            elementTag[i].style.paddingBottom = newPaddingBottom + "px";
+            elementTag[i].style.marginTop = newMarginTop + "px";
+            elementTag[i].style.marginBottom = newMarginBottom + "px";
+        }
+        
+    }else if(elemId == ""){
+        // element with class(es)
+        let elementSpecificClass = document.getElementsByClassName(elemClass);
+        for(let i = 0; i < elementSpecificClass.length; i++) {         
+            let elementSpecificId = elementSpecificClass[i].id;
+            if(elementSpecificId == "") {
+                elementSpecificClass[i].style.lineHeight = newLineHeight + "px";
+                elementSpecificClass[i].style.paddingTop = newPaddingTop + "px";
+                elementSpecificClass[i].style.paddingBottom = newPaddingBottom + "px";
+                elementSpecificClass[i].style.marginTop = newMarginTop + "px";
+                elementSpecificClass[i].style.marginBottom = newMarginBottom + "px";
+            }
+        }
+    }else{
+        // element with id
+        let elementSpecificId = document.getElementById(elemId);
+        elementSpecificId.style.lineHeight = newLineHeight + "px";
+        elementSpecificId.style.paddingTop = newPaddingTop + "px";
+        elementSpecificId.style.paddingBottom = newPaddingBottom + "px";
+        elementSpecificId.style.marginTop = newMarginTop + "px";
+        elementSpecificId.style.marginBottom = newMarginBottom + "px";
     }
 
+    
+    
+
+
     /* distance between baseline font and baseline document */
-    var gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
+    let gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
     return gapBaseline;
 
 }
@@ -206,8 +254,8 @@ ________________________________________________________________________________
 */
 
 function addcss(css){
-    var head = document.getElementsByTagName('head')[0];
-    var s = document.createElement('style');
+    let head = document.getElementsByTagName('head')[0];
+    let s = document.createElement('style');
     s.setAttribute('type', 'text/css');
     if (s.styleSheet) {   // IE
         s.styleSheet.cssText = css;