PFE#640 - initial commit

[aripddev]

Keynote component with basic features without theming. I am unable to implement theming.

I think below code in pom.xml is merging all theme files into one. Since each theme is available as a separate stylesheet, it doesn't work. I can get theme name but I don't know how to load relevant css file.

<include>keynote/theme/*.css</include>

[aripddev]

I'm making progress. I have found it how to add a resource inside DocumentViewerRenderer.

[aripddev]

Custom theme example is working fine when custom theme stylesheet is put resources directory of the webapp.
However, I am unable to access resources directory of primefaces-extensions to fetch ready-themes inside keynote/themes. I have lack of knowledge :)

[aripddev]

There are two issues, I don't know how to solve them and need your help.

1. Nested pe:keynoteItem for vertical slides
2. Getting CSP error

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-MGI1ODZiOTgtNDgyZi00ZTI4LTlmZDYtYTNmMzhjMzhmZjc5'"

[jepsar]

Please update https://github.com/primefaces-extensions/primefaces-extensions/blob/master/core/src/main/resources/META-INF/NOTICE.txt

[jepsar]

There are two issues, I don't know how to solve them and need your help.

1. Nested pe:keynoteItem for vertical slides

What is your issue here?

2. Getting CSP error

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-MGI1ODZiOTgtNDgyZi00ZTI4LTlmZDYtYTNmMzhjMzhmZjc5'"

Where are you getting this? Somewhere in your code?

[melloware]

Somewhere in their code i wondering if they are doing eval a javascript string. In PF I had to change these to a custom function I wrote so PrimeFaces.csp.eval(xx); which uses Jquery and the PF CSP NONCE to execute the eval.

[aripddev]

There are two issues, I don't know how to solve them and need your help.

1. Nested pe:keynoteItem for vertical slides

What is your issue here?

For vertical slides, it is needed to generate sections like this;

<section><!-- Horizontal slide tag -->
  <section>Vertical Slide 1</section><!-- Vertical slide tag -->
  <section>Vertical Slide 2</section><!-- Vertical slide tag -->
</section>

with pe:keynoteItem I can only generate horizontal tag. Here is the screenshot.

2. Getting CSP error

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-MGI1ODZiOTgtNDgyZi00ZTI4LTlmZDYtYTNmMzhjMzhmZjc5'"

Where are you getting this? Somewhere in your code?

Not in PFE showcase since CSP is not activated, but in my app that CSP is enabled.

[jepsar]

with pe:keynoteItem I can only generate horizontal tag

You probably need to create a renderer for a pe:keynoteItem and in both pe:keynote and pe:keynoteItem render childeren.

[aripddev]

Somewhere in their code i wondering if they are doing eval a javascript string. In PF I had to change these to a custom function I wrote so PrimeFaces.csp.eval(xx); which uses Jquery and the PF CSP NONCE to execute the eval.

@melloware There are two js files which are reveal.js and markdown.js (a plugin). There is no eval inside them.

[melloware]

If you can get me the exact error and it should point to a line of code you can click on so it will help use figure out where exactly the eval call is. That would be great.

[aripddev]

It is in reveal.js

[melloware]

Yes that Function call is not allowed according to CSP. That is similar to eval see the official docs here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_eval_expressions

The 'unsafe-eval' source expression controls several script execution methods that create code from strings. If 'unsafe-eval' isn't specified with the script-src directive, the following methods are blocked and won't have any effect:

eval()
Function()
When passing a string literal like to methods like: window.setTimeout("alert("Hello World!");", 500);
setTimeout()
setInterval()
window.setImmediate
window.execScript() (IE < 11 only)

[melloware]

I think you will have to report it to the Reveal.js team on their github.

[melloware]

Looks like your real CSP issue is here: jaredpalmer/tsdx#954

And core issue: facebook/regenerator#378

[aripddev]

I think you will have to report it to the Reveal.js team on their github.

Reported hakimel/reveal.js#3091

[jepsar]

Great job! Thanks!

[jepsar]

@aripddev Is this ready for a final review?

[aripddev]

@jepsar Except for CSP, there is one issue which I couldn't find the solution. The remain issue is to change theme, not custom but ready one.

[aripddev]

@jepsar I am looking at the thematization of codemirror component. It seems that every themes have their own class names and all themes are loaded at once. In reveal.js, since each theme is available as a separate stylesheet, they all have the same class names. Loading all at once will not work. Am i right in my thinking?

I suggest to render the ready themes by changing the original style files and giving different class names for each, as in codemirror component. .reveal-white, .reveal-beige, ... so on. What do you think?

[jepsar]

@aripddev in InputPhone I send a resource path to the widget:

primefaces-extensions/core/src/main/java/org/primefaces/extensions/component/inputphone/InputPhoneRenderer.java

Lines 210 to 216 in 4cba61a

	if (inputPhone.isUtilsScriptRequired()) {
	wb.attr("utilsScript",
	context.getApplication()
	.getResourceHandler()
	.createResource("inputphone/utils.js", "primefaces-extensions")
	.getRequestPath());
	}

You could do that with CSS resource and inject it into the DOM in the widget.

[aripddev]

@jepsar Removed encodeCSS method and added below lines to encodeScript method.

160 if (!"none".equals(keynote.getTheme())) {
161     wb.attr("utilsScript",
162             context.getApplication()
163                     .getResourceHandler()
164                     .createResource("keynote/theme/" + keynote.getTheme() + ".css", "primefaces-extensions")
165                     .getRequestPath());
166 }

It throws

java.lang.NullPointerException
	at org.primefaces.extensions.component.keynote.KeynoteRenderer.encodeScript(KeynoteRenderer.java:165)

To see what happens I just changed it to inputphone/utils.js, it works fine.

pf.cw("ExtKeynote", "widget_j_id_x", {
    id: "j_id_x",
    width: 480,
    height: 350,
    theme: "night",
    utilsScript: "\/showcase\-ext\/javax.faces.resource\/inputphone\/utils.js.jsf?ln=primefaces\-extensions\x26v=11.0.0\-SNAPSHOT\x26e=11.0.0\-SNAPSHOT"
});

[jepsar]

@aripddev I'll have a closer look at it this evening. First guess is that the resources are not included in the JAR. Can you double check the POM please?

[aripddev]

Thanks @jepsar . BTW all themes provided by reveal.js are inside keynote directory.

[jepsar]

See jepsar@37f9675

[jepsar]

@melloware what do you think of this way of offering themes to be loaded?

IMO we should just offer / support the bundled themes. And if you want something custom, simply create custom styles in a custom style sheet.

[jepsar]

@melloware @aripddev What is the status here? Are we waiting for hakimel/reveal.js#3091?

[melloware]

I don't think we should wait for that CSP fix to merge this. If everything else is in good shape @aripddev ?

[aripddev]

@jepsar , @melloware It is ok for me. Once CSP issue fixes we can update it. Thanks.