So im building a nuxt application, and I want to the Page to scroll down to a specific element, after I clicked a button.
The button and the element are in two different components, but on the same Page.
So I read that this is a problem in Nuxt.js and you have to create a specific file to make it work.
I created the folder called app and in app I created the file router.scrollBehavior.js the code of the file it the following
export default async function (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
const findEl = (hash, x) => {
return document.querySelector(hash) ||
new Promise((resolve, reject) => {
if (x > 50) {
return resolve()
}
setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100)
})
}
if (to.hash) {
const el = await findEl(to.hash)
if ('scrollBehavior' in document.documentElement.style) {
return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
} else {
return window.scrollTo(0, el.offsetTop)
}
}
return { x: 0, y: 0 }
}
My button is in the hero file, i created a click function called goto()
<template>
<section class="hero-section">
<div class="left">
<header id="hero-text" class="hero-header">
<h1 #click="goto()">Web Development <br> Web Design</h1>
<p>Hi, ich bin Alex. Ich designe und programmiere moderne, kreative und schnelle Webseiten. Umgesetzt mit den neusten Technologien.</p>
</header>
<UiButtonApp
id="hero-btn"
text="Schau dir meine Arbeit an!"
/>
</div>
<div class="right">
<img id="hero-img" src="~/assets/img/hero-img.jpg" alt="hero-img">
<div id="hero-object"></div>
<img class="dots" id="hero-dots" src="~/assets/img/dots.png" alt="logo">
</div>
</section>
</template>
<script>
import { gsap } from "gsap";
export default {
data(){
return{
}
},
methods: {
goto() {
//what code to put here
}
}
}
How can I now call the function? And make it work?
If you want to use router.scrollBehavior.js. Set a router action and send it to a especific hash:
methods: {
goto() {
this.$router.replace({ name: this.$route.name, hash: '#example' });
}
}
Don`t forget to set id in the component to go.
<div id="example">
</div>
Related
i try to build a little clothing web shop with nuxtjs. You can choose the color on the details page. The details page represents a pice of clothing. The ColorMenu is a component. If you choose something a color, it will emit it back to the details page and will send a new details request to my backend.
However, changing the color only works if you don't choose another piece of clothing. If you choose another piece of clothing (so the route parameters will change) and choose another color in the menu, there is a always an error that it cannot load anything. it seems that it sends repeated requests until the request is blocked.
The details routes are built according to this scheme: localhost/details/{sellableId}/{ideaId}/{appearanceId}
Details Page:
<template>
<section class="section">
<div v-if="details">
<div class="columns">
<div class="column">
<ImageCaroussel :images="details.images"></ImageCaroussel>
</div>
<div class="column">
<h3>Farben</h3>
<ColorMenu
:appearances="productType.appearances"
:appearanceIds="details.appearanceIds"
></ColorMenu>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapState } from 'vuex'
import Dropdown from '~/components/details/Dropdown.vue'
import ColorMenu from '~/components/details/ColorMenu.vue'
import ImageCaroussel from '~/components/details/ImageCaroussel.vue'
export default {
created() {
this.$nuxt.$on('selected', ($event) => (this.selected = $event))
this.$nuxt.$on('selectedColor', ($event) => this.setSelectedColor($event))
},
data() {
return {
modal: false,
selected: '',
selectedColor: '',
}
},
async asyncData({ store, params }) {
console.log('asyncfirst')
if (params.sellableId && params.appearanceId && params.ideaId) {
await store.dispatch('details/get_details', {
sellableId: params.sellableId,
appearanceId: params.appearanceId,
ideaId: params.ideaId,
})
let sellableId = params.sellableId
let appearanceId = params.appearanceId
let ideaId = params.ideaId
console.log('asyncsecond!')
return { sellableId, appearanceId, ideaId }
}
},
mounted() {
this.sellableId = this.$route.params.sellableId
this.appearanceId = this.$route.params.appearanceId
this.ideaId = this.$route.params.ideaId
console.log('Mounted!')
},
components: {
Dropdown,
ColorMenu,
ImageCaroussel,
},
computed: {
...mapState({
details: (state) => {
return state.details.details
},
currency: (state) => {
return state.sellable.currency
},
productType: (state) => {
return state.details.productType
},
}),
},
methods: {
checkout: async function (sellableId, size, appearanceId) {
let link = await this.$backendrepositories.basket.checkout(
sellableId,
size,
appearanceId
)
if (link.status === 200 && link.data) {
this.modal = true
setTimeout(() => {
window.location.href = link.data.link
}, 3000)
}
},
setSelectedColor: async function (event) {
this.selectedColor = event
await this.$store.dispatch('details/get_details', {
sellableId: this.sellableId,
appearanceId: this.selectedColor,
ideaId: this.ideaId,
})
},
},
}
</script>
ColorMenu Component:
<template>
<div>
<div
v-for="(cell, index) in appearances"
:key="index"
style="display: inline-block"
>
<label v-if="appearanceIds.includes(cell.id)" class="self-container">
<input type="radio" checked="checked" name="color" />
<span
class="checkmark"
:style="`background-color: ${cell.colors[0].value}`"
#click="select(cell.id)"
></span>
</label>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
selected: '',
}
},
props: ['appearances', 'appearanceIds'],
methods: {
select(select) {
this.selected = select
this.$nuxt.$emit('selectedColor', this.selected)
},
},
}
</script>
There is a live demo at https://akano-frontend.vercel.app/
I am currently working on an application that involves scrolling through members from two different lists. Once you click one you see their image and bio. We added up and down arrows to scroll through their biography, but when i click the down arrow it seems that the active class on the carousel slide now jumps to the last member in my array, but still displays the member i was already on. To add to that I cannot swipe back and forth once i am on a member (this is something that I could do previously.) I know this probably isn't the best description and there is only so much code I can show, as I cannot display the entire application.
I wanted to also note that if I refresh my page, everything works as expected. Does this mean something isn't initializing correctly?
this is the code specific to the page i am talking about:
<template>
<div class="member-info-carousel">
<div class="header">
<h2 v-if="founderChairman === true">Member List One</h2>
<h2 v-else>Member List Two</h2>
<img src="../assets/logo.png" alt="Logo" />
</div>
<carousel :minSwipeDistance="384" :perPage="1" :paginationEnabled="false" :navigationEnabled="true" navigationNextLabel="<i>NEXT</i>"
navigationPrevLabel="<i>BACK</i>" :navigateTo="selectedListIndex" #pagechange="OnPageChange">
<slide v-for="(member, index) in selectedList" :key="index">
<div class="member-bio-page" :member="member" v-on:showContent="showContent">
<div class="bio">
<div class="portrait-image">
<img :src="member.imgSrc" />
</div>
<div class="bio-container">
<div class="inner-scroll" v-bind:style="{top: scrollVar + 'px'}">
<div class="english"></div>
<div class="pin-name">
<img :src="member.pin" />
<h1>{{ member.name }}</h1>
</div>
<div class="description-container">
<div class="para">
<p class="quote" v-html="member.quote"></p>
<p v-html="member.bio"></p>
<div class="spanish"></div>
<p class="quote" v-html="member.spanishQuote"></p>
<p v-html="member.spanishBio"></p>
</div>
</div>
</div>
</div>
<div class="scroll-buttons">
<div>
<!-- set the class of active is the scroll variable is less than 0-->
<img class="btn-scroll" v-bind:class="{ 'active': scrollVar < 0 }" #click="scrollUp" src="#/assets/arrow-up.png">
</div>
<div>
<!-- set the class of active is the scroll variable is greater than the height of the scrollable inner container-->
<img class="btn-scroll" v-bind:class="{ 'active': scrollVar > pageChangeHeight }" #click="scrollDown" src="#/assets/arrow-down.png">
</div>
</div>
<div class="eng-span">
English
Español
</div>
</div>
<div class="play-button">
<!-- if the array members has a property of video, then the play button will show on the slide. If not it will not show the image -->
<img v-if="member.hasOwnProperty('video')" #click="showContent" src="#/assets/play-button.png">
</div>
</div>
<!-- <MemberBioPage :member="member" v-on:showContent="showContent"/> -->
</slide>
</carousel>
<modal name="video-modal"
:width="1706"
:height="960">
<video width="1706" height="960" :src="(selectedList && selectedList[this.currentPage]) ? selectedList[this.currentPage].video : ''" autoplay />
</modal>
<div class="footer-controls">
<div class="footer-bar">
<p>Tap Back or Next to view additional profiles.</p>
<p>Tap the arrows to scroll text up or down.</p>
</div>
<div class="nav-container">
<img class="nav-bubble" src="#/assets/navigation-bubble-bio-page.png" alt="An image where the back, next and close button sit" />
</div>
<button class="close-button" #click="closeInfo">
<img src="#/assets/x-close-button.png" />
CLOSE
</button>
</div>
</div>
</template>
<script>
import { Carousel, Slide } from 'vue-carousel'
export default {
data () {
return {
currentPage: 0,
pageChangeHeight: -10,
scrollVar: 0
}
},
components: {
// MemberBioPage,
Carousel,
Slide
},
mounted () {
this.enableArrows()
},
updated () {
this.enableArrows()
},
computed: {
selectedList () {
return this.$store.state.selectedList
},
selectedListIndex () {
return this.$store.state.selectedListIndex
},
founderChairman () {
return this.$store.state.founderChairman
}
},
methods: {
enableArrows () {
var outerHeight
var innerHeight
if (document.querySelectorAll('.VueCarousel-slide-active').length > 0) {
outerHeight = document.querySelectorAll('.VueCarousel-slide-active .bio-container')[0].clientHeight
innerHeight = document.querySelectorAll('.VueCarousel-slide-active .inner-scroll')[0].clientHeight
} else {
outerHeight = document.querySelectorAll('.VueCarousel-slide .bio-container')[0].clientHeight
innerHeight = document.querySelectorAll('.VueCarousel-slide .inner-scroll')[0].clientHeight
}
this.pageChangeHeight = outerHeight - innerHeight
return this.pageChangeHeight
},
scrollUp () {
this.scrollVar += 40
console.log(this.scrollVar += 40)
},
scrollDown () {
this.scrollVar -= 40
console.log(this.scrollVar)
},
OnPageChange (newPageIndex) {
this.scrollVar = 0
this.currentPage = newPageIndex
this.pageChangeHeight = -10
},
closeInfo () {
if (this.$store.state.selectedList === this.$store.state.foundersList) {
this.$store.commit('setSelectedState', this.$store.state.foundersList)
this.$router.push({ name: 'Carousel' })
} else if (this.$store.state.selectedList === this.$store.state.chairmanList) {
this.$store.commit('setSelectedState', this.$store.state.chairmanList)
this.$router.push({ name: 'Carousel' })
}
},
showContent () {
this.$modal.show('video-modal')
},
toEnglish () {
this.scrollVar = 0
},
toSpanish () {
var spanishPos
if (document.querySelectorAll('.VueCarousel-slide-active').length > 0) {
spanishPos = document.querySelectorAll('.VueCarousel-slide-active .spanish')[0].offsetTop
} else {
spanishPos = document.querySelectorAll('.VueCarousel-slide .spanish')[0].offsetTop
}
this.scrollVar = -spanishPos
}
}
}
</script>
This is my store index file:
import Vue from 'vue'
import Vuex from 'vuex'
import chairmans from '#/data/chairmans-club'
import founders from '#/data/founders-circle'
import memoriam from '#/data/in-memoriam'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
finishedLoading: false,
transitioning: false,
foundersList: founders,
chairmanList: chairmans,
selectedList: founders,
selectedListIndex: -1,
founderChairman: true,
inMemoriam: memoriam,
idleTimer: {
id: null,
duration: 1
},
idleTimeoutModal: {
show: false,
duration: 1
}
},
mutations: {
setSelectedState (state, list) {
state.selectedList = list
},
setSelectedListIndex (state, idx) {
state.selectedListIndex = idx
},
showIdleTimeoutModal (state, value) {
state.idleTimeoutModal.show = value
},
founderChairmanClicked (state, data) {
state.founderChairman = data
},
setInMemoriam (state, content) {
state.inMemoriam = content
}
},
actions: {
restartIdleTimer ({ state, commit }) {
clearTimeout(state.idleTimer.id)
state.idleTimer.id = setTimeout(() => {
commit('showIdleTimeoutModal', true)
}, state.idleTimer.duration * 1000)
},
stopIdleTimer ({ state }) {
clearTimeout(state.idleTimer.id)
}
}
})
export default store
and an example of the data i am pulling:
const event = [
{
index: 0,
name: 'Member Name',
carouselImage: require('#/assets/carousel-images/image.jpg'),
drawerImage: require('#/assets/drawer-images/drawerimage.jpg'),
imgSrc: require('#/assets/bio-images/bioimage.jpg'),
quote: '“quote.”',
spanishQuote: `“spanish quote.”`,
bio: '<p>bio copy here</p>',
spanishBio: '<p>spanish bio copy</p>',
pin: require('#/assets/pin.png')
}
]
export default event
Here my code :
~/store/state.js
export default () => ({
selectLanguage: 'fr'
})
~/store/actions.js
export default {
switchToFr (context) {
context.commit('switchToFr')
},
switchToEn (context) {
context.commit('switchToEn')
}
}
~/store/mutations.js
export default {
switchToFr (state) {
state.selectLanguage = 'fr'
},
switchToEn (state) {
state.selectLanguage = 'en'
}
}
~/layouts/inside.js
<b-dropdown-item :value="'fr'" #click="$store.dispatch('switchToFr')" aria-role="listitem">
<div class="media">
<img width='30px' height='30px' src="~/assets/img/icons8-france-48.png"/>
<div class="media-content">
<h3>Français</h3>
</div>
</div>
</b-dropdown-item>
<b-dropdown-item :value="'en'" #click="$store.dispatch('switchToEn')" aria-role="listitem">
<div class="media">
<img width='30px' height='30px' src="~/assets/img/icons8-great-britain-48.png"/>
<img width='30px' height='30px' src="~/assets/img/icons8-usa-48.png"/>
<div class="media-content">
<h3>English</h3>
</div>
</div>
</b-dropdown-item>
data () {
return {
activeLanguage: this.$store.state.selectLanguage,
}
},
watch: {
activeLanguage: function() {
console.log(this.activeLanguage)
}
},
~/pages/projects.js
data () {
return {
activeLanguage: this.$store.state.selectLanguage,
}
},
watch: {
activeLanguage: function() {
console.log(this.activeLanguage)
}
},
The problem :
In layout.js, when i switch language, the data activeLanguage change and the watch do a console.log of the new value.
-> it's okay
In project.js, it does not work, i have to change the page and come back to it to have the new store value in my data.
-> it's bad
Anyone know how to do with project.js to have the same comportment that layout.js ?
Thank's !
I'm surprised that activeLanguage did change for you in layout.js. The data function only gets run once when the component gets created and strings are immutable, so I wouldn't have expected activeLanguage in layout.js to pick up when that the selectLanguage value in the store changed.
You should be getting state values from a computed function instead as recommended by the Vuex docs.
Something like this should do the trick:
computed: {
activeLanguage () {
return this.$store.state.selectLanguage
}
}
For a short version, look at mapState.
I'm new to Navigo JS Router and also it's my first time creating an application with a client side router. I have defined the routes that I am using, and all does not trigger page reload except whenever I navigate to the home page.
Search.js
const Search = {
render: () => {
return `
<section class="section">
<div class="row topbar">
<div class="col-xs-12 col-sm-3">
<h2 class="title text-xs-center">
Home Page
</h2>
</div>
</div>
</section>
`;
}
}
Detail.js
const Detail = {
render: () => {
return `
<section class="section">
<div class="row topbar">
<div class="col-xs-12 col-sm-3">
<h2 class="title text-xs-center">
Home Page
</h2>
</div>
</div>
</section>
`;
}
}
Searchbar.js
const Searchbar = {
render: async () => {
return `
<div class="site-search-container pull-right" id="site-search-container">
<div class="link-search-all">
View all
</div>
</div>`;
}
}
index.js
const render = async (view) => {
const header = null || document.getElementsByTagName('header')[0];
const content = null || document.getElementById('content');
const footer = null || document.getElementsByTagName('footer')[0];
// Render the Header and footer of the page
header.innerHTML = await Header.render();
await Header.after_render();
footer.innerHTML = await Footer.render();
await Footer.after_render();
content.innerHTML = await view.render();
await view.after_render();
};
const router = new Navigo(null, true, '#');
router.on({
'/*/reviews' : () => { render(Review) },
'/search' : () => { render(Search) },
'/*' : () => { render(Detail) }
});
// set the default route
router.on(() => { render(Home); });
// set the 404 route
router.notFound(() => { render(Error404); });
router.resolve();
As an example, when I navigate to the reviews page or the search page as stated in the 'Other Routes' above, the pages do not trigger a hard reload which is what I would expect. However, once I navigate to the home / root page, it always trigger a hard refresh which I do not want.
I have a link that I use to navigate to the home / root page:
Home Page
Can someone please help?
Thanks!
I am working on React JS app, where I am trying to upload files to Firebase. I can easily upload the files and even a single file but the problem is when I am trying to show the progress of the file uploaded on individual file. I have built a UI, when a user selects files, the files get rendered and shows the file size, name and type etc. When I click the upload button, the upload get started in the background. What I am trying to do is, how can I show the progress of multiple files on the View.
The State
this.state = {
selectedFilesPrev: [],
filesPreviewAble: false,
multiple: true,
showLoaders: false
}
The JSX DOM
render() {
if(!this.state.filesPreviewAble){
return (
<div className='container'>
<div className='file-uploader-page' >
<div className='upload-icon'> <img src={uploadIcon} alt='upload'/> </div>
<p> Drag and Drop Files </p>
<p className='orSeparate'>Or</p>
<div className='files-upload-btn'>
<input type='file' id='file-upload' multiple={this.state.multiple} onChange={this.buttonUpload}/>
<label htmlFor='file-upload' className='rcaBtn'> Upload Files </label>
</div>
</div>
</div>
)
} else if(this.state.filesPreviewAble){
let l = '';
if(this.state.showLoaders){
l = <div className='file-uploading-bar'> <div className='fub-uploaded' style={{width:`${this.state.selectedFilesPrev.progress.percent}%`}}></div> </div>
} else { l = ''}
return (
<div className='container'>
<div className='files-preview container-fluid' >
<div className='fp-head'> Files to be Uploaded </div>
<div className='fp-files'>
{
this.state.selectedFilesPrev.map( (e, i) => {
return (
<div className='single-file row' key={i}>
<div className='file-preview col-2'>
<img src={e.img} alt='icon' />
</div>
<div className='file-meta col-9'>
<span className='file-name'> {e.meta.name} </span>
<span className='file-size'> {this.formatFileSize(e.meta.size)} - {e.meta.type} </span>
</div>
<div className='file-close col-1'> <span onClick={this.removeFile}>×</span> </div>
{l}
</div>
)
})
}
</div>
<div className='fp-upload'>
<button className='rcaBtn' onClick={this.handleUploadingFiles}>Upload Now</button>
</div>
</div>
</div>
)
}
}
The Files Selector Code
buttonUpload(event){
let object = event.target.files;
let files = []
for (const key in object) {
if (object.hasOwnProperty(key)) {
const element = object[key];
files.push(element)
}
}
let i = 0;
files.map( f => {
this.generatePreviewData(f, (prev) => {
i++;
this.state.selectedFilesPrev.push({
meta : f,
img : prev,
progress : {
percent : 0,
upoaded : false
}
})
if(i === files.length){
this.setState({
filesPreviewAble : true
})
}
})
return 0;
})
}
The Uploader Function (Which Works Perfect)
handleUploadingFiles(){
console.log(this.state.selectedFilesPrev)
this.setState({ showLoaders : true })
this.state.selectedFilesPrev.map( (file, idx) => {
let task = stdb.ref(`Images/${file.meta.name}`).put(file.meta);
task.on('state_changed', snapshot => {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
this.state.selectedFilesPrev[idx].progress.percent = progress;
console.log("FILE # "+idx,' Upload is ' + progress + '% done');
},
error => {
console.log(error)
},
() => {
stdb.ref('Images').child(file.meta.name).getDownloadURL().then( url => {
console.log(url)
})
})
})
}
Note : What I want is simply, when the user click the upload button, each and every file uploading progress should be shown on the UI. The handleUploadingFiles() have the progress, which outputs the progress for each task, but I am unable to show that progress on the component.