From 94f3dedaecd3a7ad1e6ec0ae6f37d0ccf8e57c48 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 21 Nov 2022 18:13:13 -0300 Subject: [PATCH] refactor: removendo erros do javascript --- .editorconfig | 18 +++---- src/scripts/app.js | 3 -- src/scripts/components/form.js | 84 ++++++++++++++++++++++++-------- src/scripts/components/slider.js | 50 ------------------- src/styles/partials/form.scss | 2 +- src/styles/partials/slider.scss | 8 +-- src/templates/index.html | 55 ++------------------- 7 files changed, 82 insertions(+), 138 deletions(-) delete mode 100644 src/scripts/components/slider.js diff --git a/.editorconfig b/.editorconfig index 9e434d8..3b76e68 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,13 +1,13 @@ # EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file -root = true +# root = true -[*] -indent_style = space -indent_size = 4 -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true -max_line_length = 100 +# [*] +# indent_style = space +# indent_size = 4 +# end_of_line = lf +# charset = utf-8 +# trim_trailing_whitespace = true +# insert_final_newline = true +# max_line_length = 100 diff --git a/src/scripts/app.js b/src/scripts/app.js index f9c1912..f4abf8e 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -1,8 +1,5 @@ import {Form} from "./components/form"; -import {Slider} from "./components/slider"; - document.addEventListener("DOMContentLoaded",function(){ new Form(); - new Slider(); }); diff --git a/src/scripts/components/form.js b/src/scripts/components/form.js index c45cdab..e11c97c 100644 --- a/src/scripts/components/form.js +++ b/src/scripts/components/form.js @@ -25,43 +25,70 @@ export class Form { ]; this.selectors(); this.events(); + this.renderListItems(); + if (window.innerWidth > 1024){ + this.addSlick(); + } } selectors() { - this.preview = document.querySelector(".input-image-content"); - this.form = document.querySelector("form"); + this.inputImage = document.querySelector("#inputImage"); + this.imagePreview = document.getElementsByClassName("image"); + this.form = document.querySelector(".form"); this.itemTitle = document.querySelector("#titleInput"); this.itemDescription = document.querySelector("#descriptionText"); this.slider = document.querySelector(".slider-list"); } events() { - this.preview.addEventListener("change", (e) => { - document.querySelector("img").src = URL.createObjectURL(e.target.files[0]); - }); + this.inputImage.addEventListener("change", this.addImage.bind(this), false); this.form.addEventListener("submit", this.addItemToList.bind(this)); + } + addImage(event){ + const inputFile = event.target; + const file = inputFile.files[0]; + if (file){ + const reader = new FileReader(); + reader.addEventListener("load", (imagem) => { + const readerTarget = imagem.target; + const img = document.createElement("img"); + img.src = readerTarget.result; + img.classList.add("image"); + this.imagePreview[0].innerHTML = ""; + this.imagePreview[0].appendChild(img); + }); + reader.readAsDataURL(file); + } else{ + this.imagePreview[0].innerHTML; + } } addItemToList(event) { event.preventDefault(); - - const itemImage = event.target["buttonAdicionar"].value.src; - const itemTitle = event.target["titleInput"].value.title; - const itemDescription = event.target["descriptionText"].value.description; - - if (itemImage !== "") { + const itemImage = this.imagePreview[0].children[0].src; + const itemTitle = event.target["titleInput"].value; + const itemDescription = event.target["descriptionText"].value; + + if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") { const item = { - src: itemImage, - title: itemTitle, - description: itemDescription, - }; + src: itemImage, + title: itemTitle, + description: itemDescription, + }; - this.list.push(item); + this.list.push(item); - this.renderListItems(); - this.resetInputs(); + this.renderListItems(); + if (window.innerWidth > 1024){ + this.removeSlick(); } + if (window.innerWidth > 1024){ + this.addSlick(); + } + this.resetInputs(); + } + } renderListItems() { @@ -70,17 +97,32 @@ export class Form { this.list.forEach(function (item) { itemsSlider += `
  • - +

    ${item.title}

    -

    ${item.description}

    +
    ${item.description}
    • `; }); this.slider.innerHTML = itemsSlider; } + addSlick () { + $(".slider-list").slick({ + infinite: true, + slidesToShow: 4, + slidesToScroll: 1, + variableWidth: true, + arrows: true, + dots: true, + }); + } + + removeSlick () { + $(".slider-list").slick('unslick'); + } + resetInputs() { - this.preview.value = ""; + this.imagePreview[0].innerHTML = ""; this.itemTitle.value = ""; this.itemDescription.value = ""; } diff --git a/src/scripts/components/slider.js b/src/scripts/components/slider.js deleted file mode 100644 index d2f05cf..0000000 --- a/src/scripts/components/slider.js +++ /dev/null @@ -1,50 +0,0 @@ -export class Slider { - constructor() {} - - selectors() {} - - events() {} -} - -$(".slider-list").slick({ - infinite: true, - slidesToShow: 4, - slidesToScroll: 4, - variableWidth: true, - arrows: true, - dots: true, - responsive: [ - { - breakpoint: 1024, - settings: { - slidesToShow: 4, - slidesToScroll: 4, - infinite: true, - dots: false, - arrows: false, - vertical: true, - verticalScrolling: false, - swipe: false, - variableWidth: true, - draggable: false, - - - } - }, - { - breakpoint: 375, - settings: { - slidesToShow: 4, - slidesToScroll: 4, - infinite: true, - dots: false, - arrows: false, - vertical: true, - verticalScrolling: false, - swipe: false, - variableWidth: true, - draggable: false - } - }, - ], -}); diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index e46440c..81267fd 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -128,7 +128,7 @@ $breakpoint-desk: 2500px; } form { - width: 65.6909%; + width: 60.072%; height: 416px; .form-container { .form-inputs { diff --git a/src/styles/partials/slider.scss b/src/styles/partials/slider.scss index da12d97..0587c1d 100644 --- a/src/styles/partials/slider.scss +++ b/src/styles/partials/slider.scss @@ -47,7 +47,7 @@ h2 { display: none; } } - & p { + & figcaption { padding: 0 24px 0 24px; font-weight: 400; font-size: 16px; @@ -142,7 +142,7 @@ $breakpoint-desk: 2500px; line-height: 56px; height: 120px; } - & p { + & figcaption { font-weight: 400; font-size: 32px; line-height: 48px; @@ -212,7 +212,7 @@ $breakpoint-tablet: 1024px; & h3 { color: $title-item-list-color; } - & p { + & figcaption { padding: 0 24px 24px 24px; &::-webkit-scrollbar { display: none; @@ -268,7 +268,7 @@ $breakpoint-mobile: 375px; & h3 { color: $title-item-list-color; } - & p { + & figcaption { padding: 0 24px 24px 24px; &::-webkit-scrollbar { display: none; diff --git a/src/templates/index.html b/src/templates/index.html index c5009b4..1d24e68 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -18,18 +18,18 @@

    Adicionar um Ponto Turístico

    -
    +
    - - preview da imagem + +
    - +
    @@ -38,52 +38,7 @@

    Pontos Turísticos

    -
      -
    • - -

      Pão de Açúcar

      -

      - Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa - amet sint. Velit officia consece duis enim velit mollit. -

      -
      • -
    • - -

      Cristo Redentor

      -

      - Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa - amet sint. Velit officia consece duis enim velit mollit. -

      -
      • -
    • - -

      Ilha Grande

      -

      - Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa - amet sint. Velit officia consece duis enim velit mollit. -

      -
      • -
    • - -

      Centro Histórico de Paraty

      -

      - Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa - amet sint. Velit officia consece duis enim velit mollit. -

      -
      • +