Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #45 from Tangerine-Community/implement_autostop_un…
…timed_grids-1522

Work on Autostop doesn't affect Untimed Grids
  • Loading branch information
chrisekelley committed Jun 17, 2019
2 parents d35de93 + ad3967c commit ae97066
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 4 deletions.
16 changes: 15 additions & 1 deletion demo/index.html
Expand Up @@ -47,6 +47,7 @@
<script type="module" src="../input/tangy-radio-buttons.js"></script>
<script type="module" src="../input/tangy-select.js"></script>
<script type="module" src="../input/tangy-timed.js"></script>
<script type="module" src="../input/tangy-untimed-grid.js"></script>
<script type="module" src="../input/tangy-toggle-button.js"></script>
<script type="module" src="../input/tangy-photo-capture.js"></script>
<script type="module" src="../input/tangy-qr.js"></script>
Expand All @@ -60,7 +61,6 @@
<body>
<div class="vertical-section-container centered">


<h3>Basic tangy-form demo</h3>
<demo-snippet>
<template>
Expand Down Expand Up @@ -437,6 +437,20 @@ <h3>tangy-form with consent</h3>
</template>
</demo-snippet>


<h3>tangy-untimed-grid</h3>
<demo-snippet>
<template>
<tangy-form id="untimed-autostop-form" title="My Form">
<tangy-form-item id="untimed-autostop-item" title="Autostop Untimed Grid">
<tangy-untimed-grid required columns="3" name="untimed-autostop" auto-stop="2">
<option value="class1_term2-d">1</option><option value="class1_term2-1">Jumatatu,</option><option value="class1_term2-2">wezi</option><option value="class1_term2-3">walikuja</option><option value="class1_term2-4">kijijini.</option><option value="class1_term2-5">Watu</option><option value="class1_term2-6">wakapiga</option><option value="class1_term2-7">mayowe.</option><option value="class1_term2-8">“Tunataka</option><option value="class1_term2-9">dhahabu!”</option><option value="class1_term2-10">wezi</option><option value="class1_term2-11">wakasema.</option><option value="class1_term2-12">Watu</option><option value="class1_term2-13">walipatwa</option><option value="class1_term2-14">na</option><option value="class1_term2-15">wasiwasi.</option><option value="class1_term2-16">Watu</option><option value="class1_term2-17">wakasema,</option><option value="class1_term2-18">“Hatuna</option><option value="class1_term2-19">chochote</option><option value="class1_term2-20">cha</option><option value="class1_term2-21">thamani.”</option><option value="class1_term2-22">Polisi</option><option value="class1_term2-23">walifika</option><option value="class1_term2-24">hapo.</option><option value="class1_term2-25">Waliwashika</option><option value="class1_term2-26">wezi</option><option value="class1_term2-27">na</option><option value="class1_term2-28">kuwatia</option><option value="class1_term2-29">pingu.</option><option value="class1_term2-30">Wezi</option><option value="class1_term2-31">walipelekwa</option><option value="class1_term2-32">gerezani.</option>
</tangy-untimed-grid>
</tangy-form-item>
</tangy-form>
</template>
</demo-snippet>

