Toast for Framework7

I noticed that Framework7 lacks a component like this:

Toast plugin screenshot

So, in order to learn how to create a F7 plugin I did this little thing.

Check it out

How to use Toast

This is gonna be a no-brainer, trust me.

1) Add stylesheet to head

<link rel="stylesheet" href="toast.css"></link>

And add script after Framework7 script reference:

<script src="toast.js"></script>

2) Create a new instance

var app = new Framework7();
var toast = app.toast('Marked star', '<div>☆</div>', {})

As first parameter you set the message which gets displayed at the bottom. As 2nd parameter you have to set the icon. You can use free HTML here so set what ever you want (ASCii, Font-Icon, Images, SVG…). Third is reserved for options.

3) Now you can show or hide the box

// show
toast.show(true);

or

// hide
toast.show(false);

You’re done :D

Download on Github

Grab is here: https://github.com/valnub/Toast-for-Framework7

MIT License

Feel free to copy, modify, fork or do what ever you want :-)

Tindercards.js

I wanted to create a similar experience to those cards that you can swipe left and right in Tinder, but with web technology. So I did. There are already 2 libs that do this but they’re based on Ionic which I didn’t want to have a dependency on. Tindercards.js only requires jQuery and Hammer.js.

The result looks like this:

Video demo

On YouTube: https://youtu.be/LqZ3wqvvZwE

Screenshot

Tindercards.js demo screenshot

Live Demo

Works best on iPhone: http://www.timo-ernst.net/misc/tindercardsjsdemo/

Dependencides

Tested on

  • iOS Safari

API Documentation

There are just two components that you need. A prototype object called Tindercardsjs.card and a method called Tindercardsjs.render. The signatures are like this:

/**
 * Representation of 1 card on the stack.
 * This is a prototype object! Initialize with "new" keyword
 *
 * @param {String} cardid Pass a unique id for each card so you know later which card is which
 * @param {String} name The name of the person on the card
 * @param {String} description The description text of that person
 * @param {String} imgpath The path to the img
 */
Tindercardsjs.card(cardid, name, description, imgpath)
 
/**
 * Renders the given stack into the given jQuery element.
 *
 * This is a method, just call it. Parameter "cards" must be an
 * array of Tindercardsjs.card
 *
 * @param {Array} cards An array of cards (@see Tindercardsjs.card)
 * @param {jQuery} target The target in which the stack should be rendered to
 * @param {function} onSwiped Callback function when swipe has occurred. Will pass an event object as parameter with properties event.cardid (the card id), event.card (The jQuery object that contains the card dom element) and event.direction ('left' or 'right').
 */
Tindercardsjs.render(cards, target, onSwiped)

How to use

  1. Make sure you have hammer.js und jQuery referenced
  2. Then, add tindercards.js from /lib
  3. Initialize like this:
var cards = [
  new Tindercardsjs.card(2, 'Geordi Laforge', 'I like big butts', 'gfx/pics/01.jpg'),
  new Tindercardsjs.card(1, 'Agro Picard', 'Hates Klingons, likes beer.', 'gfx/pics/02.jpg'),
  new Tindercardsjs.card(0, 'Jean-Luc, Worf & William', 'Swipe right if you also like funny hats like us :D', 'gfx/pics/03.jpg')
];

And pass them to Tindercards.js like this:

Tindercardsjs.render(cards, $('#main'), function (event) {
  console.log('Swiped ' + event.direction + ', cardid is ' + event.cardid + ' and target is:');
  console.log(event.card);
});

The stack will then be rendered to a HTML container that has id “main”. You can of course change that to some other name if you want.

Important

