CW Specials Pigeon

CW Specials Pigeon .markdown

CW Specials Pigeon ('-' * 19) Let the CW Specials Pigeon (https://twitter.com/cw_lunch_pigeon) make you a sandwich worth of being on the lunch menu at Commonwealth Cambridge http://commonwealthcambridge.com/

A Pen by David Thyresson on CodePen.

License.

index.html

<section class="cw">
  <header>
    <img class="cw cw-pigeon animated pulse" src="https://pbs.twimg.com/profile_images/580545921877958656/IAuaTVfi.png">
  </header>

  <p class="cw">
    <strong class="cw cw-main"></strong>
    <strong class="cw cw-connector cw-on">with</strong>
    <strong class="cw cw-sides"></strong>
    <strong class="cw cw-connector cw-with">on</strong>
    <strong class="cw cw-bread"></strong>
  </p>
</section>

script.js

$(function() {
  var bread_jectives = ['', '', '', '', 'a very, very, large', 'a large', 'a very large'];

  var breads = ['brioche', 'baguette', 'sourdough', 'ciabatta', 'biscuit', 'roll', 'Texas toast', 'hot dog roll'];

  var side_jectives = ['', 'really awesome', 'something-something'];

  var sides = ['black cherry bbq sauce', 'sour-cream', 'pickled green strawberries', 'crispy chicken skin', 'arugula', 'mozzarella', 'red pepper jelly', 'rice noodle salad', 'sweet and spicy glaze', 'spicy whipped feta', 'cheese sauce', 'horseradish-cream', 'fresno chills', 'wild ramp', 'dijon', 'smoked gouda', 'fried artichokes', 'roasted brussel sprouts', 'onion spread', 'roasted potatoes', 'rice vermicelli', 'pea greens', 'spinach', 'beet and apple slaw', 'paprika aioli', 'pickled Turkish peppers', 'frisee', 'cucumber relish', 'kimchi', 'spicy ketchup', 'braised collard greens', 'turnip greens', 'ranch', 'curried cauliflower', 'tzatziki yogurt sauce', 'cheddar cheese', 'american cheese', 'asparagus', 'broccoli, celery and goat cheese slaw', 'onions', 'caramelized onions', 'lettuce', 'tomato', 'whole-grain mustard', 'wax beans', 'sweet bbq sauce', 'hot pepper jelly', 'crispy pig skin', 'spring onions', 'bacon baked beans', 'provolone', 'sautéed kale', 'pepper-jack cheese', 'chicken liver mousse', 'some other things', 'manchego', 'romaine lettuce', 'hot peppers', 'shredded lettuce', 'french-onion sauce', 'avocado spread', 'pico de gallo', 'hazelnut-goat-cheese', 'harissa', 'pickles', 'melted american cheese', 'sour cream onion dip', 'dijonnaise'];

  var mains = ['Pulled pork', 'Roast beef', 'Country pâté', 'Thai braised brisket', 'Pork schnitzel', 'Applewood smoked ham', 'Chopped brisket', 'Sloppy joe', 'Buffalo chicken', 'Buffalo pulled chicken', 'Mortadella', 'Mahi-mahi', 'Ham and mozzarella', 'Pancetta', 'Marinated shrimp', 'Chicken sausage', 'Fried chicken', 'Chickpea fritter', 'Tabasco & honey glazed fried chicken', 'Chinese five-spice duck sausage', 'Smoked brisket', 'Face bacon', 'Slow cooked brisket', 'Steak and cheese', 'Lamb and beef sausage', 'Pancetta and pepperoni', 'House-made ham', 'Short-rib and pork-butt', 'Lamb merguez sausage', 'Beef meatloaf '];

  function toSentence(array, separator, lastSeparator, serial) {
    separator = separator || ', ';
    lastSeparator = lastSeparator || ' and ';
    
    var a = array.slice(),
      lastMember = a.pop();

    if (array.length > 2 && serial) lastSeparator = rtrim(separator) + lastSeparator;

    return a.length ? a.join(separator) + lastSeparator + lastMember : lastMember;
  };

  function cw_main() {
    return _.sample(mains);
  }

  function cw_sides(number_of_sides) {
    var sample_sides = _.sample(sides, _.random(1, number_of_sides || 4));

    if (sample_sides.length == 1) {
      return (_.sample(side_jectives) + ' ' + sample_sides);
    } else {
      return toSentence(sample_sides);
    }
  }

  function cw_bread() {
    return _.sample(bread_jectives) + ' ' + _.sample(breads);
  }

  function cw_sandwich() {
    $('strong.cw-main').text(cw_main());
    $('strong.cw-sides').text(cw_sides());
    $('strong.cw-bread').text(cw_bread());
  }

  function cw_expedite() {
    cw_reveal('img.cw-pigeon', 'pulse')
    cw_reveal('strong.cw-main', 'fadeIn')
    cw_reveal('strong.cw-sides', 'fadeIn')
    cw_reveal('strong.cw-bread', 'fadeIn')
    cw_reveal('strong.cw-connector', 'bounceIn')
  }

  function cw_reveal(element, animation) {
    var animation_end = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $(element).addClass('animated').addClass(animation).one(animation_end,
      function() {
        $(this).removeClass('animated').removeClass(animation);
      });
  }

  $('img.cw-pigeon').on('click', function() {
    cw_special();
  });

  $('p.cw').on('click', function() {
    cw_reveal('p.cw', 'pulse')
  });

  function cw_special() {
    cw_sandwich();
    cw_expedite();
  }

  cw_special();
});

style.css

@import "bourbon";
@import "neat";

$mobile: new-breakpoint(max-width 480px 4);

$pigeon-pink: #FF6561;

body {
  font-family: 'Montserrat', sans-serif;
  background-color: $pigeon-pink;
  background-size: cover;
  color: white;
}

section.cw {
  @include outer-container;
  @include span-columns(8);
  @include shift(2);

  @include media($mobile) {
    @include span-columns(4);
    @include shift(0);
  } 

  header {
    text-align: center;

    img.cw-pigeon {
      cursor: pointer;
      height: 12em;
    }
  }

  p {
    color: white;
    cursor: pointer;
    font-size: 2em;
    line-height: 1.75em;
    text-align: center;
    padding: 0 $gutter 0 $gutter;

    @include media($mobile) {  
      font-size: 1.75em;
      line-height: 1.5em;
        padding: 0 $gutter /2 0 $gutter /2;
    }

    strong {
      &.cw-connector {
        color: shade($pigeon-pink, 25%);
        padding: 0em 0.25em 0em 0.25em;
        
        &.cw-on {
          @include animation-delay(1.25s);
        }

         &.cw-with {
          @include animation-delay(2.5s);
        }
       }    
      
       &.cw-main {
          @include animation-delay(0.5s);
       }

       &.cw-sides {
          @include animation-delay(1.75s);
       }

      &.cw-bread {
        @include animation-delay(3.25s);
      }

      &.cw-connector {
        &:after {
            content: "\0020";
        }
        
        &:before {
            content: "\0020";
        }
      }
    }
  }
}