0

I'm using MetroJs and I've used an individual function to initialize each tile because I only ever want to see the back of one tile at a time. So with this code, each tile fully animates, showing the back and front, and then pauses for a while so that the other tiles do the same.

Anyway, that isn't important, as you can see my code is pretty inefficient now with a lot of repeat code. How do you think I could improve this to make it a lot shorter? I've thought about using a loop to initialise them all but I'm not sure how to go about it.

The reason I have used individual initialisers is that I need to create a count which applies to each tile, but I cant create the count variable from within .liveTile()

JS:

var count1 = 0;
var count2 = 0;

$('.live-tile.one').liveTile({
    animationComplete:function() {
        count1++;
        if (count1 == 2) {
            $('.live-tile.one').liveTile("restart", 10000);
            count1 = 0;
        }
    }
});

$('.live-tile.two').liveTile({
    animationComplete:function() {
        count2++;
        if (count2 == 2) {
            $('.live-tile.two').liveTile("restart", 10000);
            count2 = 0;
        }
    }
});

One way to make the count variables a bit cleaner could be to move each initialisation into a function, which creates the count variable inside that function, but again then I would need to make the rest a bit more efficient.

germainelol
  • 3,231
  • 15
  • 46
  • 82

1 Answers1

0

Can you add data-count='0' to .live-tile items?

$('.live-tile').liveTile({
    animationComplete:function() {
        var count = parseInt($(this).data('count'));
        count++;
        $(this).data('count', count);
        if (count == 2) {
            $(this).liveTile("restart", 10000);
            $(this).data('count', '0');
        }
    }
});

If not, you can also do this:

var counts =[0, 0, 0, 0, 0;]

$('.live-tile').liveTile({//.find will let you access all divs (.one, .two, etc.) at once that .live-tile contains
    animationComplete:function() {
        var index = $(this).index();//the index of div item (among the div items of .live-tile, it will be 0 for .one, 1 for .two, 2 for .three, etc.
        var count = counts[index];//bring the current value based on the index
        count++;//increase it 
        counts[index] = count;//restore it to the correct index
        if (count == 2) {
            $(this).liveTile("restart", 10000);
            counts[index] = 0);//reset
        }
    }
});
renakre
  • 8,001
  • 5
  • 46
  • 99
  • I don't think so, I added in the count so that I can manually keep track of how many times I iterate through the back/front faces of the tiles. I only want to show the back for a short amount of time you see. – germainelol May 05 '15 at 03:27
  • excellent, the second code worked great. Could you explain a little how the `find` and `index` are working? That'd be very helpful. – germainelol May 05 '15 at 03:32
  • @germainelol can you check my explanations? please do not forget to mark it as correct answer if it helped. – renakre May 05 '15 at 03:36
  • It actually works without the `.find` but doesn't work with it as it doesn't initialize the `liveTile's`. – germainelol May 05 '15 at 03:39
  • Thanks. How does it decide the order of the tiles in the `index`? Is it just created based on the order it is written in the HTML? So it takes in the first `live-tile` it finds and adds it to the index and so on. – germainelol May 05 '15 at 03:51
  • Yes that is correct, it creates index based the number of .live-tile, it starts from 0, the first item, until the total number of items -1, which is the last item – renakre May 05 '15 at 03:54