Merge pull request #11087 from AllanOXDi/add_accordion

Build flexible and accessible accordion component
learningequality · Sep 21, 2023 · 17c7368 · 17c7368
2 parents 3f5b4f6 + 98c6ab2
commit 17c7368
Show file tree

Hide file tree

Showing 5 changed files with 493 additions and 273 deletions.
diff --git a/kolibri/core/assets/src/views/sortable/DragHandle.vue b/kolibri/core/assets/src/views/sortable/DragHandle.vue
@@ -24,3 +24,10 @@
   };
 
 </script>
+
+
+<style scoped>
+  *{
+    cursor :pointer;
+  }
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -1,80 +1,47 @@
 <template>
 
   <div>
-    <div>
-      <DragContainer
-        :items="items"
-      >
-        <transition-group
-          tag="div"
-          name="list"
-          class="wrapper"
-        >
-          <slot
-            :toggleItemState="toggleItemState"
-            :isItemExpanded="isItemExpanded"
-            :isOptionSelected="isOptionSelected"
-            :isAnswerSelected="isAnswerSelected"
-          ></slot>
-        </transition-group>
-      </DragContainer>
-    </div>
+    <transition-group
+      tag="div"
+      name="list"
+      class="wrapper"
+    >
+      <slot
+        :toggleItemState="toggleItemState"
+        :isItemExpanded="isItemExpanded"
+        :closeAccordionPanel="closeAccordionPanel"
+      ></slot>
+    </transition-group>
   </div>
 
 </template>
 
 
 <script>
 
-  // import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
-  import DragContainer from 'kolibri.coreVue.components.DragContainer';
-
   export default {
     name: 'AccordionContainer',
-    components: {
-      DragContainer,
-    },
-    props: {
-      items: {
-        type: Array,
-        required: true,
-      },
-    },
     data() {
       return {
-        itemIds: [],
-        optionsIdList: [],
+        expandedItemIds: [],
       };
     },
     methods: {
       toggleItemState(id) {
-        const index = this.itemIds.indexOf(id);
+        const index = this.expandedItemIds.indexOf(id);
         if (index === -1) {
-          this.itemIds.push(id);
+          this.expandedItemIds.push(id);
         } else {
-          this.itemIds.splice(index, 1);
+          this.expandedItemIds.splice(index, 1);
         }
       },
       isItemExpanded(id) {
-        if (this.itemIds.includes(id)) {
-          return true;
-        } else {
-          return false;
-        }
+        return this.expandedItemIds.includes(id);
       },
-      isOptionSelected(optionId) {
-        const index = this.itemIds.indexOf(optionId);
-        if (index === -1) {
-          this.optionsIdList.push(optionId);
-        } else {
-          this.optionsIdList.splice(optionId);
-        }
-      },
-      isAnswerSelected(optionId) {
-        if (this.optionsIdList.includes(optionId)) {
-          return true;
-        } else {
-          return false;
+      closeAccordionPanel(id) {
+        if (this.expandedItemIds.includes(id)) {
+          const index = this.expandedItemIds.indexOf(id);
+          this.expandedItemIds.splice(index, 1);
         }
       },
     },

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
@@ -1,38 +1,31 @@
 <template>
 
-  <Draggable>
-    <div class="item-border">
-      <div>
-        <slot
-          name="heading"
-          :title="title"
-        >
-        </slot>
-      </div>
-
-      <div>
-        <slot
-          :id="id"
-          name="content"
-          :answers="title"
-        >
-        </slot>
-      </div>
+  <div class="item-border">
+    <div>
+      <slot
+        name="heading"
+        :title="title"
+      >
+      </slot>
     </div>
-  </Draggable>
+
+    <div>
+      <slot
+        :id="id"
+        name="content"
+        :answers="title"
+      >
+      </slot>
+    </div>
+  </div>
 
 </template>
 
 
 <script>
 
-  import Draggable from 'kolibri.coreVue.components.Draggable';
-
   export default {
     name: 'AccordionItem',
-    components: {
-      Draggable,
-    },
     props: {
       title: {
         type: String,

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AnswerOption.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AnswerOption.vue