jQuery Emoji-picker και πρόβλημα σε κινητές συσκευές (και emulators)

[philos]

Χρησιμοποιώ αυτό το jquery plugin που με κόπο κατάφερα να κάνω λειτουργικό φορτώνοντας τα smilies της πλατφόρμας (στη demo page πρέπει πρώτα να πατήσεις το Create και μετά όσες φορές το Toggle).

Παίζει κανονικά σε desktop browsers, όμως από κινητά εμφανίζει πρόβλημα. 🙄

Πχ με τον Chrome (responsive mode iPhone X) βλέπω αυτό στην κονσόλα.

Ο κώδικας λάθους εμφανίζεται εδώ:

    iconClicked : function() {
      if ( this.$picker.is(':hidden') ) {
        this.show();
        if( this.$picker.find('.search input').length > 0 ) {
          this.$picker.find('.search input').focus();
        }
      } else {
        this.hide();
      }
    },

Καμιά ιδέα προς διόρθωση; Δεν είναι τόσο γνωστό plugin και δε μπορώ να βρω λύση στο Google.

Επεξ/σία 22 Ιουλίου 2018 από philos

[vadou]

Το log σου λέει ότι δεν έχει οριστεί το "this.$picker". Για να δημιουργηθεί πρέπει να πατήσεις μια φορά το create και μετά δουλεύει το toggle μια χαρά. Αν πατήσεις destroy, θα πρέπει να το ξαναδημιουργήσεις με το create για να ξαναδουλέψει το toggle. Εκτός και αν εννοείς κάτι άλλο που δεν πρόσεξα.

Στην ουσία φαντάζομαι (δε διάβασα το documentation γι'αυτό και λέω φαντάζομαι), το create στο έχει βάλει για να δεις πώς θα κάνεις initialise το emojipicker και το destroy για να δεις πώς θα το αφαιρέσεις όταν και αν σου χρειαστεί κάτι τέτοιο, οπότε δες το source code στη σελίδα του demo  για να καταλάβεις πώς θα το κάνεις να δουλέψει αν αυτό ψάχνεις.

Και για του λόγου το αληθές:

 

// Όταν πατήσεις το create button, κάνε initialize το emojiPicker
$('#create').click(function(e) {
  e.preventDefault();
  $('#text-custom-trigger').emojiPicker({
    width: '300px',
    height: '200px',
    button: false
  });
});

// Όταν πατήσεις το toggle button, άνοιξε/κλείσε το emojiPicker
// Προφανώς για να δουλέψει αυτό, πρέπει πρώτα να έχει γίνει initialize
$('#toggle').click(function(e) {
  e.preventDefault();
  $('#text-custom-trigger').emojiPicker('toggle');
});

// Όταν πατήσεις το destroy button κατέστρεψε το emojiPicker
$('#destroy').click(function(e) {
  e.preventDefault();
  $('#text-custom-trigger').emojiPicker('destroy');
})

 

Επεξ/σία 22 Ιουλίου 2018 από vadou
demo code

[philos]

Κι όμως το πατάω το Create και μετά Toggle και βγαίνει το πρόβλημα.

 

Το θέμα είναι ότι με κανονικό browser δεν υπάρχει πρόβλημα. Αν βάλω τον Chrome σε responsive mode (πχ iPhone X) δεν δουλεύει και βγάζει το σφάλμα που επισύναψα. Το αναφέρω και ψάχνω τη λύση καθώς όντως στις κινητές συσκευές δεν δουλεύει ο emoji picker. Απλά το πιάνω από chrome responsive mode για να βρω τη λύση.

[vadou]

Oh, λοιπόν, 1 λάθος το ότι προσπάθησες να κάνεις debug σε mobile από desktop browser. Δεν γίνεται έτσι.
2 ότι δεν διάβασες τον κώδικα του plugin, νομίζω θα το έβρισκες πολύ γρήγορα.

// Do not enable if on mobile device (emojis already present)
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  this.init();
} else {
  this.isMobile = true;
}

 

Καλά, όχι και πολύ γρήγορα τώρα που το ξανασκέφτομαι, απλά την ψιλιάστικα και το βρήκα εγώ γρήγορα.

Αν δεν έγινα κατανοητός, θα βρεις τον κώδικα του plugin στο:
https://github.com/wedgies/jquery-emoji-picker/blob/master/js/jquery.emojipicker.js
Στη γραμμή 67, έχει τον κώδικα που σου παρέθεσα παραπάνω, όπου πολύ απλά, επειδή στα mobile Os's υπάρχουν ήδη τα emojis, επιλέγει να μην ενεργοποιήσει το plugin. Αν αφαιρέσεις αυτό τον έλεγχο, θα δουλεύει παντού.

Επεξ/σία 23 Ιουλίου 2018 από vadou

[philos]

Πωπω δίκιο έχεις, δεν το πήρε το μάτι μου ότι δεν τρέχει το init() σε mobile!

Η πλάκα είναι ότι χρησιμοποιώ αυτό το plugin ως smilies picker σε ένα forum (οπότε φορτώνω τα smilies / gifακια), οπότε δεν ισχύει - για μένα - η λογική "τα κινητά ενσωματώνουν emoji picker οπότε μη τον φορτώνεις".

Ευχαριστώ και πάλι. 😁