Commit f7170f48 authored by Julie Blanc's avatar Julie Blanc

add parametrics to the function es6

parent 6949926e
window.onload = function () {
snapBaseline(40, 'strict', 'visible');
}
function snapBaseline(baseline, snap, visibility){ function snapBaseline(config){
const baselineDoc = baseline; const baselineDoc = config.baseline;
const configSnap = snap; const strict = config.strict;
// 'strict' = all the text elements snap strictly on the baseline (by default) // 'true' = all the text elements snap strictly on the baseline (by default)
// 'permissive' = If the element have padding, it's not snap on the baseline // 'false' = If the element have padding, it's not snap on the baseline
const visibilityBaseline = visibility; const showBaseline = config.showBaseline;
// 'visible' (by defaut) or 'hidden' const elementBaseline = config.element;
/* set the baseline*/ /* set the baseline*/
let setBaseline = ':root{ --baseline: ' + baselineDoc + 'px}' let setBaseline = ':root{ --baseline: ' + baselineDoc + 'px}'
addcss(setBaseline) addcss(setBaseline)
/* Visibility of the baseline */ /* Visibility of the baseline */
let showBaseline = `body{ let showBaselineCSS = elementBaseline + `{
--baseline-position: 0px; --baseline-position: 0px;
background: linear-gradient( transparent 0%, transparent calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px), #999 var(--baseline)), transparent; background: linear-gradient( transparent 0%, transparent calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px), #999 var(--baseline)), transparent;
background-size: 100% var(--baseline); background-size: 100% var(--baseline);
...@@ -26,16 +21,18 @@ function snapBaseline(baseline, snap, visibility){ ...@@ -26,16 +21,18 @@ function snapBaseline(baseline, snap, visibility){
background-position-y: var(--baseline-position); background-position-y: var(--baseline-position);
}` }`
if(visibility == 'hidden'){ }else{ addcss(showBaseline); } if(showBaseline) {
addcss(showBaselineCSS);
}
/* baseline position + vertical Rythm of paragraphs */ /* baseline position + vertical Rythm of paragraphs */
const paragraph = 'p'; const paragraph = 'p';
verticalRythm(paragraph, baselineDoc, configSnap); verticalRythm(paragraph, baselineDoc, strict);
let baselinePosition = verticalRythm(paragraph, baselineDoc, configSnap); let baselinePosition = verticalRythm(paragraph, baselineDoc, strict);
document.getElementsByTagName('body')[0].style.setProperty('--baseline-position', "-" + baselinePosition + "px"); document.getElementsByTagName('body')[0].style.setProperty('--baseline-position', "-" + baselinePosition + "px");
/* elements to which the script applies */ /* elements to which the script applies */
["h1", "h2", "h3", "h4", "h5", "h6", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, configSnap)); ["h1", "h2", "h3", "h4", "h5", "h6", "ul", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, strict));
} }
...@@ -47,10 +44,10 @@ ________________________________________________________________________________ ...@@ -47,10 +44,10 @@ ________________________________________________________________________________
___________________________________________________________________________________________________ ___________________________________________________________________________________________________
*/ */
function snapTextElement(elementSelector, baselinePosition, baselineDoc, snap) { function snapTextElement(elementSelector, baselinePosition, baselineDoc, strict) {
const configSnap = snap; let configStrict = strict;
verticalRythm(elementSelector, baselineDoc, configSnap); verticalRythm(elementSelector, baselineDoc, configStrict);
let gapBaselineElem = verticalRythm(elementSelector, baselineDoc, configSnap); let gapBaselineElem = verticalRythm(elementSelector, baselineDoc, configStrict);
let newgapBaselineElem = gapBaselineElem - baselinePosition; let newgapBaselineElem = gapBaselineElem - baselinePosition;
let elem = document.querySelectorAll(elementSelector); let elem = document.querySelectorAll(elementSelector);
...@@ -103,9 +100,9 @@ ________________________________________________________________________________ ...@@ -103,9 +100,9 @@ ________________________________________________________________________________
___________________________________________________________________________________________________ ___________________________________________________________________________________________________
*/ */
function verticalRythm(elem, base, snap){ function verticalRythm(elem, base, strict){
let baseline = base; let baseline = base;
const configSnap = snap; let configStrict = strict;
/* render element */ /* render element */
let element = document.createElement(elem); let element = document.createElement(elem);
...@@ -123,6 +120,7 @@ function verticalRythm(elem, base, snap){ ...@@ -123,6 +120,7 @@ function verticalRythm(elem, base, snap){
origin: 'baseline' origin: 'baseline'
}) })
/* calculate computed line-height (line-height: normal) of the main font */ /* calculate computed line-height (line-height: normal) of the main font */
element.innerHTML = "x"; element.innerHTML = "x";
element.style.lineHeight = "normal"; element.style.lineHeight = "normal";
...@@ -151,7 +149,16 @@ function verticalRythm(elem, base, snap){ ...@@ -151,7 +149,16 @@ function verticalRythm(elem, base, snap){
newMarginBottom = ceilMarginBottom*baseline; newMarginBottom = ceilMarginBottom*baseline;
/* New paggings */ /* New paggings */
if(configSnap == 'permissive'){ if(configStrict){
let sumPaddingTop = styles.paddingTop + styles.borderTop;
let sumPaddingBottom = styles.paddingBottom + styles.borderBottom;
let ceilSumTop = Math.ceil(sumPaddingTop/baseline);
let ceilSumBottom = Math.ceil(sumPaddingBottom/baseline);
newPaddingTop = ceilSumTop*baseline - styles.borderTop;
newPaddingBottom = ceilSumBottom*baseline - styles.borderBottom;
}else{
let sumPadding = styles.paddingTop + styles.borderTop + styles.paddingBottom + styles.borderBottom; let sumPadding = styles.paddingTop + styles.borderTop + styles.paddingBottom + styles.borderBottom;
let moduloPadding = sumPadding % baseline; let moduloPadding = sumPadding % baseline;
if(moduloPadding == 0){ if(moduloPadding == 0){
...@@ -167,13 +174,7 @@ function verticalRythm(elem, base, snap){ ...@@ -167,13 +174,7 @@ function verticalRythm(elem, base, snap){
newPaddingBottom = styles.paddingBottom + (baseline - moduloPadding)/2 - 1; newPaddingBottom = styles.paddingBottom + (baseline - moduloPadding)/2 - 1;
} }
} }
}else{
let sumPaddingTop = styles.paddingTop + styles.borderTop;
let sumPaddingBottom = styles.paddingBottom + styles.borderBottom;
let ceilSumTop = Math.ceil(sumPaddingTop/baseline);
let ceilSumBottom = Math.ceil(sumPaddingBottom/baseline);
newPaddingTop = ceilSumTop*baseline - styles.borderTop;
newPaddingBottom = ceilSumBottom*baseline - styles.borderBottom;
} }
...@@ -212,4 +213,4 @@ function addcss(css){ ...@@ -212,4 +213,4 @@ function addcss(css){
s.appendChild(document.createTextNode(css)); s.appendChild(document.createTextNode(css));
} }
head.appendChild(s); head.appendChild(s);
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment