From 478c6983f7adf33b4ae14a34b2b7d19c4c4e2f4d Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Thu, 5 Dec 2013 17:10:09 +0600 Subject: [PATCH 01/19] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B2=D0=B0=D1=8F=20?= =?UTF-8?q?=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F=20=D0=BF=D1=80=D0=B8=D0=BB?= =?UTF-8?q?=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + css/style.css | 257 ++++++++++++++++++++++++++++++++++ favicon.ico | Bin 0 -> 1150 bytes images/.DS_Store | Bin 0 -> 6148 bytes images/loading.gif | Bin 0 -> 8072 bytes index.html | 41 ++++++ js/.DS_Store | Bin 0 -> 6148 bytes js/app/app.js | 269 ++++++++++++++++++++++++++++++++++++ js/app/init.js | 7 + js/app/templateLoader.js | 24 ++++ js/main.js | 14 ++ js/templates/miniature.html | 13 ++ js/templates/preview.html | 14 ++ 13 files changed, 641 insertions(+) create mode 100644 css/style.css create mode 100644 favicon.ico create mode 100644 images/.DS_Store create mode 100644 images/loading.gif create mode 100644 index.html create mode 100644 js/.DS_Store create mode 100644 js/app/app.js create mode 100644 js/app/init.js create mode 100644 js/app/templateLoader.js create mode 100644 js/main.js create mode 100644 js/templates/miniature.html create mode 100644 js/templates/preview.html diff --git a/README.md b/README.md index c95a62d..711bdcd 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Работа с API, верстка и анимации +[https://rawgithub.com/ArtKuz/6-api-and-markup/master/index.html](https://rawgithub.com/ArtKuz/6-api-and-markup/master/index.html) + Ваша задача — реализовать страницу с динамическим отображением результатов запроса к API «популярных фотографий» сервиса Яндекс.Фоткки. В качестве исходных данных — коллекция популярных фотографий в формате JSON, полученных из API diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..5d6b6ec --- /dev/null +++ b/css/style.css @@ -0,0 +1,257 @@ +html, +body, +h1, +h2, +p +{ + margin: 0; +} + +ol, ul +{ + list-style: none outside none; + padding: 0; +} + +a +{ + color: #6da3bd; +} + +a:hover +{ + color: #4d7285; +} + +body +{ + padding: 10px; + min-width: 950px; + background: #fff; + color: #000; + text-align: left; + font: 400 16px Arial, Helvetica, sans-serif; +} + +header +{ + height: 110px; + border-bottom: 4px solid #fc3; +} + +h1 +{ + padding: 0 0 10px; + text-align: center; + font: 400 36px Verdana, Helvetica, sans-serif; +} + +h1 span +{ + color: #f00; +} + +h2 +{ + padding: 0 0 10px; + font: 700 16px Verdana, Helvetica, sans-serif; +} + +ul.nav li +{ + display: inline; + margin: 0 10px 0 0; +} + +ul.nav li a.active +{ + color: #f00; + text-decoration: none; +} + +#loading +{ + position: absolute; + z-index: 1; + display: none; + width: 100%; + height: 100%; + background: #fff; + opacity: 0.9; +} + +#loading img +{ + margin: 70px 50%; +} + +#loading .textload +{ + left: 30px; + position: relative; + text-align: center; + top: -60px; +} + +section +{ + margin: 30px auto; +} + +header section +{ + margin: 0 auto; +} + +.miniatures .miniature +{ + display: inline-block; + margin: 10px; + position: relative; + vertical-align: top; +} + +.miniatures .miniature .image +{ + cursor: pointer; + display: block; + overflow: hidden; + height: 150px; + z-index: 1; + position: relative; +} + +.miniatures .miniature .image img +{ + height: 150px; +} + +.miniatures .miniature .shortDescription +{ + background: none repeat scroll 0 0 #2B2B2B; + display: none; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); + left: 0; + margin: -10px -10px 0; + padding: 170px 10px 10px; + position: absolute; + right: 0; + text-align: left; + top: 0; + z-index: 2; + color: #fff; + overflow: hidden; +} + +.miniatures .miniature .shortDescription .title +{ + font-weight: 700; +} + +.miniatures .miniature:hover .shortDescription, +.miniatures .miniature.selected .shortDescription +{ + display: block; +} + +.miniatures .miniature:hover .image, +.miniatures .miniature.selected .image +{ + z-index: 3; +} + +.miniatures .miniature.selected .title, +.miniatures .miniature.selected .author +{ + display: none; +} + +.preview +{ + background: none repeat scroll 0 0 #2b2b2b; + width: 100%; + position: relative; + display: none; + +} + +.preview .close +{ + color: #a7a7a7; + cursor: pointer; + font-size: 40px; + font-weight: 800; + position: absolute; + right: 20px; + top: 5px; +} + +.preview .close:hover +{ + color: #fff; +} + +.preview .slider +{ + position: relative; + margin: 0 430px 0 10px; + padding: 20px 0 10px; + text-align: center; +} + +.preview .slider .prev, +.preview .slider .next +{ + color: #a7a7a7; + cursor: pointer; + font-size: 50px; + margin: -40px 0 0; + position: absolute; + top: 50%; + display: none; +} + +.preview .slider .prev +{ + left: 0; +} + +.preview .slider .next +{ + right: 0; +} + +.preview .slider .prev:hover, +.preview .slider .next:hover +{ + color: #fff; +} + +.preview .description +{ + color: #eee; + position: absolute; + right: 10px; + text-align: left; + top: 50px; + width: 380px; +} + +.preview .description ul +{ + margin: 20px 0 0 0; +} + +.more +{ + border: 4px solid #fc3; + margin: 0 auto; + text-align: center; + width: 200px; + cursor: pointer; +} + +.more:hover +{ + background: #fc3; +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..2dd3837e86c7414bb6f992d498fa17d4e2df8d0d GIT binary patch literal 1150 zcmc&!K@NgI44e%lcrcNZXO13yme1g6KE)TPi5G7$%{peYVi!paC1twPnQplN1U_vG zzB`<1U=QHHBt<6j1c1Fi#lX2s($-nxo9of%&ecmNUykZ~C{M2W#!u;P6z9C1EvERC z^E6&hGfZQlvoNxsy!t8T{_D$}YD%^46Fyj!JZto|pRlxpbRK#$Jm1f~fj9Lb+CmRB Z7hrn?HvD;5T3vTQb;djHJK)JQ?+Ervyxjl* literal 0 HcmV?d00001 diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7951e31ad2c0bb1cbceae3f8b72b89e8185fa3b4 GIT binary patch literal 6148 zcmeHKO-sZ;41LiB3wzn4$2ocu{0C*(6};*n(7IZbVg=WGf1v-VzI?2>+N&axK=RT_ zGShj`nFfF?UpHsK0zgGo6m=#l=Y8QI0 z2t~Y<=%o@ZhIl#0OXSsogQJ&2qWO?mdDpy%tY%vM*cC3hEh>$iRCU0bNvR29t|)S=Md`w8HKo+HN=^mtL9d3E66 UsI%y}l@s$vzz9i`4EzEE?~x@jiU0rr literal 0 HcmV?d00001 diff --git a/images/loading.gif b/images/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..b1d6c5ec39bd672999e797e5f9c75ec352bee672 GIT binary patch literal 8072 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 Y6dlbxhQ(0qco=-kZiVm-@cl>s57o#YQUCw| literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..87e7407 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + Работа с API, верстка и анимации | 6-api-and-markup | Кузвесов Артём + + + + + + +
+ Загрузка +
Идёт загрузка...
+
+
+
+

Работа с API, верстка и анимации

+ +
+
+
+
    +
    Больше фотографий...
    +
    + + \ No newline at end of file diff --git a/js/.DS_Store b/js/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..cee44ae38325c25fc48433da284213672cd42808 GIT binary patch literal 6148 zcmeHKO-jR15S~f9XwgNN;_87Hu;2kgi6`gbi`SZ{ZA)r{i8@p~DNcQ>O) zYN**i_upT3^R-jeMNyuPJED*G>pOiI&#CHiVyAiOpLQ!rOFGgMRj9Q`MOhz)HTC2( zQN8+aub0zN-MxGhHM}o9D@-sD3WA4}*Vh6&O3ba)A5rZuq{^W7FV{2&X#6EnmS7x73SgYgwq~XN5 zVc1|G7#K1zv&)tA|NH6rf0z_k!9XzZrx@UQu`M=uB=4=Ghm&5Lpbt + * @version 0.01 + * @copyright Artem Kuzvesov 2013 + * + */ +define(['jquery', + 'handlebars', + 'app/templateLoader'], function($, Handlebars, TemplateLoader) { + + /** @define {object} */ + var $preview = $('li.preview'); // Элемент preview + $('li.preview').remove(); + /** @define {object} */ + var $miniatures = $('.miniatures'); + + /** Расчитываем в шаблоне новую ширину изображения, + учитывая, что высота всех миниатюр 150px*/ + Handlebars.registerHelper('newWith', function() { + return newWith = Math.ceil((arguments[0] * 150)/arguments[1]); + }); + + /** + * Конструктор возвращаемого объекта + * @constructor + */ + App = function() { + /** @define {object} */ + this.dataJson = {}; // данные полученные с API для текущей категории + /** @define {string} */ + this.photoCategory = 'top'; // категория, по умолчанию 'top' + /** @define {number} */ + this.photoLimit = 20; // количество подгружаемых миниатюр + + /** Обработка клика по пункту меню */ + $('ul.nav').on('click', 'li a', $.proxy(this.categoryChoice, this)); + + /** Обработка клика "Больше фотографий" */ + $('.content').on('click', '.more', $.proxy(this.morePhotos, this)); + + /** Обработка клика на миниатюру */ + $miniatures.on('click', 'li.miniature img', $.proxy(this.loadPreviw, this)); + } + + /** + * Функция которая должна быть вызвана при запуске приложения + */ + App.prototype.first = function() { + this.ajaxCatalog(this.photoCategory, this.photoLimit); + }; + + /** + * Загружаем фотографии через API, отрисовываем их и упорядочиаваем + * @param {[string]} photoCategory Категорию фотографий которую нужно загрузить + */ + App.prototype.ajaxCatalog = function(photoCategory, photolimit) { + var app = this; + + $.ajax({ + url: 'http://api-fotki.yandex.ru/api/' + photoCategory +'/', + type: 'GET', + data: { + format : 'json', + limit : photolimit + }, + dataType: 'jsonp', + beforeSend: function () { + $('#loading').css('display', 'block'); + $('.more').show(); + $('.miniatures li').remove(); + }, + success: function (answer) { + app.dataJson = answer; + + var $source = $('#miniature-template').html().trim(), + template = Handlebars.compile($source), + html = template(answer); // собираем миниатюры по шаблону + countMiniature = app.dataJson.entries.length; + + $miniatures.append(html); + if ((photolimit > countMiniature) || (photolimit === 100)) { + $('.more').hide(); + }; + $('#loading').css('display', 'none'); + + tidyImages(); + } + }); + } + + /** + * События, которые происходят при клике на категорию + */ + App.prototype.categoryChoice = function(event) { + var element = event.target, // текущий элемент в jQuery + app = this; + + $('ul.nav li a.active').removeClass('active'); + $(element).addClass('active'); + + app.photoCategory = $(element).attr('id'); + app.photoLimit = 20; + app.ajaxCatalog(app.photoCategory, app.photoLimit); + } + + /** + * События, которые происходят при клике на "Больше фотографий" + */ + App.prototype.morePhotos = function(event) { + var element = event.target, // текущий элемент в jQuery + app = this; + + app.photoLimit += 20; + if (app.photoLimit > 100) { + app.photoLimit = 100; + } + app.ajaxCatalog(app.photoCategory, app.photoLimit); + } + + /** + * События, которые происходят при клике на миниатюру + */ + App.prototype.loadPreviw = function(event) { + var element = event.target; // текущий элемент в jQuery + + this.miniature = $(element).parent().parent(); + + this.renderPreview(this.miniature); + } + + /** + * Рендеринг превью + */ + App.prototype.renderPreview = function(selected) { + //console.log(selected); + var app = this, + $idPhoto = selected.attr('id'), + title = app.dataJson.entries[$idPhoto].title, + $countMiniatures = $('.miniatures li.miniature').length - 1; + + if ($('li.selected')) $('li').removeClass('selected'); + if ($preview) $preview.remove(); + + selected.addClass('selected'); + + if (selected.hasClass("first")) { + selected.before($preview).show(); + } else { + selected.prevAll('.first:first').before($preview); + } + + if ($('li.preview ul li')) $('li.preview ul li').remove(); + + $('li.preview .prev').show(); + $('li.preview .next').show(); + + if ($idPhoto === '0') { + $('li.preview .prev').hide(); + } + if ($idPhoto === String($countMiniatures)) { + $('li.preview .next').hide(); + } + + if ($idPhoto) { + $('li.preview img').attr({src: app.dataJson.entries[$idPhoto].img.L.href, alt: title}); + $('li.preview h2').text(title); + $('li.preview .author a').attr('href', 'http://fotki.yandex.ru/users/' + app.dataJson.entries[$idPhoto].author).text(app.dataJson.entries[$idPhoto].author); + if (app.dataJson.entries[$idPhoto].img.L.href) { + $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.L.width + 'x' + app.dataJson.entries[$idPhoto].img.L.height + '
    • '); + } + if (app.dataJson.entries[$idPhoto].img.XL.href) { + $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XL.width + 'x' + app.dataJson.entries[$idPhoto].img.XL.height + '
    • '); + } + if (app.dataJson.entries[$idPhoto].img.XXL.href) { + $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXL.height + '
    • '); + } + if (app.dataJson.entries[$idPhoto].img.XXXL.href) { + $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XXXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXXL.height + '
    • '); + } + } + + $preview.slideDown(800); + + /** Обработка клика на кнопку закрыть */ + $preview.on('click', '.close', $.proxy(this.closePreview, this)); + + /** Обработка клика на кнопку предыдущяя фотография */ + $preview.on('click', '.prev', $.proxy(this.prevPreview, this)); + + /** Обработка клика на кнопку следующей фотография */ + $preview.on('click', '.next', $.proxy(this.nextPreview, this)); + } + + /** + * События, которые происходят при клике на кнопку закрыть + */ + App.prototype.closePreview = function() { + $('li.preview').slideUp(800); + setTimeout(function() { $('li.preview').remove() }, 800); + $('li.selected').removeClass('selected') + } + + /** + * События, которые происходят при клике на кнопку предыдущяя фотография + */ + App.prototype.prevPreview = function() { + this.miniature = this.miniature.prev(); + + if (this.miniature.hasClass('preview')) { + this.miniature = this.miniature.prev(); + } + + this.renderPreview(this.miniature); + } + + /** + * События, которые происходят при клике на кнопку следующей фотография + */ + App.prototype.nextPreview = function() { + this.miniature = this.miniature.next(); + this.renderPreview(this.miniature); + } + + /** + * Упорядочивание изображений + */ + function tidyImages() { + var $widthBlock = $miniatures.width(), // ширина области с миниатюрами + withLine = 0, // ширина получаемой строки миниатюр + first = true, // текущий элемент является первым в строке + $countMiniatures = $('.miniatures li').length - 1; // количество миниатюр + $('.miniatures li.miniature').each(function(index) { + $(this).removeClass('first'); + $(this).removeClass('last'); + + var $widthImage = $('img', this).width(); // ширина миниатюры + + withLine += $widthImage + 20; + + var difference = $widthBlock - withLine; + + if (index === $countMiniatures) { + $(this).addClass('last'); + }; + + if (difference < 0) { + $(this).prev().addClass('last'); + first = true; + withLine = $widthImage + 20; + }; + + if (first) { + $(this).addClass('first'); + first = false; + }; + }); + } + + /** + * Отслеживаем изменения размера браузера + */ + $(function() { + $(window).resize(tidyImages); + }); + + return App; +}); \ No newline at end of file diff --git a/js/app/init.js b/js/app/init.js new file mode 100644 index 0000000..27bd8e3 --- /dev/null +++ b/js/app/init.js @@ -0,0 +1,7 @@ +require(['jquery', + 'app/app'], function($, App) { + $(document).ready(function () { + var app = new App(); + app.first(); + }); +}); \ No newline at end of file diff --git a/js/app/templateLoader.js b/js/app/templateLoader.js new file mode 100644 index 0000000..dc2b860 --- /dev/null +++ b/js/app/templateLoader.js @@ -0,0 +1,24 @@ +/** + * Работа с Яндекс API.Фото. AJAX. Подгрузка шаблонов + * + * @author Artem Kuzvesov + * @version 0.01 + * @copyright Artem Kuzvesov 2013 + * + */ +define(['jquery'], function($) { + $.ajax({ + url: 'js/templates/preview.html', + dataType: 'text', + success: function (answer) { + $('section.content').after(answer); + } + }); + $.ajax({ + url: 'js/templates/miniature.html', + dataType: 'text', + success: function (answer) { + $('section.content').after(answer); + } + }); +}); \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..3f7c74b --- /dev/null +++ b/js/main.js @@ -0,0 +1,14 @@ +require.config({ + paths: { + jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', + handlebars : 'http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min', + app : 'app' + }, + shim: { + handlebars: { + exports: 'Handlebars' + } + } +}); + +require(['app/init']); \ No newline at end of file diff --git a/js/templates/miniature.html b/js/templates/miniature.html new file mode 100644 index 0000000..88a3888 --- /dev/null +++ b/js/templates/miniature.html @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/js/templates/preview.html b/js/templates/preview.html new file mode 100644 index 0000000..29edade --- /dev/null +++ b/js/templates/preview.html @@ -0,0 +1,14 @@ +
  • +
    ×
    +
    + + + +
    +
    +

    +
    Автор:
    +
      +
    +
    +
    • \ No newline at end of file From 4d763b567e716cb826cdddb5b47961e657d1970a Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 02:25:24 +0600 Subject: [PATCH 02/19] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?= =?UTF-8?q?=D1=82=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 12292 bytes index.html | 2 +- js/app/app.js | 123 ++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 89 insertions(+), 36 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c6dd7ebd24eee17552b01bef3e1221cfc6ea13ab GIT binary patch literal 12292 zcmeHMPiqrF6n~S%noU6?c&PQ@-V`Y%QKT)1#+V946zz&VSZ%Y}n5=AeLb7Ru7|5~y z>$x96^h5Xs#H&4c^n1iNe@u6h<{)^m^bO4XX6OCMo8Q}=+1UU9D|Wm*z#IUiu?o!2 zVsk_ha#1HrLXXTNGPDP9AOa38sICPQ+B8565Cg;jF+dCu1OEd9xMz!!p0e*NDYe7^ zF>oRo5bJ}DRbWBmK%rbZu#raq#1sz8f_*#(NE=&YLE}K7G)154^uV+!(?<-Z%u#L& zb;N?kfkI^tOqm1Izs&Rrg~?w>J6oy)D=4Iv7$62F84zc83l^b-XZNl6`JGqXfV(Kg z2P*Lk@ybvZ=^}*|HSi%?3kA%6f zsj_B0<})Fm`y^DL4Q(?jxHlG+)-q#CT}3S|iAOYlQ${qB9L8fxjA+y%HVZGI3_HkE z1;2`f$eHY!(XoTE=w?u>fp#^hPR!(+(8Zb<4rNq^uG?)lb$*In|bckdDn@`QKwxjx1NcsN9CyQ>i!eXgHgZiKJ}~Jt?c=`JdDbISZzsT z->ag^=7t}7yj$d*&}(lxYH-8%qPldd2hx_6wzjf!z20(udBMK6veI9$drP_8f_)>u z)bD5atn`J;*Kgl<`J3Ih@7{m-`02Bp88E%j!#Q<5YQJF5n75h7OS|K8Bb&FRAHzO= zkIf$;H#2Js2ZsHQ(+UF~)^J?JoWcBs;9>S&W5(ee)i+iXe$K!L<&yXHJykFzv=A5?C4Xy&~unKo@C3t|ih*5iEQH#58Keh_s zY~?PDNc+E_kP0zyj2K9&Sm(s~e|7rz|6?>G3Y8cj2L6@-mMS@=B3k`< literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 87e7407..c6dc872 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + diff --git a/js/app/app.js b/js/app/app.js index 689286f..ad4c5b8 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -11,8 +11,8 @@ define(['jquery', 'app/templateLoader'], function($, Handlebars, TemplateLoader) { /** @define {object} */ - var $preview = $('li.preview'); // Элемент preview - $('li.preview').remove(); + var $preview = $('.preview'); // Элемент preview + $preview.remove(); /** @define {object} */ var $miniatures = $('.miniatures'); @@ -97,7 +97,7 @@ define(['jquery', var element = event.target, // текущий элемент в jQuery app = this; - $('ul.nav li a.active').removeClass('active'); + $('a.active').removeClass('active'); $(element).addClass('active'); app.photoCategory = $(element).attr('id'); @@ -134,13 +134,12 @@ define(['jquery', * Рендеринг превью */ App.prototype.renderPreview = function(selected) { - //console.log(selected); var app = this, $idPhoto = selected.attr('id'), title = app.dataJson.entries[$idPhoto].title, - $countMiniatures = $('.miniatures li.miniature').length - 1; + $countMiniatures = $('.miniatures li.miniature').length - 1; - if ($('li.selected')) $('li').removeClass('selected'); + if ($('.selected')) $('li').removeClass('selected'); if ($preview) $preview.remove(); selected.addClass('selected'); @@ -151,33 +150,35 @@ define(['jquery', selected.prevAll('.first:first').before($preview); } - if ($('li.preview ul li')) $('li.preview ul li').remove(); + if ($('.preview ul li')) $('.preview ul li').remove(); - $('li.preview .prev').show(); - $('li.preview .next').show(); + $('.prev').show(); + $('.next').show(); if ($idPhoto === '0') { - $('li.preview .prev').hide(); + $('.prev').hide(); + prev = true; } if ($idPhoto === String($countMiniatures)) { - $('li.preview .next').hide(); + $('.next').hide(); + next = true; } if ($idPhoto) { - $('li.preview img').attr({src: app.dataJson.entries[$idPhoto].img.L.href, alt: title}); - $('li.preview h2').text(title); - $('li.preview .author a').attr('href', 'http://fotki.yandex.ru/users/' + app.dataJson.entries[$idPhoto].author).text(app.dataJson.entries[$idPhoto].author); + $('.preview img').attr({src: app.dataJson.entries[$idPhoto].img.L.href, alt: title}); + $('.preview h2').text(title); + $('.preview .author a').attr('href', 'http://fotki.yandex.ru/users/' + app.dataJson.entries[$idPhoto].author).text(app.dataJson.entries[$idPhoto].author); if (app.dataJson.entries[$idPhoto].img.L.href) { - $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.L.width + 'x' + app.dataJson.entries[$idPhoto].img.L.height + '
    • '); + $('.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.L.width + 'x' + app.dataJson.entries[$idPhoto].img.L.height + '
    • '); } if (app.dataJson.entries[$idPhoto].img.XL.href) { - $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XL.width + 'x' + app.dataJson.entries[$idPhoto].img.XL.height + '
    • '); + $('.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XL.width + 'x' + app.dataJson.entries[$idPhoto].img.XL.height + '
    • '); } if (app.dataJson.entries[$idPhoto].img.XXL.href) { - $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXL.height + '
    • '); + $('.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXL.height + '
    • '); } if (app.dataJson.entries[$idPhoto].img.XXXL.href) { - $('li.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XXXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXXL.height + '
    • '); + $('.preview ul').append('
  • ' + app.dataJson.entries[$idPhoto].img.XXXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXXL.height + '
    • '); } } @@ -191,15 +192,35 @@ define(['jquery', /** Обработка клика на кнопку следующей фотография */ $preview.on('click', '.next', $.proxy(this.nextPreview, this)); + + + document.onkeydown = NavigateThrough; + function NavigateThrough (event) { + switch (event.keyCode ? event.keyCode : event.which ? event.which : null) { + case 0x25: // стрелка влево + if ($('.prev').css('display') !== 'none') { + app.prevPreview(); + }; + break; + case 0x27: // стрелка впрво + if ($('.next').css('display') !== 'none') { + app.nextPreview(); + }; + break; + case 0x1B: // esc + app.closePreview(); + break; + } + } } /** * События, которые происходят при клике на кнопку закрыть */ App.prototype.closePreview = function() { - $('li.preview').slideUp(800); - setTimeout(function() { $('li.preview').remove() }, 800); - $('li.selected').removeClass('selected') + $('.preview').slideUp(800); + setTimeout(function() { $('.preview').remove() }, 800); + $('.selected').removeClass('selected') } /** @@ -227,34 +248,66 @@ define(['jquery', * Упорядочивание изображений */ function tidyImages() { - var $widthBlock = $miniatures.width(), // ширина области с миниатюрами - withLine = 0, // ширина получаемой строки миниатюр - first = true, // текущий элемент является первым в строке - $countMiniatures = $('.miniatures li').length - 1; // количество миниатюр - $('.miniatures li.miniature').each(function(index) { + var $widthBlock = $miniatures.width(), // ширина области с миниатюрами + withLine = 0, // ширина получаемой строки миниатюр + first = true, // текущий элемент является первым в строке + $countMin = $('.miniature').length - 1, // количество миниатюр + countLine = '', // количество миниатюр в строке + lineMin = [], // массив миниатюр в строке + $widthImage = '', // ширина миниатюры + difference = '', // разница между шириной строки и шириной всех выбранных минитаюр + newWith = ''; // знаение ширины миниатюры, на которое надо изменить + + /** + * @constructor + * @param {object} element миниатюра + * @param {number} width ширина миниатюры + */ + function minimage(image, widthImg){ + this.image = image; + this.widthImg = Number(widthImg); + }; + + $('.miniature').each(function(index, element) { $(this).removeClass('first'); $(this).removeClass('last'); - var $widthImage = $('img', this).width(); // ширина миниатюры + if(index === 0) { + $(this).addClass('firsted'); + } + + $widthImage = $('img', this).width(); // ширина миниатюры withLine += $widthImage + 20; - var difference = $widthBlock - withLine; + difference = $widthBlock - withLine; - if (index === $countMiniatures) { - $(this).addClass('last'); + if (first) { + $(this).addClass('first'); + first = false; }; + lineMin.push(new minimage(element, $widthImage)); + if (difference < 0) { - $(this).prev().addClass('last'); + countLine = lineMin.length; + difference = (-1 * difference) + 40; + newWith = Math.ceil(difference / countLine); + + lineMin.forEach(function(el) { + $(el.image).css('width', el.widthImg - newWith + 'px'); + }); + + $(this).addClass('last').css('float', 'right'); first = true; - withLine = $widthImage + 20; + withLine = 0; + lineMin = []; }; - if (first) { - $(this).addClass('first'); - first = false; + if (index === $countMin) { + $(this).addClass('last').addClass('lasted').css('float', 'none'); }; + }); } From 39d0c0590a0e2b3c000ddbb74350b44bcfad864e Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 03:05:15 +0600 Subject: [PATCH 03/19] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/app/app.js | 7 +++---- js/main.js | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/js/app/app.js b/js/app/app.js index ad4c5b8..0215046 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -269,8 +269,7 @@ define(['jquery', }; $('.miniature').each(function(index, element) { - $(this).removeClass('first'); - $(this).removeClass('last'); + $(this).removeClass('first').removeClass('last').css('float', 'none'); if(index === 0) { $(this).addClass('firsted'); @@ -292,13 +291,13 @@ define(['jquery', if (difference < 0) { countLine = lineMin.length; difference = (-1 * difference) + 40; - newWith = Math.ceil(difference / countLine); + newWith = Math.ceil(difference / countLine); lineMin.forEach(function(el) { $(el.image).css('width', el.widthImg - newWith + 'px'); }); - $(this).addClass('last').css('float', 'right'); + $(this).addClass('last').css({float: 'right', width: $widthImage - newWith - (countLine / 2) + 'px'}); first = true; withLine = 0; lineMin = []; diff --git a/js/main.js b/js/main.js index 3f7c74b..53b7db4 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,7 @@ require.config({ paths: { jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', - handlebars : 'http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min', + handlebars : '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min', app : 'app' }, shim: { From 6abcfb254dfdd01faeb215b02abb59047df9d905 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 03:06:54 +0600 Subject: [PATCH 04/19] Update --- js/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app/app.js b/js/app/app.js index 0215046..046d9e0 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -59,7 +59,7 @@ define(['jquery', var app = this; $.ajax({ - url: 'http://api-fotki.yandex.ru/api/' + photoCategory +'/', + url: '//api-fotki.yandex.ru/api/' + photoCategory +'/', type: 'GET', data: { format : 'json', From b99a010a527b9ecf06a5e7f395ff9c3a48f587b5 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 03:09:35 +0600 Subject: [PATCH 05/19] Update --- js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index 53b7db4..d06a5df 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ require.config({ paths: { - jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', + jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', handlebars : '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min', app : 'app' }, From b6db750ae17af805f7c960c804dd84668bf693c7 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 03:12:43 +0600 Subject: [PATCH 06/19] Update --- js/app/app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/app/app.js b/js/app/app.js index 046d9e0..ce22f9a 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -48,22 +48,22 @@ define(['jquery', * Функция которая должна быть вызвана при запуске приложения */ App.prototype.first = function() { - this.ajaxCatalog(this.photoCategory, this.photoLimit); + this.ajaxCatalog(); }; /** * Загружаем фотографии через API, отрисовываем их и упорядочиаваем * @param {[string]} photoCategory Категорию фотографий которую нужно загрузить */ - App.prototype.ajaxCatalog = function(photoCategory, photolimit) { + App.prototype.ajaxCatalog = function() { var app = this; $.ajax({ - url: '//api-fotki.yandex.ru/api/' + photoCategory +'/', + url: '//api-fotki.yandex.ru/api/' + app.photoCategory +'/', type: 'GET', data: { format : 'json', - limit : photolimit + limit : app.photolimit }, dataType: 'jsonp', beforeSend: function () { From fe0c69c7bfc1b36033bb0b913cf149ee1b7faa5d Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 03:26:46 +0600 Subject: [PATCH 07/19] Update --- js/app/app.js | 7 ++++--- js/main.js | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/js/app/app.js b/js/app/app.js index ce22f9a..fd56c21 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -59,11 +59,12 @@ define(['jquery', var app = this; $.ajax({ - url: '//api-fotki.yandex.ru/api/' + app.photoCategory +'/', + url: 'http://api-fotki.yandex.ru/api/' + app.photoCategory +'/', type: 'GET', + dataType: 'jsonp', data: { format : 'json', - limit : app.photolimit + limit : app.photoLimit }, dataType: 'jsonp', beforeSend: function () { @@ -80,7 +81,7 @@ define(['jquery', countMiniature = app.dataJson.entries.length; $miniatures.append(html); - if ((photolimit > countMiniature) || (photolimit === 100)) { + if ((app.photolimit > countMiniature) || (app.photolimit === 100)) { $('.more').hide(); }; $('#loading').css('display', 'none'); diff --git a/js/main.js b/js/main.js index d06a5df..53b7db4 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ require.config({ paths: { - jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', + jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', handlebars : '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min', app : 'app' }, From efb4891862b16330392101ace16d53c12eebddba Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 03:27:39 +0600 Subject: [PATCH 08/19] Update --- js/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app/app.js b/js/app/app.js index fd56c21..0e1b2e3 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -81,7 +81,7 @@ define(['jquery', countMiniature = app.dataJson.entries.length; $miniatures.append(html); - if ((app.photolimit > countMiniature) || (app.photolimit === 100)) { + if ((app.photoLimit > countMiniature) || (app.photoLimit === 100)) { $('.more').hide(); }; $('#loading').css('display', 'none'); From dd30fd0e2eb972c0206bb5cd064c268de04ff244 Mon Sep 17 00:00:00 2001 From: Artem Date: Mon, 9 Dec 2013 02:29:41 +0500 Subject: [PATCH 09/19] Delete .DS_Store --- .DS_Store | Bin 12292 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index c6dd7ebd24eee17552b01bef3e1221cfc6ea13ab..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12292 zcmeHMPiqrF6n~S%noU6?c&PQ@-V`Y%QKT)1#+V946zz&VSZ%Y}n5=AeLb7Ru7|5~y z>$x96^h5Xs#H&4c^n1iNe@u6h<{)^m^bO4XX6OCMo8Q}=+1UU9D|Wm*z#IUiu?o!2 zVsk_ha#1HrLXXTNGPDP9AOa38sICPQ+B8565Cg;jF+dCu1OEd9xMz!!p0e*NDYe7^ zF>oRo5bJ}DRbWBmK%rbZu#raq#1sz8f_*#(NE=&YLE}K7G)154^uV+!(?<-Z%u#L& zb;N?kfkI^tOqm1Izs&Rrg~?w>J6oy)D=4Iv7$62F84zc83l^b-XZNl6`JGqXfV(Kg z2P*Lk@ybvZ=^}*|HSi%?3kA%6f zsj_B0<})Fm`y^DL4Q(?jxHlG+)-q#CT}3S|iAOYlQ${qB9L8fxjA+y%HVZGI3_HkE z1;2`f$eHY!(XoTE=w?u>fp#^hPR!(+(8Zb<4rNq^uG?)lb$*In|bckdDn@`QKwxjx1NcsN9CyQ>i!eXgHgZiKJ}~Jt?c=`JdDbISZzsT z->ag^=7t}7yj$d*&}(lxYH-8%qPldd2hx_6wzjf!z20(udBMK6veI9$drP_8f_)>u z)bD5atn`J;*Kgl<`J3Ih@7{m-`02Bp88E%j!#Q<5YQJF5n75h7OS|K8Bb&FRAHzO= zkIf$;H#2Js2ZsHQ(+UF~)^J?JoWcBs;9>S&W5(ee)i+iXe$K!L<&yXHJykFzv=A5?C4Xy&~unKo@C3t|ih*5iEQH#58Keh_s zY~?PDNc+E_kP0zyj2K9&Sm(s~e|7rz|6?>G3Y8cj2L6@-mMS@=B3k`< From 7f7347360cc11626dc1da5665b778bba05ced15f Mon Sep 17 00:00:00 2001 From: Artem Date: Mon, 9 Dec 2013 02:29:51 +0500 Subject: [PATCH 10/19] Delete .DS_Store --- js/.DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 js/.DS_Store diff --git a/js/.DS_Store b/js/.DS_Store deleted file mode 100644 index cee44ae38325c25fc48433da284213672cd42808..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKO-jR15S~f9XwgNN;_87Hu;2kgi6`gbi`SZ{ZA)r{i8@p~DNcQ>O) zYN**i_upT3^R-jeMNyuPJED*G>pOiI&#CHiVyAiOpLQ!rOFGgMRj9Q`MOhz)HTC2( zQN8+aub0zN-MxGhHM}o9D@-sD3WA4}*Vh6&O3ba)A5rZuq{^W7FV{2&X#6EnmS7x73SgYgwq~XN5 zVc1|G7#K1zv&)tA|NH6rf0z_k!9XzZrx@UQu`M=uB=4=Ghm&5Lpbt Date: Mon, 9 Dec 2013 02:30:12 +0500 Subject: [PATCH 11/19] Delete .DS_Store --- images/.DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 images/.DS_Store diff --git a/images/.DS_Store b/images/.DS_Store deleted file mode 100644 index 7951e31ad2c0bb1cbceae3f8b72b89e8185fa3b4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKO-sZ;41LiB3wzn4$2ocu{0C*(6};*n(7IZbVg=WGf1v-VzI?2>+N&axK=RT_ zGShj`nFfF?UpHsK0zgGo6m=#l=Y8QI0 z2t~Y<=%o@ZhIl#0OXSsogQJ&2qWO?mdDpy%tY%vM*cC3hEh>$iRCU0bNvR29t|)S=Md`w8HKo+HN=^mtL9d3E66 UsI%y}l@s$vzz9i`4EzEE?~x@jiU0rr From d9fa1955fe6771b55b26925c15421f663def9661 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 03:33:54 +0600 Subject: [PATCH 12/19] Update --- js/app/app.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/app/app.js b/js/app/app.js index 0e1b2e3..9547d74 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -56,10 +56,11 @@ define(['jquery', * @param {[string]} photoCategory Категорию фотографий которую нужно загрузить */ App.prototype.ajaxCatalog = function() { - var app = this; + var app = this, + photoCategory = app.photoCategory; $.ajax({ - url: 'http://api-fotki.yandex.ru/api/' + app.photoCategory +'/', + url: 'http://api-fotki.yandex.ru/api/' + photoCategory +'/', type: 'GET', dataType: 'jsonp', data: { From 648bcf056744a5a18d0b0887390f24f87a7f8165 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 12:38:29 +0600 Subject: [PATCH 13/19] Prod --- js/app/app.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/js/app/app.js b/js/app/app.js index 9547d74..9f256d6 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -56,13 +56,11 @@ define(['jquery', * @param {[string]} photoCategory Категорию фотографий которую нужно загрузить */ App.prototype.ajaxCatalog = function() { - var app = this, - photoCategory = app.photoCategory; + var app = this; $.ajax({ - url: 'http://api-fotki.yandex.ru/api/' + photoCategory +'/', + url: '//api-fotki.yandex.ru/api/' + app.photoCategory +'/', type: 'GET', - dataType: 'jsonp', data: { format : 'json', limit : app.photoLimit From 2fcf3da5e767323946f23c1ddcb321e09fed2bf8 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 12:39:46 +0600 Subject: [PATCH 14/19] Prod --- js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index 53b7db4..6613753 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ require.config({ paths: { - jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', + jquery : '//yandex.st/jquery/1.10.2/jquery.min', handlebars : '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min', app : 'app' }, From 16fdde925131bf33709985ad281a9485194c56b6 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Mon, 9 Dec 2013 14:19:32 +0600 Subject: [PATCH 15/19] Prod --- index.html | 17 ++++++++++++++++- js/app/templateLoader.js | 7 ------- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index c6dc872..80a7eb7 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,22 @@

    Работа с API, верстка и анимации

    -
      +
        +
      • +
        ×
        +
        + + + +
        +
        +

        +
        Автор:
        +
          +
        +
        +
        • +
      Больше фотографий...
      diff --git a/js/app/templateLoader.js b/js/app/templateLoader.js index dc2b860..bfd9368 100644 --- a/js/app/templateLoader.js +++ b/js/app/templateLoader.js @@ -7,13 +7,6 @@ * */ define(['jquery'], function($) { - $.ajax({ - url: 'js/templates/preview.html', - dataType: 'text', - success: function (answer) { - $('section.content').after(answer); - } - }); $.ajax({ url: 'js/templates/miniature.html', dataType: 'text', From a5e905046ef59a37fab3172c3b9207686ea0f947 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Tue, 10 Dec 2013 12:37:20 +0600 Subject: [PATCH 16/19] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=B4=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=B0=D1=80=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 6 +- js/app/app.js | 531 +++++++++++++++++++++++++------------------------- 2 files changed, 269 insertions(+), 268 deletions(-) diff --git a/css/style.css b/css/style.css index 5d6b6ec..e93ac29 100644 --- a/css/style.css +++ b/css/style.css @@ -9,7 +9,7 @@ p ol, ul { - list-style: none outside none; + list-style: none; padding: 0; } @@ -36,6 +36,7 @@ body header { height: 110px; + display: block; border-bottom: 4px solid #fc3; } @@ -96,6 +97,7 @@ ul.nav li a.active section { margin: 30px auto; + display: block; } header section @@ -254,4 +256,4 @@ header section .more:hover { background: #fc3; -} \ No newline at end of file +} diff --git a/js/app/app.js b/js/app/app.js index 9f256d6..5b502be 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -1,33 +1,33 @@ /** * Работа с Яндекс API.Фото. AJAX - * + * * @author Artem Kuzvesov * @version 0.01 * @copyright Artem Kuzvesov 2013 - * + * */ define(['jquery', - 'handlebars', - 'app/templateLoader'], function($, Handlebars, TemplateLoader) { - - /** @define {object} */ - var $preview = $('.preview'); // Элемент preview - $preview.remove(); - /** @define {object} */ - var $miniatures = $('.miniatures'); - - /** Расчитываем в шаблоне новую ширину изображения, - учитывая, что высота всех миниатюр 150px*/ - Handlebars.registerHelper('newWith', function() { - return newWith = Math.ceil((arguments[0] * 150)/arguments[1]); - }); - - /** - * Конструктор возвращаемого объекта - * @constructor - */ + 'handlebars', + 'app/templateLoader'], function($, Handlebars, TemplateLoader) { + + /** @define {object} */ + var $preview = $('.preview'); // Элемент preview + $preview.remove(); + /** @define {object} */ + var $miniatures = $('.miniatures'); + + /** Расчитываем в шаблоне новую ширину изображения, + учитывая, что высота всех миниатюр 150px*/ + Handlebars.registerHelper('newWith', function() { + return newWith = Math.ceil((arguments[0] * 150)/arguments[1]); + }); + + /** + * Конструктор возвращаемого объекта + * @constructor + */ App = function() { - /** @define {object} */ + /** @define {object} */ this.dataJson = {}; // данные полученные с API для текущей категории /** @define {string} */ this.photoCategory = 'top'; // категория, по умолчанию 'top' @@ -35,287 +35,286 @@ define(['jquery', this.photoLimit = 20; // количество подгружаемых миниатюр /** Обработка клика по пункту меню */ - $('ul.nav').on('click', 'li a', $.proxy(this.categoryChoice, this)); + $('ul.nav').on('click', 'li a', $.proxy(this.categoryChoice, this)); - /** Обработка клика "Больше фотографий" */ - $('.content').on('click', '.more', $.proxy(this.morePhotos, this)); + /** Обработка клика "Больше фотографий" */ + $('.content').on('click', '.more', $.proxy(this.morePhotos, this)); - /** Обработка клика на миниатюру */ - $miniatures.on('click', 'li.miniature img', $.proxy(this.loadPreviw, this)); + /** Обработка клика на миниатюру */ + $miniatures.on('click', 'li.miniature img', $.proxy(this.loadPreviw, this)); } /** * Функция которая должна быть вызвана при запуске приложения */ App.prototype.first = function() { - this.ajaxCatalog(); - }; + this.ajaxCatalog(); + }; /** * Загружаем фотографии через API, отрисовываем их и упорядочиаваем - * @param {[string]} photoCategory Категорию фотографий которую нужно загрузить + * @param {[string]} photoCategory Категорию фотографий которую нужно загрузить */ - App.prototype.ajaxCatalog = function() { - var app = this; - - $.ajax({ - url: '//api-fotki.yandex.ru/api/' + app.photoCategory +'/', - type: 'GET', - data: { - format : 'json', - limit : app.photoLimit - }, - dataType: 'jsonp', - beforeSend: function () { - $('#loading').css('display', 'block'); - $('.more').show(); - $('.miniatures li').remove(); - }, - success: function (answer) { - app.dataJson = answer; - - var $source = $('#miniature-template').html().trim(), - template = Handlebars.compile($source), - html = template(answer); // собираем миниатюры по шаблону - countMiniature = app.dataJson.entries.length; - - $miniatures.append(html); - if ((app.photoLimit > countMiniature) || (app.photoLimit === 100)) { - $('.more').hide(); - }; - $('#loading').css('display', 'none'); - - tidyImages(); - } - }); - } - - /** - * События, которые происходят при клике на категорию - */ - App.prototype.categoryChoice = function(event) { - var element = event.target, // текущий элемент в jQuery - app = this; + App.prototype.ajaxCatalog = function() { + var app = this; + + $.ajax({ + url: '//api-fotki.yandex.ru/api/' + app.photoCategory +'/', + type: 'GET', + data: { + format : 'json', + limit : app.photoLimit + }, + dataType: 'jsonp', + beforeSend: function () { + $('#loading').css('display', 'block'); + $('.more').show(); + $('.miniatures li').remove(); + }, + success: function (answer) { + app.dataJson = answer; + + var $source = $('#miniature-template').html().trim(), + template = Handlebars.compile($source), + html = template(answer); // собираем миниатюры по шаблону + countMiniature = app.dataJson.entries.length; + + $miniatures.append(html); + if ((app.photoLimit > countMiniature) || (app.photoLimit === 100)) { + $('.more').hide(); + }; + $('#loading').hide(); + + tidyImages(); + } + }); + } + + /** + * События, которые происходят при клике на категорию + */ + App.prototype.categoryChoice = function(event) { + var element = event.target, // текущий элемент в jQuery + app = this; $('a.active').removeClass('active'); - $(element).addClass('active'); - - app.photoCategory = $(element).attr('id'); - app.photoLimit = 20; - app.ajaxCatalog(app.photoCategory, app.photoLimit); - } - - /** - * События, которые происходят при клике на "Больше фотографий" - */ - App.prototype.morePhotos = function(event) { - var element = event.target, // текущий элемент в jQuery - app = this; - - app.photoLimit += 20; - if (app.photoLimit > 100) { - app.photoLimit = 100; - } - app.ajaxCatalog(app.photoCategory, app.photoLimit); - } - - /** - * События, которые происходят при клике на миниатюру - */ - App.prototype.loadPreviw = function(event) { - var element = event.target; // текущий элемент в jQuery - - this.miniature = $(element).parent().parent(); - - this.renderPreview(this.miniature); - } + $(element).addClass('active'); + + app.photoCategory = $(element).attr('id'); + app.photoLimit = 20; + app.ajaxCatalog(app.photoCategory, app.photoLimit); + } + + /** + * События, которые происходят при клике на "Больше фотографий" + */ + App.prototype.morePhotos = function(event) { + var element = event.target, // текущий элемент в jQuery + app = this; + + app.photoLimit += 20; + if (app.photoLimit > 100) { + app.photoLimit = 100; + } + app.ajaxCatalog(app.photoCategory, app.photoLimit); + } + + /** + * События, которые происходят при клике на миниатюру + */ + App.prototype.loadPreviw = function(event) { + var element = event.target; // текущий элемент в jQuery + + this.miniature = $(element).closest('li'); + this.renderPreview(this.miniature); + } + + /** + * Рендеринг превью + */ + App.prototype.renderPreview = function(selected) { + var app = this, + idPhoto = selected.attr('id'), + title = app.dataJson.entries[idPhoto].title, + $countMiniatures = $('.miniatures li.miniature').length - 1; + + if ($('.selected')) $('li').removeClass('selected'); + if ($preview) $preview.remove(); + + selected.addClass('selected'); + + if (selected.hasClass("first")) { + selected.before($preview).show(); + } else { + selected.prevAll('.first:first').before($preview); + } + + if ($('.preview ul li')) $('.preview ul li').remove(); + + $('.prev, .next').show(); + + if (idPhoto === '0') { + $('.prev').hide(); + prev = true; + } + if (idPhoto === String($countMiniatures)) { + $('.next').hide(); + next = true; + } + + if (idPhoto) { + $('.preview img').attr({src: app.dataJson.entries[idPhoto].img.L.href, alt: title}); + $('.preview h2').text(title); + $('.preview .author a').attr('href', 'http://fotki.yandex.ru/users/' + app.dataJson.entries[idPhoto].author).text(app.dataJson.entries[idPhoto].author); + if (app.dataJson.entries[idPhoto].img.L.href) { + $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.L.width + 'x' + app.dataJson.entries[idPhoto].img.L.height + '
      • '); + } + if (app.dataJson.entries[idPhoto].img.XL.href) { + $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XL.width + 'x' + app.dataJson.entries[idPhoto].img.XL.height + '
      • '); + } + if (app.dataJson.entries[idPhoto].img.XXL.href) { + $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XXL.width + 'x' + app.dataJson.entries[idPhoto].img.XXL.height + '
      • '); + } + if (app.dataJson.entries[idPhoto].img.XXXL.href) { + $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XXXL.width + 'x' + app.dataJson.entries[idPhoto].img.XXXL.height + '
      • '); + } + } + + $preview.slideDown(800); + + /** Обработка клика на кнопку закрыть */ + $preview.on('click', '.close', $.proxy(this.closePreview, this)); + + /** Обработка клика на кнопку предыдущяя фотография */ + $preview.on('click', '.prev', $.proxy(this.prevPreview, this)); + + /** Обработка клика на кнопку следующей фотография */ + $preview.on('click', '.next', $.proxy(this.nextPreview, this)); + + + document.onkeydown = NavigateThrough; + function NavigateThrough (event) { + switch (event.keyCode ? event.keyCode : event.which ? event.which : null) { + case 37: // стрелка влево + if ($('.prev').css('display') !== 'none') { + app.prevPreview(); + }; + break; + case 39: // стрелка впрво + if ($('.next').css('display') !== 'none') { + app.nextPreview(); + }; + break; + case 27: // esc + app.closePreview(); + break; + } + } + } + + /** + * События, которые происходят при клике на кнопку закрыть + */ + App.prototype.closePreview = function() { + $('.preview').slideUp(800, function() { + $(this).remove(); + }); + $('.selected').removeClass('selected') + } + + /** + * События, которые происходят при клике на кнопку предыдущяя фотография + */ + App.prototype.prevPreview = function() { + this.miniature = this.miniature.prev(); + + if (this.miniature.hasClass('preview')) { + this.miniature = this.miniature.prev(); + } + + this.renderPreview(this.miniature); + } /** - * Рендеринг превью - */ - App.prototype.renderPreview = function(selected) { - var app = this, - $idPhoto = selected.attr('id'), - title = app.dataJson.entries[$idPhoto].title, - $countMiniatures = $('.miniatures li.miniature').length - 1; - - if ($('.selected')) $('li').removeClass('selected'); - if ($preview) $preview.remove(); - - selected.addClass('selected'); - - if (selected.hasClass("first")) { - selected.before($preview).show(); - } else { - selected.prevAll('.first:first').before($preview); - } - - if ($('.preview ul li')) $('.preview ul li').remove(); - - $('.prev').show(); - $('.next').show(); - - if ($idPhoto === '0') { - $('.prev').hide(); - prev = true; - } - if ($idPhoto === String($countMiniatures)) { - $('.next').hide(); - next = true; - } - - if ($idPhoto) { - $('.preview img').attr({src: app.dataJson.entries[$idPhoto].img.L.href, alt: title}); - $('.preview h2').text(title); - $('.preview .author a').attr('href', 'http://fotki.yandex.ru/users/' + app.dataJson.entries[$idPhoto].author).text(app.dataJson.entries[$idPhoto].author); - if (app.dataJson.entries[$idPhoto].img.L.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[$idPhoto].img.L.width + 'x' + app.dataJson.entries[$idPhoto].img.L.height + '
      • '); - } - if (app.dataJson.entries[$idPhoto].img.XL.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[$idPhoto].img.XL.width + 'x' + app.dataJson.entries[$idPhoto].img.XL.height + '
      • '); - } - if (app.dataJson.entries[$idPhoto].img.XXL.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[$idPhoto].img.XXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXL.height + '
      • '); - } - if (app.dataJson.entries[$idPhoto].img.XXXL.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[$idPhoto].img.XXXL.width + 'x' + app.dataJson.entries[$idPhoto].img.XXXL.height + '
      • '); - } - } - - $preview.slideDown(800); - - /** Обработка клика на кнопку закрыть */ - $preview.on('click', '.close', $.proxy(this.closePreview, this)); - - /** Обработка клика на кнопку предыдущяя фотография */ - $preview.on('click', '.prev', $.proxy(this.prevPreview, this)); - - /** Обработка клика на кнопку следующей фотография */ - $preview.on('click', '.next', $.proxy(this.nextPreview, this)); - - - document.onkeydown = NavigateThrough; - function NavigateThrough (event) { - switch (event.keyCode ? event.keyCode : event.which ? event.which : null) { - case 0x25: // стрелка влево - if ($('.prev').css('display') !== 'none') { - app.prevPreview(); - }; - break; - case 0x27: // стрелка впрво - if ($('.next').css('display') !== 'none') { - app.nextPreview(); - }; - break; - case 0x1B: // esc - app.closePreview(); - break; - } - } + * События, которые происходят при клике на кнопку следующей фотография + */ + App.prototype.nextPreview = function() { + this.miniature = this.miniature.next(); + this.renderPreview(this.miniature); } /** - * События, которые происходят при клике на кнопку закрыть - */ - App.prototype.closePreview = function() { - $('.preview').slideUp(800); - setTimeout(function() { $('.preview').remove() }, 800); - $('.selected').removeClass('selected') - } - - /** - * События, которые происходят при клике на кнопку предыдущяя фотография - */ - App.prototype.prevPreview = function() { - this.miniature = this.miniature.prev(); - - if (this.miniature.hasClass('preview')) { - this.miniature = this.miniature.prev(); - } - - this.renderPreview(this.miniature); - } - - /** - * События, которые происходят при клике на кнопку следующей фотография - */ - App.prototype.nextPreview = function() { - this.miniature = this.miniature.next(); - this.renderPreview(this.miniature); - } - - /** - * Упорядочивание изображений - */ - function tidyImages() { - var $widthBlock = $miniatures.width(), // ширина области с миниатюрами - withLine = 0, // ширина получаемой строки миниатюр - first = true, // текущий элемент является первым в строке - $countMin = $('.miniature').length - 1, // количество миниатюр - countLine = '', // количество миниатюр в строке - lineMin = [], // массив миниатюр в строке - $widthImage = '', // ширина миниатюры - difference = '', // разница между шириной строки и шириной всех выбранных минитаюр - newWith = ''; // знаение ширины миниатюры, на которое надо изменить - - /** - * @constructor - * @param {object} element миниатюра - * @param {number} width ширина миниатюры - */ - function minimage(image, widthImg){ - this.image = image; - this.widthImg = Number(widthImg); - }; + * Упорядочивание изображений + */ + function tidyImages() { + var $widthBlock = $miniatures.width(), // ширина области с миниатюрами + withLine = 0, // ширина получаемой строки миниатюр + first = true, // текущий элемент является первым в строке + $countMin = $('.miniature').length - 1, // количество миниатюр + countLine = '', // количество миниатюр в строке + lineMin = [], // массив миниатюр в строке + $widthImage = '', // ширина миниатюры + difference = '', // разница между шириной строки и шириной всех выбранных минитаюр + newWith = ''; // знаение ширины миниатюры, на которое надо изменить + + /** + * @constructor + * @param {object} element миниатюра + * @param {number} width ширина миниатюры + */ + function minimage(image, widthImg){ + this.image = image; + this.widthImg = Number(widthImg); + }; $('.miniature').each(function(index, element) { - $(this).removeClass('first').removeClass('last').css('float', 'none'); + $(this).removeClass('first').removeClass('last').css('float', 'none'); - if(index === 0) { - $(this).addClass('firsted'); - } + if(index === 0) { + $(this).addClass('firsted'); + } - $widthImage = $('img', this).width(); // ширина миниатюры + $widthImage = $('img', this).width(); // ширина миниатюры - withLine += $widthImage + 20; + withLine += $widthImage + 20; - difference = $widthBlock - withLine; + difference = $widthBlock - withLine; - if (first) { - $(this).addClass('first'); - first = false; - }; + if (first) { + $(this).addClass('first'); + first = false; + }; - lineMin.push(new minimage(element, $widthImage)); + lineMin.push(new minimage(element, $widthImage)); - if (difference < 0) { - countLine = lineMin.length; - difference = (-1 * difference) + 40; - newWith = Math.ceil(difference / countLine); + if (difference < 0) { + countLine = lineMin.length; + difference = (-1 * difference) + 40; + newWith = Math.ceil(difference / countLine); - lineMin.forEach(function(el) { - $(el.image).css('width', el.widthImg - newWith + 'px'); - }); + lineMin.forEach(function(el) { + $(el.image).css('width', el.widthImg - newWith + 'px'); + }); - $(this).addClass('last').css({float: 'right', width: $widthImage - newWith - (countLine / 2) + 'px'}); - first = true; - withLine = 0; - lineMin = []; - }; + $(this).addClass('last').css({float: 'right', width: $widthImage - newWith - (countLine / 2) + 'px'}); + first = true; + withLine = 0; + lineMin = []; + }; - if (index === $countMin) { - $(this).addClass('last').addClass('lasted').css('float', 'none'); - }; + if (index === $countMin) { + $(this).addClass('last').addClass('lasted').css('float', 'none'); + }; - }); + }); } /** * Отслеживаем изменения размера браузера */ $(function() { - $(window).resize(tidyImages); + $(window).resize(tidyImages); }); - return App; -}); \ No newline at end of file + return App; +}); From b7b9b57d09298aea247b7d24a504c6c3c9a63daa Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Tue, 10 Dec 2013 12:44:59 +0600 Subject: [PATCH 17/19] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=B4=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=B0=D1=80=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/app/init.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/js/app/init.js b/js/app/init.js index 27bd8e3..673b093 100644 --- a/js/app/init.js +++ b/js/app/init.js @@ -1,7 +1,6 @@ require(['jquery', - 'app/app'], function($, App) { - $(document).ready(function () { - var app = new App(); - app.first(); - }); -}); \ No newline at end of file + 'app/app'], function($, App) { + $(function() { + new App().first(); + }); +}); From 4f465d79c9b87751981483f5659a1723c69025b7 Mon Sep 17 00:00:00 2001 From: Artem Kuzvesov Date: Tue, 10 Dec 2013 12:52:09 +0600 Subject: [PATCH 18/19] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=B4=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=B0=D1=80=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/app/app.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/app/app.js b/js/app/app.js index 5b502be..e259cf6 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -163,20 +163,20 @@ define(['jquery', } if (idPhoto) { - $('.preview img').attr({src: app.dataJson.entries[idPhoto].img.L.href, alt: title}); - $('.preview h2').text(title); - $('.preview .author a').attr('href', 'http://fotki.yandex.ru/users/' + app.dataJson.entries[idPhoto].author).text(app.dataJson.entries[idPhoto].author); + $preview.find('img').attr({src: app.dataJson.entries[idPhoto].img.L.href, alt: title}); + $preview.find('h2').text(title); + $preview.find('.author a').attr('href', 'http://fotki.yandex.ru/users/' + app.dataJson.entries[idPhoto].author).text(app.dataJson.entries[idPhoto].author); if (app.dataJson.entries[idPhoto].img.L.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.L.width + 'x' + app.dataJson.entries[idPhoto].img.L.height + '
      • '); + $preview.find('ul').append('
    • ' + app.dataJson.entries[idPhoto].img.L.width + 'x' + app.dataJson.entries[idPhoto].img.L.height + '
      • '); } if (app.dataJson.entries[idPhoto].img.XL.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XL.width + 'x' + app.dataJson.entries[idPhoto].img.XL.height + '
      • '); + $preview.find('ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XL.width + 'x' + app.dataJson.entries[idPhoto].img.XL.height + '
      • '); } if (app.dataJson.entries[idPhoto].img.XXL.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XXL.width + 'x' + app.dataJson.entries[idPhoto].img.XXL.height + '
      • '); + $preview.find('ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XXL.width + 'x' + app.dataJson.entries[idPhoto].img.XXL.height + '
      • '); } if (app.dataJson.entries[idPhoto].img.XXXL.href) { - $('.preview ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XXXL.width + 'x' + app.dataJson.entries[idPhoto].img.XXXL.height + '
      • '); + $preview.find('ul').append('
    • ' + app.dataJson.entries[idPhoto].img.XXXL.width + 'x' + app.dataJson.entries[idPhoto].img.XXXL.height + '
      • '); } } @@ -296,7 +296,7 @@ define(['jquery', $(el.image).css('width', el.widthImg - newWith + 'px'); }); - $(this).addClass('last').css({float: 'right', width: $widthImage - newWith - (countLine / 2) + 'px'}); + $(this).addClass('last').css({float: 'right', width: $widthImage - newWith - countLine + 'px'}); first = true; withLine = 0; lineMin = []; From 79fe6e120220bbc91a716f6308b58c25334852bc Mon Sep 17 00:00:00 2001 From: Artem Date: Thu, 22 May 2014 16:27:32 +0600 Subject: [PATCH 19/19] Update app.js --- js/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app/app.js b/js/app/app.js index e259cf6..212f1f1 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -76,7 +76,7 @@ define(['jquery', var $source = $('#miniature-template').html().trim(), template = Handlebars.compile($source), - html = template(answer); // собираем миниатюры по шаблону + html = template(answer), // собираем миниатюры по шаблону countMiniature = app.dataJson.entries.length; $miniatures.append(html);