From 16a5994906d33ce0352a6cc96ca907ef7fd8eca2 Mon Sep 17 00:00:00 2001 From: Seal Date: Sun, 22 Apr 2018 16:36:04 +0300 Subject: [PATCH 1/9] dom functions --- task5/js/dom.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 task5/js/dom.js diff --git a/task5/js/dom.js b/task5/js/dom.js new file mode 100644 index 0000000..f5b3374 --- /dev/null +++ b/task5/js/dom.js @@ -0,0 +1,60 @@ +var domBlockOfFunc = (function () { + for (var i = 0; i < photoPosts.length; i++) { + addPhotoPost(photoPosts[i]); + } + removePhotoPost(2); + + function addPhotoPost(post) { + let cards = document.getElementById("posts"); + let photoPost = document.createElement("div"); + photoPost.className = "cards-content"; + photoPost.id = post.id; + photoPost.innerHTML = createDomHTML(post); + + cards.appendChild(photoPost); + } + + function removePhotoPost(idOfPost) { + let photoPost = document.getElementById(idOfPost); + let cards = document.getElementById("posts"); + cards.removeChild(photoPost); + } + + var newPost = { + id: '10', + description: 'NARUTO best anime (again new post(sorry))', + createdAt: new Date('2013-12-12T12:12:12'), + author: 'Misha2k19', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#JUSTCause"], + likes: ["HaroshUbicaMaladec"] + }; + + editPhotoPost(1, newPost); + + function createDomHTML(post) { + return `
+ Delete +
${post.hashTags}
+ Edit +
+
+ +
+
+
${post.description}
+
+
+
${post.createdAt.getDate()}.${post.createdAt.getMonth()}.${post.createdAt.getFullYear()}
+
${post.author}
+ `; + } + + function editPhotoPost(idOfPost, editedPost) { + let photoPost = document.getElementById(idOfPost); + let cards = document.getElementById("posts"); + + photoPost.innerHTML = createDomHTML(editedPost); + } +}()); From 1f8b2dccda3688442b34c1259378b0a4979d49e0 Mon Sep 17 00:00:00 2001 From: Seal Date: Mon, 23 Apr 2018 21:16:54 +0300 Subject: [PATCH 2/9] dom corrections --- task5/js/dom.js | 43 ++---- task5/js/script.js | 356 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 372 insertions(+), 27 deletions(-) create mode 100644 task5/js/script.js diff --git a/task5/js/dom.js b/task5/js/dom.js index f5b3374..f26a93f 100644 --- a/task5/js/dom.js +++ b/task5/js/dom.js @@ -1,38 +1,23 @@ var domBlockOfFunc = (function () { - for (var i = 0; i < photoPosts.length; i++) { - addPhotoPost(photoPosts[i]); - } - removePhotoPost(2); - function addPhotoPost(post) { - let cards = document.getElementById("posts"); - let photoPost = document.createElement("div"); - photoPost.className = "cards-content"; - photoPost.id = post.id; - photoPost.innerHTML = createDomHTML(post); + function addPhotoPostDom(post) { + if(post.postVisibility) { + let cards = document.getElementById("posts"); + let photoPost = document.createElement("div"); + photoPost.className = "cards-content"; + photoPost.id = post.id; + photoPost.innerHTML = createDomHTML(post); - cards.appendChild(photoPost); + cards.appendChild(photoPost); + } } - function removePhotoPost(idOfPost) { + function removePhotoPostDom(idOfPost) { let photoPost = document.getElementById(idOfPost); let cards = document.getElementById("posts"); cards.removeChild(photoPost); } - var newPost = { - id: '10', - description: 'NARUTO best anime (again new post(sorry))', - createdAt: new Date('2013-12-12T12:12:12'), - author: 'Misha2k19', - photoLink: 'img/naruto.png', - postVisibility: true, - hashTags: ["#JUSTCause"], - likes: ["HaroshUbicaMaladec"] - }; - - editPhotoPost(1, newPost); - function createDomHTML(post) { return `
Delete @@ -51,10 +36,14 @@ var domBlockOfFunc = (function () {
`; } - function editPhotoPost(idOfPost, editedPost) { + function editPhotoPostDom(idOfPost, editedPost) { let photoPost = document.getElementById(idOfPost); let cards = document.getElementById("posts"); - photoPost.innerHTML = createDomHTML(editedPost); } + return{ + addPhotoPostDom, + removePhotoPostDom, + editPhotoPostDom + } }()); diff --git a/task5/js/script.js b/task5/js/script.js new file mode 100644 index 0000000..62651fc --- /dev/null +++ b/task5/js/script.js @@ -0,0 +1,356 @@ +var photoPosts = [ + { + id: '1', + description: 'NARUTO best anime', + createdAt: new Date('2014-12-12T12:12:12'), + author: 'Misha', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#NARUTOBESTANIME"], + likes: ["Alex"] + }, + + { + id: '2', + description: 'AVATAR best anime', + createdAt: new Date('2015-12-12T12:12:12'), + author: 'Misha', + photoLink: 'img/avatar.png', + postVisibility: true, + hashTags: ["#AVATARBESTANIME"], + likes: ["Egor"] + }, { + id: '3', + description: 'SHAMAN-KING best anime', + createdAt: new Date('2012-12-12T12:12:12'), + author: 'Misha2019', + photoLink: 'img/sham.png', + postVisibility: true, + hashTags: ["#SHAMANKINGBESTANIME"], + likes: ["Pomeedorka"] + }, + { + id: '4', + description: 'NARURO best anime', + createdAt: new Date('2013-12-12T12:12:12'), + author: 'Misha20', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#NARUTOBESTANIME"], + likes: ["Jora"] + }, + { + id: '5', + description: 'AVATAR best anime', + createdAt: new Date('2018-12-12T12:12:12'), + author: 'Misha', + photoLink: 'img/avatar.png', + postVisibility: true, + hashTags: ["#AVATARBESTANIME"], + likes: ["Jaga"] + }, + { + id: '6', + description: 'SHAMAN-KING best anime', + createdAt: new Date('2017-12-12T12:12:12'), + author: 'Misha22', + photoLink: 'img/sham.png', + postVisibility: true, + hashTags: ["#SHAMANKINGBESTANIME"], + likes: ["Jaguar"] + }, + { + id: '7', + description: 'NARUTO best anime', + createdAt: new Date('2016-12-12T12:12:12'), + author: 'Misha23', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#NARUTOBESTANIME"], + likes: ["Jagorka"] + }, + { + id: '8', + description: 'AVATAR best anime', + createdAt: new Date('2091-12-12T12:12:12'), + author: 'Misha', + photoLink: 'img/avatar.png', + postVisibility: true, + hashTags: ["#AVATARBESTANIME"], + likes: ["Igor"] + }, + { + id: '9', + description: 'SHAMAN-KING best anime', + createdAt: new Date('2020-12-12T12:12:12'), + author: 'Misha', + photoLink: 'img/sham.png', + postVisibility: true, + hashTags: ["#SHAMANKINGBESTANIME"], + likes: ["Egr"] + }, + +]; + +var mainBlockOfFunc = (function () { + for (var i = 0; i < photoPosts.length; i++) { + domBlockOfFunc.addPhotoPostDom(photoPosts[i]); + } + var postForFilter = { + author: 'Misha', + hashTags: ["#AVATARBESTANIME"] + }; + console.log("\n\nСортировка и фильтрация постов. id найденных: \n"); + var sortedArrOfPosts = getPhotoPosts(1, 2, postForFilter); + for (var i = 0; i < sortedArrOfPosts.length; i++) { + console.log("id: " + sortedArrOfPosts[i].id); + } + var postOfId = getPhotoPost("5"); + console.log("Пост по id: " + postOfId.createdAt); + var postForVal = { + id: '15', + description: 'NARUTO best anime (one more post)', + createdAt: new Date('2012-12-12T12:12:12'), + author: 'Misha2018', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#JUSTNARUTO"], + likes: ["Maladec"] + }; + console.log("Проверка поста на валидность: " + validatePhotoPost(postForVal)); + var newPost = { + id: '10', + description: 'NARUTO best anime (one more post)', + createdAt: new Date('2012-12-12T12:12:12'), + author: 'Misha2018', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#JUSTNARUTO"], + likes: ["Maladec"] + }; + console.log("Добавление нового поста с предварительной проверкой: " + addPhotoPost(newPost)); + var postForEditing = { + description: 'NARUTO best anime (one more Naruto)', + createdAt: new Date('2005-12-12T12:12:12') + } + console.log("Изменение поста по id: " + editPhotoPost("1", postForEditing)); + + for (var i = 0; i < photoPosts.length; i++) { + if (photoPosts[i].postVisibility) { + console.log("id: " + photoPosts[i].id + "\n"); + console.log("description: " + photoPosts[i].description + "\n"); + console.log("createdAt: " + photoPosts[i].createdAt + "\n"); + console.log("author: " + photoPosts[i].author + "\n"); + console.log("photoLink: " + photoPosts[i].photoLink + "\n"); + console.log("hashTags:\n"); + for (var j = 0; j < photoPosts[i].hashTags.length; j++) { + console.log(" " + photoPosts[i].hashTags[j] + "\n"); + } + console.log("likes:\n"); + for (var j = 0; j < photoPosts[i].likes.length; j++) { + console.log(" " + photoPosts[i].likes[j] + "\n"); + } + console.log("\n"); + } + } + console.log("--------------------------------\n\n"); + console.log("Удаление поста по id: " + removePhotoPost("5")); + + for (var i = 0; i < photoPosts.length; i++) { + if (photoPosts[i].postVisibility) { + console.log("id: " + photoPosts[i].id + "\n"); + console.log("description: " + photoPosts[i].description + "\n"); + console.log("createdAt: " + photoPosts[i].createdAt + "\n"); + console.log("author: " + photoPosts[i].author + "\n"); + console.log("photoLink: " + photoPosts[i].photoLink + "\n"); + console.log("hashTags:\n"); + for (var j = 0; j < photoPosts[i].hashTags.length; j++) { + console.log(" " + photoPosts[i].hashTags[j] + "\n"); + } + console.log("likes:\n"); + for (var j = 0; j < photoPosts[i].likes.length; j++) { + console.log(" " + photoPosts[i].likes[j] + "\n"); + } + console.log("\n"); + } + } + + removePhotoPost("2"); + + function getPhotoPosts(postStart, number, filterConfig) { + if (postStart + number > photoPosts.length || postStart < 0) { + console.log("Нельзя вывести столько постов. Промежуток вывода не совпадает с количеством постов"); + return null; + } + else { + var sortedArrOfPosts = photoPosts; + if (filterConfig.author) { + sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { + return post.author === filterConfig.author; + }); + } + if (filterConfig.createdAt) { + sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { + return post.createdAt === filterConfig.createdAt; + }); + } + if (filterConfig.hashTags) { + sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { + for (let hashTagsOfPost of post.hashTags) { + for (let hashTagsOfFilter of [].concat(filterConfig.hashTags)) { + if (hashTagsOfPost === hashTagsOfFilter) { + return true; + } + } + } + }); + } + sortedArrOfPosts = sortedArrOfPosts.sort(dateComparator).slice(postStart, number + postStart); + + return sortedArrOfPosts; + } + } + + function dateComparator(post1, post2) { + return post1.createdAt - post2.createdAt; + } + + function getPhotoPost(idOfPost) { + return photoPosts.find(function findPost(post) { + return post.id === idOfPost; + }); + } + + function validatePhotoPost(postForCheck) { + if (typeof postForCheck.id !== "string" || postForCheck.id === "") { + console.log("Пустое поле id"); + return false; + } + + if (photoPosts.some(function checkUniqueness(post) { + return postForCheck.id === post.id; + })) { + console.log("id не уникальный"); + return false; + } + + if (typeof postForCheck.description !== "string" || postForCheck.description.length > 200 || postForCheck.description === "") { + console.log("Неверный description"); + return false; + } + if (typeof postForCheck.author !== "string" || postForCheck.author === "") { + console.log("Поле author пустое"); + return false; + } + if (!(postForCheck.createdAt instanceof Date) || ((postForCheck.createdAt).toString() === 'Invalid Date')) { + console.log("Поле даты создания не введено, либо имеет неправильную структуру"); + return false; + } + if (typeof postForCheck.photoLink !== "string" || postForCheck.photoLink === "") { + console.log("Поле photoLink пустое"); + return false; + } + if (!(postForCheck.hashTags instanceof Array)) { + console.log("Структура поля hashTags не верна"); + return false; + } + return true; + } + + function validateForEditing(postForCheck) { + if (typeof postForCheck.description !== "string" || postForCheck.description.length > 200 || postForCheck.description === "") { + console.log("Неверный description"); + + return false; + } + if (typeof postForCheck.author !== "string" || postForCheck.author === "") { + console.log("Поле author пустое"); + return false; + } + if (!(postForCheck.createdAt instanceof Date) || ((postForCheck.createdAt).toString() === 'Invalid Date')) { + console.log("Поле даты создания не введено, либо имеет неправильную структуру"); + return false; + } + if (typeof postForCheck.photoLink !== "string" || postForCheck.photoLink === "") { + console.log("Поле photoLink пустое"); + return false; + } + if (!(postForCheck.hashTags instanceof Array)) { + console.log("Структура поля hashTags не верна"); + return false; + } + return true; + } + + function addPhotoPost(newPost) { + if (!validatePhotoPost(newPost)) { + return false; + } + else { + photoPosts.push(newPost); + domBlockOfFunc.addPhotoPostDom(newPost); + return true; + } + } + + function editPhotoPost(idForEd, postForEd) { + var postOfId = getPhotoPost(idForEd); + if (!postOfId) { + return false; + } + var postCopy = JSON.parse(JSON.stringify(postOfId)); + if (postForEd.description != null) { + postCopy.description = postForEd.description; + } + if (postForEd.author != null) { + postCopy.author = postForEd.author; + } + if (postForEd.createdAt != null) { + postCopy.createdAt = postForEd.createdAt; + } + if (postForEd.photoLink != null) { + postCopy.photoLink = postForEd.photoLink; + } + if (postForEd.hashTags != null) { + postCopy.hashTags = postForEd.hashTags; + } + + if (validateForEditing(postCopy)) { + changePostData(postOfId, postCopy); + //alert("JS "+idForEd); + domBlockOfFunc.editPhotoPostDom(idForEd, postCopy); + return true; + } + return false; + } + + function changePostData(post1, post2) { + post1.description = post2.description; + + post1.author = post2.author; + + post1.createdAt = post2.createdAt; + + post1.photoLink = post2.photoLink; + + post1.hashTags = post2.hashTags; + } + + function removePhotoPost(idForRem) { + var postOfId = getPhotoPost(idForRem); + if (postOfId == null) { + console.log("Пост для удаления не найден"); + return false; + } + else { + postOfId.postVisibility = false; + domBlockOfFunc.removePhotoPostDom(idForRem); + return true; + } + } + + return { + addPhotoPost + } +}()); + From 2e0411e3e8f4a5d8eb6f2858b6263428ef5054af Mon Sep 17 00:00:00 2001 From: Seal Date: Tue, 8 May 2018 14:59:40 +0300 Subject: [PATCH 3/9] functions for buttons of editing, adding,deleting. LocalStorage, JSON --- task5/css/style.css | 423 ++++++++++++++++++++++++++++++++++++++++++++ task5/img/liked.svg | 17 ++ task5/js/Data.js | 108 +++++++++++ task5/js/dom.js | 242 ++++++++++++++++++++++++- task5/js/script.js | 248 +++++--------------------- task5/mainPage.html | 86 +++++++++ 6 files changed, 914 insertions(+), 210 deletions(-) create mode 100644 task5/css/style.css create mode 100644 task5/img/liked.svg create mode 100644 task5/js/Data.js create mode 100644 task5/mainPage.html diff --git a/task5/css/style.css b/task5/css/style.css new file mode 100644 index 0000000..48a90cd --- /dev/null +++ b/task5/css/style.css @@ -0,0 +1,423 @@ +html{ + overflow-x: hidden; + overflow-y: hidden; +} +body{ + width: 100vw; + height: 100vh; + margin: 0; +} + +.main{ + width: 100vw; + height: 100vh; +} + +.main-header{ + width: 100vw; + height: 8vh; + border: none; + background: url("../img/header.jpg") no-repeat; + background-size: 100% 100%; +} + +.ver-button{ + width: 10%; + height: 50%; + margin: 1% 0 0 87%; + background-color: rgb(0, 163, 232); + border-radius: 10px; + text-align: center; + font-size: 1.1vw; +} + +.filter-page-part{ + width: 100vw; + height: 85vh; + border: none; + background: url("../img/bl.jpg") no-repeat; + background-size: 100% 100%; +} + +.question-user{ + width: 20%; + height: 10.5%; + background-color: rgb(200, 191, 231); + float:left; + margin-top: 1.6%; + margin-left: 4%; + border-radius: 10px; + border: 3px solid #000; + text-align: center; + display: flex; + align-items: center; + font-weight: bold; + font-size: 1.3vw; +} + +.filters-block{ + width: 30%; + height: 16.5%; + border: 3px solid #000; + float:left; + margin-top: 0.6%; + margin-left: 6%; + border-radius: 10px; + background-color: rgb(200, 191, 231); + padding: 0.2%; + padding-top: 0.7%; +} +.filter-single{ + width:100%; + height:30%; +} +#cb-author{ + width:3vw; + height: 3vh; + margin-top:4.4%; +} +.cb{ + float:left; + width:15%; + height:50%; + margin-left: 0%; +} +.label-filter{ + padding:1.2%; + width:35%; + height:50%; + float:left; +} +.filter-text-input{ + margin-top:1%; + font-size: 0.8vw; +} + +.text-of-filters{ + font-size:1.1vw; +} + +.filter-input-part{ + height:95%; + width:80%; + + float: left; +} +#cb-date{ + width:3vw; + height: 3vh; +} +#cb-hashtag{ + width:3vw; + height: 3vh; +} +.block-filter-button{ + height: 95%; + width:17%; + float:right; +} +.filter-button{ + width: 85%; + height: 50.5%; + background-color: rgb(200, 191, 231); + margin-top: 31.4%; + margin-left: 6%; + border-radius: 0.6vw; + font-size: 1.0vw; + outline: none; +} +.add-post-button{ + width: 17%; + height: 10.5%; + background-color: rgb(200, 191, 231); + float: right; + margin-top: 1.6%; + margin-right: 4%; + border-radius: 1.6vw; + font-size: 1.7vw; + outline: none; + visibility: hidden; +} +.cards { + + width: 35vw; + height: 100vw; + position: absolute; + top: -44%; + left: 32.5%; + overflow-x: hidden; + overflow-y: scroll; + transform: rotate(270deg); +} +.cards::-webkit-scrollbar { + display: none; +} +.cards-content { + background-color: rgb(200, 191, 231); + width: 23vw; + height: 30vw; + margin: 3px auto; + transform: rotate(90deg); + border-radius: 10px; + border: 3px solid #000; + +} + +.post-header{ + + width: 95%; + height: 10%; + margin:auto; + +} + +.edit-button{ + outline: none; + width: 15%; + height: 90%; + float:right; + margin-top:1%; + visibility: hidden; +} +.post-hashtags{ + margin-left: 6%; + width: 55%; + height: 90%; + display:inline-block; + font-size: 1vw; + font-style:italic; + overflow:hidden; + margin-top: 2%; +} +.delete-button{ + outline: none; + width: 15%; + height: 90%; + margin-left: 1%; + margin-top:2%; + float: left; + visibility: hidden; +} +.del-add-post-image{ + width: 95%; + height: 95%; + +} +.like-post-image{ + width: 95%; + height: 95%; +} +.like-button{ + outline: none; + width: 23%; + margin-left: 2%; + margin-top: 2%; + float:left; + visibility: hidden; +} +.like-and-comment{ + width: 98%; + height: 16.5%; +} +.image-post{ + margin-top: 1%; + margin-left: 14%; + width: 70%; +} +.post-body{ + height: 66%; + width: 100%; +} +.comments{ + width: 67%; + height: 72.6%; + margin-left: 4%; + margin-top: 2%; + border: 0.2vw solid black; + border-radius: 1vw; + padding: 1%; + background-color: rgb(200, 191, 231); + font-size: 1vw; + overflow:hidden; + float: left; +} +.logged-user{ + + height: 80%; + width: 15%; + margin-left: 83% +} +.user-avatar{ + height:88%; + width:22%; + margin-top: 3%; + background: url("../img/av1.png") no-repeat; + background-size: 100% 100%; + float: left +} +.user-name{ + margin-top: 5%; + float:left; + height:88%; + width:76%; + text-align: center; + font-size: 2vw; + font-weight:bold + +} +.post-data{ + + margin-top: 1%; + margin-left: 2%; + width: 70%; + float: left; + height: 6%; + background-color: rgb(200, 191, 231); + text-align: left; + font-size: 1.3vw; + font-style:italic +} +.post-name{ + margin-top: 1%; + margin-left: 1%; + width: 25%; + height: 6%; + float: left; + background-color: rgb(200, 191, 231); + text-align: right; + font-size: 1.3vw; + font-weight:bold +} +.main-footer{ + width: 100vw; + height: 7vh; + border: none; + background: url("../img/footer.jpg") no-repeat; + background-size: 100% 100%; + alignment: bottom; + padding-top: 1%; + padding-left: 0.5%; +} +.text-footer-date{ + opacity: 0.7; + font-size: 1.0vw; + float: left; +} + +.text-footer-creator{ + opacity: 0.9; + font-size: 1.0vw; + margin-left: 79%; +} +.auth-button{ + width: 57%; + height: 60.5%; + background-color: rgb(200, 191, 231); + float: right; + margin-top: 5%; + margin-right: 1%; + border-radius: 0.6vw; + font-size: 0.9vw; + outline: none; +} +.submit-auth-button{ + width: 25%; + height: 15%; + background-color: rgb(73, 113, 231); + margin-top: 5%; + margin-left: 37.5%; + border-radius: 0.6vw; + font-size: 0.9vw; + outline: none; +} +.cancel-auth-button{ + width: 25%; + height: 15%; + background-color: rgb(73, 113, 231); + margin-top: 5%; + float: right; + border-radius: 0.6vw; + font-size: 0.9vw; + outline: none; +} +.auth-window{ + position: absolute; + top: 20%; + left: 39%; + width: 22%; + height: 30.5%; + border-radius: 0.6vw; + padding: 0.5%; + border: 3px solid yellow; + background-color: rgb(200, 191, 231); + z-index: 100; +} +.ed-window{ + position: absolute; + top: 20%; + left: 39%; + width: 22%; + height: 30.5%; + border-radius: 0.6vw; + padding: 0.5%; + border: 3px solid yellow; + background-color: rgb(200, 191, 231); + z-index: 100; +} +.back-button-edit{ + width: 30%; + height: 51%; + border: solid #090400; + float: right; + alignment: right; + background-color: rgb(91, 164, 231); + cursor: pointer; + outline: none; +} +.user-name-edit{ + float: left; + font-size: 1.6vw; + font-weight: bold; + margin-top: 0; + color: #429eff; +} +.edit-header{ + width: 100%; + height: 25%; +} +.edit-main{ + width: 100%; + height:30%; +} + +.edit-footer{ + width: 100%; + height: 25%; +} +.description-edit{ + height: 100%; + width: 65%; + float: left; + margin-top: 0px; +} +.submit-button-edit{ + height: 112%; + width: 30%; + border: 2px solid #090400; + float: right; + background-color: rgb(91, 164, 231); + cursor: pointer; + outline: none; +} +.input-text-image-edit{ + width: 55%; + height: 16%; + alignment: left; +} +.font-image-edit{ + float: left; + font-size: 0.8vw; + font-weight: bold; + margin-top: 0; + color: #429eff; +} diff --git a/task5/img/liked.svg b/task5/img/liked.svg new file mode 100644 index 0000000..d47dd0e --- /dev/null +++ b/task5/img/liked.svg @@ -0,0 +1,17 @@ + + + + + background + + + + + + + Layer 1 + + + + + \ No newline at end of file diff --git a/task5/js/Data.js b/task5/js/Data.js new file mode 100644 index 0000000..b48223b --- /dev/null +++ b/task5/js/Data.js @@ -0,0 +1,108 @@ +var basicPosts = [ + { + id: '1', + description: 'NARUTO best anime', + createdAt: new Date('2014-12-12'), + author: 'Misha', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#NARUTOBESTANIME"], + likes: ["Alex"] + }, + + { + id: '2', + description: 'AVATAR best anime', + createdAt: new Date('2015-12-12'), + author: 'Misha', + photoLink: 'img/avatar.png', + postVisibility: true, + hashTags: ["#AVATARBESTANIME"], + likes: ["Egor"] + }, { + id: '3', + description: 'SHAMAN-KING best anime', + createdAt: new Date('2012-12-12'), + author: 'Misha2019', + photoLink: 'img/sham.png', + postVisibility: true, + hashTags: ["#SHAMANKINGBESTANIME"], + likes: ["Pomeedorka"] + }, + { + id: '4', + description: 'NARURO best anime', + createdAt: new Date('2013-12-12'), + author: 'Misha20', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#NARUTOBESTANIME"], + likes: ["Jora"] + }, + { + id: '5', + description: 'AVATAR best anime', + createdAt: new Date('2018-12-12'), + author: 'Misha', + photoLink: 'img/avatar.png', + postVisibility: true, + hashTags: ["#AVATARBESTANIME"], + likes: ["Jaga"] + }, + { + id: '6', + description: 'SHAMAN-KING best anime', + createdAt: new Date('2017-12-12'), + author: 'Misha22', + photoLink: 'img/sham.png', + postVisibility: true, + hashTags: ["#SHAMANKINGBESTANIME"], + likes: ["Jaguar"] + }, + { + id: '7', + description: 'NARUTO best anime', + createdAt: new Date('2016-12-12'), + author: 'Misha23', + photoLink: 'img/naruto.png', + postVisibility: true, + hashTags: ["#NARUTOBESTANIME"], + likes: ["Jagorka"] + }, + { + id: '8', + description: 'AVATAR best anime', + createdAt: new Date('2091-12-12'), + author: 'Misha', + photoLink: 'img/avatar.png', + postVisibility: true, + hashTags: ["#AVATARBESTANIME"], + likes: ["Igor"] + }, + { + id: '9', + description: 'SHAMAN-KING best anime', + createdAt: new Date('2020-12-12'), + author: 'Misha', + photoLink: 'img/sham.png', + postVisibility: true, + hashTags: ["#SHAMANKINGBESTANIME"], + likes: ["Egr"] + }, +]; + +for (var i = 0; i < basicPosts.length; i++) { + addPostToLocalStorage(basicPosts[i]); +} + +function addPostToLocalStorage(post) { + localStorage.setItem(post.id, JSON.stringify(post)); +} + +function getPostFromLocalStorage(keyOfPost){ + return localStorage.getItem(keyOfPost); +} + +function removePostFromLocalStorage(keyOfPost){ + localStorage.removeItem(keyOfPost); +} diff --git a/task5/js/dom.js b/task5/js/dom.js index f26a93f..f2c894b 100644 --- a/task5/js/dom.js +++ b/task5/js/dom.js @@ -1,7 +1,158 @@ var domBlockOfFunc = (function () { + function authWindow() { + let windowForAuth = document.createElement("div"); + let authButton = document.getElementById("a-button"); + authButton.style.pointerEvents = "none"; + authButton.style.cursor = "default"; + let posts = document.getElementById("anime-header"); + windowForAuth.className = "auth-window"; + windowForAuth.id = "auth-window" + windowForAuth.innerHTML = `

Авторизация

+

Логин :   

+
+

Пароль :

+ + `; + posts.appendChild(windowForAuth); + } + + function cancelEditing() { + let edWindow = document.getElementById("ed-window"); + let posts = document.getElementById("anime-header"); + posts.removeChild(edWindow); + } + + function cancelAdding() { + let adWindow = document.getElementById("add-window"); + let posts = document.getElementById("anime-header"); + posts.removeChild(adWindow); + } + + function editPostDomWindow(edButtonId) { + let windowForEditing = document.createElement("div"); + let posts = document.getElementById("anime-header"); + windowForEditing.className = "ed-window"; + windowForEditing.id = "ed-window" + var submitButtonId = edButtonId.replace("e", ""); + submitButtonId = "s" + submitButtonId; + windowForEditing.innerHTML = `

${userName}

+
+
+

Путь к изображению:

+

Описание:

+
+ `; + + posts.appendChild(windowForEditing); + } + + function addPostWindow() { + let windowForEditing = document.createElement("div"); + let posts = document.getElementById("anime-header"); + windowForEditing.className = "ed-window"; + windowForEditing.id = "add-window" + + windowForEditing.innerHTML = `

${userName}

+
+
+

Путь к изображению:

+

Описание:

+
+ `; + + posts.appendChild(windowForEditing); + } + + function finishAdding() { + let descriptionEd = document.getElementById("description-for-adding").value; + let imageEd = document.getElementById("image-for-adding").value; + var idOfPost = "" + (photoPosts.length + 1); + var newPhotoPost = { + id: idOfPost, + description: descriptionEd, + createdAt: new Date(), + author: userName, + photoLink: imageEd, + postVisibility: true, + hashTags: [""], + likes: [""] + }; + mainBlockOfFunc.addPhotoPost(newPhotoPost); + var addWindow = document.getElementById("add-window"); + let posts = document.getElementById("anime-header"); + posts.removeChild(addWindow); + } + + function finishEditing(idOfPost) { + let descriptionEd = document.getElementById("description-for-editing").value; + let imageEd = document.getElementById("image-for-editing").value; + var post = {description: descriptionEd, photoLink: imageEd}; + mainBlockOfFunc.editPhotoPost(idOfPost.replace("s", ""), post); + var edWindow = document.getElementById("ed-window"); + let posts = document.getElementById("anime-header"); + posts.removeChild(edWindow); + } + + function finishAuth() { + let authWindow = document.getElementById("auth-window"); + let posts = document.getElementById("anime-header"); + let authBlock = document.getElementById("auth-block"); + let loginValue = document.getElementById("login-field").value; + posts.removeChild(authWindow); + posts.removeChild(authBlock); + let loggedUser = document.createElement("div"); + loggedUser.className = "logged-user"; + loggedUser.innerHTML = `
${loginValue}
`; + posts.appendChild(loggedUser); + var allPhotoPosts = mainBlockOfFunc.getPhotoPosts(0, photoPosts.length); + userName = loginValue; + if(userName){ + let addPostButton = document.getElementById("add-post-button"); + addPostButton.style.visibility = "visible"; + } + for (var i = 0; i < photoPosts.length; i++) { + activateButtons(allPhotoPosts[i].id); + } + + } + + function activateButtons(idOfPost) { + if(userName){ + let likeButton = document.getElementById("l" + idOfPost); + likeButton.style.visibility = "visible"; + } + if (document.getElementById(idOfPost) && mainBlockOfFunc.getPhotoPost(idOfPost).author===userName) { + let deleteButton = document.getElementById("del" + idOfPost); + let editButton = document.getElementById("e" + idOfPost); + + deleteButton.style.visibility = "visible"; + editButton.style.visibility = "visible"; + } + } + + function cancelAuth() { + let authWindow = document.getElementById("auth-window"); + let posts = document.getElementById("anime-header"); + posts.removeChild(authWindow); + let authButton = document.getElementById("a-button"); + authButton.style.pointerEvents = ""; + authButton.style.cursor = ""; + } + + function deletePostDom(idOfButton) { + var idOfPost = idOfButton.replace("del", ''); + mainBlockOfFunc.removePhotoPost(idOfPost); + } + function addPhotoPostDom(post) { - if(post.postVisibility) { + if (post.postVisibility) { let cards = document.getElementById("posts"); let photoPost = document.createElement("div"); photoPost.className = "cards-content"; @@ -9,9 +160,15 @@ var domBlockOfFunc = (function () { photoPost.innerHTML = createDomHTML(post); cards.appendChild(photoPost); + } } + function addNewPhotoPostDom(post) { + addPhotoPostDom(post) + activateButtons(post.id); + } + function removePhotoPostDom(idOfPost) { let photoPost = document.getElementById(idOfPost); let cards = document.getElementById("posts"); @@ -19,31 +176,100 @@ var domBlockOfFunc = (function () { } function createDomHTML(post) { + var idOfDeleteButton = 'del'; + var idOfLikeButton = 'l'; + var idOfEditButton = 'e'; + var imageId = "im"; + idOfDeleteButton += post.id; + idOfLikeButton += post.id; + idOfEditButton += post.id; + imageId += post.id; + var dateOfCreation = new Date(post.createdAt); return `
- Delete + Delete
${post.hashTags}
- Edit + Edit
- +
-
${post.createdAt.getDate()}.${post.createdAt.getMonth()}.${post.createdAt.getFullYear()}
+
${dateOfCreation.getDate()}.${dateOfCreation.getMonth()}.${dateOfCreation.getFullYear()}
${post.author}
`; } + function likePostDom(idOfPost){ + var imageLike = document.getElementById("im"+idOfPost.replace("l","")); + if(imageLike.src === "http://localhost:63342/untitled/img/like.svg"){ + imageLike.src = "http://localhost:63342/untitled/img/liked.svg"; + } + else{ + imageLike.src = "http://localhost:63342/untitled/img/like.svg"; + } + } + function editPhotoPostDom(idOfPost, editedPost) { let photoPost = document.getElementById(idOfPost); let cards = document.getElementById("posts"); photoPost.innerHTML = createDomHTML(editedPost); + activateButtons(idOfPost); } - return{ + + function filterWindow() { + var filterParam = {createdAt: "", author: "", hashTags: [""]}; + var checkBoxAuthor = document.getElementById("cb-author").checked; + if (checkBoxAuthor) { + var valueOfAuthorFilter = document.getElementById("text-field-filter-author").value; + filterParam.author = valueOfAuthorFilter; + } + var checkBoxDate = document.getElementById("cb-date").checked; + if (checkBoxDate) { + var valueOfDateFilter = document.getElementById("text-field-filter-date").value; + filterParam.createdAt = new Date(valueOfDateFilter); + } + var checkBoxHashTags = document.getElementById("cb-hashtag").checked; + if (checkBoxHashTags) { + var valueOfHashTagsFilter = document.getElementById("text-field-filter-hashtags").value; + filterParam.hashTags[0] = valueOfHashTagsFilter; + } + alert(filterParam.author); + alert(filterParam.createdAt); + alert(filterParam.hashTags[0]); + var sortedArrOfPosts = mainBlockOfFunc.getPhotoPosts(0,photoPosts.length,filterParam); + var posts = document.getElementById("posts"); + while(posts.firstChild){ + posts.removeChild(posts.firstChild); + } + for(var i=0;i0) { + photoPosts[i-counter] = JSON.parse(localStorage.getItem(keys[i-counter])); + counter--; + } + for(var k=0;k photoPosts.length || postStart < 0) { @@ -184,26 +23,28 @@ var mainBlockOfFunc = (function () { } else { var sortedArrOfPosts = photoPosts; - if (filterConfig.author) { - sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { - return post.author === filterConfig.author; - }); - } - if (filterConfig.createdAt) { - sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { - return post.createdAt === filterConfig.createdAt; - }); - } - if (filterConfig.hashTags) { - sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { - for (let hashTagsOfPost of post.hashTags) { - for (let hashTagsOfFilter of [].concat(filterConfig.hashTags)) { - if (hashTagsOfPost === hashTagsOfFilter) { - return true; + if(typeof filterConfig !== 'undefined'){ + if (filterConfig.author) { + sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { + return post.author === filterConfig.author; + }); + } + if (filterConfig.createdAt) { + sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { + return post.createdAt === filterConfig.createdAt; + }); + } + if (filterConfig.hashTags) { + sortedArrOfPosts = sortedArrOfPosts.filter(function (post) { + for (let hashTagsOfPost of post.hashTags) { + for (let hashTagsOfFilter of [].concat(filterConfig.hashTags)) { + if (hashTagsOfPost.search(hashTagsOfFilter) !== -1) { + return true; + } } } - } - }); + }); + } } sortedArrOfPosts = sortedArrOfPosts.sort(dateComparator).slice(postStart, number + postStart); @@ -288,7 +129,7 @@ var mainBlockOfFunc = (function () { } else { photoPosts.push(newPost); - domBlockOfFunc.addPhotoPostDom(newPost); + domBlockOfFunc.addNewPhotoPostDom(newPost); return true; } } @@ -299,25 +140,24 @@ var mainBlockOfFunc = (function () { return false; } var postCopy = JSON.parse(JSON.stringify(postOfId)); - if (postForEd.description != null) { + postCopy.createdAt = postOfId.createdAt; + if (postForEd.description) { postCopy.description = postForEd.description; } - if (postForEd.author != null) { + if (postForEd.author) { postCopy.author = postForEd.author; } - if (postForEd.createdAt != null) { + if (postForEd.createdAt) { postCopy.createdAt = postForEd.createdAt; } - if (postForEd.photoLink != null) { + if (postForEd.photoLink) { postCopy.photoLink = postForEd.photoLink; } - if (postForEd.hashTags != null) { + if (postForEd.hashTags) { postCopy.hashTags = postForEd.hashTags; } - if (validateForEditing(postCopy)) { changePostData(postOfId, postCopy); - //alert("JS "+idForEd); domBlockOfFunc.editPhotoPostDom(idForEd, postCopy); return true; } @@ -350,7 +190,11 @@ var mainBlockOfFunc = (function () { } return { - addPhotoPost + addPhotoPost, + removePhotoPost, + getPhotoPosts, + editPhotoPost, + getPhotoPost } }()); diff --git a/task5/mainPage.html b/task5/mainPage.html new file mode 100644 index 0000000..16f4696 --- /dev/null +++ b/task5/mainPage.html @@ -0,0 +1,86 @@ + + + + + + Title + + + +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ + + + + + + From 56f1e21759c2b27e40fbdc8606c082a10e8ad5a1 Mon Sep 17 00:00:00 2001 From: Seal Date: Tue, 8 May 2018 18:02:49 +0300 Subject: [PATCH 4/9] localStorage-corrections --- task5/js/dom.js | 5 ++++- task5/js/script.js | 6 ++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/task5/js/dom.js b/task5/js/dom.js index f2c894b..69a9e01 100644 --- a/task5/js/dom.js +++ b/task5/js/dom.js @@ -149,6 +149,7 @@ var domBlockOfFunc = (function () { function deletePostDom(idOfButton) { var idOfPost = idOfButton.replace("del", ''); mainBlockOfFunc.removePhotoPost(idOfPost); + localStorage.removeItem(mainBlockOfFunc.getPhotoPost(idOfPost)); } function addPhotoPostDom(post) { @@ -160,7 +161,7 @@ var domBlockOfFunc = (function () { photoPost.innerHTML = createDomHTML(post); cards.appendChild(photoPost); - + localStorage.setItem(post.id, JSON.stringify(post)); } } @@ -176,6 +177,7 @@ var domBlockOfFunc = (function () { } function createDomHTML(post) { + var idOfDeleteButton = 'del'; var idOfLikeButton = 'l'; var idOfEditButton = 'e'; @@ -216,6 +218,7 @@ var domBlockOfFunc = (function () { let photoPost = document.getElementById(idOfPost); let cards = document.getElementById("posts"); photoPost.innerHTML = createDomHTML(editedPost); + localStorage.setItem(editedPost.id, JSON.stringify(editedPost)); activateButtons(idOfPost); } diff --git a/task5/js/script.js b/task5/js/script.js index 788d47b..1e7eb67 100644 --- a/task5/js/script.js +++ b/task5/js/script.js @@ -110,6 +110,7 @@ getAllPostFromLocalStorage(); } if (!(postForCheck.createdAt instanceof Date) || ((postForCheck.createdAt).toString() === 'Invalid Date')) { console.log("Поле даты создания не введено, либо имеет неправильную структуру"); + alert(postForCheck.createdAt); return false; } if (typeof postForCheck.photoLink !== "string" || postForCheck.photoLink === "") { @@ -140,22 +141,19 @@ getAllPostFromLocalStorage(); return false; } var postCopy = JSON.parse(JSON.stringify(postOfId)); - postCopy.createdAt = postOfId.createdAt; if (postForEd.description) { postCopy.description = postForEd.description; } if (postForEd.author) { postCopy.author = postForEd.author; } - if (postForEd.createdAt) { - postCopy.createdAt = postForEd.createdAt; - } if (postForEd.photoLink) { postCopy.photoLink = postForEd.photoLink; } if (postForEd.hashTags) { postCopy.hashTags = postForEd.hashTags; } + postCopy.createdAt = new Date(); if (validateForEditing(postCopy)) { changePostData(postOfId, postCopy); domBlockOfFunc.editPhotoPostDom(idForEd, postCopy); From 0ae3af611281ab980c988416195e084052fd59eb Mon Sep 17 00:00:00 2001 From: Seal Date: Mon, 14 May 2018 20:36:13 +0300 Subject: [PATCH 5/9] quotes --- task5/js/Data.js | 36 ++++---- task5/js/dom.js | 208 ++++++++++++++++++++++----------------------- task5/js/script.js | 44 +++++----- 3 files changed, 144 insertions(+), 144 deletions(-) diff --git a/task5/js/Data.js b/task5/js/Data.js index b48223b..33fb032 100644 --- a/task5/js/Data.js +++ b/task5/js/Data.js @@ -6,8 +6,8 @@ var basicPosts = [ author: 'Misha', photoLink: 'img/naruto.png', postVisibility: true, - hashTags: ["#NARUTOBESTANIME"], - likes: ["Alex"] + hashTags: ['#NARUTOBESTANIME'], + likes: ['Alex'] }, { @@ -17,8 +17,8 @@ var basicPosts = [ author: 'Misha', photoLink: 'img/avatar.png', postVisibility: true, - hashTags: ["#AVATARBESTANIME"], - likes: ["Egor"] + hashTags: ['#AVATARBESTANIME'], + likes: ['Egor'] }, { id: '3', description: 'SHAMAN-KING best anime', @@ -26,8 +26,8 @@ var basicPosts = [ author: 'Misha2019', photoLink: 'img/sham.png', postVisibility: true, - hashTags: ["#SHAMANKINGBESTANIME"], - likes: ["Pomeedorka"] + hashTags: ['#SHAMANKINGBESTANIME'], + likes: ['Pomeedorka'] }, { id: '4', @@ -36,8 +36,8 @@ var basicPosts = [ author: 'Misha20', photoLink: 'img/naruto.png', postVisibility: true, - hashTags: ["#NARUTOBESTANIME"], - likes: ["Jora"] + hashTags: ['#NARUTOBESTANIME'], + likes: ['Jora'] }, { id: '5', @@ -46,8 +46,8 @@ var basicPosts = [ author: 'Misha', photoLink: 'img/avatar.png', postVisibility: true, - hashTags: ["#AVATARBESTANIME"], - likes: ["Jaga"] + hashTags: ['#AVATARBESTANIME'], + likes: ['Jaga'] }, { id: '6', @@ -56,8 +56,8 @@ var basicPosts = [ author: 'Misha22', photoLink: 'img/sham.png', postVisibility: true, - hashTags: ["#SHAMANKINGBESTANIME"], - likes: ["Jaguar"] + hashTags: ['#SHAMANKINGBESTANIME'], + likes: ['Jaguar'] }, { id: '7', @@ -66,8 +66,8 @@ var basicPosts = [ author: 'Misha23', photoLink: 'img/naruto.png', postVisibility: true, - hashTags: ["#NARUTOBESTANIME"], - likes: ["Jagorka"] + hashTags: ['#NARUTOBESTANIME'], + likes: ['Jagorka'] }, { id: '8', @@ -76,8 +76,8 @@ var basicPosts = [ author: 'Misha', photoLink: 'img/avatar.png', postVisibility: true, - hashTags: ["#AVATARBESTANIME"], - likes: ["Igor"] + hashTags: ['#AVATARBESTANIME'], + likes: ['Igor'] }, { id: '9', @@ -86,8 +86,8 @@ var basicPosts = [ author: 'Misha', photoLink: 'img/sham.png', postVisibility: true, - hashTags: ["#SHAMANKINGBESTANIME"], - likes: ["Egr"] + hashTags: ['#SHAMANKINGBESTANIME'], + likes: ['Egr'] }, ]; diff --git a/task5/js/dom.js b/task5/js/dom.js index 69a9e01..09c8618 100644 --- a/task5/js/dom.js +++ b/task5/js/dom.js @@ -1,79 +1,79 @@ var domBlockOfFunc = (function () { function authWindow() { - let windowForAuth = document.createElement("div"); - let authButton = document.getElementById("a-button"); - authButton.style.pointerEvents = "none"; - authButton.style.cursor = "default"; - let posts = document.getElementById("anime-header"); - windowForAuth.className = "auth-window"; - windowForAuth.id = "auth-window" - windowForAuth.innerHTML = `

Авторизация

-

Логин :   

+ let windowForAuth = document.createElement('div'); + let authButton = document.getElementById('a-button'); + authButton.style.pointerEvents = 'none'; + authButton.style.cursor = 'default'; + let posts = document.getElementById('anime-header'); + windowForAuth.className = 'auth-window'; + windowForAuth.id = 'auth-window' + windowForAuth.innerHTML = `

Авторизация

+

Логин :   


-

Пароль :

- - `; +

Пароль :

+ + `; posts.appendChild(windowForAuth); } function cancelEditing() { - let edWindow = document.getElementById("ed-window"); - let posts = document.getElementById("anime-header"); + let edWindow = document.getElementById('ed-window'); + let posts = document.getElementById('anime-header'); posts.removeChild(edWindow); } function cancelAdding() { - let adWindow = document.getElementById("add-window"); - let posts = document.getElementById("anime-header"); + let adWindow = document.getElementById('add-window'); + let posts = document.getElementById('anime-header'); posts.removeChild(adWindow); } function editPostDomWindow(edButtonId) { - let windowForEditing = document.createElement("div"); - let posts = document.getElementById("anime-header"); - windowForEditing.className = "ed-window"; - windowForEditing.id = "ed-window" - var submitButtonId = edButtonId.replace("e", ""); - submitButtonId = "s" + submitButtonId; - windowForEditing.innerHTML = `

${userName}

-
-
-

Путь к изображению:

-

Описание:

+ let windowForEditing = document.createElement('div'); + let posts = document.getElementById('anime-header'); + windowForEditing.className = 'ed-window'; + windowForEditing.id = 'ed-window' + var submitButtonId = edButtonId.replace('e', ''); + submitButtonId = 's' + submitButtonId; + windowForEditing.innerHTML = `

${userName}

+
+
+

Путь к изображению:

+

Описание:

-