Uses dataset rather than jQuery to get attribute values

6 files changed, 45 insertions, 40 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 7944f53d13a..560a9a079bb 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -9,7 +9,8 @@
 //= require ./components/new_list_dropdown
 
 $(() => {
-  const $boardApp = $('#board-app');
+  const $boardApp = document.getElementById('board-app'),
+        Store = gl.issueBoards.BoardsStore;
 
   window.gl = window.gl || {};
 
@@ -18,16 +19,16 @@ $(() => {
   }
 
   gl.IssueBoardsApp = new Vue({
-    el: $boardApp.get(0),
+    el: $boardApp,
     components: {
       'board': gl.issueBoards.Board
     },
     data: {
-      state: gl.issueBoards.BoardsStore.state,
+      state: Store.state,
       loading: true,
-      endpoint: $boardApp.data('endpoint'),
-      disabled: $boardApp.data('disabled'),
-      issueLinkBase: $boardApp.data('issue-link-base')
+      endpoint: $boardApp.dataset.endpoint,
+      disabled: $boardApp.dataset.disabled === 'true',
+      issueLinkBase: $boardApp.dataset.issueLinkBase
     },
     init () {
       gl.issueBoards.BoardsStore.create();
@@ -35,21 +36,16 @@ $(() => {
     created () {
       this.loading = true;
       gl.boardService = new BoardService(this.endpoint);
-
-      $boardApp
-        .removeAttr('data-endpoint')
-        .removeAttr('data-disabled')
-        .removeAttr('data-issue-link-base');
     },
     ready () {
-      gl.issueBoards.BoardsStore.disabled = this.disabled;
+      Store.disabled = this.disabled;
       gl.boardService.all()
         .then((resp) => {
           const boards = resp.json();
 
           for (let i = 0, boardsLength = boards.length; i < boardsLength; i++) {
             const board = boards[i],
-                  list = gl.issueBoards.BoardsStore.addList(board);
+                  list = Store.addList(board);
 
             if (list.type === 'done') {
               list.position = Infinity;
@@ -58,7 +54,7 @@ $(() => {
             }
           }
 
-          gl.issueBoards.BoardsStore.addBlankState();
+          Store.addBlankState();
           this.loading = false;
         });
     }
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index 213b09e6143..b8070cdc30d 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -3,6 +3,8 @@
 //= require ./board_list
 
 (() => {
+  const Store = gl.issueBoards.BoardsStore;
+
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
@@ -20,7 +22,7 @@
     data () {
       return {
         query: '',
-        filters: gl.issueBoards.BoardsStore.state.filters
+        filters: Store.state.filters
       };
     },
     watch: {
@@ -75,8 +77,8 @@
             $board.$destroy(true);
 
             this.$nextTick(() => {
-              gl.issueBoards.BoardsStore.state.lists.splice(e.newIndex, 0, list);
-              gl.issueBoards.BoardsStore.moveList(list, order);
+              Store.state.lists.splice(e.newIndex, 0, list);
+              Store.moveList(list, order);
             });
           }
         }
@@ -89,7 +91,7 @@
       this.sortable = Sortable.create(this.$el.parentNode, options);
     },
     beforeDestroy () {
-      gl.issueBoards.BoardsStore.state.lists.$remove(this.list);
+      Store.state.lists.$remove(this.list);
     }
   });
 })();
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js.es6 b/app/assets/javascripts/boards/components/board_blank_state.js.es6
index 15da0fafe74..c55c23e1023 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js.es6
+++ b/app/assets/javascripts/boards/components/board_blank_state.js.es6
@@ -1,4 +1,6 @@
 (() => {
+  const Store = gl.issueBoards.BoardsStore;
+
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
@@ -15,12 +17,12 @@
     },
     methods: {
       addDefaultLists () {
-        gl.issueBoards.BoardsStore.removeBlankState();
+        Store.removeBlankState();
 
         for (let i = 0, labelsLength = this.predefinedLabels.length; i < labelsLength; i++) {
           const label = this.predefinedLabels[i];
 
-          gl.issueBoards.BoardsStore.addList({
+          Store.addList({
             title: label.title,
             position: i,
             list_type: 'label',
@@ -39,7 +41,7 @@
 
             for (let i = 0, dataLength = data.length; i < dataLength; i++) {
               const listObj = data[i],
-                    list = gl.issueBoards.BoardsStore.findList('title', listObj.title);
+                    list = Store.findList('title', listObj.title);
 
               list.id = listObj.id;
               list.label.id = listObj.label.id;
@@ -48,7 +50,7 @@
           });
       },
       clearBlankState () {
-        gl.issueBoards.BoardsStore.removeBlankState();
+        Store.removeBlankState();
       }
     }
   });
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 3895989747c..4a7cfeaeab2 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -1,4 +1,6 @@
 (() => {
+  const Store = gl.issueBoards.BoardsStore;
+
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
@@ -13,19 +15,19 @@
     methods: {
       filterByLabel (label, e) {
         let labelToggleText = label.title;
-        const labelIndex = gl.issueBoards.BoardsStore.state.filters['label_name'].indexOf(label.title);
+        const labelIndex = Store.state.filters['label_name'].indexOf(label.title);
         $(e.target).tooltip('hide');
 
         if (labelIndex === -1) {
-          gl.issueBoards.BoardsStore.state.filters['label_name'].push(label.title);
+          Store.state.filters['label_name'].push(label.title);
           $('.labels-filter').prepend(`<input type="hidden" name="label_name[]" value="${label.title}" />`);
         } else {
-          gl.issueBoards.BoardsStore.state.filters['label_name'].splice(labelIndex, 1);
-          labelToggleText = gl.issueBoards.BoardsStore.state.filters['label_name'][0];
+          Store.state.filters['label_name'].splice(labelIndex, 1);
+          labelToggleText = Store.state.filters['label_name'][0];
           $(`.labels-filter input[name="label_name[]"][value="${label.title}"]`).remove();
         }
 
-        const selectedLabels = gl.issueBoards.BoardsStore.state.filters['label_name'];
+        const selectedLabels = Store.state.filters['label_name'];
         if (selectedLabels.length === 0) {
           labelToggleText = 'Label';
         } else if (selectedLabels.length > 1) {
@@ -34,7 +36,7 @@
 
         $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
 
-        gl.issueBoards.BoardsStore.updateFiltersUrl();
+        Store.updateFiltersUrl();
       }
     }
   });
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 8d2573bd16f..564e878db05 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -1,6 +1,8 @@
 //= require ./board_card
 
 (() => {
+  const Store = gl.issueBoards.BoardsStore;
+
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
@@ -18,7 +20,7 @@
     data () {
       return {
         scrollOffset: 250,
-        filters: gl.issueBoards.BoardsStore.state.filters
+        filters: Store.state.filters
       };
     },
     watch: {
@@ -59,20 +61,19 @@
           onStart: (e) => {
             const card = this.$refs.issue[e.oldIndex];
 
-            gl.issueBoards.BoardsStore.moving.issue = card.issue;
-            gl.issueBoards.BoardsStore.moving.list = card.list;
+            Store.moving.issue = card.issue;
+            Store.moving.list = card.list;
           },
           onAdd: (e) => {
-            const card = e.item,
-                  fromList = gl.issueBoards.BoardsStore.moving.list,
-                  issue = gl.issueBoards.BoardsStore.moving.issue;
+            const fromList = Store.moving.list,
+                  issue = Store.moving.issue;
 
             gl.issueBoards.BoardsStore.moveIssueToList(fromList, this.list, issue);
           },
           onRemove (e) {
             const card = e.item,
-                  list = gl.issueBoards.BoardsStore.moving.list,
-                  issue = gl.issueBoards.BoardsStore.moving.issue;
+                  list = Store.moving.list,
+                  issue = Store.moving.issue;
 
             // Remove the new dom element & let vue add the element
             card.parentNode.removeChild(card);
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
index 91803f4622a..597a5b03ee2 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
@@ -1,4 +1,6 @@
 $(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
   $('.js-new-board-list').each(function () {
     const $this = $(this);
 
@@ -13,7 +15,7 @@ $(() => {
         });
       },
       renderRow (label) {
-        const active = gl.issueBoards.BoardsStore.findList('title', label.title),
+        const active = Store.findList('title', label.title),
               $li = $('<li />',),
               $a = $('<a />', {
                 class: (active ? `is-active js-board-list-${active.id}` : ''),
@@ -35,10 +37,10 @@ $(() => {
       clicked (label, $el, e) {
         e.preventDefault();
 
-        if (!gl.issueBoards.BoardsStore.findList('title', label.title)) {
-          gl.issueBoards.BoardsStore.new({
+        if (!Store.findList('title', label.title)) {
+          Store.new({
             title: label.title,
-            position: gl.issueBoards.BoardsStore.state.lists.length - 2,
+            position: Store.state.lists.length - 2,
             list_type: 'label',
             label: {
               id: label.id,