",
+ "
"
+ };
+
+ private int[] dataX = {0, 420, 700, 422, 0, 379, 700, 379};
+
+ @Override
+ protected String buildContents(List 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("
\n");
+ }
+ r.append("");
+ 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 \n" +
+ " element.\n" +
+ "\n" +
+ " To prevent this, I decided to make 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";
+}
diff --git a/src/main/java/com/fr/plugin/easyslides/slidestyles/StyleFactory.java b/src/main/java/com/fr/plugin/easyslides/slidestyles/StyleFactory.java
index 44a0536..66337ec 100644
--- a/src/main/java/com/fr/plugin/easyslides/slidestyles/StyleFactory.java
+++ b/src/main/java/com/fr/plugin/easyslides/slidestyles/StyleFactory.java
@@ -10,6 +10,8 @@ public class StyleFactory {
return new HorizontalStyle();
} else if (Inter.getLocText("Plugin-EasySlides_Style3").equalsIgnoreCase(type)) {
return new FarAwayStyle();
+ } else if (Inter.getLocText("Plugin-EasySlides_Style4").equalsIgnoreCase(type)) {
+ return new Rotation3DStyle();
}
return null;
}
diff --git a/src/main/java/com/fr/plugin/easyslides/ui/EasySlidesWidgetUI.java b/src/main/java/com/fr/plugin/easyslides/ui/EasySlidesWidgetUI.java
index 1cb0e9e..842c014 100644
--- a/src/main/java/com/fr/plugin/easyslides/ui/EasySlidesWidgetUI.java
+++ b/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"))
.setEditorClass(ColorEditor.class)
.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()))
.setI18NName(Inter.getLocText("Plugin-EasySlides_AutoPlay"))
.setEditorClass(BooleanEditor.class)
diff --git a/src/main/java/com/fr/plugin/easyslides/ui/SlideStyleEditor.java b/src/main/java/com/fr/plugin/easyslides/ui/SlideStyleEditor.java
index c2fe7af..dd23ad5 100644
--- a/src/main/java/com/fr/plugin/easyslides/ui/SlideStyleEditor.java
+++ b/src/main/java/com/fr/plugin/easyslides/ui/SlideStyleEditor.java
@@ -8,6 +8,7 @@ import java.util.Vector;
public class SlideStyleEditor extends ComboEditor {
public static final String DEFAULT_STYLE = Inter.getLocText("Plugin-EasySlides_Style1");
+ private static final int NUM_STYLE = 4;
public SlideStyleEditor() {
}
@@ -15,7 +16,7 @@ public class SlideStyleEditor extends ComboEditor {
@Override
public ComboBoxModel model() {
Vector
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)));
}
return new DefaultComboBoxModel(vector);
diff --git a/src/main/java/com/fr/plugin/easyslides/web/3D-rotations.css b/src/main/java/com/fr/plugin/easyslides/web/3D-rotations.css
new file mode 100644
index 0000000..138dc67
--- /dev/null
+++ b/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
+ element.
+
+ To prevent this, I decided to make 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 }
diff --git a/src/main/java/com/fr/plugin/easyslides/web/impress-default.css b/src/main/java/com/fr/plugin/easyslides/web/impress-default.css
index 64369a0..ed2a4ef 100644
--- a/src/main/java/com/fr/plugin/easyslides/web/impress-default.css
+++ b/src/main/java/com/fr/plugin/easyslides/web/impress-default.css
@@ -19,8 +19,7 @@
Shall we begin?
*/
-
-/*
+/*
We start with a good ol' 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,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
@@ -50,19 +49,23 @@ time, mark, audio, video {
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
+article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
+
body {
line-height: 1;
}
+
ol, ul {
list-style: none;
}
+
blockquote, q {
quotes: none;
}
+
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
@@ -101,17 +104,22 @@ table {
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-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: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
- background: 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: -o-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 ...
*/
-b, strong { font-weight: bold }
-i, em { font-style: italic }
+b, strong {
+ font-weight: bold
+}
+
+i, em {
+ font-style: italic
+}
/*
... and give links a nice look.
@@ -120,21 +128,21 @@ a {
color: inherit;
text-decoration: none;
padding: 0 0.1em;
- background: rgba(255,255,255,0.5);
- text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
+ background: rgba(255, 255, 255, 0.5);
+ text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.9);
border-radius: 0.2em;
-
+
-webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- -ms-transition: 0.5s;
- -o-transition: 0.5s;
- transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+ transition: 0.5s;
}
a:hover,
a:focus {
- background: rgba(255,255,255,1);
- text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
+ background: rgba(255, 255, 255, 1);
+ text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.5);
}
/*
@@ -152,7 +160,7 @@ a:focus {
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
-
+
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
@@ -183,10 +191,10 @@ a:focus {
margin: 20px auto;
-webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- -o-box-sizing: border-box;
- box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
font-family: 'PT Serif', georgia, serif;
font-size: 48px;
@@ -203,13 +211,15 @@ a:focus {
opacity: 0.3;
-webkit-transition: opacity 1s;
- -moz-transition: opacity 1s;
- -ms-transition: opacity 1s;
- -o-transition: opacity 1s;
- transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -ms-transition: opacity 1s;
+ -o-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:
@@ -244,14 +254,28 @@ a:focus {
display: block;
font-size: 50px;
line-height: 72px;
-
margin-top: 100px;
}
-.slide q strong {
+.slide q, strong {
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.
@@ -272,22 +296,22 @@ a:focus {
position: absolute;
top: -0.5em;
left: 1.5em;
-
+
-webkit-transform: translateZ(20px);
- -moz-transform: translateZ(20px);
- -ms-transform: translateZ(20px);
- -o-transform: translateZ(20px);
- transform: translateZ(20px);
+ -moz-transform: translateZ(20px);
+ -ms-transform: translateZ(20px);
+ -o-transform: translateZ(20px);
+ transform: translateZ(20px);
}
#title h1 {
font-size: 190px;
-
+
-webkit-transform: translateZ(50px);
- -moz-transform: translateZ(50px);
- -ms-transform: translateZ(50px);
- -o-transform: translateZ(50px);
- transform: translateZ(50px);
+ -moz-transform: translateZ(50px);
+ -ms-transform: translateZ(50px);
+ -o-transform: translateZ(50px);
+ transform: translateZ(50px);
}
#title .footnote {
@@ -329,7 +353,9 @@ a:focus {
/*
This step has some animated text ...
*/
-#ing { width: 500px }
+#ing {
+ width: 500px
+}
/*
... so we define display to `inline-block` to enable transforms and
@@ -338,10 +364,10 @@ a:focus {
#ing b {
display: inline-block;
-webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- -ms-transition: 0.5s;
- -o-transition: 0.5s;
- transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+ transition: 0.5s;
}
/*
@@ -350,10 +376,10 @@ a:focus {
*/
#ing.present .positioning {
-webkit-transform: translateY(-10px);
- -moz-transform: translateY(-10px);
- -ms-transform: translateY(-10px);
- -o-transform: translateY(-10px);
- transform: translateY(-10px);
+ -moz-transform: translateY(-10px);
+ -ms-transform: translateY(-10px);
+ -o-transform: translateY(-10px);
+ transform: translateY(-10px);
}
/*
@@ -361,16 +387,16 @@ a:focus {
*/
#ing.present .rotating {
-webkit-transform: rotate(-10deg);
- -moz-transform: rotate(-10deg);
- -ms-transform: rotate(-10deg);
- -o-transform: rotate(-10deg);
- transform: rotate(-10deg);
+ -moz-transform: rotate(-10deg);
+ -ms-transform: rotate(-10deg);
+ -o-transform: rotate(-10deg);
+ transform: rotate(-10deg);
-webkit-transition-delay: 0.25s;
- -moz-transition-delay: 0.25s;
- -ms-transition-delay: 0.25s;
- -o-transition-delay: 0.25s;
- transition-delay: 0.25s;
+ -moz-transition-delay: 0.25s;
+ -ms-transition-delay: 0.25s;
+ -o-transition-delay: 0.25s;
+ transition-delay: 0.25s;
}
/*
@@ -378,16 +404,16 @@ a:focus {
*/
#ing.present .scaling {
-webkit-transform: scale(0.7);
- -moz-transform: scale(0.7);
- -ms-transform: scale(0.7);
- -o-transform: scale(0.7);
- transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ transform: scale(0.7);
-webkit-transition-delay: 0.5s;
- -moz-transition-delay: 0.5s;
- -ms-transition-delay: 0.5s;
- -o-transition-delay: 0.5s;
- transition-delay: 0.5s;
+ -moz-transition-delay: 0.5s;
+ -ms-transition-delay: 0.5s;
+ -o-transition-delay: 0.5s;
+ transition-delay: 0.5s;
}
/*
@@ -415,7 +441,7 @@ a:focus {
#source {
width: 700px;
padding-bottom: 300px;
-
+
/* 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-position: bottom right;
@@ -436,10 +462,10 @@ a:focus {
*/
#its-in-3d p {
-webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
- -ms-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
- transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
+ -ms-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ transform-style: preserve-3d;
}
/*
@@ -452,75 +478,75 @@ a:focus {
#its-in-3d b {
display: inline-block;
-webkit-transform: translateZ(40px);
- -moz-transform: translateZ(40px);
- -ms-transform: translateZ(40px);
- -o-transform: translateZ(40px);
- transform: translateZ(40px);
-
+ -moz-transform: translateZ(40px);
+ -ms-transform: translateZ(40px);
+ -o-transform: translateZ(40px);
+ transform: translateZ(40px);
+
-webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- -ms-transition: 0.5s;
- -o-transition: 0.5s;
- transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+ transition: 0.5s;
}
#its-in-3d .have {
-webkit-transform: translateZ(-40px);
- -moz-transform: translateZ(-40px);
- -ms-transform: translateZ(-40px);
- -o-transform: translateZ(-40px);
- transform: translateZ(-40px);
+ -moz-transform: translateZ(-40px);
+ -ms-transform: translateZ(-40px);
+ -o-transform: translateZ(-40px);
+ transform: translateZ(-40px);
}
#its-in-3d .you {
-webkit-transform: translateZ(20px);
- -moz-transform: translateZ(20px);
- -ms-transform: translateZ(20px);
- -o-transform: translateZ(20px);
- transform: translateZ(20px);
+ -moz-transform: translateZ(20px);
+ -ms-transform: translateZ(20px);
+ -o-transform: translateZ(20px);
+ transform: translateZ(20px);
}
#its-in-3d .noticed {
-webkit-transform: translateZ(-40px);
- -moz-transform: translateZ(-40px);
- -ms-transform: translateZ(-40px);
- -o-transform: translateZ(-40px);
- transform: translateZ(-40px);
+ -moz-transform: translateZ(-40px);
+ -ms-transform: translateZ(-40px);
+ -o-transform: translateZ(-40px);
+ transform: translateZ(-40px);
}
#its-in-3d .its {
-webkit-transform: translateZ(60px);
- -moz-transform: translateZ(60px);
- -ms-transform: translateZ(60px);
- -o-transform: translateZ(60px);
- transform: translateZ(60px);
+ -moz-transform: translateZ(60px);
+ -ms-transform: translateZ(60px);
+ -o-transform: translateZ(60px);
+ transform: translateZ(60px);
}
#its-in-3d .in {
-webkit-transform: translateZ(-10px);
- -moz-transform: translateZ(-10px);
- -ms-transform: translateZ(-10px);
- -o-transform: translateZ(-10px);
- transform: translateZ(-10px);
+ -moz-transform: translateZ(-10px);
+ -ms-transform: translateZ(-10px);
+ -o-transform: translateZ(-10px);
+ transform: translateZ(-10px);
}
#its-in-3d .footnote {
font-size: 32px;
-webkit-transform: translateZ(-10px);
- -moz-transform: translateZ(-10px);
- -ms-transform: translateZ(-10px);
- -o-transform: translateZ(-10px);
- transform: translateZ(-10px);
+ -moz-transform: translateZ(-10px);
+ -ms-transform: translateZ(-10px);
+ -o-transform: translateZ(-10px);
+ transform: translateZ(-10px);
}
#its-in-3d.present span,
#its-in-3d.present b {
-webkit-transform: translateZ(0px);
- -moz-transform: translateZ(0px);
- -ms-transform: translateZ(0px);
- -o-transform: translateZ(0px);
- transform: translateZ(0px);
+ -moz-transform: translateZ(0px);
+ -ms-transform: translateZ(0px);
+ -o-transform: translateZ(0px);
+ transform: translateZ(0px);
}
/*
@@ -529,17 +555,32 @@ a:focus {
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
`impress-on-` class.
*/
-.impress-on-overview .step {
+/*.impress-on-overview .step {
opacity: 1;
cursor: pointer;
-}
-
+}*/
/*
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 ...
*/
display: none;
-
+
/*
... and give it some fixed position and nice styles.
*/
@@ -597,29 +638,29 @@ a:focus {
left: 0;
right: 0;
bottom: 200px;
-
- background: rgba(0,0,0,0.5);
+
+ background: rgba(0, 0, 0, 0.5);
color: #EEE;
text-align: center;
-
+
font-size: 50px;
padding: 20px;
-
+
z-index: 100;
-
+
/*
By default we don't want the hint to be visible, so we make it transparent ...
*/
opacity: 0;
-
+
/*
... and position it below the bottom of the screen (relative to it's fixed position)
*/
-webkit-transform: translateY(400px);
- -moz-transform: translateY(400px);
- -ms-transform: translateY(400px);
- -o-transform: translateY(400px);
- transform: translateY(400px);
+ -moz-transform: translateY(400px);
+ -ms-transform: translateY(400px);
+ -o-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
@@ -632,16 +673,18 @@ a:focus {
This way user will not see the hint moving down.
*/
-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
- -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
- -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
- -o-transition: opacity 1s, -o-transform 0.5s 1s;
- transition: opacity 1s, transform 0.5s 1s;
+ -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
+ -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
+ -o-transition: opacity 1s, -o-transform 0.5s 1s;
+ transition: opacity 1s, transform 0.5s 1s;
}
/*
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.
@@ -652,13 +695,13 @@ a:focus {
position.
*/
opacity: 1;
-
+
-webkit-transform: translateY(0px);
- -moz-transform: translateY(0px);
- -ms-transform: translateY(0px);
- -o-transform: translateY(0px);
- transform: translateY(0px);
-
+ -moz-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ -o-transform: translateY(0px);
+ transform: translateY(0px);
+
/*
Now for fade in transition we have the oposite situation from the one
above.
@@ -668,10 +711,10 @@ a:focus {
transition.
*/
-webkit-transition: opacity 1s 5s, -webkit-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;
- -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s;
- transition: opacity 1s 5s, 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;
+ -o-transition: opacity 1s 5s, -o-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.
*/
-.impress-enabled { pointer-events: none }
-.impress-enabled #impress { pointer-events: auto }
+.impress-enabled {
+ pointer-events: none
+}
+
+.impress-enabled #impress {
+ pointer-events: auto
+}
/*
There is one funny thing I just realized.
@@ -727,6 +775,7 @@ a:focus {
opacity: 0.6;
z-index: 10;
}
+
.impress-enabled div#impress-toolbar > span {
margin-right: 10px;
}
@@ -746,8 +795,6 @@ body.impress-mouse-timeout {
cursor: none;
}
-
-
/* Progress bar */
.impress-progressbar {
position: absolute;
@@ -757,6 +804,7 @@ body.impress-mouse-timeout {
border-radius: 7px;
border: 2px solid rgba(100, 100, 100, 0.2);
}
+
.impress-progressbar DIV {
width: 0;
height: 2px;
@@ -764,6 +812,7 @@ body.impress-mouse-timeout {
background: rgba(75, 75, 75, 0.4);
transition: width 1s linear;
}
+
.impress-progress {
position: absolute;
left: 59px;
@@ -788,6 +837,7 @@ body.impress-mouse-timeout {
z-index: 100;
font-family: Verdana, Arial, Sans;
}
+
.impress-enabled #impress-help td {
padding-left: 1em;
padding-right: 1em;
@@ -804,7 +854,18 @@ body.impress-mouse-timeout {
transition: opacity 1s;
}
-.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 }
+.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
+}
diff --git a/src/main/java/com/fr/plugin/easyslides/web/widget.js b/src/main/java/com/fr/plugin/easyslides/web/widget.js
index ef681de..866d4d2 100644
--- a/src/main/java/com/fr/plugin/easyslides/web/widget.js
+++ b/src/main/java/com/fr/plugin/easyslides/web/widget.js
@@ -17,7 +17,6 @@
var myWidgetName = o.widgetName;
var myWidget = this.element;
var contents = o.value;
-
debugger;
//var $topdiv = $("[widgetname='" +o.widgetName+ "']");
myWidget.css("background-color", o.backgroundColor);
@@ -48,7 +47,9 @@
'height': height / hScale + 'px',
'font-size': width * height / fontScale + '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
});
});
diff --git a/超酷幻灯片/fr-plugin-widget-easyslides-1.0.zip b/超酷幻灯片/fr-plugin-widget-easyslides-1.0.zip
new file mode 100644
index 0000000..166382f
Binary files /dev/null and b/超酷幻灯片/fr-plugin-widget-easyslides-1.0.zip differ