<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Vue Pantone Color Search + Clipboard</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400);
* {
box-sizing: border-box;
}
body {
margin: 0;
font: 1.15em "Source Sans Pro", sans-serif;
letter-spacing: 0.5px;
background: #EEEEEE;
color: black;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-bottom: 0;
}
p {
margin-top: 0;
}
input {
display: block;
appearance: none;
margin: 0.5em auto;
padding: 0.5em;
padding-left: 0.1em;
vertical-align: middle;
border: 1px solid transparent;
border-bottom: 1px solid black;
border-radius: 2px;
color: black;
background: transparent;
font-size: 1em;
width: 90%;
width: calc(100% - 1em);
max-width: 20.25em;
outline: 0;
}
.slideUp-enter-active {
transform: translateY(0);
transition: all .3s ease;
}
.slideUp-leave-active {
position: absolute;
}
.slideUp-enter {
transform: translateY(25%);
opacity: 0;
}
.openUp-enter-active, .openUp-leave-active {
transition: all 0.5s;
}
.openUp-enter, .openUp-leave-active {
opacity: 0;
transform: translateY(25%);
}
.vueApp {
text-align: center;
padding: 0.5em;
}
.vueApp .colors {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.vueApp .colors .color {
height: 200px;
margin: 0.5em;
padding: 0.5em;
color: white;
display: flex;
align-items: flex-end;
flex-grow: 1;
transition: all 0.1s;
cursor: pointer;
}
.vueApp .colors .color:hover {
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
.vueApp .colors .color span:first-of-type {
align-self: flex-end;
text-align: left;
font-size: 2em;
width: 100%;
}
.vueApp .colors .color span:nth-of-type(2) {
text-align: right;
align-self: flex-start;
font-size: 0.75em;
width: 100%;
}
.vueApp .messages {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.vueApp .messages .message {
padding: 1em;
background: rgba(0, 0, 0, 0.25);
color: white;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div id="vue"></div>
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
<script src='https://unpkg.com/vue@2.0.3/dist/vue.js'></script>
<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js'></script>
<script >
/*-----------------
Vue 2.0.3
-----------
https://vuejs.org/guide/
https://vuejs.org/api/
-----------------*/
let app = new Vue({
el: '#vue',
template: `<div class="vueApp">
<h1>Pantone Color Search</h1>
<input placeholder="Search a color, season, year, or hex code" v-model="colorSearch" />
<transition name="openUp">
<div v-if="colors.length > 0">
<h2>Pantone Colors</h2>
<p>(Click to copy to clipboard)</p>
<transition-group name="openUp" class="colors">
<div class="color" v-for="(color, index) in filteredColors" v-bind:key="index" v-bind:data-clipboard-text="color.hex" v-bind:style="{ backgroundColor: color.hex }" @click="addedToClipboard(color.color, color.hex)">
<span>{{ color.color }}</span>
<span>{{ color.season }} {{ color.year }}</span>
</div>
</transition-group>
<transition-group name="slideUp" class="messages">
<div class="message" v-for="(message, index) in messages" v-bind:key="index" v-bind:style="{ backgroundColor: message.hex }" @click="removeMessage(index)">
{{ message.message }}
</div>
</transition-group>
</div>
</transition>
</div>`,
mounted: function() {
new Clipboard('.color');
},
data: {
colorSearch: '',
colors: [
//Spring 2017
{
color: "Primrose Yellow",
hex: "#f6d258",
year: "2017",
season: "Spring"
},
{
color: "Pale Dogwood",
hex: "#efcec5",
year: "2017",
season: "Spring"
},
{
color: "Hazelwood",
hex: "#d1af94",
year: "2017",
season: "Spring"
},
{
color: "Island Paradise",
hex: "#97d5e0",
year: "2017",
season: "Spring"
},
{
color: "Greenery",
hex: "#88b14b",
year: "2017",
season: "Spring"
},
{
color: "Flame",
hex: "#ef562d",
year: "2017",
season: "Spring"
},
{
color: "Pink Yarrow",
hex: "#d13076",
year: "2017",
season: "Spring"
},
{
color: "Niagra",
hex: "#5587a2",
year: "2017",
season: "Spring"
},
{
color: "Kale",
hex: "#5c7148",
year: "2017",
season: "Spring"
},
{
color: "Lapis Blue",
hex: "#0c4c8a",
year: "2017",
season: "Spring"
},
//Fall 2016
{
color: "Riverside",
hex: "#4c6a92",
year: "2016",
season: "Fall"
},
{
color: "Airy Blue",
hex: "#92b6d5",
year: "2016",
season: "Fall"
},
{
color: "Shark Skin",
hex: "#838487",
year: "2016",
season: "Fall"
},
{
color: "Aurora Red",
hex: "#b93a32",
year: "2016",
season: "Fall"
},
{
color: "Warm Taupe",
hex: "#af9483",
year: "2016",
season: "Fall"
},
{
color: "Dusty Cedar",
hex: "#ad5d5d",
year: "2016",
season: "Fall"
},
{
color: "Lush Meadow",
hex: "#006e51",
year: "2016",
season: "Fall"
},
{
color: "Spicy Mustard",
hex: "#d8ae47",
year: "2016",
season: "Fall"
},
{
color: "Potters Clay",
hex: "#9e4624",
year: "2016",
season: "Fall"
},
{
color: "Bodacious",
hex: "#b76ba3",
year: "2016",
season: "Fall"
},
//Spring 2016
{
color: "Rose Quartz",
hex: "#f7cac9",
year: "2016",
season: "Spring"
},
{
color: "Peach Echo",
hex: "#f7786b",
year: "2016",
season: "Spring"
},
{
color: "Serenity",
hex: "#91a8d0",
year: "2016",
season: "Spring"
},
{
color: "Snorkel Blue",
hex: "#034f84",
year: "2016",
season: "Spring"
},
{
color: "Buttercup",
hex: "#fae03c",
year: "2016",
season: "Spring"
},
{
color: "Limpet Shell",
hex: "#98ddde",
year: "2016",
season: "Spring"
},
{
color: "Lilac Gray",
hex: "#9896a4",
year: "2016",
season: "Spring"
},
{
color: "Fiesta",
hex: "#dd4132",
year: "2016",
season: "Spring"
},
{
color: "Iced Coffee",
hex: "#b18f6a",
year: "2016",
season: "Spring"
},
{
color: "Green Flash",
hex: "#79c753",
year: "2016",
season: "Spring"
},
//Fall 2015
{
color: "Dried Herb",
hex: "#847A59",
year: "2015",
season: "Fall"
},
{
color: "Desert Sage",
hex: "#A7AE9E",
year: "2015",
season: "Fall"
},
{
color: "Stormy Weather",
hex: "#58646D ",
year: "2015",
season: "Fall"
},
{
color: "Oak Buff",
hex: "#CF9C63",
year: "2015",
season: "Fall"
},
{
color: "Marsala",
hex: "#964F4C",
year: "2015",
season: "Fall"
},
{
color: "Biscay Bay",
hex: "#097988",
year: "2015",
season: "Fall"
},
{
color: "Reflecting Pond",
hex: "#203E4A",
year: "2015",
season: "Fall"
},
{
color: "Cadmium Orange",
hex: "#F99471",
year: "2015",
season: "Fall"
},
{
color: "Cashmere Rose",
hex: "#CE879F",
year: "2015",
season: "Fall"
},
{
color: "Amethyst Orchid",
hex: "#926AA6",
year: "2015",
season: "Fall"
},
//Spring 2015
{
color: "Aquamarine",
hex: "#9DC3D4",
year: "2015",
season: "Spring"
},
{
color: "Scuba Blue",
hex: "#00ABC0",
year: "2015",
season: "Spring"
},
{
color: "Beveled Glass",
hex: "#7ACCB8",
year: "2015",
season: "Spring"
},
{
color: "Classic Blue",
hex: "#0F4C81",
year: "2015",
season: "Spring"
},
{
color: "Toasted Almond",
hex: "#D2B49C",
year: "2015",
season: "Spring"
},
{
color: "Strawberry Ice",
hex: "#E78B90",
year: "2015",
season: "Spring"
},
{
color: "Tangerine",
hex: "#F88F58",
year: "2015",
season: "Spring"
},
{
color: "Custard",
hex: "#E5D68E",
year: "2015",
season: "Spring"
},
{
color: "Marsala",
hex: "#964F4C",
year: "2015",
season: "Spring"
},
{
color: "Glacier Gray",
hex: "#C5C6C7",
year: "2015",
season: "Spring"
},
//Fall 2014
{
color: "Radiant Orchid",
hex: "#8b4584",
year: "2014",
season: "Fall"
},
{
color: "Royal Blue",
hex: "#1e3176",
year: "2014",
season: "Fall"
},
{
color: "Aluminum",
hex: "#75796a",
year: "2014",
season: "Fall"
},
{
color: "Aurora Red",
hex: "#a90118",
year: "2014",
season: "Fall"
},
{
color: "Misted Yellow",
hex: "#d9b74b",
year: "2014",
season: "Fall"
},
{
color: "Sangria",
hex: "#760030",
year: "2014",
season: "Fall"
},
{
color: "Mauve Mist",
hex: "#af8ea9",
year: "2014",
season: "Fall"
},
{
color: "Cognac",
hex: "#60413c",
year: "2014",
season: "Fall"
},
{
color: "Bright Cobalt",
hex: "#014983",
year: "2014",
season: "Fall"
},
{
color: "Cypress",
hex: "#363b25",
year: "2014",
season: "Fall"
},
//Spring 2014
{
color: "Dazzling Blue",
hex: "#1464ab",
year: "2014",
season: "Spring"
},
{
color: "Violet Tulip",
hex: "#9096c8",
year: "2014",
season: "Spring"
},
{
color: "Freesia",
hex: "#fcd800",
year: "2014",
season: "Spring"
},
{
color: "Paloma",
hex: "#a7b0ad",
year: "2014",
season: "Spring"
},
{
color: "Placid Blue",
hex: "#82b8dc",
year: "2014",
season: "Spring"
},
{
color: "Celosa Orange",
hex: "#f38047",
year: "2014",
season: "Spring"
},
{
color: "Hemlock",
hex: "#9cccb2",
year: "2014",
season: "Spring"
},
{
color: "Radiant Orchid",
hex: "#ac70ae",
year: "2014",
season: "Spring"
},
{
color: "Cayenne",
hex: "#e0655d",
year: "2014",
season: "Spring"
},
{
color: "Sand",
hex: "#cfb38c",
year: "2014",
season: "Spring"
}
],
messages: []
},
computed: {
filteredColors: function() {
let self = this;
return this.colors.filter(function(color) {
let parts = self.colorSearch.trim().split(" ");
for(let part of parts) {if (window.CP.shouldStopExecution(1)){break;}
let searchRegex = new RegExp(part, 'i');
if(!(
searchRegex.test(color.hex) ||
searchRegex.test(color.color) ||
searchRegex.test(color.year) ||
searchRegex.test(color.season)
)) {
return false;
}
}
window.CP.exitedLoop(1);
return true;
})
}
},
methods: {
addedToClipboard: function(color, hex) {
let self = this,
newMessage = {
message: color + " (" + hex + ") copied to clipboard",
hex: hex,
timeout: ""
};
newMessage.timeout = setTimeout(function() {
self.messages.shift();
}, 3000)
this.messages.push(newMessage);
},
removeMessage: function(index) {
clearTimeout(this.messages[index].timeout);
this.messages.splice(index, 1);
}
}
})
//# sourceURL=pen.js
</script>
</body>
</html>
