|
|
|
@ -1,5 +1,11 @@
|
|
|
|
|
package com.fr.plugin.easyslides.slidestyles; |
|
|
|
|
|
|
|
|
|
import com.fr.log.FineLoggerFactory; |
|
|
|
|
|
|
|
|
|
import java.io.BufferedReader; |
|
|
|
|
import java.io.IOException; |
|
|
|
|
import java.io.InputStream; |
|
|
|
|
import java.io.InputStreamReader; |
|
|
|
|
import java.util.List; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
@ -36,286 +42,30 @@ public class Rotation3DStyle extends SlideStyle {
|
|
|
|
|
r.append("</div>\n"); |
|
|
|
|
} |
|
|
|
|
r.append("<style type=\"text/css\">\n"); |
|
|
|
|
r.append(css); |
|
|
|
|
r.append(getCss()); |
|
|
|
|
r.append("</style>"); |
|
|
|
|
return r.toString(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
private static final String css = |
|
|
|
|
"/* Fallback message */\n" + |
|
|
|
|
"\n" + |
|
|
|
|
".fallback-message {\n" + |
|
|
|
|
" font-family: sans-serif;\n" + |
|
|
|
|
" line-height: 1.3;\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" width: 780px;\n" + |
|
|
|
|
" padding: 10px 10px 0;\n" + |
|
|
|
|
" margin: 20px auto;\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" border: 1px solid #E4C652;\n" + |
|
|
|
|
" border-radius: 10px;\n" + |
|
|
|
|
" background: #EEDC94;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
".fallback-message p {\n" + |
|
|
|
|
" margin-bottom: 10px;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
".impress-supported .fallback-message {\n" + |
|
|
|
|
" display: none;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Body & steps */\n" + |
|
|
|
|
"body {\n" + |
|
|
|
|
" font-family: 'PT Sans', sans-serif;\n" + |
|
|
|
|
" min-height: 740px;\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" background: #00000f;\n" + |
|
|
|
|
" color: rgb(102, 102, 102);\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
".step {\n" + |
|
|
|
|
" position: relative;\n" + |
|
|
|
|
" width: 700px;\n" + |
|
|
|
|
" height: 700px;\n" + |
|
|
|
|
" padding: 40px 60px;\n" + |
|
|
|
|
" margin: 20px auto;\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" box-sizing: border-box;\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" line-height: 1.5;\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" background-color: white;\n" + |
|
|
|
|
" border-radius: 10px;\n" + |
|
|
|
|
" box-shadow: 0 2px 6px rgba(0, 0, 0, .1);\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" text-shadow: 0 2px 2px rgba(0, 0, 0, .1);\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" font-family: 'Open Sans', Arial, sans-serif;\n" + |
|
|
|
|
" font-size: 40pt;\n" + |
|
|
|
|
" letter-spacing: -1px;\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
".notes {\n" + |
|
|
|
|
" display: none;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Overview step has no background or border */\n" + |
|
|
|
|
"\n" + |
|
|
|
|
".overview {\n" + |
|
|
|
|
" background-color: transparent;\n" + |
|
|
|
|
" border: none;\n" + |
|
|
|
|
" box-shadow: none;\n" + |
|
|
|
|
" pointer-events: none;\n" + |
|
|
|
|
" display: none;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
".overview.active {\n" + |
|
|
|
|
" display: block;\n" + |
|
|
|
|
" pointer-events: auto;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/*\n" + |
|
|
|
|
" Make inactive steps a little bit transparent.\n" + |
|
|
|
|
"*/\n" + |
|
|
|
|
".impress-enabled .step {\n" + |
|
|
|
|
" margin: 0;\n" + |
|
|
|
|
" opacity: 0.1;\n" + |
|
|
|
|
" transition: opacity 1s;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
".impress-enabled .step.active { opacity: 1 }\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Content */\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"h1, \n" + |
|
|
|
|
"h2, \n" + |
|
|
|
|
"h3 {\n" + |
|
|
|
|
" margin-bottom: 0.5em;\n" + |
|
|
|
|
" margin-top: 0.5em;\n" + |
|
|
|
|
" text-align: center;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"p {\n" + |
|
|
|
|
" margin: 0.7em;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"li {\n" + |
|
|
|
|
" margin: 0.2em; \n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Highlight.js used for coloring pre > code blocks. */\n" + |
|
|
|
|
"pre > code {\n" + |
|
|
|
|
" font-size: 14px;\n" + |
|
|
|
|
" text-shadow: 0 0 0 rgba(0, 0, 0, 0);\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Inline code, no Highlight.js */\n" + |
|
|
|
|
"code {\n" + |
|
|
|
|
" font-family: \"Cutive mono\",\"Courier New\", monospace;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"a {\n" + |
|
|
|
|
" color: inherit;\n" + |
|
|
|
|
" text-decoration: none;\n" + |
|
|
|
|
" padding: 0 0.1em;\n" + |
|
|
|
|
" background: rgba(200,200,200,0.2);\n" + |
|
|
|
|
" text-shadow: -1px 1px 2px rgba(100,100,100,0.9);\n" + |
|
|
|
|
" border-radius: 0.2em;\n" + |
|
|
|
|
" border-bottom: 1px solid rgba(100,100,100,0.2);\n" + |
|
|
|
|
" border-left: 1px solid rgba(100,100,100,0.2);\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" transition: 0.5s;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"a:hover,\n" + |
|
|
|
|
"a:focus {\n" + |
|
|
|
|
" background: rgba(200,200,200,1);\n" + |
|
|
|
|
" text-shadow: -1px 1px 2px rgba(100,100,100,0.5);\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"blockquote {\n" + |
|
|
|
|
" font-family: 'PT Serif';\n" + |
|
|
|
|
" font-style: italic;\n" + |
|
|
|
|
" font-weight: 400; \n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"em {\n" + |
|
|
|
|
" text-shadow: 0 2px 2px rgba(0, 0, 0, .3); \n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"strong {\n" + |
|
|
|
|
" text-shadow: -1px 1px 2px rgba(100,100,100,0.5);\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"q {\n" + |
|
|
|
|
" font-family: 'PT Serif';\n" + |
|
|
|
|
" font-style: italic;\n" + |
|
|
|
|
" font-weight: 400; \n" + |
|
|
|
|
" text-shadow: 0 2px 2px rgba(0, 0, 0, .3);\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"strike {\n" + |
|
|
|
|
" opacity: 0.7;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"small {\n" + |
|
|
|
|
" font-size: 0.4em;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/*\n" + |
|
|
|
|
" This version of impress.js supports plugins, and in particular, a UI toolbar\n" + |
|
|
|
|
" plugin that allows easy navigation between steps and autoplay.\n" + |
|
|
|
|
"*/\n" + |
|
|
|
|
".impress-enabled div#impress-toolbar {\n" + |
|
|
|
|
" position: fixed;\n" + |
|
|
|
|
" right: 1px;\n" + |
|
|
|
|
" bottom: 1px;\n" + |
|
|
|
|
" opacity: 0.6;\n" + |
|
|
|
|
" z-index: 10;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
".impress-enabled div#impress-toolbar > span {\n" + |
|
|
|
|
" margin-right: 10px;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/*\n" + |
|
|
|
|
" With help from the mouse-timeout plugin, we can hide the toolbar and\n" + |
|
|
|
|
" have it show only when you move/click/touch the mouse.\n" + |
|
|
|
|
"*/\n" + |
|
|
|
|
"body.impress-mouse-timeout div#impress-toolbar {\n" + |
|
|
|
|
" display: none;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/*\n" + |
|
|
|
|
" In fact, we can hide the mouse cursor itself too, when mouse isn't used.\n" + |
|
|
|
|
"*/\n" + |
|
|
|
|
"body.impress-mouse-timeout {\n" + |
|
|
|
|
" cursor: none;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Progress bar */\n" + |
|
|
|
|
".impress-progressbar {\n" + |
|
|
|
|
" position: absolute;\n" + |
|
|
|
|
" right: 118px;\n" + |
|
|
|
|
" bottom: 1px;\n" + |
|
|
|
|
" left: 118px;\n" + |
|
|
|
|
" border-radius: 7px;\n" + |
|
|
|
|
" border: 2px solid rgba(100, 100, 100, 0.2);\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
".impress-progressbar DIV {\n" + |
|
|
|
|
" width: 0;\n" + |
|
|
|
|
" height: 2px;\n" + |
|
|
|
|
" border-radius: 5px;\n" + |
|
|
|
|
" background: rgba(75, 75, 75, 0.4);\n" + |
|
|
|
|
" transition: width 1s linear;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
".impress-progress {\n" + |
|
|
|
|
" position: absolute;\n" + |
|
|
|
|
" left: 59px;\n" + |
|
|
|
|
" bottom: 1px;\n" + |
|
|
|
|
" text-align: left;\n" + |
|
|
|
|
" font-size: 10pt;\n" + |
|
|
|
|
" opacity: 0.6;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Help popup plugin */\n" + |
|
|
|
|
".impress-enabled #impress-help {\n" + |
|
|
|
|
" background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);\n" + |
|
|
|
|
" color: #EEEEEE;\n" + |
|
|
|
|
" font-size: 80%;\n" + |
|
|
|
|
" position: fixed;\n" + |
|
|
|
|
" left: 2em;\n" + |
|
|
|
|
" bottom: 2em;\n" + |
|
|
|
|
" width: 24em;\n" + |
|
|
|
|
" border-radius: 1em;\n" + |
|
|
|
|
" padding: 1em;\n" + |
|
|
|
|
" text-align: center;\n" + |
|
|
|
|
" z-index: 100;\n" + |
|
|
|
|
" font-family: Verdana, Arial, Sans;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
".impress-enabled #impress-help td {\n" + |
|
|
|
|
" padding-left: 1em;\n" + |
|
|
|
|
" padding-right: 1em;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/* Styles specific to each step */\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"#overview2 {\n" + |
|
|
|
|
" font-size: 20pt;\n" + |
|
|
|
|
" padding-left: 200px;\n" + |
|
|
|
|
" text-align: right;\n" + |
|
|
|
|
"}\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"\n" + |
|
|
|
|
"/*\n" + |
|
|
|
|
" And as the last thing there is a workaround for quite strange bug.\n" + |
|
|
|
|
" It happens a lot in Chrome. I don't remember if I've seen it in Firefox.\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" Sometimes the element positioned in 3D (especially when it's moved back\n" + |
|
|
|
|
" along Z axis) is not clickable, because it falls 'behind' the <body>\n" + |
|
|
|
|
" element.\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" To prevent this, I decided to make <body> non clickable by setting\n" + |
|
|
|
|
" pointer-events property to `none` value.\n" + |
|
|
|
|
" Value if this property is inherited, so to make everything else clickable\n" + |
|
|
|
|
" I bring it back on the #impress element.\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" If you want to know more about `pointer-events` here are some docs:\n" + |
|
|
|
|
" https://developer.mozilla.org/en/CSS/pointer-events\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" There is one very important thing to notice about this workaround - it makes\n" + |
|
|
|
|
" everything 'unclickable' except what's in #impress element.\n" + |
|
|
|
|
"\n" + |
|
|
|
|
" So use it wisely ... or don't use at all.\n" + |
|
|
|
|
"*/\n" + |
|
|
|
|
".impress-enabled { pointer-events: none }\n" + |
|
|
|
|
".impress-enabled #impress { pointer-events: auto }\n" + |
|
|
|
|
".impress-enabled #impress-toolbar { pointer-events: auto }\n" + |
|
|
|
|
".impress-enabled #impress-console-button { pointer-events: auto }\n"; |
|
|
|
|
private String getCss() { |
|
|
|
|
StringBuilder sb = new StringBuilder(); |
|
|
|
|
InputStream is = Rotation3DStyle.class.getResourceAsStream("/com/fr/plugin/resources/web/3D-rotations.css"); |
|
|
|
|
try { |
|
|
|
|
BufferedReader bf = new BufferedReader(new InputStreamReader(is)); |
|
|
|
|
String s = ""; |
|
|
|
|
while ((s = bf.readLine()) != null) { |
|
|
|
|
sb.append(s); |
|
|
|
|
} |
|
|
|
|
} catch (Exception e) { |
|
|
|
|
FineLoggerFactory.getLogger().error(e.getMessage()); |
|
|
|
|
} finally { |
|
|
|
|
try { |
|
|
|
|
is.close(); |
|
|
|
|
} catch (IOException e) { |
|
|
|
|
FineLoggerFactory.getLogger().error(e.getMessage()); |
|
|
|
|
} finally { |
|
|
|
|
return sb.toString(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|