From 70da1c9ba75eb25f9940fef024e2145bcf573885 Mon Sep 17 00:00:00 2001 From: gearsdigital Date: Fri, 12 Aug 2022 09:12:04 +0200 Subject: [PATCH] fix: handle anchor only links correctly --- README.md | 5 +++++ index.js | 2 +- .../dialogs/EnhancedToolbarLinkDialog.vue | 15 +++++++++++---- .../dialogs/EnhancedToolbarWriterLinkDialog.vue | 17 ++++++++++++----- 4 files changed, 29 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 3134922..073611b 100755 --- a/README.md +++ b/README.md @@ -65,6 +65,11 @@ and it works with default textareas as well.

Yes, absolutely. Just write (or paste) the URL into the Link field.

+
+Can I create anchor only links? +

It is possible to have anchor only links if you want to jump to a specific part of the same page you're currently editing - just leave the Link-Field empty and fill the Anchor-Field.

+
+
Can I customize the result list page title?

Yes, you can use the option title to build a title that fit your needs by using Kirby Query Language.

diff --git a/index.js b/index.js index 4b6c87d..dbbd8ec 100644 --- a/index.js +++ b/index.js @@ -1 +1 @@ -(function(){"use strict";function o(t,e,i,n,r,h,c,S){var l=typeof t=="function"?t.options:t;e&&(l.render=e,l.staticRenderFns=i,l._compiled=!0),n&&(l.functional=!0),h&&(l._scopeId="data-v-"+h);var s;if(c?(s=function(a){a=a||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!a&&typeof __VUE_SSR_CONTEXT__<"u"&&(a=__VUE_SSR_CONTEXT__),r&&r.call(this,a),a&&a._registeredComponents&&a._registeredComponents.add(c)},l._ssrRegister=s):r&&(s=S?function(){r.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:r),s)if(l.functional){l._injectStyles=s;var F=l.render;l.render=function(D,u){return s.call(u),F(D,u)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,s):[s]}return{exports:t,options:l}}const g={data(){return{link:{href:null,title:null,target:!1,text:null,anchor:null}}},computed:{fields(){return{href:{label:this.$t("link"),type:"autosuggest",id:this.link.href},text:{label:this.$t("link.text"),type:"text",icon:"title"},title:{label:this.$t("title"),type:"text",counter:!1,icon:"title",width:"1/2"},anchor:{label:this.$t("gearsdigital.enhanced-toolbar-link-dialog.anchor.title"),type:"text",counter:!1,before:"#",width:"1/2"},target:{label:this.$t("open.newWindow"),type:"toggle",text:[this.$t("no"),this.$t("yes")]}}},kirbytext(){return this.$config.kirbytext}},methods:{open(t,e){this.link.text=e,this.$refs.dialog.open(),this.addListener()},close(){this.$emit("cancel"),this.removeListener()},submit(){this.$emit("submit",this.kirbytext?this.createKirbytext():this.createMarkdown()),this.link={href:null,title:null,target:!1,text:null,anchor:null},this.$refs.dialog.close()},createKirbytext(){const t=[];return t.push(`link: ${this.appendAnchor(this.link.href)}`),this.link.text&&this.link.text.length>0&&t.push(`text: ${this.link.text}`),this.link.title&&this.link.title.length>0&&t.push(`title: ${this.link.title}`),this.link.target&&t.push("target: _blank"),`(${t.join(" ")})`},createMarkdown(){return this.link.text.length>0?`[${this.link.text}](${this.link.href})`:`<${this.link.href}>`},appendAnchor(t){let e=this.$refs.dialog.model.anchor;return e.startsWith("#")?t+e:e?t+"#"+e:t},listener(t){t.detail.page!==null&&(this.link={...this.link,href:t.detail.page.link,title:t.detail.page.text})},addListener(){document.addEventListener("enhanced-toolbar-link-dialog/page",this.listener)},removeListener(){document.removeEventListener("enhanced-toolbar-link-dialog/page",this.listener)}}};var f=function(){var e=this,i=e._self._c;return i("k-form-dialog",{ref:"dialog",attrs:{fields:e.fields,"submit-button":e.$t("confirm"),size:"medium"},on:{close:e.close,submit:e.submit},model:{value:e.link,callback:function(n){e.link=n},expression:"link"}})},p=[],_=o(g,f,p,!1,null,null,null,null);const m=_.exports,N="",k={data(){return{link:{href:null,title:null,target:!1,anchor:null}}},computed:{fields(){return{href:{label:this.$t("link"),type:"autosuggest",id:this.link.href},title:{label:this.$t("title"),type:"text",counter:!1,icon:"title"},anchor:{label:this.$t("gearsdigital.enhanced-toolbar-link-dialog.anchor.title"),type:"text",counter:!1,before:"#",width:"1/2"},target:{label:this.$t("open.newWindow"),type:"toggle",text:[this.$t("no"),this.$t("yes")],width:"1/2"}}}},methods:{open(t){this.link={title:null,target:!1,anchor:null,...this.extendWithAnchor(t)},this.link.target=Boolean(this.link.target),this.$refs.dialog.open(),this.addListener()},close(){this.$emit("close"),this.removeListener()},submit(){this.link.href=this.appendAnchor(this.link.href),this.$emit("submit",{...this.link,target:this.link.target?"_blank":null}),this.$refs.dialog.close()},extendWithAnchor(t){var i,n;if(!t.href)return t;const e=t.href.split("#");return{...t,href:(i=e[0])!=null?i:null,anchor:(n=e[1])!=null?n:null}},appendAnchor(t){let e=this.$refs.dialog.model.anchor;return e&&e.startsWith("#")?t+e:e&&e?t+"#"+e:t},listener(t){t.detail.page===null?this.link={href:null,title:null,target:!1}:this.link={...this.link,href:t.detail.page.link,title:t.detail.page.text}},addListener(){document.addEventListener("enhanced-toolbar-link-dialog/page",this.listener)},removeListener(){document.removeEventListener("enhanced-toolbar-link-dialog/page",this.listener)}}};var b=function(){var e=this,i=e._self._c;return i("k-form-dialog",{ref:"dialog",attrs:{fields:e.fields,"submit-button":e.$t("confirm"),size:"medium"},on:{close:e.close,submit:e.submit},model:{value:e.link,callback:function(n){e.link=n},expression:"link"}})},$=[],v=o(k,b,$,!1,null,null,null,null);const x=v.exports,z="",y={name:"EnhancedToolbarDropdown",props:{pages:{type:Array},pagination:{type:{page:Number,total:Number,limit:Number}}},data(){return{open:!1}},watch:{pages(t){this.open=t.length>0}},methods:{select(t){this.$emit("select",t),this.open=!1}}};var w=function(){var e=this,i=e._self._c;return i("dialog",{attrs:{open:e.open}},[e._l(e.pages,function(n){return i("k-item",{key:n.id,attrs:{text:n.text,image:n.image,info:n.id},on:{click:function(r){return e.select(n)}}})}),i("k-pagination",{attrs:{align:"center",details:!0,page:e.pagination.page,total:e.pagination.total,limit:e.pagination.limit},on:{paginate:function(n){return e.$emit("paginate",n)}}})],2)},T=[],E=o(y,w,T,!1,null,"ce5338b1",null,null);const L=E.exports,K="",C={name:"EnhancedToolbarAutosuggest",components:{EnhancedToolbarDropdown:L},props:{id:String,label:String},data(){return{searchTerm:"",pagination:{},pages:[],selectedPage:[],url:""}},watch:{selectedPage(t){t.length||document.dispatchEvent(new CustomEvent("enhanced-toolbar-link-dialog/page",{detail:{page:null}}))}},async created(){this.updateSearch=this.$helper.debounce(this.updateSearch,200),this.id&&await this.$api.get("enhanced-toolbar-link-dialog/page",{id:this.id}).then(t=>{this.selectedPage=[t]}).catch(t=>{t.code===404&&(this.url=this.id)})},methods:{async fetch(t,e){const i=(e==null?void 0:e.page)||1;if(!this.searchTerm){this.pages=[];return}if(this.searchTerm.startsWith("http")||this.searchTerm.startsWith("/")){this.pages=[];return}const n=await this.$api.get("enhanced-toolbar-link-dialog/pages",{q:this.searchTerm,page:i});this.pages=n.data,this.pagination=n.pagination},updateSearch(t){this.searchTerm=t,this.fetch(),this.$emit("input",t)},selectPage(t){document.dispatchEvent(new CustomEvent("enhanced-toolbar-link-dialog/page",{detail:{page:t}})),this.selectedPage=[t],this.url=""}}};var P=function(){var e=this,i=e._self._c;return i("div",{staticClass:"enhanced-toolbar-autosuggest-field"},[e.selectedPage.length===0?i("k-text-field",{attrs:{counter:!1,icon:"file-document",label:e.label,placeholder:"Enter a search term\u2026",name:"text"},on:{input:e.updateSearch},model:{value:e.url,callback:function(n){e.url=n},expression:"url"}}):e._e(),e.selectedPage.length===1?i("k-tags-field",{attrs:{counter:!1,icon:"file-document",label:e.label,name:"tags",type:"tags",max:"1"},model:{value:e.selectedPage,callback:function(n){e.selectedPage=n},expression:"selectedPage"}}):e._e(),i("enhanced-toolbar-dropdown",{attrs:{pages:e.pages,pagination:e.pagination},on:{select:e.selectPage,paginate:function(n){return e.fetch(e.searchTerm,n)}}})],1)},W=[],A=o(C,P,W,!1,null,"130860e5",null,null);const R=A.exports;panel.plugin("gearsdigital/enhanced-toolbar-link-dialog",{components:{"k-toolbar-link-dialog":{extends:m},"k-writer":{extends:"k-writer",components:{"k-writer-link-dialog":x}}},fields:{autosuggest:R}})})(); +(function(){"use strict";function o(t,e,i,n,r,h,c,S){var l=typeof t=="function"?t.options:t;e&&(l.render=e,l.staticRenderFns=i,l._compiled=!0),n&&(l.functional=!0),h&&(l._scopeId="data-v-"+h);var s;if(c?(s=function(a){a=a||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!a&&typeof __VUE_SSR_CONTEXT__<"u"&&(a=__VUE_SSR_CONTEXT__),r&&r.call(this,a),a&&a._registeredComponents&&a._registeredComponents.add(c)},l._ssrRegister=s):r&&(s=S?function(){r.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:r),s)if(l.functional){l._injectStyles=s;var F=l.render;l.render=function(D,u){return s.call(u),F(D,u)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,s):[s]}return{exports:t,options:l}}const g={data(){return{link:{href:null,title:null,target:!1,text:null,anchor:null}}},computed:{fields(){return{href:{label:this.$t("link"),type:"autosuggest",id:this.link.href},text:{label:this.$t("link.text"),type:"text",icon:"title"},title:{label:this.$t("title"),type:"text",counter:!1,icon:"title",width:"1/2"},anchor:{label:this.$t("gearsdigital.enhanced-toolbar-link-dialog.anchor.title"),type:"text",counter:!1,before:"#",width:"1/2"},target:{label:this.$t("open.newWindow"),type:"toggle",text:[this.$t("no"),this.$t("yes")]}}},kirbytext(){return this.$config.kirbytext}},methods:{open(t,e){this.link.text=e,this.$refs.dialog.open(),this.addListener()},close(){this.$emit("cancel"),this.removeListener()},submit(){this.$emit("submit",this.kirbytext?this.createKirbytext():this.createMarkdown()),this.link={href:null,title:null,target:!1,text:null,anchor:null},this.$refs.dialog.close()},createKirbytext(){const t=[];return t.push(`link: ${this.appendAnchor(this.link.href)}`),this.link.text&&this.link.text.length>0&&t.push(`text: ${this.link.text}`),this.link.title&&this.link.title.length>0&&t.push(`title: ${this.link.title}`),this.link.target&&t.push("target: _blank"),`(${t.join(" ")})`},createMarkdown(){return this.link.text.length>0?`[${this.link.text}](${this.link.href})`:`<${this.link.href}>`},appendAnchor(t){let e=this.$refs.dialog.model.anchor;return e?(t||(t=""),e.startsWith("#")?t+e:t+"#"+e):t},listener(t){t.detail.page!==null&&(this.link={...this.link,href:t.detail.page.link,title:t.detail.page.text})},addListener(){document.addEventListener("enhanced-toolbar-link-dialog/page",this.listener)},removeListener(){document.removeEventListener("enhanced-toolbar-link-dialog/page",this.listener)}}};var f=function(){var e=this,i=e._self._c;return i("k-form-dialog",{ref:"dialog",attrs:{fields:e.fields,"submit-button":e.$t("confirm"),size:"medium"},on:{close:e.close,submit:e.submit},model:{value:e.link,callback:function(n){e.link=n},expression:"link"}})},p=[],_=o(g,f,p,!1,null,null,null,null);const m=_.exports,N="",k={data(){return{link:{href:null,title:null,target:!1,anchor:null}}},computed:{fields(){return{href:{label:this.$t("link"),type:"autosuggest",id:this.link.href},title:{label:this.$t("title"),type:"text",counter:!1,icon:"title"},anchor:{label:this.$t("gearsdigital.enhanced-toolbar-link-dialog.anchor.title"),type:"text",counter:!1,before:"#",width:"1/2"},target:{label:this.$t("open.newWindow"),type:"toggle",text:[this.$t("no"),this.$t("yes")],width:"1/2"}}}},methods:{open(t){this.link={title:null,target:!1,anchor:null,...this.extendWithAnchor(t)},this.link.target=Boolean(this.link.target),this.$refs.dialog.open(),this.addListener()},close(){this.$emit("close"),this.removeListener()},submit(){this.link.href=this.appendAnchor(this.link.href),this.$emit("submit",{...this.link,target:this.link.target?"_blank":null}),this.$refs.dialog.close()},extendWithAnchor(t){var i,n;if(!t.href)return t;const e=t.href.split("#");return{...t,href:(i=e[0])!=null?i:null,anchor:(n=e[1])!=null?n:null}},appendAnchor(t){let e=this.$refs.dialog.model.anchor;return e?(t||(t=""),e.startsWith("#")?t+e:t+"#"+e):t},listener(t){t.detail.page===null?this.link={href:null,title:null,target:!1}:this.link={...this.link,href:t.detail.page.link,title:t.detail.page.text}},addListener(){document.addEventListener("enhanced-toolbar-link-dialog/page",this.listener)},removeListener(){document.removeEventListener("enhanced-toolbar-link-dialog/page",this.listener)}}};var b=function(){var e=this,i=e._self._c;return i("k-form-dialog",{ref:"dialog",attrs:{fields:e.fields,"submit-button":e.$t("confirm"),size:"medium"},on:{close:e.close,submit:e.submit},model:{value:e.link,callback:function(n){e.link=n},expression:"link"}})},$=[],v=o(k,b,$,!1,null,null,null,null);const x=v.exports,z="",y={name:"EnhancedToolbarDropdown",props:{pages:{type:Array},pagination:{type:{page:Number,total:Number,limit:Number}}},data(){return{open:!1}},watch:{pages(t){this.open=t.length>0}},methods:{select(t){this.$emit("select",t),this.open=!1}}};var w=function(){var e=this,i=e._self._c;return i("dialog",{attrs:{open:e.open}},[e._l(e.pages,function(n){return i("k-item",{key:n.id,attrs:{text:n.text,image:n.image,info:n.id},on:{click:function(r){return e.select(n)}}})}),i("k-pagination",{attrs:{align:"center",details:!0,page:e.pagination.page,total:e.pagination.total,limit:e.pagination.limit},on:{paginate:function(n){return e.$emit("paginate",n)}}})],2)},T=[],E=o(y,w,T,!1,null,"ce5338b1",null,null);const L=E.exports,K="",C={name:"EnhancedToolbarAutosuggest",components:{EnhancedToolbarDropdown:L},props:{id:String,label:String},data(){return{searchTerm:"",pagination:{},pages:[],selectedPage:[],url:""}},watch:{selectedPage(t){t.length||document.dispatchEvent(new CustomEvent("enhanced-toolbar-link-dialog/page",{detail:{page:null}}))}},async created(){this.updateSearch=this.$helper.debounce(this.updateSearch,200),this.id&&await this.$api.get("enhanced-toolbar-link-dialog/page",{id:this.id}).then(t=>{this.selectedPage=[t]}).catch(t=>{t.code===404&&(this.url=this.id)})},methods:{async fetch(t,e){const i=(e==null?void 0:e.page)||1;if(!this.searchTerm){this.pages=[];return}if(this.searchTerm.startsWith("http")||this.searchTerm.startsWith("/")){this.pages=[];return}const n=await this.$api.get("enhanced-toolbar-link-dialog/pages",{q:this.searchTerm,page:i});this.pages=n.data,this.pagination=n.pagination},updateSearch(t){this.searchTerm=t,this.fetch(),this.$emit("input",t)},selectPage(t){document.dispatchEvent(new CustomEvent("enhanced-toolbar-link-dialog/page",{detail:{page:t}})),this.selectedPage=[t],this.url=""}}};var P=function(){var e=this,i=e._self._c;return i("div",{staticClass:"enhanced-toolbar-autosuggest-field"},[e.selectedPage.length===0?i("k-text-field",{attrs:{counter:!1,icon:"file-document",label:e.label,placeholder:"Enter a search term\u2026",name:"text"},on:{input:e.updateSearch},model:{value:e.url,callback:function(n){e.url=n},expression:"url"}}):e._e(),e.selectedPage.length===1?i("k-tags-field",{attrs:{counter:!1,icon:"file-document",label:e.label,name:"tags",type:"tags",max:"1"},model:{value:e.selectedPage,callback:function(n){e.selectedPage=n},expression:"selectedPage"}}):e._e(),i("enhanced-toolbar-dropdown",{attrs:{pages:e.pages,pagination:e.pagination},on:{select:e.selectPage,paginate:function(n){return e.fetch(e.searchTerm,n)}}})],1)},W=[],A=o(C,P,W,!1,null,"130860e5",null,null);const R=A.exports;panel.plugin("gearsdigital/enhanced-toolbar-link-dialog",{components:{"k-toolbar-link-dialog":{extends:m},"k-writer":{extends:"k-writer",components:{"k-writer-link-dialog":x}}},fields:{autosuggest:R}})})(); diff --git a/src/components/dialogs/EnhancedToolbarLinkDialog.vue b/src/components/dialogs/EnhancedToolbarLinkDialog.vue index 445c1ba..67ea78a 100755 --- a/src/components/dialogs/EnhancedToolbarLinkDialog.vue +++ b/src/components/dialogs/EnhancedToolbarLinkDialog.vue @@ -119,14 +119,21 @@ export default { appendAnchor(href) { let anchor = this.$refs.dialog.model.anchor; + if (!anchor) { + return href; + } + + // ensure href to be defined, otherwise it would get concatenated + // to "undefined + #anchor" below + if (!href) { + href = ""; + } + if (anchor.startsWith("#")) { return href + anchor; } - if (anchor) { - return href + "#" + anchor; - } - return href; + return href + "#" + anchor; }, listener(evt) { if (evt.detail.page !== null) { diff --git a/src/components/dialogs/EnhancedToolbarWriterLinkDialog.vue b/src/components/dialogs/EnhancedToolbarWriterLinkDialog.vue index 0ce4e76..c6b91cf 100755 --- a/src/components/dialogs/EnhancedToolbarWriterLinkDialog.vue +++ b/src/components/dialogs/EnhancedToolbarWriterLinkDialog.vue @@ -98,14 +98,21 @@ export default { appendAnchor(href) { let anchor = this.$refs.dialog.model.anchor; - if (anchor && anchor.startsWith("#")) { - return href + anchor; + if (!anchor) { + return href; } - if (anchor && anchor) { - return href + "#" + anchor; + // ensure href to be defined, otherwise it would get concatenated + // to "undefined + #anchor" below + if (!href) { + href = ""; } - return href; + + if (anchor.startsWith("#")) { + return href + anchor; + } + + return href + "#" + anchor; }, listener(evt) { if (evt.detail.page === null) {