Skip to content

Commit

Permalink
Added node.js test
Browse files Browse the repository at this point in the history 
Refactored resize-root-font-size

Created mutate-root-font-size-partial module

Created mutate-root-font-size module

Removed root-element option to reduce argument size

Enabled clinet unit-test browser opening
  • Loading branch information
@julienetie
julienetie committed Apr 22, 2017
1 parent cef7e40 commit f51218f
Show file tree
Hide file tree
Showing 30 changed files with 1,354 additions and 1,018 deletions.
4 changes: 2 additions & 2 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ before_install:
- npm install -g yarn
install:
- yarn
script:
- yarn test-build
#script:
# - yarn unit-test
243 changes: 124 additions & 119 deletions dist/mimetic.es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,6 @@ vVVv vVVv ': |_| \_\___||___/_/___|_|_|_|\__,_| ''
* Copyright Julien Etienne 2015 All Rights Reserved.
*/
// Initial time of the timing lapse.
/**
* volve - Tiny, Performant Debounce and Throttle Functions,
* License: MIT
* Copyright Julien Etienne 2016 All Rights Reserved.
* github: https://github.com/julienetie/volve
*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
*/

/**
* Date.now polyfill.
* {@link https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now}
*/
if (!Date.now) {
Date.now = function now() {
return new Date().getTime();
Expand Down Expand Up @@ -364,8 +352,8 @@ const basicCompose = (a, b) => {
// converts pixels to REM values.
const pxToRem = fontSizePx => parseInt(fontSizePx) / 16;

// Checks callback type.
const isCallBackDefined = callback => typeof callback === 'function';
// Is Function.
const isFunction = value => typeof value === 'function';

// Gets the element's root font size.
const getFontSize = element => window.getComputedStyle(element.documentElement, null).getPropertyValue('font-size');
Expand Down Expand Up @@ -413,13 +401,13 @@ const CSSUnitsToPixels = value => {

/**
* Sets up intializeMimetic via partial application.
* @param {Function} getRootElement - Gets the root font element.
* @param {Function} document.
* @param {Function} getRootREMValue - Gets the root font-size in REM units.
* @param {Function} CSSUnitsToPixels - Converts any CSS units to pixels.
* @param {Function} setRootFontSize - Sets the new root font size.
* @param {Function} resizilla - Calls handler on window resize and orientationchange events.
*/
function initializeMimeticPartial(getRootElement, getRootREMValue, CSSUnitsToPixels, setRootFontSize, resizilla) {
function initializeMimeticPartial(document, getRootREMValue, CSSUnitsToPixels, setRootFontSize, resizilla) {
// A resize object to store MIMETIC's resizilla's requirements.
var resize = {};

Expand All @@ -434,9 +422,6 @@ function initializeMimeticPartial(getRootElement, getRootREMValue, CSSUnitsToPix
// Store the scaleDelay for kill and revive.
resize.scaleDelay = scaleDelay;

// The root font element.
const rootElement = getRootElement(rootSelector);

// The intial root font size.
const rootFontSize = getRootREMValue(document);

Expand All @@ -451,7 +436,6 @@ function initializeMimeticPartial(getRootElement, getRootREMValue, CSSUnitsToPix
initialOuterHeight: window.outerHeight,
initialOuterWidth: window.outerWidth,
rootFontSize,
rootElement,
mobileWidthPX,
cutOffWidthPX
}, config);
Expand Down Expand Up @@ -501,18 +485,17 @@ const setRootFontSizePartial = resizeRootFontSize => {
let lastOuterHeight;

return ({
rootElement,
rootFontSize,
initialOuterHeight,
initialOuterWidth,
relativeDesignWidth,
mobileWidth,
cutOffWidth,
enableScale,
preserveDevicePixelRatio,
onScale,
onZoom,
onResize,
enableScale,
mobileWidthPX,
cutOffWidthPX,
lateDetectionDelay
Expand Down Expand Up @@ -559,11 +542,6 @@ const setRootFontSizePartial = resizeRootFontSize => {
*/
const designWidthRatio = innerWidth / relativeDesignWidth;

/**
* Check to see if the window is at the default zoom level.
*/
const isDevicePixelRatioDefault = defaultDPR === calculatedDPR;

/**
* The minimum veiwport size to not react to.
*/
Expand All @@ -575,10 +553,8 @@ const setRootFontSizePartial = resizeRootFontSize => {
resizeRootFontSize({
innerWidth,
outerWidth,
isDevicePixelRatioDefault,
relativeDesignWidth,
cutOff,
rootElement,
designWidthRatio,
calculatedDPR,
rootFontSize,
Expand All @@ -601,27 +577,120 @@ const setRootFontSizePartial = resizeRootFontSize => {
};

let wasLastBeyondMobileWidth = true;
let lastDevicePixelRatio;
let renderOnce;

/**
* Directly mutates the root font size of a given Element.
* @param
*/
const mutateRootFontSizePartial = rootElement => (rootFontSizeFinal, resizeWithoutZoom, hasScaledOrDPRIsDefault, isDevicePixelRatioDefault, isAboveDesignWidth, isBeyondCutoff, enableScale) => {
if (hasScaledOrDPRIsDefault || renderOnce) {
if (renderOnce) {
renderOnce = false;
}

if (isBeyondCutoff) {
// Set the rootElement's font size if scale is enabled.
if (enableScale) {
rootElement.style.fontSize = rootFontSizeFinal.toFixed(6) + 'rem';
}

// Indicate that the viewport has exceeded the mobileWidth.
wasLastBeyondMobileWidth = true;
} else if (wasLastBeyondMobileWidth) {
/**
* Prevent odd behaviour when refreshed.
* By removing the style attribute once when
* within the mobileWidth.
*/
if (wasLastBeyondMobileWidth) {
rootElement.removeAttribute('style');
}

// Reset as within mobileWidth.
wasLastBeyondMobileWidth = false;
}
}
};

/**
* Default config properties if not defined.
*/
const defaults$1 = {
loadEvent: 'DOMContentLoaded', // Load type
mobileWidth: 640, // Width before disabling for mobile phone devices.
scaleDelay: 16, // Miliseconds between calls on resize.
preserveDevicePixelRatio: false, // Preserve the device pixel ratio on zoom.
rootSelector: 'html', // Use the HTML element as the root element.
onScale: undefined,
onZoom: undefined,
onResize: undefined,
cutOffWidth: 0, // The minimum width to disable resizing.
relativeDesignWidth: 1024, // The width relative to the font size.
enableScale: true,
/**
* This is important particularly when users maximises and reverts the browser
* window. This delay determines the debounce threshold but also the trailing
* edge call.
*/
lateDetectionDelay: 500
};

const { rootSelector: rootSelector$1 } = defaults$1;

// The root font element.
const rootElement = getRootElement(rootSelector$1);

/**
* Mutate root font size with pre-sets.
* @param {HTMLElement} rootElement - Root element option.
* @param {Boolean} rootElement - Enable scale option.
* @return {Function} mutateRootFontSize.
*/
const mutateRootFontSize = mutateRootFontSizePartial(rootElement);

let callbacksRequireValidation = true;
let hasScaleCallback = false;
let hasZoomCallback = false;
let hasResizeCallback = false;
let APIParameters;
let callbacksRequireValidation = true;
let initalRenderOnce = true;

const setCallbacks = (APIParameters, isBeyondCutoff, resizeWithoutZoom, onScale, onZoom, onResize) => {
// Validates callbacks once.
if (callbacksRequireValidation && isBeyondCutoff) {
callbacksRequireValidation = false;
hasScaleCallback = isFunction(onScale);
hasZoomCallback = isFunction(onZoom);
hasResizeCallback = isFunction(onResize);
}

// Action onScale during resize without zoom.
if (resizeWithoutZoom && hasScaleCallback) {
onScale(APIParameters);
}

// Action onZoom during resize without scale.
if (!resizeWithoutZoom && hasZoomCallback) {
onZoom(APIParameters);
}

// Action onResize during either zoom or scale.
if (hasResizeCallback) {
onResize(APIParameters);
}
};

let lastDevicePixelRatio;
let setRootFontSizeTimeoutId;
let lastOuterWidth;
/**
* Calculate and apply the new font size to the root element.
*/
const resizeRootFontSize = (settings, setRootFontSizeTail) => {

const {
innerWidth,
outerWidth,
isDevicePixelRatioDefault,
relativeDesignWidth,
cutOff,
rootElement,
designWidthRatio,
calculatedDPR,
rootFontSize,
Expand All @@ -635,6 +704,11 @@ const resizeRootFontSize = (settings, setRootFontSizeTail) => {
lateDetectionDelay
} = settings;

// Assigns lastOuterWidth with an inital value, never expected to be zero.
if (!lastOuterWidth) {
lastOuterWidth = outerWidth;
}

// Calculates the devicePixelRatio as if the default was 1.
const normalizedDPR = 1 / defaultDPR * calculatedDPR;

Expand All @@ -644,49 +718,24 @@ const resizeRootFontSize = (settings, setRootFontSizeTail) => {
// Truthy if the browser is resized without being zoomed.
const resizeWithoutZoom = calculatedDPR === lastDevicePixelRatio;

// Assigns lastOuterWidth with an inital value, never expected to be zero.
if (!lastOuterWidth) {
lastOuterWidth = outerWidth;
}
// Check to see if the window is at the default zoom level.
const isDevicePixelRatioDefault = defaultDPR === calculatedDPR;

// Determine if the resize event was last with or without zoom.
const resizeWithoutZoom2 = outerWidth === lastOuterWidth;

if (resizeWithoutZoom || isDevicePixelRatioDefault || initalRenderOnce) {
if (initalRenderOnce) {
initalRenderOnce = false;
}
const isAboveDesignWidth = innerWidth > relativeDesignWidth;
const isAboveDesignWidth = innerWidth > relativeDesignWidth;

if (innerWidth > cutOff) {
/**
* Set the rootElement's font size.
*/
if (enableScale) {
rootElement.style.fontSize = (rootFontSize * designWidthRatio * evalDPR).toFixed(6) + 'rem';
}
const isBeyondCutoff = innerWidth > cutOff;

/**
* Indicate that the viewport has exceeded the mobileWidth.
*/
wasLastBeyondMobileWidth = true;
} else if (wasLastBeyondMobileWidth) {
/**
* Prevent odd behaviour when refreshed.
* By removing the style attribute once when
* within the mobileWidth.
*/
if (wasLastBeyondMobileWidth) {
rootElement.removeAttribute("style");
}
/**
* Reset as within mobileWidth.
*/
wasLastBeyondMobileWidth = false;
}
}
const rootFontSizeFinal = rootFontSize * designWidthRatio * evalDPR;

const hasScaledOrDPRIsDefault = resizeWithoutZoom || isDevicePixelRatioDefault;

mutateRootFontSize(rootFontSizeFinal, resizeWithoutZoom, hasScaledOrDPRIsDefault, isDevicePixelRatioDefault, isAboveDesignWidth, isBeyondCutoff, enableScale);

clearTimeout(setRootFontSizeTimeoutId);

if (resizeWithoutZoom2) {
// setRootFontSizeTail to be independently conditional.
if (setRootFontSizeTail) {
Expand All @@ -697,40 +746,20 @@ const resizeRootFontSize = (settings, setRootFontSizeTail) => {
}

// The parameters passed to each callback as an object.
APIParameters = {
const APIParameters = {
viewportWidth,
innerWidth,
evalDPR,
calculatedDPR,
normalizedDPR
};

// Validates callbacks once.
if (callbacksRequireValidation && innerWidth > cutOff) {
callbacksRequireValidation = false;
hasScaleCallback = isCallBackDefined(onScale);
hasZoomCallback = isCallBackDefined(onZoom);
hasResizeCallback = isCallBackDefined(onResize);
}

// Action onScale during resize without zoom.
if (resizeWithoutZoom && hasScaleCallback) {
onScale(APIParameters);
}

// Action onZoom during resize without scale.
if (!resizeWithoutZoom && hasZoomCallback) {
onZoom(APIParameters);
}

// Action onResize during either zoom or scale.
if (hasResizeCallback) {
onResize(APIParameters);
}
setCallbacks(APIParameters, isBeyondCutoff, resizeWithoutZoom, onScale, onZoom, onResize);

// Store the last device pixel ratio for future comparision.
lastDevicePixelRatio = calculatedDPR;

// Re-assign the lastOuterWidth.
lastOuterWidth = outerWidth;
};

Expand Down Expand Up @@ -767,30 +796,6 @@ const mimeticPartial = (initializeMimetic, defaults) => {
};
};

/**
* Default config properties if not defined.
*/
const defaults$1 = {
loadEvent: 'DOMContentLoaded', // Load type
mobileWidth: 640, // Width before disabling for mobile phone devices.
scaleDelay: 16, // Miliseconds between calls on resize.
preserveDevicePixelRatio: false, // Preserve the device pixel ratio on zoom.
rootSelector: 'html', // Use the HTML element as the root element.
onScale: undefined,
onZoom: undefined,
onResize: undefined,
cutOffWidth: 0, // The minimum width to disable resizing.
relativeDesignWidth: 1024, // The width relative to the font size.
enableScale: true,
/**
* This is important particularly when users maximises and reverts the browser
* window. This delay determines the debounce threshold but also the trailing
* edge call.
*/
lateDetectionDelay: 500
};

//Object Assign polyfill.
objectAssignPolyfill$1();

//Object Freeze polyfill.
Expand Down Expand Up @@ -819,7 +824,7 @@ const getRootREMValue = basicCompose(pxToRem, getFontSize);
resizilla's event listeners and a revive method to
restart Mimetic's initalization.
*/
const initializeMimetic = initializeMimeticPartial(getRootElement, getRootREMValue, CSSUnitsToPixels, setRootFontSize, resizilla);
const initializeMimetic = initializeMimeticPartial(document, getRootREMValue, CSSUnitsToPixels, setRootFontSize, resizilla);

// The MIMETIC API.
const mimetic = mimeticPartial(initializeMimetic, defaults$1);
Expand Down
Loading

0 comments on commit f51218f

Please sign in to comment.