Skip to content

Commit eda6752

Browse files
jofftiquezjofftiquez
committed
Added sample page
1 parent 0e2c9f6 commit eda6752

File tree

5 files changed

+443
-19
lines changed

5 files changed

+443
-19
lines changed

‎.npmignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
index.html
2+
node_modules

‎dist/vue-breathing-colors.js

+199
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
var BreathingColors =
2+
/******/ (function(modules) { // webpackBootstrap
3+
/******/ // The module cache
4+
/******/ var installedModules = {};
5+
/******/
6+
/******/ // The require function
7+
/******/ function __webpack_require__(moduleId) {
8+
/******/
9+
/******/ // Check if module is in cache
10+
/******/ if(installedModules[moduleId]) {
11+
/******/ return installedModules[moduleId].exports;
12+
/******/ }
13+
/******/ // Create a new module (and put it into the cache)
14+
/******/ var module = installedModules[moduleId] = {
15+
/******/ i: moduleId,
16+
/******/ l: false,
17+
/******/ exports: {}
18+
/******/ };
19+
/******/
20+
/******/ // Execute the module function
21+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22+
/******/
23+
/******/ // Flag the module as loaded
24+
/******/ module.l = true;
25+
/******/
26+
/******/ // Return the exports of the module
27+
/******/ return module.exports;
28+
/******/ }
29+
/******/
30+
/******/
31+
/******/ // expose the modules object (__webpack_modules__)
32+
/******/ __webpack_require__.m = modules;
33+
/******/
34+
/******/ // expose the module cache
35+
/******/ __webpack_require__.c = installedModules;
36+
/******/
37+
/******/ // define getter function for harmony exports
38+
/******/ __webpack_require__.d = function(exports, name, getter) {
39+
/******/ if(!__webpack_require__.o(exports, name)) {
40+
/******/ Object.defineProperty(exports, name, {
41+
/******/ configurable: false,
42+
/******/ enumerable: true,
43+
/******/ get: getter
44+
/******/ });
45+
/******/ }
46+
/******/ };
47+
/******/
48+
/******/ // getDefaultExport function for compatibility with non-harmony modules
49+
/******/ __webpack_require__.n = function(module) {
50+
/******/ var getter = module && module.__esModule ?
51+
/******/ function getDefault() { return module['default']; } :
52+
/******/ function getModuleExports() { return module; };
53+
/******/ __webpack_require__.d(getter, 'a', getter);
54+
/******/ return getter;
55+
/******/ };
56+
/******/
57+
/******/ // Object.prototype.hasOwnProperty.call
58+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
59+
/******/
60+
/******/ // __webpack_public_path__
61+
/******/ __webpack_require__.p = "";
62+
/******/
63+
/******/ // Load entry module and return exports
64+
/******/ return __webpack_require__(__webpack_require__.s = 0);
65+
/******/ })
66+
/************************************************************************/
67+
/******/ ([
68+
/* 0 */
69+
/***/ (function(module, exports, __webpack_require__) {
70+
71+
"use strict";
72+
73+
74+
Object.defineProperty(exports, "__esModule", {
75+
value: true
76+
});
77+
78+
var _breathingColors = __webpack_require__(1);
79+
80+
var _breathingColors2 = _interopRequireDefault(_breathingColors);
81+
82+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
83+
84+
var BreathingColors = {
85+
install: function install(Vue, options) {
86+
(0, _breathingColors2.default)(Vue);
87+
}
88+
};
89+
90+
exports.default = BreathingColors;
91+
92+
/***/ }),
93+
/* 1 */
94+
/***/ (function(module, exports, __webpack_require__) {
95+
96+
"use strict";
97+
98+
99+
Object.defineProperty(exports, "__esModule", {
100+
value: true
101+
});
102+
103+
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
104+
105+
var validate = function validate(colors, interval, transition) {
106+
if (!colors) {
107+
console.warn('Breathing Colors Warn: Colors is ' + colors + '. Array of colors is required.');
108+
return;
109+
}
110+
111+
if (!interval) {
112+
console.warn('Breathing Colors Warn: Interval is ' + colors + '. Animation interval is required.');
113+
return;
114+
}
115+
116+
if (typeof interval !== 'number') {
117+
console.warn('Breathing Colors Warn: Interval expects a number got - ' + (typeof interval === 'undefined' ? 'undefined' : _typeof(interval)) + '.');
118+
return;
119+
}
120+
121+
if (!transition) {
122+
console.warn('Breathing Colors Warn: Transition object is ' + interval + '. Transition object required,.');
123+
return;
124+
}
125+
126+
if (!transition.duration) {
127+
console.warn('Breathing Colors Warn: Transition duration is ' + transition.duration + '. Transition duration is required.');
128+
return;
129+
}
130+
131+
if (typeof transition.duration !== 'number') {
132+
console.warn('Breathing Colors Warn: Transition duration expects a number got - ' + _typeof(transition.duration) + '.');
133+
return;
134+
}
135+
136+
if (!transition.timing) {
137+
console.warn('Breathing Colors Warn: Transition timing is ' + transition.timing + '. Transition object required.');
138+
return;
139+
}
140+
};
141+
142+
exports.default = function (Vue) {
143+
Vue.directive('breathing-colors', {
144+
inserted: function inserted(el) {
145+
console.log(el);
146+
},
147+
bind: function bind(el, binding, vnode) {
148+
var name = binding.name,
149+
value = binding.value,
150+
oldValue = binding.oldValue,
151+
expression = binding.expression,
152+
arg = binding.arg,
153+
modifiers = binding.modifiers;
154+
var colors = value.colors,
155+
interval = value.interval,
156+
transition = value.transition;
157+
var hover = modifiers.hover,
158+
random = modifiers.random;
159+
160+
161+
validate(colors, interval, transition);
162+
163+
var count = colors.length;
164+
colors = new Array(colors)[0].reverse();
165+
transition = 'background-color ' + (transition.duration || 1000) + 'ms ' + transition.timing + ' ' + (transition.delay ? transition.delay + 'ms' : '');
166+
167+
el.style.backgroundColor = colors[colors.length - 1];
168+
el.style['-webkit-transition'] = transition;
169+
el.style['-moz-transition'] = transition;
170+
el.style['-o-transition'] = transition;
171+
el.style.transition = transition;
172+
173+
var animate = function animate() {
174+
if (random) {
175+
var num = Math.round(Math.random() * colors.length);
176+
el.style.backgroundColor = colors[num];
177+
} else {
178+
el.style.backgroundColor = colors[--count];
179+
if (count === 0) {
180+
count = colors.length;
181+
}
182+
}
183+
};
184+
185+
if (hover) {
186+
el.onmouseover = function () {
187+
animate();
188+
};
189+
} else {
190+
setInterval(function () {
191+
animate();
192+
}, interval);
193+
}
194+
}
195+
});
196+
};
197+
198+
/***/ })
199+
/******/ ]);

