Browse Source

add 3d rotation style

master
felix xia 5 years ago
parent
commit
b280f0ca78
  1. 4
      build.xml
  2. 0
      document/README.en.md
  3. 0
      document/README.md
  4. BIN
      document/easyslides.png
  5. BIN
      document/pane.png
  6. 25
      document/specific.md
  7. BIN
      document/toolbar.png
  8. 17
      document/使用手册
  9. 4
      plugin.xml
  10. 16
      specific.md
  11. 32
      src/main/java/com/fr/plugin/easyslides/EasySlidesWidget.java
  12. BIN
      src/main/java/com/fr/plugin/easyslides/images/display.png
  13. BIN
      src/main/java/com/fr/plugin/easyslides/images/icon.png
  14. 3
      src/main/java/com/fr/plugin/easyslides/local/easyslides.properties
  15. 5
      src/main/java/com/fr/plugin/easyslides/local/easyslides_en_US.properties
  16. 5
      src/main/java/com/fr/plugin/easyslides/local/easyslides_zh_CN.properties
  17. 7
      src/main/java/com/fr/plugin/easyslides/slidestyles/FarAwayStyle.java
  18. 321
      src/main/java/com/fr/plugin/easyslides/slidestyles/Rotation3DStyle.java
  19. 2
      src/main/java/com/fr/plugin/easyslides/slidestyles/StyleFactory.java
  20. 8
      src/main/java/com/fr/plugin/easyslides/ui/EasySlidesWidgetUI.java
  21. 3
      src/main/java/com/fr/plugin/easyslides/ui/SlideStyleEditor.java
  22. 276
      src/main/java/com/fr/plugin/easyslides/web/3D-rotations.css
  23. 355
      src/main/java/com/fr/plugin/easyslides/web/impress-default.css
  24. 5
      src/main/java/com/fr/plugin/easyslides/web/widget.js
  25. BIN
      超酷幻灯片/fr-plugin-widget-easyslides-1.0.zip

4
build.xml

@ -14,7 +14,7 @@
<!-- 插件版本--> <!-- 插件版本-->
<property name="plugin-version" value="${current-version}"/> <property name="plugin-version" value="${current-version}"/>
<!-- 插件名字--> <!-- 插件名字-->
<property name="plugin-name" value="widget-flipconvert"/> <property name="plugin-name" value="widget-easyslides"/>
<property name="plugin-jar" value="fr-plugin-${plugin-name}-${plugin-version}.jar"/> <property name="plugin-jar" value="fr-plugin-${plugin-name}-${plugin-version}.jar"/>
<target name="prepare"> <target name="prepare">
@ -116,5 +116,7 @@
</zip> </zip>
<xmlproperty file="${basedir}/plugin.xml"/> <xmlproperty file="${basedir}/plugin.xml"/>
<move file="${plugin-folder}.zip" todir="${destLoc}/${plugin.name}"/> <move file="${plugin-folder}.zip" todir="${destLoc}/${plugin.name}"/>
<delete dir="${plugin-folder}"/>
<delete file="${basedir}/${plugin-jar}"/>
</target> </target>
</project> </project>

0
README.en.md → document/README.en.md

0
README.md → document/README.md

BIN
document/easyslides.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
document/pane.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

25
document/specific.md

@ -0,0 +1,25 @@
##UI组成
- 数据源:一列,每行为一页slide的文字内容,其中可以用h5标签
- 幻灯片样式选择列表
- 背景颜色
- 文字背景色、文字颜色
- 可选项:1、自动/手动播放;2、自动播放间隔时间
##幻灯片样式
- 左右
- 上下
- 前后
- 3D rotation
##比例
- slide width:900->1536 padding:40
- slide height:700->758 padding:60
- slide fontsize:30->(1536*758)
- slide line-height:36->(1536*758)
#git码云
- git init
- git remote add origin https://gitee.com/你的码云用户名/XXXX //添加远程仓库
- git pull origin master 命令,将码云上的仓库pull到本地文件夹
- git push origin master ,将本地仓库推送到远程仓库

BIN
document/toolbar.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

17
document/使用手册

@ -0,0 +1,17 @@
EasySlides插件使用手册
EasySlides插件用于帆软设计平台决策报表,方便的生成及显示ppt。
一、数据源
使用帆软设计平台的数据集做为插件的数据源。
1、数据源中需要提供一列字符串类型的文本内容。
2、每一行文本,对应于ppt的每一页。
3、每一行文本的格式,可以使用html标签来设置。
二、参数设置
1、幻灯片样式选择列表:选择ppt的显示方式。(将来会进一步增加样式,或者接受按需定制)
2、背景颜色:ppt背景色。
3、文字背景色,文字颜色。
4、自动/手动播放。自动播放可以设置播放间隔时间(秒)。手动播放,使用键盘方向键进行。(可能需要先在网页中点击一下控件,以获取焦点)
5、工具条、进度条、进度:显示在ppt底部,用于查看播放进度。
备注:
目前不支持图片显示,计划在下一步实现。

4
plugin.xml

@ -5,11 +5,11 @@
<active>yes</active> <active>yes</active>
<version>1.0</version> <version>1.0</version>
<env-version>10.0</env-version> <env-version>10.0</env-version>
<jartime>2019-11-1</jartime> <jartime>2019-12-1</jartime>
<vendor>Felix</vendor> <vendor>Felix</vendor>
<description><![CDATA[在表单中实现幻灯片效果插件。]]></description> <description><![CDATA[在表单中实现幻灯片效果插件。]]></description>
<change-notes><![CDATA[ <change-notes><![CDATA[
<p>[2019-11-21]Felix:适配新的API</p> <p>[2019-12-241]Felix:适配新的API</p>
]]></change-notes> ]]></change-notes>
<extra-core> <extra-core>
<LocaleFinder class="com.fr.plugin.easyslides.LocaleFinder"/> <LocaleFinder class="com.fr.plugin.easyslides.LocaleFinder"/>

