You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/04/07 22:37:41 UTC
[royale-asjs] branch develop updated: jewel-wizard: add
transitions. use "activateEffect" new wizard property to turn on/off.
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 <ca...@apache.org>
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")