From a8e517a788e2811c7e89e4cc9f2d6e08062ab91a Mon Sep 17 00:00:00 2001 From: lsimone Date: Fri, 28 Nov 2014 22:47:42 +0100 Subject: [PATCH] Documentation for Section Animations --- .../refresh/animate/AnimatedRefresh.tpl | 75 +++++++++++++++++++ .../refresh/animate/AnimatedRefreshScript.js | 48 ++++++++++++ .../refresh/animate/RefreshCSS.tpl.css | 20 +++++ samples/templates/refresh/animate/sample.yml | 15 ++++ snippets/templates/refresh/Refresh.tpl | 40 +++++++++- 5 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 samples/templates/refresh/animate/AnimatedRefresh.tpl create mode 100644 samples/templates/refresh/animate/AnimatedRefreshScript.js create mode 100644 samples/templates/refresh/animate/RefreshCSS.tpl.css create mode 100644 samples/templates/refresh/animate/sample.yml diff --git a/samples/templates/refresh/animate/AnimatedRefresh.tpl b/samples/templates/refresh/animate/AnimatedRefresh.tpl new file mode 100644 index 0000000..20c23e5 --- /dev/null +++ b/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" + }/} + +
REFRESH LOG:
+ + {/macro} + + + {macro myMacro2 ()} +

ANIMATING THIS SECTION using ${data.animation.animateIn}

+

test is bound to an animated refresh

+

test2 is bound to a not animated refresh

+

test = ${data.test}

+

test2 = ${data.test2}

+ {/macro} + +{/Template} diff --git a/samples/templates/refresh/animate/AnimatedRefreshScript.js b/samples/templates/refresh/animate/AnimatedRefreshScript.js new file mode 100644 index 0000000..454e984 --- /dev/null +++ b/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 += "

" + "$afterRefresh" + "

"; + }, + + $onRefreshAnimationEnd : function () { + var log = Aria.$window.document.getElementById("log"); + log.innerHTML += "

" + "$onRefreshAnimationEnd" + "

"; + }, + + 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); + } + } +}); diff --git a/samples/templates/refresh/animate/RefreshCSS.tpl.css b/samples/templates/refresh/animate/RefreshCSS.tpl.css new file mode 100644 index 0000000..bcc135e --- /dev/null +++ b/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} diff --git a/samples/templates/refresh/animate/sample.yml b/samples/templates/refresh/animate/sample.yml new file mode 100644 index 0000000..923281b --- /dev/null +++ b/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 diff --git a/snippets/templates/refresh/Refresh.tpl b/snippets/templates/refresh/Refresh.tpl index 101cbdb..693e1d2 100644 --- a/snippets/templates/refresh/Refresh.tpl +++ b/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} \ No newline at end of file +{/Template}