nice vue

implementing lazy loading in vue2 via directive

First make a custom directive for a background image load time performance bump.

export default {
  inserted: (el, binding) => {
    function loadImage() {
      const imageUrl = binding.value;
      el.style.backgroundImage = `url(${imageUrl})`;
    }

    function handleIntersect(entries, observer) {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          loadImage();
          observer.unobserve(el);
        }
      });
    }

    function createObserver() {
      const options = {
        root: null,
        threshold: "0"
      };
      const observer = new IntersectionObserver(handleIntersect, options);
      observer.observe(el);
    }

    if (window["IntersectionObserver"]) {
      createObserver();
    } else {
      loadImage();
    }
  }
};

then register the directive and use it in your component like this:

<div v-lazy-background="heroImage"></div>

Pretty neat huh?

github wide codesearch is

Sometimes I browse github codesearch for vue related projects for fun. Here are some things I've found.

prettier formatting

Vue can be unpretty sometimes, and I can't tell if I like this or hate this (actually I hate it but love the shape of the formatting if I am squinting):

commands(
  this.path,
  cmd,
  (event) => {
    results.text += `${event.data}\n`;
    this.scroll();
  },
  () => {
    results.text = results.text.trimEnd();
    this.canInput = true;
    this.$refs.input.focus();
    this.scroll();
  }
);

handling potentially complex click events

click: function (event) {
  if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();

  setTimeout(() => {
    this.touches = 0;
  }, 300);

  this.touches++;

  if (this.touches >  1) {
    this.open();
  }

  if (this.$store.state.selected.indexOf(this.index) !== -1) {
    this.removeSelected(this.index);
    return;
  }
}

and

// nice didn't know you could use event.shiftKey
if (event.shiftKey && this.selected.length > 0) {
  let fi = 0;
  let la = 0;

  if (this.index > this.selected[0]) {
    fi = this.selected[0] + 1;
    la = this.index;
  } else {
    fi = this.index;
    la = this.selected[0] - 1;
  }

  for (; fi <= la; fi++) {
    if (this.$store.state.selected.indexOf(fi) == -1) {
      this.addSelected(fi);
    }
  }

  return;
}

and this super legible check:

if (
  !this.singleClick &&
  !event.ctrlKey &&
  !event.metaKey &&
  !this.$store.state.multiple
)

this.resetSelected();

reminds me of the style used for another && check:

showOverlay: function () {
  return (
    this.show !== null
 && this.show !== "search"
 && this.show !== "more"
  );
},