Skip to content

Commit 8c99014

Browse files
hoangnl2112hoangnl2112
authored
add darken effect + import plugin effects (#390)
1 parent ae979bc commit 8c99014

File tree

4 files changed

+215
-0
lines changed

4 files changed

+215
-0
lines changed

‎.storybook/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import '../src/style/main.scss'
99
//import 'prismjs/themes/prism-tomorrow.css';
1010
//import './style.css';
1111
import '../src/plugin/waves'
12+
import '../src/plugin/darken'
1213
import '@fortawesome/fontawesome-free/css/all.css'
1314

1415
import GigaComponents from "../index";

‎index.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import './src/plugin/waves'
2+
import './src/plugin/darken'
3+
14
const GComponents = require('./src/components');
25

36
const GigaComponents = {

‎src/components/transition/__story__/transition.stories.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { text, withKnobs, boolean, number, array } from '@storybook/addon-knobs';
2+
import GSelect from '../../GSelect/GSelect'
3+
4+
export default {
5+
title: 'Effect',
6+
decorators: [withKnobs],
7+
};
8+
9+
10+
export const darken = () => ({
11+
props: {
12+
color: { default: text('Color', '#84ffff')}
13+
},
14+
template: `<div class="darken-effect" :style="[{'background-color': color, width: '100px', height: '100px', border: '1px solid transparent', cursor: 'pointer'}]"></div>`
15+
})
16+
17+
export const waves = () => ({
18+
props: {
19+
color: { default: text('Color', '#84ffff')},
20+
wave: { default: text('Waves Color', 'orange')}
21+
},
22+
computed: {
23+
wavesColor() {
24+
return 'waves-' + this.wave
25+
}
26+
},
27+
template: `<div :class="['waves-effect', wavesColor]" :style="[{'background-color': color, width: '100px', height: '100px', border: '1px solid transparent', cursor: 'pointer'}]"></div>`
28+
})
29+
30+
export const transition = () => ({
31+
props: {},
32+
data() {
33+
return {
34+
list: ['bounceDown', 'bounceUp', 'bounceRight', 'bounceLeft', 'fadeDown', 'fadeUp', 'fadeRight', 'fadeLeft', 'flipX', 'flipY', 'lightSpeedRight', 'lightSpeedLeft', 'rotate', 'rotateDownLeft', 'rotateDownRight', 'rotateUpLeft', 'rotateUpRight', 'roll', 'zoom', 'zoomUp', 'zoomDown', 'zoomLeft', 'zoomRight'],
35+
show: false,
36+
transition: null
37+
}
38+
},
39+
template: `<div>
40+
<div class="row-flex">
41+
<p class="mr-2">Choose transition: </p>
42+
<select v-model="transition" style="border: 1px solid black">
43+
<option disabled value="">Select an animation</option>
44+
<option v-for="(item, i) in list" :key="i" :value="item">{{item}}</option>
45+
</select>
46+
<button class="ml-2" @click="show = !show">Toggle</button>
47+
</div>
48+
<div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 200px">
49+
<transition :name="transition">
50+
<p v-if="show">{{transition}}</p>
51+
</transition>
52+
</div>
53+
</div>`
54+
})
55+
56+
export const animation = () => ({
57+
props: {},
58+
data() {
59+
return {
60+
list: ['bounce', 'flash', 'flip', 'heartBeat', 'jello', 'rubberBand', 'shake', 'swing', 'tada', 'wobble'],
61+
show: false,
62+
animation: null
63+
}
64+
},
65+
template: `<div>
66+
<div class="row-flex">
67+
<p class="mr-2">Choose animation: </p>
68+
<select v-model="animation" style="border: 1px solid black">
69+
<option disabled value="">Select an animation</option>
70+
<option v-for="(item, i) in list" :key="i" :value="item">{{item}}</option>
71+
</select>
72+
</div>
73+
<div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 200px">
74+
<p class="animated infinite" :class="animation">{{animation}}</p>
75+
</div>
76+
</div>`
77+
})

‎src/plugin/darken.js

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import {getHslColor} from "../utils/colors";
2+
3+
;(function (window) {
4+
'use strict';
5+
6+
const Darken = Darken || {};
7+
8+
const Effect = {
9+
//click
10+
elements: [],
11+
// Effect delay
12+
duration: 1500,
13+
14+
show: function (e, element) {
15+
16+
// Disable right click
17+
if (e.button === 2) {
18+
return false;
19+
}
20+
21+
const el = element || this;
22+
Effect.elements.push(el)
23+
24+
const background = el.style.backgroundColor,
25+
border = el.style.borderColor,
26+
shadow = el.style.boxShadow
27+
28+
let {h, s, l, a} = getHslColor(background)
29+
if (h === 0 && s === 0) {
30+
let hsla
31+
if (border)
32+
hsla = getHslColor(border)
33+
else
34+
hsla = {h: 0, s: 0, l: 0, a: 0}
35+
h = hsla.h
36+
s = hsla.s
37+
l = hsla.l
38+
a = hsla.a
39+
}
40+
el.style.background = `hsla(${h}, ${s - 5}%, ${l - 15}%, ${a})`
41+
el.style.borderColor = `hsla(${h + 2}, ${s - 10}%, ${l - 15}%, ${a})`
42+
el.style.boxShadow = `1px 0px 5px hsla(${h + 2}, ${s - 10}%, ${l - 15}%, ${a})`;
43+
44+
setTimeout(() => {
45+
el.style.backgroundColor = background
46+
el.style.borderColor = border
47+
el.style.boxShadow = shadow
48+
const index = Effect.elements.findIndex(element => element === el)
49+
Effect.elements.splice(index, 1)
50+
}, Effect.duration)
51+
},
52+
53+
};
54+
55+
const TouchHandler = {
56+
touches: 0,
57+
allowEvent: function (e) {
58+
let allow = true;
59+
60+
if (e.type === 'touchstart') {
61+
TouchHandler.touches += 1;
62+
} else if (e.type === 'touchend' || e.type === 'touchcancel') {
63+
setTimeout(function () {
64+
if (TouchHandler.touches > 0) {
65+
TouchHandler.touches -= 1;
66+
}
67+
}, Effect.duration);
68+
} else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
69+
allow = false;
70+
}
71+
72+
return allow;
73+
},
74+
touchup: function (e) {
75+
TouchHandler.allowEvent(e);
76+
}
77+
};
78+
79+
function getWavesEffectElement(e) {
80+
if (TouchHandler.allowEvent(e) === false) {
81+
return null;
82+
}
83+
84+
let element = null;
85+
let target = e.target || e.srcElement;
86+
87+
while (target.parentNode !== null) {
88+
if (!(target instanceof SVGElement) && target.className.indexOf('darken-effect') !== -1) {
89+
element = target;
90+
break;
91+
}
92+
target = target.parentNode;
93+
}
94+
return element;
95+
}
96+
97+
function showEffect(e) {
98+
const element = getWavesEffectElement(e);
99+
100+
if (element !== null && Effect.elements.findIndex(el => el === element) === -1) {
101+
Effect.show(e, element);
102+
}
103+
}
104+
105+
Darken.displayEffect = function (options) {
106+
options = options || {};
107+
108+
if ('duration' in options) {
109+
Effect.duration = options.duration;
110+
}
111+
112+
113+
if ('ontouchstart' in window) {
114+
document.body.addEventListener('touchstart', showEffect, false);
115+
}
116+
117+
document.body.addEventListener('mousedown', showEffect, false);
118+
};
119+
120+
Darken.attach = function (element) {
121+
if ('ontouchstart' in window) {
122+
element.addEventListener('touchstart', showEffect, false);
123+
}
124+
125+
element.addEventListener('mousedown', showEffect, false);
126+
};
127+
128+
window.Darken = Darken;
129+
130+
document.addEventListener('DOMContentLoaded', function () {
131+
Darken.displayEffect();
132+
}, false);
133+
134+
})(window);

0 commit comments

Comments
 (0)