</div>
</body>
</html>
60 changes: 60 additions & 0 deletions input/tangy-untimed-grid.js
Expand Up @@ -21,6 +21,7 @@ import '../style/tangy-common-styles.js'
const TANGY_UNTIMED_GRID_MODE_UNTOUCHED = 'TANGY_UNTIMED_GRID_MODE_UNTOUCHED'
const TANGY_UNTIMED_GRID_MODE_RUN = 'TANGY_UNTIMED_GRID_MODE_RUN'
const TANGY_UNTIMED_GRID_MODE_MARK = 'TANGY_UNTIMED_GRID_MODE_MARK'
const TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED = 'TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED'
const TANGY_UNTIMED_GRID_MODE_DONE = 'TANGY_UNTIMED_GRID_MODE_DONE'
const TANGY_UNTIMED_GRID_COMPLETE = 'TANGY_UNTIMED_GRID_COMPLETE'
const TANGY_UNTIMED_GRID_MODE_DISABLED = 'TANGY_UNTIMED_GRID_MODE_DISABLED'
Expand Down Expand Up @@ -155,6 +156,16 @@ class TangyUntimedGrid extends PolymerElement {
observer: 'reflect',
reflectToAttribute: true
},
autoStop: {
type: Number,
value: undefined,
reflectToAttribute: true
},
gridAutoStopped: {
type: Boolean,
value: undefined,
reflectToAttribute: true
},
hintText: {
type: String,
value: '',
Expand Down Expand Up @@ -353,6 +364,13 @@ class TangyUntimedGrid extends PolymerElement {
})
})
break
case TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED:
this.value = this.value.map(buttonState => {
return Object.assign({}, buttonState, {
disabled: true
})
})
break
// @TODO No longer being used.
case TANGY_UNTIMED_GRID_MODE_DONE:
this.statusMessage = t('You may proceed.')
Expand Down Expand Up @@ -411,7 +429,49 @@ class TangyUntimedGrid extends PolymerElement {
this.value = newValue
this.dispatchEvent(new Event('change'))
break
case TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED:
// Ignore - not going to capture last_attempted once autostop has been triggered.
break
}
if (this.autoStop && this.shouldGridAutoStop()) {
// ignore if we're already in mode TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED
if (this.mode !== TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED) {
event.target.highlighted = true
this.mode = TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED
this.gridAutoStopped = true
this.onStopClick(null, event.target.name)
}
}
}

shouldGridAutoStop() {
const isSetsEqual = (a, b) => a.size === b.size && [...a].every(value => b.has(value));
const tangyToggleButtons = [].slice.call(this.shadowRoot.querySelectorAll('tangy-toggle-button'))
if (!tangyToggleButtons[0].pressed) {
return false;
} else {
const indexes = tangyToggleButtons.slice(0, this.autoStop).map((button, index) => index)
let pressedItemsIndex = [];
tangyToggleButtons.reduce((prev, curr, index) => {
if (curr.pressed) {
pressedItemsIndex = [...pressedItemsIndex, index]
}
}, [])
return isSetsEqual(new Set(indexes), new Set(pressedItemsIndex))
}
}

onStopClick(event, lastItemAttempted) {
this.endTime = Date.now()
clearInterval(this.timer);
// We have to check for typeof string because the event handler on the stop button puts an integer in the second param for some reason.
// If it's a string, then we know it's an ID of something which should actually be lastItemAttempted.
if (typeof lastItemAttempted === 'string') {
this.value = this.value.map((element, i) => Object.assign({}, element, { highlighted: (lastItemAttempted === element.name) ? true : false }))
} else {
this.value = this.value.map((element, i) => Object.assign({}, element, { highlighted: (this.value.length - 1 === i) ? true : false }))
}
this.mode = TANGY_UNTIMED_GRID_MODE_LAST_ATTEMPTED
}

validate() {
Expand Down
1 change: 0 additions & 1 deletion test/tangy-input_test.html
Expand Up @@ -71,7 +71,6 @@
inputEl.setAttribute('value', '44')
// Wait a tick for the underlying paper-input to catch up for validation purposes.
Polymer.Base.async(function() {
debugger
assert.equal(inputEl.validate(), true)
inputEl.setAttribute('value', '55')
Polymer.Base.async(function() {
Expand Down
1 change: 0 additions & 1 deletion test/tangy-timed_test.html
Expand Up @@ -46,7 +46,6 @@
test('font size = 5em', (done) => {
const element = fixture('TangyTimedFontSizeFixture');
setTimeout(_ => {
debugger;
assert.equal(element.shadowRoot.innerHTML.includes('--tangy-toggle-button-font-size:5em'), true)
done()
}, 500)
Expand Down
1 change: 0 additions & 1 deletion test/tangy-untimed-grid_test.html
Expand Up @@ -46,7 +46,6 @@
test('font size = 5em', (done) => {
const element = fixture('TangyUnTimedGridFontSizeFixture');
setTimeout(_ => {
debugger;
assert.equal(element.shadowRoot.innerHTML.includes('--tangy-toggle-button-font-size:5em'), true)
done()
}, 500)
Expand Down

0 comments on commit ae97066

Please sign in to comment.