yandex-shri-ekb · mayton · Nov 16, 2013 · Nov 16, 2013 · Nov 16, 2013 · Nov 16, 2013
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,254 @@
+body
+{
+    margin: 0 40px;
+
+    font: 14px/normal sans-serif;
+}
+
+
+.tabs
+{
+    margin: 10px 0 20px;
+    padding: 0;
+
+    list-style: none;
+}
+
+.tabs__tab
+{
+    display: inline;
+
+    margin: 0 15px 0 0;
+}
+
+
+.pictures__title
+{
+    margin: 0 0 20px;
+
+    font-size: 40px;
+    font-weight: 400;
+}
+
+.pictures__title:first-letter
+{
+    color: red;
+}
+
+.pictures__items
+{
+    margin: -10px -10px 80px;
+    padding: 0;
+
+    list-style: none;
+
+    text-align: justify;
+
+    font: 0/0 a;
+}
+
+.pictures__items:after
+{
+    display: inline-block;
+
+    width: 100%;
+    height: 0;
+
+    content: "";
+}
+
+
+.picture
+{
+    position: relative;
+
+    display: inline-block;
+
+    margin: 10px;
+
+    vertical-align: top;
+}
+
+.picture__link
+{
+    position: relative;
+    z-index: 1;
+
+    display: block;
+    overflow: hidden;
+
+    height: 100px;
+
+    cursor: pointer;
+}
+
+.picture__preview
+{
+    display: block;
+}
+
+.picture__info
+{
+    position: absolute;
+    top: -10px;
+    left: -10px;
+
+    display: none;
+
+    width: 100%;
+    padding: 120px 10px 10px;
+
+    text-align: left;
+
+    color: #fff;
+    background: #2b2b2b;
+    box-shadow: 0 2px 9px rgba(0,0,0, .6);
+
+    font: 12px/16px sans-serif;
+}
+
+.picture__title
+{
+    overflow: hidden;
+
+    margin: 0 0 5px;
+
+    text-overflow: ellipsis;
+}
+
+.picture_active_yes,
+.picture_hovered_yes
+{
+    position: relative;
+    z-index: 100;
+}
+
+.picture_active_yes .picture__info,
+.picture_hovered_yes .picture__info
+{
+    display: block;
+}
+
+
+.preview
+{
+    position: relative;
+
+    display: none;
+    overflow: hidden;
+
+    background: #2b2b2b;
+
+    font: 14px/normal sans-serif;
+}
+
+.preview__close
+{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    overflow: hidden;
+
+    height: 28px;
+
+    cursor: pointer;
+
+    color: #888;
+
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 28px;
+}
+
+.preview__close:hover
+{
+    color: #ddd;
+}
+
+.preview__slider
+{
+    margin: 10px 330px 10px 10px;
+
+    text-align: center;
+}
+
+.preview__info
+{
+    position: absolute;
+    top: 50px;
+    right: 10px;
+
+    width: 300px;
+
+    text-align: left;
+
+    color: #eee;
+}
+
+.preview__props
+{
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+}
+
+.preview__prop
+{
+    margin: 0 0 10px;
+}
+
+.preview__title
+{
+    margin: 0 0 15px;
+
+    color: #fff;
+}
+
+.preview__author
+{
+    color: #24a323;
+}
+
+.preview__author:hover
+{
+    color: red;
+}
+
+.preview__slider
+{
+    position: relative;
+}
+
+.preview__next,
+.preview__prev
+{
+    position: absolute;
+    top: 50%;
+
+    margin: -30px 0 0;
+
+    color: #666;
+
+    font-size: 60px;
+    line-height: 1;
+}
+
+.preview__next:hover,
+.preview__prev:hover
+{
+    cursor: pointer;
+
+    color: #ddd;
+}
+
+.preview__next
+{
+    right: 0;
+}
+
+.preview__prev
+{
+    left: 0;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+    <title>Домашнее задание №6</title>
+    <link href="css/main.css" rel="stylesheet">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js" data-main="js/main.js"></script>
+</head>
+<body>
+    <ul class="tabs">
+        <li class="tabs__tab">
+            <a class="tabs__link" href="#top">Популярные фотографии</a>
+        </li>
+        <li class="tabs__tab">
+            <a class="tabs__link" href="#recent">Новые интересные фотографии</a>
+        </li>
+        <li class="tabs__tab">
+            <a class="tabs__link" href="#podhistory">Фото дня</a>
+        </li>
+    </ul>
+    <div id="content"></div>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,22 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'router'
+], function($, _, Backbone, Router) {
+
+    return function() {
+
+        this.router = new Router;
+
+        this.vent = _.extend({}, Backbone.Events);
+
+        var self = this;
+        $('a[href]').on('click', function(event) {
+            self.router.navigate($(this).attr('href'), { trigger : true });
+            return false;
+        });
+
+    };
+
+});
diff --git a/js/collections/picture.js b/js/collections/picture.js
@@ -0,0 +1,24 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'models/picture'
+], function($, _, Backbone, Picture) {
+
+    return Backbone.Collection.extend({
+
+        model : Picture,
+
+        url : 'http://api-fotki.yandex.ru/api/{{type}}/?format=json',
+
+        initialize : function(options) {
+            this.url = this.url.replace('{{type}}', options.type);
+        },
+
+        parse : function(response) {
+            return response.entries;
+        }
+
+    });
+
+});
diff --git a/js/helpers/helper.js b/js/helpers/helper.js
@@ -0,0 +1,18 @@
+define(function() {
+
+    return {
+
+        leadZero : function(num) {
+            return num < 10 ? '0' + num : num;
+        },
+
+        formatDate : function(date) {
+            date = new Date(date);
+            return date.getDate() + ' ' +
+            ('января,февраля,марта,апреля,мая,июня,июля,августа,сентября,октября,ноября,декабря'.split(',')[date.getMonth()]) + ' ' +
+                date.getFullYear() + ' в ' + this.leadZero(date.getHours()) + ':' + this.leadZero(date.getMinutes());
+        }
+
+    }
+
+});
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,28 @@
+requirejs.config({
+    paths : {
+        underscore : '//yandex.st/underscore/1.5.2/underscore-min',
+        backbone : '//yandex.st/backbone/1.1.0/backbone-min',
+        jquery : '//yandex.st/jquery/1.10.2/jquery.min',
+        text : '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text.min'
+    },
+    shim : {
+        underscore : {
+            exports : '_'
+        },
+        backbone : {
+            deps : ['jquery', 'underscore'],
+            exports : 'Backbone'
+        }
+    }
+});
+
+require([
+    'backbone',
+    'app'
+], function(Backbone, App) {
+
+    window.app = new App;
+
+    Backbone.history.start();
+
+});