@marp-team/marpit - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

CHANGELOG.md

@@ -5,2 +5,9 @@ # Change Log
 
+## v0.0.3 - 2018-05-02
+
+* Implement background image resizing with keyword and scale ([#10](https://github.com/marp-team/marpit/pull/10))
+* Support advanced background mode with inline SVG, for multiple images and filters ([#11](https://github.com/marp-team/marpit/pull/11))
+* Upgrade node to the latest LTS version v8.11.1 ([#12](https://github.com/marp-team/marpit/pull/12))
+* Update docs about background images ([#13](https://github.com/marp-team/marpit/pull/13))
+
 ## v0.0.2 - 2018-04-28
@@ -7,0 +14,0 @@

lib/helpers/wrap_tokens.js

@@ -23,6 +23,6 @@ 'use strict';
  * @param {Object} [container.close] The object assigning to a closing token.
- * @param {Token[]} tokens Wrapping tokens.
+ * @param {Token[]} [tokens=[]] Wrapping tokens.
  * @returns {Token[]} Wrapped tokens.
  */
-function wrapTokens(type, container, tokens) {
+function wrapTokens(type, container, tokens = []) {
   const { tag } = container;
@@ -29,0 +29,0 @@

lib/markdown/background_image.js

@@ -6,14 +6,37 @@ 'use strict';
 });
+
+var _split = require('../helpers/split');
+
+var _split2 = _interopRequireDefault(_split);
+
+var _wrap_tokens = require('../helpers/wrap_tokens');
+
+var _wrap_tokens2 = _interopRequireDefault(_wrap_tokens);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /** @module */
+const bgSizeKeywords = {
+  auto: 'auto',
+  contain: 'contain',
+  cover: 'cover',
+  fit: 'contain'
 
-/**
- * Marpit background image plugin.
- *
- * Convert image token with description including `bg`, into `background*` local
- * directives.
- *
- * @alias module:markdown/background_image
- * @param {MarkdownIt} md markdown-it instance.
- */
-function backgroundImage(md) {
+  /**
+   * Marpit background image plugin.
+   *
+   * Convert image token to backgrounds when the alternate text includes `bg`.
+   *
+   * When Marpit `inlineSVG` option is `false`, the image will convert to
+   * `backgroundImage` and `backgroundSize` spot directive. It supports only
+   * single background and resizing by using CSS.
+   *
+   * When `inlineSVG` option is true, the plugin enables advanced background mode.
+   * In addition to the basic background implementation, it supports multiple
+   * background images and filters by using SVG.
+   *
+   * @alias module:markdown/background_image
+   * @param {MarkdownIt} md markdown-it instance.
+   */
+};function backgroundImage(md) {
   md.inline.ruler2.after('marpit_parse_image', 'marpit_background_image', ({ tokens }) => {
@@ -26,2 +49,6 @@ tokens.forEach(t => {
         t.hidden = true;
+
+        t.meta.marpitImage.options.forEach(opt => {
+          if (bgSizeKeywords[opt]) t.meta.marpitImage.backgroundSize = bgSizeKeywords[opt];
+        });
       }
@@ -31,19 +58,48 @@ });
 
-  md.core.ruler.after('marpit_directives_parse', 'marpit_apply_background_image', ({ inlineMode, tokens }) => {
+  md.core.ruler.after('marpit_inline_svg', 'marpit_apply_background_image', ({ inlineMode, tokens }) => {
     if (inlineMode) return;
 
-    let slide;
+    let current = {};
+
     tokens.forEach(tb => {
-      if (tb.type === 'marpit_slide_open') slide = tb;
-      if (!slide || tb.type !== 'inline') return;
+      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) {
+            // SVG advanced background
+            current.svgContent.meta = Object.assign({}, current.svgContent.meta || {}, {
+              marpitBackground: {
+                height: current.svgContent.attrGet('height'),
+                images: current.images,
+                open: current.open,
+                width: current.svgContent.attrGet('width')
+              }
+            });
+          } else {
+            // Simple CSS background
+            const img = current.images[current.images.length - 1];
+
+            current.open.meta.marpitDirectives = Object.assign({}, current.open.meta.marpitDirectives || {}, {
+              backgroundImage: `url("${img.url}")`
+            });
+
+            if (img.size) current.open.meta.marpitDirectives.backgroundSize = img.size;
+          }
+        }
+        current = {};
+      }
+
+      if (!current.open || tb.type !== 'inline') return;
+
       tb.children.forEach(t => {
         if (t.type !== 'image') return;
+        const { background, backgroundSize, size, url } = t.meta.marpitImage;
 
-        const { background, url } = t.meta.marpitImage;
-
         if (background && !url.match(/^\s*$/)) {
-          slide.meta.marpitDirectives = Object.assign({}, slide.meta.marpitDirectives || {}, {
-            backgroundImage: `url("${url}")`
-          });
+          current.images = [...(current.images || []), {
+            url,
+            size: size || backgroundSize || undefined
+          }];
         }
@@ -53,2 +109,31 @@ });
   });
+
+  md.core.ruler.after('marpit_directives_apply', 'marpit_advanced_background', state => {
+    state.tokens = (0, _split2.default)(state.tokens, t => t.type === 'marpit_inline_svg_content_open' && t.meta && t.meta.marpitBackground, true).reduce((arr, tokens) => {
+      const [foreignObject] = tokens;
+      let advancedBgs = [];
+
+      if (foreignObject.type === 'marpit_inline_svg_content_open') {
+        const {
+          height,
+          images,
+          open,
+          width
+        } = foreignObject.meta.marpitBackground;
+
+        open.attrSet('data-marpit-advanced-background', 'content');
+
+        advancedBgs = (0, _wrap_tokens2.default)('marpit_advanced_background_foreign_boejct', { tag: 'foreignObject', width, height }, (0, _wrap_tokens2.default)('marpit_advanced_background_section', Object.assign({}, open.attrs.reduce((o, [k, v]) => Object.assign({}, o, { [k]: v }), {}), {
+          tag: 'section',
+          id: undefined,
+          'data-marpit-advanced-background': 'background'
+        }), images.reduce((imgArr, img) => [...imgArr, ...(0, _wrap_tokens2.default)('marpit_advanced_background_image', {
+          tag: 'figure',
+          style: `background-image:url("${img.url}");${img.size ? `background-size:${img.size};` : ''}`
+        })], [])));
+      }
+
+      return [...arr, ...advancedBgs, ...tokens];
+    }, []);
+  });
 }
@@ -55,0 +140,0 @@

lib/markdown/inline_svg.js

@@ -27,3 +27,3 @@ 'use strict';
   md.core.ruler.after('marpit_directives_parse', 'marpit_inline_svg', state => {
-    if (state.inlineMode) return;
+    if (!marpit.options.inlineSVG || state.inlineMode) return;
 
@@ -46,3 +46,3 @@ const { themeSet, lastGlobalDirectives } = marpit;
         close: { meta: { marpitSlideElement: -1 } }
-      }, (0, _wrap_tokens2.default)('marpit_inline_svg', { tag: 'foreignObject', width: w, height: h }, tokens))];
+      }, (0, _wrap_tokens2.default)('marpit_inline_svg_content', { tag: 'foreignObject', width: w, height: h }, tokens))];
     }, []);
@@ -49,0 +49,0 @@ });

lib/markdown/parse_image.js

@@ -29,2 +29,8 @@ 'use strict';
         });
+
+        options.forEach(opt => {
+          // TODO: Implement cross-browser image zoom without affecting DOM tree
+          // (Pre-released Marp uses `zoom` but it has not supported in Firefox)
+          if (opt.match(/^(\d*\.)?\d+%$/)) token.meta.marpitImage.size = opt;
+        });
       }
