From 0bf41d9af283ccd770d82fd0425a8d15124be52c Mon Sep 17 00:00:00 2001 From: brandonkelly Date: Mon, 2 Sep 2024 13:34:05 -0700 Subject: [PATCH] allowAdd and allowRemove settings for element selects Resolves #15639 --- CHANGELOG-WIP.md | 1 + .../_includes/forms/elementSelect.twig | 41 +++++++++++-------- src/web/assets/cp/dist/cp.js | 2 +- src/web/assets/cp/dist/cp.js.map | 2 +- .../cp/src/js/BaseElementSelectInput.js | 40 ++++++++++-------- 5 files changed, 51 insertions(+), 35 deletions(-) diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md index 4b9f60d5724..33586e16554 100644 --- a/CHANGELOG-WIP.md +++ b/CHANGELOG-WIP.md @@ -50,6 +50,7 @@ - Deprecated `craft\helpers\ElementHelper::rootElement()`. `craft\base\ElementInterface::getRootOwner()` should be used instead. - Added `Craft.cp.announce()`, simplifying live region announcements for screen readers. ([#15569](https://github.com/craftcms/cms/pull/15569)) - Element action menu items returned by `craft\base\Element::safeActionMenuItems()` and `destructiveActionMenuItems()` can now include a `showInChips` key to explicitly opt into/out of being shown within element chips and cards. +- Element select inputs now support `allowAdd` and `allowRemove` settings. ([#15639](https://github.com/craftcms/cms/discussions/15639)) - Control panel CSS selectors that take orientation into account now use logical properties. ([#15522](https://github.com/craftcms/cms/pull/15522)) ### System diff --git a/src/templates/_includes/forms/elementSelect.twig b/src/templates/_includes/forms/elementSelect.twig index 786baef1d71..2110e676293 100644 --- a/src/templates/_includes/forms/elementSelect.twig +++ b/src/templates/_includes/forms/elementSelect.twig @@ -22,6 +22,9 @@ {% set maintainHierarchy = maintainHierarchy ?? false %} {% set registerJs = registerJs ?? true %} +{% set allowAdd = allowAdd ?? true %} +{% set allowRemove = allowRemove ?? true %} + {% set containerAttributes = { id: id, class: ['elementselect']|merge((class ?? [])|explodeClass), @@ -63,23 +66,25 @@ {% endif %}
- {{ tag('button', { - type: 'button', - class: [ - 'btn', - 'add', - 'icon', - 'dashed', - disabled ? 'disabled', - limit and elements|length >= limit ? 'hidden', - ]|filter, - text: selectionLabel ?? 'Choose'|t('app'), - disabled: disabled, - aria: { - label: selectionLabel ?? 'Choose'|t('app'), - describedby: describedBy ?? false, - } - }) }} + {% if allowAdd %} + {{ tag('button', { + type: 'button', + class: [ + 'btn', + 'add', + 'icon', + 'dashed', + disabled ? 'disabled', + limit and elements|length >= limit ? 'hidden', + ]|filter, + text: selectionLabel ?? 'Choose'|t('app'), + disabled: disabled, + aria: { + label: selectionLabel ?? 'Choose'|t('app'), + describedby: describedBy ?? false, + } + }) }} + {% endif %}
{% endtag %} @@ -94,6 +99,8 @@ referenceElementId: referenceElement.id ?? null, referenceElementSiteId: referenceElement.siteId ?? null, criteria: criteria, + allowAdd: allowAdd, + allowRemove: allowRemove, allowSelfRelations: allowSelfRelations ?? false, maintainHierarchy: maintainHierarchy, branchLimit: branchLimit ?? null, diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js index 0ceb5ae4133..1666db3f98a 100644 --- a/src/web/assets/cp/dist/cp.js +++ b/src/web/assets/cp/dist/cp.js @@ -1,3 +1,3 @@ /*! For license information please see cp.js.LICENSE.txt */ -(function(){var __webpack_modules__={463:function(){Craft.Accordion=Garnish.Base.extend({$trigger:null,targetSelector:null,_$target:null,init:function(t){var e=this;this.$trigger=$(t),this.$trigger.data("accordion")&&(console.warn("Double-instantiating an accordion trigger on an element"),this.$trigger.data("accordion").destroy()),this.$trigger.data("accordion",this),this.targetSelector=this.$trigger.attr("aria-controls")?"#".concat(this.$trigger.attr("aria-controls")):null,this.targetSelector&&(this._$target=$(this.targetSelector)),this.addListener(this.$trigger,"click","onTriggerClick"),this.addListener(this.$trigger,"keypress",(function(t){var n=t.keyCode;n!==Garnish.SPACE_KEY&&n!==Garnish.RETURN_KEY||(t.preventDefault(),e.onTriggerClick())}))},onTriggerClick:function(){"true"===this.$trigger.attr("aria-expanded")?this.hideTarget(this._$target):this.showTarget(this._$target)},showTarget:function(t){var e=this;if(t&&t.length){this.showTarget._currentHeight=t.height(),t.removeClass("hidden"),this.$trigger.removeClass("collapsed").addClass("expanded").attr("aria-expanded","true");for(var n=0;n=this.settings.maxItems)){var e=$(t).appendTo(this.$tbody),n=e.find(".delete");this.settings.sortable&&this.sorter.addItems(e),this.$deleteBtns=this.$deleteBtns.add(n),this.addListener(n,"click","handleDeleteBtnClick"),this.totalItems++,this.updateUI()}},reorderItems:function(){var t=this;if(this.settings.sortable){for(var e=[],n=0;n=this.settings.maxItems?$(this.settings.newItemBtnSelector).addClass("hidden"):$(this.settings.newItemBtnSelector).removeClass("hidden"))}},{defaults:{tableSelector:null,noItemsSelector:null,newItemBtnSelector:null,idAttribute:"data-id",nameAttribute:"data-name",sortable:!1,allowDeleteAll:!0,minItems:0,maxItems:null,reorderAction:null,deleteAction:null,reorderSuccessMessage:Craft.t("app","New order saved."),reorderFailMessage:Craft.t("app","Couldn’t save new order."),confirmDeleteMessage:Craft.t("app","Are you sure you want to delete “{name}”?"),deleteSuccessMessage:Craft.t("app","“{name}” deleted."),deleteFailMessage:Craft.t("app","Couldn’t delete “{name}”."),onReorderItems:$.noop,onDeleteItem:$.noop}})},6872:function(){Craft.AssetImageEditor=Garnish.Modal.extend({$body:null,$footer:null,$imageTools:null,$buttons:null,$cancelBtn:null,$replaceBtn:null,$saveBtn:null,$focalPointBtn:null,$editorContainer:null,$straighten:null,$croppingCanvas:null,$spinner:null,$constraintContainer:null,$constraintRadioInputs:null,$customConstraints:null,canvas:null,image:null,viewport:null,focalPoint:null,grid:null,croppingCanvas:null,clipper:null,croppingRectangle:null,cropperHandles:null,cropperGrid:null,croppingShade:null,imageStraightenAngle:0,viewportRotation:0,originalWidth:0,originalHeight:0,imageVerticeCoords:null,zoomRatio:1,animationInProgress:!1,currentView:"",assetId:null,cacheBust:null,draggingCropper:!1,scalingCropper:!1,draggingFocal:!1,previousMouseX:0,previousMouseY:0,shiftKeyHeld:!1,editorHeight:0,editorWidth:0,cropperState:!1,scaleFactor:1,flipData:{},focalPointState:!1,maxImageSize:null,lastLoadedDimensions:null,imageIsLoading:!1,mouseMoveEvent:null,croppingConstraint:!1,constraintOrientation:"landscape",showingCustomConstraint:!1,saving:!1,renderImage:null,renderCropper:null,_queue:null,init:function(t,e){var n=this;this._queue=new Craft.Queue,this.cacheBust=Date.now(),this.setSettings(e,Craft.AssetImageEditor.defaults),null===this.settings.allowDegreeFractions&&(this.settings.allowDegreeFractions=Craft.isImagick),Garnish.prefersReducedMotion()&&(this.settings.animationDuration=1),this.assetId=t,this.flipData={x:0,y:0},this.$container=$('
').appendTo(Garnish.$bod),this.$body=$('
').appendTo(this.$container),this.$footer=$('
').appendTo(this.$container),this.base(this.$container,this.settings),this.$buttons=$('
').appendTo(this.$footer),this.$cancelBtn=$("
\n");var l=function(n){function i(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),function(e,n,i){return n=s(n),function(e,n){if(n&&("object"===t(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}(e,r()?Reflect.construct(n,i||[],s(e).constructor):n.apply(e,i))}(this,i,arguments)}var l,c,u;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&a(t,e)}(i,n),l=i,u=[{key:"observedAttributes",get:function(){return["visible"]}}],(c=[{key:"connectedCallback",value:function(){this.root=this;var t=o.content.cloneNode(!0);this.root.append(t),"true"===this.visible&&this.wrapper.classList.remove("hidden"),this.initialized=!0}},{key:"visible",get:function(){return this.getAttribute("visible")},set:function(t){this.setAttribute("visible",t)}},{key:"messageWrapper",get:function(){return this.querySelector(".message")}},{key:"wrapper",get:function(){return this.querySelector(".wrapper")}},{key:"attributeChangedCallback",value:function(t,e,n){if(this.initialized)return"visible"===t.toLowerCase()?"true"===n?this.show():this.hide():void 0}},{key:"disconnectedCallback",value:function(){}},{key:"show",value:function(){this.wrapper.classList.remove("hidden"),this.dispatchEvent(new CustomEvent("show"))}},{key:"hide",value:function(){this.wrapper.classList.add("hidden"),this.dispatchEvent(new CustomEvent("hide"))}},{key:"focus",value:function(){this.wrapper.focus()}}])&&e(l.prototype,c),u&&e(l,u),Object.defineProperty(l,"prototype",{writable:!1}),i}(i(HTMLElement));customElements.define("craft-spinner",l)},691:function(){function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,r,a,s,o=[],l=!0,c=!1;try{if(a=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;l=!1}else for(;!(l=(i=a.call(n)).done)&&(o.push(i.value),o.length!==e);l=!0);}catch(t){c=!0,r=t}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw r}}return o}}(t,e)||r(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(){"use strict";n=function(){return i};var e,i={},r=Object.prototype,a=r.hasOwnProperty,s=Object.defineProperty||function(t,e,n){t[e]=n.value},o="function"==typeof Symbol?Symbol:{},l=o.iterator||"@@iterator",c=o.asyncIterator||"@@asyncIterator",u=o.toStringTag||"@@toStringTag";function h(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{h({},"")}catch(e){h=function(t,e,n){return t[e]=n}}function d(t,e,n,i){var r=e&&e.prototype instanceof y?e:y,a=Object.create(r.prototype),o=new P(i||[]);return s(a,"_invoke",{value:E(t,n,o)}),a}function f(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}i.wrap=d;var p="suspendedStart",g="suspendedYield",m="executing",v="completed",b={};function y(){}function C(){}function $(){}var w={};h(w,l,(function(){return this}));var _=Object.getPrototypeOf,S=_&&_(_(M([])));S&&S!==r&&a.call(S,l)&&(w=S);var x=$.prototype=y.prototype=Object.create(w);function T(t){["next","throw","return"].forEach((function(e){h(t,e,(function(t){return this._invoke(e,t)}))}))}function I(e,n){function i(r,s,o,l){var c=f(e[r],e,s);if("throw"!==c.type){var u=c.arg,h=u.value;return h&&"object"==t(h)&&a.call(h,"__await")?n.resolve(h.__await).then((function(t){i("next",t,o,l)}),(function(t){i("throw",t,o,l)})):n.resolve(h).then((function(t){u.value=t,o(u)}),(function(t){return i("throw",t,o,l)}))}l(c.arg)}var r;s(this,"_invoke",{value:function(t,e){function a(){return new n((function(n,r){i(t,e,n,r)}))}return r=r?r.then(a,a):a()}})}function E(t,n,i){var r=p;return function(a,s){if(r===m)throw new Error("Generator is already running");if(r===v){if("throw"===a)throw s;return{value:e,done:!0}}for(i.method=a,i.arg=s;;){var o=i.delegate;if(o){var l=L(o,i);if(l){if(l===b)continue;return l}}if("next"===i.method)i.sent=i._sent=i.arg;else if("throw"===i.method){if(r===p)throw r=v,i.arg;i.dispatchException(i.arg)}else"return"===i.method&&i.abrupt("return",i.arg);r=m;var c=f(t,n,i);if("normal"===c.type){if(r=i.done?v:g,c.arg===b)continue;return{value:c.arg,done:i.done}}"throw"===c.type&&(r=v,i.method="throw",i.arg=c.arg)}}}function L(t,n){var i=n.method,r=t.iterator[i];if(r===e)return n.delegate=null,"throw"===i&&t.iterator.return&&(n.method="return",n.arg=e,L(t,n),"throw"===n.method)||"return"!==i&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+i+"' method")),b;var a=f(r,t.iterator,n.arg);if("throw"===a.type)return n.method="throw",n.arg=a.arg,n.delegate=null,b;var s=a.arg;return s?s.done?(n[t.resultName]=s.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,b):s:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,b)}function k(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function A(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function P(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(k,this),this.reset(!0)}function M(n){if(n||""===n){var i=n[l];if(i)return i.call(n);if("function"==typeof n.next)return n;if(!isNaN(n.length)){var r=-1,s=function t(){for(;++r=0;--r){var s=this.tryEntries[r],o=s.completion;if("root"===s.tryLoc)return i("end");if(s.tryLoc<=this.prev){var l=a.call(s,"catchLoc"),c=a.call(s,"finallyLoc");if(l&&c){if(this.prev=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&a.call(i,"finallyLoc")&&this.prev=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),A(n),b}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var i=n.completion;if("throw"===i.type){var r=i.arg;A(n)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,i){return this.delegate={iterator:M(t),resultName:n,nextLoc:i},"next"===this.method&&(this.arg=e),b}},i}function i(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||r(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n').appendTo(Garnish.$bod);this.$sidebar=$('
').appendTo(i).attr({role:"navigation","aria-label":Craft.t("app","Source")}),this.$sourcesContainer=$('
').appendTo(this.$sidebar),this.$sourceSettingsContainer=$('
').appendTo(i),this.$footer=$('
').appendTo(i),this.$footerBtnContainer=$('
').appendTo(this.$footer),this.$cancelBtn=$("