viewport-extra
Version:
Enable to set min-width and max-width to viewport
459 lines (431 loc) • 24 kB
JavaScript
/*!
* Viewport Extra v2.4.1
* (c) dsktschy
* Released under the MIT License.
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var createPartialContent = function (num) { return ({
minWidth: num
}); };
var truncateDecimalNumber = function (num, decimalPlaces) {
var mathTrunc = function (x) { return (x < 0 ? Math.ceil : Math.floor)(x); };
return isFinite(decimalPlaces)
? mathTrunc(num * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces)
: num;
};
var camelizeKebabCaseString = function (str) {
return str
.replace(/\s+/g, '')
.toLowerCase()
.replace(/-./g, function (s) { return s.charAt(1).toUpperCase(); });
};
var kebabizeCamelCaseString = function (str) {
return str
.replace(/\s+/g, '')
.replace(/[A-Z]+/g, function (s) { return "-".concat(s.charAt(0)); })
.toLowerCase();
};
var isContentWidth = function (value) {
return (typeof value === 'number' && value > 0 && value < Infinity) ||
value === 'device-width';
};
var isContentInitialScale = function (value) {
return typeof value === 'number' && value >= 0 && value <= 10;
};
var isContentMinWidth = function (value) {
return typeof value === 'number' && value >= 0 && value < Infinity;
};
var isContentMaxWidth = function (value) {
return typeof value === 'number' && value > 0 && value <= Infinity;
};
var defaultContent = {
width: 'device-width',
initialScale: 1,
minWidth: 0,
maxWidth: Infinity
};
var createContent = function (partialContent) {
if (partialContent === void 0) { partialContent = {}; }
var content = __assign({}, defaultContent);
for (var _i = 0, _a = Object.keys(partialContent); _i < _a.length; _i++) {
var key = _a[_i];
var value = partialContent[key];
if (value == null ||
(key === 'width' && !isContentWidth(value)) ||
(key === 'initialScale' && !isContentInitialScale(value)) ||
(key === 'minWidth' && !isContentMinWidth(value)) ||
(key === 'maxWidth' && !isContentMaxWidth(value))) {
// eslint-disable-next-line no-console
console.warn("Viewport Extra received invalid ".concat(key, ", so it is discarded."));
continue;
}
content[key] = value;
}
return content;
};
var mergeOptionalPartialContent = function (precedingOptionalPartialContent, followingOptionalPartialContent) {
return precedingOptionalPartialContent
? __assign(__assign({}, precedingOptionalPartialContent), (followingOptionalPartialContent !== null && followingOptionalPartialContent !== void 0 ? followingOptionalPartialContent : {})) : followingOptionalPartialContent;
};
var createPartialMediaSpecificParameters$1 = function (partialContent) { return ({
content: partialContent
}); };
function createContentAttribute$1(content, documentClientWidth, decimalPlaces) {
if (content === void 0) { content = __assign({}, defaultContent); }
if (documentClientWidth === void 0) { documentClientWidth = 0; }
if (decimalPlaces === void 0) { decimalPlaces = 0; }
var width = content.width, initialScale = content.initialScale;
var minWidth = content.minWidth, maxWidth = content.maxWidth, contentWithoutExtraProperties = __rest(content, ["minWidth", "maxWidth"]);
if (minWidth > maxWidth) {
// eslint-disable-next-line no-console
console.warn('Viewport Extra received minWidth that is greater than maxWidth, so they are ignored.');
}
else if (typeof width === 'number') {
// eslint-disable-next-line no-console
console.warn('Viewport Extra received fixed width, so minWidth and maxWidth are ignored.');
}
else if (documentClientWidth < minWidth) {
contentWithoutExtraProperties.width = minWidth;
contentWithoutExtraProperties.initialScale =
(documentClientWidth / minWidth) * initialScale;
}
else if (documentClientWidth > maxWidth) {
contentWithoutExtraProperties.width = maxWidth;
contentWithoutExtraProperties.initialScale =
(documentClientWidth / maxWidth) * initialScale;
}
return Object.keys(contentWithoutExtraProperties)
.map(function (key) {
return "".concat(kebabizeCamelCaseString(key), "=").concat(typeof contentWithoutExtraProperties[key] === 'number'
? truncateDecimalNumber(contentWithoutExtraProperties[key], decimalPlaces)
: contentWithoutExtraProperties[key]);
})
.sort()
.join(',');
}
var ensureViewportElement = function (doc) {
var viewportElement = doc.querySelector('meta[name="viewport"]');
if (viewportElement)
return viewportElement;
var metaElement = doc.createElement('meta');
metaElement.setAttribute('name', 'viewport');
doc.head.appendChild(metaElement);
return metaElement;
};
var getViewportExtraElementList = function (doc) {
var arrayFrom = function (arrayLike) {
return Array.prototype.slice.call(arrayLike);
};
return arrayFrom(doc.querySelectorAll('meta[name="viewport-extra"]'));
};
var getDocumentClientWidth = function (doc) {
return doc.documentElement.clientWidth;
};
var defaultDecimalPlaces = Infinity;
var createDecimalPlaces = function (optionalDecimalPlaces) { return optionalDecimalPlaces !== null && optionalDecimalPlaces !== void 0 ? optionalDecimalPlaces : defaultDecimalPlaces; };
var mergeOptionalDecimalPlaces = function (precedingOptionalDecimalPlaces, followingOptionalDecimalPlaces) {
return followingOptionalDecimalPlaces !== null && followingOptionalDecimalPlaces !== void 0 ? followingOptionalDecimalPlaces : precedingOptionalDecimalPlaces;
};
var defaultUnscaledComputing = false;
var createUnscaledComputing = function (optionalUnscaledComputing) { return optionalUnscaledComputing !== null && optionalUnscaledComputing !== void 0 ? optionalUnscaledComputing : defaultUnscaledComputing; };
var mergeOptionalUnscaledComputing = function (precedingOptionalUnscaledComputing, followingOptionalUnscaledComputing) {
return followingOptionalUnscaledComputing !== null && followingOptionalUnscaledComputing !== void 0 ? followingOptionalUnscaledComputing : precedingOptionalUnscaledComputing;
};
var createGlobalParameters = function (partialGlobalParameters) {
if (partialGlobalParameters === void 0) { partialGlobalParameters = {}; }
return ({
unscaledComputing: createUnscaledComputing(partialGlobalParameters.unscaledComputing),
decimalPlaces: createDecimalPlaces(partialGlobalParameters.decimalPlaces)
});
};
var mergePartialGlobalParameters = function (precedingPartialGlobalParameters, followingPartialGlobalParameters) {
var partialGlobalParameters = {};
var optionalUnscaledComputing = mergeOptionalUnscaledComputing(precedingPartialGlobalParameters.unscaledComputing, followingPartialGlobalParameters.unscaledComputing);
var optionalDecimalPlaces = mergeOptionalDecimalPlaces(precedingPartialGlobalParameters.decimalPlaces, followingPartialGlobalParameters.decimalPlaces);
if (typeof optionalUnscaledComputing !== 'undefined')
partialGlobalParameters.unscaledComputing = optionalUnscaledComputing;
if (typeof optionalDecimalPlaces !== 'undefined')
partialGlobalParameters.decimalPlaces = optionalDecimalPlaces;
return partialGlobalParameters;
};
var assignOptionalUnscaledComputing = function (partialGlobalParameters, optionalUnscaledComputing) {
if (partialGlobalParameters === void 0) { partialGlobalParameters = {}; }
return typeof optionalUnscaledComputing !== 'undefined'
? __assign(__assign({}, partialGlobalParameters), { unscaledComputing: optionalUnscaledComputing }) : partialGlobalParameters;
};
var assignOptionalDecimalPlaces = function (partialGlobalParameters, optionalDecimalPlaces) {
if (partialGlobalParameters === void 0) { partialGlobalParameters = {}; }
return typeof optionalDecimalPlaces !== 'undefined'
? __assign(__assign({}, partialGlobalParameters), { decimalPlaces: optionalDecimalPlaces }) : partialGlobalParameters;
};
var getUnscaledComputing = function (globalParameters) {
return globalParameters.unscaledComputing;
};
var getDecimalPlaces = function (globalParameters) {
return globalParameters.decimalPlaces;
};
var mergeNullableContentAttributes = function (precedingNullableContentAttribute, followingNullableContentAttribute) {
return precedingNullableContentAttribute
? followingNullableContentAttribute
? [
precedingNullableContentAttribute,
followingNullableContentAttribute
].join(',')
: precedingNullableContentAttribute
: followingNullableContentAttribute;
};
var createOptionalPartialContent = function (nullableContentAttribute) {
return nullableContentAttribute
? nullableContentAttribute
.split(',')
.reduce(function (partialContent, equalSeparatedContent) {
var _a = equalSeparatedContent.split('='), key = _a[0], value = _a[1];
var trimmedKey = key.trim();
if (!trimmedKey)
return partialContent;
var trimmedValue = value.trim();
if (!trimmedValue)
return partialContent;
var numberValue = +trimmedValue;
partialContent[camelizeKebabCaseString(trimmedKey)] = isNaN(numberValue)
? trimmedValue
: numberValue;
return partialContent;
}, {})
: undefined;
};
var mergeNullableDecimalPlacesAttribute = function (precedingNullableDecimalPlacesAttribute, followingNullableDecimalPlacesAttribute) {
return followingNullableDecimalPlacesAttribute !== null && followingNullableDecimalPlacesAttribute !== void 0 ? followingNullableDecimalPlacesAttribute : precedingNullableDecimalPlacesAttribute;
};
var createOptionalDecimalPlaces = function (nullableDecimalPlacesAttribute) {
return nullableDecimalPlacesAttribute !== null
? +nullableDecimalPlacesAttribute
: undefined;
};
var mergeNullableMediaAttribute = function (precedingNullableMediaAttribute, followingNullableMediaAttribute) {
return followingNullableMediaAttribute !== null && followingNullableMediaAttribute !== void 0 ? followingNullableMediaAttribute : precedingNullableMediaAttribute;
};
var createOptionalMedia = function (nullableMediaAttribute) { return nullableMediaAttribute !== null && nullableMediaAttribute !== void 0 ? nullableMediaAttribute : undefined; };
var defaultMedia = '';
var createMedia = function (optionalMedia) {
return optionalMedia !== null && optionalMedia !== void 0 ? optionalMedia : defaultMedia;
};
var mergeOptionalMedia = function (precedingOptionalMedia, followingOptionalMedia) { return followingOptionalMedia !== null && followingOptionalMedia !== void 0 ? followingOptionalMedia : precedingOptionalMedia; };
var createMediaSpecificParameters = function (partialMediaSpecificParameters) {
if (partialMediaSpecificParameters === void 0) { partialMediaSpecificParameters = {}; }
return ({
content: createContent(partialMediaSpecificParameters.content),
media: createMedia(partialMediaSpecificParameters.media)
});
};
var mergePartialMediaSpecificParameters = function (precedingPartialMediaSpecificParameters, followingPartialMediaSpecificParameters) {
var partialMediaSpecificParameters = {};
var optionalPartialContent = mergeOptionalPartialContent(precedingPartialMediaSpecificParameters.content, followingPartialMediaSpecificParameters.content);
var optionalMedia = mergeOptionalMedia(precedingPartialMediaSpecificParameters.media, followingPartialMediaSpecificParameters.media);
if (optionalPartialContent)
partialMediaSpecificParameters.content = optionalPartialContent;
if (typeof optionalMedia !== 'undefined')
partialMediaSpecificParameters.media = optionalMedia;
return partialMediaSpecificParameters;
};
function createContentAttribute(optionalMediaSpecificParameters, optionalDocumentClientWidth, optionalDecimalPlaces) {
return optionalMediaSpecificParameters &&
typeof optionalDocumentClientWidth !== 'undefined' &&
typeof optionalDecimalPlaces !== 'undefined'
? createContentAttribute$1(optionalMediaSpecificParameters.content, optionalDocumentClientWidth, optionalDecimalPlaces)
: createContentAttribute$1();
}
var assignOptionalPartialContent = function (partialMediaSpecificParameters, optionalPartialContent) {
if (partialMediaSpecificParameters === void 0) { partialMediaSpecificParameters = {}; }
return optionalPartialContent
? __assign(__assign({}, partialMediaSpecificParameters), { content: optionalPartialContent }) : partialMediaSpecificParameters;
};
var assignOptionalMedia = function (partialMediaSpecificParameters, optionalMedia) {
if (partialMediaSpecificParameters === void 0) { partialMediaSpecificParameters = {}; }
return typeof optionalMedia !== 'undefined'
? __assign(__assign({}, partialMediaSpecificParameters), { media: optionalMedia }) : partialMediaSpecificParameters;
};
var getContent$1 = function (mediaSpecificParameters) { return mediaSpecificParameters.content; };
var createPartialMediaSpecificParametersMerger = function (isMatchingCurrentViewport) {
return function (precedingPartialMediaSpecificParameters, followingPartialMediaSpecificParameters) {
return isMatchingCurrentViewport(followingPartialMediaSpecificParameters.media)
? mergePartialMediaSpecificParameters(precedingPartialMediaSpecificParameters, followingPartialMediaSpecificParameters)
: precedingPartialMediaSpecificParameters;
};
};
var mergeNullableUnscaledComputingAttribute = function (precedingNullableUnscaledComputingAttribute, followingNullableUnscaledComputingAttribute) {
return followingNullableUnscaledComputingAttribute !== null && followingNullableUnscaledComputingAttribute !== void 0 ? followingNullableUnscaledComputingAttribute : precedingNullableUnscaledComputingAttribute;
};
var createOptionalUnscaledComputing = function (nullableUnscaledComputingAttribute) {
return nullableUnscaledComputingAttribute !== null ? true : undefined;
};
var getNullableUnscaledComputingAttribute = function (htmlMetaElement) {
return mergeNullableUnscaledComputingAttribute(htmlMetaElement.getAttribute('data-unscaled-computing'), htmlMetaElement.getAttribute('data-extra-unscaled-computing'));
};
var getNullableDecimalPlacesAttribute = function (htmlMetaElement) {
return mergeNullableDecimalPlacesAttribute(htmlMetaElement.getAttribute('data-decimal-places'), htmlMetaElement.getAttribute('data-extra-decimal-places'));
};
var createPartialGlobalParameters = function (htmlMetaElement) {
return assignOptionalDecimalPlaces(assignOptionalUnscaledComputing(undefined, createOptionalUnscaledComputing(getNullableUnscaledComputingAttribute(htmlMetaElement))), createOptionalDecimalPlaces(getNullableDecimalPlacesAttribute(htmlMetaElement)));
};
var getNullableContentAttribute = function (htmlMetaElement) {
return mergeNullableContentAttributes(htmlMetaElement.getAttribute('content'), htmlMetaElement.getAttribute('data-extra-content'));
};
var getNullableMediaAttribute = function (htmlMetaElement) {
return mergeNullableMediaAttribute(htmlMetaElement.getAttribute('data-media'), htmlMetaElement.getAttribute('data-extra-media'));
};
var createPartialMediaSpecificParameters = function (htmlMetaElement) {
return assignOptionalMedia(assignOptionalPartialContent(undefined, createOptionalPartialContent(getNullableContentAttribute(htmlMetaElement))), createOptionalMedia(getNullableMediaAttribute(htmlMetaElement)));
};
var setContentAttribute = function (htmlMetaElement, contentAttribute) { return htmlMetaElement.setAttribute('content', contentAttribute); };
var applyMediaSpecificParameters = function (htmlMetaElement, getDocumentClientWidth, getMediaSpecificParameters, globalParameters) {
if (getUnscaledComputing(globalParameters))
setContentAttribute(htmlMetaElement, createContentAttribute());
setContentAttribute(htmlMetaElement, createContentAttribute(getMediaSpecificParameters(), getDocumentClientWidth(), getDecimalPlaces(globalParameters)));
};
var applyMediaSpecificParametersUnscaled = function (htmlMetaElement, getDocumentClientWidth, getMediaSpecificParameters, globalParameters) {
setContentAttribute(htmlMetaElement, createContentAttribute());
setContentAttribute(htmlMetaElement, createContentAttribute(getMediaSpecificParameters(), getDocumentClientWidth(), getDecimalPlaces(globalParameters)));
};
var createMatchMediaPredicate = function (mm) {
return function (media) {
return typeof media !== 'undefined' ? mm(media).matches : true;
};
};
var viewportElement = null;
var viewportExtraElementList = [];
var internalGlobalParameters = null;
var internalPartialMediaSpecificParametersList = [];
if (typeof window !== 'undefined') {
viewportElement = ensureViewportElement(document);
viewportExtraElementList = getViewportExtraElementList(document);
internalGlobalParameters = createGlobalParameters(__spreadArray([
createPartialGlobalParameters(viewportElement)
], viewportExtraElementList.map(createPartialGlobalParameters), true).reduce(mergePartialGlobalParameters));
internalPartialMediaSpecificParametersList = __spreadArray([
createPartialMediaSpecificParameters(viewportElement)
], viewportExtraElementList.map(createPartialMediaSpecificParameters), true);
// For backward compatibility,
// side effects force unscaled computing regardless of data-(extra-)unscaled-computing attributes
// It's so that document.documentElement.clientWidth can work
// in the case where viewport meta element does not exist
applyMediaSpecificParametersUnscaled(viewportElement, function () { return getDocumentClientWidth(document); }, function () {
return createMediaSpecificParameters(internalPartialMediaSpecificParametersList.reduce(createPartialMediaSpecificParametersMerger(createMatchMediaPredicate(matchMedia)),
// Value that does not need to check matching current viewport
createMediaSpecificParameters()));
}, internalGlobalParameters);
}
var setParameters = function (partialMediaSpecificParametersList, partialGlobalParameters) {
if (partialGlobalParameters === void 0) { partialGlobalParameters = {}; }
if (typeof window === 'undefined' ||
!viewportElement ||
!internalGlobalParameters)
return;
internalGlobalParameters = createGlobalParameters([internalGlobalParameters, partialGlobalParameters].reduce(mergePartialGlobalParameters));
internalPartialMediaSpecificParametersList = __spreadArray(__spreadArray([], internalPartialMediaSpecificParametersList, true), partialMediaSpecificParametersList, true);
applyMediaSpecificParameters(viewportElement, function () { return getDocumentClientWidth(document); }, function () {
return createMediaSpecificParameters(internalPartialMediaSpecificParametersList.reduce(createPartialMediaSpecificParametersMerger(createMatchMediaPredicate(matchMedia)),
// Value that does not need to check matching current viewport
createMediaSpecificParameters()));
}, internalGlobalParameters);
};
var setContent = function (partialContent) {
if (typeof window === 'undefined' ||
!viewportElement ||
!internalGlobalParameters)
return;
internalPartialMediaSpecificParametersList = __spreadArray(__spreadArray([], internalPartialMediaSpecificParametersList, true), [
createPartialMediaSpecificParameters$1(partialContent)
], false);
applyMediaSpecificParameters(viewportElement, function () { return getDocumentClientWidth(document); }, function () {
return createMediaSpecificParameters(internalPartialMediaSpecificParametersList.reduce(createPartialMediaSpecificParametersMerger(createMatchMediaPredicate(matchMedia)),
// Value that does not need to check matching current viewport
createMediaSpecificParameters()));
}, internalGlobalParameters);
};
/**
* - Merge content properties of all objects in internalPartialMediaSpecificParametersList variable and return it
* - Feature assuming that media properties are not used
* @deprecated
* */
var getContent = function () {
return getContent$1(createMediaSpecificParameters(internalPartialMediaSpecificParametersList.reduce(mergePartialMediaSpecificParameters,
// For environments where no window object exists
createMediaSpecificParameters())));
};
var updateReference = function () {
if (typeof window === 'undefined')
return;
viewportElement = ensureViewportElement(document);
};
/**
* - For compatibility with v1
* @deprecated
*/
var ViewportExtra = /** @class */ (function () {
function ViewportExtra(partialContentOrContentMinWidth) {
setContent(typeof partialContentOrContentMinWidth === 'number'
? createPartialContent(partialContentOrContentMinWidth)
: partialContentOrContentMinWidth);
}
ViewportExtra.setParameters = setParameters;
ViewportExtra.setContent = setContent;
ViewportExtra.getContent = getContent;
ViewportExtra.updateReference = updateReference;
return ViewportExtra;
}());
exports.default = ViewportExtra;
exports.getContent = getContent;
exports.setContent = setContent;
exports.setParameters = setParameters;
exports.updateReference = updateReference;
exports = exports.default;
exports.default = exports;