The html container (in this case #main) should have either position:absolute or position:relative!

Download lib & example code

Grab it on GitHub

A movie-list demo app built with Framework7 and Angular

In my last post I created a template for Framework7 based on TypeScript and Angular. Since Angular is still such a big hype and there doesn’t seem to be any examples of Framework7 with Angular, I decided to create a little demo application that demonstrates Angular’s data binding technique with TypeScript on top of Framework7. This demo will display lists of upcoming and current movies in theaters. Tapping on a movie will show additional information. The result looks like this:

Screenshot

Framework7 with Angular movie list demo

Demo

Check it out here: http://www.timo-ernst.net/misc/f7angulardemo/

Code explanation

Let’s dive into the code. I’ll explain piece by piece what I did. At the bottom of this post you can download the full source as a zip file.

The view

To build this, I simply saved all movie data into a model “movies” and bound that with Angular expression to the view. In order to not repeat to many list item elements I used ng-repeat:

<ul>
  <li class="ft-movielist-item" ng-repeat="movie in movies">
    <a href="#detailsPage" ng-click="events.onListItemClicked(movie)" class="item-link">
      <div class="item-content">
        <div class="item-media">
          <img class="ft-movielist-item-img" src="{{movie.posters.thumbnail}}">
        </div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">{{movie.title}}</div>
          </div>
          <div class="item-subtitle">{{movie.stars}}</div>
          <div class="item-text">{{movie.synopsis}}</div>
        </div>
      </div>
    </a>
  </li>
</ul>

TypeScript model definition

Since TypeScript is well.. strictly typed we first need to define how our model looks like:

  export interface Movie{
    id:String;
    synopsis:String;
    title:String;
    posters:MoviePosters;
    ratings:MovieRatings;
    release_dates:MovieReleaseDates;
    stars:String;
    date:String;
  }

Data binding

I bound an empty array of this type as a model via angular scope:

var movies:Movie[] = [];
$scope.movies = movies;

Get the data and update the model

To fill the model array with data, I start an ajax call and then copy the data from the json response into my model array:

var ajaxconfig:ng.IRequestConfig = {
  method: 'JSONP',
  url: (type == 'upcoming' ? this.API_URL_UPCOMINGLIST : this.API_URL_THEATERSLIST)
};
 
// Do ajax call to rotten api
this.$http(ajaxconfig)
  .success((data: Movies.AjaxResultData, status: number, headers: (headerName: string) => string, config: ng.IRequestConfig): void => {
    // Update angular model
    angular.copy(data.movies, this.movies);
  })
  .error((data: Movies.AjaxResultData, status: number, headers: (headerName: string) => string, config: ng.IRequestConfig): void => {
    alert('Failed connecting to rotten tomatoes db. Status code ' + status);
  });

And boom! That’s it. Angular will automatically display the data in the view. When ever you modify the model, Angular will sync this to HTML.

No jQuery. No DOM manipulation. Enjoy :-)

Full source code

Download on GitHub

Lessons learned

Angular will greatly help to reduce your amount of javascript code. TypeScript is cool because of strict typing and support of classes but it will make your code much much more complicated. The stuff that you saw here in this post is just a tiny small part of the whole thing which involves modules, type declarations, path references, compiler nagging and a lot more (check the full source to see the whole disaster). So at the end it eats up all the code that Angular has saved. Next time I use Angular I will stick with JavaScript and ditch TypeScript which could be interesting though for Node apps. I’ll try that next time maybe. Framework7 is still the best HTML-based iOS framework that I have ever seen. It’s super fast and perfectly mimics the look and feel of native apps. Make sure to check it out: http://www.idangero.us/framework7/

Framework7 template with TypeScript and AngularJS

Framework7

I am a big fanboy of Framework7, strict typing and MVC, so I tried to combine Framework7 with TypeScript and Angular with a flavor of SASS boiled on top of Grunt. The result is this ready-to-use template: Check on Github

How to build the Framework7 template

  1. No complicated bower or yeoman stuff. Just get from Github.
  2. Then, do npm install and then grunt compile to compile and copy everything from /src to /build. Default task for grunt is “watch” which you can use for auto-compile and -reload in the browser when you do changes in /src.

Example app

If you need an example check out this demo app that I created on top of this template. It simply lists current and upcoming movies from rottentomatoes by getting the data via Ajax using Angular’s $http service as well as its integrated data binding technique to render the view.

Framework7 with Angular movie list demo

Let me know if you have any feature requests for the template.