From 18aa375345ae44c16f8ecbf5de826cf82a0e7bcd Mon Sep 17 00:00:00 2001 From: JulieBlanc Date: Wed, 21 Nov 2018 11:52:15 +0100 Subject: [PATCH] add management of baseline for elements with class and/or id --- baseline/js/baseline.js | 104 +++++++++++++++++++++++++++++----------- 1 file changed, 76 insertions(+), 28 deletions(-) diff --git a/baseline/js/baseline.js b/baseline/js/baseline.js index 0a59f1b..63a016f 100644 --- a/baseline/js/baseline.js +++ b/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; -- 2.22.0