Skip to content

Commit 50019dd

Browse files
larsenworklarsenwork
committed
WIP
1 parent 1ca0d7c commit 50019dd

File tree

8 files changed

+283
-21
lines changed

8 files changed

+283
-21
lines changed

‎assets/css/_slideshow.css

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,8 @@
1414
flex-direction: column;
1515
justify-content: center;
1616

17-
& .eg-iframe {
18-
width: 100%;
19-
height: 100%;
20-
border-radius: var(--spacer-xsmall);
21-
overflow: hidden;
22-
}
23-
2417
& iframe {
18+
background-color: hsla(0, 0%, 100%, 0.5);
2519
width: 100%;
2620
height: 100%;
2721
}

‎assets/css/_utilities.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676

7777
.u-aspect--1-1 {
7878
&::before {
79-
padding-top: 10%;
79+
padding-top: 100%;
8080
}
8181
}
8282

‎components/slides/color-spaces-demo.vue

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
<div
3+
v-if="active"
4+
:style="{
5+
'--gradientRGB': gradientCalc('rgb'),
6+
'--gradientLRGB': gradientCalc('lrgb'),
7+
'--gradientHSL': gradientCalc('hsl'),
8+
'--gradientLAB': gradientCalc('lab'),
9+
'--gradientLCH': gradientCalc('lch'),
10+
'--color1': gradientColor1,
11+
'--color2': gradientColor2
12+
}"
13+
class="eg-slide"
14+
>
15+
<div class="eg-slide-content eg-slide-colorSpacesDemo">
16+
<div class="u-position-relative">
17+
Default
18+
</div>
19+
<div class="u-position-relative">
20+
RGB
21+
</div>
22+
<div class="u-position-relative">
23+
1
24+
</div>
25+
<div class="u-position-relative">
26+
1
27+
</div>
28+
<div class="u-position-relative">
29+
1
30+
</div>
31+
<div class="u-position-relative">
32+
1
33+
</div>
34+
</div>
35+
</div>
36+
</template>
37+
38+
<script>
39+
import eagle from 'eagle.js'
40+
import easingEdit from '~/components/tools/gradient/easing-edit'
41+
import easingPreview from '~/components/tools/gradient/easing-preview'
42+
import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
43+
44+
export default {
45+
components: {
46+
easingEdit,
47+
easingPreview,
48+
},
49+
mixins: [eagle.slide, gradientOutput],
50+
props: {
51+
// steps: { default: 3, type: Number },
52+
},
53+
watch: {
54+
active: function() {
55+
if (this.active) {
56+
const color1 = {
57+
h: 0,
58+
s: 100,
59+
l: 50,
60+
a: 1,
61+
hsv: {
62+
s: 0,
63+
v: 20,
64+
},
65+
}
66+
const color2 = {
67+
h: 166,
68+
s: 100,
69+
l: 46,
70+
a: 1,
71+
hsv: {
72+
s: 0,
73+
v: 10,
74+
},
75+
}
76+
const ease1 = {
77+
x: 0,
78+
y: 0,
79+
}
80+
const ease2 = {
81+
x: 1,
82+
y: 1,
83+
}
84+
const direction = {
85+
deg: 180,
86+
x: 0.5,
87+
y: 0.2,
88+
}
89+
this.$store.state.gradient.direction = direction
90+
this.$store.state.gradient.ease1 = ease1
91+
this.$store.state.gradient.ease2 = ease2
92+
this.$store.state.gradient.color1 = color1
93+
this.$store.state.gradient.color2 = color2
94+
}
95+
},
96+
},
97+
}
98+
</script>
99+
100+
<style lang="postcss">
101+
.eg-slide-colorSpacesDemo {
102+
display: grid;
103+
grid-gap: var(--spacer-small);
104+
grid-template-columns: repeat(3, 1fr);
105+
grid-template-rows: repeat(2, 1fr);
106+
overflow: hidden;
107+
108+
& > * {
109+
padding: var(--spacer-xsmall);
110+
width: 100%;
111+
height: 100%;
112+
}
113+
114+
& > :nth-child(1) {
115+
background: linear-gradient(to bottom, var(--color1), var(--color2));
116+
}
117+
118+
& > :nth-child(2) {
119+
background: var(--gradientRGB);
120+
}
121+
122+
& > :nth-child(3) {
123+
background: var(--gradientLRGB);
124+
}
125+
126+
& > :nth-child(4) {
127+
background: var(--gradientHSL);
128+
}
129+
130+
& > :nth-child(5) {
131+
background: var(--gradientLAB);
132+
}
133+
134+
& > :nth-child(6) {
135+
background: var(--gradientLCH);
136+
}
137+
}
138+
</style>

‎components/slides/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import linearToEasing from '~/components/slides/linear-to-easing'
2+
import colorSpacesDemo from '~/components/slides/color-spaces-demo'
3+
4+
export { linearToEasing, colorSpacesDemo }

‎components/slides/linear-to-easing.vue

