diff --git a/README.txt b/README.txt index d8c304602..c2d771f6c 100644 --- a/README.txt +++ b/README.txt @@ -6,7 +6,7 @@ Donate link: https://www.groundhogg.io/pricing/ Requires at least: 5.9 Tested up to: 6.5 Requires PHP: 7.1 -Stable tag: 3.5 +Stable tag: 3.5.0.1 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl.md @@ -349,7 +349,10 @@ You can purchase a premium plan for access to support and our premium extensions == Changelog == -= 3.5 (2024-08-05) = += 3.5.0.1 (2024-08-14) = +* FIXED Pickers not appearing full width + += 3.5 (2024-08-14) = * ADDED New social networks for the social icons block: Threads, GitHub, Discord, Rumble, Truth Social, and Odysee * ADDED Reports API to the Rest API Playground * ADDED Automated weekly and monthly emailed overview reports to admins. diff --git a/assets/js/admin/make-el.js b/assets/js/admin/make-el.js index 89c00faeb..89cabe6a6 100644 --- a/assets/js/admin/make-el.js +++ b/assets/js/admin/make-el.js @@ -1196,6 +1196,7 @@ id, className: `gh-picker-container`, tabindex: '0', + ...attributes, }, Div({ id: `${id}-picker`, className: `gh-picker ${ optionsVisible() ? 'options-visible' : '' }`, @@ -1230,7 +1231,6 @@ }, 'picker focused') }) }, - ...attributes, }, [ Div({ className: `gh-picker-selected ${ multiple ? 'multiple' : 'single' }`, diff --git a/assets/js/admin/make-el.min.js b/assets/js/admin/make-el.min.js index 1cde663c9..d5a26de8b 100644 --- a/assets/js/admin/make-el.min.js +++ b/assets/js/admin/make-el.min.js @@ -1,3 +1,3 @@ ($=>{const clickedIn=(e,selector)=>{var el=e.tagName?e:e.srcElement||e.target;if(el&&el.matches(selector)){return el}else{while(el=el.parentNode){if(typeof el.matches!=="undefined"&&el.matches(selector)){return el}}}return false};function isString(string){return typeof string==="string"}function isNumeric(n){return!isNaN(parseFloat(n))&&isFinite(n)}const AttributeHandlers={required:(el,value)=>{el.required=value},autofocus:(el,value)=>{el.autofocus=value},value:(el,value)=>{el.value=value},className:(el,attribute)=>{if(isString(attribute)){attribute=attribute.split(" ").map(c=>c.trim()).filter(c=>c)}el.classList.add(...attribute)},eventHandlers:(el,events)=>{for(let event in events){el.addEventListener(event,events[event])}},onInput:(el,func)=>AttributeHandlers.eventHandlers(el,{input:func}),onChange:(el,func)=>AttributeHandlers.eventHandlers(el,{change:func}),onFocus:(el,func)=>AttributeHandlers.eventHandlers(el,{focus:func}),onClick:(el,func)=>AttributeHandlers.eventHandlers(el,{click:func}),style:(el,style)=>{if(isString(style)){el.style=style;return}for(let attribute in style){if(attribute.startsWith("--")){el.style.setProperty(attribute,style[attribute]);continue}el.style[attribute]=style[attribute]}},onCreate:(el,func)=>func(el)};function htmlToElement(html){var template=document.createElement("template");html=html.trim();template.innerHTML=html;return template.content.firstChild}function htmlToElements(html){var template=document.createElement("template");template.innerHTML=html;return template.content.childNodes}const makeEl=(tagName,attributes,children=null)=>{let el=tagName==="fragment"?document.createDocumentFragment():document.createElement(tagName);if(children!==null){if(!Array.isArray(children)){if(children instanceof NodeList){children=[...children]}else{children=[children]}}children.forEach(child=>{if(!child){return}child=maybeCall(child);if(isString(child)){let _children=htmlToElements(child);while(_children.length){el.appendChild(_children[0])}return}el.appendChild(child)})}for(let attributeName in attributes){if(attributes[attributeName]===false){continue}if(AttributeHandlers.hasOwnProperty(attributeName)){AttributeHandlers[attributeName](el,attributes[attributeName]);continue}if(attributeName.startsWith("data")){let dataName=attributeName.replace(/^data(.+)/,"$1");dataName=dataName.charAt(0).toLowerCase()+dataName.slice(1);el.dataset[dataName]=attributes[attributeName];continue}if(attributeName.match(/^on[A-Z]/)){let eventName=attributeName.replace(/^on(.+)/,"$1");eventName=eventName.charAt(0).toLowerCase()+eventName.slice(1);el.addEventListener(eventName,attributes[attributeName]);continue}el.setAttribute(attributeName,attributes[attributeName])}return el};const Input=attributes=>{return makeEl("input",{type:"text",...attributes})};const Textarea=attributes=>{return makeEl("textarea",{...attributes})};const Select=attributes=>{let{options:options={},selected:selected="",onChange:onChange=e=>{},...rest}=attributes;if(!Array.isArray(options)){options=Object.keys(options).map(key=>({value:key,text:options[key]}))}if(!Array.isArray(selected)){selected=[selected]}options=options.map(opt=>typeof opt==="string"?{value:opt,text:opt}:opt).map(({value,text})=>makeEl("option",{value:value,selected:selected.includes(value)},text));return makeEl("select",{...rest,onChange:e=>{if(rest.multiple){e.target.values=e.target.querySelectorAll("option:checked").map(el=>el.value)}onChange(e)}},options)};const Button=(attributes,children)=>{return makeEl("button",{...attributes},children)};const Toggle=({onLabel:onLabel="On",offLabel:offLabel="Off",...atts})=>{return makeEl("label",{className:"gh-switch"},[Input({...atts,type:"checkbox"}),` ${onLabel} - ${offLabel}`])};const Div=(attributes={},children=[])=>{return makeEl("div",attributes,children)};const Dashicon=(icon,children=null)=>{return makeEl("span",{className:`dashicons dashicons-${icon}`},children)};const Fragment=(children,atts={})=>{return makeEl("fragment",atts,children)};const Span=(attributes={},children=[])=>{return makeEl("span",attributes,children)};const Label=(attributes={},children=[])=>{return makeEl("label",attributes,children)};const InputRepeater=({id:id="",onChange:onChange=()=>{},rows:rows=[],cells:cells=[],sortable:sortable=false,fillRow:fillRow=()=>Array(cells.length).fill(""),maxRows:maxRows=0})=>{const handleChange=rows=>{onChange(rows);morphdom(document.getElementById(id),Repeater())};const removeRow=rowIndex=>{rows.splice(rowIndex,1);handleChange(rows)};const addRow=()=>{rows.push(fillRow());handleChange(rows)};const onCellChange=(rowIndex,cellIndex,value)=>{rows[rowIndex][cellIndex]=value;handleChange(rows)};const RepeaterRow=(row,rowIndex)=>Div({className:"gh-input-repeater-row",dataRow:rowIndex},[...cells.map((cellCallback,cellIndex)=>cellCallback({id:`${id}-cell-${rowIndex}-${cellIndex}`,value:row[cellIndex]??"",dataRow:rowIndex,dataCell:cellIndex,onChange:e=>onCellChange(rowIndex,cellIndex,e.target.value),setValue:value=>onCellChange(rowIndex,cellIndex,value)},row)),sortable?makeEl("span",{className:"handle",dataRow:rowIndex},Dashicon("move")):null,Button({className:"gh-button dashicon remove-row",dataRow:rowIndex,onClick:e=>removeRow(rowIndex)},Dashicon("no-alt"))]);const Repeater=()=>Div({id:id,className:"gh-input-repeater",onCreate:el=>{if(!sortable){return}$(el).sortable({handle:".handle",update:(e,ui)=>{let $row=$(ui.item);let oldIndex=parseInt($row.data("row"));let curIndex=$row.index();let row=rows[oldIndex];rows.splice(oldIndex,1);rows.splice(curIndex,0,row);onChange(rows)}})}},[...rows.map((row,i)=>RepeaterRow(row,i)),maxRows===0||rows.length`,Button({id:`${id}-add-row`,className:"add-row gh-button dashicon",onClick:e=>addRow()},Dashicon("plus-alt2"))]):null]);return Repeater()};const InputWithReplacements=({inputCallback:inputCallback=Input,...attributes})=>{return Div({className:"input-wrap"},[inputCallback(attributes),Button({className:"replacements-picker-start gh-button dashicon"},Dashicon("admin-users"))])};const Table=(atts,children)=>makeEl("table",atts,children);const THead=(atts,children)=>makeEl("thead",atts,children);const TBody=(atts,children)=>makeEl("tbody",atts,children);const TFoot=(atts,children)=>makeEl("tfoot",atts,children);const Tr=(atts,children)=>makeEl("tr",atts,children);const Td=(atts,children)=>makeEl("td",atts,children);const Th=(atts,children)=>makeEl("th",atts,children);const maybeCall=(maybeFunc,...args)=>{if(maybeFunc instanceof Function){return maybeFunc(...args)}return maybeFunc};const Modal=({dialogClasses:dialogClasses="",onOpen:onOpen=()=>{},onClose:onClose=()=>{},width,closeButton:closeButton=true,closeOnOverlayClick:closeOnOverlayClick=true},children)=>{let modal=Div({className:"gh-modal",tabindex:0},[Div({className:"gh-modal-overlay",onClick:e=>{if(closeOnOverlayClick){close()}}}),Div({className:`gh-modal-dialog ${dialogClasses}`,style:{width:width}},[Div({className:"gh-modal-dialog-content"}),closeButton?Button({className:"dashicon-button gh-modal-button-close-top gh-modal-button-close",onClick:e=>{close()}},Dashicon("no-alt")):null])]);const close=()=>{onClose();modal.remove()};const morph=()=>morphdom(modal.querySelector(".gh-modal-dialog-content"),Div({},getContent()),{childrenOnly:true});const getContent=()=>maybeCall(children,{close:close,modal:modal,morph:morph});document.body.appendChild(modal);morph();onOpen({modal:modal,close:close,morph:morph});modal.focus();return modal};const ModalFrame=({onOpen:onOpen=()=>{},onClose:onClose=()=>{},frameAttributes:frameAttributes={},closeOnOverlayClick:closeOnOverlayClick=true,closeOnEscape:closeOnEscape=true},children)=>{let modal=Div({className:"gh-modal",tabindex:0,onKeydown:e=>{if(closeOnEscape){if(e.key==="Esc"||e.key==="Escape"){close()}}}},[Div({className:"gh-modal-overlay",onClick:e=>{if(closeOnOverlayClick){close()}}}),Div({className:`gh-modal-frame`,...frameAttributes},[])]);const close=()=>{onClose();modal.remove()};modal.querySelector(".gh-modal-frame").appendChild(Fragment(maybeCall(children,{close:close})));document.body.appendChild(modal);onOpen({close:close});modal.focus();return modal};const MiniModal=({selector:selector="",from:from="right",dialogClasses:dialogClasses="",onOpen:onOpen=()=>{},onClose:onClose=()=>{},closeOnFocusout:closeOnFocusout=true},children)=>{let modal=Div({className:"gh-modal mini gh-panel",tabindex:0,onFocusout:e=>{if(closeOnFocusout){if(!e.relatedTarget||!clickedIn(e.relatedTarget,".gh-modal.mini")){setTimeout(()=>{if(!clickedIn(document.activeElement,".gh-modal.mini")){close()}},10)}}},onCreate:el=>{el.focus()}},Div({className:`gh-modal-dialog ${dialogClasses}`},[Button({className:"dashicon-button gh-modal-button-close-top gh-modal-button-close",onClick:e=>{close()}},Dashicon("no-alt"))]));const close=()=>{onClose();modal.remove()};modal.querySelector(".gh-modal-dialog").appendChild(Fragment(maybeCall(children,{close:close})));document.body.appendChild(modal);onOpen();let targetElement=document.querySelector(selector);let{right,left,bottom,top}=targetElement.getBoundingClientRect();let{width,height}=modal.getBoundingClientRect();switch(from){case"left":modal.style.left=left+"px";break;case"right":modal.style.left=right-width+"px";break}if(top+height>window.innerHeight){modal.style.top=window.innerHeight-height-20+"px"}else{modal.style.top=top+"px"}modal.focus();return modal};const Autocomplete=({fetchResults:fetchResults=async search=>{},onInput,...attributes})=>{let timeout;const State={pointer:0,results:[],input:null};const setValue=()=>{let item=State.results[State.pointer];State.input.value=item.id;State.input.dispatchEvent(new Event("change"));closeResults()};const updateResults=()=>{if(!State.results.length){closeResults();return}let resultsContainer=document.querySelector(".gh-autocomplete-results");let newResults=Results();if(!resultsContainer){document.body.appendChild(newResults)}else{morphdom(resultsContainer,newResults)}};const closeResults=()=>{let resultsContainer=document.querySelector(".gh-autocomplete-results");if(resultsContainer){resultsContainer.remove()}};const Results=()=>{const{results,input}=State;let{height,width,top,left}=input.getBoundingClientRect();return Div({className:"gh-autocomplete-results",style:{zIndex:999999,top:`${top+height}px`,left:`${left}px`,width:`${width}px`}},results.map(({id,text},index)=>makeEl("a",{className:`${index===State.pointer?"pointer":""}`,href:id,onClick:e=>{e.preventDefault();setValue()},onMouseenter:e=>{State.pointer=[...e.target.parentNode.children].indexOf(e.target);updateResults()}},text)))};return Input({...attributes,onFocusout:e=>{const input=e.target;input.classList.remove("has-results");if(e.relatedTarget&&clickedIn(e.relatedTarget,"a.pointer")){setValue()}closeResults()},onKeydown:e=>{const input=e.target;switch(e.key){case"Esc":case"Escape":e.preventDefault();closeResults();return;case"Down":case"ArrowDown":e.preventDefault();if(State.pointer0){State.pointer--}break;case"Enter":e.preventDefault();setValue();break;default:return}updateResults()},onInput:e=>{if(timeout){clearTimeout(timeout)}timeout=setTimeout(async()=>{const input=e.target;let search=input.value;State.results=await fetchResults(search);State.input=input;State.pointer=0;updateResults();input.classList.add("gh-autocomplete","has-results")},500)}})};const Ellipses=(content,atts={})=>Span({...atts,onCreate:el=>{let ellipses="";let count=0;let interval=setInterval(()=>{if(!el.parentNode){clearInterval(interval);return}count=(count+1)%4;ellipses=".".repeat(count);el.textContent=content+ellipses},500)}},content+"...");const ItemPicker=({id:id="",placeholder:placeholder="Type to search...",fetchOptions:fetchOptions=(search,resolve)=>{},selected:selected=[],onChange:onChange=()=>{},onSelect:onSelect=()=>{},onCreate:onCreate=()=>{},onUnselect:onUnselect=()=>{},createOption:createOption=val=>Promise.resolve({id:val,text:val}),tags:tags=false,noneSelected:noneSelected="Any",isValidSelection:isValidSelection=string=>Boolean(string),multiple:multiple=true,clearable:clearable=true,...attributes})=>{const state=Groundhogg.createState({search:"",searching:false,choosing:false,options:[],focused:false,morphing:false,clicked:false});const optionsVisible=()=>{return multiple?state.focused&&(state.searching||state.options.length||tags&&isValidSelection(state.search)):state.focused};if(!multiple&&!Array.isArray(selected)){selected=[selected]}let timeout;const setState=(newState,trigger)=>{state.set(newState);morph()};const handleOnChange=selected=>{if(timeout){clearTimeout(timeout)}if(multiple){onChange(selected);return}if(!selected.length){onChange(null);return}onChange(selected[0])};const morph=()=>{if(state.morphing){return}state.set({morphing:true});morphdom(document.getElementById(id),Render());state.set({morphing:false})};const focusSearch=()=>document.getElementById(id)?.querySelector(`input[type=search]`)?.focus();const focusPicker=()=>document.getElementById(id)?.focus();const focusParent=()=>document.getElementById(id)?.parentElement.focus();const handleCreateOption=value=>{state.options.unshift({id:value,text:value,create:true});handleSelectOption(value)};const handleSelectOption=async id=>{let option={...state.options.find(opt=>opt.id==id)};if(option.create){option.text=option.id}if(multiple){selected.push(option)}else{selected=[option]}if(option.create){await createOption(option.id).then(opt=>{selected=selected.map(item=>item.id==id?opt:item);option=opt})}onSelect(option);handleOnChange(selected);if(!multiple){state.set({focused:false})}morph();if(multiple){focusSearch()}else{focusPicker()}};const handleUnselectOption=id=>{let opt=selected.find(opt=>opt.id===id);selected=selected.filter(opt=>opt.id!=id);onUnselect(opt);handleOnChange(selected);morph();if(multiple){focusSearch()}};const itemPickerItem=({id,text},index)=>{return Div({className:`gh-picker-item ${isValidSelection(id)?"":"is-invalid"}`,id:`item-${id}-${index}`},[Span({className:"gh-picker-item-text"},text),selected.length>1||clearable?Span({id:`delete-${id}-${index}`,className:"gh-picker-item-delete",tabindex:"0",dataId:id,onClick:e=>{handleUnselectOption(id)}},"×"):null])};const itemPickerOption=({id,text},index)=>{return Div({className:"gh-picker-option",dataId:id,tabindex:"0",id:`option-${index}-${id}`,onClick:e=>{handleSelectOption(id)}},text)};const itemPickerOptions=()=>{let picker=document.getElementById(id);let style={};if(picker){const{left,right,top,bottom,width}=picker.getBoundingClientRect();let maxHeight=window.innerHeight-bottom-20;if(maxHeight>100){style.top=bottom+"px";style.left=left+"px";style.width=width+"px";style.maxHeight=maxHeight+"px"}else{style.bottom=window.innerHeight-top+"px";style.left=left+"px";style.width=width+"px";style.maxHeight=top-20+"px"}}state.options=state.options.filter(opt=>!opt.create);if(!state.searching&&tags&&isValidSelection(state.search)){if(!state.options.find(opt=>opt.id==state.search||opt.text==state.search)){state.options.unshift({id:state.search,text:`Add "${state.search}"`,create:true})}}let options=state.options.filter(opt=>!selected.some(_opt=>opt.id==_opt.id));return Div({className:"gh-picker-options",style:style,onCreate:el=>{setTimeout(()=>{let picker=document.getElementById(id);let optionsContainer=picker.querySelector(".gh-picker-options");const{left,right,top,bottom,width}=picker.getBoundingClientRect();let maxHeight=window.innerHeight-bottom-20;if(maxHeight>100){optionsContainer.style.top=bottom+"px";optionsContainer.style.left=left+"px";optionsContainer.style.width=width+"px";optionsContainer.style.maxHeight=maxHeight+"px"}else{optionsContainer.style.bottom=window.innerHeight-top+"px";optionsContainer.style.left=left+"px";optionsContainer.style.width=width+"px";optionsContainer.style.maxHeight=top-20+"px"}if(!multiple){focusSearch()}},0)}},[multiple||!selected.length?null:SearchInput(),state.searching?Div({className:"gh-picker-no-options"},Ellipses(wp.i18n.__("Searching"))):null,...options.map((opt,i)=>itemPickerOption(opt,i)),options.length||state.searching?null:Div({className:"gh-picker-no-options"},"No results found.")])};const startSearch=search=>{setState({search:search,searching:true},"start search");if(timeout){clearTimeout(timeout)}timeout=setTimeout(()=>{fetchOptions(search).then(options=>{if(search!==state.search){return}setState({searching:false,options:options},"options fetched")})},500)};const SearchInput=()=>Input({className:"gh-picker-search",value:state.search,name:"search",type:"search",autocomplete:"off",id:`${id}-search-input`,placeholder:selected.length?placeholder:noneSelected,onInput:e=>startSearch(e.target.value),onFocus:e=>{startSearch(e.target.value)},onKeydown:e=>{if(tags){if(e.key!=="Enter"&&e.key!==","){return}handleCreateOption(e.target.value)}}});const Render=()=>Div({id:id,className:`gh-picker-container`,tabindex:"0"},Div({id:`${id}-picker`,className:`gh-picker ${optionsVisible()?"options-visible":""}`,tabindex:"0",onCreate:el=>{el.addEventListener("focusout",e=>{setTimeout(()=>{if(state.morphing||document.getElementById(id).contains(document.activeElement)){return}setState({search:"",options:[],searching:false,focused:false},"picker focusout")},10)});el.addEventListener("focusin",e=>{if(state.focused){return}setState({focused:true},"picker focused")})},...attributes},[Div({className:`gh-picker-selected ${multiple?"multiple":"single"}`},[...selected.map((item,i)=>itemPickerItem(item,i)),multiple||!selected.length?SearchInput():null]),optionsVisible()?itemPickerOptions():null]));return Render()};const InputGroup=inputs=>Div({className:"gh-input-group"},inputs);const Iframe=({onCreate:onCreate=()=>{},...attributes},content=null)=>{let blob=new Blob([content],{type:"text/html; charset=utf-8"});let src=URL.createObjectURL(blob);return makeEl("iframe",{...attributes,src:src})};const ToolTip=(content,position="bottom")=>{return Div({className:`gh-tooltip ${position}`},content)};const ButtonToggle=({id:id="",options:options=[],selected:selected="",onChange:onChange=value=>{}})=>{const render=()=>Div({id:id,className:"gh-input-group"},options.map(opt=>ButtonOption(opt)));const ButtonOption=option=>Button({id:`${id}-opt-${option.id}`,className:`gh-button gh-button small ${selected===option.id?"dark":"grey"}`,onClick:e=>{selected=option.id;morphdom(document.getElementById(id),render());onChange(option.id)}},option.text);return render()};const ProgressBar=({percent:percent=100,error:error=false})=>{return Div({className:`gh-progress-bar ${error?"error":""}`},Div({className:"gh-progress-bar-fill",style:{width:`${percent}%`}},Span({className:"fill-amount"},`${Math.ceil(percent)}%`)))};const Pg=(props,children)=>makeEl("p",props,children);const An=(props,children)=>makeEl("a",props,children);const Ul=(props,children)=>makeEl("ul",props,children);const Ol=(props,children)=>makeEl("Ol",props,children);const Li=(props,children)=>makeEl("li",props,children);window.MakeEl={InputGroup:InputGroup,makeEl:makeEl,Ellipses:Ellipses,Input:Input,InputWithReplacements:InputWithReplacements,Textarea:Textarea,Select:Select,ToolTip:ToolTip,Button:Button,Toggle:Toggle,Div:Div,Span:Span,Label:Label,InputRepeater:InputRepeater,Fragment:Fragment,Table:Table,TBody:TBody,THead:THead,TFoot:TFoot,Tr:Tr,Td:Td,Th:Th,Modal:Modal,MiniModal:MiniModal,ModalFrame:ModalFrame,ItemPicker:ItemPicker,Iframe:Iframe,htmlToElements:htmlToElements,Dashicon:Dashicon,ButtonToggle:ButtonToggle,Autocomplete:Autocomplete,ProgressBar:ProgressBar,Pg:Pg,An:An,Ul:Ul,Ol:Ol,Li:Li,maybeCall:maybeCall}})(jQuery??function(){throw new Error("jQuery was not loaded.")}); \ No newline at end of file + ${offLabel}`])};const Div=(attributes={},children=[])=>{return makeEl("div",attributes,children)};const Dashicon=(icon,children=null)=>{return makeEl("span",{className:`dashicons dashicons-${icon}`},children)};const Fragment=(children,atts={})=>{return makeEl("fragment",atts,children)};const Span=(attributes={},children=[])=>{return makeEl("span",attributes,children)};const Label=(attributes={},children=[])=>{return makeEl("label",attributes,children)};const InputRepeater=({id:id="",onChange:onChange=()=>{},rows:rows=[],cells:cells=[],sortable:sortable=false,fillRow:fillRow=()=>Array(cells.length).fill(""),maxRows:maxRows=0})=>{const handleChange=rows=>{onChange(rows);morphdom(document.getElementById(id),Repeater())};const removeRow=rowIndex=>{rows.splice(rowIndex,1);handleChange(rows)};const addRow=()=>{rows.push(fillRow());handleChange(rows)};const onCellChange=(rowIndex,cellIndex,value)=>{rows[rowIndex][cellIndex]=value;handleChange(rows)};const RepeaterRow=(row,rowIndex)=>Div({className:"gh-input-repeater-row",dataRow:rowIndex},[...cells.map((cellCallback,cellIndex)=>cellCallback({id:`${id}-cell-${rowIndex}-${cellIndex}`,value:row[cellIndex]??"",dataRow:rowIndex,dataCell:cellIndex,onChange:e=>onCellChange(rowIndex,cellIndex,e.target.value),setValue:value=>onCellChange(rowIndex,cellIndex,value)},row)),sortable?makeEl("span",{className:"handle",dataRow:rowIndex},Dashicon("move")):null,Button({className:"gh-button dashicon remove-row",dataRow:rowIndex,onClick:e=>removeRow(rowIndex)},Dashicon("no-alt"))]);const Repeater=()=>Div({id:id,className:"gh-input-repeater",onCreate:el=>{if(!sortable){return}$(el).sortable({handle:".handle",update:(e,ui)=>{let $row=$(ui.item);let oldIndex=parseInt($row.data("row"));let curIndex=$row.index();let row=rows[oldIndex];rows.splice(oldIndex,1);rows.splice(curIndex,0,row);onChange(rows)}})}},[...rows.map((row,i)=>RepeaterRow(row,i)),maxRows===0||rows.length`,Button({id:`${id}-add-row`,className:"add-row gh-button dashicon",onClick:e=>addRow()},Dashicon("plus-alt2"))]):null]);return Repeater()};const InputWithReplacements=({inputCallback:inputCallback=Input,...attributes})=>{return Div({className:"input-wrap"},[inputCallback(attributes),Button({className:"replacements-picker-start gh-button dashicon"},Dashicon("admin-users"))])};const Table=(atts,children)=>makeEl("table",atts,children);const THead=(atts,children)=>makeEl("thead",atts,children);const TBody=(atts,children)=>makeEl("tbody",atts,children);const TFoot=(atts,children)=>makeEl("tfoot",atts,children);const Tr=(atts,children)=>makeEl("tr",atts,children);const Td=(atts,children)=>makeEl("td",atts,children);const Th=(atts,children)=>makeEl("th",atts,children);const maybeCall=(maybeFunc,...args)=>{if(maybeFunc instanceof Function){return maybeFunc(...args)}return maybeFunc};const Modal=({dialogClasses:dialogClasses="",onOpen:onOpen=()=>{},onClose:onClose=()=>{},width,closeButton:closeButton=true,closeOnOverlayClick:closeOnOverlayClick=true},children)=>{let modal=Div({className:"gh-modal",tabindex:0},[Div({className:"gh-modal-overlay",onClick:e=>{if(closeOnOverlayClick){close()}}}),Div({className:`gh-modal-dialog ${dialogClasses}`,style:{width:width}},[Div({className:"gh-modal-dialog-content"}),closeButton?Button({className:"dashicon-button gh-modal-button-close-top gh-modal-button-close",onClick:e=>{close()}},Dashicon("no-alt")):null])]);const close=()=>{onClose();modal.remove()};const morph=()=>morphdom(modal.querySelector(".gh-modal-dialog-content"),Div({},getContent()),{childrenOnly:true});const getContent=()=>maybeCall(children,{close:close,modal:modal,morph:morph});document.body.appendChild(modal);morph();onOpen({modal:modal,close:close,morph:morph});modal.focus();return modal};const ModalFrame=({onOpen:onOpen=()=>{},onClose:onClose=()=>{},frameAttributes:frameAttributes={},closeOnOverlayClick:closeOnOverlayClick=true,closeOnEscape:closeOnEscape=true},children)=>{let modal=Div({className:"gh-modal",tabindex:0,onKeydown:e=>{if(closeOnEscape){if(e.key==="Esc"||e.key==="Escape"){close()}}}},[Div({className:"gh-modal-overlay",onClick:e=>{if(closeOnOverlayClick){close()}}}),Div({className:`gh-modal-frame`,...frameAttributes},[])]);const close=()=>{onClose();modal.remove()};modal.querySelector(".gh-modal-frame").appendChild(Fragment(maybeCall(children,{close:close})));document.body.appendChild(modal);onOpen({close:close});modal.focus();return modal};const MiniModal=({selector:selector="",from:from="right",dialogClasses:dialogClasses="",onOpen:onOpen=()=>{},onClose:onClose=()=>{},closeOnFocusout:closeOnFocusout=true},children)=>{let modal=Div({className:"gh-modal mini gh-panel",tabindex:0,onFocusout:e=>{if(closeOnFocusout){if(!e.relatedTarget||!clickedIn(e.relatedTarget,".gh-modal.mini")){setTimeout(()=>{if(!clickedIn(document.activeElement,".gh-modal.mini")){close()}},10)}}},onCreate:el=>{el.focus()}},Div({className:`gh-modal-dialog ${dialogClasses}`},[Button({className:"dashicon-button gh-modal-button-close-top gh-modal-button-close",onClick:e=>{close()}},Dashicon("no-alt"))]));const close=()=>{onClose();modal.remove()};modal.querySelector(".gh-modal-dialog").appendChild(Fragment(maybeCall(children,{close:close})));document.body.appendChild(modal);onOpen();let targetElement=document.querySelector(selector);let{right,left,bottom,top}=targetElement.getBoundingClientRect();let{width,height}=modal.getBoundingClientRect();switch(from){case"left":modal.style.left=left+"px";break;case"right":modal.style.left=right-width+"px";break}if(top+height>window.innerHeight){modal.style.top=window.innerHeight-height-20+"px"}else{modal.style.top=top+"px"}modal.focus();return modal};const Autocomplete=({fetchResults:fetchResults=async search=>{},onInput,...attributes})=>{let timeout;const State={pointer:0,results:[],input:null};const setValue=()=>{let item=State.results[State.pointer];State.input.value=item.id;State.input.dispatchEvent(new Event("change"));closeResults()};const updateResults=()=>{if(!State.results.length){closeResults();return}let resultsContainer=document.querySelector(".gh-autocomplete-results");let newResults=Results();if(!resultsContainer){document.body.appendChild(newResults)}else{morphdom(resultsContainer,newResults)}};const closeResults=()=>{let resultsContainer=document.querySelector(".gh-autocomplete-results");if(resultsContainer){resultsContainer.remove()}};const Results=()=>{const{results,input}=State;let{height,width,top,left}=input.getBoundingClientRect();return Div({className:"gh-autocomplete-results",style:{zIndex:999999,top:`${top+height}px`,left:`${left}px`,width:`${width}px`}},results.map(({id,text},index)=>makeEl("a",{className:`${index===State.pointer?"pointer":""}`,href:id,onClick:e=>{e.preventDefault();setValue()},onMouseenter:e=>{State.pointer=[...e.target.parentNode.children].indexOf(e.target);updateResults()}},text)))};return Input({...attributes,onFocusout:e=>{const input=e.target;input.classList.remove("has-results");if(e.relatedTarget&&clickedIn(e.relatedTarget,"a.pointer")){setValue()}closeResults()},onKeydown:e=>{const input=e.target;switch(e.key){case"Esc":case"Escape":e.preventDefault();closeResults();return;case"Down":case"ArrowDown":e.preventDefault();if(State.pointer0){State.pointer--}break;case"Enter":e.preventDefault();setValue();break;default:return}updateResults()},onInput:e=>{if(timeout){clearTimeout(timeout)}timeout=setTimeout(async()=>{const input=e.target;let search=input.value;State.results=await fetchResults(search);State.input=input;State.pointer=0;updateResults();input.classList.add("gh-autocomplete","has-results")},500)}})};const Ellipses=(content,atts={})=>Span({...atts,onCreate:el=>{let ellipses="";let count=0;let interval=setInterval(()=>{if(!el.parentNode){clearInterval(interval);return}count=(count+1)%4;ellipses=".".repeat(count);el.textContent=content+ellipses},500)}},content+"...");const ItemPicker=({id:id="",placeholder:placeholder="Type to search...",fetchOptions:fetchOptions=(search,resolve)=>{},selected:selected=[],onChange:onChange=()=>{},onSelect:onSelect=()=>{},onCreate:onCreate=()=>{},onUnselect:onUnselect=()=>{},createOption:createOption=val=>Promise.resolve({id:val,text:val}),tags:tags=false,noneSelected:noneSelected="Any",isValidSelection:isValidSelection=string=>Boolean(string),multiple:multiple=true,clearable:clearable=true,...attributes})=>{const state=Groundhogg.createState({search:"",searching:false,choosing:false,options:[],focused:false,morphing:false,clicked:false});const optionsVisible=()=>{return multiple?state.focused&&(state.searching||state.options.length||tags&&isValidSelection(state.search)):state.focused};if(!multiple&&!Array.isArray(selected)){selected=[selected]}let timeout;const setState=(newState,trigger)=>{state.set(newState);morph()};const handleOnChange=selected=>{if(timeout){clearTimeout(timeout)}if(multiple){onChange(selected);return}if(!selected.length){onChange(null);return}onChange(selected[0])};const morph=()=>{if(state.morphing){return}state.set({morphing:true});morphdom(document.getElementById(id),Render());state.set({morphing:false})};const focusSearch=()=>document.getElementById(id)?.querySelector(`input[type=search]`)?.focus();const focusPicker=()=>document.getElementById(id)?.focus();const focusParent=()=>document.getElementById(id)?.parentElement.focus();const handleCreateOption=value=>{state.options.unshift({id:value,text:value,create:true});handleSelectOption(value)};const handleSelectOption=async id=>{let option={...state.options.find(opt=>opt.id==id)};if(option.create){option.text=option.id}if(multiple){selected.push(option)}else{selected=[option]}if(option.create){await createOption(option.id).then(opt=>{selected=selected.map(item=>item.id==id?opt:item);option=opt})}onSelect(option);handleOnChange(selected);if(!multiple){state.set({focused:false})}morph();if(multiple){focusSearch()}else{focusPicker()}};const handleUnselectOption=id=>{let opt=selected.find(opt=>opt.id===id);selected=selected.filter(opt=>opt.id!=id);onUnselect(opt);handleOnChange(selected);morph();if(multiple){focusSearch()}};const itemPickerItem=({id,text},index)=>{return Div({className:`gh-picker-item ${isValidSelection(id)?"":"is-invalid"}`,id:`item-${id}-${index}`},[Span({className:"gh-picker-item-text"},text),selected.length>1||clearable?Span({id:`delete-${id}-${index}`,className:"gh-picker-item-delete",tabindex:"0",dataId:id,onClick:e=>{handleUnselectOption(id)}},"×"):null])};const itemPickerOption=({id,text},index)=>{return Div({className:"gh-picker-option",dataId:id,tabindex:"0",id:`option-${index}-${id}`,onClick:e=>{handleSelectOption(id)}},text)};const itemPickerOptions=()=>{let picker=document.getElementById(id);let style={};if(picker){const{left,right,top,bottom,width}=picker.getBoundingClientRect();let maxHeight=window.innerHeight-bottom-20;if(maxHeight>100){style.top=bottom+"px";style.left=left+"px";style.width=width+"px";style.maxHeight=maxHeight+"px"}else{style.bottom=window.innerHeight-top+"px";style.left=left+"px";style.width=width+"px";style.maxHeight=top-20+"px"}}state.options=state.options.filter(opt=>!opt.create);if(!state.searching&&tags&&isValidSelection(state.search)){if(!state.options.find(opt=>opt.id==state.search||opt.text==state.search)){state.options.unshift({id:state.search,text:`Add "${state.search}"`,create:true})}}let options=state.options.filter(opt=>!selected.some(_opt=>opt.id==_opt.id));return Div({className:"gh-picker-options",style:style,onCreate:el=>{setTimeout(()=>{let picker=document.getElementById(id);let optionsContainer=picker.querySelector(".gh-picker-options");const{left,right,top,bottom,width}=picker.getBoundingClientRect();let maxHeight=window.innerHeight-bottom-20;if(maxHeight>100){optionsContainer.style.top=bottom+"px";optionsContainer.style.left=left+"px";optionsContainer.style.width=width+"px";optionsContainer.style.maxHeight=maxHeight+"px"}else{optionsContainer.style.bottom=window.innerHeight-top+"px";optionsContainer.style.left=left+"px";optionsContainer.style.width=width+"px";optionsContainer.style.maxHeight=top-20+"px"}if(!multiple){focusSearch()}},0)}},[multiple||!selected.length?null:SearchInput(),state.searching?Div({className:"gh-picker-no-options"},Ellipses(wp.i18n.__("Searching"))):null,...options.map((opt,i)=>itemPickerOption(opt,i)),options.length||state.searching?null:Div({className:"gh-picker-no-options"},"No results found.")])};const startSearch=search=>{setState({search:search,searching:true},"start search");if(timeout){clearTimeout(timeout)}timeout=setTimeout(()=>{fetchOptions(search).then(options=>{if(search!==state.search){return}setState({searching:false,options:options},"options fetched")})},500)};const SearchInput=()=>Input({className:"gh-picker-search",value:state.search,name:"search",type:"search",autocomplete:"off",id:`${id}-search-input`,placeholder:selected.length?placeholder:noneSelected,onInput:e=>startSearch(e.target.value),onFocus:e=>{startSearch(e.target.value)},onKeydown:e=>{if(tags){if(e.key!=="Enter"&&e.key!==","){return}handleCreateOption(e.target.value)}}});const Render=()=>Div({id:id,className:`gh-picker-container`,tabindex:"0",...attributes},Div({id:`${id}-picker`,className:`gh-picker ${optionsVisible()?"options-visible":""}`,tabindex:"0",onCreate:el=>{el.addEventListener("focusout",e=>{setTimeout(()=>{if(state.morphing||document.getElementById(id).contains(document.activeElement)){return}setState({search:"",options:[],searching:false,focused:false},"picker focusout")},10)});el.addEventListener("focusin",e=>{if(state.focused){return}setState({focused:true},"picker focused")})}},[Div({className:`gh-picker-selected ${multiple?"multiple":"single"}`},[...selected.map((item,i)=>itemPickerItem(item,i)),multiple||!selected.length?SearchInput():null]),optionsVisible()?itemPickerOptions():null]));return Render()};const InputGroup=inputs=>Div({className:"gh-input-group"},inputs);const Iframe=({onCreate:onCreate=()=>{},...attributes},content=null)=>{let blob=new Blob([content],{type:"text/html; charset=utf-8"});let src=URL.createObjectURL(blob);return makeEl("iframe",{...attributes,src:src})};const ToolTip=(content,position="bottom")=>{return Div({className:`gh-tooltip ${position}`},content)};const ButtonToggle=({id:id="",options:options=[],selected:selected="",onChange:onChange=value=>{}})=>{const render=()=>Div({id:id,className:"gh-input-group"},options.map(opt=>ButtonOption(opt)));const ButtonOption=option=>Button({id:`${id}-opt-${option.id}`,className:`gh-button gh-button small ${selected===option.id?"dark":"grey"}`,onClick:e=>{selected=option.id;morphdom(document.getElementById(id),render());onChange(option.id)}},option.text);return render()};const ProgressBar=({percent:percent=100,error:error=false})=>{return Div({className:`gh-progress-bar ${error?"error":""}`},Div({className:"gh-progress-bar-fill",style:{width:`${percent}%`}},Span({className:"fill-amount"},`${Math.ceil(percent)}%`)))};const Pg=(props,children)=>makeEl("p",props,children);const An=(props,children)=>makeEl("a",props,children);const Ul=(props,children)=>makeEl("ul",props,children);const Ol=(props,children)=>makeEl("Ol",props,children);const Li=(props,children)=>makeEl("li",props,children);window.MakeEl={InputGroup:InputGroup,makeEl:makeEl,Ellipses:Ellipses,Input:Input,InputWithReplacements:InputWithReplacements,Textarea:Textarea,Select:Select,ToolTip:ToolTip,Button:Button,Toggle:Toggle,Div:Div,Span:Span,Label:Label,InputRepeater:InputRepeater,Fragment:Fragment,Table:Table,TBody:TBody,THead:THead,TFoot:TFoot,Tr:Tr,Td:Td,Th:Th,Modal:Modal,MiniModal:MiniModal,ModalFrame:ModalFrame,ItemPicker:ItemPicker,Iframe:Iframe,htmlToElements:htmlToElements,Dashicon:Dashicon,ButtonToggle:ButtonToggle,Autocomplete:Autocomplete,ProgressBar:ProgressBar,Pg:Pg,An:An,Ul:Ul,Ol:Ol,Li:Li,maybeCall:maybeCall}})(jQuery??function(){throw new Error("jQuery was not loaded.")}); \ No newline at end of file diff --git a/groundhogg.php b/groundhogg.php index 38278a7a0..010e1788a 100644 --- a/groundhogg.php +++ b/groundhogg.php @@ -3,7 +3,7 @@ * Plugin Name: Groundhogg * Plugin URI: https://www.groundhogg.io/?utm_source=wp-plugins&utm_campaign=plugin-uri&utm_medium=wp-dash * Description: CRM and marketing automation for WordPress - * Version: 3.5 + * Version: 3.5.0.1 * Author: Groundhogg Inc. * Author URI: https://www.groundhogg.io/?utm_source=wp-plugins&utm_campaign=author-uri&utm_medium=wp-dash * Text Domain: groundhogg @@ -24,7 +24,7 @@ exit; } -define( 'GROUNDHOGG_VERSION', '3.5' ); +define( 'GROUNDHOGG_VERSION', '3.5.0.1' ); define( 'GROUNDHOGG_PREVIOUS_STABLE_VERSION', '3.4.4.1' ); define( 'GROUNDHOGG__FILE__', __FILE__ );