@@ -31,0 +37,0 @@ });

lib/marpit.js

@@ -80,3 +80,5 @@ 'use strict';
    * @param {boolean} [opts.backgroundSyntax=true] Support markdown image syntax
-   *     with description including `bg`.
+   *     with the alternate text including `bg`. Normally it converts into spot
+   *     directives about background image. If `inlineSVG` is enabled, it
+   *     supports multiple image layouting.
    * @param {Element|Element[]}
@@ -128,6 +130,5 @@ *     [opts.container={@link module:element.marpitContainer}] Container
   applyMarkdownItPlugins(md = this.markdown) {
-    md.use(_comment2.default).use(_slide2.default).use(_parse2.default, this).use(_apply2.default).use(_slide_container2.default, this.slideContainers).use(_container2.default, this.containers).use(_parse_image2.default).use(_sweep2.default);
+    md.use(_comment2.default).use(_slide2.default).use(_parse2.default, this).use(_apply2.default).use(_slide_container2.default, this.slideContainers).use(_container2.default, this.containers).use(_parse_image2.default).use(_sweep2.default).use(_inline_svg2.default, this);
 
     if (this.options.backgroundSyntax) md.use(_background_image2.default);
-    if (this.options.inlineSVG) md.use(_inline_svg2.default, this);
   }
@@ -134,0 +135,0 @@

lib/theme/scaffold.js

@@ -29,2 +29,22 @@ 'use strict';
 }
