stuff
This commit is contained in:
parent
bc92231240
commit
b8225c639e
GPG key ID:
883EDBAA726BD96C
11904 changed files with 1472749 additions and 133 deletions
142
node_modules/@marp-team/marpit/lib/markdown/background_image/advanced.js
generated
vendored
Normal file
142
node_modules/@marp-team/marpit/lib/markdown/background_image/advanced.js
generated
vendored
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.advancedBackground = void 0;
|
||||
var _inline_style = _interopRequireDefault(require("../../helpers/inline_style"));
|
||||
var _wrap_tokens = require("../../helpers/wrap_tokens");
|
||||
var _plugin = _interopRequireDefault(require("../../plugin"));
|
||||
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
||||
/** @module */
|
||||
|
||||
/**
|
||||
* Marpit advanced background image plugin.
|
||||
*
|
||||
* Support the advanced features for background image, by using `<figure>`
|
||||
* element(s) instead of CSS backgrounds. It works by creating the isolated
|
||||
* layer into inline SVG.
|
||||
*
|
||||
* @function advancedBackground
|
||||
* @param {MarkdownIt} md markdown-it instance.
|
||||
*/
|
||||
function _advancedBackground(md) {
|
||||
md.core.ruler.after('marpit_directives_apply', 'marpit_advanced_background', state => {
|
||||
let current;
|
||||
const newTokens = [];
|
||||
for (const t of state.tokens) {
|
||||
if (t.type === 'marpit_inline_svg_content_open' && t.meta && t.meta.marpitBackground) {
|
||||
current = t;
|
||||
const {
|
||||
height,
|
||||
images,
|
||||
open,
|
||||
width
|
||||
} = t.meta.marpitBackground;
|
||||
open.attrSet('data-marpit-advanced-background', 'content');
|
||||
|
||||
// Aligned direction
|
||||
const direction = t.meta.marpitBackground.direction || 'horizontal';
|
||||
|
||||
// Split backgrounds
|
||||
const splitSide = t.meta.marpitBackground.split;
|
||||
if (splitSide) {
|
||||
open.attrSet('data-marpit-advanced-background-split', splitSide);
|
||||
const splitBgSize = t.meta.marpitBackground.splitSize || '50%';
|
||||
t.attrSet('width', `${100 - Number.parseFloat(splitBgSize.slice(0, -1))}%`);
|
||||
if (splitSide === 'left') t.attrSet('x', splitBgSize);
|
||||
const style = new _inline_style.default(open.attrGet('style'));
|
||||
style.set('--marpit-advanced-background-split', splitBgSize);
|
||||
open.attrSet('style', style.toString());
|
||||
}
|
||||
|
||||
// Add the isolated layer for background image
|
||||
newTokens.push(...(0, _wrap_tokens.wrapTokens)(state.Token, 'marpit_advanced_background_foreign_object', {
|
||||
tag: 'foreignObject',
|
||||
width,
|
||||
height
|
||||
}, (0, _wrap_tokens.wrapTokens)(state.Token, 'marpit_advanced_background_section', {
|
||||
...open.attrs.reduce((o, [k, v]) => ({
|
||||
...o,
|
||||
[k]: v
|
||||
}), {}),
|
||||
tag: 'section',
|
||||
id: undefined,
|
||||
'data-marpit-advanced-background': 'background'
|
||||
}, (0, _wrap_tokens.wrapTokens)(state.Token, 'marpit_advanced_background_image_container', {
|
||||
tag: 'div',
|
||||
'data-marpit-advanced-background-container': true,
|
||||
'data-marpit-advanced-background-direction': direction
|
||||
}, (() => {
|
||||
const imageTokens = [];
|
||||
|
||||
// Add multiple image elements
|
||||
for (const img of images) {
|
||||
const style = new _inline_style.default({
|
||||
'background-image': `url("${img.url}")`
|
||||
});
|
||||
|
||||
// Image sizing
|
||||
if (img.size) style.set('background-size', img.size);
|
||||
|
||||
// Image filter for backgrounds (Only in advanced BG)
|
||||
if (img.filter) style.set('filter', img.filter);
|
||||
imageTokens.push(...(0, _wrap_tokens.wrapTokens)(state.Token, 'marpit_advanced_background_image', {
|
||||
tag: 'figure',
|
||||
style: style.toString(),
|
||||
open: {
|
||||
meta: {
|
||||
marpitBackgroundAlt: img.alt
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
return imageTokens;
|
||||
})()))), t);
|
||||
} else if (current && t.type === 'marpit_inline_svg_content_close') {
|
||||
const {
|
||||
open,
|
||||
height,
|
||||
width
|
||||
} = current.meta.marpitBackground;
|
||||
|
||||
// Apply styles
|
||||
const style = new _inline_style.default();
|
||||
if (open.meta && open.meta.marpitDirectives && open.meta.marpitDirectives.color) style.set('color', open.meta.marpitDirectives.color);
|
||||
|
||||
// Add the isolated layer for pseudo contents (e.g. Page number)
|
||||
newTokens.push(t, ...(0, _wrap_tokens.wrapTokens)(state.Token, 'marpit_advanced_background_foreign_object', {
|
||||
tag: 'foreignObject',
|
||||
width,
|
||||
height,
|
||||
'data-marpit-advanced-background': 'pseudo'
|
||||
}, (0, _wrap_tokens.wrapTokens)(state.Token, 'marpit_advanced_pseudo_section', {
|
||||
...open.attrs.reduce((o, [k, v]) => ({
|
||||
...o,
|
||||
[k]: v
|
||||
}), {}),
|
||||
tag: 'section',
|
||||
id: undefined,
|
||||
style: style.toString(),
|
||||
'data-marpit-advanced-background': 'pseudo'
|
||||
})));
|
||||
current = undefined;
|
||||
} else {
|
||||
newTokens.push(t);
|
||||
}
|
||||
}
|
||||
state.tokens = newTokens;
|
||||
});
|
||||
|
||||
// Renderer for advanced background image
|
||||
md.renderer.rules.marpit_advanced_background_image_open = (tokens, idx, options, _env, self) => {
|
||||
const token = tokens[idx];
|
||||
const open = self.renderToken(tokens, idx, options);
|
||||
if (token.meta?.marpitBackgroundAlt) {
|
||||
return `${open}<figcaption>${md.utils.escapeHtml(token.meta.marpitBackgroundAlt)}</figcaption>`;
|
||||
}
|
||||
return open;
|
||||
};
|
||||
}
|
||||
const advancedBackground = exports.advancedBackground = (0, _plugin.default)(_advancedBackground);
|
||||
var _default = exports.default = advancedBackground;
|
||||
111
node_modules/@marp-team/marpit/lib/markdown/background_image/apply.js
generated
vendored
Normal file
111
node_modules/@marp-team/marpit/lib/markdown/background_image/apply.js
generated
vendored
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.backgroundImageApply = void 0;
|
||||
var _plugin = _interopRequireDefault(require("../../plugin"));
|
||||
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
||||
/** @module */
|
||||
|
||||
/**
|
||||
* Marpit background image apply plugin.
|
||||
*
|
||||
* Apply parsed meta for background image / color into directives of each page.
|
||||
*
|
||||
* When inline SVG is enabled, it will reshape meta for advanced process instead
|
||||
* of converting to directives.
|
||||
*
|
||||
* @function backgroundImageApply
|
||||
* @param {MarkdownIt} md markdown-it instance.
|
||||
*/
|
||||
function _backgroundImageApply(md) {
|
||||
md.core.ruler.after('marpit_inline_svg', 'marpit_apply_background_image', ({
|
||||
inlineMode,
|
||||
tokens
|
||||
}) => {
|
||||
if (inlineMode) return;
|
||||
let current = {};
|
||||
for (const tb of tokens) {
|
||||
if (tb.type === 'marpit_slide_open') current.open = tb;
|
||||
if (tb.type === 'marpit_inline_svg_content_open') current.svgContent = tb;
|
||||
if (tb.type === 'marpit_slide_close') {
|
||||
if (current.images && current.images.length > 0) {
|
||||
if (current.svgContent) {
|
||||
// Reshape meta for advanced background
|
||||
current.svgContent.meta = {
|
||||
...(current.svgContent.meta || {}),
|
||||
marpitBackground: {
|
||||
direction: current.direction,
|
||||
height: current.svgContent.attrGet('height'),
|
||||
images: current.images,
|
||||
open: current.open,
|
||||
split: current.split,
|
||||
splitSize: current.splitSize,
|
||||
width: current.svgContent.attrGet('width')
|
||||
}
|
||||
};
|
||||
} else {
|
||||
// Apply simple CSS background
|
||||
const img = current.images[current.images.length - 1];
|
||||
current.open.meta.marpitDirectives = {
|
||||
...(current.open.meta.marpitDirectives || {}),
|
||||
backgroundImage: `url("${img.url}")`
|
||||
};
|
||||
if (img.size) current.open.meta.marpitDirectives.backgroundSize = img.size;
|
||||
}
|
||||
}
|
||||
current = {};
|
||||
}
|
||||
|
||||
// Collect parsed inline image meta
|
||||
if (current.open && tb.type === 'inline') for (const t of tb.children) {
|
||||
if (t.type === 'image') {
|
||||
const {
|
||||
background,
|
||||
backgroundDirection,
|
||||
backgroundSize,
|
||||
backgroundSplit,
|
||||
backgroundSplitSize,
|
||||
color,
|
||||
filter,
|
||||
height,
|
||||
size,
|
||||
url,
|
||||
width,
|
||||
options
|
||||
} = t.meta.marpitImage;
|
||||
if (background && !url.match(/^\s*$/)) {
|
||||
if (color) {
|
||||
// Background color
|
||||
current.open.meta.marpitDirectives = {
|
||||
...(current.open.meta.marpitDirectives || {}),
|
||||
backgroundColor: color
|
||||
};
|
||||
} else {
|
||||
// Background image
|
||||
let altText = '';
|
||||
for (const opt of options) if (!opt.consumed) altText += opt.leading + opt.content;
|
||||
current.images = [...(current.images || []), {
|
||||
filter,
|
||||
height,
|
||||
size: (() => {
|
||||
const s = size || backgroundSize || undefined;
|
||||
return !['contain', 'cover'].includes(s) && (width || height) ? `${width || s || 'auto'} ${height || s || 'auto'}` : s;
|
||||
})(),
|
||||
url,
|
||||
width,
|
||||
alt: altText.trimStart()
|
||||
}];
|
||||
}
|
||||
}
|
||||
if (backgroundDirection) current.direction = backgroundDirection;
|
||||
if (backgroundSplit) current.split = backgroundSplit;
|
||||
if (backgroundSplitSize) current.splitSize = backgroundSplitSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const backgroundImageApply = exports.backgroundImageApply = (0, _plugin.default)(_backgroundImageApply);
|
||||
var _default = exports.default = backgroundImageApply;
|
||||
77
node_modules/@marp-team/marpit/lib/markdown/background_image/parse.js
generated
vendored
Normal file
77
node_modules/@marp-team/marpit/lib/markdown/background_image/parse.js
generated
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.backgroundImageParse = void 0;
|
||||
var _plugin = _interopRequireDefault(require("../../plugin"));
|
||||
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
||||
/** @module */
|
||||
|
||||
const bgSizeKeywords = {
|
||||
auto: 'auto',
|
||||
contain: 'contain',
|
||||
cover: 'cover',
|
||||
fit: 'contain'
|
||||
};
|
||||
const splitSizeMatcher = /^(left|right)(?::((?:\d*\.)?\d+%))?$/;
|
||||
|
||||
/**
|
||||
* Marpit background image parse plugin.
|
||||
*
|
||||
* Parse Marpit's image token and mark as background image when the alternate
|
||||
* text includes `bg`. The marked images will not show as the regular image.
|
||||
*
|
||||
* Furthermore, it parses additional keywords needed for background image.
|
||||
*
|
||||
* @function backgroundImageParse
|
||||
* @param {MarkdownIt} md markdown-it instance.
|
||||
*/
|
||||
function _backgroundImageParse(md) {
|
||||
md.inline.ruler2.after('marpit_parse_image', 'marpit_background_image', ({
|
||||
tokens
|
||||
}) => {
|
||||
for (const t of tokens) {
|
||||
if (t.type === 'image') {
|
||||
const {
|
||||
marpitImage
|
||||
} = t.meta;
|
||||
if (marpitImage.options.some(v => !v.consumed && v.content === 'bg')) {
|
||||
marpitImage.background = true;
|
||||
t.hidden = true;
|
||||
for (const opt of marpitImage.options) {
|
||||
if (opt.consumed) continue;
|
||||
let consumed = false;
|
||||
|
||||
// bg keyword
|
||||
if (opt.content === 'bg') consumed = true;
|
||||
|
||||
// Background size keyword
|
||||
if (bgSizeKeywords[opt.content]) {
|
||||
marpitImage.backgroundSize = bgSizeKeywords[opt.content];
|
||||
consumed = true;
|
||||
}
|
||||
|
||||
// Split background keyword
|
||||
const matched = opt.content.match(splitSizeMatcher);
|
||||
if (matched) {
|
||||
const [, splitSide, splitSize] = matched;
|
||||
marpitImage.backgroundSplit = splitSide;
|
||||
marpitImage.backgroundSplitSize = splitSize;
|
||||
consumed = true;
|
||||
}
|
||||
|
||||
// Background aligned direction
|
||||
if (opt.content === 'vertical' || opt.content === 'horizontal') {
|
||||
marpitImage.backgroundDirection = opt.content;
|
||||
consumed = true;
|
||||
}
|
||||
if (consumed) opt.consumed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const backgroundImageParse = exports.backgroundImageParse = (0, _plugin.default)(_backgroundImageParse);
|
||||
var _default = exports.default = backgroundImageParse;
|
||||
Loading…
Add table
Add a link
Reference in a new issue