diff options
Diffstat (limited to 'app/assets/javascripts/protected_tags')
5 files changed, 132 insertions, 146 deletions
diff --git a/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js index b85c2991dd9..681b060f859 100644 --- a/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js +++ b/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js @@ -1,29 +1,26 @@ -/* eslint-disable arrow-parens, no-param-reassign, object-shorthand, no-else-return, comma-dangle, max-len */ +export default class ProtectedTagAccessDropdown { + constructor(options) { + this.options = options; + this.initDropdown(); + } -(global => { - global.gl = global.gl || {}; - - gl.ProtectedTagAccessDropdown = class { - constructor(options) { - const { $dropdown, data, onSelect } = options; - - $dropdown.glDropdown({ - data: data, - selectable: true, - inputId: $dropdown.data('input-id'), - fieldName: $dropdown.data('field-name'), - toggleLabel(item, el) { - if (el.is('.is-active')) { - return item.text; - } else { - return 'Select'; - } - }, - clicked(item, $el, e) { - e.preventDefault(); - onSelect(); + initDropdown() { + const { onSelect } = this.options; + this.options.$dropdown.glDropdown({ + data: this.options.data, + selectable: true, + inputId: this.options.$dropdown.data('input-id'), + fieldName: this.options.$dropdown.data('field-name'), + toggleLabel(item, el) { + if (el.is('.is-active')) { + return item.text; } - }); - } - }; -})(window); + return 'Select'; + }, + clicked(item, $el, e) { + e.preventDefault(); + onSelect(); + }, + }); + } +} diff --git a/app/assets/javascripts/protected_tags/protected_tag_create.js b/app/assets/javascripts/protected_tags/protected_tag_create.js index 84b1b232649..964e67c9de0 100644 --- a/app/assets/javascripts/protected_tags/protected_tag_create.js +++ b/app/assets/javascripts/protected_tags/protected_tag_create.js @@ -1,45 +1,41 @@ -/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */ -/* global ProtectedTagDropdown */ - -(global => { - global.gl = global.gl || {}; - - gl.ProtectedTagCreate = class { - constructor() { - this.$wrap = this.$form = $('.new_protected_tag'); - this.buildDropdowns(); - } - - buildDropdowns() { - const $allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create'); - - // Cache callback - this.onSelectCallback = this.onSelect.bind(this); - - // Allowed to Create dropdown - new gl.ProtectedTagAccessDropdown({ - $dropdown: $allowedToCreateDropdown, - data: gon.create_access_levels, - onSelect: this.onSelectCallback - }); - - // Select default - $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0); - - // Protected tag dropdown - new ProtectedTagDropdown({ - $dropdown: this.$wrap.find('.js-protected-tag-select'), - onSelect: this.onSelectCallback - }); - } - - // This will run after clicked callback - onSelect() { - // Enable submit button - const $tagInput = this.$wrap.find('input[name="protected_tag[name]"]'); - const $allowedToCreateInput = this.$wrap.find('input[name="protected_tag[create_access_levels_attributes][0][access_level]"]'); - - this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length)); - } - }; -})(window); +import ProtectedTagAccessDropdown from './protected_tag_access_dropdown'; +import ProtectedTagDropdown from './protected_tag_dropdown'; + +export default class ProtectedTagCreate { + constructor() { + this.$form = $('.new_protected_tag'); + this.buildDropdowns(); + } + + buildDropdowns() { + const $allowedToCreateDropdown = this.$form.find('.js-allowed-to-create'); + + // Cache callback + this.onSelectCallback = this.onSelect.bind(this); + + // Allowed to Create dropdown + this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({ + $dropdown: $allowedToCreateDropdown, + data: gon.create_access_levels, + onSelect: this.onSelectCallback, + }); + + // Select default + $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0); + + // Protected tag dropdown + this.protectedTagDropdown = new ProtectedTagDropdown({ + $dropdown: this.$form.find('.js-protected-tag-select'), + onSelect: this.onSelectCallback, + }); + } + + // This will run after clicked callback + onSelect() { + // Enable submit button + const $tagInput = this.$form.find('input[name="protected_tag[name]"]'); + const $allowedToCreateInput = this.$form.find('input[name="protected_tag[create_access_levels_attributes][0][access_level]"]'); + + this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length)); + } +} diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js index ccc4c81fa18..9be9e2bea6f 100644 --- a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js +++ b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js @@ -1,6 +1,4 @@ -/* eslint-disable comma-dangle, no-unused-vars */ - -class ProtectedTagDropdown { +export default class ProtectedTagDropdown { constructor(options) { this.onSelect = options.onSelect; this.$dropdown = options.$dropdown; @@ -21,7 +19,7 @@ class ProtectedTagDropdown { filterable: true, remote: false, search: { - fields: ['title'] + fields: ['title'], }, selectable: true, toggleLabel(selected) { @@ -38,7 +36,7 @@ class ProtectedTagDropdown { clicked: (item, $el, e) => { e.preventDefault(); this.onSelect(); - } + }, }); } @@ -63,7 +61,7 @@ class ProtectedTagDropdown { this.selectedTag = { title: tagName, id: tagName, - text: tagName + text: tagName, }; if (tagName) { @@ -75,5 +73,3 @@ class ProtectedTagDropdown { this.$dropdownFooter.toggleClass('hidden', !tagName); } } - -window.ProtectedTagDropdown = ProtectedTagDropdown; diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit.js b/app/assets/javascripts/protected_tags/protected_tag_edit.js index 0227be35c8f..b5092877138 100644 --- a/app/assets/javascripts/protected_tags/protected_tag_edit.js +++ b/app/assets/javascripts/protected_tags/protected_tag_edit.js @@ -1,54 +1,52 @@ -/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */ +/* eslint-disable no-new */ /* global Flash */ -(global => { - global.gl = global.gl || {}; - - gl.ProtectedTagEdit = class { - constructor(options) { - this.$wrap = options.$wrap; - this.$allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create'); - - this.buildDropdowns(); - } - - buildDropdowns() { - // Allowed to create dropdown - new gl.ProtectedTagAccessDropdown({ - $dropdown: this.$allowedToCreateDropdown, - data: gon.create_access_levels, - onSelect: this.onSelect.bind(this) - }); - } - - onSelect() { - const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdown.data('fieldName')}"]`); - - // Do not update if one dropdown has not selected any option - if (!$allowedToCreateInput.length) return; - - this.$allowedToCreateDropdown.disable(); - - $.ajax({ - type: 'POST', - url: this.$wrap.data('url'), - dataType: 'json', - data: { - _method: 'PATCH', - protected_tag: { - create_access_levels_attributes: [{ - id: this.$allowedToCreateDropdown.data('access-level-id'), - access_level: $allowedToCreateInput.val() - }] - } +import ProtectedTagAccessDropdown from './protected_tag_access_dropdown'; + +export default class ProtectedTagEdit { + constructor(options) { + this.$wrap = options.$wrap; + this.$allowedToCreateDropdown = this.$wrap.find('.js-allowed-to-create'); + + this.buildDropdowns(); + } + + buildDropdowns() { + // Allowed to create dropdown + this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({ + $dropdown: this.$allowedToCreateDropdown, + data: gon.create_access_levels, + onSelect: this.onSelect.bind(this), + }); + } + + onSelect() { + const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdown.data('fieldName')}"]`); + + // Do not update if one dropdown has not selected any option + if (!$allowedToCreateInput.length) return; + + this.$allowedToCreateDropdown.disable(); + + $.ajax({ + type: 'POST', + url: this.$wrap.data('url'), + dataType: 'json', + data: { + _method: 'PATCH', + protected_tag: { + create_access_levels_attributes: [{ + id: this.$allowedToCreateDropdown.data('access-level-id'), + access_level: $allowedToCreateInput.val(), + }], }, - error() { - $.scrollTo(0); - new Flash('Failed to update tag!'); - } - }).always(() => { - this.$allowedToCreateDropdown.enable(); - }); - } - }; -})(window); + }, + error() { + $.scrollTo(0); + new Flash('Failed to update tag!'); + }, + }).always(() => { + this.$allowedToCreateDropdown.enable(); + }); + } +} diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit_list.js b/app/assets/javascripts/protected_tags/protected_tag_edit_list.js index ba40c227ef4..88c7accdec6 100644 --- a/app/assets/javascripts/protected_tags/protected_tag_edit_list.js +++ b/app/assets/javascripts/protected_tags/protected_tag_edit_list.js @@ -1,18 +1,17 @@ -/* eslint-disable arrow-parens, no-param-reassign, no-new, comma-dangle */ +import ProtectedTagEdit from './protected_tag_edit'; -(global => { - global.gl = global.gl || {}; +export default class ProtectedTagEditList { + constructor() { + this.$wrap = $('.protected-tags-list'); + this.protectedTagList = []; + this.initEditForm(); + } - gl.ProtectedTagEditList = class { - constructor() { - this.$wrap = $('.protected-tags-list'); - - // Build edit forms - this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => { - new gl.ProtectedTagEdit({ - $wrap: $(el) - }); + initEditForm() { + this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => { + this.protectedTagList[i] = new ProtectedTagEdit({ + $wrap: $(el), }); - } - }; -})(window); + }); + } +} |