nabrown

<template>
  <div id="app">
    <FigureStandardSFC
      src="cat-basking.jpg"
      type="post-it"
      :tags="['cat','feline','fuzzy','gray']"
      @click="alertHello">Cat basking in the sun.</FigureStandardSFC>

    <FigureStandardRF
      src="red-tailed-hawk.jpg"

nabrown

<template>
  <figure :class="type" v-on:click="$emit('click')">
    <img :src="src" />
    <figcaption v-if="$slots.default">
      <span><slot></slot></span>
    </figcaption>
    <div class="tags" v-if="tags && type != 'framed'">
      <span v-for="tag in tags"> {{ tag }}</span>
    </div>
  </figure>

nabrown

export default {

  props: {
    src: {
      required: true,
      type: String
    },
    type: {
      required: true,
      type: String

nabrown

export default {
  functional: true,
  props: {
    src: {
      required: true,
      type: String
    },
    type: {
      required: true,
      type: String

nabrown

<template functional>
  <figure :class="props.type" v-on:click="listeners.click">
    <img :src="props.src" />
    <figcaption v-if="slots().default">
      <span><slot></slot></span>
    </figcaption>
    <div class="tags" v-if="props.tags && props.type != 'framed'">
      <span v-for="tag in props.tags"> {{ tag }}</span>
    </div>
  </figure>

nabrown

(function() {

  // Select the node to observe
  var targetNode = document.querySelector('#sqs-cart-root');

  // If the targetNode exists on our page
  if(targetNode){
  
    // Watch when nodes are added to targetNode, or its descendants
    var config = {

nabrown

(function() {

  // Select the node to observe
  var targetNode = document.querySelector('.sqs-add-to-cart-button');
  // The class we'll watch for
  var className = 'cart-added';

  // If the targetNode exists on our page
  if(targetNode){

nabrown

function unveil() {
  // create an array of images that are in view
  // by filtering the intial array
  var inview = images.filter(function() {
    var $img = $(this);
    // if the image is hidden, don't bother
    if ($img.is(":hidden")) return;

    var wt = $w.scrollTop(), // window vertical scroll distance
        wb = wt + $w.height(), // last point of document visible in browser window

nabrown

function unveil() {
  // create an array of images that are in view
  // by filtering the intial array
  var inview = images.filter(function(img) {
    // if the image is set to display: none
    if (img.style.display === "none") return;

    var rect = img.getBoundingClientRect(), 
        wt = window.scrollY, // window vertical scroll distance
        wb = wt + w.innerHeight, // last point of document visible in browser window

nabrown

/**
 * jQuery Unveil
 * A very lightweight jQuery plugin to lazy load images
 * http://luis-almeida.github.com/unveil
 *
 * Licensed under the MIT license.
 * Copyright 2013 Luís Almeida
 * https://github.com/luis-almeida
 * 
 * Updated by Nora Brown to include `srcset`