From bdf0b36225ba63a4f2784c369d1915582a821ee8 Mon Sep 17 00:00:00 2001 From: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> Date: Tue, 9 Jan 2024 11:35:12 +1300 Subject: [PATCH] FIX Nicely truncate link title/URL (#153) --- client/dist/js/bundle.js | 2 +- client/dist/styles/bundle.css | 2 +- .../src/components/LinkPicker/LinkPicker.scss | 35 ++++++++++++++++--- .../components/LinkPicker/LinkPickerTitle.js | 3 -- 4 files changed, 32 insertions(+), 10 deletions(-) diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js index 5204a639..899b519e 100644 --- a/client/dist/js/bundle.js +++ b/client/dist/js/bundle.js @@ -1 +1 @@ -!function(){"use strict";var e={274:function(e,t,n){var r,o=(r=n(521))&&r.__esModule?r:{default:r};document.addEventListener("DOMContentLoaded",(()=>{(0,o.default)()}))},521:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=u(n(648)),o=u(n(809)),a=u(n(852)),l=u(n(117)),i=u(n(606));function u(e){return e&&e.__esModule?e:{default:e}}var s=()=>{r.default.component.registerMany({LinkPicker:o.default,LinkField:a.default,"LinkModal.FormBuilderModal":l.default,"LinkModal.InsertMediaModal":i.default})};t.default=s},852:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.LinkFieldContext=void 0;var r=g(n(363)),o=n(827),a=n(624),l=(n(648),m(n(42))),i=m(n(809)),u=m(n(734)),s=(m(n(686)),m(n(697))),d=g(n(123)),f=m(n(159)),c=m(n(510)),p=m(n(86)),y=m(n(754)),v=m(n(872)),k=m(n(902));function m(e){return e&&e.__esModule?e:{default:e}}function _(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(_=function(e){return e?n:t})(e)}function g(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=_(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}const O=(0,r.createContext)(null);t.LinkFieldContext=O;const h="SilverStripe\\LinkField\\Controllers\\LinkFieldController",b=e=>{var t;let{value:n=null,onChange:o,types:a=[],actions:l,isMulti:d=!1,canCreate:p,ownerID:m,ownerClass:_,ownerRelation:g}=e;const[b,C]=(0,r.useState)({}),[M,w]=(0,r.useState)(0);let R=n;Array.isArray(R)||("number"==typeof R&&0!=R&&(R=[R]),R||(R=[])),(0,r.useEffect)((()=>{if(!M&&R.length>0){const e=[];for(const t of R)e.push(`itemIDs[]=${t}`);const t=`${c.default.getSection(h).form.linkForm.dataUrl}?${e.join("&")}`;f.default.get(t).then((e=>e.json())).then((e=>{C(e)}))}}),[M,n&&n.length]);const j=()=>{w(0)},D=e=>{w(0);const t=[...R];t.includes(e)||t.push(e),o(d?t:t[0]),l.toasts.success(y.default._t("LinkField.SAVE_SUCCESS","Saved link"))},E=e=>{let t=`${c.default.getSection(h).form.linkForm.deleteUrl}/${e}`;const n=v.default.parse(t),r=k.default.parse(n.query);r.ownerID=m,r.ownerClass=_,r.ownerRelation=g,t=v.default.format({...n,search:k.default.stringify(r)}),f.default.delete(t,{},{"X-SecurityID":c.default.get("SecurityID")}).then((()=>{l.toasts.success(y.default._t("LinkField.DELETE_SUCCESS","Deleted link"))})).catch((()=>{l.toasts.error(y.default._t("LinkField.DELETE_ERROR","Failed to delete link"))}));const a={...b};delete a[e],C(a),o(d?Object.keys(a):0)},I=d||0===Object.keys(b).length,P=Boolean(M);return r.default.createElement(O.Provider,{value:{ownerID:m,ownerClass:_,ownerRelation:g}},I&&r.default.createElement(i.default,{onModalSuccess:D,onModalClosed:j,types:a,canCreate:p}),r.default.createElement("div",null," ",(()=>{const e=[];for(const d of R){var t,n,o,l,i,s;if(!b[d])continue;const f=a.hasOwnProperty(null===(t=b[d])||void 0===t?void 0:t.typeKey)?a[null===(n=b[d])||void 0===n?void 0:n.typeKey]:{};e.push(r.default.createElement(u.default,{key:d,id:d,title:null===(o=b[d])||void 0===o?void 0:o.Title,description:null===(l=b[d])||void 0===l?void 0:l.description,versionState:null===(i=b[d])||void 0===i?void 0:i.versionState,typeTitle:f.title||"",onClear:E,onClick:()=>{w(d)},canDelete:!(null===(s=b[d])||void 0===s||!s.canDelete)}))}return e})()," "),P&&r.default.createElement(s.default,{types:a,typeKey:null===(t=b[M])||void 0===t?void 0:t.typeKey,isOpen:Boolean(M),onSuccess:D,onClosed:j,linkID:M}))};b.propTypes={value:p.default.oneOfType([p.default.arrayOf(p.default.number),p.default.number]),onChange:p.default.func.isRequired,types:p.default.array.isRequired,actions:p.default.object.isRequired,isMulti:p.default.bool,canCreate:p.default.bool.isRequired,ownerID:p.default.number.isRequired,ownerClass:p.default.string.isRequired,ownerRelation:p.default.string.isRequired};var C=(0,o.compose)(l.default,(0,a.connect)(null,(e=>({actions:{toasts:(0,o.bindActionCreators)(d,e)}}))))(b);t.default=C},606:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;s(n(754));var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),o=s(n(475)),a=n(624),l=s(n(686)),i=s(n(86));function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}function s(e){return e&&e.__esModule?e:{default:e}}function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{type:t,editing:n,data:a,actions:l,onSubmit:i,...u}=e;if(!t)return!1;(0,r.useEffect)((()=>{n?l.initModal():l.reset()}),[n]);const s=a?{ID:a.FileID,Description:a.Title,TargetBlank:!!a.OpenInNew}:{};return r.default.createElement(o.default,d({isOpen:n,type:"insert-link",title:!1,bodyClassName:"modal__dialog",className:"insert-link__dialog-wrapper--internal",fileAttributes:s,onInsert:e=>{let{ID:n,Description:r,TargetBlank:o}=e;return i({FileID:n,Title:r,OpenInNew:o,typeKey:t.key},"",(()=>{}))}},u))};f.propTypes={type:l.default.isRequired,editing:i.default.bool.isRequired,data:i.default.object.isRequired,actions:i.default.object.isRequired,onClick:i.default.func.isRequired};var c=(0,a.connect)((function(){return{}}),(function(e){return{actions:{initModal:()=>e({type:"INIT_FORM_SCHEMA_STACK",payload:{formSchema:{type:"insert-link",nextType:"admin"}}}),reset:()=>e({type:"RESET"})}}}))(f);t.default=c},117:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=f(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),o=d(n(912)),a=n(852),l=d(n(872)),i=d(n(902)),u=d(n(510)),s=d(n(86));function d(e){return e&&e.__esModule?e:{default:e}}function f(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(f=function(e){return e?n:t})(e)}const c=(e,t)=>{const{schemaUrl:n}=u.default.getSection("SilverStripe\\LinkField\\Controllers\\LinkFieldController").form.linkForm,o=l.default.parse(n),s=i.default.parse(o.query);s.typeKey=e;const{ownerID:d,ownerClass:f,ownerRelation:c}=(0,r.useContext)(a.LinkFieldContext);s.ownerID=d,s.ownerClass=f,s.ownerRelation=c;for(const e of["href","path","pathname"])o[e]=`${o[e]}/${t}`;return l.default.format({...o,search:i.default.stringify(s)})},p=e=>{let{typeTitle:t,typeKey:n,linkID:a=0,isOpen:l,onSuccess:i,onClosed:u}=e;if(!n)return!1;return r.default.createElement(o.default,{title:t,isOpen:l,schemaUrl:c(n,a),identifier:"Link.EditingLinkInfo",onSubmit:async(e,t,n)=>{const r=await n();if(!r.id.match(/\/schema\/linkfield\/([0-9]+)/)){const e=r.id.match(/\/linkForm\/([0-9]+)/),t=parseInt(e[1],10);i(t)}return Promise.resolve()},onClosed:u})};p.propTypes={typeTitle:s.default.string.isRequired,typeKey:s.default.string.isRequired,linkID:s.default.number,isOpen:s.default.bool.isRequired,onSuccess:s.default.func.isRequired,onClosed:s.default.func.isRequired};var y=p;t.default=y},809:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(754)),o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),a=d(n(86)),l=d(n(820)),i=d(n(97)),u=(d(n(686)),d(n(697)));function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}function d(e){return e&&e.__esModule?e:{default:e}}const f=e=>{let{types:t,onModalSuccess:n,onModalClosed:a,canCreate:s}=e;const[d,f]=(0,o.useState)(""),c=""!==d,p=(0,l.default)("link-picker","form-control"),y=Object.values(t);return s?o.default.createElement("div",{className:p},o.default.createElement(i.default,{types:y,onSelect:e=>{f(e)}}),c&&o.default.createElement(u.default,{types:t,typeKey:d,isOpen:c,onSuccess:e=>{f(""),n(e)},onClosed:()=>{"function"==typeof a&&a(),f("")}})):o.default.createElement("div",{className:p},o.default.createElement("div",{className:"link-picker__cannot-create"},r.default._t("LinkField.CANNOT_CREATE_LINK","Cannot create link")))};t.Component=f,f.propTypes={types:a.default.array.isRequired,onModalSuccess:a.default.func.isRequired,onModalClosed:a.default.func,canCreate:a.default.bool.isRequired};var c=f;t.default=c},97:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=s(n(754)),o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),a=s(n(86)),l=n(127),i=s(n(686));function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}function s(e){return e&&e.__esModule?e:{default:e}}const d=e=>{let{types:t,onSelect:n}=e;const[a,i]=(0,o.useState)(!1);return o.default.createElement(l.Dropdown,{isOpen:a,toggle:()=>i((e=>!e)),className:"link-picker__menu"},o.default.createElement(l.DropdownToggle,{className:"link-picker__menu-toggle font-icon-plus-1",caret:!0},r.default._t("LinkField.ADD_LINK","Add Link")),o.default.createElement(l.DropdownMenu,null,t.map((e=>{let{key:t,title:r}=e;return o.default.createElement(l.DropdownItem,{key:t,onClick:()=>n(t)},r)}))))};d.propTypes={types:a.default.arrayOf(i.default).isRequired,onSelect:a.default.func.isRequired};var f=d;t.default=f},734:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=u(n(820)),o=u(n(754)),a=u(n(363)),l=u(n(86)),i=n(127);function u(e){return e&&e.__esModule?e:{default:e}}const s=e=>t=>{t.nativeEvent.stopImmediatePropagation(),t.preventDefault(),t.nativeEvent.preventDefault(),t.stopPropagation(),e&&e()},d=e=>{let{id:t,title:n,description:l,versionState:u,typeTitle:d,onClear:f,onClick:c,canDelete:p}=e;const y={"link-picker__link":!0,"form-control":!0};u&&(y[` link-picker__link--${u}`]=!0),n&&n.length>25&&(n=n.substring(0,25)+"...");const v=(0,r.default)(y);return a.default.createElement("div",{className:v},a.default.createElement(i.Button,{className:"link-picker__button font-icon-link",color:"secondary",onClick:s(c)},a.default.createElement("div",{className:"link-picker__link-detail"},a.default.createElement("div",{className:"link-picker__title"},a.default.createElement("span",{className:"link-picker__title-text"},n),(e=>{let t="",n="";if("draft"===e)t=o.default._t("LinkField.LINK_DRAFT_TITLE","Link has draft changes"),n=o.default._t("LinkField.LINK_DRAFT_LABEL","Draft");else{if("modified"!==e)return null;t=o.default._t("LinkField.LINK_MODIFIED_TITLE","Link has unpublished changes"),n=o.default._t("LinkField.LINK_MODIFIED_LABEL","Modified")}const l=(0,r.default)("badge",`status-${e}`);return a.default.createElement("span",{className:l,title:t},n)})(u)),a.default.createElement("small",{className:"link-picker__type"},d,": ",a.default.createElement("span",{className:"link-picker__url"},l)))),p&&a.default.createElement(i.Button,{className:"link-picker__clear",color:"link",onClick:s((()=>f(t)))},o.default._t("LinkField.CLEAR","Clear")))};d.propTypes={id:l.default.number.isRequired,title:l.default.string,description:l.default.string,versionState:l.default.string,typeTitle:l.default.string.isRequired,onClear:l.default.func.isRequired,onClick:l.default.func.isRequired,canDelete:l.default.bool.isRequired};var f=d;t.default=f},697:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(363)),o=n(648),a=l(n(86));function l(e){return e&&e.__esModule?e:{default:e}}const i=e=>{let{types:t,typeKey:n,linkID:a=0,isOpen:l,onSuccess:i,onClosed:u}=e;if(!n)return!1;const s=t.hasOwnProperty(n)?t[n]:{},d=s&&s.hasOwnProperty("handlerName")?s.handlerName:"FormBuilderModal",f=(0,o.loadComponent)(`LinkModal.${d}`);return r.default.createElement(f,{typeTitle:s.title||"",typeKey:n,linkID:a,isOpen:l,onSuccess:i,onClosed:u})};i.propTypes={types:a.default.array.isRequired,typeKey:a.default.string.isRequired,linkID:a.default.number,isOpen:a.default.bool.isRequired,onSuccess:a.default.func.isRequired,onClosed:a.default.func.isRequired};var u=i;t.default=u},41:function(e,t,n){var r=i(n(311)),o=i(n(363)),a=i(n(691)),l=n(648);function i(e){return e&&e.__esModule?e:{default:e}}function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t{e(".js-injector-boot .entwine-linkfield").entwine({Component:null,Root:null,onmatch(){const e=this.closest(".cms-content").attr("id"),t=e?{context:e}:{},n=this.data("schema-component"),r=(0,l.loadComponent)(n,t);this.setComponent(r),this.setRoot(a.default.createRoot(this[0])),this._super(),this.refresh()},refresh(){const e=this.getProps();this.getInputField().val(e.value);const t=this.getComponent();this.getRoot().render(o.default.createElement(t,u({},e,{noHolder:!0})))},handleChange(e){this.getInputField().data("value",e),this.refresh()},getProps(){const e=this.getInputField();return{value:e.data("value"),ownerID:e.data("owner-id"),ownerClass:e.data("owner-class"),ownerRelation:e.data("owner-relation"),onChange:this.handleChange.bind(this),isMulti:this.data("is-multi")??!1,types:this.data("types")??[],canCreate:this.getInputField().data("can-create")??!1}},getInputField(){const t=this.data("field-id");return e(`#${t}`)},onunmatch(){const e=this.getRoot();e&&e.unmount()}})}))},686:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=(r=n(86))&&r.__esModule?r:{default:r};var a=o.default.shape({key:o.default.string.isRequired,title:o.default.string.isRequired});t.default=a},159:function(e){e.exports=Backend},510:function(e){e.exports=Config},42:function(e){e.exports=FieldHolder},912:function(e){e.exports=FormBuilderModal},648:function(e){e.exports=Injector},475:function(e){e.exports=InsertMediaModal},872:function(e){e.exports=NodeUrl},86:function(e){e.exports=PropTypes},363:function(e){e.exports=React},691:function(e){e.exports=ReactDomClient},624:function(e){e.exports=ReactRedux},127:function(e){e.exports=Reactstrap},827:function(e){e.exports=Redux},123:function(e){e.exports=ToastsActions},820:function(e){e.exports=classnames},754:function(e){e.exports=i18n},311:function(e){e.exports=jQuery},902:function(e){e.exports=qs}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n(274),n(41)}(); \ No newline at end of file +!function(){"use strict";var e={274:function(e,t,n){var r,o=(r=n(521))&&r.__esModule?r:{default:r};document.addEventListener("DOMContentLoaded",(()=>{(0,o.default)()}))},521:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=u(n(648)),o=u(n(809)),a=u(n(852)),l=u(n(117)),i=u(n(606));function u(e){return e&&e.__esModule?e:{default:e}}var s=()=>{r.default.component.registerMany({LinkPicker:o.default,LinkField:a.default,"LinkModal.FormBuilderModal":l.default,"LinkModal.InsertMediaModal":i.default})};t.default=s},852:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.LinkFieldContext=void 0;var r=O(n(363)),o=n(827),a=n(624),l=(n(648),m(n(42))),i=m(n(809)),u=m(n(734)),s=(m(n(686)),m(n(697))),d=O(n(123)),f=m(n(159)),c=m(n(510)),p=m(n(86)),y=m(n(754)),v=m(n(872)),k=m(n(902));function m(e){return e&&e.__esModule?e:{default:e}}function _(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(_=function(e){return e?n:t})(e)}function O(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=_(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}const g=(0,r.createContext)(null);t.LinkFieldContext=g;const h="SilverStripe\\LinkField\\Controllers\\LinkFieldController",b=e=>{var t;let{value:n=null,onChange:o,types:a=[],actions:l,isMulti:d=!1,canCreate:p,ownerID:m,ownerClass:_,ownerRelation:O}=e;const[b,C]=(0,r.useState)({}),[M,w]=(0,r.useState)(0);let R=n;Array.isArray(R)||("number"==typeof R&&0!=R&&(R=[R]),R||(R=[])),(0,r.useEffect)((()=>{if(!M&&R.length>0){const e=[];for(const t of R)e.push(`itemIDs[]=${t}`);const t=`${c.default.getSection(h).form.linkForm.dataUrl}?${e.join("&")}`;f.default.get(t).then((e=>e.json())).then((e=>{C(e)}))}}),[M,n&&n.length]);const j=()=>{w(0)},D=e=>{w(0);const t=[...R];t.includes(e)||t.push(e),o(d?t:t[0]),l.toasts.success(y.default._t("LinkField.SAVE_SUCCESS","Saved link"))},E=e=>{let t=`${c.default.getSection(h).form.linkForm.deleteUrl}/${e}`;const n=v.default.parse(t),r=k.default.parse(n.query);r.ownerID=m,r.ownerClass=_,r.ownerRelation=O,t=v.default.format({...n,search:k.default.stringify(r)}),f.default.delete(t,{},{"X-SecurityID":c.default.get("SecurityID")}).then((()=>{l.toasts.success(y.default._t("LinkField.DELETE_SUCCESS","Deleted link"))})).catch((()=>{l.toasts.error(y.default._t("LinkField.DELETE_ERROR","Failed to delete link"))}));const a={...b};delete a[e],C(a),o(d?Object.keys(a):0)},I=d||0===Object.keys(b).length,P=Boolean(M);return r.default.createElement(g.Provider,{value:{ownerID:m,ownerClass:_,ownerRelation:O}},I&&r.default.createElement(i.default,{onModalSuccess:D,onModalClosed:j,types:a,canCreate:p}),r.default.createElement("div",null," ",(()=>{const e=[];for(const d of R){var t,n,o,l,i,s;if(!b[d])continue;const f=a.hasOwnProperty(null===(t=b[d])||void 0===t?void 0:t.typeKey)?a[null===(n=b[d])||void 0===n?void 0:n.typeKey]:{};e.push(r.default.createElement(u.default,{key:d,id:d,title:null===(o=b[d])||void 0===o?void 0:o.Title,description:null===(l=b[d])||void 0===l?void 0:l.description,versionState:null===(i=b[d])||void 0===i?void 0:i.versionState,typeTitle:f.title||"",onClear:E,onClick:()=>{w(d)},canDelete:!(null===(s=b[d])||void 0===s||!s.canDelete)}))}return e})()," "),P&&r.default.createElement(s.default,{types:a,typeKey:null===(t=b[M])||void 0===t?void 0:t.typeKey,isOpen:Boolean(M),onSuccess:D,onClosed:j,linkID:M}))};b.propTypes={value:p.default.oneOfType([p.default.arrayOf(p.default.number),p.default.number]),onChange:p.default.func.isRequired,types:p.default.array.isRequired,actions:p.default.object.isRequired,isMulti:p.default.bool,canCreate:p.default.bool.isRequired,ownerID:p.default.number.isRequired,ownerClass:p.default.string.isRequired,ownerRelation:p.default.string.isRequired};var C=(0,o.compose)(l.default,(0,a.connect)(null,(e=>({actions:{toasts:(0,o.bindActionCreators)(d,e)}}))))(b);t.default=C},606:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;s(n(754));var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),o=s(n(475)),a=n(624),l=s(n(686)),i=s(n(86));function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}function s(e){return e&&e.__esModule?e:{default:e}}function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{type:t,editing:n,data:a,actions:l,onSubmit:i,...u}=e;if(!t)return!1;(0,r.useEffect)((()=>{n?l.initModal():l.reset()}),[n]);const s=a?{ID:a.FileID,Description:a.Title,TargetBlank:!!a.OpenInNew}:{};return r.default.createElement(o.default,d({isOpen:n,type:"insert-link",title:!1,bodyClassName:"modal__dialog",className:"insert-link__dialog-wrapper--internal",fileAttributes:s,onInsert:e=>{let{ID:n,Description:r,TargetBlank:o}=e;return i({FileID:n,Title:r,OpenInNew:o,typeKey:t.key},"",(()=>{}))}},u))};f.propTypes={type:l.default.isRequired,editing:i.default.bool.isRequired,data:i.default.object.isRequired,actions:i.default.object.isRequired,onClick:i.default.func.isRequired};var c=(0,a.connect)((function(){return{}}),(function(e){return{actions:{initModal:()=>e({type:"INIT_FORM_SCHEMA_STACK",payload:{formSchema:{type:"insert-link",nextType:"admin"}}}),reset:()=>e({type:"RESET"})}}}))(f);t.default=c},117:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=f(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),o=d(n(912)),a=n(852),l=d(n(872)),i=d(n(902)),u=d(n(510)),s=d(n(86));function d(e){return e&&e.__esModule?e:{default:e}}function f(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(f=function(e){return e?n:t})(e)}const c=(e,t)=>{const{schemaUrl:n}=u.default.getSection("SilverStripe\\LinkField\\Controllers\\LinkFieldController").form.linkForm,o=l.default.parse(n),s=i.default.parse(o.query);s.typeKey=e;const{ownerID:d,ownerClass:f,ownerRelation:c}=(0,r.useContext)(a.LinkFieldContext);s.ownerID=d,s.ownerClass=f,s.ownerRelation=c;for(const e of["href","path","pathname"])o[e]=`${o[e]}/${t}`;return l.default.format({...o,search:i.default.stringify(s)})},p=e=>{let{typeTitle:t,typeKey:n,linkID:a=0,isOpen:l,onSuccess:i,onClosed:u}=e;if(!n)return!1;return r.default.createElement(o.default,{title:t,isOpen:l,schemaUrl:c(n,a),identifier:"Link.EditingLinkInfo",onSubmit:async(e,t,n)=>{const r=await n();if(!r.id.match(/\/schema\/linkfield\/([0-9]+)/)){const e=r.id.match(/\/linkForm\/([0-9]+)/),t=parseInt(e[1],10);i(t)}return Promise.resolve()},onClosed:u})};p.propTypes={typeTitle:s.default.string.isRequired,typeKey:s.default.string.isRequired,linkID:s.default.number,isOpen:s.default.bool.isRequired,onSuccess:s.default.func.isRequired,onClosed:s.default.func.isRequired};var y=p;t.default=y},809:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(754)),o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),a=d(n(86)),l=d(n(820)),i=d(n(97)),u=(d(n(686)),d(n(697)));function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}function d(e){return e&&e.__esModule?e:{default:e}}const f=e=>{let{types:t,onModalSuccess:n,onModalClosed:a,canCreate:s}=e;const[d,f]=(0,o.useState)(""),c=""!==d,p=(0,l.default)("link-picker","form-control"),y=Object.values(t);return s?o.default.createElement("div",{className:p},o.default.createElement(i.default,{types:y,onSelect:e=>{f(e)}}),c&&o.default.createElement(u.default,{types:t,typeKey:d,isOpen:c,onSuccess:e=>{f(""),n(e)},onClosed:()=>{"function"==typeof a&&a(),f("")}})):o.default.createElement("div",{className:p},o.default.createElement("div",{className:"link-picker__cannot-create"},r.default._t("LinkField.CANNOT_CREATE_LINK","Cannot create link")))};t.Component=f,f.propTypes={types:a.default.array.isRequired,onModalSuccess:a.default.func.isRequired,onModalClosed:a.default.func,canCreate:a.default.bool.isRequired};var c=f;t.default=c},97:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=s(n(754)),o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}r.default=e,n&&n.set(e,r);return r}(n(363)),a=s(n(86)),l=n(127),i=s(n(686));function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}function s(e){return e&&e.__esModule?e:{default:e}}const d=e=>{let{types:t,onSelect:n}=e;const[a,i]=(0,o.useState)(!1);return o.default.createElement(l.Dropdown,{isOpen:a,toggle:()=>i((e=>!e)),className:"link-picker__menu"},o.default.createElement(l.DropdownToggle,{className:"link-picker__menu-toggle font-icon-plus-1",caret:!0},r.default._t("LinkField.ADD_LINK","Add Link")),o.default.createElement(l.DropdownMenu,null,t.map((e=>{let{key:t,title:r}=e;return o.default.createElement(l.DropdownItem,{key:t,onClick:()=>n(t)},r)}))))};d.propTypes={types:a.default.arrayOf(i.default).isRequired,onSelect:a.default.func.isRequired};var f=d;t.default=f},734:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=u(n(820)),o=u(n(754)),a=u(n(363)),l=u(n(86)),i=n(127);function u(e){return e&&e.__esModule?e:{default:e}}const s=e=>t=>{t.nativeEvent.stopImmediatePropagation(),t.preventDefault(),t.nativeEvent.preventDefault(),t.stopPropagation(),e&&e()},d=e=>{let{id:t,title:n,description:l,versionState:u,typeTitle:d,onClear:f,onClick:c,canDelete:p}=e;const y={"link-picker__link":!0,"form-control":!0};u&&(y[` link-picker__link--${u}`]=!0);const v=(0,r.default)(y);return a.default.createElement("div",{className:v},a.default.createElement(i.Button,{className:"link-picker__button font-icon-link",color:"secondary",onClick:s(c)},a.default.createElement("div",{className:"link-picker__link-detail"},a.default.createElement("div",{className:"link-picker__title"},a.default.createElement("span",{className:"link-picker__title-text"},n),(e=>{let t="",n="";if("draft"===e)t=o.default._t("LinkField.LINK_DRAFT_TITLE","Link has draft changes"),n=o.default._t("LinkField.LINK_DRAFT_LABEL","Draft");else{if("modified"!==e)return null;t=o.default._t("LinkField.LINK_MODIFIED_TITLE","Link has unpublished changes"),n=o.default._t("LinkField.LINK_MODIFIED_LABEL","Modified")}const l=(0,r.default)("badge",`status-${e}`);return a.default.createElement("span",{className:l,title:t},n)})(u)),a.default.createElement("small",{className:"link-picker__type"},d,": ",a.default.createElement("span",{className:"link-picker__url"},l)))),p&&a.default.createElement(i.Button,{className:"link-picker__clear",color:"link",onClick:s((()=>f(t)))},o.default._t("LinkField.CLEAR","Clear")))};d.propTypes={id:l.default.number.isRequired,title:l.default.string,description:l.default.string,versionState:l.default.string,typeTitle:l.default.string.isRequired,onClear:l.default.func.isRequired,onClick:l.default.func.isRequired,canDelete:l.default.bool.isRequired};var f=d;t.default=f},697:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(363)),o=n(648),a=l(n(86));function l(e){return e&&e.__esModule?e:{default:e}}const i=e=>{let{types:t,typeKey:n,linkID:a=0,isOpen:l,onSuccess:i,onClosed:u}=e;if(!n)return!1;const s=t.hasOwnProperty(n)?t[n]:{},d=s&&s.hasOwnProperty("handlerName")?s.handlerName:"FormBuilderModal",f=(0,o.loadComponent)(`LinkModal.${d}`);return r.default.createElement(f,{typeTitle:s.title||"",typeKey:n,linkID:a,isOpen:l,onSuccess:i,onClosed:u})};i.propTypes={types:a.default.array.isRequired,typeKey:a.default.string.isRequired,linkID:a.default.number,isOpen:a.default.bool.isRequired,onSuccess:a.default.func.isRequired,onClosed:a.default.func.isRequired};var u=i;t.default=u},41:function(e,t,n){var r=i(n(311)),o=i(n(363)),a=i(n(691)),l=n(648);function i(e){return e&&e.__esModule?e:{default:e}}function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t{e(".js-injector-boot .entwine-linkfield").entwine({Component:null,Root:null,onmatch(){const e=this.closest(".cms-content").attr("id"),t=e?{context:e}:{},n=this.data("schema-component"),r=(0,l.loadComponent)(n,t);this.setComponent(r),this.setRoot(a.default.createRoot(this[0])),this._super(),this.refresh()},refresh(){const e=this.getProps();this.getInputField().val(e.value);const t=this.getComponent();this.getRoot().render(o.default.createElement(t,u({},e,{noHolder:!0})))},handleChange(e){this.getInputField().data("value",e),this.refresh()},getProps(){const e=this.getInputField();return{value:e.data("value"),ownerID:e.data("owner-id"),ownerClass:e.data("owner-class"),ownerRelation:e.data("owner-relation"),onChange:this.handleChange.bind(this),isMulti:this.data("is-multi")??!1,types:this.data("types")??[],canCreate:this.getInputField().data("can-create")??!1}},getInputField(){const t=this.data("field-id");return e(`#${t}`)},onunmatch(){const e=this.getRoot();e&&e.unmount()}})}))},686:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=(r=n(86))&&r.__esModule?r:{default:r};var a=o.default.shape({key:o.default.string.isRequired,title:o.default.string.isRequired});t.default=a},159:function(e){e.exports=Backend},510:function(e){e.exports=Config},42:function(e){e.exports=FieldHolder},912:function(e){e.exports=FormBuilderModal},648:function(e){e.exports=Injector},475:function(e){e.exports=InsertMediaModal},872:function(e){e.exports=NodeUrl},86:function(e){e.exports=PropTypes},363:function(e){e.exports=React},691:function(e){e.exports=ReactDomClient},624:function(e){e.exports=ReactRedux},127:function(e){e.exports=Reactstrap},827:function(e){e.exports=Redux},123:function(e){e.exports=ToastsActions},820:function(e){e.exports=classnames},754:function(e){e.exports=i18n},311:function(e){e.exports=jQuery},902:function(e){e.exports=qs}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n(274),n(41)}(); \ No newline at end of file diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css index e466a480..5b867d6f 100644 --- a/client/dist/styles/bundle.css +++ b/client/dist/styles/bundle.css @@ -1 +1 @@ -.link-picker__link,.link-picker{display:flex;height:auto;width:100%;min-height:54px;background:#fff;padding:0}.link-picker{align-items:stretch;cursor:pointer;box-shadow:none}.link-picker:not(:last-child){margin-bottom:10px}.link-picker.font-icon-link::before{margin:.76925rem}.link-picker__cannot-create{cursor:default;flex-grow:1;padding:16px 13px}.link-picker__menu{flex-grow:1}.link-picker__menu-toggle{width:100%;height:100%;text-align:left}.link-picker__menu-toggle::before{padding:.76925rem}.link-picker__link{align-items:center;text-align:left;margin-right:0;justify-content:space-between;position:relative}.link-picker__link:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.link-picker__link:not(:first-child){border-top:0;border-top-left-radius:0;border-top-right-radius:0}.link-picker__link:hover,.link-picker__link:focus{background:#eef0f4;text-decoration:none;color:inherit}.link-picker__link::before{top:29px;left:32px;content:" ";position:absolute;border:1px solid #cf3f00;border-radius:100%;bottom:6px;box-shadow:0 0 1px .5px #fff;display:block;height:8px;width:8px;z-index:1}.link-picker__link--draft::before{background-color:#ff7f22}.link-picker__link--modified::before{background-color:#fff7f0}.link-picker__link--unsaved::before,.link-picker__link--published::before{display:none}.link-picker__button{display:flex;align-items:center;flex-grow:1;height:100%;text-align:left;border:none;margin-right:0}.link-picker__button::before{font-size:1.231rem;padding:.76925rem;margin-right:6px;flex-grow:0}.link-picker__link-detail{flex-grow:1}.link-picker__clear{flex-grow:0}.link-picker__url{color:#0071c4}.link-picker__title-text{margin-right:5px}.link-picker__title .badge{color:#cf3f00;background-color:#fff2ea;padding:2px 3px 2px 4px} +.link-picker__link,.link-picker{display:flex;height:auto;width:100%;min-height:54px;background:#fff;padding:0}.link-picker{align-items:stretch;cursor:pointer;box-shadow:none}.link-picker:not(:last-child){margin-bottom:10px}.link-picker.font-icon-link::before{margin:.76925rem}.link-picker__cannot-create{cursor:default;flex-grow:1;padding:16px 13px}.link-picker__menu{flex-grow:1}.link-picker__menu-toggle{width:100%;height:100%;text-align:left}.link-picker__menu-toggle::before{padding:.76925rem}.link-picker__link{align-items:center;text-align:left;margin-right:0;justify-content:space-between;position:relative}.link-picker__link:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.link-picker__link:not(:first-child){border-top:0;border-top-left-radius:0;border-top-right-radius:0}.link-picker__link:hover,.link-picker__link:focus{background:#eef0f4;text-decoration:none;color:inherit}.link-picker__link::before{top:29px;left:32px;content:" ";position:absolute;border:1px solid #cf3f00;border-radius:100%;bottom:6px;box-shadow:0 0 1px .5px #fff;display:block;height:8px;width:8px;z-index:1}.link-picker__link--draft::before{background-color:#ff7f22}.link-picker__link--modified::before{background-color:#fff7f0}.link-picker__link--unsaved::before,.link-picker__link--published::before{display:none}.link-picker__button{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0;text-align:left;border:none;margin-right:0}.link-picker__button[class*=font-icon-]::before{position:absolute;font-size:1.231rem;padding:.76925rem;margin-right:6px;flex-grow:0}.link-picker__link-detail{flex-grow:1;width:100%;padding-left:3.5rem}.link-picker__clear{flex-grow:0}.link-picker__url{color:#0071c4}.link-picker__type,.link-picker__title-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.link-picker__title{display:flex;align-items:center;width:100%}.link-picker__title .badge{color:#cf3f00;background-color:#fff2ea;padding:2px 3px 2px 4px}.link-picker__title-text{min-width:0;margin-right:5px}.link-picker__type{width:100%} diff --git a/client/src/components/LinkPicker/LinkPicker.scss b/client/src/components/LinkPicker/LinkPicker.scss index 3126e0ff..a9468d17 100644 --- a/client/src/components/LinkPicker/LinkPicker.scss +++ b/client/src/components/LinkPicker/LinkPicker.scss @@ -106,10 +106,13 @@ align-items: center; flex-grow: 1; height: 100%; + min-width: 0; text-align: left; border: none; margin-right: 0; - &::before { + + &[class*="font-icon-"]::before { + position: absolute; font-size: 1.231rem; padding: .76925rem; margin-right: 6px; @@ -119,6 +122,8 @@ .link-picker__link-detail { flex-grow: 1; + width: 100%; + padding-left: 3.5rem; } .link-picker__clear { @@ -129,12 +134,32 @@ color: $link-color; } +%cutoff-text { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.link-picker__title { + display: flex; + align-items: center; + width: 100%; + + .badge { + color: #cf3f00; + background-color: #fff2ea; + padding: 2px 3px 2px 4px; + } +} + .link-picker__title-text { + min-width: 0; margin-right: 5px; + @extend %cutoff-text; } -.link-picker__title .badge { - color: #cf3f00; - background-color: #fff2ea; - padding: 2px 3px 2px 4px; +.link-picker__type { + width: 100%; + @extend %cutoff-text; } diff --git a/client/src/components/LinkPicker/LinkPickerTitle.js b/client/src/components/LinkPicker/LinkPickerTitle.js index a2d3a290..d7ad3918 100644 --- a/client/src/components/LinkPicker/LinkPickerTitle.js +++ b/client/src/components/LinkPicker/LinkPickerTitle.js @@ -46,9 +46,6 @@ const LinkPickerTitle = ({ if (versionState) { classes[` link-picker__link--${versionState}`] = true; } - if (title && title.length > 25) { - title = title.substring(0, 25) + '...'; - } const className = classnames(classes); return