Skip to content

Commit 6491022

Browse files
samuelcolvinsamuelcolvin
committed
allowing standalone enquiries
1 parent 02e4c7d commit 6491022

File tree

13 files changed

+108
-57
lines changed

13 files changed

+108
-57
lines changed

‎index.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
background: #eee;
1111
font-family: 'Open Sans', sans-serif;
1212
}
13-
main {
13+
main > div {
1414
background-color: white;
1515
max-width: 800px;
1616
margin: 20px auto;
@@ -20,12 +20,17 @@
2020
</head>
2121
<body>
2222
<main>
23-
<div id="socket"></div>
23+
<div id="socket1"></div>
24+
<div id="socket2"></div>
2425
</main>
2526
</body>
2627
<script>
2728
socket('f8d88b6562b3434ba4ef', {
28-
mode: 'enquiry',
29+
element: '#socket1',
30+
})
31+
socket('f8d88b6562b3434ba4ef', {
32+
element: '#socket2',
33+
mode: 'enquiry-modal',
2934
})
3035
</script>
3136
</html>

‎src/components/con-modal.vue‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -141,20 +141,9 @@ export default {
141141
}
142142
143143
button {
144+
@extend .tcs-button;
144145
margin: 10px auto 0;
145-
background-color: $button-colour;
146-
color: white;
147-
border-radius: 5px;
148-
font-size: 17px;
149-
padding: 8px 12px;
150146
width: 100%;
151-
border: none;
152-
transition: all .3s ease;
153-
outline: none;
154-
cursor: pointer;
155-
&:hover {
156-
background-color: darken($button-colour, 20%);
157-
}
158147
}
159148
}
160149

‎src/components/enquiry-button.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="tcs-enquiry-button">
3+
<router-link :to="{name: 'enquiry-modal'}" class="tcs-button">
4+
{{ $root.config.enquiry_button }}
5+
</router-link>
6+
<router-view></router-view>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {}
12+
</script>
13+
14+
<style lang="scss">
15+
@import '../conf';
16+
</style>

‎src/components/enquiry-modal.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<modal title="Enquiry">
3+
<enquiry></enquiry>
4+
</modal>
5+
</template>
6+
7+
<script>
8+
import modal from './modal.vue'
9+
import enquiry from './enquiry.vue'
10+
11+
export default {
12+
components: {
13+
'modal': modal,
14+
'enquiry': enquiry,
15+
},
16+
}
17+
</script>

‎src/components/enquiry.vue‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -84,19 +84,9 @@ form.tcs {
8484
.tcs-submit {
8585
text-align: right;
8686
button {
87+
@extend .tcs-button;
8788
font-size: 17px;
8889
padding: 10px 12px;
89-
border: none;
90-
border-radius: 5px;
91-
92-
background-color: $button-colour;
93-
color: white;
94-
transition: all .3s ease;
95-
outline: none;
96-
cursor: pointer;
97-
&:hover {
98-
background-color: darken($button-colour, 20%);
99-
}
10090
}
10191
}
10292
</style>

‎src/components/grid.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div id="tcs-grid">
33
<div v-for="contractor in contractors" class="tcs-col">
4-
<router-link :to="{name: 'modal', params: {link: contractor.link}}" class="tcs-box">
4+
<router-link :to="{name: 'con-modal', params: {link: contractor.link}}" class="tcs-box">
55
<img :src="contractor.photo" :alt="contractor.name" class="tcs-thumb">
66
<h3 class="tcs-name">{{ contractor.name }}</h3>
77
</router-link>

‎src/conf.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,21 @@ $extra-width: 200px;
1414
$size-sm: 768px;
1515
// contact button on modals
1616
$button-colour: $hightlight;
17+
18+
19+
.tcs-button {
20+
display: inline-block;
21+
background-color: $button-colour;
22+
color: white;
23+
border-radius: 5px;
24+
font-size: 17px;
25+
padding: 8px 12px;
26+
border: none;
27+
transition: all .3s ease;
28+
outline: none;
29+
cursor: pointer;
30+
text-decoration: none;
31+
&:hover {
32+
background-color: darken($button-colour, 20%);
33+
}
34+
}

‎src/main.js‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Vue from 'vue'
44
import VueRouter from 'vue-router'
55
import app from './app'
66
import enquiry from './components/enquiry'
7+
import enquiry_button from './components/enquiry-button'
8+
import enquiry_modal from './components/enquiry-modal'
79
import grid from './components/grid'
810
import con_modal from './components/con-modal'
911
import {to_markdown, clean} from './utils'
@@ -14,7 +16,7 @@ Raven.config(dsn, {release: process.env.RELEASE}).addPlugin(RavenVue, Vue).insta
1416
Vue.use(VueRouter)
1517

1618
const ConfiguredVueRouter = config => {
17-
let routes
19+
let routes = []
1820
if (config.mode === 'grid') {
1921
routes = [
2022
{
@@ -23,12 +25,12 @@ const ConfiguredVueRouter = config => {
2325
component: grid,
2426
children: [
2527
{
26-
path: config.url_root + ':link',
27-
name: 'modal',
28+
path: config.url_root + ':link(\\d+-[\\w-]+)',
29+
name: 'con-modal',
2830
component: con_modal,
2931
}
3032
]
31-
},
33+
}
3234
]
3335
} else if (config.mode === 'enquiry') {
3436
routes = [
@@ -38,6 +40,21 @@ const ConfiguredVueRouter = config => {
3840
component: enquiry,
3941
},
4042
]
43+
} else if (config.mode === 'enquiry-modal') {
44+
routes = [
45+
{
46+
path: config.url_root,
47+
name: 'index',
48+
component: enquiry_button,
49+
children: [
50+
{
51+
path: config.url_root + 'enquiry',
52+
name: 'enquiry-modal',
53+
component: enquiry_modal,
54+
}
55+
]
56+
}
57+
]
4158
}
4259
return new VueRouter({
4360
mode: config.router_mode,
@@ -52,10 +69,11 @@ const STRINGS = {
5269
contractor_enquiry_button: 'Contact {contractor_name}',
5370
contractor_details_button: 'Show Profile',
5471
submit_enquiry: 'Submit Enquiry',
55-
enquiry_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.'
72+
enquiry_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.',
73+
enquiry_button: 'Get in touch',
5674
}
5775

58-
const MODES = ['grid', 'enquiry']
76+
const MODES = ['grid', 'enquiry', 'enquiry-modal']
5977

6078
module.exports = function (public_key, config) {
6179
config = config || {}
@@ -175,7 +193,7 @@ response text: "${xhr.responseText}"`)
175193
return true
176194
},
177195
get_enquiry: function () {
178-
if (Object.keys(this.enquiry_form_info).length !== 0) {
196+
if (Object.keys(this.enquiry_form_info).length !== 0 || this._getting_enquiry_info) {
179197
return
180198
}
181199
let xhr = new window.XMLHttpRequest()

‎test/unit/specs/_shared.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Vue from 'vue'
22
import VueRouter from 'vue-router'
33
import con_modal from 'src/components/con-modal'
44

5-
const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
5+
const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "123-foobar"}]']
66

77
class TestConsole {
88
log_ = []
@@ -32,17 +32,17 @@ const enquiry_options = {
3232
}
3333

3434
const vm_data = {
35-
contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
35+
contractors: [{name: 'Fred Bloggs', link: '123-fred-bloggs', tag_line: 'hello'}],
3636
config: {},
37-
contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
37+
contractors_extra: {'123-fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
3838
enquiry_form_info: enquiry_options,
3939
enquiry_data: {},
4040
method_calls: {},
4141
}
4242

4343
const dft_router = new VueRouter({routes: [
4444
{path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
45-
{path: '/:link', name: 'modal', component: con_modal},
45+
{path: '/:link', name: 'con-modal', component: con_modal},
4646
]})
4747

4848
const generate_vm = (router, vm_data_) => {

‎test/unit/specs/con-details.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {generate_vm, tick} from './_shared'
33
describe('modal.vue', () => {
44
it('should close on tcs-modal-mask', async () => {
55
const vm = generate_vm()
6-
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
6+
vm.$router.push({name: 'con-modal', params: {link: '123-fred-bloggs'}})
77

88
await tick()
99
expect(vm.$el.attributes['class'].value).to.contain('tcs-modal-mask')
@@ -18,7 +18,7 @@ describe('modal.vue', () => {
1818
describe('con-details.vue', () => {
1919
it('should render contractor details', async () => {
2020
const vm = generate_vm()
21-
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
21+
vm.$router.push({name: 'con-modal', params: {link: '123-fred-bloggs'}})
2222

2323
await tick()
2424
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
@@ -31,10 +31,10 @@ describe('con-details.vue', () => {
3131
describe('con-details.vue', () => {
3232
it('should render only five qual levels', async () => {
3333
const _vm_data = {
34-
contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
34+
contractors: [{name: 'Fred Bloggs', link: '123-fred-bloggs', tag_line: 'hello'}],
3535
config: {},
3636
contractors_extra: {
37-
'fred-bloggs': {
37+
'123-fred-bloggs': {
3838
extra_attributes: [{'name': 'Bio', 'value': 'I am great'}],
3939
skills: [
4040
{
@@ -53,7 +53,7 @@ describe('con-details.vue', () => {
5353
}
5454

5555
const vm = generate_vm(null, _vm_data)
56-
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
56+
vm.$router.push({name: 'con-modal', params: {link: '123-fred-bloggs'}})
5757

5858
await tick()
5959
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
@@ -71,17 +71,17 @@ describe('con-details.vue', () => {
7171
describe('con-details.vue', () => {
7272
it('should render markdown', async () => {
7373
const _vm_data = {
74-
contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
74+
contractors: [{name: 'Fred Bloggs', link: '123-fred-bloggs', tag_line: 'hello'}],
7575
config: {},
7676
contractors_extra: {
77-
'fred-bloggs': {
77+
'123-fred-bloggs': {
7878
extra_attributes: [{'name': 'Bio', 'value': 'I am **great**', 'type': 'text_extended'}],
7979
},
8080
}
8181
}
8282

8383
const vm = generate_vm(null, _vm_data)
84-
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
84+
vm.$router.push({name: 'con-modal', params: {link: '123-fred-bloggs'}})
8585

8686
await tick()
8787
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')

0 commit comments

Comments
 (0)