This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new cd88829 jewel-wizard: add transitions. use "activateEffect" new
wizard property to turn on/off.
cd88829 is described below
commit cd88829b2122706224eac3221a0992482e5cf7ad
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Apr 8 00:37:33 2019 +0200
jewel-wizard: add transitions. use "activateEffect" new wizard property to
turn on/off.
---
.../src/main/royale/WizardPlayGround.mxml | 25 ++++++++-
.../projects/Jewel/src/main/resources/defaults.css | 50 ++++++++++++++----
.../main/royale/org/apache/royale/jewel/Wizard.as | 21 ++++++++
.../org/apache/royale/jewel/WizardContent.as | 3 +-
.../royale/org/apache/royale/jewel/WizardPage.as | 49 ++++++++++++++++--
.../royale/jewel/beads/models/WizardModel.as | 24 ++++++++-
.../apache/royale/jewel/beads/views/WizardView.as | 16 +++++-
.../src/main/sass/components/_sectioncontent.sass | 1 -
.../Jewel/src/main/sass/components/_wizard.sass | 60 +++++++++++++++++-----
9 files changed, 216 insertions(+), 33 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
index c1be59e..46dc0b7 100644
--- a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
@@ -40,7 +40,7 @@ limitations under the License.
</j:beads>
<j:Card width="600">
- <j:Wizard id="wizard" width="100%" height="500"
title="{getStepLabel(wizard.currentStep)}">
+ <j:Wizard id="wizard" width="100%" height="500"
title="{getStepLabel(wizard.currentStep)}" activateEffect="false">
<j:previousButton>
<j:Group>
<j:IconButton
emphasis="{Button.SECONDARY}">
@@ -122,9 +122,13 @@ limitations under the License.
<j:WizardPage name="page5">
<views:step>
- <j:WizardStep name="page5"
previousStep="page4" stepLabel="Page 5"/>
+ <j:WizardStep name="page5"
previousStep="page4" nextStep="page6" stepLabel="Page 5"/>
</views:step>
+ <j:beads>
+ <j:ScrollingViewport/>
+ </j:beads>
+
<j:Grid>
<j:GridCell desktopNumerator="1"
desktopDenominator="1"
tabletNumerator="1" tabletDenominator="1"
@@ -142,6 +146,23 @@ limitations under the License.
</j:Grid>
</j:WizardPage>
+
+ <j:WizardPage name="page6">
+ <views:step>
+ <j:WizardStep name="page6"
previousStep="page5" stepLabel="Page 6"/>
+ </views:step>
+
+ <j:beads>
+ <j:ScrollingViewport/>
+ </j:beads>
+
+ <j:VGroup itemsVerticalAlign="itemsCentered"
width="250">
+ <html:H3 innerHTML="<strong>This
Content is centered and has scroll. The scroll bar apears near the right
border.</strong><br><br>"/>
+ <j:Label multiline="true" html="Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus blandit risus
sed elementum. Nulla consectetur vestibulum fringilla. Pellentesque id
facilisis tortor. Fusce neque velit, placerat sit amet nibh at, interdum
fringilla lectus. Pellentesque eget porta nulla. Aenean eu nisi eros. Sed
consequat convallis neque vel iaculis. Aliquam ut varius nunc. Fusce sit amet
mattis nisl. Nunc nibh diam, dictum sit amet lacus nec, mollis aliquam ve [...]
+ <j:Button text="Hi!" emphasis="primary"
width="180"/>
+ </j:VGroup>
+
+ </j:WizardPage>
</j:Wizard>
</j:Card>
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index eb30506..7f2fcd3 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3897,24 +3897,58 @@ j|BarTitle {
order: -1;
}
-.jewel .wizard .main {
+.jewel.wizard.main {
align-items: center;
width: 100%;
height: 100%;
}
-.jewel .precontent {
+.jewel.precontent {
+ position: relative;
width: 100%;
flex: 1 0;
}
.jewel.next, .jewel.previous {
+ z-index: 1;
height: 100%;
align-items: center;
justify-content: center;
cursor: pointer;
}
-.jewel .wizardcontent {
+.jewel.wizardcontent {
height: 100%;
flex-grow: 100;
+ position: inherit;
+}
+.jewel.wizardpage {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ width: 100%;
+ display: none;
+}
+.jewel.wizardpage > * {
+ margin: auto;
+}
+.jewel.wizardpage.is-selected {
+ z-index: 1;
+ display: block;
+}
+.jewel.wizardpage.is-selected.transitions {
+ opacity: 1;
+ transform: translateX(0%);
+}
+.jewel.wizardpage.transitions {
+ opacity: 0;
+ transition: transform 0.6s ease-out, opacity 0.6s ease-out;
+ will-change: transform, opacity;
+ transform: translateX(100%);
+ display: initial;
+}
+.jewel.wizardpage.transitions.slideLeft {
+ transform: translateX(-100%);
+}
+.jewel.wizardpage.transitions.slideRight {
+ transform: translateX(100%);
}
j|Wizard {
@@ -3925,15 +3959,13 @@ j|Wizard {
IWizardContentArea: ClassReference("org.apache.royale.jewel.WizardContent");
}
-j|WizardPage {
- IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.NoViewport");
-}
-
j|WizardContent {
IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
- IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
- IViewportModel:
ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+
+j|WizardPage {
+ IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.NoViewport");
}
.jewel.main {
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as
index eacf86d..e3f0d4c 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as
@@ -131,6 +131,27 @@ package org.apache.royale.jewel
}
/**
+ * turn on/off the transition effects
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ * @royaleignorecoercion
org.apache.royale.jewel.beads.models.WizardModel
+ */
+ public function get activateEffect():Boolean
+ {
+ return WizardModel(model).activateEffect;
+ }
+ /**
+ * @royaleignorecoercion
org.apache.royale.jewel.beads.models.WizardModel
+ */
+ public function set activateEffect(value:Boolean):void
+ {
+ WizardModel(model).activateEffect = value;
+ }
+
+ /**
* The HTML string to display in the
org.apache.royale.jewel.TitleBar.
*
* @langversion 3.0
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardContent.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardContent.as
index 987fe69..6bc27be 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardContent.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardContent.as
@@ -23,7 +23,6 @@ package org.apache.royale.jewel
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
}
- import org.apache.royale.jewel.Container;
import org.apache.royale.jewel.supportClasses.ISelectableContent;
/**
@@ -36,7 +35,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class WizardContent extends Container
+ public class WizardContent extends Group
{
/**
* constructor.
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
index 801898e..6e98b20 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
@@ -18,6 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
+ // COMPILE::JS
+ // {
+ // import org.apache.royale.utils.css.transitionEventAvailable;
+ // }
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.models.WizardModel;
import org.apache.royale.jewel.beads.models.WizardStep;
@@ -95,9 +99,17 @@ package org.apache.royale.jewel
{
super();
- typeNames = "jewel section wizardpage";
+ typeNames = "jewel wizardpage";
+
+ // COMPILE::JS
+ // {
+ // transitionEvent = transitionEventAvailable(this);
+ // }
}
+ // COMPILE::JS
+ // private var transitionEvent:String;
+
/**
* @royalesuppresspublicvarwarning
*/
@@ -146,6 +158,11 @@ package org.apache.royale.jewel
public function addWizardListeners(wizard:Wizard):void
{
this.wizard = wizard;
+ model = wizard.getBeadByType(WizardModel) as
WizardModel;
+ if(model.activateEffect)
+ {
+ addClass("transitions");
+ }
wizard.addEventListener("goToPreviousStep",
goToPreviousStepHandler);
wizard.addEventListener("goToNextStep",
goToNextStepHandler);
addEventListener("showPreviousButtonChange",
WizardView(wizard.view).showPreviousButtonChangeHandler);
@@ -169,11 +186,11 @@ package org.apache.royale.jewel
*/
protected function goToPreviousStepHandler(event:Event):void
{
- var model:WizardModel = (event.target as
Wizard).getBeadByType(WizardModel) as WizardModel;
if(model.currentStep.name == step.name)
{
dispatchEvent(new Event("exitPage"));
exitPage();
+ moveEffect(model.activateEffect, "slideRight",
true);
}
if(model.currentStep.previousStep == step.name)
{
@@ -181,9 +198,34 @@ package org.apache.royale.jewel
model.showNextButton = showNextButton;
dispatchEvent(new Event("enterPage"));
enterPage();
+ moveEffect(model.activateEffect, "slideLeft",
false);
+ }
+ }
+
+ public function moveEffect(activate:Boolean, direction:String,
addclass:Boolean = true):void
+ {
+ if(activate)
+ {
+ // COMPILE::JS
+ // {
+ // element.addEventListener(transitionEvent,
transitionendHandler);
+ // }
+ addclass ? addClass(direction) :
removeClass(direction);
}
}
+ // public function transitionendHandler(event:Event):void
+ // {
+ // if(event["propertyName"] == "opacity")
+ // {
+ // trace(event);
+ // COMPILE::JS
+ // {
+ // element.removeEventListener(transitionEvent,
transitionendHandler);
+ // }
+ // }
+ // }
+
/**
* exit page
*/
@@ -197,11 +239,11 @@ package org.apache.royale.jewel
*/
protected function goToNextStepHandler(event:Event):void
{
- var model:WizardModel = (event.target as
Wizard).getBeadByType(WizardModel) as WizardModel;
if(model.currentStep.name == step.name)
{
dispatchEvent(new Event("exitPage"));
exitPage();
+ moveEffect(model.activateEffect, "slideLeft",
true);
}
if(model.currentStep.nextStep == step.name)
{
@@ -209,6 +251,7 @@ package org.apache.royale.jewel
model.showNextButton = showNextButton;
dispatchEvent(new Event("enterPage"));
enterPage();
+ moveEffect(model.activateEffect, "slideRight",
false);
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as
index e5e4c97..72ddcfe 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as
@@ -63,7 +63,29 @@ package org.apache.royale.jewel.beads.models
_strand = value;
}
- private var _text:String;
+ private var _activateEffect:Boolean = true;
+ /**
+ * turn on/off the transition effects
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ [Bindable(event="activateEffectChange")]
+ public function get activateEffect():Boolean
+ {
+ return _activateEffect;
+ }
+ public function set activateEffect(value:Boolean):void
+ {
+ if(value != _activateEffect) {
+ _activateEffect = value;
+ dispatchEvent(new
Event('activateEffectChange'));
+ }
+ }
+
+ private var _text:String;
/**
* The title string for the org.apache.royale.jewel.Wizard.
*
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
index f81fe9b..9174ae4 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
@@ -304,8 +304,20 @@ package org.apache.royale.jewel.beads.views
*/
protected function stepChangeAction():void
{
- previousButton.visible = model.showPreviousButton &&
model.currentStep && model.currentStep.previousStep != null;
- nextButton.visible = model.showNextButton &&
model.currentStep && model.currentStep.nextStep != null;
+ model.currentStep.page.removeClass("slideLeft");
+ model.currentStep.page.removeClass("slideRight");
+
+ if(model.activateEffect) {
+ COMPILE::JS
+ {
+ previousButton.element.style.visibility =
model.showPreviousButton && model.currentStep && model.currentStep.previousStep
!= null ? "visible" : "hidden";
+ nextButton.element.style.visibility =
model.showNextButton && model.currentStep && model.currentStep.nextStep != null
? "visible" : "hidden";
+ }
+ } else {
+ previousButton.visible =
model.showPreviousButton && model.currentStep && model.currentStep.previousStep
!= null;
+ nextButton.visible = model.showNextButton &&
model.currentStep && model.currentStep.nextStep != null;
+ }
+
}
protected function setupContentAreaLayout():void
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
index 9c97c06..8fe2f99 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
@@ -22,7 +22,6 @@
// SectionContent variables
.jewel.section
- //padding: 40px
display: none
flex-flow: column nowrap
height: 100%
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
b/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
index b6260a2..b94aa23 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
@@ -22,20 +22,21 @@
// Wizard variables
.jewel
- .wizard
- .main
+ &.wizard
+ &.main
align-items: center
width: 100%
height: 100%
&.label
&.wizardTitle
-
-
- .precontent
+
+ &.precontent
+ position: relative
width: 100%
flex: 1 0
&.next, &.previous
+ z-index: 1
height: 100%
align-items: center
justify-content: center
@@ -44,9 +45,43 @@
.jewel.button
- .wizardcontent
+ &.wizardcontent
height: 100%
flex-grow: 100
+ position: inherit
+
+ &.wizardpage
+ position: absolute
+ top: 0px
+ bottom: 0px
+ width: 100%
+ display: none
+ // debug: border: 1px solid red
+
+ > *
+ margin: auto
+
+ &.is-selected
+ z-index: 1
+ display: block
+
+ &.transitions
+ opacity: 1
+ transform: translateX(0%)
+
+ &.transitions
+ opacity: 0
+ transition: transform .6s ease-out, opacity .6s ease-out
+ will-change: transform, opacity
+ transform: translateX(100%)
+ display: initial
+
+ &.slideLeft
+ transform: translateX(-100%)
+ &.slideRight
+ transform: translateX(100%)
+
+
j|Wizard
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.WizardView")
@@ -55,6 +90,12 @@ j|Wizard
IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.WizardModel")
IWizardContentArea: ClassReference("org.apache.royale.jewel.WizardContent")
+j|WizardContent
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
+ // IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+ // IViewportModel:
ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+
j|WizardPage
IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.NoViewport")
@@ -81,10 +122,3 @@ j|WizardPage
// j|WizardButtonItemRenderer
// IBeadController:
ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
-
-
-j|WizardContent
- IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
- IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
- IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
- IViewportModel:
ClassReference("org.apache.royale.html.beads.models.ViewportModel")
