feat(TouristAttractionsAutoJs): Desenvolvendo automatização Js
This commit is contained in:
parent
ff228b5d3a
commit
d2b8d9beea
15
gulpfile.js
15
gulpfile.js
@ -1,5 +1,12 @@
|
||||
const { src, dest, watch } = require('gulp');
|
||||
const sass = require('gulp-sass')(require('sass'));
|
||||
const browserify = require('browserify');
|
||||
const Babelify = require('babelify');
|
||||
const source = require('vinyl-source-stream');
|
||||
const buffer = require('vinyl-buffer');
|
||||
const uglify = require('gulp-uglify');
|
||||
|
||||
|
||||
|
||||
function styles() {
|
||||
return src('src/styles/main.scss').pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest('dist'));
|
||||
@ -7,8 +14,14 @@ function styles() {
|
||||
};
|
||||
|
||||
|
||||
function scripts () {
|
||||
return browserify('src/scripts/app.js').transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest('dist'));
|
||||
}
|
||||
|
||||
|
||||
function sentinel () {
|
||||
watch('src/styles/*.scss', {ignoreInitial: false}, styles);
|
||||
watch('src/styles/**/*.scss', {ignoreInitial: false}, styles);
|
||||
watch('src/scripts/**/*.js', {ignoreInitial: false}, scripts);
|
||||
}
|
||||
|
||||
|
||||
|
||||
6464
package-lock.json
generated
6464
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -14,8 +14,15 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"babelify": "^10.0.0",
|
||||
"browserify": "^17.0.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-sass": "^5.1.0",
|
||||
"sass": "^1.56.1"
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"sass": "^1.56.1",
|
||||
"vinyl-buffer": "^1.0.1",
|
||||
"vinyl-source-stream": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="../src/scripts/js.js"></script>
|
||||
<script src="../dist/bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
6
src/scripts/app.js
Normal file
6
src/scripts/app.js
Normal file
@ -0,0 +1,6 @@
|
||||
import { TouristAttractions } from "./components/TouristAttractions";
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
new TouristAttractions();
|
||||
});
|
||||
121
src/scripts/components/TouristAttractions.js
Normal file
121
src/scripts/components/TouristAttractions.js
Normal file
@ -0,0 +1,121 @@
|
||||
export class TouristAttractions {
|
||||
constructor () {
|
||||
this.list = [];
|
||||
|
||||
this.selectors();
|
||||
this.events();
|
||||
}
|
||||
|
||||
selectors () {
|
||||
this.inputFile = document.querySelector('#input__img');
|
||||
this.labelInput = document.querySelector('.label-input');
|
||||
this.textLabelInput = "Imagem";
|
||||
this.labelInput.innerText = this.textLabelInput;
|
||||
|
||||
this.form = document.querySelector('.form__tourist-attractions');
|
||||
this.ulList = document.querySelector('.wrapper-ul__cards');
|
||||
|
||||
this.inputTitle = document.querySelector('.input-text__titulo');
|
||||
this.inputDescription = document.querySelector('.input-text__descricao');
|
||||
}
|
||||
|
||||
events () {
|
||||
this.inputFile.addEventListener('change', this.imgPreview.bind(this));
|
||||
this.form.addEventListener('submit', this.addProperty.bind(this));
|
||||
}
|
||||
|
||||
imgPreview (e) {
|
||||
const inputTarget = e.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);
|
||||
|
||||
});
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
this.labelInput.innerText = "";
|
||||
this.labelInput.style.border = "none";
|
||||
|
||||
|
||||
}else {
|
||||
this.labelInput.innerText = this.textLabelInput;
|
||||
this.labelInput.style.border = "";
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
addProperty (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const spotImg = this.labelInput.querySelector('.img-result');
|
||||
const spotTitle = e.target['input-title'].value
|
||||
const spotDescription = e.target['input-description'].value
|
||||
|
||||
|
||||
if (spotImg != '' && spotTitle != '' && spotDescription != '') {
|
||||
|
||||
const spot = {
|
||||
image: spotImg.src,
|
||||
titulo: spotTitle,
|
||||
description: spotDescription,
|
||||
};
|
||||
|
||||
this.list.push(spot);
|
||||
|
||||
this.renderListItems();
|
||||
this.resetInputs();
|
||||
|
||||
}else {
|
||||
alert('Preencha todos os campos')
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
renderListItems () {
|
||||
let spotStructure = '';
|
||||
|
||||
this.list.forEach( function (i) {
|
||||
spotStructure += `
|
||||
<li class="wrapper-cards__li">
|
||||
|
||||
<div class="result-card__img">
|
||||
<img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
|
||||
</div>
|
||||
|
||||
<div class="result-card__text">
|
||||
<h2 class="result-card__title">${i.titulo}</h2>
|
||||
<p class="result-card__description">${i.description}</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
|
||||
this.ulList.innerHTML = spotStructure;
|
||||
};
|
||||
|
||||
|
||||
resetInputs () {
|
||||
this.inputTitle.value = '';
|
||||
this.inputDescription.value = '';
|
||||
|
||||
this.labelInput.innerText = this.textLabelInput;
|
||||
this.labelInput.style.border = "";
|
||||
};
|
||||
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
const list = [];
|
||||
|
||||
const inputFile = document.querySelector('#input__img');
|
||||
const labelInput = document.querySelector('.label-input');
|
||||
const textLabelInput = "Imagem";
|
||||
labelInput.innerText = textLabelInput;
|
||||
|
||||
const form = document.querySelector('.form__tourist-attractions');
|
||||
const ulList = document.querySelector('.wrapper-ul__cards');
|
||||
|
||||
const inputTitle = document.querySelector('.input-text__titulo');
|
||||
const inputDescription = document.querySelector('.input-text__descricao');
|
||||
|
||||
//Image Preview
|
||||
inputFile.addEventListener('change', (e) => {
|
||||
const inputTarget = e.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');
|
||||
|
||||
labelInput.appendChild(img);
|
||||
|
||||
});
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
labelInput.innerText = "";
|
||||
labelInput.style.border = "none";
|
||||
|
||||
|
||||
}else {
|
||||
labelInput.innerText = textLabelInput;
|
||||
labelInput.style.border = "";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//----------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const spotImg = labelInput.querySelector('.img-result');
|
||||
const spotTitle = e.target['input-title'].value
|
||||
const spotDescription = e.target['input-description'].value
|
||||
|
||||
|
||||
if (spotImg != '' && spotTitle != '' && spotDescription != '') {
|
||||
|
||||
const spot = {
|
||||
image: spotImg.src,
|
||||
titulo: spotTitle,
|
||||
description: spotDescription,
|
||||
};
|
||||
|
||||
list.push(spot);
|
||||
|
||||
renderListItems();
|
||||
resetInputs();
|
||||
|
||||
}else {
|
||||
alert('Preencha todos os campos')
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
function renderListItems () {
|
||||
let spotStructure = '';
|
||||
|
||||
list.forEach(function (i) {
|
||||
spotStructure += `
|
||||
<li class="wrapper-cards__li">
|
||||
|
||||
<div class="result-card__img">
|
||||
<img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
|
||||
</div>
|
||||
|
||||
<div class="result-card__text">
|
||||
<h2 class="result-card__title">${i.titulo}</h2>
|
||||
<p class="result-card__description">${i.description}</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
|
||||
ulList.innerHTML = spotStructure;
|
||||
};
|
||||
|
||||
function resetInputs () {
|
||||
inputTitle.value = '';
|
||||
inputDescription.value = '';
|
||||
|
||||
labelInput.innerText = textLabelInput;
|
||||
labelInput.style.border = "";
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user