0 Replies Latest reply on Apr 16, 2013 2:32 PM by AmintaAdobe

    Update dinamically animations in Wordpress

    AmintaAdobe Level 1

      Hi folks!

       

      My goal: you can see here (http://www.prolocoregionefvg.it/tutte-le-pro-loco, a website made by me in Wordpress)  an animation I made in Edge to order on a map the various culturale pools ("Consorzi") of the Friuli Venezia Giulia Region. Clicking on each of the 11 pools (in 11 different colors), you can get an animation that shows you a table with the associations ("Pro loco") that joined that pool.

       

      Ok, now this tabel was made by me by hand, writing Html code, that - as Joel Paul brilliantly explained here (http://forums.adobe.com/message/5139190#5139190) - I've inserted in Edge Animate as a var.

       

      For example, the purple pool ("Consorzio Arcometa") code is:

       

      var ArcometaTable = '<table>'

        +'<tr>'

          +'<th scope="col">Comune</th>'

          +'<th scope="col">Pro loco</th>'

          +'<th scope="col">Informazioni</th>'

        +'</tr>'

        +'<tr id="primariga">'

          +'<td class="colonnacomune prima">Castelnovo del Friuli</td>'

          +'<td class="colonnaproloco prima">Val Cosa</td>'

          +'<td class="colonnainfo prima"><a href="mailto:pro.castelnovo@hotmail.it">pro.castelnovo@hotmail.it</a><br /><a href="http://www.provalcosa.it/">www.provalcosa.it</a></td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Clauzetto</td>'

          +'<td class="colonnaproloco">Clauzetto</td>'

          +'<td class="colonnainfo"><a href="mailto:prolococlauzetto@gmail.com">prolococlauzetto@gmail.com</a></td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Meduno</td>'

          +'<td class="colonnaproloco">Meduno</td>'

          +'<td class="colonnainfo"> </td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">S. Giorgio della Richinvelda</td>'

          +'<td class="colonnaproloco">S. Giorgio della Richinvelda</td>'

          +'<td class="colonnainfo"><a href="mailto:prolocorichinvelda@gmail.com">prolocorichinvelda@gmail.com</a></td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Sequals</td>'

          +'<td class="colonnaproloco">Sequals</td>'

          +'<td class="colonnainfo"><a href="mailto:pro.sequals@alice.it">pro.sequals@alice.it</a></td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Spilimbergo</td>'

          +'<td class="colonnaproloco">I Due Campanili</td>'

          +'<td class="colonnainfo"><a href="mailto:info@iduecampanili.org">info@iduecampanili.org<br /></a><a href="http://www.iduecampanili.org/">www.iduecampanili.org</a></td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune"> </td>'

          +'<td class="colonnaproloco">Spilimbergo</td>'

          +'<td class="colonnainfo"> </td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Tramonti di Sopra</td>'

          +'<td class="colonnaproloco">Tramonti di Sopra</td>'

          +'<td class="colonnainfo"><a href="mailto:protramontidisopra@virgilio.it">protramontidisopra@virgilio.it</a> <a href="http://www.protramontidisopra.it/">www.protramontidisopra.it</a></td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Tramonti di Sotto</td>'

          +'<td class="colonnaproloco">Val Tramontina</td>'

          +'<td class="colonnainfo"><a href="mailto:info@protramontidisotto.com">info@protramontidisotto.com</a></td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Travesio</td>'

          +'<td class="colonnaproloco">Travesio</td>'

          +'<td class="colonnainfo">protravesio@libero.it</td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune">Vito d’Asio</td>'

          +'<td class="colonnaproloco">Alta Val d\'Arzino</td>'

          +'<td class="colonnainfo"> </td>'

        +'</tr>'

        +'<tr>'

          +'<td class="colonnacomune"> </td>'

          +'<td class="colonnaproloco">Valle d\'Arzino</td>'

          +'<td class="colonnainfo">info@prolocoaltavaldarzino.it</td>'

        +'</tr>'

      +'</table>'

       

      Ok, all it works.

       

      BUT....

       

      WHAT IF I WANT THAT THE EDITORS OF THE SITE CAN MODIFY THE SINGLE TABLE IN A NORMAL WORDPRESS PAGE, AND ALL MODIFIES APPLY TO THE EDGE ANIMATION AUTOMATICALLY?

       

      I'VE FOUND A SOLUTION! THE "TEMPLATING", WITH PURE TOOL: http://beebole.com/pure/

       

      So, with the help of the authors of "PURE", I've written this code:

       

       

      <html>

      <head>

      <script src="jquery.js"></script>

      <script src="pure.js"></script>

      </head>

      <body>

      <div class="template">

            Hello  <span></span>

                </div>

      <script>

       

       

      $.ajax({

        dataType: "jsonp",

        url:"http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consor zio-arcometa",

        success: function(json){

       

       

          console.log(json);

          var directive = {'.@span' : 'content' },

              compiledTemplate = $(json.page.content).compile(directive);

          $('div.template').render(json, compiledTemplate);

       

       

        }

      });

       

         </script>

          </body>

        </html>

       

       

      OK, the "hearth" of this code is:

       

       

       

      $.ajax({

        dataType: "jsonp",

        url:"http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consor zio-arcometa",

        success: function(json){

       

       

          console.log(json);

          var directive = {'.@span' : 'content' },

              compiledTemplate = $(json.page.content).compile(directive);

          $('div.template').render(json, compiledTemplate);

       

      COMMENTED ->

       

      1)

      $.ajax({

        dataType: "jsonp",

        url:"http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consor zio-arcometa",

        success: function(json){ )

        ---->  An API plugin transforms my webpage in a Json file and then starts a function

      2)

         var directive = {'.@span' : 'content' },

              compiledTemplate = $(json.page.content).compile(directive);

          $('div.template').render(json, compiledTemplate);

      -----> insert the content of the Json property 'content' (that is: the html code of the tabel) in the span node of "div.template

       

      As you can see if you tries to copy/past this code, all WORKS!

       

      My original Html code:

       

      <div class="template">

            Hello  <span></span>

                </div>

       

       

      is now replaced by the table modified by editors in Wordpres!!!!

       

      So, what it lacks?

       

       

      IT LACKS THE LAST BUT MOST IMPORTANT STEP: HOW TO INSERT IT IN THE EDGE ANIMATE CODE?

       

      I NEED to define my 11 tables as VARS to make my animation works, so the problem is:

       

      HOW TO MAKE THAT

       

      var ArcometaTable = THE RESULT OF

         compiledTemplate = $(json.page.content).compile(directive);

          $('div.template').render(json, compiledTemplate);

      ?????

       

      Now, my tables go - in Edge - in an element contained in a symbol:

       

       

      var text = sym.getSymbol("Tabella").$("Text");

      text.html(table);

       

      where "table" is the variable I pass (in this case: "ArcometaTable")

       

       

      It's not easy for me but I hope that you members and experts of this Forum - with your skills - can make to work this, that can be VERY USEFUL TO ALL USERS that want UPADATE DINAMICALLY the texts of their animations!!!!!

       

       

      Here I attach the full Edge Animate project files with the "static" version of the tables (I've only addedd "pure.js" library with Yepnope).

       

      www.terredainventare.it/Mappa700ResponsiveTouch.zip

       

       

      Many thanks to all for the attention!

       

      Davide