picture-element.js

'use strict';


var template = document.querySelector('template');
var templateContainer = 'content' in template ? template.content : template;


var getPictureElement = function(picture) {
  var pictureElement = templateContainer.querySelector('.picture').cloneNode(true);

  pictureElement.querySelector('.picture-comments').textContent = picture.comments;
  pictureElement.querySelector('.picture-likes').textContent = picture.likes;

  return pictureElement;
};

module.exports = getPictureElement;

picture.js

'use strict';

var newGallery = require('./gallery');
var getPictureElement = require('./picture-element');
var IMAGE_LOAD_TIMEOUT = 10000;

var Picture = module.exports = function(picture, i) {
  this.element = getPictureElement(picture, i);
  this.data = picture;
  var pictureInTemplate = this.element.querySelector('img');
  
  var newImage = new Image(182, 182);
  var newImageTimeout = null;

  newImage.onload = function() {
    clearTimeout(newImageTimeout);
    this.element.replaceChild(newImage, pictureInTemplate);
  };

  newImage.onerror = function() {
    this.element.classList.add('picture-load-failure');
  };

  newImage.onclick = function(e) {
    e.preventDefault();
    newGallery.show(i);
  };

  newImage.src = picture.url;

  newImageTimeout = setTimeout(function() {
    this.element.classList.add('picture-load-failure');
  }, IMAGE_LOAD_TIMEOUT);

  
};

Picture.prototype.remove = function() {
  newImage.onload = null;
  newImage.onerror = null;
  newImage.onclick = null;
};