Implement Android Toast notifications

[jadjoubran]

Hey

There's this repo that replicates Android Toasts using HTML5 and Javascript ( no jQuery/zepto) dependency. I think it fits well with Fries.

https://github.com/jadjoubran/Android-Toast

[jaunesarmiento]

I'll have a look at it. Thanks bud!

[jaunesarmiento]

Hi @jadjoubran, I noticed two things on your implementation of Toast notifications:

• Toast notifications are always centered unless otherwise stated in the code via the Gravity and x and y offset, which your implementation is having a problem with. When you resize the browser, the position of the notification gets broken.
• Almost every box UI element in Android has a border-radius of 2px. Yours has 3px which makes the Toast look a bit awkward.

A few things you might want to consider:

• Convert your codebase into a class so we can call it as var toast = new Toast();
• Add options where one can set the content, position, and the duration of the Toast notification.

Nonetheless, great suggestion. I wasn't really thinking of adding Toast notifications since you can just use the PhoneGap plugin which is implemented natively.

[jadjoubran]

Hi @jaunesarmiento , thanks for taking a look at Android-Toast!

• Toast notifications are always centered in Android Devices, and you can't give it a fixed width because you want to support all device sizes. And if you give it a % width, you cannot center it with css. Hence the position gets broken on resize.
• I'll fix the border-radius, thanks!
• I'll convert it into a class
• Why would you want to set the position? it should always appear at the same position. The content and duration are good options.
• You cannot use Toast plugin using PhoneGap Build, only if you have a local setup for phoneGap

[jaunesarmiento]

• I'm pretty sure I saw a JavaScript library that centers just about anything. I'll post it here when I find it. I think this will be the optimal solution to this centering problem since you'll be using JS anyway.
• Toasts can be positioned at the top of the screen if I remember correctly.
• Oh, I wasn't aware that it can't be used if you're building through PhoneGap Build.

Then I guess this can be added to the next release. :)

[jadjoubran]

Hey @jaunesarmiento I updated the repository, kindly check it and let me know what you think!

[jaunesarmiento]

Looks great! :)

[aboudard]

@jadjoubran : Looks nice, fading effect quite close to the original Toast. I see the 5px padding in the box, did you test on different resolutions ? :+1:

[jadjoubran]

@aboudard Does the padding make it look awkward? I tested in Samsung Galaxy S2, S3 & S4 and Nexus 4 Let me know if you have any comments

[aboudard]

@jadjoubran oh no it looks great, I just wonder if the render is not too different on small resolutions and big ones, I'm testing right now :)

[jadjoubran]

@aboudard okay great, let me know. We can fix it using CSS3 media queries to cater for small devices

[jadjoubran]

Hey @jaunesarmiento are you going to include this in your next release? Let me know if I can help in that!

[jaunesarmiento]

Yes, I'll be including this on version 1.0.1. :)

There are a few things I want changed before I include this as a component though:

1. I'd like this to follow the CamelCase coding style in JavaScript. So Android_Toast should be converted to AndroidToast and methods like set_duration should be setDuration. I want this implemented to provide coding style consistency.
2. In Fries, CSS classes and ids that have more than one word are separated by a dash -.
3. And further testing on other devices. :)

[aboudard]

@jadjoubran About the Toast code, I would recommend the use of literal object as parameters, easy to implement and much easer to code with.

in the Class you would find something like that :

function Android_Toast(){

this.timeout_id = null;
this.duration = 3000;
this.content = '';
this.position = 'bottom';
for (var n in arguments[0]) { 
    this[n] = arguments[0][n];
    console.log(arguments[0][n]); // please remove me ;)
}

}

the call would look like that :

var toast = new Android_Toast({content: 'Hello Fries', duration: 5000});

what do you think ?

[jaunesarmiento]

Or the following:

// If we're using fries namespace, do:
// var fries = window.fries || {};
(function () {
  var Toast = function (options) {
    this.init(options);
  }

  Toast.prototype = {
    _defaults: {
      // default options here
    },
    init: function (options) {
      // merge user options with defaults
      // show the Toast
      // then hide Toast after a while
      this.destroy(); // then destroy it
    },
    destroy: function () {
      // destroy Toast here
    }
  };

  // Then expose it in window or Fries namespace
  window.Toast = Toast;
  // or fries.Toast = Toast;
}());

[aboudard]

Even better with the prototype ! I didn't mean to refactor the whole Toast :)

[jadjoubran]

Hey! Thank you for your feedback. However can you please post this as an issue on the project itself? Just decide which one is better and I'll implement it as soon as possible

[aboudard]

@jadjoubran : it's done !

[jadjoubran]

Hey @jaunesarmiento I updated the code and wrapped the JS into an IIFE. Regarding the coding style, shall I do a new branch to provide you the designed coding style? Please advise since it's currently my first contribution to an open source project. Thanks!