Skip to content

Commit fc7a8ce

Browse files
committed
feat: field validation for 'angle' input in AnimationForm
1 parent 105e302 commit fc7a8ce

File tree

2 files changed

+12
-4
lines changed

2 files changed

+12
-4
lines changed

docs/.vitepress/components/Example.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
const newField =
8383
` ${fieldLabel}: ` +
8484
(typeof opts[fieldLabel] === 'boolean' ||
85-
opts[fieldLabel].match(/^(\d+|\d+\.\d+)$/)
85+
opts[fieldLabel].match(/^\-?(\d+|\d+\.\d+)$/)
8686
? opts[fieldLabel]
8787
: `'${opts[fieldLabel]}'`) +
8888
',\n';

docs/examples/index.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ aside: false
116116
duration: val => validateAnimationFormField.timePropertyValidation(val),
117117
delay: val => validateAnimationFormField.timePropertyValidation(val),
118118
staggerDelay: val => validateAnimationFormField.timePropertyValidation(val),
119+
angle: val => val.match(/^\-?(\d+|\d+\.\d+)(deg)?$/),
119120
}
120121

121122
function resetAnimation(animName, {opts}) {
@@ -133,16 +134,21 @@ aside: false
133134
angle: '0deg'
134135
}
135136

137+
const numberRegEx = opts.angle ? /^\-?(\d+|\d+\.\d+)$/ : /^(\d+|\d+\.\d+)$/;
136138
if (opts.maintainSpace) opts.dimensionsTransition = false;
137139
if (!validateAnimationFormField.blur(opts.blur)) opts.blur = defaultValue.blur;
138140
if (!validateAnimationFormField.easing(opts.easing))
139141
opts.easing = defaultValue.easing;
140142
['duration', 'delay', 'staggerDelay'].forEach(prop => {
141-
if (opts[prop].match(/^(\d+|\d+\.\d+)$/)) opts[prop] = `${opts[prop]}ms`;
143+
if (opts[prop].match(numberRegEx)) opts[prop] = `${opts[prop]}ms`;
142144
else if (!validateAnimationFormField[prop](opts[prop])) {
143145
opts[prop] = defaultValue[prop];
144146
}
145147
});
148+
if (opts.angle) {
149+
if (!validateAnimationFormField.angle(opts.angle)) opts.angle = defaultValue.angle
150+
else if (opts.angle.match(numberRegEx)) opts.angle = Number(opts.angle);
151+
}
146152

147153
const animation = [ 'slide', 'rotations'].includes(animName)
148154
? (triggerSelector.replace('--btn','')
@@ -318,15 +324,15 @@ _Notice that when toggling back up from any rotation, the element will rotate in
318324
:title="'Custom Rotation'"
319325
:btn-list="examples.rotate.btnList"
320326
:content-list="examples.rotate.contentList"
321-
:anim-opts="{}"
327+
:anim-opts="customRotateOpts"
322328
:fields-list="['duration', 'delay', 'angle', 'easing', 'transfOrigin']"
323329
@reset-animation="(opts) => {resetAnimation('rotate', opts)}"
324330
:animation-form-validation="validateAnimationFormField"
325331
:code-snippet="{
326332
code: `jsCssAnimations.init.rotate({
327333
trigger: '.rotate--btn',
328334
targetSelector: '.example__rotate',
329-
angle: 155
335+
angle: 155,
330336
});
331337
`
332338
}">
@@ -355,6 +361,8 @@ code: `jsCssAnimations.init.rotate({
355361
margin: 1rem auto;
356362
padding-top: 0.25em;
357363
border-radius: 50%;
364+
position: relative;
365+
z-index: -1;
358366
}
359367
360368
.rotation-area--text {

0 commit comments

Comments
 (0)