‎index.html

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
10+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
11+
<style type="text/css">
12+
body {
13+
padding: 0 !important;
14+
margin: 0 !important;
15+
color: white;
16+
}
17+
18+
#panel-1 {
19+
/*min-height: 100vh;*/
20+
padding-top: 50px;
21+
padding-bottom: 50px;
22+
}
23+
24+
h1, h2, h3, h4, h5, h6 {
25+
font-family: 'Robot', sans-serif;
26+
}
27+
p, div {
28+
font-family: 'Robot', sans-serif;
29+
}
30+
31+
pre {
32+
color: white;
33+
background: #3b4c49;
34+
padding: 10px;
35+
border-radius: 5px;
36+
}
37+
38+
.sample-container {
39+
background-color: white;
40+
padding: 10px;
41+
border-radius: 5px;
42+
color: #3b4c49;
43+
margin-bottom: 20px;
44+
}
45+
46+
.samples {
47+
width: 100%;
48+
height: 200px;
49+
}
50+
</style>
51+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
52+
<script src="./dist/vue-breathing-colors.js"></script>
53+
</head>
54+
<body>
55+
<div id="app" v-breathing-colors.random="bg">
56+
<div class="container">
57+
<div class="row justify-content-md-center" id="panel-1">
58+
<div class="col-xs-12 col-md-8">
59+
<h1 align="center">Vue Breathing Colors</h1>
60+
<p style="text-align: center;">
61+
Vue Breathing Colors is a vue directive used to change background color of any component in a "breathing like" manner.
62+
</p>
63+
<h2>Installation</h2>
64+
<h6>NPM</h6>
65+
<code>npm install vue-breathing-colors --save</code>
66+
<br><br>
67+
<h6>Yarn</h6>
68+
<code>yarn add vue-breathing-colors</code>
69+
<br><br>
70+
<h6>CDN</h6>
71+
<code>https://unpkg.com/[email protected]/dist/vue-breathing-colors.js</code>
72+
<br><br>
73+
<h2>Usage</h2>
74+
<pre>
75+
import Vue from 'vue';
76+
import BreathingColors from 'vue-breathing-colors';
77+
78+
Vue.use(BreathingColors);
79+
</pre>
80+
81+
<pre v-text="htmlGuide"></pre>
82+
<h2>Samples</h2>
83+
<div class="sample-container">
84+
<strong>Auto</strong><br>
85+
<code>v-breathing-colors="data"</code>
86+
<p>The colors will change based on array index of the color like, <code>0</code> then <code>1</code> then <code>2</code> then <code>0</code> again and so on.</p>
87+
<div class="samples" v-breathing-colors="sample"></div>
88+
<br>
89+
<button class="btn" v-breathing-colors="sample">Button</button>
90+
</div>
91+
<div class="sample-container">
92+
<strong>Auto + Random</strong><br>
93+
<code>v-breathing-colors.random="data"</code>
94+
<p>The colors randomly change based on colors inside the array by adding the modifier <code>random</code>.</p>
95+
<div class="samples" v-breathing-colors.random="sample"></div>
96+
</div>
97+
<div class="sample-container">
98+
<strong>Hover</strong><br>
99+
<code>v-breathing-colors.hover="data"</code>
100+
<p>The colors will change on mouse hover event. The colors will change based on array index of the color like, <code>0</code> then <code>1</code> then <code>2</code> then <code>0</code> again and so on.</p>
101+
<div class="samples" v-breathing-colors.hover="sample"></div>
102+
</div>
103+
<div class="sample-container">
104+
<strong>Hover + Random</strong><br>
105+
<code>v-breathing-colors.hover.random="data"</code>
106+
<p>The colors will change on mouse hover event. TThe colors randomly change based on colors inside the array by adding the modifier <code>random</code>.</p>
107+
<div class="samples" v-breathing-colors.hover.random="sample"></div>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
<script>
114+
Vue.use(BreathingColors.default)
115+
var vm = new Vue({
116+
el: '#app',
117+
data() {
118+
return {
119+
bg: {
120+
colors: [
121+
'#ff5151', '#ff6d51', '#ffaa51',
122+
'#ffd051', '#caff51', '#6eff51',
123+
'#51ff70', '#51ff96', '#51ffca',
124+
'#51ffff', '#51c7ff', '#51a2ff',
125+
'#5176ff', '#5651ff', '#7f51ff',
126+
'#a251ff', '#bc51ff', '#df51ff',
127+
'#ff51fc', '#ff51e4', '#ff51c5',
128+
'#ff519c', '#ff5185', '#ff5170',
129+
'#ff5159'
130+
],
131+
interval: 3000,
132+
transition: {
133+
duration: 1000,
134+
timing: 'linear'
135+
}
136+
},
137+
sample: {
138+
colors: ['#ffd051', '#ff51e4', '#ff5170'],
139+
interval: 3000,
140+
transition: {
141+
duration: 1000,
142+
timing: 'linear'
143+
}
144+
},
145+
sample2: {
146+
colors: ['#ffd051', '#ff51e4', '#ff5170'],
147+
interval: 3000,
148+
transition: {
149+
duration: 500,
150+
timing: 'linear'
151+
}
152+
},
153+
htmlGuide: `<head>
154+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"><\/script>
155+
<script src="https://unpkg.com/[email protected]/dist/vue-breathing-colors.js"><\/script>
156+
</head>
157+
158+
<body>
159+
<script>
160+
Vue.use(BreathingColors.default)
161+
var vm = new Vue({
162+
el: '#app'
163+
})
164+
<\/script>
165+
</body>`
166+
}
167+
}
168+
});
169+
170+
</script>
171+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
172+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
173+
</body>
174+
</html>
175+

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-breathing-colors",
3-
"version": "0.0.4",
3+
"version": "0.0.5",
44
"description": "Vue directive for breathing colors transition.",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)