Device detection within a Views didInsertElement function


#1

I had to make some simple slideDown animation within a View (that should ONLY run on desktop) and was wondering if there’s a “better” way than this approach.

 //this goes in the router, i'm aware globals are bad.
_device_ = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); 
   
App.IndexView = Em.View.extend({
didInsertElement: function() {
    if(!__device__){  
      this.$('#alertbar').hide().fadeIn(300);
    }    
   }
 });

Thanks for the feedback.


#2

Seems basically fine to me, Brado. You could also do the following:

_device_ = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); 

App.IndexView = Em.View.extend({ ... });

if (!__device__) {
  App.IndexView.reopen({
    didInsertElement: function() {
      this.$('#alertbar').hide().fadeIn(300);
    }
  });
}

The latter might be a little faster. You could benchmark, but I suspect it doesn’t make much of a difference. I would decide which reads better to you and is more maintainable and go with that.


#3

Oh, I like that idea (using .reopen), since I can isiolate all my desktop-only animations into 1 if block. Thx @lukemelia