Skip to content

Instantly share code, notes, and snippets.

@ratelChief

ratelChief/un.js

Created April 26, 2018 11:26
Show Gist options
  • Save ratelChief/666c3d06d234948d97da72ee98a94f74 to your computer and use it in GitHub Desktop.
Save ratelChief/666c3d06d234948d97da72ee98a94f74 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
un.js
'use strict';
var TITLES = ['Большая уютная квартира', 'Маленькая неуютная квартира', 'Огромный прекрасный дворец', 'Маленький ужасный дворец', 'Красивый гостевой домик', 'Некрасивый негостеприимный домик', 'Уютное бунгало далеко от моря', 'Неуютное бунгало по колено в воде'];
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var CHECKINS = ['12:00', '13:00', '14:00'];
var CHECKOUTS = ['12:00', '13:00', '14:00'];
var FEATURES = ['wifi', 'dishwasher', 'parking', 'washer', 'elevator', 'conditioner'];
var PHOTOS = ['http://o0.github.io/assets/images/tokyo/hotel1.jpg', 'http://o0.github.io/assets/images/tokyo/hotel2.jpg', 'http://o0.github.io/assets/images/tokyo/hotel3.jpg'];
var ads = [];
var getRandomValue = function (min, max) {
return Math.floor(min + Math.random() * (max + 1 - min));
};
var getAvatar = function (i) {
var avatar = 'img/avatars/user0' + (i + 1) + '.png';
return avatar;
};
var getTitle = function (titles, i) {
var title = titles[i];
return title;
};
var getPrice = function () {
var price = getRandomValue(1000, 1000000);
return price;
};
var getType = function (types) {
var type = types[getRandomValue(0, types.length - 1)];
return type;
};
var getChekins = function (chekins) {
var checkin = chekins[getRandomValue(0, chekins.length - 1)];
return checkin;
};
var getCheckouts = function (checkouts) {
var checkout = checkouts[getRandomValue(0, checkouts.length - 1)];
return checkout;
};
var getRooms = function () {
var room = getRandomValue(1, 5);
return room;
};
var getGuests = function () {
var guest = getRandomValue(0, 20);
return guest;
};
var getFeatures = function () {
var features = FEATURES.slice();
features.splice(
getRandomValue(0, FEATURES.length - 1),
getRandomValue(1, FEATURES.length - 1)
);
return features;
};
var getX = function () {
var x = getRandomValue(300, 900);
return x;
};
var getY = function () {
var y = getRandomValue(150, 500);
return y;
};
var getAdress = function (ad, x, y) {
var address = x + ', ' + y;
return address;
};
var createAd = function (adsCount) {
for (var i = 0; i < adsCount; i++) {
var ad = {
author: {},
offer: {},
location: {}
};
ad.location.x = getX();
ad.location.y = getY();
ad.author.avatar = getAvatar(i);
ad.offer.title = getTitle(TITLES, i);
ad.offer.price = getPrice();
ad.offer.type = getType(TYPES);
ad.offer.rooms = getRooms();
ad.offer.guests = getGuests();
ad.offer.checkin = getChekins(CHECKINS);
ad.offer.checkout = getCheckouts(CHECKOUTS);
ad.offer.features = getFeatures(FEATURES);
ad.offer.address = getAdress(ad, ad.location.x, ad.location.y);
ad.offer.photos = PHOTOS;
ad.offer.description = ' ';
ad.index = i;
ads.push(ad);
}
};
var createPinElement = function (ad, template) {
var pinElement = template.cloneNode(true);
var imageElement = pinElement.querySelector('img');
pinElement.style.left = (ad.location.x - 25) + 'px';
pinElement.style.top = (ad.location.y - 70) + 'px';
pinElement.dataset.indexOfPin = ad.index;
imageElement.src = ad.author.avatar;
imageElement.alt = ad.offer.title;
return pinElement;
};
createAd(8);
var translateOfferType = function (offerType) {
switch (offerType) {
case 'flat':
return 'Квартира';
case 'bungalo':
return 'Бунгало';
case 'house':
return 'Дом';
case 'palace':
return 'Дворец';
}
return offerType;
};
var createFeatureElements = function (features) {
var fragment = document.createDocumentFragment();
for (var i = 0; i < features.length - 1; i++) {
var element = document.createElement('li');
element.className = 'popup__feature popup__feature--' + features[i];
fragment.appendChild(element);
}
return fragment;
};
var createPhotoElements = function (photos, template) {
var element;
var fragment = document.createDocumentFragment();
for (var i = 0; i < photos.length; i++) {
element = template.cloneNode(true);
element.src = photos[i];
fragment.appendChild(element);
}
return fragment;
};
var renderAdCard = function (ad, cardElement, photoElement) {
var offer = ad.offer;
var features = cardElement.querySelector('.popup__features');
var photos = cardElement.querySelector('.popup__photos');
cardElement.querySelector('.popup__title').textContent = offer.title;
cardElement.querySelector('.popup__text--price').textContent = offer.price + '₽/ночь';
cardElement.querySelector('.popup__text--address').textContent = offer.address;
cardElement.querySelector('.popup__type').textContent = translateOfferType(offer.type);
cardElement.querySelector('.popup__text--capacity').textContent = offer.rooms + ' комнаты для ' + offer.guests + ' гостей';
cardElement.querySelector('.popup__text--time').textContent = 'Заезд после ' + offer.checkin + ' , выезд до ' + offer.checkout;
cardElement.querySelector('.popup__description').textContent = offer.description;
cardElement.querySelector('.popup__avatar').src = ad.author.avatar;
features.innerHTML = '';
features.appendChild(createFeatureElements(offer.features));
photos.innerHTML = '';
photos.appendChild(createPhotoElements(offer.photos, photoElement));
};
var template = document.querySelector('template');
var pinElement = template.content.querySelector('.map__pin');
var mapElement = document.querySelector('.map');
var fragment = document.createDocumentFragment();
for (var i = 0; i < ads.length; i++) {
fragment.appendChild(createPinElement(ads[i], pinElement));
}
var form = document.querySelector('.ad-form');
var setFormState = function (switcher) {
var disabledFields = form.querySelectorAll('fieldset');
for (i = 0; i < disabledFields.length; i++) {
var disabledInput = disabledFields[i];
if (switcher === 'disabled') {
disabledInput.disabled = true;
} else {
disabledInput.disabled = false;
}
}
};
setFormState('disabled');
var mapPins = document.querySelector('.map__pins');
var startAddress = form.querySelector('#address');
var WIDTH_OF_MAIN_PIN = 160;
var HEIGHT_OF_MAIN_PIN = 160;
var onMainPinClick = function (evt) {
activatePage();
startAddress.value = getStartAddress(evt);
};
var getStartAddress = function (evt) {
var startAddressCoords = {
x: parseInt(evt.target.parentElement.style.left, 10) + (WIDTH_OF_MAIN_PIN / 2),
y: parseInt(evt.target.parentElement.style.top, 10) + (HEIGHT_OF_MAIN_PIN / 2)
};
return startAddressCoords.x + ', ' + startAddressCoords.y;
};
var activatePage = function () {
mapElement.classList.remove('map--faded');
form.classList.remove('ad-form--disabled');
setFormState('enabled');
document.querySelector('.map__pins').appendChild(fragment);
};
var onMapPinClick = function (evt) {
var target = evt.target;
var currentTarget = evt.currentTarget;
while (target.parentElement !== currentTarget) {
if (target.parentElement.classList.contains('map__pin--main')) {
onMainPinClick(evt);
} else if (!target.parentElement.classList.contains('map__pin--main') || target.parentElement.classList.contains('map__pin')) {
var cardElement = template.content.querySelector('.map__card').cloneNode(true);
var photoElement = cardElement.querySelector('.popup__photo');
var existPopup = mapElement.querySelector('.popup');
if (existPopup) {
existPopup.remove();
}
renderAdCard(ads[target.parentElement.dataset.indexOfPin], cardElement, photoElement);
mapElement.insertBefore(cardElement, document.querySelector('.map__filters-container'));
var popup = mapElement.querySelector('.popup');
var popupCloseButton = popup.querySelector('.popup__close');
popupCloseButton.addEventListener('click', function () {
popup.remove();
});
}
target = target.parentElement;
}
};
mapPins.addEventListener('click', onMapPinClick);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment