Eric
1c605ae720
Changes: - Updated the ajax button component to support a `syncingMessage` prop, a string that, when set, will be displayed with the button's loading spinner. - Updated the ajax button used on the "Talk to us" form to say "Looking up availability…" when the form is submitted before a user is redirected to a Calendly booking page.
76 lines
2.4 KiB
JavaScript
Vendored
76 lines
2.4 KiB
JavaScript
Vendored
/**
|
|
* <ajax-button>
|
|
* -----------------------------------------------------------------------------
|
|
* A button with a built-in loading spinner.
|
|
*
|
|
* @type {Component}
|
|
*
|
|
* @event click [emitted when clicked]
|
|
* -----------------------------------------------------------------------------
|
|
*/
|
|
|
|
parasails.registerComponent('ajaxButton', {
|
|
// ╔═╗╦═╗╔═╗╔═╗╔═╗
|
|
// ╠═╝╠╦╝║ ║╠═╝╚═╗
|
|
// ╩ ╩╚═╚═╝╩ ╚═╝
|
|
props: [
|
|
'syncing',
|
|
'syncingMessage'
|
|
],
|
|
|
|
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
|
|
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
|
|
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
|
|
data: function (){
|
|
return {
|
|
//…
|
|
};
|
|
},
|
|
|
|
// ╦ ╦╔╦╗╔╦╗╦
|
|
// ╠═╣ ║ ║║║║
|
|
// ╩ ╩ ╩ ╩ ╩╩═╝
|
|
template: `
|
|
<button @click="click()" type="submit" class="btn ajax-button" :class="[syncing ? 'syncing' : '']">
|
|
<span class="button-text" v-if="!syncing"><slot name="default">Submit</slot></span>
|
|
<span class="button-loader clearfix" v-if="syncing">
|
|
<slot name="syncing-state">
|
|
<div purpose="message-with-spinner" v-if="syncingMessage">
|
|
<span purpose="syncing-message">{{syncingMessage}}</span>
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
<div class="loading-spinner" v-else></div>
|
|
</slot>
|
|
</span>
|
|
</button>
|
|
`,
|
|
|
|
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
|
|
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
|
|
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
|
|
beforeMount: function() {
|
|
if(this.syncingMessage) {
|
|
if(typeof this.syncingMessage !== 'string') {
|
|
throw new Error('Invalid `syncing-message` value passed to <ajax-button>. Expected a string, but instead got a '+typeof this.syncingMessage);
|
|
}
|
|
}
|
|
},
|
|
mounted: async function(){
|
|
//…
|
|
},
|
|
beforeDestroy: function() {
|
|
//…
|
|
},
|
|
|
|
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
|
|
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
|
|
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
|
|
methods: {
|
|
|
|
click: async function(){
|
|
this.$emit('click');
|
|
},
|
|
|
|
}
|
|
});
|