JSFiddle - React, Tailwind, and code Playground
JavaScript
window.onload = function(){
//для работы с датами
function dataToStr(_date){
var date = _date instanceof Date ? _date : new Date(_date);
return date.getDate() + '/' + date.getMonth() + '/' + date.getFullYear();
}
//псевдолокализация
function l10n(key){
return l10Keys[key] || key;
}
var l10Keys = {
youFriendsList: 'список ваших друзей',
sendMessage: 'отправить сообщение'
},
//описываем шаблоны
templates = {
//основа
basis: function(){
return [
//локализация
{c: 'header', n: 'header', t: l10n('youFriendsList')},
{c: 'content-view', n: 'contentView'},
{c: 'footer', t: '© SoftWear LLC'}
];
},
//статический микрошаблон используемый другими шаблонами
icon: {c: 'icon'},
//кнопка
button: function(data){
return {c: 'button', t: data.t, n: data.n, C: templates.icon, a: data.a};
},
//список друзей
friendsList: function(friends){
var items = [],
i = 0,
iMax = friends.length;
//чистый js в шаблонах (можно и посортировать, но но не будем усложнять)
for(; i < iMax; i += 1){
items[i] = {c: 'friend', C: [
{e: 'a', h: 'http://facebook.com/' + friends[i].facebookId, c: 'friend-avatar-wrapper', C:
//максимум результата из минимум данных
{e: 'img', c: 'friend-avatar', S: 'http://graph.facebook.com/' + friends[i].facebookId + '/picture?width=200&height=200'}
},
{c: 'friend-name', t: friends[i].firstName + ' ' + friends[i].lastName},
//работа с датами
{c: 'friend-birthday', t: dataToStr(friends[i].birthday)},
//шаблоны в шаблонах
templates.button({n: 'sendMessage', t: l10n('sendMessage'), a:...