Skip to content

Commit 0e2c9f6

Browse files
jofftiquezjofftiquez
committed
committing is not a crime
1 parent 3beaac3 commit 0e2c9f6

File tree

7 files changed

+2994
-1
lines changed

7 files changed

+2994
-1
lines changed

‎dist/index.js

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
module.exports =
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.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import BreathingColors from './dist';
2+
3+
export default BreathingColors;

‎package.json

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

‎src/breathing-colors/index.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const validate = (colors, interval, transition) => {
2+
if(!colors) {
3+
console.warn(`Breathing Colors Warn: Colors is ${colors}. Array of colors is required.`);
4+
return;
5+
}
6+
7+
if(!interval) {
8+
console.warn(`Breathing Colors Warn: Interval is ${colors}. Animation interval is required.`);
9+
return;
10+
}
11+
12+
if(typeof interval !== 'number') {
13+
console.warn(`Breathing Colors Warn: Interval expects a number got - ${typeof interval}.`);
14+
return;
15+
}
16+
17+
if(!transition) {
18+
console.warn(`Breathing Colors Warn: Transition object is ${interval}. Transition object required,.`);
19+
return;
20+
}
21+
22+
if(!transition.duration) {
23+
console.warn(`Breathing Colors Warn: Transition duration is ${transition.duration}. Transition duration is required.`);
24+
return;
25+
}
26+
27+
if(typeof transition.duration !== 'number') {
28+
console.warn(`Breathing Colors Warn: Transition duration expects a number got - ${typeof transition.duration}.`);
29+
return;
30+
}
31+
32+
if(!transition.timing) {
33+
console.warn(`Breathing Colors Warn: Transition timing is ${transition.timing}. Transition object required.`);
34+
return;
35+
}
36+
}
37+
38+
export default (Vue) => {
39+
Vue.directive('breathing-colors', {
40+
inserted: (el) => {
41+
console.log(el)
42+
},
43+
bind: (el, binding, vnode) => {
44+
const {
45+
name, value, oldValue, expression, arg, modifiers
46+
} = binding;
47+
var {
48+
colors, interval, transition
49+
} = value;
50+
var {
51+
hover, random
52+
} = modifiers;
53+
54+
validate(colors, interval, transition);
55+
56+
var count = colors.length;
57+
colors = new Array(colors)[0].reverse();
58+
transition = `background-color ${ transition.duration || 1000 }ms ${ transition.timing } ${ transition.delay ? transition.delay+'ms' : '' }`;
59+
60+
el.style.backgroundColor = colors[colors.length - 1];
61+
el.style['-webkit-transition'] = transition;
62+
el.style['-moz-transition'] = transition;
63+
el.style['-o-transition'] = transition;
64+
el.style.transition = transition;
65+
66+
const animate = () => {
67+
if(random) {
68+
var num = Math.round(Math.random()*colors.length);
69+
el.style.backgroundColor = colors[num];
70+
} else {
71+
el.style.backgroundColor = colors[--count];
72+
if(count === 0) {
73+
count = colors.length;
74+
}
75+
}
76+
}
77+
78+
if(hover) {
79+
el.onmouseover = () => {
80+
animate();
81+
}
82+
} else {
83+
setInterval(() => {
84+
animate();
85+
}, interval);
86+
}
87+
}
88+
})
89+
};

‎src/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import directives from './breathing-colors';
2+
3+
const BreathingColors = {
4+
install(Vue, options) {
5+
directives(Vue);
6+
}
7+
}
8+
9+
export default BreathingColors;

‎webpack.config.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
4+
module.exports = {
5+
entry: './src',
6+
output: {
7+
library: 'BreathingColors',
8+
libraryTarget: 'commonjs2',
9+
path: path.resolve(__dirname, 'dist'),
10+
filename: 'index.js'
11+
},
12+
module: {
13+
rules: [
14+
{
15+
test: /\.js$/,
16+
exclude: /(node_modules)/,
17+
use: {
18+
loader: 'babel-loader',
19+
options: {
20+
presets: ['env']
21+
}
22+
}
23+
}
24+
]
25+
}
26+
}

0 commit comments

Comments
 (0)