1  <template lang='pug'>
 2  #contexts.contexts
 3      div
 4          .transparentsides
 5      .spacer
 6      .narrow(v-for='(n, i) in $store.state.context.slice(0, $store.state.context.length - 1)'  :key='n' :style="{ marginLeft: (($store.state.context.length - 1 - i) * 0.5) + 'em', marginRight: (($store.state.context.length - 1 - i) * 0.5) + 'em' }")
 7          context-row(:taskId='n')
 8  </template>
 9  
10  <script>
11  
12  import Hammer from 'hammerjs'
13  import Propagating from 'propagating-hammerjs'
14  import ContextRow from './ContextRow.vue'
15  
16  export default {
17      data(){
18          return {
19              selfPropagating: false
20          }
21      },
22      mounted(){
23          let el = document.getElementById('contexts')
24          let mc = Propagating(new Hammer.Manager(el))
25          let longPress = new Hammer.Press({ time: 400 })
26  
27          mc.add(longPress)
28  
29          mc.on('press', (e) => {
30              this.$store.state.tasks.forEach(t => {
31                  if (
32                      t.subTasks.indexOf(this.$store.getters.contextCard.taskId) !== -1  ||
33                      t.priorities.indexOf(this.$store.getters.contextCard.taskId) !== -1 ||
34                      t.completed.indexOf(this.$store.getters.contextCard.taskId) !== -1
35                  ){
36                      if(this.$store.state.context.indexOf(t.taskId) === -1){
37                          this.$store.commit("addParent", t.taskId)
38                      }
39                  }
40              })
41              this.selfPropagating = true
42              setTimeout(()=> this.selfPropagating = false,1234)
43              e.stopPropagation() // XXX requires propagating-hammerjs??
44          })
45      },
46      components: { ContextRow },
47      computed: {
48          cardInputSty() {
49            let color = this.$store.getters.contextCard.color
50            return {
51                redwx : color == 'red',
52                bluewx : color == 'blue',
53                greenwx : color == 'green',
54                yellowwx : color == 'yellow',
55                purplewx : color == 'purple',
56                blackwx : color == 'black',
57            }
58          },
59      },
60  }
61  
62  </script>
63  
64  <style lang='stylus' scoped>
65  
66  @import '../styles/colours';
67  
68  .narrow
69      padding-left: 4em
70      padding-right: 4em
71  
72  .contexts
73      opacity: 0.9
74      z-index: 9009
75      background: transparent
76      min-height: 3.35em
77      display: flex
78      flex-direction: column
79      max-width: 1111px
80      margin: auto;
81  
82  .spacer
83      flex-grow:1
84  
85  </style>