I am working on a personal project where I need to get status of all devices within a unit. This status along with device name is returned in array from function deviceStatus(). If all the devices are ON, the home icon beside unit.id would turn green. If all devices within that unit are OFF, the home icon would turn red. This code works very well as shown below.
I am looking for help to display array returned from deviceStatus() as text box pop up when mouse hovers over the 'home' icon. I am very confused about mouseover event, any help would be highly appreciated.
<template>
<div>
<div class="d-flex flex-row align-items-center py-2 px-2">
<h1 class="display-1 unit-status m-0">{{ unit ? unit.id : null }}</h1>
<font-awesome-icon
icon="home"
:style="deviceStyling"
class="tab-icon mx-2"
size="lg"
id="unit-info"/>
</div>
</template>
<script>
export default {
computed: {
deviceStatus() {
const device = this.unitDvc(this.currentSite.id);
return device.map(dv => {
const status = this.deviceStat(dv.device_id);
return { name: dv.name, status };
});
},
deviceStyling() {
var turnedOn = null;
var turnedOff = null;
for (var i = 0; i < this.deviceStatus.length; i++) {
if (this.deviceStatus[i]['state'] == 'on') {
turnedOn = turnedOn + 1;
} else {
turnedOff = turnedOff + 1;
}
}
if (turnedOn == this.deviceStatus.length) {
return { 'color': `green` };
} else if (turnedOff == this.deviceStatus.length) {
return { 'color': `red` };
}
}
},
</script>
Be sure to have installed the v-tooltip dependency
npm install --save v-tooltip
and added to your app
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
Then you can add the directive to your component:
<font-awesome-icon
v-tooltip="'Status is ' + deviceStatus.name"
icon="home"
:style="deviceStyling"
class="tab-icon mx-2"
size="lg"
id="unit-info"/>
As you mentioned you are using HTML and JavaScript, You could use the simple attribute of HTML i.e TITLE. It works simply as mouseover on that.
More Info: Title - MDN
Related
I'm building a portfolio app in React JS and one of my pages is an About Me page. I stumbled upon a youtube video that builds an infinite carousel using vanilla JavaScript, and during my initial testing it worked. However, when I navigate away from my 'About Me' page and return, it explodes with a "TypeError: Cannot read property 'style' of null" within my About Me component "stepNext; src/components/about-me/AboutMe.js:34".
import React from "react";
import "./AboutMe.css"
import { Button,
Fade,
Grow,
Typography } from '#material-ui/core'
import { ArrowBackIos, ArrowForwardIos } from "#material-ui/icons";
import { Background, Adventures, Hobbies } from "./about-me-components/index";
export const AboutMe = () => {
const slider = document.querySelector('.slider-about-me')
const carousel = document.querySelector('.carousel-about-me')
let direction = 1
const stepPrevious = () => {
if (direction === 1) {
slider.appendChild(slider.firstElementChild)
}
direction = -1
console.log("Previous", direction)
carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(33%)'
}
const stepNext = () => {
if (direction === -1) {
slider.prepend(slider.lastElementChild)
}
direction = 1
console.log("Next", direction)
carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-33%)'
}
const sliderAppend = () => {
if (direction === 1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === -1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none'
slider.style.transform = 'translate(0)'
setTimeout(() => {slider.style.transition = 'all 0.5s'})
}
return (
<>
<Fade
in={true}
timeout={1500}
>
<div
id='about-me-container'
>
<div className="controls">
<div
className='arrow-span-about-me arrow-left-about-me'
>
<Button
className='button-about-me arrow-about-me'
variant='contained'
onClick={stepPrevious}
>
<ArrowBackIos
className="arrow-back-about-me"
/>
</Button>
</div>
<div
className='arrow-span-about-me arrow-right-about-me'
>
<Button
className='button-about-me arrow-about-me'
variant='contained'
onClick={stepNext}
>
<ArrowForwardIos
className="arrow-forward-about-me"
/>
</Button>
</div>
</div>
<div
id="about-me-carousel-container"
>
<div
className='carousel-about-me'
>
<div
className='slider-about-me'
onTransitionEnd={sliderAppend}
>
<section className='text-white'><Background /></section>
<section className='text-white'><Adventures /></section>
<section className='text-white'><Hobbies /></section>
</div>
</div>
</div>
</div>
</Fade>
</>
)
}
The only reason I chose this route is because I haven't been able to find a half decent infinite carousel module with easy customization abilities. As much as I would prefer for this to work, I'm open to suggestions and/or solutions. Much appreciated!
I would suggest using useRef instead of document.querySelector
document.querySelector happens outside of that lifecycle, making what it returns unreliable, while refs happen within it. (Though doesn’t get reset because of a lifecycle event like a re-render.) This ensures the object returned by the ref is an accurate representation of the current state of the virtual DOM.
I think this is the reason why you are encountering the said error when you go away and back from the About Page.
Here's an example:
https://codesandbox.io/s/objective-fast-vhc27?file=/src/modalAndButton.jsx:531-648
Hi, I am using Buefy's "carousel" component with Vue.js. In laptop resolution I have to show 3 elements. But on the phone I want an article to be shown. I made a function that depends on the resolution the property of the carousel is changed "elements to show" from 3 to 1. But the bad thing that that property is loaded when the page starts not when the screen changes.
Do you have any advice on how to do it? I don't want to have to reload the page to make it happen. But at least reload the component
<b-carousel-list v-model="test" :data="items" :items-to-show="valor" :items-to-list="3" icon-size="is-large">
<template slot="item" slot-scope="props">
<div class="card redondo">
<div class="card-image">
<figure class="image is-5by4">
<a #click="info(props.index)"><img :src="props.list.image" class="imagen-redondo"></a>
</figure>
methods: {
info(value) {
this.test = value
},
cambiar() {
return this.test = 0;
},
itemMostrar() {
if ($(window).width() < 720) {
return this.valor = 1;
} else {
return this.valor = 3;
}
},
},
Use a computed instead of a method. Your method will not re-run except you call it. A computed will update by itself
I have a small container of text. What I'm trying to do is If the text length is large, collapse the div, then have a button that says "...show more", once pressed expands the div. pressed again collapses the div.
That’s fine and works.
I have an issue at the moment. The div is initially set to collapse=true. The “...show more” button is displayed.
The thing I want to change is, if the text content is not long, it will not be collapsed, the show more button will not be displayed.
Template
<v-card v-show="showAccount" class="mb-4">
<v-card-title class="title-container align-start">
<div class="title-data" :class="{collapsed: isElementOverflown}" ref="title-data">
<h1 class="title mb-2"><router-link :to="{name: 'profile', params: {account: account.account}}">{{ account.account }}</router-link></h1>
<router-link v-if="isActiveUserAccount" :to="{name: 'account-image', params: {account: account.account}}">
<v-avatar color="#c35219" size="56" class="mr-4 mb-2">
<img v-if="accountMedia" :src="accountMedia" :alt="account.account" />
<span v-else class="white--text headline">{{ account.account[0].toUpperCase() }}</span>
</v-avatar>
</router-link>
<template v-else>
<v-avatar color="#c35219" size="56" class="mr-4 mb-2">
<img v-if="accountMedia" :src="accountMedia" :alt="account.account" />
<span v-else class="white--text headline">{{ account.account[0].toUpperCase() }}</span>
</v-avatar>
</template>
<div class="caption my-0" ref="bio">
<nl2br v-if="account.about" tag="p" :text="account.about"></nl2br>
</div>
</div>
<button v-if="showButton" type="button" style="font-size:small; margin: auto; margin-right: 5%" #click="toggleHeight">
{{showMoreTextLabel}}
</button>
</v-card-title>
JS
mounted() {
// elements have been created, so the `ref` will return an element.
// but the elements have not necessarily been inserted into the DOM yet.
// you can use $nextTick() to wait for that to have happened.
// this is espeically necessary if you want to to get dimensions or position of that element.
this.$nextTick(() => {
console.log("refs", this.$refs); // logs correct this.$refs
console.log("$refs.title-data", this.$refs["title-data"]); //undefined
let el = this.$refs["title-data"];
if (el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth) {
this.isElementOverflown = true;
this.showButton = true;
}
})
},
toggleHeight() {
if (this.$refs && 'title-data' in this.$refs) {
this.$refs['title-data'].classList.toggle('collapsed');
this.$refs['title-data'].classList.contains('collapsed')
? this.showMoreTextLabel = "...show more"
: this.showMoreTextLabel = "...show less";
}
},
In mounted I’m getting an error that
this.$refs[“title-data”] is undefined but
This.$refs is there and it shows the correct refs. I’m not sure why.
Thank you for any help!
You can create a computed property that checks if the length of your text exceeds a given number.
computed: {
isTextLengthLongEnough() {
if(el.offsetHeight > 150) {
this.showButton = true;
}
}
Then you can check in your template with a v-if if that computed property is true or false and then display the button or not.
Unfortunately, I couldn't get either of the above answers to work. el was coming up as undefined, So if someone could explain to me based on the code I have in the question how to get el, that would be great.
I did a work around not ideal, but it works where I have code in updated, So I'm going with that for now. Thanks very much for everyone's help
Here is the code I used
updated() {
if ('title-data' in this.$refs) {
const el = this.$refs['title-data']
const heightDiff = Boolean(el.scrollHeight - el.offsetHeight > ALLOWED_HEIGHT_VARIANCE)
if (heightDiff) {
this.showButton = heightDiff
el.className += ' read-more'
}
}
},
I want to dynamically control the visibility of the (<) and (>) arrows in the Vuetify carousel component.
For example, so that the final right arrow on the last item disappears, or so that I can use internal buttons or other interactivity within the carousel-item content to replace the buttons dynamically. (I know the continuous prop can do the simple end case).
The documentation for the next-icon and prev-icon prop is bool or string and the default says $next.
Name next-icon
Type boolean | string
Default $next
Description Icon used for the "next" button if show-arrows is true
I can make the icon button disappear by setting it to false, but true doesn't make it reappear.
I'm guessing the string value is the icon name (like md-arrow-right?) but the documentation doesn't say what the default is, and that doesn't work. I'm guessing that "off" is setting the prop to false and "on" is restoring it to the icon name.
I also don't understand what $next means, and this isn't explained in the page. It errors if you use that as a value. Everything else seems to evaluate to false.
I'm guessing it's something like this:
<template>
<v-carousel v-model="stepNo" :show-arrows="show.arrows" :next-icon="show.nextArrow" height="auto" light>
<!-- ... -->
</template>
<script>
export default {
data: () => {
return {
stepNo: 0,
show: {
arrows: true,
nextArrow: "md-arrow-right",
},
}
},
watch: {
stepNo: function(newStep, oldStep) {
// some logic here, for example
this.nextArrow = (newStep === 4) ? "md-arrow-right" : false;
},
},
//...
}
</script>
UPDATE
One of my mistakes was md-arrow-right should be mdi-arrow-right (missing the i), or actually mdi-chevron-right as noted by tony19. So I can now set it to a literal icon OK.
But setting it to $next or $prev still doesn't work - it displays either nothing, and empty circle, or a $ sign which is actually the word $next. And this seems to "break" the binding and setting it to a literal icon after this, fails until reloading the page.
<i aria-hidden="true" class="v-icon notranslate material-icons theme--light" style="font-size: 36px;">$next</i>
I think that you can achieve the behavior you wanted without relying on documentation if it doesn't provide what you need.
Just inspect the left and right arrow of the carousel component and get the DOM Node by selector.
Then you are ready to do what you want with the elements.
For exemple:
const nextButton = document.querySelector('.v-window__next button');
const prevButton = document.querySelector('.v-window__prev button');
(Maybe instead of document you can use the $el inside your component)
Now you can do whatever you want with your elements.
To show/hide dynamically:
nextButton.style.display = 'None'; // Hide
nextButton.style.display = 'Block'; // Show
To navigate:
nextButton.click(); // Go next.
prevButton.click(); // Go prev.
Vue is just JavaScript at the end, no magic ;)
BTW, you could try this directly in the browser console on the link you provided for the carousel.
The icon visibility should be restored when setting it to $next (as seen in demo code snippet below).
About $next...
For all icons in the framework, Vuetify uses v-icon to render the icon specified by name. Icon names are mapped to an iconset (default is Material Design Icons). The mapped icon names are identified by the $ prefix, and remapped during icon rendering.
For instance, the mdi preset maps $prev to mdi-chevron-left and $next to mdi-chevron-right; and the fa (Font Awesome) preset maps $prev to fas fa-chevron-left and $next to fas fa-chevron-right.
Literal icon names (without the $ prefix) could also be explicitly used. For example, you could specify mdi-arrow-expand-right instead of $next in v-icon.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
nextIcon: '$next',
prevIcon: '$prev',
nextIconEnabled: true,
prevIconEnabled: true,
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
watch: {
nextIconEnabled(nextIconEnabled) {
if (nextIconEnabled) {
this.nextIcon = this._lastNextIcon
} else {
this._lastNextIcon = this.nextIcon
this.nextIcon = false
}
},
prevIconEnabled(prevIconEnabled) {
if (prevIconEnabled) {
this.prevIcon = this._lastPrevIcon
} else {
this._lastPrevIcon = this.prevIcon
this.prevIcon = false
}
}
}
})
.controls {
display: flex;
flex-direction: column;
}
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify#2.2.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.2.8/dist/vuetify.min.css">
<div id="app">
<v-app id="inspire">
<div class="controls">
<label>Toggle next-icon
<input type="checkbox" v-model="nextIconEnabled">
</label>
<label>next-icon:
<input v-model="nextIcon" placeholder="icon name"/>
</label>
<label>Toggle prev-icon
<input type="checkbox" v-model="prevIconEnabled">
</label>
<label>prev-icon:
<input v-model="prevIcon" placeholder="icon name"/>
</label>
</div>
<v-carousel
height="400"
hide-delimiter-background
:prev-icon="prevIcon"
:next-icon="nextIcon"
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="display-3">{{ slide }} Slide</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
A simple typo in the icon name:
nextArrow: "md-arrow-right",
should be
nextArrow: "mdi-arrow-right",
I keep making this mistake because I get the icon names by searching https://materialdesignicons.com/ where the icon names do not have the mdi- prefix and I so often get it wrong when manually adding md- for just material design.
There some ways to have more control over the carousel component
To programaticaly control if the arrows will be showed, you can delegate this to a variable
continuous=false will do the job hiding the arrows on the begining/end of the elements list
And to determine wich element will be active, you can use v-model
<v-carousel
:show-arrows=arrows
:progress=false
:continuous=false
v-model="item"
hide-delimiter-background
>
<v-carousel-item
v-for="n in 15"
:key="n"
>
<v-card>
{{item}}
<v-btn
text
#click="nextItem"
>
Next Item
</v-btn>
<v-btn
text
#click="showHideArrows"
>
showHideArrows
</v-btn>
</v-card>
</v-carousel-item>
</v-carousel>
nextItem(): will change the current active item
showHideArrows(): will toggle the arrow's state
data: () => ({
arrows: false,
item: 0,
}),
methods: {
nextItem() {
console.log('next');
this.item += 1;
},
showHideArrows() {
this.arrows = !this.arrows;
console.log(this.arrows);
},
},
I have a progressBar in my React component.The progressBar is as shown below in the image:
So, when I am in the second page, the style be as shown below:
And the next image is for the third page:
So, what I have done is I have created the styling for the second page.
The code looks like this:
<div className={classes.sceProgressBar}>
<div className={classes.sceProgressBarText}>
<i className={ 'fas fa-check ' + this.progressBarStyleHandler} />
</div>
</div>
<hr className={classes.sceProgressBarUnderline} />
<div className={classes.sceProgressBarSecondText}>
<div className={classes.sceProgressBarText}>2</div>
<hr className={classes.sceProgressBarSecondUnderline} />
</div>
<div className={classes.sceProgressBarThirdText}>
<div className={classes.sceProgressBarText}>3</div>
</div>
Now what I want is, I want to make it a common component, so that for each page I don't have to add the style,I can directly import the page and show which page it is by passing the page details in the props.
So, I have added 9 states :
this.state = {
firstPage: false, //white background for Progress Bar
secondPage: false,
thirdPage: false,
firstPageDisplay: false, //green background for Progress Bar
secondPageDisplay: false,
tihrdPageDisplay: false,
firstPageCompleted: false, //tick mark for Progress Bar
secondPageCompleted: true,
thirdPageCompleted: false
};
And, I have added a function where it will check the value of the state which will determine which page it is in.The function looks like this:
progressBarStyleHandler = () => {
let progressbarClassname;
if (this.state.firstPageCompleted) {
progressbarClassname = classes.sceCheckIcon;
}
return progressbarClassname;
}
But for my current page, the function is not working, i.e. its not taking the className. What is wrong with my code?Can anyone please help me with that. Also, if anyone can suggest a better way of doing it, I will follow the same.
You are not actually calling your style handler.
You need to have className={'fas fa-check ' + this.progressBarStyleHandler()} instead of className={'fas fa-check ' + this.progressBarStyleHandler}.
But your approach of managing three booleans per page will not scale well. What if you want to re-use this component and have additional steps? I suggest an approach like below:
function Step({ number, status="NOT_DONE" }) {
switch (status) {
case "DONE":
return <div className="done"><i className="fas fa-check"/></div>
case "CURRENT":
return <div className="active">{number}</div>
case "NOT_DONE":
default:
return <div className="not-done">{number}</div>
}
}
function ProgressBar({ numberOfSteps = 0, currentStep = 0 }) {
if (!numberOfSteps) return null;
const steps = [];
for (let i = 0; i < numberOfSteps; i++) {
const status = i < currentStep ? 'DONE' : i === currentStep ? 'CURRENT' : 'NOT_DONE';
steps.push(<Step number={i} status={status} />)
}
return (
<div>
{steps}
</div>
)
}
And then it can be used like <ProgressBar numberOfSteps={3} currentStep={1}/>