Merge pull request #168 from marp-team/split-background-size

Add size argument for split background

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
 - Allow passing markdown-it instance as `markdown` constructor option ([#164](https://github.com/marp-team/marpit/pull/164))
+- Add size argument for split background ([#166](https://github.com/marp-team/marpit/issues/166), [#168](https://github.com/marp-team/marpit/pull/168))
 
 ### Fixed
 

docs/image-syntax.md

@@ -148,29 +148,66 @@ You may change alignment direction from horizontal to vertical, by using `vertic
 
 The `left` or `right` keyword with `bg` keyword make a space for the background to the specified side. It has a half of slide size, and the space of a slide content will shrink too.
 
+<div class="example">
+
 ```markdown
-![bg left](https://example.com/backgroundA.jpg)
+![bg left](https://picsum.photos/720?image=29)
 
 # Split backgrounds
 
 The space of a slide content will shrink to the right side.
+```
 
----
+<span class="image">
+
+[<img src="/assets/image-syntax/split-background.jpg" alt="Split backgrounds" />](/assets/image-syntax/split-background.jpg ':ignore')
+
+</span>
+</div>
+
+Multiple backgrounds will work well in the specified background side.
 
-<!-- Multiple backgrounds will work well in the specified background side. -->
+<div class="example">
 
-![bg right](https://example.com/backgroundB.jpg)
-![bg](https://example.com/backgroundC.jpg)
+```markdown
+![bg right](https://picsum.photos/720?image=3)
+![bg](https://picsum.photos/720?image=20)
 
 # Split + Multiple BGs
 
 The space of a slide content will shrink to the left side.
 ```
 
+<span class="image">
+
+[<img src="/assets/image-syntax/split-multiple-bg.jpg" alt="Split + Multiple BGs" />](/assets/image-syntax/split-multiple-bg.jpg ':ignore')
+
+</span>
+</div>
+
 This feature is similar to [Deckset's Split Slides](https://docs.decksetapp.com/English.lproj/Media/01-background-images.html#split-slides).
 
 ?> Marpit uses a last defined keyword in a slide when `left` and `right` keyword is mixed in the same slide by using multiple backgrounds.
 
+#### Split size
+
+Since v1.1.0, Marpit can specify split size for background by percentage like `left:33%`.
+
+<div class="example">
+
+```markdown
+![bg left:33%](https://picsum.photos/720?image=27)
+
+# Split backgrounds with specified size
+```
+
+<span class="image">
+
+[<img src="/assets/image-syntax/split-bg-with-size.jpg" alt="Split backgrounds with specified size" />](/assets/image-syntax/split-bg-with-size.jpg ':ignore')
+
+</span>
+</div>
+
 ## Shorthand for setting colors
 
 Through Markdown image syntax, Marpit allows the definition of [color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) instead of the image URL.

docsify/_layout.scss

@@ -115,6 +115,7 @@ $important-color: complement($brand-primary);
         width: 100%;
         max-width: 240px;
         margin: 0 auto;
+        box-shadow: 0 3px 6px rgba(#000, 0.15);
       }
     }
 

src/markdown/background_image/advanced.js

@@ -39,9 +39,19 @@ function advancedBackground(md) {
           const splitSide = t.meta.marpitBackground.split
           if (splitSide) {
             open.attrSet('data-marpit-advanced-background-split', splitSide)
-            t.attrSet('width', '50%')
 
-            if (splitSide === 'left') t.attrSet('x', '50%')
+            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 InlineStyle(open.attrGet('style'))
+            style.set('--marpit-advanced-background-split', splitBgSize)
+            open.attrSet('style', style.toString())
           }
 
           // Add the isolated layer for background image

src/markdown/background_image/apply.js

@@ -38,6 +38,7 @@ function backgroundImageApply(md) {
                   images: current.images,
                   open: current.open,
                   split: current.split,
+                  splitSize: current.splitSize,
                   width: current.svgContent.attrGet('width'),
                 },
               }
@@ -66,6 +67,7 @@ function backgroundImageApply(md) {
                 backgroundDirection,
                 backgroundSize,
                 backgroundSplit,
+                backgroundSplitSize,
                 color,
                 filter,
                 height,
@@ -105,6 +107,7 @@ function backgroundImageApply(md) {
 
               if (backgroundDirection) current.direction = backgroundDirection
               if (backgroundSplit) current.split = backgroundSplit
+              if (backgroundSplitSize) current.splitSize = backgroundSplitSize
             }
           }
       }

src/markdown/background_image/parse.js

@@ -8,6 +8,8 @@ const bgSizeKeywords = {
   fit: 'contain',
 }
 
+const splitSizeMatcher = /^(left|right)(?::((?:\d*\.)?\d+%))?$/
+
 /**
  * Marpit background image parse plugin.
  *
@@ -38,8 +40,13 @@ function backgroundImageParse(md) {
                 marpitImage.backgroundSize = bgSizeKeywords[opt]
 
               // Split background keyword
-              if (opt === 'left' || opt === 'right')
-                marpitImage.backgroundSplit = opt
+              const matched = opt.match(splitSizeMatcher)
+              if (matched) {
+                const [, splitSide, splitSize] = matched
+
+                marpitImage.backgroundSplit = splitSide
+                marpitImage.backgroundSplitSize = splitSize
+              }
 
               // Background aligned direction
               if (opt === 'vertical' || opt === 'horizontal')

src/postcss/advanced_background.js

@@ -38,11 +38,11 @@ section[data-marpit-advanced-background="background"] > div[data-marpit-advanced
 }
 
 section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split] > div[data-marpit-advanced-background-container] {
-  width: 50%;
+  width: var(--marpit-advanced-background-split, 50%);
 }
 
 section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split="right"] > div[data-marpit-advanced-background-container] {
-  margin-left: 50%;
+  margin-left: calc(100% - var(--marpit-advanced-background-split, 50%));
 }
 
 section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] > figure {

test/markdown/background_image.js

@@ -219,19 +219,45 @@ describe('Marpit background image plugin', () => {
 
     splitBackgroundKeywords.forEach(keyword => {
       context(`with the ${keyword} keyword for split background`, () => {
-        const $ = $load(mdSVG().render(`![bg ${keyword}](image)`))
-        const section = $(
+        const $ = attr =>
+          $load(
+            mdSVG().render(
+              `![bg ${[keyword, attr].filter(v => v).join(':')}](image)`
+            )
+          )
+
+        const section = $()(
           'svg > foreignObject > section[data-marpit-advanced-background="content"]'
         )
         const foreignObject = section.parent()
 
         it('assigns the width attribute of foreignObject for content as 50%', () =>
           expect(foreignObject.attr('width')).toBe('50%'))
 
+        it('assigns CSS variable to style attribute for split background', () =>
+          expect(section.attr('style')).toContain(
+            '--marpit-advanced-background-split:50%'
+          ))
+
         it('assigns data attribute of the keyword for split background', () =>
           expect(section.attr('data-marpit-advanced-background-split')).toBe(
             keyword
           ))
+
+        context('when passed split size for background', () => {
+          const ssSection = $('33%')(
+            'svg > foreignObject > section[data-marpit-advanced-background="content"]'
+          )
+          const ssforeignObject = ssSection.parent()
+
+          it('assigns the width attribute of foreignObject for content as remaining size', () =>
+            expect(ssforeignObject.attr('width')).toBe('67%'))
+
+          it('assigns CSS variable to style attribute for split background', () =>
+            expect(ssSection.attr('style')).toContain(
+              '--marpit-advanced-background-split:33%'
+            ))
+        })
       })
     })