Embedded SVG Compatibility with Deck.js

[banksJeremy]

As we've discussed, some compatibility arise when using embedded SVGs with Deck.js. My thoughts:

1. Moving between sub-slides is broken because jQuery's addClass, removeClass, toggleClass and hasClass methods rely on the className property the HTML DOM.

   jQuery has this and other SVG DOM issues marked as WONTFIX.

   I've written an jQuery plugin (see it in my svg branch) to patch this behaviour. It overwrites the built-in methods, which is inelegant, but I copied from the jQuery source and made minimal changes so it should be safe.

2. The slide-vertical and slide-horizontal transition themes don't work on sub-slides because SVG elements don't support the required CSS. The fade transition seems to work fine.

   Marco Cecchetti is planning to implement both in-slide and between-slide transitions with JavaScript this summer, porting the LibreOffice behaviour (pending GSoC approval). We should probably wait for this instead of trying to patch Deck.js' less-featureful transitions; the current behaviour (and fade if we want it) is adequate for now.

3. The exported SVG specifies its own colours, so it doesn't inherit from the deck.js themes and looks messy.

   If a slide has customized styles, I'd prefer to preserve those rather than try to force it into a theme. However, it might be nice if basic monochromatic presentations could inherit from Deck.js themes. Low priority.

[banksJeremy]

To add some support for Deck.js themes, we could define a partial mapping between CSS selectors frequently used in themes and equivalent selectors for the SVG output. For each such mapping

• create a temporary element matching the selector
• use jQuery/Sizzle to find the corresponding SVG elements
• copy equivalent style properties from the temporary element to the SVG elements

Possible selector mappings:

• p to text
• h1 to .com\.sun\.star\.presentation\.TitleTextShape
• h2 to .com\.sun\.star\.presentation\.SubtitleShape
• li to g[font-family=StarSymbol embedded]:contains(●) + g text
• .deck-container to #Master_Slide or container div

Possible style mappings (maybe not direct):

• color to fill
• background to fill
• border to stroke
• font to font or to various font-*
• opacity to opacity

This would be in JavaScript. Making the existing themes work without JavaScript would require changes to both the CSS and the SVG, and wouldn't let the user use their own themes.

[dseif]

In reply to your first comment:

1. Awesome! I'll take a look into your svg branch see what you've done :)
2. Yea lets try and coordinate with marco as much as we can in regards to this. If he is working on a patch for this upstream from us we probably shouldn't worry about it too much.
3. I don't think this is an issue. Someone could always write their own deckjs theme if they wanted to match the exported svg slides. I like the monochromatic idea, but it's definitely more of a nice to have thing.

Second comment:

This idea seems sound to me. Have you given it a try yet? I think, like you said, making the existing themes work with JavaScript would be ideal and having the power to use their own themes is obviously a plus.

Definitely looking forward to a patch like this and from what I grasp, this is probably a priority at the moment?