+
+/* Advanced background support */
+section[data-marpit-advanced-background="background"] {
+  display: flex !important;
+  flex-direction: row !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+section[data-marpit-advanced-background="background"] > figure {
+  all: initial;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  flex: auto;
+}
+
+section[data-marpit-advanced-background="content"] {
+  background: transparent !important;
+}
 `.trim();
@@ -38,2 +58,3 @@
  * - Normalize `<h1>` heading style.
+ * - Support advanced background on inline SVG mode.
  *
@@ -40,0 +61,0 @@ * @alias module:theme/scaffold

package.json

 {
   "name": "@marp-team/marpit",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "The skinny framework for creating slide deck from Markdown",
@@ -44,3 +44,4 @@ "license": "MIT",
     "test": "cross-env NODE_ENV=test mocha",
-    "test:coverage": "cross-env NODE_ENV=test nyc mocha"
+    "test:coverage": "cross-env NODE_ENV=test nyc mocha",
+    "version": "bash version.sh"
   },
@@ -47,0 +48,0 @@ "devDependencies": {

README.md

@@ -43,11 +43,82 @@ <div align="center">
 * Support [Jekyll style front-matter](https://jekyllrb.com/docs/frontmatter/).
-* [Global directives](https://github.com/yhatt/marp/blob/master/example.md#global-directives) is no longer requires `$` prefix. (but it still supports because of compatibility and clarity)
-* [Page directives](https://github.com/yhatt/marp/blob/master/example.md#page-directives) is renamed to local directives.
-* Spot directives, that is known as scoped page directive to current slide, has prefix `_`.
+* _[Global directives](https://github.com/yhatt/marp/blob/master/example.md#global-directives)_ is no longer requires `$` prefix. (but it still supports because of compatibility and clarity)
+* [Page directives](https://github.com/yhatt/marp/blob/master/example.md#page-directives) is renamed to _local directives_.
+* _Spot directives_, that is known as scoped page directive to current slide, has prefix `_`.
 
+### Slide backgrounds
+
+We provide a background image syntax to specify slide's background through Markdown. Include `bg` to the alternate text.
+
+```markdown
+![bg](https://example.com/background.jpg)
+```
+
+You can disable by `backgroundSyntax: false` in Marpit constructor option.
+
+#### Resize images
+
+You can resize the image by space-separated options. The basic option value follows `background-size` style (but except length).
+
+```markdown
+`cover` will scale image to fill the slide (default):
+![bg cover](https://example.com/background.jpg)
+
+---
+
+`contain` will scale image to fit the slide:
+![bg contain](https://example.com/background.jpg)
+
+You can also use the `fit` keyword like Deckset:
+![bg fit](https://example.com/background.jpg)
+
+---
+
+`auto` will not scale image, and use the original size:
+![bg auto](https://example.com/background.jpg)
+
+---
+
+The percentage value will specify the scaling factor of image.
+![bg 150%](https://example.com/background.jpg)
+```
+
+#### Styling through directives
+
+If you want to use the gradient as background, you can set style directly through local or spot directives.
+
+This feature is available regardless of `backgroundSyntax` option in Marpit constructor.
+
+```markdown
+<!-- _backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)" -->
+```
+
+Marpit uses YAML for parsing directives, so you should wrap by quote when the value includes space.
+
+##### Directives
+
+| Spot directive        | Description                          | Default     |
+| --------------------- | ------------------------------------ | ----------- |
+| `_backgroundImage`    | Specify `background-image` style.    |             |
+| `_backgroundPosition` | Specify `background-position` style. | `center`    |
+| `_backgroundRepeat`   | Specify `background-repeat` style.   | `no-repeat` |
+| `_backgroundSize`     | Specify `background-size` style.     | `cover`     |
+
+The beginning underbar of directive means "_Apply only to current slide page_". (Spot directive)
+
+When you remove the underbar, the background would apply to current and _the following pages_ (Local directive).
+
+#### Advanced backgrounds with inline SVG mode
+
+The advanced backgrounds will work only with [`inlineSVG: true`](#inline-svg-slide-experimental). It supports multiple background images.
+
+```
+![bg](https://example.com/backgroundA.jpg)
+![bg](https://example.com/backgroundB.jpg)
+```
+
+These images will arrange in a row.
+
 ### ToDo
 
-* [x] Background image (must use _only_ `background-image` style on `<section>`)
-  * [x] Parse `![bg]` syntax
-  * [ ] Auto layouting like Deckset
+* [ ] Background filters in advanced backgrounds
 * [ ] Header and footer directive
@@ -137,2 +208,4 @@ * [ ] Slide page number
 
+In addition, [the advanced backgrounds](#advanced-backgrounds-with-inline-svg-mode) will support in the layer of this SVG. The injected elements to support advanced background will not affect the DOM structure of each slide.
+
 ## API
@@ -139,0 +212,0 @@

No alert changes

Improved metrics

Total package byte prevSize

65670

increased by12.82%

Lines of code

1405

increased by7.25%

Number of lines in readme file

230

increased by46.5%

No dependency changes