Skip to content

Commit c65e5a2

Browse files
spinnspinn
authored
Add MultiplePictureChoice question type (#159)
1 parent f042f77 commit c65e5a2

File tree

9 files changed

+158
-41
lines changed

9 files changed

+158
-41
lines changed

‎src/assets/css/common.css

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -409,7 +409,7 @@ header.vff-header svg.f-logo {
409409
margin-top: 22px;
410410
}
411411

412-
.vff div.field-sectionbreaktype .f-answer {
412+
.vff div.field-sectionbreak .f-answer {
413413
margin-top: 18px;
414414
}
415415

@@ -444,13 +444,13 @@ header.vff-header svg.f-logo {
444444
}
445445

446446
/* ios datepicker */
447-
.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span {
447+
.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span {
448448
position: relative;
449449
top: 0;
450450
left: 0;
451451
}
452452

453-
.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before {
453+
.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before {
454454
position: absolute;
455455
content: attr(data-placeholder);
456456
display: block;
@@ -468,16 +468,16 @@ header.vff-header svg.f-logo {
468468
*/
469469

470470
.vff a.f-link,
471-
.vff .field-submittype .f-section-wrap a {
471+
.vff .field-submit .f-section-wrap a {
472472
color: inherit;
473473
border-bottom: 1px dotted;
474474
word-break: break-word;
475475
}
476476

477477
.vff a.f-link:hover,
478478
.vff a.f-link:active,
479-
.vff .field-submittype .f-section-wrap a:hover,
480-
.vff .field-submittype .f-section-wrap a:active {
479+
.vff .field-submit .f-section-wrap a:hover,
480+
.vff .field-submit .f-section-wrap a:active {
481481
color: inherit;
482482
border-bottom: none;
483483
}
@@ -575,7 +575,7 @@ header.vff-header svg.f-logo {
575575
}
576576

577577
/*
578-
f-radios (multiple-choice)
578+
f-radios (multiple choice)
579579
*/
580580

581581
.vff ul.f-radios {
@@ -629,6 +629,64 @@ header.vff-header svg.f-logo {
629629
position: absolute;
630630
}
631631

632+
/*
633+
f-radios (multiple picture choice)
634+
*/
635+
636+
.vff .field-multiplepicturechoice ul.f-radios{
637+
max-width: 800px;
638+
min-width: auto;
639+
display: -ms-flexbox;
640+
display: flex;
641+
margin: 0 -8px 0 0;
642+
flex-flow: 0 1;
643+
-moz-box-align: stretch;
644+
align-items: stretch;
645+
flex-wrap: wrap;
646+
}
647+
648+
.vff .field-multiplepicturechoice ul.f-radios li{
649+
position: relative;
650+
display: -ms-flexbox;
651+
display: flex;
652+
-moz-box-align: center;
653+
align-items: center;
654+
flex-direction: column;
655+
padding: 8px 8px 10px;
656+
cursor: pointer;
657+
margin-bottom: 8px;
658+
margin-right: 8px;
659+
-ms-flex: 0 0 calc(25% - 8px);
660+
flex: 0 0 calc(25% - 8px);
661+
font-size: 15px;
662+
line-height: 1.38;
663+
}
664+
665+
.vff .field-multiplepicturechoice ul.f-radios li span.f-image{
666+
display: flex;
667+
display: -ms-flexbox;
668+
-moz-box-align: center;
669+
align-items: center;
670+
-moz-box-pack: center;
671+
justify-content: center;
672+
overflow: hidden;
673+
width: 100%;
674+
height: 164px;
675+
margin-bottom: 8px;
676+
}
677+
678+
.vff .field-multiplepicturechoice ul.f-radios li span.f-image img{
679+
margin-bottom: .8px;
680+
max-height: 100%;
681+
max-width: 100%;
682+
}
683+
684+
.vff .field-multiplepicturechoice ul.f-radios li div.f-label-wrap{
685+
width: 100%;
686+
position: relative;
687+
min-height: 20px;
688+
}
689+
632690
/*
633691
footer
634692
*/
@@ -714,8 +772,8 @@ header.vff-header svg.f-logo {
714772
margin-bottom: 20px;
715773
}
716774

717-
.vff .field-sectionbreaktype,
718-
.vff .field-submittype {
775+
.vff .field-sectionbreak,
776+
.vff .field-submit {
719777
max-width: 920px;
720778
}
721779

@@ -805,8 +863,8 @@ header.vff-header svg.f-logo {
805863
*/
806864

807865
@media only screen and (min-width: 1440px) {
808-
.vff .field-sectionbreaktype,
809-
.vff .field-submittype {
866+
.vff .field-sectionbreak,
867+
.vff .field-submit {
810868
max-width: 960px;
811869
}
812870

@@ -818,8 +876,8 @@ header.vff-header svg.f-logo {
818876
}
819877

820878
@media only screen and (min-width: 1920px) {
821-
.vff .field-sectionbreaktype,
822-
.vff .field-submittype {
879+
.vff .field-sectionbreak,
880+
.vff .field-submit {
823881
max-width: 1160px;
824882
}
825883

@@ -884,6 +942,12 @@ header.vff-header svg.f-logo {
884942
padding-right: 0;
885943
}
886944

945+
.vff .field-multiplepicturechoice ul.f-radios li{
946+
font-size: 14px;
947+
-ms-flex: 0 0 calc(33.3333% - 8px);
948+
flex: 0 0 calc(33.3333% - 8px);
949+
}
950+
887951
}
888952

889953
@media screen and (max-width:479px) {
@@ -949,14 +1013,23 @@ header.vff-header svg.f-logo {
9491013
font-size: .62em;
9501014
}
9511015

952-
.vff .field-sectionbreaktype p {
1016+
.vff .field-sectionbreak p {
9531017
font-size: 1em;
9541018
}
9551019

9561020
.vff-footer .f-timer {
9571021
font-size: 16px;
9581022
}
9591023

1024+
.vff .field-multiplepicturechoice ul.f-radios li span.f-image{
1025+
height: 130px;
1026+
}
1027+
1028+
.vff .field-multiplepicturechoice ul.f-radios li{
1029+
-ms-flex: 0 0 calc(50% - 8px);
1030+
flex: 0 0 calc(50% - 8px);
1031+
}
1032+
9601033
}
9611034

9621035
@media screen and (max-height:400px) {

‎src/assets/css/themes/theme-green.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,13 +106,13 @@ header.vff-header svg.f-logo {
106106
}
107107

108108
/*faux input type date placeholder for iOS*/
109-
.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
109+
.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{
110110
color: var(--vff-secondary-text-color);
111111
font-weight: 300;
112112
font-size: .72em;
113113
}
114114

115-
/*field-multiplechoicetype*/
115+
/*field-multiplechoice*/
116116
.vff ul.f-radios li {
117117
border: 1px solid var(--vff-secondary-text-color);
118118
font-weight: 900;
@@ -135,7 +135,7 @@ header.vff-header svg.f-logo {
135135
font-weight: 300;
136136
}
137137

138-
/*field-dropdowntype*/
138+
/*field-dropdown*/
139139
.vff span.f-empty {
140140
color: var(--vff-secondary-text-color);
141141
}
@@ -275,7 +275,7 @@ header.vff-header svg.f-logo {
275275
background-color: var(--vff-main-accent-color);
276276
}
277277

278-
/*field-multiplechoicetype*/
278+
/*field-multiplechoice*/
279279
.vff ul.f-radios li {
280280
color: var(--vff-secondary-text-color);
281281
}

‎src/assets/css/themes/theme-minimal.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,13 @@ header.vff-header svg.f-logo{
100100
}
101101

102102
/*faux input type date placeholder for iOS*/
103-
.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
103+
.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{
104104
color: var(--vff-secondary-text-color);
105105
font-weight: 300;
106106
font-size: .72em;
107107
}
108108

109-
/*field-multiplechoicetype*/
109+
/*field-multiplechoice*/
110110
.vff ul.f-radios li {
111111
border: 1px solid var(--vff-secondary-text-color);
112112
}
@@ -125,7 +125,7 @@ header.vff-header svg.f-logo{
125125
color: var(--vff-secondary-text-color);
126126
}
127127

128-
/*field-dropdowntype*/
128+
/*field-dropdown*/
129129
.vff span.f-empty {
130130
color: var(--vff-secondary-text-color);
131131
}
@@ -278,7 +278,7 @@ header.vff-header svg.f-logo{
278278
background-color: var(--vff-main-accent-color);
279279
}
280280

281-
/*field-multiplechoicetype*/
281+
/*field-multiplechoice*/
282282
.vff ul.f-radios li.f-selected{
283283
color: var(--vff-main-accent-color);
284284
}

‎src/assets/css/themes/theme-purple.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,13 @@ header.vff-header svg.f-logo{
116116
}
117117

118118
/*faux input type date placeholder for iOS*/
119-
.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
119+
.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{
120120
color: var(--vff-secondary-text-color);
121121
font-weight: 300;
122122
font-size: .72em;
123123
}
124124

125-
/*field-multiplechoicetype*/
125+
/*field-multiplechoice*/
126126
.vff ul.f-radios li {
127127
border: 1px solid var(--vff-secondary-form-bg-color);
128128
background-color: var(--vff-main-form-bg-color);
@@ -143,7 +143,7 @@ header.vff-header svg.f-logo{
143143
color: var(--vff-field-key-color);
144144
}
145145

146-
/*field-dropdowntype*/
146+
/*field-dropdown*/
147147
.vff span.f-empty {
148148
color: var(--vff-secondary-text-color);
149149
}
@@ -265,7 +265,7 @@ header.vff-header svg.f-logo{
265265
background-color: rgba(44,62,80,0.8);
266266
}
267267

268-
/*field-multiplechoicetype*/
268+
/*field-multiplechoice*/
269269
.vff .f-key {
270270
font-weight: 400;
271271
}

‎src/components/Question.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
import FlowFormEmailType from './QuestionTypes/EmailType.vue'
102102
import FlowFormLongTextType from './QuestionTypes/LongTextType.vue'
103103
import FlowFormMultipleChoiceType from './QuestionTypes/MultipleChoiceType.vue'
104+
import FlowFormMultiplePictureChoiceType from './QuestionTypes/MultiplePictureChoiceType.vue'
104105
import FlowFormNumberType from './QuestionTypes/NumberType.vue'
105106
import FlowFormPasswordType from './QuestionTypes/PasswordType.vue'
106107
import FlowFormPhoneType from './QuestionTypes/PhoneType.vue'
@@ -119,13 +120,15 @@
119120
FlowFormEmailType,
120121
FlowFormLongTextType,
121122
FlowFormMultipleChoiceType,
123+
FlowFormMultiplePictureChoiceType,
122124
FlowFormNumberType,
123125
FlowFormPasswordType,
124126
FlowFormPhoneType,
125127
FlowFormSectionBreakType,
126128
FlowFormTextType,
127129
FlowFormUrlType
128130
},
131+
129132
props: {
130133
question: QuestionModel,
131134
language: LanguageModel,
@@ -139,25 +142,30 @@
139142
default: false
140143
}
141144
},
145+
142146
mixins: [
143147
IsMobile
144148
],
149+
145150
data() {
146151
return {
147152
QuestionType: QuestionType,
148153
dataValue: null,
149154
debounced: false
150155
}
151156
},
157+
152158
mounted() {
153159
this.focusField()
154160
this.dataValue = this.question.answer
155161
156162
this.$refs.qanimate.addEventListener('animationend', this.onAnimationEnd)
157163
},
164+
158165
beforeDestroy() {
159166
this.$refs.qanimate.removeEventListener('animationend', this.onAnimationEnd)
160167
},
168+
161169
methods: {
162170
/**
163171
* Autofocus the input box of the current question
@@ -288,6 +296,7 @@
288296
return q.showInvalid()
289297
}
290298
},
299+
291300
computed: {
292301
mainClasses: {
293302
cache: false,
@@ -301,7 +310,7 @@
301310
'f-has-value': this.$refs.questionComponent && this.$refs.questionComponent.hasValue
302311
}
303312
304-
classes['field-' + this.question.type.toLowerCase().substring(8)] = true
313+
classes['field-' + this.question.type.toLowerCase().substring(8, this.question.type.length - 4)] = true
305314
306315
return classes
307316
}

‎src/components/QuestionTypes/BaseType.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@
156156
return !this.question.required || this.hasValue
157157
}
158158
},
159+
159160
computed: {
160161
placeholder() {
161162
return this.question.placeholder || this.language.placeholder

0 commit comments

Comments
 (0)