Categories
discuss

Svelte – access child component’s method

I have an app that simply hides content Hidden.svelte:

<script>
    let shown = false;

    function show() {
        shown = true;
    }
</script>

<svelte:options accessors={true}/>

{#if shown}
    <slot/>
{/if}

Parent App.svelte:

<script>
    import Hidden from 'Hidden';

    let child;
</script>

<Hidden bind:this={child}>
    Content
</Hidden>

<button on:click={() => child.shown = true}>Show</button>

So, child’s shown can be easily set due to <svelte:options accessors={true}/> in parent

But, I want to use method show() since it can not only set shown value, but also perform some magic

Thx to Chrome’s DevTools, I found that all components have an Array with props and methods, that could be accessed via some .$$.ctx, so Hidden’s show() method can be called like this:

<button on:click={() => child.$$.ctx[2]()}>Show</button>

But) You know) Is there are legal way to do it?

Answer

Hidden.svelte

<script>
    let shown = false;

    export function show() {
        shown = true;
    }
</script>

{#if shown}
    <slot/>
{/if}

App.svelte

<script>
    import Hidden from './Hidden.svelte';

    let child;
</script>

<Hidden bind:this={child}>
    Content
</Hidden>

<button on:click={() => child.show()}>Show</button>

The call to child.show() can actually be simplified, but I thought this could make it harder to figure out what’s going on in the example. You can do just:

<button on:click={child.show}>Show</button>
Categories
discuss

Keep v-tooltip open when hovering over the tooltip

First, the terms, “link” is the area where the mouse enters. The “tooltip” is the thing that pops up and shows extra information. — above added 2020-04-29

I’m using Vuetify and trying to keep the v-tooltip open when mouse is hovering over the “tooltip”. The content inside the tooltip is going to be rich and don’t want that to automatically hide when visitor is looking into it.

<template>
<v-tooltip
  v-model="show"
  max-width="600px"
  content-class="link-tooltip-content"
  bottom>
  <template v-slot:activator="{ on }">
    <div
      :style="boxStyle"
      @mouseover="mouseover"
      @mouseleave="mouseleave"
    ></div>
  </template>
  <template v-slot:default>
    <v-card
      @mouseover="mouseover"
      @mouseleave="mouseleave"
      >
      <v-row dense>
        <v-col>
          <v-card-title class="headline">
            rich tooltip
          </v-card-title>
        </v-col>
      </v-row>
    </v-card>
  </template>
</v-tooltip>
</template>

<script>
    export default {
  data: () => ({
    show: false,
    hoverTimer: null
  }),
  methods: {
    boxStyle: function() {
      return {
        left: "100px",
        top: "100px",
        width: "100px",
        height: "100px",
        position: "absolute"
      };
    },
    mouseover: function() {
      console.log(`mouseover`);
      this.show = true;
      clearTimeout(this.hoverTimer);
    },
    mouseleave: function() {
      console.log(`mouseleave`);
      this.hoverTimer = setTimeout(() => {
        this.show = false;
      }, 3000);
    }
  }
};
</script>

But this doesn’t work. The mouseover and mouseleave event handlers on the activator slot (the “link”) element does fire, but the event handlers on the default slot (the “tooltip”) don’t fire.

I think the reason is, because the content inside the “tooltip” is moved to somewhere else under the body tag.

The questions is, how can I keep the “tooltip” open when hovering over it.

I’m moving the mouse like this:

  1. Hover over the link (the tooltip shows up).
  2. Move the mouse out of the link and into the tooltip. (The link and tooltip is a few pixels apart) Now the mouseleave event for the link fires, and I want to add a mouseenter event handler on the tooltip. How do I do that ?

I’m thinking to add an mouseenter event on the tooltip, so that I can clearTimeout(hoverTimer) and keep the tooltip open.

I know there’s a similar question from 9 years ago, using jQuery Keep tooltip opened when the mouse is over it , but I don’t want to use jQuery if possible. I prefer a Vue way.

Here’s a little reproducible example: https://www.codeply.com/p/GuFXqAAU8Y

Answer

.v-tooltip__content has pointer-events:none set in vuetify.min.css. If you set it back to auto you allow it to be hovered.

When its hovered, its parent is hovered. And when its parent is hovered, it has a tooltip. So all you need is:

.v-tooltip__content {
  pointer-events: auto;
}
Categories
discuss

How to set circle at the right end of the last bar / item using D3

right now i am displaying the live data using d3 and here my requirement is how can i display a small circle at the end of last bar at the right edge and what ever the data may based on last bar i should display on top of it below is snap shot

enter image description here

below is my js fiddle :- https://jsfiddle.net/madpop143/5atLwk6h/10/

below is my code

var margin = {
  top: 20,
  left: 20,
  right: 20,
  bottom: 20
};

var width = 750 - margin.left - margin.right;
var height = 750 - margin.top - margin.bottom;

var randomDate = function(start, end) {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
};

var data = d3.range(1000).map(function(d) {
  return {
    x: randomDate(new Date(2015, 0, 1), new Date(2015, 0, 20)),
    y: Math.random() * 10
  };
}).sort(function(a, b) {
  return a.x.getTime() - b.x.getTime();
});

var svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

var g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var x = d3.time.scale()
  .range([0, width]);
var xAxis = d3.svg.axis()
  .scale(x)
  .orient('bottom');

var y = d3.scale.linear()
  .range([height, 0]);
var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left');

var line = d3.svg.area()
  .x(function(d) {
    return x(d.x);
  })
  .y1(function(d) {
    return y(d.y);
  })
  .y0(y(0))
  .interpolate("step-before");

g.append('path')
  .attr('class', 'line')
  .attr('d', line(data));

g.append('g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + height + ')')
  .call(xAxis);

g.append('g')
  .attr('class', 'y axis')
  .call(yAxis);

var tick = function() {
  var minMax = d3.extent(data, function(d) {
    return d.x;
  });
  var duration = 250;
  // 1 day offset
  var offset = 24 * 60 * 60 * 1000;
  var from = minMax[0].getTime();
  // 2-days window
  var timeWindow = [from, from + 2 * offset];

  // Recompute x,y domains
  x.domain(timeWindow);
  y.domain([0, d3.max(data, function(d) {
    return d.y;
  })]);

  // Redraw the line
  g.select('.line')
    .attr('d', line(data))
    .attr('transform', null);

  // Update x axis
  g.select('.x.axis')
    .transition()
    .duration(duration)
    .ease('linear')
    .call(xAxis);

  // Update y axis
  g.select('.y.axis')
    .transition()
    .duration(duration)
    .call(yAxis);

  //console.log(x(from))
  //console.log(x(from + offset));
  //console.log(x(from + 2*offset));

  // Slide the line to the left
  g.select('.line')
    .transition()
    .duration(duration)
    .ease('linear')
    .attr('transform', 'translate(' + x(from - duration) + ',0)')
    .each('end', function() {
      tick();
    });

  // Remove first point
  data.shift();

}

tick();

Answer

I’ve created a new demo here.

This is what it looks like:

enter image description here

The first change I made was just to create the circle right before the tick function is declared:

g.append("circle")
  .attr('class', 'last-circle')
  .style("fill", "red")
  .attr("r", 10)
  .attr("cy", 0)
  .attr("cx", 0);

Then, in the tick function, right below where you recompute the new axes-domains, I created a new variable that holds only the data that will be displayed in the current frame. It filters the data by everything that has a smaller x value than the maximum value in the timeWindow:

var newdata = data.filter(function(d) {
  return d.x < timeWindow[1];
});

Then I changed the part where you redraw the line to use the newdata value so that the line won’t be drawn outside of the graph’s boundaries/domain:

g.select('.line')
  .attr('d', line(newdata))

Then lastly, I got the last value from the newdata and updated the position of the circle to be at the y and x value of the last value in the graph:

var last = newdata[newdata.length - 1]

g.select('.last-circle')
  .transition()
  .duration(0)
  .attr("cy", y(last.y))
  .attr("cx", x(last.x));
Categories
discuss

How to hide actionbar in some fragments with Android Navigation Components?

I am using android navigation components to navigate fragments. I can easily set action bar by using this code in the Main Activity :

    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);