16
specific.md

@ -1,16 +0,0 @@
##UI组成
- 数据源:一列,每行为一页slide的文字内容,其中可以用h5标签
- 幻灯片样式选择列表
- 背景颜色
- 可选项:1、自动/手动播放;2、自动播放间隔时间
##幻灯片样式
- 左入,右入
- 上入,下入
- 前入,后入
##比例
- slide width:900->1536 padding:40
- slide height:700->758 padding:60
- slide fontsize:30->(1536*758)
- slide line-height:36->(1536*758)

32
src/main/java/com/fr/plugin/easyslides/EasySlidesWidget.java

@ -27,6 +27,8 @@ import static com.fr.plugin.easyslides.Util.colorValueToHexString;
public class EasySlidesWidget extends DirectWriteEditor implements DataControl { public class EasySlidesWidget extends DirectWriteEditor implements DataControl {
public static final String BACKGROUND_COLOR = "backgroundColor"; public static final String BACKGROUND_COLOR = "backgroundColor";
public static final String SLIDE_BACKGROUND_COLOR = "slideBackgroundColor";
public static final String SLIDE_FONT_COLOR = "slideFontColor";
public static final String AUTO_PLAY = "autoPlay"; public static final String AUTO_PLAY = "autoPlay";
public static final String AUTO_PLAY_INTERVAL_TIME = "autoPlayIntervalTime"; public static final String AUTO_PLAY_INTERVAL_TIME = "autoPlayIntervalTime";
public static final String SLIDE_STYLE = "slideStyle"; public static final String SLIDE_STYLE = "slideStyle";
@ -36,6 +38,8 @@ public class EasySlidesWidget extends DirectWriteEditor implements DataControl {
private ValueInitializer widgetValue; private ValueInitializer widgetValue;
private Object backgroundColor; private Object backgroundColor;
private Object slideBackgroundColor;
private Object slideFontColor;
private boolean autoPlay; private boolean autoPlay;
private int autoPlayIntervalTime; private int autoPlayIntervalTime;
private String slideStyle; private String slideStyle;
@ -48,6 +52,8 @@ public class EasySlidesWidget extends DirectWriteEditor implements DataControl {
//autoPlay = true; //autoPlay = true;
setAutoPlayIntervalTime(5); setAutoPlayIntervalTime(5);
backgroundColor = new Color(215, 215, 215); backgroundColor = new Color(215, 215, 215);
slideBackgroundColor = new Color(255, 255, 255);
slideFontColor = new Color(102, 102, 102);
slideStyle = SlideStyleEditor.DEFAULT_STYLE; slideStyle = SlideStyleEditor.DEFAULT_STYLE;
} }
@ -59,6 +65,22 @@ public class EasySlidesWidget extends DirectWriteEditor implements DataControl {
this.backgroundColor = backgroundColor; this.backgroundColor = backgroundColor;
} }
public Object getSlideBackgroundColor() {
return slideBackgroundColor;
}
public void setSlideBackgroundColor(Object slideBackgroundColor) {
this.slideBackgroundColor = slideBackgroundColor;
}
public Object getSlideFontColor() {
return slideFontColor;
}
public void setSlideFontColor(Object slideFontColor) {
this.slideFontColor = slideFontColor;
}
public boolean isAutoPlay() { public boolean isAutoPlay() {
return autoPlay; return autoPlay;
} }
@ -189,6 +211,8 @@ public class EasySlidesWidget extends DirectWriteEditor implements DataControl {
jsonConfig.put("value", html); jsonConfig.put("value", html);
} }
jsonConfig.put(BACKGROUND_COLOR, colorValueToHexString(getBackgroundColor())); jsonConfig.put(BACKGROUND_COLOR, colorValueToHexString(getBackgroundColor()));
jsonConfig.put(SLIDE_BACKGROUND_COLOR, colorValueToHexString(getSlideBackgroundColor()));
jsonConfig.put(SLIDE_FONT_COLOR, colorValueToHexString(getSlideFontColor()));
jsonConfig.put(TOOLBAR, isToolBar()); jsonConfig.put(TOOLBAR, isToolBar());
jsonConfig.put(PROGRESSBAR, isProgressBar()); jsonConfig.put(PROGRESSBAR, isProgressBar());
jsonConfig.put(PROGRESS, isProgress()); jsonConfig.put(PROGRESS, isProgress());
@ -220,6 +244,12 @@ public class EasySlidesWidget extends DirectWriteEditor implements DataControl {
if ((color = reader.getAttrAsInt(BACKGROUND_COLOR, -1)) != -1) { if ((color = reader.getAttrAsInt(BACKGROUND_COLOR, -1)) != -1) {
setBackgroundColor(new Color(color)); setBackgroundColor(new Color(color));
} }
if ((color = reader.getAttrAsInt(SLIDE_BACKGROUND_COLOR, -1)) != -1) {
setSlideBackgroundColor(new Color(color));
}
if ((color = reader.getAttrAsInt(SLIDE_FONT_COLOR, -1)) != -1) {
setSlideFontColor(new Color(color));
}
setAutoPlayIntervalTime(reader.getAttrAsInt(AUTO_PLAY_INTERVAL_TIME, 0)); setAutoPlayIntervalTime(reader.getAttrAsInt(AUTO_PLAY_INTERVAL_TIME, 0));
setToolBar(reader.getAttrAsBoolean(TOOLBAR, false)); setToolBar(reader.getAttrAsBoolean(TOOLBAR, false));
setProgressBar(reader.getAttrAsBoolean(PROGRESSBAR, false)); setProgressBar(reader.getAttrAsBoolean(PROGRESSBAR, false));
@ -237,6 +267,8 @@ public class EasySlidesWidget extends DirectWriteEditor implements DataControl {
writer.startTAG("EasySlidesAttr"); writer.startTAG("EasySlidesAttr");
writer.attr(SLIDE_STYLE, getSlideStyle()); writer.attr(SLIDE_STYLE, getSlideStyle());
writer.attr(BACKGROUND_COLOR, ((Color) getBackgroundColor()).getRGB()); writer.attr(BACKGROUND_COLOR, ((Color) getBackgroundColor()).getRGB());
writer.attr(SLIDE_BACKGROUND_COLOR, ((Color) getSlideBackgroundColor()).getRGB());
writer.attr(SLIDE_FONT_COLOR, ((Color) getSlideFontColor()).getRGB());
writer.attr(AUTO_PLAY_INTERVAL_TIME, getAutoPlayIntervalTime()); writer.attr(AUTO_PLAY_INTERVAL_TIME, getAutoPlayIntervalTime());
writer.attr(TOOLBAR, isToolBar()); writer.attr(TOOLBAR, isToolBar());
writer.attr(PROGRESSBAR, isProgressBar()); writer.attr(PROGRESSBAR, isProgressBar());

BIN
src/main/java/com/fr/plugin/easyslides/images/display.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/main/java/com/fr/plugin/easyslides/images/icon.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 689 B

After

Width:  |  Height:  |  Size: 700 B

3
src/main/java/com/fr/plugin/easyslides/local/easyslides.properties

@ -2,6 +2,8 @@ Plugin-EasySlides_Widget=EasySlides
Plugin-EasySlides_Advanced=Advanced Plugin-EasySlides_Advanced=Advanced
Plugin-EasySlides_DataSource=DataSource Plugin-EasySlides_DataSource=DataSource
Plugin-EasySlides_ColorBackground=BackgroundColor Plugin-EasySlides_ColorBackground=BackgroundColor
Plugin-EasySlides_SlideColorBackground=SlideBackgroundColor
Plugin-EasySlides_SlideFontColor=FontColor
Plugin-EasySlides_AutoPlay=AutoPlay Plugin-EasySlides_AutoPlay=AutoPlay
Plugin-EasySlides_AutoPlayTime=APInterTime Plugin-EasySlides_AutoPlayTime=APInterTime
Plugin-EasySlides_SlideStyle=SlideStyle Plugin-EasySlides_SlideStyle=SlideStyle
@ -11,3 +13,4 @@ Plugin-EasySlides_Progress=Progress
Plugin-EasySlides_Style1=horizontal slide Plugin-EasySlides_Style1=horizontal slide
Plugin-EasySlides_Style2=vertical slide Plugin-EasySlides_Style2=vertical slide
Plugin-EasySlides_Style3=far away slide Plugin-EasySlides_Style3=far away slide
Plugin-EasySlides_Style4=rotation 3d slide

5
src/main/java/com/fr/plugin/easyslides/local/easyslides_en_US.properties

@ -2,6 +2,8 @@ Plugin-EasySlides_Widget=EasySlides
Plugin-EasySlides_Advanced=Advanced Plugin-EasySlides_Advanced=Advanced
Plugin-EasySlides_DataSource=DataSource Plugin-EasySlides_DataSource=DataSource
Plugin-EasySlides_ColorBackground=BackgroundColor Plugin-EasySlides_ColorBackground=BackgroundColor
Plugin-EasySlides_SlideColorBackground=SlideBackgroundColor
Plugin-EasySlides_SlideFontColor=FontColor
Plugin-EasySlides_AutoPlay=AutoPlay Plugin-EasySlides_AutoPlay=AutoPlay
Plugin-EasySlides_AutoPlayTime=APInterTime Plugin-EasySlides_AutoPlayTime=APInterTime
Plugin-EasySlides_SlideStyle=SlideStyle Plugin-EasySlides_SlideStyle=SlideStyle
@ -10,4 +12,5 @@ Plugin-EasySlides_ProgressBar=ProgressBar
Plugin-EasySlides_Progress=Progress Plugin-EasySlides_Progress=Progress
Plugin-EasySlides_Style1=horizontal slide Plugin-EasySlides_Style1=horizontal slide
Plugin-EasySlides_Style2=vertical slide Plugin-EasySlides_Style2=vertical slide
Plugin-EasySlides_Style3=far away slide Plugin-EasySlides_Style3=far away slide
Plugin-EasySlides_Style4=rotation 3d slide

5
src/main/java/com/fr/plugin/easyslides/local/easyslides_zh_CN.properties

@ -2,6 +2,8 @@ Plugin-EasySlides_Widget=\u8D85\u9177\u5E7B\u706F\u7247
Plugin-EasySlides_Advanced=\u9AD8\u7EA7 Plugin-EasySlides_Advanced=\u9AD8\u7EA7
Plugin-EasySlides_DataSource=\u6570\u636E\u6E90 Plugin-EasySlides_DataSource=\u6570\u636E\u6E90
Plugin-EasySlides_ColorBackground=\u80CC\u666F\u8272 Plugin-EasySlides_ColorBackground=\u80CC\u666F\u8272
Plugin-EasySlides_SlideColorBackground=\u5E7B\u706F\u7247\u80CC\u666F\u8272
Plugin-EasySlides_SlideFontColor=\u5E7B\u706F\u7247\u6587\u5B57\u989C\u8272
Plugin-EasySlides_AutoPlay=\u81EA\u52A8\u64AD\u653E Plugin-EasySlides_AutoPlay=\u81EA\u52A8\u64AD\u653E
Plugin-EasySlides_AutoPlayTime=\u64AD\u653E\u95F4\u9694\u65F6\u95F4 Plugin-EasySlides_AutoPlayTime=\u64AD\u653E\u95F4\u9694\u65F6\u95F4
Plugin-EasySlides_SlideStyle=\u5E7B\u706F\u7247\u6837\u5F0F Plugin-EasySlides_SlideStyle=\u5E7B\u706F\u7247\u6837\u5F0F
@ -10,4 +12,5 @@ Plugin-EasySlides_ProgressBar=\u8FDB\u5EA6\u6761
Plugin-EasySlides_Progress=\u8FDB\u5EA6 Plugin-EasySlides_Progress=\u8FDB\u5EA6
Plugin-EasySlides_Style1=\u6C34\u5E73\u79FB\u52A8 Plugin-EasySlides_Style1=\u6C34\u5E73\u79FB\u52A8
Plugin-EasySlides_Style2=\u4E0A\u4E0B\u79FB\u52A8 Plugin-EasySlides_Style2=\u4E0A\u4E0B\u79FB\u52A8
Plugin-EasySlides_Style3=\u8FDC\u8FD1\u79FB\u52A8 Plugin-EasySlides_Style3=\u8FDC\u8FD1\u79FB\u52A8
Plugin-EasySlides_Style4=3D\u65CB\u8F6C

7
src/main/java/com/fr/plugin/easyslides/slidestyles/FarAwayStyle.java

@ -9,11 +9,12 @@ public class FarAwayStyle extends SlideStyle {
@Override @Override
protected String buildContents(List<String> contents) { protected String buildContents(List<String> contents) {
StringBuilder slides = new StringBuilder(); StringBuilder slides = new StringBuilder();
String divStr = "<div id=%s class=\"step slide\" data-x=\"0\" data-y=\"0\" data-z=%s>\n%s\n</div>"; String divStr = "<div id=%s class=\"step slide\" data-x=\"0\" data-y=%s data-z=%s>\n%s\n</div>";
for (int i = 0; i < contents.size(); i++) { for (int i = 0; i < contents.size(); i++) {
String id = "slide" + i; String id = "slide" + i;
String dataZ = String.valueOf(-i * 1500); String dataY = String.valueOf(i * 50);
slides.append(String.format(divStr, id, dataZ, contents.get(i))); String dataZ = String.valueOf(i * 1500);
slides.append(String.format(divStr, id, dataY, dataZ, contents.get(i)));
slides.append('\n'); slides.append('\n');
} }
return slides.toString(); return slides.toString();

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

@ -0,0 +1,321 @@
package com.fr.plugin.easyslides.slidestyles;
import java.util.List;
/**
* 旋转3D风格
*/
public class Rotation3DStyle extends SlideStyle {
private String[] stepsDiv = {
"<div id=\"overview\" class=\"step overview\" data-x=\"1350\" data-y=\"100\" data-z=\"100\" data-scale=\"3\" data-rotate-y=\"90\">\n",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"0\" data-z=\"0\">",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"-70\" data-z=\"-250\" data-rotate-z=\"45\" data-rotate-y=\"-45\" data-rotate-order=\"zyx\">",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"350\" data-z=\"-350\" data-rotate-z=\"90\" data-rotate-y=\"-90\" data-rotate-order=\"zyx\">",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"780\" data-z=\"-250\" data-rotate-z=\"135\" data-rotate-y=\"-135\" data-rotate-order=\"zyx\">",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"702\" data-z=\"0\" data-rotate-z=\"180\" data-rotate-y=\"-180\" data-rotate-order=\"zyx\">",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"780\" data-z=\"270\" data-rotate-z=\"135\" data-rotate-y=\"-225\" data-rotate-order=\"zyx\">",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"350\" data-z=\"350\" data-rotate-z=\"90\" data-rotate-y=\"-270\" data-rotate-order=\"zyx\">",
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"-70\" data-z=\"270\" data-rotate-z=\"45\" data-rotate-y=\"-315\" data-rotate-order=\"zyx\">"
};
private int[] dataX = {0, 420, 700, 422, 0, 379, 700, 379};
@Override
protected String buildContents(List<String> contents) {
StringBuilder r = new StringBuilder();
for (int i = 0; i < contents.size(); i++) {
if (i == 0) {
r.append(stepsDiv[i]);
} else {
int id = (i / stepsDiv.length) < 1 ? (i % stepsDiv.length) : (i % stepsDiv.length + 1);
String div = stepsDiv[id];
div = String.format(div, i, (dataX[(i - 1) % dataX.length] + 1000 * ((i - 1) / dataX.length)));
r.append(div);
}
r.append(contents.get(i));
r.append("</div>\n");
}
r.append("<style type=\"text/css\">\n");
r.append(css);
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";
}

2
src/main/java/com/fr/plugin/easyslides/slidestyles/StyleFactory.java

@ -10,6 +10,8 @@ public class StyleFactory {
return new HorizontalStyle(); return new HorizontalStyle();
} else if (Inter.getLocText("Plugin-EasySlides_Style3").equalsIgnoreCase(type)) { } else if (Inter.getLocText("Plugin-EasySlides_Style3").equalsIgnoreCase(type)) {
return new FarAwayStyle(); return new FarAwayStyle();
} else if (Inter.getLocText("Plugin-EasySlides_Style4").equalsIgnoreCase(type)) {
return new Rotation3DStyle();
} }
return null; return null;
} }

8
src/main/java/com/fr/plugin/easyslides/ui/EasySlidesWidgetUI.java

@ -62,6 +62,14 @@ public class EasySlidesWidgetUI extends XWidgetCreator {
.setI18NName(Inter.getLocText("Plugin-EasySlides_ColorBackground")) .setI18NName(Inter.getLocText("Plugin-EasySlides_ColorBackground"))
.setEditorClass(ColorEditor.class) .setEditorClass(ColorEditor.class)
.putKeyValue("category", advanced), .putKeyValue("category", advanced),
(new CRPropertyDescriptor(SLIDE_BACKGROUND_COLOR, this.data.getClass()))
.setI18NName(Inter.getLocText("Plugin-EasySlides_SlideColorBackground"))
.setEditorClass(ColorEditor.class)
.putKeyValue("category", advanced),
(new CRPropertyDescriptor(SLIDE_FONT_COLOR, this.data.getClass()))
.setI18NName(Inter.getLocText("Plugin-EasySlides_SlideFontColor"))
.setEditorClass(ColorEditor.class)
.putKeyValue("category", advanced),
(new CRPropertyDescriptor(AUTO_PLAY, this.data.getClass())) (new CRPropertyDescriptor(AUTO_PLAY, this.data.getClass()))
.setI18NName(Inter.getLocText("Plugin-EasySlides_AutoPlay")) .setI18NName(Inter.getLocText("Plugin-EasySlides_AutoPlay"))
.setEditorClass(BooleanEditor.class) .setEditorClass(BooleanEditor.class)

3
src/main/java/com/fr/plugin/easyslides/ui/SlideStyleEditor.java

@ -8,6 +8,7 @@ import java.util.Vector;
public class SlideStyleEditor extends ComboEditor { public class SlideStyleEditor extends ComboEditor {
public static final String DEFAULT_STYLE = Inter.getLocText("Plugin-EasySlides_Style1"); public static final String DEFAULT_STYLE = Inter.getLocText("Plugin-EasySlides_Style1");
private static final int NUM_STYLE = 4;
public SlideStyleEditor() { public SlideStyleEditor() {
} }
@ -15,7 +16,7 @@ public class SlideStyleEditor extends ComboEditor {
@Override @Override
public ComboBoxModel model() { public ComboBoxModel model() {
Vector<String> vector = new Vector(); Vector<String> vector = new Vector();
for (int i = 0; i < 3; i++) { for (int i = 0; i < NUM_STYLE; i++) {
vector.add(Inter.getLocText("Plugin-EasySlides_Style" + (i + 1))); vector.add(Inter.getLocText("Plugin-EasySlides_Style" + (i + 1)));
} }
return new DefaultComboBoxModel(vector); return new DefaultComboBoxModel(vector);

276
src/main/java/com/fr/plugin/easyslides/web/3D-rotations.css

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

355
src/main/java/com/fr/plugin/easyslides/web/impress-default.css

@ -19,8 +19,7 @@
Shall we begin? Shall we begin?
*/ */
/*
/*
We start with a good ol' reset. We start with a good ol' reset.
That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/
@ -37,8 +36,8 @@ b, u, i, center,
dl, dt, dd, ol, ul, li, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, menu, nav, output, ruby, section, summary,
time, mark, audio, video { time, mark, audio, video {
margin: 0; margin: 0;
@ -50,19 +49,23 @@ time, mark, audio, video {
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
ol, ul { ol, ul {
list-style: none; list-style: none;
} }
blockquote, q { blockquote, q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after, blockquote:before, blockquote:after,
q:before, q:after { q:before, q:after {
content: ''; content: '';
@ -101,17 +104,22 @@ table {
background: rgb(215, 215, 215); background: rgb(215, 215, 215);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
} }
/* /*
Now let's bring some text styles back ... Now let's bring some text styles back ...
*/ */
b, strong { font-weight: bold } b, strong {
i, em { font-style: italic } font-weight: bold
}
i, em {
font-style: italic
}
/* /*
... and give links a nice look. ... and give links a nice look.
@ -120,21 +128,21 @@ a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
padding: 0 0.1em; padding: 0 0.1em;
background: rgba(255,255,255,0.5); background: rgba(255, 255, 255, 0.5);
text-shadow: -1px -1px 2px rgba(100,100,100,0.9); text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.9);
border-radius: 0.2em; border-radius: 0.2em;
-webkit-transition: 0.5s; -webkit-transition: 0.5s;
-moz-transition: 0.5s; -moz-transition: 0.5s;
-ms-transition: 0.5s; -ms-transition: 0.5s;
-o-transition: 0.5s; -o-transition: 0.5s;
transition: 0.5s; transition: 0.5s;
} }
a:hover, a:hover,
a:focus { a:focus {
background: rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
text-shadow: -1px -1px 2px rgba(100,100,100,0.5); text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.5);
} }
/* /*
@ -152,7 +160,7 @@ a:focus {
.fallback-message { .fallback-message {
font-family: sans-serif; font-family: sans-serif;
line-height: 1.3; line-height: 1.3;
width: 780px; width: 780px;
padding: 10px 10px 0; padding: 10px 10px 0;
margin: 20px auto; margin: 20px auto;
@ -183,10 +191,10 @@ a:focus {
margin: 20px auto; margin: 20px auto;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
font-family: 'PT Serif', georgia, serif; font-family: 'PT Serif', georgia, serif;
font-size: 48px; font-size: 48px;
@ -203,13 +211,15 @@ a:focus {
opacity: 0.3; opacity: 0.3;
-webkit-transition: opacity 1s; -webkit-transition: opacity 1s;
-moz-transition: opacity 1s; -moz-transition: opacity 1s;
-ms-transition: opacity 1s; -ms-transition: opacity 1s;
-o-transition: opacity 1s; -o-transition: opacity 1s;
transition: opacity 1s; transition: opacity 1s;
} }
.impress-enabled .step.active { opacity: 1 } .impress-enabled .step.active {
opacity: 1
}
/* /*
These 'slide' step styles were heavily inspired by HTML5 Slides: These 'slide' step styles were heavily inspired by HTML5 Slides:
@ -244,14 +254,28 @@ a:focus {
display: block; display: block;
font-size: 50px; font-size: 50px;
line-height: 72px; line-height: 72px;
margin-top: 100px; margin-top: 100px;
} }
.slide q strong { .slide q, strong {
white-space: nowrap; white-space: nowrap;
} }
.slide h1, h2, h3 {
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: center;
}
.slide p {
text-align: center;
margin: 0.7em;
}
.slide li {
margin: 0.2em;
}
/* /*
And now we start to style each step separately. And now we start to style each step separately.
@ -272,22 +296,22 @@ a:focus {
position: absolute; position: absolute;
top: -0.5em; top: -0.5em;
left: 1.5em; left: 1.5em;
-webkit-transform: translateZ(20px); -webkit-transform: translateZ(20px);
-moz-transform: translateZ(20px); -moz-transform: translateZ(20px);
-ms-transform: translateZ(20px); -ms-transform: translateZ(20px);
-o-transform: translateZ(20px); -o-transform: translateZ(20px);
transform: translateZ(20px); transform: translateZ(20px);
} }
#title h1 { #title h1 {
font-size: 190px; font-size: 190px;
-webkit-transform: translateZ(50px); -webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px); -moz-transform: translateZ(50px);
-ms-transform: translateZ(50px); -ms-transform: translateZ(50px);
-o-transform: translateZ(50px); -o-transform: translateZ(50px);
transform: translateZ(50px); transform: translateZ(50px);
} }
#title .footnote { #title .footnote {
@ -329,7 +353,9 @@ a:focus {
/* /*
This step has some animated text ... This step has some animated text ...
*/ */
#ing { width: 500px } #ing {
width: 500px
}
/* /*
... so we define display to `inline-block` to enable transforms and ... so we define display to `inline-block` to enable transforms and
@ -338,10 +364,10 @@ a:focus {
#ing b { #ing b {
display: inline-block; display: inline-block;
-webkit-transition: 0.5s; -webkit-transition: 0.5s;
-moz-transition: 0.5s; -moz-transition: 0.5s;
-ms-transition: 0.5s; -ms-transition: 0.5s;
-o-transition: 0.5s; -o-transition: 0.5s;
transition: 0.5s; transition: 0.5s;
} }
/* /*
@ -350,10 +376,10 @@ a:focus {
*/ */
#ing.present .positioning { #ing.present .positioning {
-webkit-transform: translateY(-10px); -webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px); -moz-transform: translateY(-10px);
-ms-transform: translateY(-10px); -ms-transform: translateY(-10px);
-o-transform: translateY(-10px); -o-transform: translateY(-10px);
transform: translateY(-10px); transform: translateY(-10px);
} }
/* /*
@ -361,16 +387,16 @@ a:focus {
*/ */
#ing.present .rotating { #ing.present .rotating {
-webkit-transform: rotate(-10deg); -webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg); -moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg); -ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg); -o-transform: rotate(-10deg);
transform: rotate(-10deg); transform: rotate(-10deg);
-webkit-transition-delay: 0.25s; -webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s; -moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s; -ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s; -o-transition-delay: 0.25s;
transition-delay: 0.25s; transition-delay: 0.25s;
} }
/* /*
@ -378,16 +404,16 @@ a:focus {
*/ */
#ing.present .scaling { #ing.present .scaling {
-webkit-transform: scale(0.7); -webkit-transform: scale(0.7);
-moz-transform: scale(0.7); -moz-transform: scale(0.7);
-ms-transform: scale(0.7); -ms-transform: scale(0.7);
-o-transform: scale(0.7); -o-transform: scale(0.7);
transform: scale(0.7); transform: scale(0.7);
-webkit-transition-delay: 0.5s; -webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s; -moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s; -ms-transition-delay: 0.5s;
-o-transition-delay: 0.5s; -o-transition-delay: 0.5s;
transition-delay: 0.5s; transition-delay: 0.5s;
} }
/* /*
@ -415,7 +441,7 @@ a:focus {
#source { #source {
width: 700px; width: 700px;
padding-bottom: 300px; padding-bottom: 300px;
/* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */ /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
background-position: bottom right; background-position: bottom right;
@ -436,10 +462,10 @@ a:focus {
*/ */
#its-in-3d p { #its-in-3d p {
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; /* Y U need this Firefox?! */ -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
-ms-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d; -o-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
/* /*
@ -452,75 +478,75 @@ a:focus {
#its-in-3d b { #its-in-3d b {
display: inline-block; display: inline-block;
-webkit-transform: translateZ(40px); -webkit-transform: translateZ(40px);
-moz-transform: translateZ(40px); -moz-transform: translateZ(40px);
-ms-transform: translateZ(40px); -ms-transform: translateZ(40px);
-o-transform: translateZ(40px); -o-transform: translateZ(40px);
transform: translateZ(40px); transform: translateZ(40px);
-webkit-transition: 0.5s; -webkit-transition: 0.5s;
-moz-transition: 0.5s; -moz-transition: 0.5s;
-ms-transition: 0.5s; -ms-transition: 0.5s;
-o-transition: 0.5s; -o-transition: 0.5s;
transition: 0.5s; transition: 0.5s;
} }
#its-in-3d .have { #its-in-3d .have {
-webkit-transform: translateZ(-40px); -webkit-transform: translateZ(-40px);
-moz-transform: translateZ(-40px); -moz-transform: translateZ(-40px);
-ms-transform: translateZ(-40px); -ms-transform: translateZ(-40px);
-o-transform: translateZ(-40px); -o-transform: translateZ(-40px);
transform: translateZ(-40px); transform: translateZ(-40px);
} }
#its-in-3d .you { #its-in-3d .you {
-webkit-transform: translateZ(20px); -webkit-transform: translateZ(20px);
-moz-transform: translateZ(20px); -moz-transform: translateZ(20px);
-ms-transform: translateZ(20px); -ms-transform: translateZ(20px);
-o-transform: translateZ(20px); -o-transform: translateZ(20px);
transform: translateZ(20px); transform: translateZ(20px);
} }
#its-in-3d .noticed { #its-in-3d .noticed {
-webkit-transform: translateZ(-40px); -webkit-transform: translateZ(-40px);
-moz-transform: translateZ(-40px); -moz-transform: translateZ(-40px);
-ms-transform: translateZ(-40px); -ms-transform: translateZ(-40px);
-o-transform: translateZ(-40px); -o-transform: translateZ(-40px);
transform: translateZ(-40px); transform: translateZ(-40px);
} }
#its-in-3d .its { #its-in-3d .its {
-webkit-transform: translateZ(60px); -webkit-transform: translateZ(60px);
-moz-transform: translateZ(60px); -moz-transform: translateZ(60px);
-ms-transform: translateZ(60px); -ms-transform: translateZ(60px);
-o-transform: translateZ(60px); -o-transform: translateZ(60px);
transform: translateZ(60px); transform: translateZ(60px);
} }
#its-in-3d .in { #its-in-3d .in {
-webkit-transform: translateZ(-10px); -webkit-transform: translateZ(-10px);
-moz-transform: translateZ(-10px); -moz-transform: translateZ(-10px);
-ms-transform: translateZ(-10px); -ms-transform: translateZ(-10px);
-o-transform: translateZ(-10px); -o-transform: translateZ(-10px);
transform: translateZ(-10px); transform: translateZ(-10px);
} }
#its-in-3d .footnote { #its-in-3d .footnote {
font-size: 32px; font-size: 32px;
-webkit-transform: translateZ(-10px); -webkit-transform: translateZ(-10px);
-moz-transform: translateZ(-10px); -moz-transform: translateZ(-10px);
-ms-transform: translateZ(-10px); -ms-transform: translateZ(-10px);
-o-transform: translateZ(-10px); -o-transform: translateZ(-10px);
transform: translateZ(-10px); transform: translateZ(-10px);
} }
#its-in-3d.present span, #its-in-3d.present span,
#its-in-3d.present b { #its-in-3d.present b {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px); -moz-transform: translateZ(0px);
-ms-transform: translateZ(0px); -ms-transform: translateZ(0px);
-o-transform: translateZ(0px); -o-transform: translateZ(0px);
transform: translateZ(0px); transform: translateZ(0px);
} }
/* /*
@ -529,17 +555,32 @@ a:focus {
to be able to click on other steps. to be able to click on other steps.
*/ */
#overview { display: none } /*#overview {
display: none
}*/
/* Overview step has no background or border */
.overview {
background-color: transparent;
border: none;
box-shadow: none;
pointer-events: none;
display: none;
}
.overview.active {
display: block;
pointer-events: auto;
}
/* /*
We also make other steps visible and give them a pointer cursor using the We also make other steps visible and give them a pointer cursor using the
`impress-on-` class. `impress-on-` class.
*/ */
.impress-on-overview .step { /*.impress-on-overview .step {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }*/
/* /*
Now, when we have all the steps styled let's give users a hint how to navigate Now, when we have all the steps styled let's give users a hint how to navigate
@ -589,7 +630,7 @@ a:focus {
impress.js, as they will have a linear scrollable view ... impress.js, as they will have a linear scrollable view ...
*/ */
display: none; display: none;
/* /*
... and give it some fixed position and nice styles. ... and give it some fixed position and nice styles.
*/ */
@ -597,29 +638,29 @@ a:focus {
left: 0; left: 0;
right: 0; right: 0;
bottom: 200px; bottom: 200px;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
color: #EEE; color: #EEE;
text-align: center; text-align: center;
font-size: 50px; font-size: 50px;
padding: 20px; padding: 20px;
z-index: 100; z-index: 100;
/* /*
By default we don't want the hint to be visible, so we make it transparent ... By default we don't want the hint to be visible, so we make it transparent ...
*/ */
opacity: 0; opacity: 0;
/* /*
... and position it below the bottom of the screen (relative to it's fixed position) ... and position it below the bottom of the screen (relative to it's fixed position)
*/ */
-webkit-transform: translateY(400px); -webkit-transform: translateY(400px);
-moz-transform: translateY(400px); -moz-transform: translateY(400px);
-ms-transform: translateY(400px); -ms-transform: translateY(400px);
-o-transform: translateY(400px); -o-transform: translateY(400px);
transform: translateY(400px); transform: translateY(400px);
/* /*
Now let's imagine that the hint is visible and we want to fade it out and move out Now let's imagine that the hint is visible and we want to fade it out and move out
@ -632,16 +673,18 @@ a:focus {
This way user will not see the hint moving down. This way user will not see the hint moving down.
*/ */
-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s; -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
-moz-transition: opacity 1s, -moz-transform 0.5s 1s; -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
-ms-transition: opacity 1s, -ms-transform 0.5s 1s; -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
-o-transition: opacity 1s, -o-transform 0.5s 1s; -o-transition: opacity 1s, -o-transform 0.5s 1s;
transition: opacity 1s, transform 0.5s 1s; transition: opacity 1s, transform 0.5s 1s;
} }
/* /*
Now we 'enable' the hint when presentation is initialized ... Now we 'enable' the hint when presentation is initialized ...
*/ */
.impress-enabled .hint { display: block } .impress-enabled .hint {
display: block
}
/* /*
... and we will show it when the first step (with id 'bored') is active. ... and we will show it when the first step (with id 'bored') is active.
@ -652,13 +695,13 @@ a:focus {
position. position.
*/ */
opacity: 1; opacity: 1;
-webkit-transform: translateY(0px); -webkit-transform: translateY(0px);
-moz-transform: translateY(0px); -moz-transform: translateY(0px);
-ms-transform: translateY(0px); -ms-transform: translateY(0px);
-o-transform: translateY(0px); -o-transform: translateY(0px);
transform: translateY(0px); transform: translateY(0px);
/* /*
Now for fade in transition we have the oposite situation from the one Now for fade in transition we have the oposite situation from the one
above. above.
@ -668,10 +711,10 @@ a:focus {
transition. transition.
*/ */
-webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s; -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
-moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s; -moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s;
-ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s; -ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s;
-o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s; -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s;
transition: opacity 1s 5s, transform 0.5s 4.5s; transition: opacity 1s 5s, transform 0.5s 4.5s;
} }
/* /*
@ -695,8 +738,13 @@ a:focus {
So use it wisely ... or don't use at all. So use it wisely ... or don't use at all.
*/ */
.impress-enabled { pointer-events: none } .impress-enabled {
.impress-enabled #impress { pointer-events: auto } pointer-events: none
}
.impress-enabled #impress {
pointer-events: auto
}
/* /*
There is one funny thing I just realized. There is one funny thing I just realized.
@ -727,6 +775,7 @@ a:focus {
opacity: 0.6; opacity: 0.6;
z-index: 10; z-index: 10;
} }
.impress-enabled div#impress-toolbar > span { .impress-enabled div#impress-toolbar > span {
margin-right: 10px; margin-right: 10px;
} }
@ -746,8 +795,6 @@ body.impress-mouse-timeout {
cursor: none; cursor: none;
} }
/* Progress bar */ /* Progress bar */
.impress-progressbar { .impress-progressbar {
position: absolute; position: absolute;
@ -757,6 +804,7 @@ body.impress-mouse-timeout {
border-radius: 7px; border-radius: 7px;
border: 2px solid rgba(100, 100, 100, 0.2); border: 2px solid rgba(100, 100, 100, 0.2);
} }
.impress-progressbar DIV { .impress-progressbar DIV {
width: 0; width: 0;
height: 2px; height: 2px;
@ -764,6 +812,7 @@ body.impress-mouse-timeout {
background: rgba(75, 75, 75, 0.4); background: rgba(75, 75, 75, 0.4);
transition: width 1s linear; transition: width 1s linear;
} }
.impress-progress { .impress-progress {
position: absolute; position: absolute;
left: 59px; left: 59px;
@ -788,6 +837,7 @@ body.impress-mouse-timeout {
z-index: 100; z-index: 100;
font-family: Verdana, Arial, Sans; font-family: Verdana, Arial, Sans;
} }
.impress-enabled #impress-help td { .impress-enabled #impress-help td {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
@ -804,7 +854,18 @@ body.impress-mouse-timeout {
transition: opacity 1s; transition: opacity 1s;
} }
.impress-enabled { pointer-events: none } .impress-enabled {
.impress-enabled #impress { pointer-events: auto } pointer-events: none
.impress-enabled #impress-toolbar { pointer-events: auto } }
.impress-enabled #impress-console-button { pointer-events: auto }
.impress-enabled #impress {
pointer-events: auto
}
.impress-enabled #impress-toolbar {
pointer-events: auto
}
.impress-enabled #impress-console-button {
pointer-events: auto
}

5
src/main/java/com/fr/plugin/easyslides/web/widget.js

@ -17,7 +17,6 @@
var myWidgetName = o.widgetName; var myWidgetName = o.widgetName;
var myWidget = this.element; var myWidget = this.element;
var contents = o.value; var contents = o.value;
debugger; debugger;
//var $topdiv = $("[widgetname='" +o.widgetName+ "']"); //var $topdiv = $("[widgetname='" +o.widgetName+ "']");
myWidget.css("background-color", o.backgroundColor); myWidget.css("background-color", o.backgroundColor);
@ -48,7 +47,9 @@
'height': height / hScale + 'px', 'height': height / hScale + 'px',
'font-size': width * height / fontScale + 'px', 'font-size': width * height / fontScale + 'px',
'line-height': width * height / lhScale + 'px', 'line-height': width * height / lhScale + 'px',
'padding': width / padxScale + 'px ' + height / padyScale + 'px' 'padding': width / padxScale + 'px ' + height / padyScale + 'px',
'background-color': o.slideBackgroundColor,
'color': o.slideFontColor
}); });
}); });

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

Binary file not shown.
Loading…
Cancel
Save