From f9b0dac1466c0a921fda4e3e4b064d4f85a2be3d Mon Sep 17 00:00:00 2001 From: WillSimao Date: Wed, 23 Nov 2022 13:00:43 -0300 Subject: [PATCH] feat(Feature/TouristAttractions): Soluciona erro js Preview, e aplica Slick.js --- gulpfile.js | 16 +- .../img1.png} | Bin .../cristoRedentor.png => assets/img2.png} | Bin .../ilhaGrande.png => assets/img3.png} | Bin .../paoDeAcucar.png => assets/img4.png} | Bin src/assets/setaDi.svg | 3 + src/scripts/components/TouristAttractions.js | 158 +++++++++++------- .../{components => utilities}/slick.min.js | 0 src/styles/partials/form.scss | 90 +++++----- src/templates/index.html | 7 +- 10 files changed, 163 insertions(+), 111 deletions(-) rename src/{Assets/centroHistoricodeParaty.png => assets/img1.png} (100%) rename src/{Assets/cristoRedentor.png => assets/img2.png} (100%) rename src/{Assets/ilhaGrande.png => assets/img3.png} (100%) rename src/{Assets/paoDeAcucar.png => assets/img4.png} (100%) create mode 100644 src/assets/setaDi.svg rename src/scripts/{components => utilities}/slick.min.js (100%) diff --git a/gulpfile.js b/gulpfile.js index 7512b4c..2f9ad3e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -26,15 +26,19 @@ const paths = { main: 'src/scripts/app.js', }, + utilities: { + all: 'src/scripts/utilities/*.js' + }, + output: 'dist', }; function html () { - return src(paths.html.all).pipe(dest(paths.output)); + return src(paths.html.all).pipe(dest(paths.output)).pipe(connect.reload()); } function styles() { - return src(paths.styles.main).pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest(paths.output)); + return src(paths.styles.main).pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest(paths.output)).pipe(connect.reload()); }; @@ -51,13 +55,17 @@ function styles() { watch(paths.styles.all, {ignoreInitial: false}, styles); watch(paths.scripts.all, {ignoreInitial: false}, scripts); watch(paths.img.all, {ignoreInitial: false}, img); + watch(paths.utilities.all, {ignoreInitial: false}, utilities); + } + + function utilities () { + return src(paths.utilities.all).pipe(dest(paths.output)); } function scripts () { - return browserify(paths.scripts.main).transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest(paths.output)); + return browserify(paths.scripts.main).transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest(paths.output)).pipe(connect.reload()); } - function img () { return src(paths.img.all).pipe(dest(paths.output)); } diff --git a/src/Assets/centroHistoricodeParaty.png b/src/assets/img1.png similarity index 100% rename from src/Assets/centroHistoricodeParaty.png rename to src/assets/img1.png diff --git a/src/Assets/cristoRedentor.png b/src/assets/img2.png similarity index 100% rename from src/Assets/cristoRedentor.png rename to src/assets/img2.png diff --git a/src/Assets/ilhaGrande.png b/src/assets/img3.png similarity index 100% rename from src/Assets/ilhaGrande.png rename to src/assets/img3.png diff --git a/src/Assets/paoDeAcucar.png b/src/assets/img4.png similarity index 100% rename from src/Assets/paoDeAcucar.png rename to src/assets/img4.png diff --git a/src/assets/setaDi.svg b/src/assets/setaDi.svg new file mode 100644 index 0000000..74e9571 --- /dev/null +++ b/src/assets/setaDi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scripts/components/TouristAttractions.js b/src/scripts/components/TouristAttractions.js index 4ae6b01..d7f8608 100644 --- a/src/scripts/components/TouristAttractions.js +++ b/src/scripts/components/TouristAttractions.js @@ -1,16 +1,42 @@ export class TouristAttractions { constructor () { - this.list = []; + this.list = [ + { + image: 'img1.png', + titulo: 'Pão de Açucar', + description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', + }, + { + image: 'img2.png', + titulo: 'Cristo Redentor', + description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', + }, + { + image: 'img3.png', + titulo: 'Ilha Grande', + description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', + }, + { + image: 'img4.png', + titulo: 'Centro Histórico de Paraty', + description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', + }, + + ]; this.selectors(); this.events(); + this.carrossel(); + this.renderListItems(); } selectors () { this.inputFile = document.querySelector('#input__img'); - this.labelInput = document.querySelector('.label-input'); - this.textLabelInput = "Imagem"; - this.labelInput.innerText = this.textLabelInput; + this.spanInput = document.querySelector('.input__span'); + this.textSpanInput = "Imagem"; + this.spanInput.innerText = this.textSpanInput; + + this.labelInput = document.querySelector('.label-input') this.form = document.querySelector('.form__tourist-attractions'); this.ulList = document.querySelector('.wrapper-ul__cards'); @@ -19,64 +45,50 @@ export class TouristAttractions { this.inputDescription = document.querySelector('.input-text__descricao'); - } events () { - this.inputFile.addEventListener('change', this.imgPreview.bind(this)); + this.inputFile.addEventListener('change', this.imgPreview.bind(this), false); this.form.addEventListener('submit', this.addProperty.bind(this)); } - - imgPreview (e) { - const inputTarget = e.target; + imgPreview (i) { + const inputTarget = i.target; const file = inputTarget.files[0]; - - - if (file) { const reader = new FileReader(); - - - reader.addEventListener('load', (e) => { const readerTarget = e.target; - const img = document.createElement('img'); img.src = readerTarget.result; img.classList.add('img-result'); - - - this.labelInput.appendChild(img); - + this.spanInput.innerHTML = ""; + this.labelInput.style.border = "none"; + this.spanInput.appendChild(img); }); - reader.readAsDataURL(file); - - this.labelInput.innerText = ""; - this.labelInput.style.border = "none"; + i.target.value = ''; }else { - this.labelInput.innerText = this.textLabelInput; + this.spanInput.innerText = this.textSpanInput; this.labelInput.style.border = ""; } }; - addProperty (e) { e.preventDefault(); - const spotImg = this.labelInput.children[0].src + const spotImg = this.spanInput.children[0].src const spotTitle = e.target['input-title'].value const spotDescription = e.target['input-description'].value - if (this.spotImg != '' && spotTitle != '' && spotDescription != '') { + if (spotImg != '' && spotTitle != '' && spotDescription != '') { const spot = { image: spotImg, @@ -84,8 +96,8 @@ export class TouristAttractions { description: spotDescription, }; - this.list.push(spot); + this.list.push(spot); this.renderListItems(); this.resetInputs(); @@ -94,44 +106,64 @@ export class TouristAttractions { } -}; + }; + renderListItems () { + let spotStructure = ''; - renderListItems () { - let spotStructure = ''; - - this.list.forEach( function (i) { + this.list.forEach((i) => { spotStructure += ` -
  • - -
    - Imagem Turismo -
    - -
    S -
    -

    ${i.titulo}

    -
    -
    -

    ${i.description}

    -
    -
    - -
    • - `; - }); - - this.ulList.innerHTML = spotStructure; - }; +
  • +
    + Imagem Turismo +
    +
    +

    ${i.titulo}

    +

    ${i.description}

    +
    +
    • + `; + }); - resetInputs () { - this.inputTitle.value = ''; - this.inputDescription.value = ''; - - this.labelInput.innerText = this.textLabelInput; - this.labelInput.style.border = ""; - }; + this.removeSlick(); + this.ulList.innerHTML = spotStructure; + this.carrossel(); -} + }; + + carrossel () { + + if(window.innerWidth >= 1024) { + $('.wrapper-ul__cards').slick({ + dots: true, + infinite: true, + slidesToShow: 3, + slidesToScroll: 1, + arrows: true, + variableWidth: true, + }) + + } + }; + + removeSlick () { + if(window.innerWidth >= 1024) { + + $('.wrapper-ul__cards').slick('unslick'); + } + }; + + resetInputs () { + this.inputTitle.value = ''; + this.inputDescription.value = ''; + + this.labelInput.style.border = ""; + + this.spanInput.innerText = this.textSpanInput; + this.spanInput.style.border = ""; + }; + + + } diff --git a/src/scripts/components/slick.min.js b/src/scripts/utilities/slick.min.js similarity index 100% rename from src/scripts/components/slick.min.js rename to src/scripts/utilities/slick.min.js diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index 0e526a1..f75ff47 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -40,6 +40,14 @@ cursor: pointer; } + .input__span { + display: flex; + justify-content: center; + align-items: center; + width: 343px; + height: 212px; + } + .wrapper-input__img input { display: none; margin-right: 20px; @@ -144,57 +152,55 @@ } - .container-cards { - display: flex; - padding: 41px 63px; + .container-cards { + padding:41px 63px; - .wrapper-ul__cards { - display: flex; - column-gap: 10px; + .wrapper-ul__cards { + display: flex; - .wrapper-cards__li { - width: 279px; + .wrapper-cards__li { + width: 279px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); + border-radius: 8px; + margin: 0 10.5px; + .container-card__img { + object-fit: cover; + border-radius: 8px; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); - border-radius: 8px; - - .result-card__img { - object-fit: cover; - width: 100%; - } - - .result-card__text { - margin: 24px; - - .card__h2 { - margin-bottom: 8px; - width: 231px; - height: 60px; - - font-family: 'Poppins', sans-serif; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 28px; - color: $black-500; + .result-card__img { + width: 100%; + } } - .card__p { - width: 231px; - height: 96px; + .container__text { + margin: 24px; - font-family: 'Roboto', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 24px; - color: $grey-500; + .result-card__title { + font-family: 'Poppins', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $black-500; + + margin-bottom: 8px; + width: 231px; + } + + .result-card__description { + font-family: 'Roboto', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $grey-500; + } } + } + + } - - } - } diff --git a/src/templates/index.html b/src/templates/index.html index 3dab504..bb1bdd5 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -5,6 +5,8 @@ + + Tourist Attractions @@ -19,13 +21,14 @@
    - +
    @@ -51,7 +54,7 @@ - +