Documentation for Section Animations

Author: lsimone

samples/templates/refresh/animate/AnimatedRefresh.tpl

@@ -0,0 +1,75 @@
+{Template {
+  $classpath: "samples.templates.refresh.animate.AnimatedRefresh",
+  $hasScript: true,
+  $css: ["samples.templates.refresh.animate.RefreshCSS"]
+}}
+
+    {macro main()}
+
+
+    {@aria:Button {
+        id : "first",
+        label : "Change data with animation",
+        onclick : "changeAnimating"
+    } /}
+
+    {@aria:Button {
+        id : "second",
+        label : "Change data without animation",
+        onclick : "changeNotAnimating"
+    } /}
+
+    {@aria:Button {
+        id : "third",
+        label : "Manual Refresh",
+        onclick : "manualRefresh"
+    } /}
+
+    {@aria:Button {
+        id : "fourth",
+        label : "Change animation",
+        onclick : "changeAnimation"
+    } /}
+
+    {section {
+        id : "autoSection2",
+        macro : "myMacro2",
+        cssClass : "page text-center2",
+        bindRefreshTo : [{
+            inside : data,
+            to : "test",
+            recursive : true
+        },{
+            inside : data,
+            to : "test2",
+            recursive : true,
+            animate : false
+        },{
+            inside : data.animation,
+            to : "animateIn",
+            recursive : true,
+            animate : false
+        }],
+        bind : {
+            animation : {
+                to : "animation",
+                inside : data
+            }
+        },
+        type : "div"
+    }/}
+
+        <div class="log" id="log" > REFRESH LOG: </div>
+
+        {/macro}
+
+
+    {macro myMacro2 ()}
+        <h1>ANIMATING THIS SECTION using <b>${data.animation.animateIn}</b></h1>
+        <p><i>test</i> is bound to an animated refresh</p>
+        <p><i>test2</i> is bound to a not animated refresh</p>
+        <h2>test = ${data.test}</h2>
+        <h2>test2 = ${data.test2}</h2>
+    {/macro}
+
+{/Template}

samples/templates/refresh/animate/AnimatedRefreshScript.js

@@ -0,0 +1,48 @@
+Aria.tplScriptDefinition({
+    $classpath : 'samples.templates.refresh.animate.AnimatedRefreshScript',
+    $prototype : {
+        $dataReady : function () {
+
+            this.data = {
+                test : 0,
+                test2 : 0,
+                animation : {
+                    animateOut : "slide left",
+                    animateIn : "slide left"
+                }
+            };
+
+        },
+
+        $afterRefresh : function () {
+            var log = Aria.$window.document.getElementById("log");
+            log.innerHTML += "<p>" + "$afterRefresh" + "</p>";
+        },
+
+        $onRefreshAnimationEnd : function () {
+            var log = Aria.$window.document.getElementById("log");
+            log.innerHTML += "<p>" + "$onRefreshAnimationEnd" + "</p>";
+        },
+
+        changeAnimating : function (evt) {
+            aria.utils.Json.setValue(this.data, "test", this.data.test + 1);
+        },
+
+        changeNotAnimating : function (evt) {
+            aria.utils.Json.setValue(this.data, "test2", this.data.test2 + 1);
+        },
+
+        manualRefresh : function (evt) {
+            this.data.test = -1;
+            this.$refresh({
+                section : "autoSection2",
+                animate : false
+            });
+        },
+
+        changeAnimation : function (evt) {
+            var newAnim = (this.data.animation.animateIn == "slide left") ? "fade" : "slide left";
+            aria.utils.Json.setValue(this.data.animation, "animateIn", newAnim);
+        }
+    }
+});

samples/templates/refresh/animate/RefreshCSS.tpl.css

@@ -0,0 +1,20 @@
+{CSSTemplate {
+	$classpath : "samples.templates.refresh.animate.RefreshCSS"
+}}
+
+  {macro main ()}
+
+    .page  {
+      position: absolute;
+      border: 1px solid red;
+      padding: 10px;
+    }
+
+    .log  {
+      top: 200px;
+      position: absolute;
+    }
+
+{/macro}
+
+{/CSSTemplate}

samples/templates/refresh/animate/sample.yml

@@ -0,0 +1,15 @@
+title: Animated Refresh
+template: samples.templates.refresh.animate.AnimatedRefresh
+description: It shows how the Animated Refresh works in aria templates.
+sources:
+- AnimatedRefresh.tpl
+- AnimatedRefreshScript.js
+- RefreshCSS.tpl.css
+data:
+  teams:
+  - name: 'England'
+    score: 0
+  - name: 'France'
+    score: 0
+
+categories: Templates/Refresh

snippets/templates/refresh/Refresh.tpl

@@ -31,10 +31,48 @@
         }/}
         ////#sectionDefTwo
 
+        ////#sectionDefThree
+        {section {
+            id : "autoSection2",
+            macro : "mySectionMacro",
+            bindRefreshTo : [{
+                inside : data.myContainer,
+                to : "myFirstValue",
+                recursive : true
+            },{
+                inside : data.myContainer,
+                to : "mySecondValue",
+                recursive : true,
+                animate : false
+            }],
+            bind : {
+                animation : {
+                    to : "animation",
+                    inside : data
+                }
+            },
+            type : "div"
+        }/}
+        ////#sectionDefThree
+
+        ////#sectionDefFour
+        data.myContainer.animation = {
+            animateOut : "slide left",
+            animateIn : "slide left"
+        }
+        ////#sectionDefFour
+
+        ////#sectionDefFive
+        this.$refresh({
+            section : "autoSection2",
+            animate : false
+        });
+        ////#sectionDefFive
+
     {/macro}
 
     {macro mySectionMacro()}
     {/macro}
 
 
-{/Template}
+{/Template}