But If I want to hide the supportActionbar in some of the fragments then what should be the best approach?

Answer

For the fragments that you want to hide the SupportActionBar, you can hide it in onResume() with .hide(), and show it again in onStop() with .show()

@Override
public void onResume() {
    super.onResume();
    ActionBar supportActionBar = ((AppCompatActivity) requireActivity()).getSupportActionBar();
    if (supportActionBar != null)
        supportActionBar.hide();
}

@Override
public void onStop() {
    super.onStop();
    ActionBar supportActionBar = ((AppCompatActivity) requireActivity()).getSupportActionBar();
    if (supportActionBar != null)
        supportActionBar.show();
}
Categories
discuss

Can’t change default nuxt favicon

I am new to nuxt and trying to change default favicon in my project.

I changed the favicon.png and favicon.ico in my static folder. => didn’t work.

changed the favicon.png and favicon.ico in my dist folder. => didn’t work.

replaced the proper files generated by favicon generator websites in my dist/_nuxt/icons folder. => didn’t work.

and this is my nuxt.config.js

head: {
    title: "my first nuxt proj - main page",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
  },

am I missing something?

Answer

I found the solution, but it’s kind of tricky and it’s a little far from logic.

the size of the favicon should be 32*32 pixels or nuxt will load the default favicon itself.

and about my tries, it’s enough to have a file in your static folder and give the path to nuxt.config.js.

but I’m still confused with the solution.

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..