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 configSnap = snap;
// 'strict' = all the text elements snap strictly on the baseline (by default)
// 'permissive' = If the element have padding, it's not snap on the baseline
const visibilityBaseline = visibility;
// 'visible' (by defaut) or 'hidden'
const baselineDoc = config.baseline;
const strict = config.strict;
// 'true' = all the text elements snap strictly on the baseline (by default)
// 'false' = If the element have padding, it's not snap on the baseline
const showBaseline = config.showBaseline;
const elementBaseline = config.element;
/* set the baseline*/
let setBaseline = ':root{ --baseline: ' + baselineDoc + 'px}'
addcss(setBaseline)
/* Visibility of the baseline */
let showBaseline = `body{
let showBaselineCSS = elementBaseline + `{
--baseline-position: 0px;
background: linear-gradient( transparent 0%, transparent calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px), #999 var(--baseline)), transparent;
background-size: 100% var(--baseline);
......@@ -26,16 +21,18 @@ function snapBaseline(baseline, snap, visibility){
background-position-y: var(--baseline-position);
}`
if(visibility == 'hidden'){ }else{ addcss(showBaseline); }
if(showBaseline) {
addcss(showBaselineCSS);
}
/* baseline position + vertical Rythm of paragraphs */
const paragraph = 'p';
verticalRythm(paragraph, baselineDoc, configSnap);
let baselinePosition = verticalRythm(paragraph, baselineDoc, configSnap);
verticalRythm(paragraph, baselineDoc, strict);
let baselinePosition = verticalRythm(paragraph, baselineDoc, strict);
document.getElementsByTagName('body')[0].style.setProperty('--baseline-position', "-" + baselinePosition + "px");
/* 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 @@ ________________________________________________________________________________
___________________________________________________________________________________________________
*/
function snapTextElement(elementSelector, baselinePosition, baselineDoc, snap) {
const configSnap = snap;
verticalRythm(elementSelector, baselineDoc, configSnap);
let gapBaselineElem = verticalRythm(elementSelector, baselineDoc, configSnap);
function snapTextElement(elementSelector, baselinePosition, baselineDoc, strict) {
let configStrict = strict;
verticalRythm(elementSelector, baselineDoc, configStrict);
let gapBaselineElem = verticalRythm(elementSelector, baselineDoc, configStrict);
let newgapBaselineElem = gapBaselineElem - baselinePosition;
let elem = document.querySelectorAll(elementSelector);
......@@ -103,9 +100,9 @@ ________________________________________________________________________________
___________________________________________________________________________________________________
*/
function verticalRythm(elem, base, snap){
function verticalRythm(elem, base, strict){
let baseline = base;
const configSnap = snap;
let configStrict = strict;
/* render element */
let element = document.createElement(elem);
......@@ -123,6 +120,7 @@ function verticalRythm(elem, base, snap){
origin: 'baseline'
})
/* calculate computed line-height (line-height: normal) of the main font */
element.innerHTML = "x";
element.style.lineHeight = "normal";
......@@ -151,7 +149,16 @@ function verticalRythm(elem, base, snap){
newMarginBottom = ceilMarginBottom*baseline;
/* 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 moduloPadding = sumPadding % baseline;
if(moduloPadding == 0){
......@@ -167,13 +174,7 @@ function verticalRythm(elem, base, snap){
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;
}
......
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