From 865c0c058053a07b2dab9ce3a030d904c7f12670 Mon Sep 17 00:00:00 2001 From: Djamil Legato Date: Fri, 4 Feb 2022 10:57:45 -0800 Subject: [PATCH] Keep page media count updated when adding/removing media files --- themes/grav/app/pages/page/media.js | 8 ++++++++ themes/grav/js/admin.min.js | 2 +- .../templates/forms/fields/pagemedia/pagemedia.html.twig | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/themes/grav/app/pages/page/media.js b/themes/grav/app/pages/page/media.js index 283ffb01..9a0ad734 100644 --- a/themes/grav/app/pages/page/media.js +++ b/themes/grav/app/pages/page/media.js @@ -116,6 +116,7 @@ export default class PageMedia extends FilesField { // accepted this.updateThumbsSize(); + this.updateMediaCount(); $('.dz-preview').prop('draggable', 'true'); } @@ -127,6 +128,8 @@ export default class PageMedia extends FilesField { onDropzoneRemovedFile(file, ...extra) { super.onDropzoneRemovedFile(file, ...extra); + + this.updateMediaCount(); if (this.sortable) { this.sortable.options.onSort(); } @@ -141,6 +144,11 @@ export default class PageMedia extends FilesField { } } + updateMediaCount() { + const element = this.container.closest('.pagemedia-field').find('[data-pagemedia-count]'); + element.text(`(${this.dropzone.files.length})`); + } + attachDragDrop() { this.container.delegate('[data-dz-insert]', 'click', (e) => { let target = $(e.currentTarget).parent('.dz-preview').find('.dz-filename'); diff --git a/themes/grav/js/admin.min.js b/themes/grav/js/admin.min.js index 00477788..040b52ca 100644 --- a/themes/grav/js/admin.min.js +++ b/themes/grav/js/admin.min.js @@ -435,7 +435,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ PageMedia),\n/* harmony export */ \"updateMediaSizes\": () => (/* binding */ updateMediaSizes),\n/* harmony export */ \"updateMediaCollapseStatus\": () => (/* binding */ updateMediaCollapseStatus),\n/* harmony export */ \"Instance\": () => (/* binding */ Instance)\n/* harmony export */ });\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ \"jquery\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_cookies_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/cookies.js */ \"./app/utils/cookies.js\");\n/* harmony import */ var _utils_request__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/request */ \"./app/utils/request.js\");\n/* harmony import */ var _forms_fields_files__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../forms/fields/files */ \"./app/forms/fields/files.js\");\n/* harmony import */ var grav_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! grav-config */ \"grav-config\");\n/* harmony import */ var grav_config__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(grav_config__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _forms_fields_editor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../forms/fields/editor */ \"./app/forms/fields/editor.js\");\n/* harmony import */ var sortablejs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! sortablejs */ \"./node_modules/sortablejs/modular/sortable.esm.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nfunction _get() { if (typeof Reflect !== \"undefined\" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }\n\nfunction _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n\n\nvar previewTemplate = \"\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\u2714
\\n
\\u2718
\\n
\\n \").concat(grav_config__WEBPACK_IMPORTED_MODULE_4__.translations.PLUGIN_ADMIN.DELETE, \"\\n \").concat(grav_config__WEBPACK_IMPORTED_MODULE_4__.translations.PLUGIN_ADMIN.METADATA, \"\\n \").concat(grav_config__WEBPACK_IMPORTED_MODULE_4__.translations.PLUGIN_ADMIN.VIEW, \"\\n \").concat(grav_config__WEBPACK_IMPORTED_MODULE_4__.translations.PLUGIN_ADMIN.INSERT, \"\\n
\").trim();\n\nvar PageMedia = /*#__PURE__*/function (_FilesField) {\n _inherits(PageMedia, _FilesField);\n\n var _super = _createSuper(PageMedia);\n\n function PageMedia() {\n var _this;\n\n var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref$container = _ref.container,\n container = _ref$container === void 0 ? '#grav-dropzone' : _ref$container,\n _ref$options = _ref.options,\n options = _ref$options === void 0 ? {} : _ref$options;\n\n _classCallCheck(this, PageMedia);\n\n options = Object.assign(options, {\n previewTemplate: previewTemplate\n });\n _this = _super.call(this, {\n container: container,\n options: options\n });\n\n if (!_this.container.length) {\n return _possibleConstructorReturn(_this);\n }\n\n _this.urls = {\n fetch: \"\".concat(_this.container.data('media-url'), \"/task\").concat(grav_config__WEBPACK_IMPORTED_MODULE_4__.config.param_sep, \"listmedia\"),\n add: \"\".concat(_this.container.data('media-url'), \"/task\").concat(grav_config__WEBPACK_IMPORTED_MODULE_4__.config.param_sep, \"addmedia\"),\n \"delete\": \"\".concat(_this.container.data('media-url'), \"/task\").concat(grav_config__WEBPACK_IMPORTED_MODULE_4__.config.param_sep, \"delmedia\")\n };\n _this.dropzone.options.url = _this.urls.add;\n\n if (typeof _this.options.fetchMedia === 'undefined' || _this.options.fetchMedia) {\n _this.fetchMedia();\n }\n\n if (typeof _this.options.attachDragDrop === 'undefined' || _this.options.attachDragDrop) {\n _this.attachDragDrop();\n }\n\n var field = jquery__WEBPACK_IMPORTED_MODULE_0___default()(\"[name=\\\"\".concat(_this.container.data('dropzone-field'), \"\\\"]\"));\n\n if (field.length) {\n _this.sortable = new sortablejs__WEBPACK_IMPORTED_MODULE_6__[\"default\"](_this.container.get(0), {\n animation: 150,\n // forceFallback: true,\n setData: function setData(dataTransfer, target) {\n target = jquery__WEBPACK_IMPORTED_MODULE_0___default()(target);\n var uri = encodeURI(target.find('.dz-filename').text());\n var shortcode = (0,_forms_fields_files__WEBPACK_IMPORTED_MODULE_3__.UriToMarkdown)(uri);\n\n _this.dropzone.disable();\n\n target.addClass('hide-backface');\n dataTransfer.effectAllowed = 'copy';\n dataTransfer.setData('text', shortcode);\n },\n onSort: function onSort() {\n var names = [];\n\n _this.container.find('[data-dz-name]').each(function (index, file) {\n file = jquery__WEBPACK_IMPORTED_MODULE_0___default()(file);\n var name = file.text().trim();\n names.push(name);\n });\n\n field.val(names.join(','));\n }\n });\n }\n\n return _this;\n }\n\n _createClass(PageMedia, [{\n key: \"fetchMedia\",\n value: function fetchMedia() {\n var _this2 = this;\n\n var order = this.container.closest('.form-field').find('[name=\"data[header][media_order]\"]').val();\n var body = {\n uri: this.getURI(),\n order: order\n };\n var url = this.urls.fetch;\n (0,_utils_request__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(url, {\n method: 'post',\n body: body\n }, function (response) {\n var results = response.results;\n Object.keys(results).forEach(function (name) {\n var data = results[name];\n var mock = {\n name: name,\n size: data.size,\n accepted: true,\n extras: data\n };\n\n _this2.dropzone.files.push(mock);\n\n _this2.dropzone.options.addedfile.call(_this2.dropzone, mock);\n\n _this2.dropzone.options.thumbnail.call(_this2.dropzone, mock, data.url);\n });\n\n _this2.updateThumbsSize();\n\n _this2.container.find('.dz-preview').prop('draggable', 'true');\n });\n }\n }, {\n key: \"onDropzoneSending\",\n value: function onDropzoneSending(file, xhr, formData) {\n /*\n // Cannot call super because Safari and IE API don't implement `delete`\n super.onDropzoneSending(file, xhr, formData);\n formData.delete('task');\n */\n formData.append('name', this.options.dotNotation || file.name);\n formData.append('admin-nonce', grav_config__WEBPACK_IMPORTED_MODULE_4__.config.admin_nonce);\n formData.append('uri', this.getURI());\n }\n }, {\n key: \"onDropzoneComplete\",\n value: function onDropzoneComplete(file) {\n _get(_getPrototypeOf(PageMedia.prototype), \"onDropzoneComplete\", this).call(this, file);\n\n if (this.sortable) {\n this.sortable.options.onSort();\n } // accepted\n\n\n this.updateThumbsSize();\n jquery__WEBPACK_IMPORTED_MODULE_0___default()('.dz-preview').prop('draggable', 'true');\n }\n }, {\n key: \"onDropzoneAddedFile\",\n value: function onDropzoneAddedFile(file) {\n for (var _len = arguments.length, extra = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n extra[_key - 1] = arguments[_key];\n }\n\n _get(_getPrototypeOf(PageMedia.prototype), \"onDropzoneAddedFile\", this).call(this, file, extra);\n\n this.updateThumbsSize();\n }\n }, {\n key: \"onDropzoneRemovedFile\",\n value: function onDropzoneRemovedFile(file) {\n var _get2;\n\n for (var _len2 = arguments.length, extra = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n extra[_key2 - 1] = arguments[_key2];\n }\n\n (_get2 = _get(_getPrototypeOf(PageMedia.prototype), \"onDropzoneRemovedFile\", this)).call.apply(_get2, [this, file].concat(extra));\n\n if (this.sortable) {\n this.sortable.options.onSort();\n }\n }\n }, {\n key: \"updateThumbsSize\",\n value: function updateThumbsSize() {\n var status = JSON.parse(_utils_cookies_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].get('grav-admin-pagemedia') || '{}');\n\n if (status.width) {\n var input = this.container.closest('.pagemedia-field').find('.media-resizer');\n updateMediaSizes(input, status.width, false);\n }\n }\n }, {\n key: \"attachDragDrop\",\n value: function attachDragDrop() {\n var _this3 = this;\n\n this.container.delegate('[data-dz-insert]', 'click', function (e) {\n var target = jquery__WEBPACK_IMPORTED_MODULE_0___default()(e.currentTarget).parent('.dz-preview').find('.dz-filename');\n var editor = _forms_fields_editor__WEBPACK_IMPORTED_MODULE_5__.Instance.editors.filter(function (index, editor) {\n return jquery__WEBPACK_IMPORTED_MODULE_0___default()(editor).attr('name') === 'data[content]';\n });\n\n if (editor.length) {\n editor = editor.data('codemirror');\n editor.focus();\n var filename = encodeURI(target.text());\n var shortcode = (0,_forms_fields_files__WEBPACK_IMPORTED_MODULE_3__.UriToMarkdown)(filename);\n editor.doc.replaceSelection(shortcode);\n }\n });\n this.container.delegate('[data-dz-view]', 'mouseenter', function (e) {\n var target = jquery__WEBPACK_IMPORTED_MODULE_0___default()(e.currentTarget);\n var file = target.parent('.dz-preview').find('.dz-filename');\n var filename = encodeURI(file.text());\n var URL = target.closest('[data-media-path]').data('media-path');\n\n var original = _this3.dropzone.files.filter(function (file) {\n return encodeURI(file.name) === filename;\n }).shift();\n\n original = original && (original.extras && original.extras.original || encodeURI(original.name));\n target.attr('href', \"\".concat(URL, \"/\").concat(original));\n });\n this.container.delegate('[data-dz-metadata]', 'click', function (e) {\n e.preventDefault();\n var target = jquery__WEBPACK_IMPORTED_MODULE_0___default()(e.currentTarget);\n var file = target.parent('.dz-preview').find('.dz-filename');\n var filename = encodeURI(file.text());\n var cleanName = file.text().replace('<', '<').replace('>', '>');\n var fileObj = _this3.dropzone.files.filter(function (file) {\n return file.name === __webpack_require__.g.decodeURI(filename);\n }).shift() || {};\n\n if (!fileObj.extras) {\n fileObj.extras = {\n metadata: []\n };\n }\n\n if (Array.isArray(fileObj.extras.metadata) && !fileObj.extras.metadata.length) {\n fileObj.extras.metadata = {\n '': \"\".concat(cleanName, \".meta.yaml doesn't exist\")\n };\n }\n\n fileObj = fileObj.extras;\n var modal_element = jquery__WEBPACK_IMPORTED_MODULE_0___default()('body').find('[data-remodal-id=\"metadata\"]');\n var modal = (jquery__WEBPACK_IMPORTED_MODULE_0___default().remodal.lookup)[modal_element.data('remodal')];\n modal_element.find('h1 strong').html(cleanName);\n\n if (fileObj.url) {\n modal_element.find('.meta-preview').html(\"\"));\n }\n\n var container = modal_element.find('.meta-content').html('