implement allowPageInteraction that was missed
This commit is contained in:
parent
6a5bda1829
commit
cedfc22d33
1 changed files with 22 additions and 1 deletions
|
|
@ -4,7 +4,12 @@
|
||||||
class="loader"
|
class="loader"
|
||||||
role="alert"
|
role="alert"
|
||||||
aria-label="Loading new page"
|
aria-label="Loading new page"
|
||||||
:class="[loaderColor, loaderPosition]"></div>
|
:class="[
|
||||||
|
loaderColor,
|
||||||
|
loaderPosition,
|
||||||
|
allowPageInteraction ? 'allow-ui-interaction' : ''
|
||||||
|
]"
|
||||||
|
@click="captureClick"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -12,6 +17,10 @@ export default {
|
||||||
name: 'loader',
|
name: 'loader',
|
||||||
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
|
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
|
||||||
props: {
|
props: {
|
||||||
|
allowPageInteraction: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
/* Color options: red, green, blue, white, black */
|
/* Color options: red, green, blue, white, black */
|
||||||
loaderColor: {
|
loaderColor: {
|
||||||
type: String
|
type: String
|
||||||
|
|
@ -36,6 +45,13 @@ export default {
|
||||||
'--loader-height': `${this.height}rem`
|
'--loader-height': `${this.height}rem`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
captureClick(event) {
|
||||||
|
if (!this.allowPageInteraction) {
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -63,6 +79,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.allow-ui-interaction::before {
|
||||||
|
//no-block to enable clicking on certain buttons with loaders while the loader is actives
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
//Spinner basics
|
//Spinner basics
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue