feat(TouristAttractions): Automatiza Img

This commit is contained in:
William Simão Cavalcante 2022-11-21 18:55:57 -03:00
parent 354ab5660e
commit 11e908c703
3 changed files with 20 additions and 18 deletions

View File

@ -12,6 +12,10 @@ const paths = {
all: 'src/templates/**/*.html' all: 'src/templates/**/*.html'
}, },
img: {
all: 'src/assets/*.png',
},
styles: { styles: {
all: 'src/styles/**/*.scss', all: 'src/styles/**/*.scss',
main: 'src/styles/main.scss', main: 'src/styles/main.scss',
@ -26,19 +30,17 @@ const paths = {
}; };
function html () { function html () {
return src(paths.html.all,).pipe(dest(paths.output)); return src(paths.html.all).pipe(dest(paths.output));
} }
function styles() { 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));
}; };
function server () { function server () {
connect.server({ connect.server({
root: paths.output, root: 'dist',
livereload: true, livereload: true,
port: 3000, port: 3000,
}) })
@ -48,10 +50,16 @@ function styles() {
watch(paths.html.all, {ignoreInitial: false}, html); watch(paths.html.all, {ignoreInitial: false}, html);
watch(paths.styles.all, {ignoreInitial: false}, styles); watch(paths.styles.all, {ignoreInitial: false}, styles);
watch(paths.scripts.all, {ignoreInitial: false}, scripts); watch(paths.scripts.all, {ignoreInitial: false}, scripts);
watch(paths.img.all, {ignoreInitial: false}, img);
} }
function scripts () { 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));
} }
function img () {
return src(paths.img.all).pipe(dest(paths.output));
}
exports.default = parallel (server, sentinel); exports.default = parallel (server, sentinel);

View File

@ -71,7 +71,7 @@ export class TouristAttractions {
addProperty (e) { addProperty (e) {
e.preventDefault(); e.preventDefault();
const spotImg = this.labelInput.querySelector('.img-result'); const spotImg = this.labelInput.children[0].src
const spotTitle = e.target['input-title'].value const spotTitle = e.target['input-title'].value
const spotDescription = e.target['input-description'].value const spotDescription = e.target['input-description'].value
@ -79,7 +79,7 @@ export class TouristAttractions {
if (this.spotImg != '' && spotTitle != '' && spotDescription != '') { if (this.spotImg != '' && spotTitle != '' && spotDescription != '') {
const spot = { const spot = {
image: spotImg.src, image: spotImg,
titulo: spotTitle, titulo: spotTitle,
description: spotDescription, description: spotDescription,
}; };
@ -97,8 +97,6 @@ export class TouristAttractions {
}; };
renderListItems () { renderListItems () {
let spotStructure = ''; let spotStructure = '';
@ -110,7 +108,7 @@ export class TouristAttractions {
<img class="result-card__img" src="${i.image}" alt="Imagem Turismo" /> <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
</div> </div>
<div class="result-card__text"> <div class="result-card__text">S
<div class="card__h2"> <div class="card__h2">
<p class="result-card__title">${i.titulo}</p> <p class="result-card__title">${i.titulo}</p>
</div> </div>
@ -135,4 +133,5 @@ export class TouristAttractions {
this.labelInput.style.border = ""; this.labelInput.style.border = "";
}; };
} }

View File

@ -21,7 +21,7 @@
<label class="label-input" for="input__img"> <label class="label-input" for="input__img">
</label> </label>
<input id="input__img" type="file" data-test="input-image"> <input id="input__img" type="file" accept="image/*" data-test="input-image">
</div> </div>
<div class="wrapper-input__text"> <div class="wrapper-input__text">
@ -44,19 +44,14 @@
<div class="container-cards"> <div class="container-cards">
<div class="container-cards__wrapper">
<ul class="wrapper-ul__cards"></ul> <ul class="wrapper-ul__cards"></ul>
</div>
</div> </div>
</main> </main>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../scripts/components/slick.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../scripts/components/slick.min.js"></script>
<script src="bundle.js"></script> <script src="bundle.js"></script>