From 5c4ea535b15faaab042c89a5f2e317c6a63a76b3 Mon Sep 17 00:00:00 2001 From: Mahmoud Elewa Date: Thu, 24 Dec 2020 02:48:24 +0200 Subject: [PATCH] create confirmation popover for deleting profile photo --- public/app/scripts.js | 59 ++++++++++++++++++++------ public/guest/scripts.js | 1 + public/mix-manifest.json | 4 +- resources/js/app/popovers.js | 24 +++++++++++ resources/js/app/scripts.js | 1 + resources/js/app/toasts.js | 1 + resources/js/navbar.js | 1 + resources/views/auth/profile.blade.php | 4 +- 8 files changed, 78 insertions(+), 17 deletions(-) create mode 100644 resources/js/app/popovers.js diff --git a/public/app/scripts.js b/public/app/scripts.js index e7bc67a..1b4d9c5 100644 --- a/public/app/scripts.js +++ b/public/app/scripts.js @@ -19906,6 +19906,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) { /***/ }), +/***/ "./resources/js/app/popovers.js": +/*!**************************************!*\ + !*** ./resources/js/app/popovers.js ***! + \**************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var bootstrap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.esm.js"); + // TODO: convert to Vue + +window.addEventListener("load", function () { + var deletePhotoButton = document.getElementById('delete-profile-photo'); + var popover = new bootstrap__WEBPACK_IMPORTED_MODULE_0__.Popover(deletePhotoButton, { + html: true, + placement: 'auto', + sanitize: false, + title: 'Are you sure you want to delete the profile photo?', + content: "
\n \n \n
" + }); + deletePhotoButton.addEventListener("shown.bs.popover", function () { + document.getElementById("cancel-delete-profile-photo").addEventListener("click", function () { + popover.hide(); + }); + }); +}); + +/***/ }), + /***/ "./resources/js/app/scripts.js": /*!*************************************!*\ !*** ./resources/js/app/scripts.js ***! @@ -19918,13 +19947,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _navbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../navbar */ "./resources/js/navbar.js"); /* harmony import */ var _navbar__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_navbar__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _toasts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./toasts */ "./resources/js/app/toasts.js"); -/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js"); -/* harmony import */ var _components_UpdateProfile__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/UpdateProfile */ "./resources/js/app/components/UpdateProfile.vue"); -/* harmony import */ var _components_UserProfileLink__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/UserProfileLink */ "./resources/js/app/components/UserProfileLink.vue"); -/* harmony import */ var _components_UpdateProfilePhoto__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/UpdateProfilePhoto */ "./resources/js/app/components/UpdateProfilePhoto.vue"); -/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../store */ "./resources/js/store/index.js"); -/* harmony import */ var vue_toastification__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! vue-toastification */ "./node_modules/vue-toastification/dist/esm/index.js"); -/* harmony import */ var vue_toastification_dist_index_css__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! vue-toastification/dist/index.css */ "./node_modules/vue-toastification/dist/index.css"); +/* harmony import */ var _popovers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./popovers */ "./resources/js/app/popovers.js"); +/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js"); +/* harmony import */ var _components_UpdateProfile__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/UpdateProfile */ "./resources/js/app/components/UpdateProfile.vue"); +/* harmony import */ var _components_UserProfileLink__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/UserProfileLink */ "./resources/js/app/components/UserProfileLink.vue"); +/* harmony import */ var _components_UpdateProfilePhoto__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/UpdateProfilePhoto */ "./resources/js/app/components/UpdateProfilePhoto.vue"); +/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../store */ "./resources/js/store/index.js"); +/* harmony import */ var vue_toastification__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! vue-toastification */ "./node_modules/vue-toastification/dist/esm/index.js"); +/* harmony import */ var vue_toastification_dist_index_css__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! vue-toastification/dist/index.css */ "./node_modules/vue-toastification/dist/index.css"); + @@ -19937,15 +19968,15 @@ __webpack_require__.r(__webpack_exports__); // init Vue 3 -var app = (0,vue__WEBPACK_IMPORTED_MODULE_3__.createApp)({ +var app = (0,vue__WEBPACK_IMPORTED_MODULE_4__.createApp)({ components: { - UpdateProfile: _components_UpdateProfile__WEBPACK_IMPORTED_MODULE_4__.default, - UserProfileLink: _components_UserProfileLink__WEBPACK_IMPORTED_MODULE_5__.default, - UpdateProfilePhoto: _components_UpdateProfilePhoto__WEBPACK_IMPORTED_MODULE_6__.default + UpdateProfile: _components_UpdateProfile__WEBPACK_IMPORTED_MODULE_5__.default, + UserProfileLink: _components_UserProfileLink__WEBPACK_IMPORTED_MODULE_6__.default, + UpdateProfilePhoto: _components_UpdateProfilePhoto__WEBPACK_IMPORTED_MODULE_7__.default } }); -app.use(vue_toastification__WEBPACK_IMPORTED_MODULE_8__.default); -app.use(_store__WEBPACK_IMPORTED_MODULE_7__.default); +app.use(vue_toastification__WEBPACK_IMPORTED_MODULE_9__.default); +app.use(_store__WEBPACK_IMPORTED_MODULE_8__.default); app.mount("#app"); /***/ }), @@ -19959,6 +19990,7 @@ app.mount("#app"); "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var bootstrap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.esm.js"); + // TODO: convert to Vue window.addEventListener("DOMContentLoaded", function () { var toastScroll = function toastScroll() { @@ -20021,6 +20053,7 @@ var http = axios__WEBPACK_IMPORTED_MODULE_0___default().create({ \********************************/ /***/ (() => { +// TODO: convert to Vue window.addEventListener("DOMContentLoaded", function () { var navbarCollapse = function navbarCollapse() { var nav = document.getElementById("mainNav"); diff --git a/public/guest/scripts.js b/public/guest/scripts.js index 8501c02..7e7d36c 100644 --- a/public/guest/scripts.js +++ b/public/guest/scripts.js @@ -3069,6 +3069,7 @@ __webpack_require__.r(__webpack_exports__); \********************************/ /***/ (() => { +// TODO: convert to Vue window.addEventListener("DOMContentLoaded", function () { var navbarCollapse = function navbarCollapse() { var nav = document.getElementById("mainNav"); diff --git a/public/mix-manifest.json b/public/mix-manifest.json index d9a2c84..bca18f4 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { - "/app/scripts.js": "/app/scripts.js?id=55d872682012ac72b5b6", - "/guest/scripts.js": "/guest/scripts.js?id=9d90a0281a58b7439960", + "/app/scripts.js": "/app/scripts.js?id=c062bf6935916e35a145", + "/guest/scripts.js": "/guest/scripts.js?id=d46928d7984fe8816104", "/guest/styles.css": "/guest/styles.css?id=1e4feb60ee0e27ab951d", "/app/styles.css": "/app/styles.css?id=a0eb47438bb076b93a20", "/images/avatar.svg": "/images/avatar.svg?id=81899e18586b10083308", diff --git a/resources/js/app/popovers.js b/resources/js/app/popovers.js new file mode 100644 index 0000000..944ed7e --- /dev/null +++ b/resources/js/app/popovers.js @@ -0,0 +1,24 @@ +import { Popover } from 'bootstrap'; + +// TODO: convert to Vue +window.addEventListener("load", function () { + let deletePhotoButton = document.getElementById('delete-profile-photo') + let popover = new Popover(deletePhotoButton, { + html: true, + placement: 'auto', + sanitize: false, + title: 'Are you sure you want to delete the profile photo?', + content: + `
+ + +
` + }) + + deletePhotoButton.addEventListener("shown.bs.popover", function () { + document.getElementById("cancel-delete-profile-photo").addEventListener("click", function () { + popover.hide() + }) + }); +}); + diff --git a/resources/js/app/scripts.js b/resources/js/app/scripts.js index af67c00..8536ad8 100644 --- a/resources/js/app/scripts.js +++ b/resources/js/app/scripts.js @@ -1,6 +1,7 @@ import 'bootstrap' import '../navbar' import './toasts' +import './popovers' import { createApp } from 'vue' import UpdateProfile from './components/UpdateProfile' import UserProfileLink from './components/UserProfileLink' diff --git a/resources/js/app/toasts.js b/resources/js/app/toasts.js index 775de46..b591e2d 100644 --- a/resources/js/app/toasts.js +++ b/resources/js/app/toasts.js @@ -1,5 +1,6 @@ import { Toast } from 'bootstrap'; +// TODO: convert to Vue window.addEventListener("DOMContentLoaded", function(){ let toastScroll = function () { let headerHeight = 75; diff --git a/resources/js/navbar.js b/resources/js/navbar.js index be7506a..e3d1672 100644 --- a/resources/js/navbar.js +++ b/resources/js/navbar.js @@ -1,3 +1,4 @@ +// TODO: convert to Vue window.addEventListener("DOMContentLoaded", function(){ let navbarCollapse = function () { let nav = document.getElementById("mainNav"); diff --git a/resources/views/auth/profile.blade.php b/resources/views/auth/profile.blade.php index 3114783..06ffe76 100644 --- a/resources/views/auth/profile.blade.php +++ b/resources/views/auth/profile.blade.php @@ -7,10 +7,10 @@

-

+ @csrf @method('DELETE') -