Lines changed: 99 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<template>
22
<div
33
v-if="active"
4+
:style="{
5+
'--gradientRGB': gradientCalc('rgb'),
6+
'--color1': gradientColor1,
7+
'--color2': gradientColor2
8+
}"
49
class="eg-slide"
510
>
611
<div class="eg-slide-content eg-slide-linearToEasing">
712
<div class="u-position-relative">
813
<div
14+
v-if="step > 1"
915
class="u-aspect--1-1"
1016
>
1117
<svg
@@ -22,14 +28,16 @@
2228
</div>
2329
<div class="u-position-relative">
2430
<div
31+
v-if="step > 1"
2532
class="u-aspect--1-1"
2633
>
2734
<easing-preview/>
28-
<easing-edit v-if="step >3" :show-grid="false"/>
35+
<easing-edit v-if="step > 2" :show-grid="false"/>
2936
</div>
3037
</div>
3138
<div class="u-position-relative">
3239
<div
40+
v-if="step > 1"
3341
class="u-aspect--1-1"
3442
>
3543
<svg
@@ -52,29 +60,116 @@
5260
import eagle from 'eagle.js'
5361
import easingEdit from '~/components/tools/gradient/easing-edit'
5462
import easingPreview from '~/components/tools/gradient/easing-preview'
63+
import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
5564
5665
export default {
5766
components: {
5867
easingEdit,
5968
easingPreview,
6069
},
61-
mixins: [eagle.slide],
70+
mixins: [eagle.slide, gradientOutput],
6271
props: {
63-
steps: { default: 5, type: Number },
72+
steps: { default: 3, type: Number },
73+
},
74+
watch: {
75+
active: function() {
76+
if (this.active) {
77+
const color1 = {
78+
h: 0,
79+
s: 0,
80+
l: 0,
81+
a: 1,
82+
hsv: {
83+
s: 0,
84+
v: 20,
85+
},
86+
}
87+
const color2 = {
88+
h: 0,
89+
s: 0,
90+
l: 80,
91+
a: 1,
92+
hsv: {
93+
s: 0,
94+
v: 10,
95+
},
96+
}
97+
const ease1 = {
98+
x: 0,
99+
y: 0,
100+
}
101+
const ease2 = {
102+
x: 1,
103+
y: 1,
104+
}
105+
const direction = {
106+
deg: 90,
107+
x: 0.5,
108+
y: 0.2,
109+
}
110+
this.$store.state.gradient.direction = direction
111+
this.$store.state.gradient.ease1 = ease1
112+
this.$store.state.gradient.ease2 = ease2
113+
this.$store.state.gradient.color1 = color1
114+
this.$store.state.gradient.color2 = color2
115+
}
116+
},
64117
},
65118
}
66119
</script>
67120

68121
<style lang="postcss">
69122
.eg-slide-linearToEasing {
70123
display: grid;
71-
align-items: center;
72124
grid-template-columns: repeat(3, 1fr);
73125
overflow: hidden;
74126
75127
& * {
76128
overflow: visible;
77129
}
130+
131+
& > * {
132+
width: 100%;
133+
height: 100%;
134+
display: flex;
135+
align-items: center;
136+
}
137+
138+
& > :nth-child(1) {
139+
background-color: var(--color1);
140+
141+
&:before {
142+
content: '';
143+
position: absolute;
144+
top: 0;
145+
right: -1px;
146+
bottom: 0;
147+
width: 2px;
148+
background-color: var(--color1);
149+
}
150+
}
151+
152+
& > :nth-child(2) {
153+
background: linear-gradient(to right, var(--color1), var(--color2));
154+
155+
&:hover {
156+
background: var(--gradientRGB);
157+
}
158+
}
159+
160+
& > :nth-child(3) {
161+
background-color: var(--color2);
162+
163+
&:before {
164+
content: '';
165+
position: absolute;
166+
top: 0;
167+
left: -1px;
168+
bottom: 0;
169+
width: 2px;
170+
background-color: var(--color2);
171+
}
172+
}
78173
}
79174
80175
.eg-slide-linearToEasing-path {

‎components/tools/gradient/easing-edit.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,15 @@
6363
/>
6464
</g>
6565
<line
66+
v-if="$store.state.gradient.ease1.x > 0 || $store.state.gradient.ease1.y > 0"
6667
:x2="$store.state.gradient.ease1.x"
6768
:y2="1 - $store.state.gradient.ease1.y"
6869
class="c-easingEdit-line"
6970
x1="0"
7071
y1="1"
7172
/>
7273
<line
74+
v-if="$store.state.gradient.ease2.x < 1 || $store.state.gradient.ease2.y < 1"
7375
:x2="$store.state.gradient.ease2.x"
7476
:y2="1 - $store.state.gradient.ease2.y"
7577
class="c-easingEdit-line"
@@ -105,7 +107,7 @@ export default {
105107

106108
<style lang="postcss">
107109
.c-easingEdit {
108-
/* Placeholder */
110+
z-index: 1;
109111
}
110112
111113
.c-easingEdit-toggle {

‎nuxt.config.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ module.exports = {
8484
** Build configuration
8585
*/
8686
build: {
87-
vendor: ['vue-lazyload', 'eagle.js'],
87+
// vendor: ['vue-lazyload', 'eagle.js'],
8888
plugins: [
8989
new BundleAnalyzerPlugin({
9090
analyzerMode: 'static',
@@ -98,6 +98,28 @@ module.exports = {
9898
** Run ESLint on save
9999
*/
100100
extend(config, { isDev, isClient }) {
101+
// config.module.rules.push({
102+
// test: /\.(js)$/,
103+
// loader: 'babel-loader',
104+
// include: /(node_modules\/eagle.js)/,
105+
// })
106+
const babelLoader = config.module.rules.find(
107+
rule => rule.loader === 'babel-loader'
108+
)
109+
babelLoader.exclude = /node_modules\/(?!eagle.js)/
110+
111+
// test: /\.(js)$/,
112+
// loader: 'babel-loader',
113+
// include: /(node_modules\/eagle.js)/,
114+
// }
115+
116+
// const babelLoader = {
117+
// test: /\.jsx?$/,
118+
// loader: 'babel-loader',
119+
// exclude: /node_modules/,
120+
// options: { babelrc: false, cacheDirectory: true, presets: [[Array]] },
121+
// }
122+
101123
if (isDev && isClient) {
102124
config.module.rules.push({
103125
enforce: 'pre',

0 commit comments

Comments
 (0)