3 Replies Latest reply on Nov 4, 2016 2:25 AM by joel_pau

    How to avoid repeating code for multiple items?

    ChicoTom24 Level 1

      I'm using  Greensock in Edge Animate. I'm finding myself repeating code blocks to much.  (newbie coder)  Example is below.  Both blocks are identical except for the element names. Does anyone know the technique for dynamically building code blocks and incrementing the element names  (item2 -> item2 -> item3 -> ........)?

       

      Draggable.create(sym.$("item1"), {

      onDragEnd:function(e) {

      if (this.hitTest(sym.$("bucket_yellow"))) {

      sym.additemyellow("item1")

      } else if (this.hitTest(sym.$("bucket_gray"))) {

      sym.additemgray("item1")

      } else if (this.hitTest(sym.$("bucket_green"))) {

      sym.additemgreen("item1")

      }

      sym.getComposition().getStage().showitem("item2")

      }

      });

       

       

      Draggable.create(sym.$("item2"), {

      onDragEnd:function(e) {

      if (this.hitTest(sym.$("bucket_yellow"))) {

      sym.additemyellow("item2")

      } else if (this.hitTest(sym.$("bucket_gray"))) {

      sym.additemgray("item2")

      } else if (this.hitTest(sym.$("bucket_green"))) {

      sym.additemgreen("item2")

      }

      sym.getComposition().getStage().showitem("item3")

      }

      });

        • 1. Re: How to avoid repeating code for multiple items?
          resdesign Adobe Community Professional & MVP

          You could use an array with the names of your symbols or elements or since the name is the same you can increment with 'item' + i

          • 2. Re: How to avoid repeating code for multiple items?
            ChicoTom24 Level 1

            Thanks, I tried what you suggested, but it did not work.  Here is the code I used.  It does loop through the array.   However, the only output is the last item in the array (13). It does not write the code block for items 0-13. I need it to generate the required javascript code for all 14 items. Any advice is appreciated.

             

            var j = 0

            for (; j < 14; ) {

              k = j+1

                thesym = "item"+j

              Draggable.create(sym.$(thesym), {

            onDragEnd:function(e) {

            if (this.hitTest(sym.$("bucket_yellow"))) {

              sym.additemyellow(thesym)

              sym.getComposition().getStage().showitem(k)

            } else if (this.hitTest(sym.$("bucket_gray"))) {

              sym.additemgray(thesym)

              sym.getComposition().getStage().showitem(k)

            } else if (this.hitTest(sym.$("bucket_green"))) {

              sym.additemgreen(thesym)

              sym.getComposition().getStage().showitem(k)

            }  else if (this.hitTest(sym.$("bucket_final"))) {

              sym.additemfinal(thesym)

            }

            }

            });

            j++

            }

            • 3. Re: How to avoid repeating code for multiple items?
              joel_pau Level 5

              Thanks, I tried what you suggested, but it did not work.  Here is the code I used.  It does loop through the array.   However, the only output is the last item in the array (13). It does not write the code block for items 0-13. I need it to generate the required javascript code for all 14 items. Any advice is appreciated.

               

              Your issue is about closure. With your for loop, you have to use an Immediately-invoked function expression - Wikipedia

              There will be 14 events.

              See: JavaScript closures in for-loops | mennovanslooten.nl

              and the paragraph "Creating closures in loops: A common mistake" in Closures - JavaScript | MDN

               

              Note: As drag events are natives (HTML 5), you can write drag events as click events using Edge Animate.

              dragFile.png