Browse Source

refactory 3d-rotation css file read way

master
felix xia 4 years ago
parent
commit
1dc3ca885e
  1. 5
      src/main/java/com/fr/plugin/easyslides/CssFileLoader.java
  2. 306
      src/main/java/com/fr/plugin/easyslides/slidestyles/Rotation3DStyle.java
  3. BIN
      超酷幻灯片/fr-plugin-widget-easyslides-1.0.zip

5
src/main/java/com/fr/plugin/easyslides/CssFileLoader.java

@ -5,6 +5,9 @@ import com.fr.stable.fun.impl.AbstractCssFileHandler;
public class CssFileLoader extends AbstractCssFileHandler {
@Override
public String[] pathsForFiles() {
return new String[]{"/com/fr/plugin/resources/web/impress-default.css"};
return new String[]{
"/com/fr/plugin/resources/web/impress-default.css",
"/com/fr/plugin/resources/web/3D-rotations.css"
};
}
}

306
src/main/java/com/fr/plugin/easyslides/slidestyles/Rotation3DStyle.java

@ -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();
}
}
}
}

BIN
超酷幻灯片/fr-plugin-widget-easyslides-1.0.zip

Binary file not shown.
Loading…
Cancel
Save