From 43ff14e0c5074311fd544d654108550253e0fd93 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Tue, 20 Mar 2018 00:37:16 -0500 Subject: [PATCH 1/2] refactor ConfirmDangerModal into ES module --- .../javascripts/confirm_danger_modal.js | 47 +++++++------------ app/assets/javascripts/main.js | 13 ++--- 2 files changed, 23 insertions(+), 37 deletions(-) diff --git a/app/assets/javascripts/confirm_danger_modal.js b/app/assets/javascripts/confirm_danger_modal.js index 0932d836589..c21c52b0086 100644 --- a/app/assets/javascripts/confirm_danger_modal.js +++ b/app/assets/javascripts/confirm_danger_modal.js @@ -1,33 +1,22 @@ -/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, camelcase, one-var-declaration-per-line, no-else-return, max-len */ - import $ from 'jquery'; import { rstrip } from './lib/utils/common_utils'; -window.ConfirmDangerModal = (function() { - function ConfirmDangerModal(form, text) { - var project_path, submit; - this.form = form; - $('.js-confirm-text').text(text || ''); - $('.js-confirm-danger-input').val(''); - $('#modal-confirm-danger').modal('show'); - project_path = $('.js-confirm-danger-match').text(); - submit = $('.js-confirm-danger-submit'); - submit.disable(); - $('.js-confirm-danger-input').off('input'); - $('.js-confirm-danger-input').on('input', function() { - if (rstrip($(this).val()) === project_path) { - return submit.enable(); - } else { - return submit.disable(); - } - }); - $('.js-confirm-danger-submit').off('click'); - $('.js-confirm-danger-submit').on('click', (function(_this) { - return function() { - return _this.form.submit(); - }; - })(this)); - } +export default function initConfirmDangerModal($form, text) { + $('.js-confirm-text').text(text || ''); + $('.js-confirm-danger-input').val(''); + $('#modal-confirm-danger').modal('show'); - return ConfirmDangerModal; -})(); + const confirmTextMatch = $('.js-confirm-danger-match').text(); + const $submit = $('.js-confirm-danger-submit'); + $submit.disable(); + + $('.js-confirm-danger-input').off('input').on('input', function handleInput() { + const confirmText = rstrip($(this).val()); + if (confirmText === confirmTextMatch) { + $submit.enable(); + } else { + $submit.disable(); + } + }); + $('.js-confirm-danger-submit').off('click').on('click', () => $form.submit()); +} diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index cedb6ef19f7..c867f5f3236 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -1,5 +1,4 @@ /* eslint-disable import/first */ -/* global ConfirmDangerModal */ /* global $ */ import jQuery from 'jquery'; @@ -21,7 +20,7 @@ import './behaviors/'; // everything else import loadAwardsHandler from './awards_handler'; import bp from './breakpoints'; -import './confirm_danger_modal'; +import initConfirmDangerModal from './confirm_danger_modal'; import Flash, { removeFlashClickListener } from './flash'; import './gl_dropdown'; import initTodoToggle from './header'; @@ -215,13 +214,11 @@ document.addEventListener('DOMContentLoaded', () => { }); $document.on('click', '.js-confirm-danger', (e) => { - const btn = $(e.target); - const form = btn.closest('form'); - const text = btn.data('confirmDangerMessage'); e.preventDefault(); - - // eslint-disable-next-line no-new - new ConfirmDangerModal(form, text); + const $btn = $(e.target); + const $form = $btn.closest('form'); + const text = $btn.data('confirmDangerMessage'); + initConfirmDangerModal($form, text); }); $document.on('breakpoint:change', (e, breakpoint) => { From 1fff345e0d2cd6c79239e06098ec4240347b496b Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Tue, 20 Mar 2018 10:50:26 -0500 Subject: [PATCH 2/2] move confirm_danger_modal bindings directly into the only two pages that need it --- app/assets/javascripts/confirm_danger_modal.js | 12 +++++++++++- app/assets/javascripts/main.js | 9 --------- app/assets/javascripts/pages/groups/edit/index.js | 2 ++ app/assets/javascripts/pages/projects/edit/index.js | 2 ++ 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/confirm_danger_modal.js b/app/assets/javascripts/confirm_danger_modal.js index c21c52b0086..1638e09132b 100644 --- a/app/assets/javascripts/confirm_danger_modal.js +++ b/app/assets/javascripts/confirm_danger_modal.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import { rstrip } from './lib/utils/common_utils'; -export default function initConfirmDangerModal($form, text) { +function openConfirmDangerModal($form, text) { $('.js-confirm-text').text(text || ''); $('.js-confirm-danger-input').val(''); $('#modal-confirm-danger').modal('show'); @@ -20,3 +20,13 @@ export default function initConfirmDangerModal($form, text) { }); $('.js-confirm-danger-submit').off('click').on('click', () => $form.submit()); } + +export default function initConfirmDangerModal() { + $(document).on('click', '.js-confirm-danger', (e) => { + e.preventDefault(); + const $btn = $(e.target); + const $form = $btn.closest('form'); + const text = $btn.data('confirmDangerMessage'); + openConfirmDangerModal($form, text); + }); +} diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index c867f5f3236..2c80baba10b 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -20,7 +20,6 @@ import './behaviors/'; // everything else import loadAwardsHandler from './awards_handler'; import bp from './breakpoints'; -import initConfirmDangerModal from './confirm_danger_modal'; import Flash, { removeFlashClickListener } from './flash'; import './gl_dropdown'; import initTodoToggle from './header'; @@ -213,14 +212,6 @@ document.addEventListener('DOMContentLoaded', () => { $(document).trigger('toggle.comments'); }); - $document.on('click', '.js-confirm-danger', (e) => { - e.preventDefault(); - const $btn = $(e.target); - const $form = $btn.closest('form'); - const text = $btn.data('confirmDangerMessage'); - initConfirmDangerModal($form, text); - }); - $document.on('breakpoint:change', (e, breakpoint) => { if (breakpoint === 'sm' || breakpoint === 'xs') { const $gutterIcon = $sidebarGutterToggle.find('i'); diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js index d44874c8741..bb91ac84ffb 100644 --- a/app/assets/javascripts/pages/groups/edit/index.js +++ b/app/assets/javascripts/pages/groups/edit/index.js @@ -1,7 +1,9 @@ import groupAvatar from '~/group_avatar'; import TransferDropdown from '~/groups/transfer_dropdown'; +import initConfirmDangerModal from '~/confirm_danger_modal'; document.addEventListener('DOMContentLoaded', () => { groupAvatar(); new TransferDropdown(); // eslint-disable-line no-new + initConfirmDangerModal(); }); diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js index 064de22dfd6..be37df36be8 100644 --- a/app/assets/javascripts/pages/projects/edit/index.js +++ b/app/assets/javascripts/pages/projects/edit/index.js @@ -1,5 +1,6 @@ import initSettingsPanels from '~/settings_panels'; import setupProjectEdit from '~/project_edit'; +import initConfirmDangerModal from '~/confirm_danger_modal'; import ProjectNew from '../shared/project_new'; import projectAvatar from '../shared/project_avatar'; import initProjectPermissionsSettings from '../shared/permissions'; @@ -11,4 +12,5 @@ document.addEventListener('DOMContentLoaded', () => { initSettingsPanels(); projectAvatar(); initProjectPermissionsSettings(); + initConfirmDangerModal(); });