Wrap classes with IIFE and define it inside gl namespace

This commit is contained in:
Alfredo Sumaran 2016-08-05 01:57:53 -05:00
parent 45454c3cb2
commit 8f29c332b5
5 changed files with 133 additions and 113 deletions

View file

@ -173,8 +173,8 @@
new Search(); new Search();
break; break;
case 'projects:protected_branches:index': case 'projects:protected_branches:index':
new ProtectedBranchCreate(); new gl.ProtectedBranchCreate();
new ProtectedBranchEditList(); new gl.ProtectedBranchEditList();
break; break;
} }
switch (path.first()) { switch (path.first()) {

View file

@ -1,18 +1,23 @@
class ProtectedBranchAccessDropdown { (global => {
constructor(options) { global.gl = global.gl || {};
const { $dropdown, data, onSelect } = options;
$dropdown.glDropdown({ gl.ProtectedBranchAccessDropdown = class {
data: data, constructor(options) {
selectable: true, const { $dropdown, data, onSelect } = options;
fieldName: $dropdown.data('field-name'),
toggleLabel(item) { $dropdown.glDropdown({
return item.text; data: data,
}, selectable: true,
clicked(item, $el, e) { fieldName: $dropdown.data('field-name'),
e.preventDefault(); toggleLabel(item) {
onSelect(); return item.text;
} },
}); clicked(item, $el, e) {
e.preventDefault();
onSelect();
}
});
}
} }
}
})(window);

View file

@ -1,49 +1,54 @@
class ProtectedBranchCreate { (global => {
constructor() { global.gl = global.gl || {};
this.$wrap = this.$form = $('#new_protected_branch');
this.buildDropdowns();
}
buildDropdowns() { gl.ProtectedBranchCreate = class {
// Allowed to Merge dropdown constructor() {
const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge'); this.$wrap = this.$form = $('#new_protected_branch');
const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push'); this.buildDropdowns();
}
new ProtectedBranchAccessDropdown({ buildDropdowns() {
$dropdown: $allowedToMergeDropdown, // Allowed to Merge dropdown
data: gon.merge_access_levels, const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
onSelect: this.onSelect.bind(this) const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
});
// Select default new gl.ProtectedBranchAccessDropdown({
$allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0); $dropdown: $allowedToMergeDropdown,
data: gon.merge_access_levels,
onSelect: this.onSelect.bind(this)
});
// Allowed to Push dropdown // Select default
new ProtectedBranchAccessDropdown({ $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
$dropdown: $allowedToPushDropdown,
data: gon.push_access_levels,
onSelect: this.onSelect.bind(this)
});
// Select default // Allowed to Push dropdown
$allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0); new gl.ProtectedBranchAccessDropdown({
$dropdown: $allowedToPushDropdown,
data: gon.push_access_levels,
onSelect: this.onSelect.bind(this)
});
// Protected branch dropdown // Select default
new ProtectedBranchDropdown({ $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
$dropdown: this.$wrap.find('.js-protected-branch-select'),
onSelect: this.onSelect.bind(this)
});
}
// This will run after clicked callback // Protected branch dropdown
onSelect() { new ProtectedBranchDropdown({
// Enable submit button $dropdown: this.$wrap.find('.js-protected-branch-select'),
const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]'); onSelect: this.onSelect.bind(this)
const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_level_attributes][access_level]"]'); });
const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_level_attributes][access_level]"]'); }
if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){ // This will run after clicked callback
this.$form.find('[type="submit"]').removeAttr('disabled'); onSelect() {
// Enable submit button
const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_level_attributes][access_level]"]');
const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_level_attributes][access_level]"]');
if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){
this.$form.find('[type="submit"]').removeAttr('disabled');
}
} }
} }
}
})(window);

View file

@ -1,56 +1,61 @@
class ProtectedBranchEdit { (global => {
constructor(options) { global.gl = global.gl || {};
this.$wrap = options.$wrap;
this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
this.buildDropdowns(); gl.ProtectedBranchEdit = class {
} constructor(options) {
this.$wrap = options.$wrap;
this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
buildDropdowns() { this.buildDropdowns();
}
// Allowed to merge dropdown buildDropdowns() {
new ProtectedBranchAccessDropdown({
$dropdown: this.$allowedToMergeDropdown,
data: gon.merge_access_levels,
onSelect: this.onSelect.bind(this)
});
// Allowed to push dropdown // Allowed to merge dropdown
new ProtectedBranchAccessDropdown({ new gl.ProtectedBranchAccessDropdown({
$dropdown: this.$allowedToPushDropdown, $dropdown: this.$allowedToMergeDropdown,
data: gon.push_access_levels, data: gon.merge_access_levels,
onSelect: this.onSelect.bind(this) onSelect: this.onSelect.bind(this)
}); });
}
onSelect() { // Allowed to push dropdown
const $allowedToMergeInput = $(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`); new gl.ProtectedBranchAccessDropdown({
const $allowedToPushInput = $(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`); $dropdown: this.$allowedToPushDropdown,
data: gon.push_access_levels,
onSelect: this.onSelect.bind(this)
});
}
$.ajax({ onSelect() {
type: 'POST', const $allowedToMergeInput = $(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
url: this.$wrap.data('url'), const $allowedToPushInput = $(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
dataType: 'json',
data: { $.ajax({
_method: 'PATCH', type: 'POST',
id: this.$wrap.data('banchId'), url: this.$wrap.data('url'),
protected_branch: { dataType: 'json',
merge_access_level_attributes: { data: {
access_level: $allowedToMergeInput.val() _method: 'PATCH',
}, id: this.$wrap.data('banchId'),
push_access_level_attributes: { protected_branch: {
access_level: $allowedToPushInput.val() merge_access_level_attributes: {
access_level: $allowedToMergeInput.val()
},
push_access_level_attributes: {
access_level: $allowedToPushInput.val()
}
} }
},
success: () => {
this.$wrap.effect('highlight');
},
error() {
$.scrollTo(0);
new Flash('Failed to update branch!');
} }
}, });
success: () => { }
this.$wrap.effect('highlight');
},
error() {
$.scrollTo(0);
new Flash('Failed to update branch!');
}
});
} }
}
})(window);

View file

@ -1,12 +1,17 @@
class ProtectedBranchEditList { (global => {
constructor() { global.gl = global.gl || {};
this.$wrap = $('.protected-branches-list');
// Build edit forms gl.ProtectedBranchEditList = class {
this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => { constructor() {
new ProtectedBranchEdit({ this.$wrap = $('.protected-branches-list');
$wrap: $(el)
// Build edit forms
this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
new gl.ProtectedBranchEdit({
$wrap: $(el)
});
}); });
}); }
} }
}
})(window);