{"action":"created","comment":{"url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/comments/41812798","id":41812798,"diff_hunk":"@@ -5,52 +5,98 @@\n     'RIGHT': 39,\n     'ESC': 27\n   };\n-  var picturesContainer = document.querySelector('.pictures');\n-  var galleryElement = document.querySelector('.gallery-overlay');\n-  var closeButton = document.querySelector('.gallery-overlay-close');\n-\n-  function havePicture(element) {\n-    while (element) {\n-      if (element.classList.contains('picture')) {\n-        return !element.classList.contains('picture-load-failure');\n-      }\n-      element = element.parentElement;\n+\n+  function arrayBounds(arr, index) {\n+    if (index === 0 || index === arr.length) {\n+      return false;\n     }\n-    return false;\n+    return true;\n   }\n \n-  function keyHandler(evt) {\n-    switch (evt.keyCode) {\n+  var Gallery = function() {\n+    this._element = document.querySelector('.gallery-overlay');\n+    this._closeButton = document.querySelector('.gallery-overlay-close');\n+    this._currentImg = this._element.querySelector('.gallery-overlay-image');\n+    this._pictureElement = this._element.querySelector('.gallery-overlay-preview');\n+    this._currentPhoto = 0;\n+    this._photos = [];\n+    this.currentKey = '';\n+    this._onCloseClick = this._onCloseClick.bind(this);\n+    this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this);\n+    this._onPhotoClick = this._onPhotoClick.bind(this);\n+  };\n+\n+  Gallery.prototype._onDocumentKeyDown = function(evt) {\n+    this.currentKey = evt.keyCode;\n+    switch (this.currentKey) {\n       case keys.LEFT:\n-        console.log('Влево');\n+        this.setCurrentPhoto(this._currentPhoto - 1);\n         break;\n       case keys.RIGHT:\n-        console.log('Вправо');\n+        this.setCurrentPhoto(this._currentPhoto + 1);\n         break;\n       case keys.ESC:\n-        hideGallery();\n+        this.hide();\n+        break;\n+      default:\n         break;\n-      default: break;\n     }\n-  }\n+  };\n \n-  function hideGallery() {\n-    galleryElement.classList.add('invisible');\n-    closeButton.removeEventListener('click', hideGallery);\n-    document.removeEventListener('keydown', keyHandler);\n-  }\n+  Gallery.prototype.hide = function() {\n+    this._element.classList.add('invisible');\n+    this._closeButton.removeEventListener('click', this._onCloseClick);\n+    document.removeEventListener('keydown', this._onDocumentKeyDown);\n+    this._pictureElement.removeEventListener('click', this._onPhotoClick);\n+  };\n \n-  function showGallery() {\n-    galleryElement.classList.remove('invisible');\n-    closeButton.addEventListener('click', hideGallery);\n-    document.addEventListener('keydown', keyHandler);\n-  }\n+  Gallery.prototype.show = function() {\n+    this._element.classList.remove('invisible');\n+    this._closeButton.addEventListener('click', this._onCloseClick);\n+    document.addEventListener('keydown', this._onDocumentKeyDown);\n+    this._pictureElement.addEventListener('click', this._onPhotoClick);\n+    this._showCurrentPhoto(this._currentPhoto);\n+  };\n \n+  Gallery.prototype._onPhotoClick = function() {\n+    this.setCurrentPhoto(this._currentPhoto + 1);\n+  };\n \n-  picturesContainer.addEventListener('click', function(evt) {\n+  Gallery.prototype._onCloseClick = function(evt) {\n     evt.preventDefault();\n-    if (havePicture(evt.target)) {\n-      showGallery();\n+    this.hide();\n+  };\n+\n+  Gallery.prototype.setPhotos = function(photo, photos) {\n+    this._photos = photos;\n+    this._currentPhoto = photos.indexOf(photo);\n+  };\n+\n+  Gallery.prototype.setCurrentPhoto = function(index) {\n+    if (arrayBounds(this._photos, index)) {\n+      this._currentPhoto = index;\n+      this._showCurrentPhoto();\n     }\n-  });\n+  };\n+\n+  Gallery.prototype._showCurrentPhoto = function() {\n+    this._pictureElement.innerHTML = '';\n+    var imgElement = new Image();\n+    imgElement.src = this._photos[this._currentPhoto];\n+    imgElement.onload = function() {\n+      this._pictureElement.appendChild(imgElement);\n+    }.bind(this);\n+\n+    //Вот тут я проверяю: Если картинка ошибочная, загрузика мне следующую картинку в зависимости от нажатой кнопки\n+    imgElement.onerror = function() {\n+      if (this.currentKey === keys.LEFT) {\n+        this.setCurrentPhoto(this._currentPhoto - 1);\n+      }\n+      if (this.currentKey === keys.RIGHT) {\n+        this.setCurrentPhoto(this._currentPhoto + 1);\n+      }\n+    }.bind(this);","path":"js/gallery.js","position":126,"original_position":126,"commit_id":"bede0d59308d4c62407b04ae79358b8c5e03c308","original_commit_id":"bede0d59308d4c62407b04ae79358b8c5e03c308","user":{"login":"4u","id":304576,"avatar_url":"https://avatars.githubusercontent.com/u/304576?v=3","gravatar_id":"","url":"https://api.github.com/users/4u","html_url":"https://github.com/4u","followers_url":"https://api.github.com/users/4u/followers","following_url":"https://api.github.com/users/4u/following{/other_user}","gists_url":"https://api.github.com/users/4u/gists{/gist_id}","starred_url":"https://api.github.com/users/4u/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/4u/subscriptions","organizations_url":"https://api.github.com/users/4u/orgs","repos_url":"https://api.github.com/users/4u/repos","events_url":"https://api.github.com/users/4u/events{/privacy}","received_events_url":"https://api.github.com/users/4u/received_events","type":"User","site_admin":false},"body":"Забавные эффекты могут быть, если картинка не загрузится, юзер уже щелкнет следующую картинку, думаю надо это предусмотреть.","created_at":"2015-10-12T23:34:53Z","updated_at":"2015-10-12T23:34:53Z","html_url":"https://github.com/js-htmlacademy/89678-keksogram/pull/5#discussion_r41812798","pull_request_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5","_links":{"self":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/comments/41812798"},"html":{"href":"https://github.com/js-htmlacademy/89678-keksogram/pull/5#discussion_r41812798"},"pull_request":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5"}}},"pull_request":{"url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5","id":47368064,"html_url":"https://github.com/js-htmlacademy/89678-keksogram/pull/5","diff_url":"https://github.com/js-htmlacademy/89678-keksogram/pull/5.diff","patch_url":"https://github.com/js-htmlacademy/89678-keksogram/pull/5.patch","issue_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/issues/5","number":5,"state":"open","locked":false,"title":"Первый класс","user":{"login":"yurkevichab","id":14368869,"avatar_url":"https://avatars.githubusercontent.com/u/14368869?v=3","gravatar_id":"","url":"https://api.github.com/users/yurkevichab","html_url":"https://github.com/yurkevichab","followers_url":"https://api.github.com/users/yurkevichab/followers","following_url":"https://api.github.com/users/yurkevichab/following{/other_user}","gists_url":"https://api.github.com/users/yurkevichab/gists{/gist_id}","starred_url":"https://api.github.com/users/yurkevichab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yurkevichab/subscriptions","organizations_url":"https://api.github.com/users/yurkevichab/orgs","repos_url":"https://api.github.com/users/yurkevichab/repos","events_url":"https://api.github.com/users/yurkevichab/events{/privacy}","received_events_url":"https://api.github.com/users/yurkevichab/received_events","type":"User","site_admin":false},"body":"\n\n--\n:boom: https://js-htmlacademy.github.io/89678-keksogram/5/","created_at":"2015-10-11T14:34:47Z","updated_at":"2015-10-12T23:34:53Z","closed_at":null,"merged_at":null,"merge_commit_sha":"89c57d435fe331876878764daea00fd24fd6b16c","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5/commits","review_comments_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5/comments","review_comment_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/comments{/number}","comments_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/issues/5/comments","statuses_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/statuses/bede0d59308d4c62407b04ae79358b8c5e03c308","head":{"label":"yurkevichab:master","ref":"master","sha":"bede0d59308d4c62407b04ae79358b8c5e03c308","user":{"login":"yurkevichab","id":14368869,"avatar_url":"https://avatars.githubusercontent.com/u/14368869?v=3","gravatar_id":"","url":"https://api.github.com/users/yurkevichab","html_url":"https://github.com/yurkevichab","followers_url":"https://api.github.com/users/yurkevichab/followers","following_url":"https://api.github.com/users/yurkevichab/following{/other_user}","gists_url":"https://api.github.com/users/yurkevichab/gists{/gist_id}","starred_url":"https://api.github.com/users/yurkevichab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yurkevichab/subscriptions","organizations_url":"https://api.github.com/users/yurkevichab/orgs","repos_url":"https://api.github.com/users/yurkevichab/repos","events_url":"https://api.github.com/users/yurkevichab/events{/privacy}","received_events_url":"https://api.github.com/users/yurkevichab/received_events","type":"User","site_admin":false},"repo":{"id":42807331,"name":"89678-keksogram","full_name":"yurkevichab/89678-keksogram","owner":{"login":"yurkevichab","id":14368869,"avatar_url":"https://avatars.githubusercontent.com/u/14368869?v=3","gravatar_id":"","url":"https://api.github.com/users/yurkevichab","html_url":"https://github.com/yurkevichab","followers_url":"https://api.github.com/users/yurkevichab/followers","following_url":"https://api.github.com/users/yurkevichab/following{/other_user}","gists_url":"https://api.github.com/users/yurkevichab/gists{/gist_id}","starred_url":"https://api.github.com/users/yurkevichab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yurkevichab/subscriptions","organizations_url":"https://api.github.com/users/yurkevichab/orgs","repos_url":"https://api.github.com/users/yurkevichab/repos","events_url":"https://api.github.com/users/yurkevichab/events{/privacy}","received_events_url":"https://api.github.com/users/yurkevichab/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/yurkevichab/89678-keksogram","description":"Алексей Юркевич","fork":true,"url":"https://api.github.com/repos/yurkevichab/89678-keksogram","forks_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/forks","keys_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/keys{/key_id}","collaborators_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/teams","hooks_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/hooks","issue_events_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/issues/events{/number}","events_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/events","assignees_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/assignees{/user}","branches_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/branches{/branch}","tags_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/tags","blobs_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/git/refs{/sha}","trees_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/git/trees{/sha}","statuses_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/statuses/{sha}","languages_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/languages","stargazers_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/stargazers","contributors_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/contributors","subscribers_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/subscribers","subscription_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/subscription","commits_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/commits{/sha}","git_commits_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/git/commits{/sha}","comments_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/comments{/number}","issue_comment_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/issues/comments{/number}","contents_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/contents/{+path}","compare_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/compare/{base}...{head}","merges_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/merges","archive_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/downloads","issues_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/issues{/number}","pulls_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/pulls{/number}","milestones_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/milestones{/number}","notifications_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/labels{/name}","releases_url":"https://api.github.com/repos/yurkevichab/89678-keksogram/releases{/id}","created_at":"2015-09-20T09:19:57Z","updated_at":"2015-09-20T18:45:58Z","pushed_at":"2015-10-12T20:45:15Z","git_url":"git://github.com/yurkevichab/89678-keksogram.git","ssh_url":"git@github.com:yurkevichab/89678-keksogram.git","clone_url":"https://github.com/yurkevichab/89678-keksogram.git","svn_url":"https://github.com/yurkevichab/89678-keksogram","homepage":null,"size":3218,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":false,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"js-htmlacademy:master","ref":"master","sha":"36c5fb2c69313df3db0a447f5dee03a87e133258","user":{"login":"js-htmlacademy","id":14179712,"avatar_url":"https://avatars.githubusercontent.com/u/14179712?v=3","gravatar_id":"","url":"https://api.github.com/users/js-htmlacademy","html_url":"https://github.com/js-htmlacademy","followers_url":"https://api.github.com/users/js-htmlacademy/followers","following_url":"https://api.github.com/users/js-htmlacademy/following{/other_user}","gists_url":"https://api.github.com/users/js-htmlacademy/gists{/gist_id}","starred_url":"https://api.github.com/users/js-htmlacademy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/js-htmlacademy/subscriptions","organizations_url":"https://api.github.com/users/js-htmlacademy/orgs","repos_url":"https://api.github.com/users/js-htmlacademy/repos","events_url":"https://api.github.com/users/js-htmlacademy/events{/privacy}","received_events_url":"https://api.github.com/users/js-htmlacademy/received_events","type":"Organization","site_admin":false},"repo":{"id":42806758,"name":"89678-keksogram","full_name":"js-htmlacademy/89678-keksogram","owner":{"login":"js-htmlacademy","id":14179712,"avatar_url":"https://avatars.githubusercontent.com/u/14179712?v=3","gravatar_id":"","url":"https://api.github.com/users/js-htmlacademy","html_url":"https://github.com/js-htmlacademy","followers_url":"https://api.github.com/users/js-htmlacademy/followers","following_url":"https://api.github.com/users/js-htmlacademy/following{/other_user}","gists_url":"https://api.github.com/users/js-htmlacademy/gists{/gist_id}","starred_url":"https://api.github.com/users/js-htmlacademy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/js-htmlacademy/subscriptions","organizations_url":"https://api.github.com/users/js-htmlacademy/orgs","repos_url":"https://api.github.com/users/js-htmlacademy/repos","events_url":"https://api.github.com/users/js-htmlacademy/events{/privacy}","received_events_url":"https://api.github.com/users/js-htmlacademy/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/js-htmlacademy/89678-keksogram","description":"Алексей Юркевич","fork":false,"url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram","forks_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/forks","keys_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/keys{/key_id}","collaborators_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/teams","hooks_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/hooks","issue_events_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/issues/events{/number}","events_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/events","assignees_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/assignees{/user}","branches_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/branches{/branch}","tags_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/tags","blobs_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/git/refs{/sha}","trees_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/git/trees{/sha}","statuses_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/statuses/{sha}","languages_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/languages","stargazers_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/stargazers","contributors_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/contributors","subscribers_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/subscribers","subscription_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/subscription","commits_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/commits{/sha}","git_commits_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/git/commits{/sha}","comments_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/comments{/number}","issue_comment_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/issues/comments{/number}","contents_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/contents/{+path}","compare_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/compare/{base}...{head}","merges_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/merges","archive_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/downloads","issues_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/issues{/number}","pulls_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls{/number}","milestones_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/milestones{/number}","notifications_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/labels{/name}","releases_url":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/releases{/id}","created_at":"2015-09-20T08:57:38Z","updated_at":"2015-09-22T13:14:08Z","pushed_at":"2015-10-12T20:47:34Z","git_url":"git://github.com/js-htmlacademy/89678-keksogram.git","ssh_url":"git@github.com:js-htmlacademy/89678-keksogram.git","clone_url":"https://github.com/js-htmlacademy/89678-keksogram.git","svn_url":"https://github.com/js-htmlacademy/89678-keksogram","homepage":null,"size":3226,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":true,"has_downloads":false,"has_wiki":false,"has_pages":true,"forks_count":1,"mirror_url":null,"open_issues_count":1,"forks":1,"open_issues":1,"watchers":0,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5"},"html":{"href":"https://github.com/js-htmlacademy/89678-keksogram/pull/5"},"issue":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/issues/5"},"comments":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/issues/5/comments"},"review_comments":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5/comments"},"review_comment":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/pulls/5/commits"},"statuses":{"href":"https://api.github.com/repos/js-htmlacademy/89678-keksogram/statuses/bede0d59308d4c62407b04ae79358b8c5e03c308"}}}}