Explaining the Laravel Public Folder (2023)

DevDojo

Products

Tails

Create websites with TailwindCSS

Wave

Start building the next great SAAS

Devblog

Create a professional dev blog

MarkdownX

The Markdown editor of the future

SAAS Adventure

21-day program for building a SAAS

Learn

Learn how to code & design

Community

Join74,587 other developers as we learn, build, and grow together.

Connect with fellow developers and gain access to tools that will help you build a profitable SaaS 🚀

Community

🏠Home🙋Questions🍿Videos🎓Courses🤓Snippets🤣Fun

Rewards

⭐Points🎖Badges💰DevCoin🏆Contests

Resources

📘Guides📚eBooks💡Topics

Meet the Team

Explaining the Laravel Public Folder (1)

Tony LeaFounder / Developer

Explaining the Laravel Public Folder (2)

Bobby IlievCo-Founder / DevOps

Explaining the Laravel Public Folder (3)

Boyan IlievDeveloper / DevOps

View All Users

Pricing

About

🦺

Help & Support

Have a question or need help

🤝

Sponsorships

Learn about sponsorships

📄

Terms of Service

The boring legal stuff

Signup

Login

Explaining the Laravel Public Folder (4)

Written by Dev Dojo on Mar 13th, 2017 ViewsReport Post

Dev DojoVisit User Profile

If you have ever installed a PHP application or even Wordpress you probably know that you need to copy and paste the files into the root folder of your website and you are good to go.

Well, Laravel is setup a little different. Laravel has made things more secure by putting all the functionality of the application outside the of the root folder.

First, let's take a look at a basic Laravel folder structure: (folders are bold)

  • app
  • bootstrap
  • config
  • database
  • public
  • resources
  • routes
  • storage
  • tests
  • .env
  • artisan
  • composer.json
  • ... a few more files

All the folders above are not supposed to live in the root directory except for the contents of thepublic folder, in fact the root directory of your application should be the public folder. This means that your domain should be pointing to this public folder. This will be a bit more clear when I explain what happens when a domain is accessed.

Say that some types in devdojo.com in their browser. The domain name server or (DNS) will direct that domain to myserver. When theserver detects that someone is requesting access tothe website, it then has a lookup of what folder to look into to send a response back to the client. This lookup could be any folder on theserver. Take for instance the following folder:/var/www/html/devdojo/. The folder lookup location can be set up through the server or the hosting provider.

If I had setup a Laravel app in my/var/www/html/devdojo/ folder and this is folder my server looks to serve up an index.html or an index.php file, my app would not work because it needs to look inthe public folder. So to get my Laravel app working correctly I need to tell the server that it should be serving up files frome the following folder /var/www/html/devdojo/public/ when someone requests access to the website.

By having all the functionality of our application outsidethe root folder of the website wewon't have to worry about a lot of the common vulnerabilities people commonly have on their website. Since all the functionality/files are one folder above the root folder they can never be accessed by the end-user and is only available to the application. Thanks Laravel for the awesome security :)

Problems on a shared hosting provider?

If you are having trouble accessing your laravel application on a shared hosting be sure to checkout this article on 3 different ways to get it working on a shared hosting provider:

🤩 Our Amazing Sponsors 👇

Explaining the Laravel Public Folder (6)View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
View WebsiteThe official Laravel job board. Find the best and most talented Laravel developers by posting your job on the official Laravel job board.View WebsiteLearn how to code your own blockchain and create your own crypto-currency with the CoinCamp interactive and fun online training platform.Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

http://blog.netgloo.com/2016/01/29/deploy-laravel-application-on-shared-hosting/

Hope this helps you understand the public folder in laravel applications.

Comments (0)

Explaining the Laravel Public Folder (9)

\n`));class Kr extends Or{constructor({classNames:e}={}){super({template:Wr,classes:Ur}),this.classNames=e}load(e){const t=document.createElement("img");this.classNames&&(t.className=this.classNames),t.addEventListener("load",(()=>{this.el.replaceWith(t)}),{once:!0}),Promise.resolve(e).then((e=>t.src=e))}renderSync(){return super.renderSync(),this.classNames&&this.classNames.split(" ").forEach((e=>this.el.classList.add(e))),this.el}}const Yr=br("customEmoji");const Xr=new qr((({emoji:e})=>`${e}`));class Jr extends class{renderElement(e){return{content:e}}renderImage(e="",t){const n=new Kr({classNames:e});return n.renderSync(),{content:n,resolver:()=>(n.load(t()),n.el)}}doRender(e,t,n){if(e.custom)return this.renderCustom(e,t,n);const{content:o,resolver:i}=this.render(e,n),r=o instanceof Element?o:o.el;return i&&i(),r}doEmit(e){return e.custom?this.emitCustom(e):this.emit(e)}emitCustom({url:e,label:t,emoji:n,data:o}){return{url:e,label:t,emoji:n,data:o}}renderCustom(e,t,n=""){const o=[Yr.customEmoji,n].join(" ").trim(),{content:i,resolver:r}=this.renderImage(o,(()=>e.url)),s=i instanceof Element?i:i.el;return r&&r(),s}}{render(e){return this.renderElement(Xr.renderSync({emoji:e.emoji}))}emit({emoji:e,hexcode:t,label:n}){return{emoji:e,hexcode:t,label:n}}}const Zr=[(e,t)=>("1F91D"===e.hexcode&&t<14&&(e.skins=[]),e),(e,t)=>(e.skins&&(e.skins=e.skins.filter((e=>!e.version||e.version<=t))),e)];function Gr(e,t){return e.filter((e=>null!==function(e,t){return Zr.some((n=>null===n(e,t)))?null:e}(e,t)))}function Qr(e){var t;return{emoji:e.emoji,label:e.label,tags:e.tags,skins:null==(t=e.skins)?void 0:t.map((e=>Qr(e))),order:e.order,custom:!1,hexcode:e.hexcode,version:e.version}}function es(e,t,n){var o;return!(n&&!n.some((t=>t.order===e.group)))&&(vr(e.label,t)||(null==(o=e.tags)?void 0:o.some((e=>vr(e,t)))))}class ts{constructor(e="en"){this.locale=e}}const ns="PicMo";function os(e){return new is(e)}os.deleteDatabase=e=>new Promise(((t,n)=>{const o=indexedDB.deleteDatabase(`${ns}-${e}`);o.addEventListener("success",t),o.addEventListener("error",n)}));class is extends ts{async open(){const e=indexedDB.open(`${ns}-${this.locale}`);return new Promise(((t,n)=>{e.addEventListener("success",(e=>{var n;this.db=null==(n=e.target)?void 0:n.result,t()})),e.addEventListener("error",n),e.addEventListener("upgradeneeded",(async e=>{var t;this.db=null==(t=e.target)?void 0:t.result,this.db.createObjectStore("category",{keyPath:"order"});const n=this.db.createObjectStore("emoji",{keyPath:"emoji"});n.createIndex("category","group"),n.createIndex("version","version"),this.db.createObjectStore("meta")}))}))}async delete(){this.close();const e=indexedDB.deleteDatabase(`${ns}-${this.locale}`);await this.waitForRequest(e)}close(){this.db.close()}async getEmojiCount(){const e=this.db.transaction("emoji","readonly").objectStore("emoji");return(await this.waitForRequest(e.count())).target.result}async getEtags(){const e=this.db.transaction("meta","readonly").objectStore("meta"),[t,n]=await Promise.all([this.waitForRequest(e.get("emojisEtag")),this.waitForRequest(e.get("messagesEtag"))]);return{storedEmojisEtag:t.target.result,storedMessagesEtag:n.target.result}}async setMeta(e){const t=this.db.transaction("meta","readwrite"),n=t.objectStore("meta");return new Promise((o=>{t.oncomplete=o,Object.keys(e).filter(Boolean).forEach((t=>{n.put(e[t],t)}))}))}async getHash(){const e=this.db.transaction("meta","readonly").objectStore("meta");return(await this.waitForRequest(e.get("hash"))).target.result}async isPopulated(){const e=this.db.transaction("category","readonly").objectStore("category");return(await this.waitForRequest(e.count())).target.result>0}async populate({groups:e,emojis:t,emojisEtag:n,messagesEtag:o,hash:i}){await this.removeAllObjects("category","emoji");const r=[this.addObjects("category",e),this.addObjects("emoji",t),this.setMeta({emojisEtag:n,messagesEtag:o,hash:i})];await Promise.all(r)}async getCategories(e){var t;const n=this.db.transaction("category","readonly").objectStore("category");let o=(await this.waitForRequest(n.getAll())).target.result.filter((e=>"component"!==e.key));if(e.showRecents&&o.unshift({key:"recents",order:-1}),null!=(t=e.custom)&&t.length&&o.push({key:"custom",order:10}),e.categories){const t=e.categories;o=o.filter((e=>t.includes(e.key))),o.sort(((e,n)=>t.indexOf(e.key)-t.indexOf(n.key)))}else o.sort(((e,t)=>e.order-t.order));return o}async getEmojis(e,t){const n=this.db.transaction("emoji","readonly").objectStore("emoji").index("category");return Gr((await this.waitForRequest(n.getAll(e.order))).target.result.filter((e=>e.version<=t)).sort(((e,t)=>null!=e.order&&null!=t.order?e.order-t.order:0)).map(Qr),t)}async searchEmojis(e,t,n,o){const i=[];return new Promise(((r,s)=>{const a=this.db.transaction("emoji","readonly").objectStore("emoji").openCursor();a.addEventListener("success",(s=>{var a;const c=null==(a=s.target)?void 0:a.result;if(!c)return r([...Gr(i,n),...t.filter((t=>es(t,e)))]);const l=c.value;es(l,e,o)&&l.version<=n&&i.push(Qr(l)),c.continue()})),a.addEventListener("error",(e=>{s(e)}))}))}async waitForRequest(e){return new Promise(((t,n)=>{e.onsuccess=t,e.onerror=n}))}withTransaction(e,t="readwrite",n){return new Promise(((o,i)=>{const r=this.db.transaction(e,t);r.oncomplete=o,r.onerror=i,n(r)}))}async removeAllObjects(...e){const t=this.db.transaction(e,"readwrite"),n=e.map((e=>t.objectStore(e)));await Promise.all(n.map((e=>this.waitForRequest(e.clear()))))}async addObjects(e,t){return this.withTransaction(e,"readwrite",(n=>{const o=n.objectStore(e);t.forEach((e=>{o.add(e)}))}))}}const rs="PicMo:recents";class ss extends class{}{constructor(e){super(),this.storage=e}clear(){this.storage.removeItem(rs)}getRecents(e){var t;try{return JSON.parse(null!=(t=this.storage.getItem(rs))?t:"[]").slice(0,e)}catch{return[]}}addOrUpdateRecent(e,t){const n=[e,...this.getRecents(t).filter((t=>t.hexcode!==e.hexcode))].slice(0,t);try{this.storage.setItem(rs,JSON.stringify(n))}catch{console.warn("storage is not available, recent emojis will not be saved")}}}class as extends ss{constructor(){super(localStorage)}}const cs={dataStore:os,theme:Lr,animate:!0,showCategoryTabs:!0,showPreview:!0,showRecents:!0,showSearch:!0,showVariants:!0,emojisPerRow:8,visibleRows:6,emojiVersion:"auto",i18n:{"categories.activities":"Activities","categories.animals-nature":"Animals & Nature","categories.custom":"Custom","categories.flags":"Flags","categories.food-drink":"Food & Drink","categories.objects":"Objects","categories.people-body":"People & Body","categories.recents":"Recently Used","categories.smileys-emotion":"Smileys & Emotion","categories.symbols":"Symbols","categories.travel-places":"Travel & Places","error.load":"Failed to load emojis","recents.clear":"Clear recent emojis","recents.none":"You haven't selected any emojis yet.",retry:"Try again","search.clear":"Clear search","search.error":"Failed to search emojis","search.notFound":"No results found",search:"Search emojis..."},locale:"en",maxRecents:50,custom:[]};var ls,us,ds,hs,ps;class fs{constructor(){sr(this,us),sr(this,hs),sr(this,ls,new Map)}on(e,t,n){cr(this,hs,ps).call(this,e,t,n)}once(e,t,n){cr(this,hs,ps).call(this,e,t,n,!0)}off(e,t){const n=cr(this,us,ds).call(this,e);rr(this,ls).set(e,n.filter((e=>e.handler!==t)))}emit(e,...t){cr(this,us,ds).call(this,e).forEach((n=>{n.handler.apply(n.context,t),n.once&&this.off(e,n.handler)}))}removeAll(){rr(this,ls).clear()}}ls=new WeakMap,us=new WeakSet,ds=function(e){return rr(this,ls).has(e)||rr(this,ls).set(e,[]),rr(this,ls).get(e)},hs=new WeakSet,ps=function(e,t,n,o=!1){cr(this,us,ds).call(this,e).push({context:n,handler:t,once:o})};const ms=!0;class gs extends fs{}class vs extends fs{}const ys=br("emojiCategory","categoryName","noRecents","recentEmojis");class ws extends Or{constructor({template:e,category:t,showVariants:n,lazyLoader:o}){super({template:e,classes:ys}),this.baseUIElements={categoryName:Or.byClass(ys.categoryName)},this.category=t,this.showVariants=n,this.lazyLoader=o}setActive(e,t,n){this.emojiContainer.setActive(e,t,n)}}const bs=new qr((({classes:e,emoji:t})=>`\n \n`)),xs=br("emojiButton");class Cs extends Or{constructor({emoji:e,lazyLoader:t,category:n}){super({template:bs,classes:xs}),this.emoji=e,this.lazyLoader=t,this.category=n}initialize(){this.uiEvents=[Or.uiEvent("focus",this.handleFocus)],super.initialize()}handleFocus(){this.category&&this.events.emit("focus:change",this.category)}activateFocus(e){this.el.tabIndex=0,e&&this.el.focus()}deactivateFocus(){this.el.tabIndex=-1}renderSync(){return super.renderSync({emoji:this.emoji,emojiContent:this.renderer.doRender(this.emoji,this.lazyLoader)})}}class ks{constructor(e,t,n=0,o=0,i=!1){this.events=new fs,this.keyHandlers={ArrowLeft:this.focusPrevious.bind(this),ArrowRight:this.focusNext.bind(this),ArrowUp:this.focusUp.bind(this),ArrowDown:this.focusDown.bind(this)},this.rowCount=Math.ceil(t/e),this.columnCount=e,this.focusedRow=n,this.focusedColumn=o,this.emojiCount=t,this.wrap=i,this.handleKeyDown=this.handleKeyDown.bind(this)}destroy(){this.events.removeAll()}on(e,t){this.events.on(e,t)}handleKeyDown(e){e.key in this.keyHandlers&&(e.preventDefault(),this.keyHandlers[e.key]())}setCell(e,t,n=!0){const o=this.getIndex();this.focusedRow=e,void 0!==t&&(this.focusedColumn=Math.min(this.columnCount,t)),(this.focusedRow>=this.rowCount||this.getIndex()>=this.emojiCount)&&(this.focusedRow=this.rowCount-1,this.focusedColumn=this.emojiCount%this.columnCount-1),this.events.emit("focus:change",{from:o,to:this.getIndex(),performFocus:n})}setFocusedIndex(e,t=!0){const n=Math.floor(e/this.columnCount),o=e%this.columnCount;this.setCell(n,o,t)}focusNext(){this.focusedColumn

0?this.setCell(this.focusedRow,this.focusedColumn-1):this.focusedRow>0?this.setCell(this.focusedRow-1,this.columnCount-1):this.wrap?this.setCell(this.rowCount-1,this.columnCount-1):this.events.emit("focus:underflow",this.columnCount-1)}focusUp(){this.focusedRow>0?this.setCell(this.focusedRow-1,this.focusedColumn):this.events.emit("focus:underflow",this.focusedColumn)}focusDown(){this.focusedRow`\n

\n

\n

\n`)),Es=br("emojiContainer");class _s extends Or{constructor({emojis:e,showVariants:t,preview:n=!0,lazyLoader:o,category:i,fullHeight:r=!1}){super({template:js,classes:Es}),this.fullHeight=!1,this.showVariants=t,this.lazyLoader=o,this.preview=n,this.emojis=e,this.category=i,this.fullHeight=r,this.setFocus=this.setFocus.bind(this),this.triggerNextCategory=this.triggerNextCategory.bind(this),this.triggerPreviousCategory=this.triggerPreviousCategory.bind(this)}initialize(){this.grid=new ks(this.options.emojisPerRow,this.emojiCount,0,0,!this.category),this.grid.on("focus:change",this.setFocus),this.grid.on("focus:overflow",this.triggerNextCategory),this.grid.on("focus:underflow",this.triggerPreviousCategory),this.uiEvents=[Or.uiEvent("click",this.selectEmoji),Or.uiEvent("keydown",this.grid.handleKeyDown)],this.preview&&this.uiEvents.push(Or.uiEvent("mouseover",this.showPreview),Or.uiEvent("mouseout",this.hidePreview),Or.uiEvent("focus",this.showPreview,{capture:!0}),Or.uiEvent("blur",this.hidePreview,{capture:!0})),super.initialize()}setFocusedView(e,t){if(e)if("string"==typeof e){const t=this.emojis.findIndex((t=>t.emoji===e));this.grid.setFocusedIndex(t,!1),setTimeout((()=>{var e,n,o,i;const r=this.emojiViews[t].el;r.scrollIntoView();const s=null==(e=r.parentElement)?void 0:e.previousElementSibling;(null==(o=null==(n=r.parentElement)?void 0:n.parentElement)?void 0:o.parentElement).scrollTop-=null!=(i=null==s?void 0:s.offsetHeight)?i:0}))}else"first"===e.row||0===e.row?this.grid.setCell(0,e.offset,t):"last"===e.row&&this.grid.setCell(this.grid.getRowCount()-1,e.offset,t)}setActive(e,t,n){var o;e?this.setFocusedView(t,n):null==(o=this.emojiViews[this.grid.getIndex()])||o.deactivateFocus()}renderSync(){return this.emojiViews=this.emojis.map((e=>this.viewFactory.create(Cs,{emoji:e,category:this.category,lazyLoader:this.lazyLoader,renderer:this.renderer}))),this.emojiElements=this.emojiViews.map((e=>e.renderSync())),super.renderSync({emojis:this.emojiElements,i18n:this.i18n})}destroy(){super.destroy(),this.emojiViews.forEach((e=>e.destroy())),this.grid.destroy()}triggerPreviousCategory(e){this.events.emit("category:previous",e)}triggerNextCategory(e){this.category&&this.events.emit("category:next",e)}setFocus({from:e,to:t,performFocus:n}){var o,i;null==(o=this.emojiViews[e])||o.deactivateFocus(),null==(i=this.emojiViews[t])||i.activateFocus(n)}selectEmoji(e){e.stopPropagation();const t=mr(e,this.emojis);t&&this.events.emit("emoji:select",{emoji:t,showVariants:this.showVariants})}showPreview(e){const t=e.target.closest("button"),n=null==t?void 0:t.firstElementChild,o=mr(e,this.emojis);o&&this.events.emit("preview:show",o,null==n?void 0:n.cloneNode(!0))}hidePreview(e){mr(e,this.emojis)&&this.events.emit("preview:hide")}get emojiCount(){return this.emojis.length}}const Ss=new qr((({classes:e,category:t,pickerId:n,icon:o,i18n:i})=>`\n
\n

\n \n ${i.get(`categories.${t.key}`,t.message||t.key)}\n

\n \n
\n`));class Ls extends ws{constructor({category:e,showVariants:t,lazyLoader:n,emojiVersion:o}){super({category:e,showVariants:t,lazyLoader:n,template:Ss}),this.showVariants=t,this.lazyLoader=n,this.emojiVersion=o}initialize(){this.uiElements={...this.baseUIElements},super.initialize()}async render(){await this.emojiDataPromise;const e=await this.emojiData.getEmojis(this.category,this.emojiVersion);return this.emojiContainer=this.viewFactory.create(_s,{emojis:e,showVariants:this.showVariants,lazyLoader:this.lazyLoader,category:this.category.key}),super.render({category:this.category,emojis:this.emojiContainer,emojiCount:e.length,icon:Pr[this.category.key]})}}class As extends _s{constructor({category:e,emojis:t,preview:n=!0,lazyLoader:o}){super({category:e,emojis:t,showVariants:!1,preview:n,lazyLoader:o})}async addOrUpdate(e){const t=this.el.querySelector(`[data-emoji="${e.emoji}"]`);t&&(this.el.removeChild(t),this.emojis=this.emojis.filter((t=>t!==e)));const n=this.viewFactory.create(Cs,{emoji:e});if(this.el.insertBefore(n.renderSync(),this.el.firstChild),this.emojis=[e,...this.emojis.filter((t=>t!==e))],this.emojis.length>this.options.maxRecents){this.emojis=this.emojis.slice(0,this.options.maxRecents);const e=this.el.childElementCount-this.options.maxRecents;for(let t=0;t`\n
\n

\n \n ${r.get(`categories.${n.key}`,n.message||n.key)}\n

\n

\n

\n

\n

\n ${r.get("recents.none")}\n

\n
\n`),{mode:"async"});const Os=new qr((({classes:e,category:t,pickerId:n,icon:o,i18n:i})=>`\n
\n

\n \n ${i.get(`categories.${t.key}`,t.message||t.key)}\n

\n \n
\n`));class Is{constructor(){this.elements=new Map}lazyLoad(e,t){return this.elements.set(e,t),e}observe(e){if(window.IntersectionObserver){const t=new IntersectionObserver((e=>{e.filter((e=>e.intersectionRatio>0)).map((e=>e.target)).forEach((e=>{const n=this.elements.get(e);null==n||n(),t.unobserve(e)}))}),{root:e});this.elements.forEach(((e,n)=>{t.observe(n)}))}else this.elements.forEach((e=>{e()}))}}const Ps=br("emojiArea"),Ms=new qr((({classes:e})=>`\n

\n

\n

\n`),{mode:"async"}),Bs={recents:class extends ws{constructor({category:e,lazyLoader:t,provider:n}){super({category:e,showVariants:!1,lazyLoader:t,template:Ts}),this.provider=n}initialize(){this.uiElements={...this.baseUIElements,recents:Or.byClass(ys.recentEmojis)},this.appEvents={"recent:add":this.addRecent},super.initialize()}async addRecent(e){await this.emojiContainer.addOrUpdate(e),this.ui.recents.dataset.empty="false"}async render(){var e;const t=null==(e=this.provider)?void 0:e.getRecents(this.options.maxRecents);return this.emojiContainer=this.viewFactory.create(As,{emojis:t,showVariants:!1,lazyLoader:this.lazyLoader,category:this.category.key}),await super.render({category:this.category,emojis:this.emojiContainer,emojiCount:t.length,icon:Pr[this.category.key]}),this.el}},custom:class extends ws{constructor({category:e,lazyLoader:t}){super({template:Os,showVariants:!1,lazyLoader:t,category:e})}initialize(){this.uiElements={...this.baseUIElements},super.initialize()}async render(){return this.emojiContainer=this.viewFactory.create(_s,{emojis:this.customEmojis,showVariants:this.showVariants,lazyLoader:this.lazyLoader,category:this.category.key}),super.render({category:this.category,emojis:this.emojiContainer,emojiCount:this.customEmojis.length,icon:Pr[this.category.key]})}}};class zs extends Or{constructor({categoryTabs:e,categories:t,emojiVersion:n}){super({template:Ms,classes:Ps}),this.selectedCategory=0,this.scrollListenerState="active",this.lazyLoader=new Is,this.categoryTabs=e,this.categories=t,this.emojiVersion=n,this.handleScroll=function(e,t){let n=null;return()=>{n||(n=window.setTimeout((()=>{e(),n=null}),t))}}(this.handleScroll.bind(this),100)}initialize(){this.appEvents={"category:select":this.handleCategorySelect,"category:previous":this.focusPreviousCategory,"category:next":this.focusNextCategory,"focus:change":this.updateFocusedCategory},this.uiElements={emojis:Or.byClass(Ps.emojiArea)},this.uiEvents=[Or.uiEvent("scroll",this.handleScroll)],super.initialize()}get focusableEmoji(){return this.el.querySelector('[tabindex="0"]')}async render(){this.emojiCategories=this.categories.map(this.createCategory,this);const e={};return this.categories.forEach(((t,n)=>{e[`emojis-${t.key}`]=this.emojiCategories[n]})),await super.render({emojis:await Promise.all(this.emojiCategories.map((e=>e.render())))}),this.lazyLoader.observe(this.el),window.ResizeObserver&&(this.observer=new ResizeObserver((()=>{const e=this.el.scrollHeight-this.scrollHeight;this.el.scrollTop-this.scrollTop==0&&e>0&&(this.el.scrollTop+=e),this.scrollHeight=this.el.scrollHeight,this.scrollTop=this.el.scrollTop})),this.emojiCategories.forEach((e=>{this.observer.observe(e.el)}))),this.el}destroy(){super.destroy(),this.emojiCategories.forEach((e=>{var t;null==(t=this.observer)||t.unobserve(e.el),e.destroy()}))}handleCategorySelect(e,t){this.selectCategory(e,t)}createCategory(e){const t=Bs[e.key]||Ls;return this.viewFactory.create(t,{category:e,showVariants:!0,lazyLoader:this.lazyLoader,emojiVersion:this.emojiVersion,provider:this.options.recentsProvider})}determineInitialCategory(){var e;return this.options.initialCategory&&this.categories.find((e=>e.key===this.options.initialCategory))?this.options.initialCategory:null==(e=this.categories.find((e=>"recents"!==e.key)))?void 0:e.key}determineFocusTarget(e){const t=this.emojiCategories.find((t=>t.category.key===e));return this.options.initialEmoji&&(null==t?void 0:t.el.querySelector(`[data-emoji="${this.options.initialEmoji}"]`))?this.options.initialEmoji:"button"}reset(e=!0){this.events.emit("preview:hide");const t=this.determineInitialCategory();t&&(this.selectCategory(t,{focus:this.determineFocusTarget(t),performFocus:e,scroll:"jump"}),this.selectedCategory=this.getCategoryIndex(t))}getCategoryIndex(e){return this.categories.findIndex((t=>t.key===e))}focusPreviousCategory(e){this.selectedCategory>0&&this.focusCategory(this.selectedCategory-1,{row:"last",offset:null!=e?e:this.options.emojisPerRow})}focusNextCategory(e){this.selectedCategory{var o;return e<(null==(o=this.emojiCategories[n+1])?void 0:o.el.offsetTop)})),o={changeFocusable:!1,performFocus:!1,scroll:!1};0===e?this.categoryTabs.setActiveTab(0,o):Math.floor(e)===Math.floor(t)||n<0?this.categoryTabs.setActiveTab(this.categories.length-1,o):this.categoryTabs.setActiveTab(n,o)}}const $s=new qr((({classList:e,classes:t,icon:n,message:o})=>`\n

\n

\n

${o}

\n

\n`)),Fs=br("error","iconContainer","title");class Rs extends Or{constructor({message:e,icon:t="warning",template:n=$s,className:o}){super({template:n,classes:Fs}),this.message=e,this.icon=t,this.className=o}renderSync(){const e=[Fs.error,this.className].join(" ").trim();return super.renderSync({message:this.message,icon:this.icon,classList:e})}}const Ns=new qr((({classList:e,classes:t,icon:n,i18n:o,message:i})=>`\n

\n

\n

${i}

\n \n

\n`)),Ds=br("dataError");class Vs extends Rs{constructor({message:e}){super({message:e,template:Ns,className:Ds.dataError})}initialize(){this.uiElements={retryButton:"button"},this.uiEvents=[Or.childEvent("retryButton","click",this.onRetry)],super.initialize()}async onRetry(){this.emojiData?await this.emojiData.delete():await this.options.dataStore.deleteDatabase(this.options.locale),this.events.emit("reinitialize");const e=await _r(this.options.locale,this.options.dataStore,this.options.messages,this.options.emojiData,this.emojiData);this.viewFactory.setEmojiData(e),this.events.emit("data:ready",e)}}const Hs=br("preview","previewEmoji","previewName","tagList","tag"),qs=new qr((({classes:e,tag:t})=>`\n
  • ${t}
  • \n`)),Us=new qr((({classes:e})=>`\n

    \n

    \n

    \n

      \n

      \n`));class Ws extends Or{constructor(){super({template:Us,classes:Hs})}initialize(){this.uiElements={emoji:Or.byClass(Hs.previewEmoji),name:Or.byClass(Hs.previewName),tagList:Or.byClass(Hs.tagList)},this.appEvents={"preview:show":this.showPreview,"preview:hide":this.hidePreview},super.initialize()}showPreview(e,t){if(this.ui.emoji.replaceChildren(t),this.ui.name.textContent=e.label,e.tags){this.ui.tagList.style.display="flex";const t=e.tags.map((e=>qs.renderSync({tag:e,classes:Hs})));this.ui.tagList.replaceChildren(...t)}}hidePreview(){this.ui.emoji.replaceChildren(),this.ui.name.textContent="",this.ui.tagList.replaceChildren()}}const Ks=new qr((({classes:e,i18n:t})=>`\n \n`)),Ys=new qr((({classes:e,i18n:t})=>`\n

      \n \n \n

      \n`),{mode:"async"}),Xs=br("searchContainer","searchField","clearButton","searchAccessory","clearSearchButton","notFound");class Js extends Or{constructor({categories:e,emojiVersion:t}){super({template:Ys,classes:Xs}),this.categories=e.filter((e=>"recents"!==e.key)),this.emojiVersion=t,this.search=function(e,t){let n=null;return(...o)=>{n&&window.clearTimeout(n),n=window.setTimeout((()=>{e(...o),n=null}),t)}}(this.search.bind(this),100)}initialize(){this.uiElements={searchField:Or.byClass(Xs.searchField),searchAccessory:Or.byClass(Xs.searchAccessory)},this.uiEvents=[Or.childEvent("searchField","keydown",this.onKeyDown),Or.childEvent("searchField","input",this.onSearchInput)],super.initialize()}async render(){return await super.render(),this.searchIcon=Mr("search"),this.notFoundMessage=this.viewFactory.create(Rs,{message:this.i18n.get("search.notFound"),className:Xs.notFound,icon:"sad"}),this.notFoundMessage.renderSync(),this.errorMessage=this.viewFactory.create(Rs,{message:this.i18n.get("search.error")}),this.errorMessage.renderSync(),this.clearSearchButton=Ks.render({classes:Xs,i18n:this.i18n}),this.clearSearchButton.addEventListener("click",(e=>this.onClearSearch(e))),this.searchField=this.ui.searchField,this.showSearchIcon(),this.el}showSearchIcon(){this.showSearchAccessory(this.searchIcon)}showClearSearchButton(){this.showSearchAccessory(this.clearSearchButton)}showSearchAccessory(e){this.ui.searchAccessory.replaceChildren(e)}clear(){this.searchField.value="",this.showSearchIcon()}focus(){this.searchField.focus()}onClearSearch(e){var t;e.stopPropagation(),this.searchField.value="",null==(t=this.resultsContainer)||t.destroy(),this.resultsContainer=null,this.showSearchIcon(),this.events.emit("content:show"),this.searchField.focus()}handleResultsKeydown(e){this.resultsContainer&&"Escape"===e.key&&this.onClearSearch(e)}onKeyDown(e){var t;"Escape"===e.key&&this.searchField.value?this.onClearSearch(e):("Enter"===e.key||"ArrowDown"===e.key)&&this.resultsContainer&&(e.preventDefault(),null==(t=this.resultsContainer.el.querySelector('[tabindex="0"]'))||t.focus())}onSearchInput(e){this.searchField.value?(this.showClearSearchButton(),this.search()):this.onClearSearch(e)}async search(){var e;if(this.searchField.value)try{const t=await this.emojiData.searchEmojis(this.searchField.value,this.customEmojis,this.emojiVersion,this.categories);if(this.events.emit("preview:hide"),t.length){const n=new Is;this.resultsContainer=this.viewFactory.create(_s,{emojis:t,fullHeight:!0,showVariants:!0,lazyLoader:n}),this.resultsContainer.renderSync(),null!=(e=this.resultsContainer)&&e.el&&(n.observe(this.resultsContainer.el),this.resultsContainer.setActive(!0,{row:0,offset:0},!1),this.resultsContainer.el.addEventListener("keydown",(e=>this.handleResultsKeydown(e))),this.events.emit("content:show",this.resultsContainer))}else this.events.emit("content:show",this.notFoundMessage)}catch{this.events.emit("content:show",this.errorMessage)}}}const Zs=new qr((({classes:e})=>`\n

      \n

      \n

      \n

      \n

      \n`)),Gs=br("variantOverlay","variantPopup"),Qs={easing:"ease-in-out",duration:250,fill:"both"},ea={opacity:[0,1]},ta={opacity:[0,1],transform:["scale3d(0.8, 0.8, 0.8)","scale3d(1, 1, 1)"]};class na extends Or{constructor({emoji:e,parent:t}){super({template:Zs,classes:Gs,parent:t}),this.focusedEmojiIndex=0,this.focusTrap=new Sr,this.animateShow=()=>Promise.all([yr(this.el,ea,Qs,this.options),yr(this.ui.popup,ta,Qs,this.options)]),this.emoji=e}initialize(){this.uiElements={popup:Or.byClass(Gs.variantPopup)},this.uiEvents=[Or.uiEvent("click",this.handleClick),Or.uiEvent("keydown",this.handleKeydown)],super.initialize()}animateHide(){const e={...Qs,direction:"reverse"};return Promise.all([yr(this.el,ea,e,this.options),yr(this.ui.popup,ta,e,this.options)])}async hide(){await this.animateHide(),this.events.emit("variantPopup:hide")}handleKeydown(e){"Escape"===e.key&&(this.hide(),e.stopPropagation())}handleClick(e){this.ui.popup.contains(e.target)||this.hide()}getEmoji(e){return this.renderedEmojis[e]}setFocusedEmoji(e){this.getEmoji(this.focusedEmojiIndex).tabIndex=-1,this.focusedEmojiIndex=e;const t=this.getEmoji(this.focusedEmojiIndex);t.tabIndex=0,t.focus()}destroy(){this.emojiContainer.destroy(),this.focusTrap.deactivate(),super.destroy()}renderSync(){const e=[{...this.emoji,skins:null},...(this.emoji.skins||[]).map((e=>({...e,label:this.emoji.label,tags:this.emoji.tags})))];return this.emojiContainer=this.viewFactory.create(_s,{emojis:e,preview:!1}),super.renderSync({emojis:this.emojiContainer}),e.length`\n
    • \n
    • \n`)),ia=br("categoryTab","categoryTabActive","categoryButton");class ra extends Or{constructor({category:e,icon:t}){super({template:oa,classes:ia}),this.isActive=!1,this.category=e,this.icon=t}initialize(){this.uiElements={button:Or.byClass(ia.categoryButton)},this.uiEvents=[Or.childEvent("button","click",this.selectCategory),Or.childEvent("button","focus",this.selectCategory)],super.initialize()}renderSync(){return super.renderSync({category:this.category,icon:this.icon}),this.ui.button.ariaSelected="false",this.el}setActive(e,t={}){const{changeFocusable:n,performFocus:o,scroll:i}={changeFocusable:!0,performFocus:!0,scroll:!0,...t};this.el.classList.toggle(ia.categoryTabActive,e),n&&(this.ui.button.tabIndex=e?0:-1,this.ui.button.ariaSelected=e.toString()),e&&o&&(this.ui.button.focus(),i&&this.events.emit("category:select",this.category.key,{scroll:"animate",focus:"button",performFocus:!1})),this.isActive=e}selectCategory(){this.isActive||this.events.emit("category:select",this.category.key,{scroll:"animate",focus:"button",performFocus:!0})}}const sa=new qr((({classes:e})=>`\n

      \n

        \n \n

      \n

      \n`)),aa=br("categoryButtons","categoryButtonsContainer");class ca extends Or{constructor({categories:e}){super({template:sa,classes:aa}),this.activeCategoryIndex=0,this.categories=e}initialize(){this.keyBindings={ArrowLeft:this.stepSelectedTab(-1),ArrowRight:this.stepSelectedTab(1)},this.uiEvents=[Or.uiEvent("scroll",this.checkOverflow)],super.initialize()}checkOverflow(){const e=Math.abs(this.el.scrollLeft-(this.el.scrollWidth-this.el.offsetWidth))>1,t=this.el.scrollLeft>0;this.el.className="categoryButtonsContainer",t&&e?this.el.classList.add("has-overflow-both"):t?this.el.classList.add("has-overflow-left"):e&&this.el.classList.add("has-overflow-right")}renderSync(){return this.tabViews=this.categories.map((e=>this.viewFactory.create(ra,{category:e,icon:Pr[e.key]}))),super.renderSync({tabs:this.tabViews.map((e=>e.renderSync()))}),this.el}get currentCategory(){return this.categories[this.activeCategoryIndex]}get currentTabView(){return this.tabViews[this.activeCategoryIndex]}setActiveTab(e,t={}){this.checkOverflow();const n=this.currentTabView,o=this.tabViews[e];n.setActive(!1,t),o.setActive(!0,t),this.activeCategoryIndex=e}getTargetCategory(e){return e<0?this.categories.length-1:e>=this.categories.length?0:e}stepSelectedTab(e){return()=>{const t=this.activeCategoryIndex+e;this.setActiveTab(this.getTargetCategory(t),{changeFocusable:!0,performFocus:!0})}}}const la=[{version:15,emoji:String.fromCodePoint(129768)},{version:14,emoji:String.fromCodePoint(128733)},{version:13,emoji:String.fromCodePoint(129729)},{version:12,emoji:String.fromCodePoint(129449)},{version:11,emoji:String.fromCodePoint(129463)},{version:5,emoji:String.fromCodePoint(129322)},{version:4,emoji:String.fromCodePoint(9877)},{version:3,emoji:String.fromCodePoint(129314)},{version:2,emoji:String.fromCodePoint(128488)},{version:1,emoji:String.fromCodePoint(128512)}];function ua(){var e;const t=la.find((e=>function(e){const t=document.createElement("canvas").getContext("2d");if(t)return t.textBaseline="top",t.font="32px Arial",t.fillText(e,0,0),0!==t.getImageData(16,16,1,1).data[0]}(e.emoji)));return null!=(e=null==t?void 0:t.version)?e:1}function da(e,t){return Array.from({length:e},(()=>t)).join("")}function ha(e){const{emojiCount:t,classes:n,theme:o,className:i,categoryCount:r}=e;return`\n

      \n ${(({showHeader:t,classes:n})=>t?`\n

      \n ${(({showSearch:e,classes:t})=>e?`\n

      \n

      \n

      \n `:"")(e)}\n ${(({showCategoryTabs:e,classes:t})=>e?`\n

      \n ${da(r,`

      `)}\n

      \n `:"")(e)}\n

      \n `:"")(e)}\n

      \n

      \n

      \n ${da(t,`

      `)}\n

      \n

      \n ${(({showPreview:e,classes:t})=>e?`\n

      \n

      \n

      \n

        \n ${da(3,`
      • `)}\n

      \n

      \n `:"")(e)}\n

      \n `}const pa=new qr((e=>e.isLoaded?function(e){const{classes:t,theme:n,className:o=""}=e;return`\n

      \n ${function({showHeader:e,classes:t}){return e?`\n

      \n \n \n

      \n `:""}(e)}\n

      \n

      \n

      \n

      \n

      \n `}(e):ha(e))),fa=br("picker","skeleton","placeholder","searchSkeleton","searchInput","categoryTabsSkeleton","headerSkeleton","categoryTab","contentSkeleton","categoryName","emojiGrid","emoji","previewSkeleton","previewEmoji","previewName","tagList","tag","overlay","content","fullHeight","pluginContainer","header"),ma={emojisPerRow:"--emojis-per-row",visibleRows:"--row-count",emojiSize:"--emoji-size"};class ga extends Or{constructor(){super({template:pa,classes:fa}),this.pickerReady=!1,this.externalEvents=new vs,this.updaters={styleProperty:e=>t=>this.el.style.setProperty(ma[e],t.toString()),theme:e=>{this.el.classList.remove(this.options.theme),this.el.classList.add(e)},className:e=>{this.options.className&&this.el.classList.remove(this.options.className),this.el.classList.add(e)},emojisPerRow:this.updateStyleProperty.bind(this,"emojisPerRow"),emojiSize:this.updateStyleProperty.bind(this,"emojiSize"),visibleRows:this.updateStyleProperty.bind(this,"visibleRows")}}initialize(){this.uiElements={pickerContent:Or.byClass(fa.content),header:Or.byClass(fa.header)},this.uiEvents=[Or.uiEvent("keydown",this.handleKeyDown)],this.appEvents={error:this.onError,reinitialize:this.reinitialize,"data:ready":this.onDataReady,"content:show":this.showContent,"variantPopup:hide":this.hideVariantPopup,"emoji:select":this.selectEmoji},super.initialize(),this.options.recentsProvider}destroy(){var e,t;super.destroy(),null==(e=this.search)||e.destroy(),this.emojiArea.destroy(),null==(t=this.categoryTabs)||t.destroy(),this.events.removeAll(),this.externalEvents.removeAll()}clearRecents(){this.options.recentsProvider.clear()}addEventListener(e,t){this.externalEvents.on(e,t)}removeEventListener(e,t){this.externalEvents.off(e,t)}initializePickerView(){this.pickerReady&&(this.showContent(),this.emojiArea.reset(!1))}handleKeyDown(e){const t=e.ctrlKey||e.metaKey;"s"===e.key&&t&&this.search&&(e.preventDefault(),this.search.focus())}buildChildViews(){return this.options.showPreview&&(this.preview=this.viewFactory.create(Ws)),this.options.showSearch&&(this.search=this.viewFactory.create(Js,{categories:this.categories,emojiVersion:this.emojiVersion})),this.options.showCategoryTabs&&(this.categoryTabs=this.viewFactory.create(ca,{categories:this.categories})),this.currentView=this.emojiArea=this.viewFactory.create(zs,{categoryTabs:this.categoryTabs,categories:this.categories,emojiVersion:this.emojiVersion}),[this.preview,this.search,this.emojiArea,this.categoryTabs]}setStyleProperties(){this.options.showSearch||this.el.style.setProperty("--search-height-full","0px"),this.options.showCategoryTabs||(this.el.style.setProperty("--category-tabs-height","0px"),this.el.style.setProperty("--category-tabs-offset","0px")),this.options.showPreview||this.el.style.setProperty("--emoji-preview-height-full","0px"),Object.keys(ma).forEach((e=>{this.options[e]&&this.el.style.setProperty(ma[e],this.options[e].toString())}))}updateStyleProperty(e,t){this.el.style.setProperty(ma[e],t.toString())}reinitialize(){this.renderSync()}onError(e){const t=this.viewFactory.create(Vs,{message:this.i18n.get("error.load")}),n=this.el.offsetHeight||375;throw this.el.style.height=`${n}px`,this.el.replaceChildren(t.renderSync()),e}async onDataReady(e){const t=this.el;try{e?this.emojiData=e:await this.emojiDataPromise,"auto"===this.options.emojiVersion?this.emojiVersion=ua()||parseFloat("14.0"):this.emojiVersion=this.options.emojiVersion,this.categories=await this.emojiData.getCategories(this.options);const[n,o,i,r]=this.buildChildViews();await super.render({isLoaded:!0,search:o,categoryTabs:r,emojiArea:i,preview:n,showHeader:Boolean(this.search||this.categoryTabs),theme:this.options.theme,className:this.options.className}),this.el.style.setProperty("--category-count",this.categories.length.toString()),this.pickerReady=!0,t.replaceWith(this.el),this.setStyleProperties(),this.initializePickerView(),this.setInitialFocus(),this.externalEvents.emit("data:ready")}catch(e){this.events.emit("error",e)}}renderSync(){var e;let t=(null==(e=this.options.categories)?void 0:e.length)||10;if(this.options.showRecents&&(t+=1),super.renderSync({isLoaded:!1,theme:this.options.theme,showSearch:this.options.showSearch,showPreview:this.options.showPreview,showCategoryTabs:this.options.showCategoryTabs,showHeader:this.options.showSearch||this.options.showCategoryTabs,emojiCount:this.options.emojisPerRow*this.options.visibleRows,categoryCount:t}),this.el.style.setProperty("--category-count",t.toString()),!this.options.rootElement)throw new Error("Picker must be given a root element via the rootElement option");return this.options.rootElement.replaceChildren(this.el),this.setStyleProperties(),this.pickerReady&&this.initializePickerView(),this.el}getInitialFocusTarget(){if(typeof this.options.autoFocus<"u")switch(this.options.autoFocus){case"emojis":return this.emojiArea.focusableEmoji;case"search":return this.search;case"auto":return this.search||this.emojiArea.focusableEmoji;default:return null}if(!0===this.options.autoFocusSearch)return console.warn("options.autoFocusSearch is deprecated, please use options.focusTarget instead"),this.search}setInitialFocus(){var e;!this.pickerReady||null==(e=this.getInitialFocusTarget())||e.focus()}reset(e=!0){var t;this.pickerReady&&(this.emojiArea.reset(e),this.showContent(this.emojiArea)),null==(t=this.search)||t.clear(),this.hideVariantPopup()}showContent(e=this.emojiArea){var t,n;e!==this.currentView&&(this.currentView!==this.emojiArea&&(null==(t=this.currentView)||t.destroy()),this.ui.pickerContent.classList.toggle(fa.fullHeight,e!==this.emojiArea),this.ui.pickerContent.replaceChildren(e.el),this.currentView=e,e===this.emojiArea?(this.emojiArea.reset(),this.categoryTabs&&this.ui.header.appendChild(this.categoryTabs.el)):null==(n=this.categoryTabs)||n.el.remove())}hideVariantPopup(){var e;null==(e=this.variantPopup)||e.destroy()}isPickerClick(e){var t,n;const o=e.target,i=this.el.contains(o),r=null==(n=null==(t=this.variantPopup)?void 0:t.el)?void 0:n.contains(o);return i||r}async selectEmoji({emoji:e}){var t,n;(null==(t=e.skins)?void 0:t.length)&&this.options.showVariants&&!this.isVariantPopupOpen?this.showVariantPopup(e):(await(null==(n=this.variantPopup)?void 0:n.animateHide()),this.events.emit("variantPopup:hide"),await this.emitEmoji(e))}get isVariantPopupOpen(){return this.variantPopup&&!this.variantPopup.isDestroyed}async showVariantPopup(e){const t=document.activeElement;this.events.once("variantPopup:hide",(()=>{null==t||t.focus()})),this.variantPopup=this.viewFactory.create(na,{emoji:e,parent:this.el}),this.el.appendChild(this.variantPopup.renderSync()),this.variantPopup.activate()}async emitEmoji(e){this.externalEvents.emit("emoji:select",await this.renderer.doEmit(e)),this.options.recentsProvider.addOrUpdateRecent(e,this.options.maxRecents),this.events.emit("recent:add",e)}updateOptions(e){Object.keys(e).forEach((t=>{this.updaters[t](e[t])})),Object.assign(this.options,e)}}class va{constructor({events:e,i18n:t,renderer:n,emojiData:o,options:i,customEmojis:r=[],pickerId:s}){this.events=e,this.i18n=t,this.renderer=n,this.emojiData=o,this.options=i,this.customEmojis=r,this.pickerId=s}setEmojiData(e){this.emojiData=Promise.resolve(e)}create(e,...t){const n=new e(...t);return n.setPickerId(this.pickerId),n.setEvents(this.events),n.setI18n(this.i18n),n.setRenderer(this.renderer),n.setEmojiData(this.emojiData),n.setOptions(this.options),n.setCustomEmojis(this.customEmojis),n.viewFactory=this,n.initialize(),n}}var ya;class wa{constructor(e={}){sr(this,ya,void 0),ar(this,ya,new Map(Object.entries(e)))}get(e,t=e){return rr(this,ya).get(e)||t}}ya=new WeakMap;let ba=0;const xa=function(){let e=!1;return function(t){ms&&!e&&(function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&!(typeof document>"u")){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(t),e=!0)}}();function Ca(e){return function(e){if(Array.isArray(e))return ka(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return ka(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return ka(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ka(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n*{font-family:var(--ui-font)}.picmo-picker.skeleton{background:var(--background-color);border-radius:var(--border-radius);border:1px solid var(--border-color);font-family:var(--ui-font);width:var(--picker-width);color:var(--secondary-text-color)}.picmo-picker.skeleton *{box-sizing:border-box}.picmo-picker.skeleton .placeholder{background:var(--placeholder-background-color);position:relative;overflow:hidden}.picmo-picker.skeleton .placeholder:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 100%);animation:shine 2s infinite;content:""}.picmo-picker.skeleton .headerSkeleton{background-color:var(--secondary-background-color);padding-top:8px;padding-bottom:8px;display:flex;flex-direction:column;overflow:hidden;gap:8px;border-bottom:1px solid var(--border-color);width:var(--picker-width)}.picmo-picker.skeleton .searchSkeleton{padding:0 8px;height:var(--search-height)}.picmo-picker.skeleton .searchSkeleton .searchInput{width:100%;height:28px;border-radius:3px}.picmo-picker.skeleton .categoryTabsSkeleton{height:var(--category-tabs-height);display:flex;flex-direction:row;align-items:center;justify-self:center;width:calc(2rem * var(--category-count, 1))}.picmo-picker.skeleton .categoryTabsSkeleton .categoryTab{width:25px;height:25px;padding:2px;border-radius:5px;margin:.25em}.picmo-picker.skeleton .contentSkeleton{height:var(--content-height);padding-right:8px;opacity:.7}.picmo-picker.skeleton .contentSkeleton .categoryName{width:50%;height:1rem;margin:.5rem;box-sizing:border-box}.picmo-picker.skeleton .contentSkeleton .emojiGrid{display:grid;justify-content:space-between;gap:1px;padding:0 .5em;grid-template-columns:repeat(var(--emojis-per-row),calc(var(--emoji-size) * var(--emoji-size-multiplier)));grid-auto-rows:calc(var(--emoji-size) * var(--emoji-size-multiplier));align-items:center;justify-items:center;width:var(--picker-width)}.picmo-picker.skeleton .contentSkeleton .emojiGrid .emoji{width:var(--emoji-size);height:var(--emoji-size);border-radius:50%}.picmo-picker.skeleton .previewSkeleton{height:var(--emoji-preview-height);border-top:1px solid var(--border-color);display:grid;align-items:center;padding:.5em;gap:6px;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"emoji name" "emoji tags"}.picmo-picker.skeleton .previewSkeleton .previewEmoji{grid-area:emoji;border-radius:50%;width:var(--emoji-preview-size);height:var(--emoji-preview-size)}.picmo-picker.skeleton .previewSkeleton .previewName{grid-area:name;height:.8em;width:80%}.picmo-picker.skeleton .previewSkeleton .tagList{grid-area:tags;list-style-type:none;display:flex;flex-direction:row;padding:0;margin:0}.picmo-picker.skeleton .previewSkeleton .tagList .tag{border-radius:3px;padding:2px 8px;margin-right:.25em;height:1em;width:20%}.overlay{background:rgba(0,0,0,.75);height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.content{position:relative;overflow:hidden;height:var(--content-height)}.content.fullHeight{height:calc(var(--content-height) + var(--category-tabs-height) + var(--category-tabs-offset));overflow-y:auto;scrollbar-color:var(--scrollbar-color) var(--scrollbar-background-color);scrollbar-width:thin}.content.fullHeight::-webkit-scrollbar{background:var(--scrollbar-background-color);width:1.1em}.content.fullHeight::-webkit-scrollbar-thumb{background:var(--scrollbar-color);background-clip:padding-box;height:1em;border-radius:.5em}.pluginContainer{margin:.5em;display:flex;flex-direction:row}.header{background-color:var(--secondary-background-color);padding-top:8px;padding-bottom:8px;display:grid;gap:8px;border-bottom:1px solid var(--border-color)}@media (prefers-reduced-motion: reduce){.placeholder{background:var(--placeholder-background-color);position:relative;overflow:hidden}.placeholder:after{display:none}}.picmo-picker .preview{border-top:1px solid var(--border-color);display:grid;align-items:center;gap:6px;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"emoji name" "emoji tags";height:var(--emoji-preview-height);box-sizing:border-box;padding:.5em;position:relative;background:var(--preview-background-color)}.picmo-picker .preview .previewEmoji{grid-area:emoji;font-size:var(--emoji-preview-size);font-family:var(--emoji-font);width:1.25em;display:flex;align-items:center;justify-content:center}.picmo-picker .preview .previewName{grid-area:name;color:var(--text-color);font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.picmo-picker .preview .tagList{grid-area:tags;list-style-type:none;display:flex;flex-direction:row;padding:0;margin:0;font-size:.75em;overflow:hidden}.picmo-picker .preview .tag{border-radius:3px;background:var(--tag-background-color);color:var(--text-color);padding:2px 8px;margin-right:.25em;white-space:nowrap}.picmo-picker .preview .tag:last-child{margin-right:0}.picmo-picker .searchContainer{display:flex;height:var(--search-height);box-sizing:border-box;padding:0 8px;position:relative}.picmo-picker .searchContainer .searchField{background:var(--search-background-color);border-radius:3px;border:none;box-sizing:border-box;color:var(--text-color);font-size:.9em;outline:none;padding:.5em 2.25em .5em .5em;width:100%}.picmo-picker .searchContainer .searchField:focus{background:var(--search-focus-background-color)}.picmo-picker .searchContainer .searchField::placeholder{color:var(--search-placeholder-color)}.picmo-picker .searchContainer .searchAccessory{color:var(--search-icon-color);height:100%;position:absolute;right:1em;top:0;width:1.25rem;display:flex;align-items:center}.picmo-picker .searchContainer .searchAccessory svg{fill:var(--search-icon-color)}.picmo-picker .searchContainer .clearButton{border:0;color:var(--search-icon-color);background:transparent;cursor:pointer}.picmo-picker .searchContainer .clearSearchButton{cursor:pointer;border:none;background:transparent;color:var(--search-icon-color);font-size:1em;width:100%;height:100%;display:flex;align-items:center;padding:0}.picmo-picker .searchContainer .notFound [data-icon]{fill:#f3e265}.picmo-picker .variantOverlay{background:var(--overlay-background-color);border-radius:5px;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.picmo-picker .variantOverlay .variantPopup{background:var(--variant-popup-background-color);border-radius:5px;margin:.5em;padding:.5em;text-align:center;user-select:none;display:flex;align-items:center;justify-content:center}.customEmoji{width:1em;height:1em}@keyframes shine{to{transform:translate(100%)}}.picmo-picker .imagePlaceholder{width:2rem;height:2rem;border-radius:50%}.placeholder{background:#DDDBDD;position:relative}.placeholder:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 100%);animation:shine 2s infinite;content:""}\n');const t=function(e={}){return{...cs,...e,renderer:e.renderer||new Jr,recentsProvider:e.recentsProvider||new as}}(e),n=((null==t?void 0:t.custom)||[]).map((e=>({...e,custom:!0,tags:["custom",...e.tags||[]]}))),o=new gs,i=function(e){return _r(e.locale,e.dataStore,e.messages,e.emojiData)}(t),r=new wa(t.i18n);i.then((e=>{o.emit("data:ready",e)})).catch((e=>{o.emit("error",e)}));const s=new va({events:o,i18n:r,customEmojis:n,renderer:t.renderer,options:t,emojiData:i,pickerId:`picmo-${Date.now()}-${ba++}`}).create(ga);return s.renderSync(),s},window.darkTheme=Ar,qi.start(),window.isInViewport=function(e){var t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)},window.lazyLoadImages=function(){for(var e=document.getElementsByClassName("lazyload"),t=0;t1024&&(e.classList.contains("pinned")?(e.classList.remove("pt-10"),e.classList.remove("pt-1")):window.scrollY>50?(console.log("entered"+window.scrollY),e.classList.remove("pt-10"),e.classList.add("pt-1")):(e.classList.remove("pt-1"),e.classList.add("pt-10")))},window.notificationOpen=!1,window.notificationTimeout=null,window.notficationRemove=null,window.notification={show:function(e,t){clearTimeout(notificationTimeout),clearTimeout(notficationRemove),document.getElementById("notification")&&document.getElementById("notification").remove();var n="text-blue-400",o="Notice";switch(e){case"success":n="text-green-400",o="Success";break;case"warning":n="text-orange-400",o="Warning";break;case"error":n="text-red-400",o="Error"}var i='

      \n \n

      \n

      '+o+'

      \n

      '+t+"

      \n

      \n

      ",r=document.createElement("div");r.className="fixed bottom-0 md:top-0 right-0 z-50 md:mt-3 md:mr-3 transition-all duration-300 ease-out transform translate-y-2 md:translate-y-0 md:translate-x-2 opacity-0",r.id="notification",r.innerHTML=i,document.getElementById("app").appendChild(r);for(var s=document.getElementsByClassName("close-notification"),a=0;a11){n=e.target.value.replace(/\D/g,"").match(/(\d{2})(\d{5})(\d{4})/);e.target.value="("+n[1]+") "+n[2]+"-"+n[3]}}else if(3==t.length){n=e.target.value.replace(/\D/g,"").match(/(\d{3})/);e.target.value="("+n[1]+") "}else if(6==t.length){n=e.target.value.replace(/\D/g,"").match(/(\d{3})(\d{3})/);e.target.value="("+n[1]+") "+n[2]+" "}else if(10==t.length){n=e.target.value.replace(/\D/g,"").match(/(\d{3})(\d{3})(\d{4})/);e.target.value="("+n[1]+") "+n[2]+" "+n[3]}else if(t.length>10){n=e.target.value.replace(/\D/g,"").match(/(\d{3})(\d{3})(\d{4})/);e.target.value="("+n[1]+") "+n[2]+" "+n[3]}})),window.checkoutComplete=function(e){var t=e.checkout.id;Paddle.Order.details(t,(function(e){console.log(e),document.getElementById("loadMsg").innerText="Finishing Up Your Order",document.getElementById("loading").classList.remove("invisible");var t=null;e&&void 0!==e.order&&void 0!==e.order.customer&&void 0!==e.order.customer.email&&(t=e.order.customer.email),axios.post("/paddle/checkout",{_token:document.querySelector("meta[name='csrf-token']").getAttribute("content"),email:t,checkout_id:e.checkout.checkout_id}).then((function(e){console.log(e.data),1==parseInt(e.data.status)&&("/tails/beta"==window.location.pathname?window.location="/tails/beta":"undefined"!=typeof redirectAfterPurchase?window.location=redirectAfterPurchase:window.location="/welcome")}))}))},window.cancelComplete=function(e){console.log("callback"),console.log(e);var t=e.checkout.id;axios.post("/paddle/cancel",{_token:document.querySelector("meta[name='csrf-token']").getAttribute("content"),id:t}).then((function(e){console.log(e.data),1==parseInt(e.data.status)&&(window.location="/settings/subscription")}))},document.getElementById("post_id")&&axios.post("/api/views/posts/"+document.getElementById("post_id").value).then((function(e){console.log(e)})),window.addEventListener("notification",(function(e){notification.show(e.detail.type,e.detail.message)})),window.addEventListener("show-notification",(function(e){showNotification(e.detail.amount,e.detail.message)})),window.contentModalOpen=!1,window.menuLoaded=!1,document.onkeydown=function(e){27==(e=e||window.event).keyCode&&(document.getElementById("content-modal").dispatchEvent(new CustomEvent("close-modal",{detail:{}})),document.getElementsByClassName("search-input")[0].blur())},window.returnBack=function(){window.history.back()},window.setMenuItemActive=function(e){var t,n,o=document.querySelector(".menu-item-active"),i=e.dataset.active;(i=(i=i.split(" ")).filter((function(e){return e})),console.log("adding: "),console.log(i),o)&&(n=o.classList).remove.apply(n,Ca(i));(t=e.classList).add.apply(t,Ca(i));var r=e.getElementsByTagName("svg")[0];r.classList.remove("group-hover:translate-x-0","-translate-x-1"),r.classList.add("translate-x-1","opacity-0")},window.appReady=function(){window.renderResponsiveFunctionality()},window.renderResponsiveFunctionality=function(){window.innerWidth<1024&&(window.app.leftMenuPinned=!1);for(var e=document.querySelectorAll(".main-dropdown-menu"),t=0;t{document.addEventListener("DOMContentLoaded",(function(e){checkForFloatingSushiAvailability()})),window.checkForFloatingSushiAvailability=function(){fetch("/points/floating_sp_eligibility").then((function(e){return e.json()})).then((function(e){if(1==parseInt(e)){var t=Math.floor(3*Math.random()+1);if(1==parseInt(t)){var n=Math.round(60*Math.random())+10;setTimeout((function(){window.showSushi()}),n*=1e3)}}}))},window.showSushi=function(){var e=Math.floor(9*Math.random())+1;floating({content:'Explaining the Laravel Public Folder (10)',number:1,duration:9,repeat:1,size:5})},window.sushiClick=function(e){e.classList.add("scale-110"),setTimeout((function(){e.classList.remove("scale-110"),e.classList.add("scale-0"),setTimeout((function(){e.remove()}),200)}),200),fetch("/points/floating_sp_eligibility",{headers:{"Content-Type":"application/json",Accept:"application/json","X-Requested-With":"XMLHttpRequest","X-CSRF-Token":document.querySelector("meta[name='csrf-token']").getAttribute("content")},method:"post",credentials:"same-origin"}).then((function(e){return e.json()})).then((function(e){1==parseInt(e)?showNotification(1,"Floating Sushi"):ahahah()}))},window.ahahah=function(){var e=document.createElement("div");e.id="ahahah",e.className="z-30 bottom-0 left-1/2 -translate-x-1/2 translate-y-full flex max-w-sm w-full justify-between fixed transition duration-200 ease-out transform bg-white rounded-t-lg shadow-2xl bg-white",e.innerHTML='Explaining the Laravel Public Folder (11)\n

      \n

      \n

      ',document.body.appendChild(e),setTimeout((function(){document.getElementById("ahahah").classList.remove("translate-y-full"),document.getElementById("ahahah-video").play()})),setTimeout((function(){document.getElementById("ahahah").classList.add("translate-y-full"),setTimeout((function(){document.getElementById("ahahah").remove()}),200)}),3e3)},window.showNotification=function(e,t){var n=1==e?"":"s",o=document.createElement("div");o.id="sushi_points",o.className="bottom-0 left-1/2 flex justify-between transition -translate-x-1/2 duration-300 ease-out transform translate-y-64 theme-bg rounded-t-lg shadow-2xl",o.innerHTML='

      Explaining the Laravel Public Folder (12)

      +'+e+" Sushi Point"+n+'!

      Nice Job! You\'ve just earned '+e+" Sushi Point"+n+' for accomplishing

      ',document.body.appendChild(o),new Audio("https://cdn.devdojo.com/assets/audio/coin.mp3").play(),t&&(document.getElementById("points_reason").innerHTML=t),setTimeout((function(){document.getElementById("sushi_points").classList.remove("translate-y-64")})),setTimeout((function(){document.getElementById("sushi_points").classList.add("translate-y-64"),setTimeout((function(){document.getElementById("sushi_points").remove()}),1e3)}),4e3)}},779:()=>{window.history.scrollRestoration="manual";var e=new Event("ajax-link-clicked");document.addEventListener("DOMContentLoaded",(function(t){var n=document.getElementById("content"),o=(document.getElementById("leftMenu"),document.getElementById("loading")),i=document.getElementById("footerjs"),r=!0,s=!1,a=["/tails","/wave","/saasadventure","/learn","/markdownx","/markdownx/docs","/wordsmith","/pro","/featured/info","/devblog","/sponsorship","/featured/info","/pricing","/halloween"];window.initializeSpa=function(){setTimeout((function(){for(var e=document.querySelectorAll("[data-href]"),t=document.querySelectorAll("a"),n=0;n{function e(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var o,i,r=[],s=!0,a=!1;try{for(n=n.call(e);!(s=(o=n.next()).done)&&(r.push(o.value),!t||r.length!==t);s=!0);}catch(e){a=!0,i=e}finally{try{s||null==n.return||n.return()}finally{if(a)throw i}}return r}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return t(e,n);var o=Object.prototype.toString.call(e).slice(8,-1);"Object"===o&&e.constructor&&(o=e.constructor.name);if("Map"===o||"Set"===o)return Array.from(e);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return t(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);nt.offsetTop&&(o.target.classList.toggle("is-pinned",o.intersectionRatio<1&&0!=o.intersectionRatio),o.target.classList.contains("is-pinned")&&window.innerWidth<1024?(document.getElementById("tocButtonMobile").classList.remove("translate-y-20"),document.getElementById("tocButtonMobile").classList.remove("opacity-0"),document.getElementById("backToTopButton").classList.remove("opacity-0"),document.getElementById("backToTopButton").classList.remove("translate-y-20")):(document.getElementById("tocButtonMobile").classList.add("translate-y-20"),document.getElementById("tocButtonMobile").classList.add("opacity-0"),document.getElementById("backToTopButton").classList.add("opacity-0"),document.getElementById("backToTopButton").classList.add("translate-y-20")))}),{threshold:[0,1]}).observe(t)},window.tocScrollFunctionality=function(){var e=-50;document.getElementById("header")&&(e=15),document.getElementById("post")&&(e+=document.getElementById("post").offsetTop);var t=windowContainer.pageYOffset;if(r&&(t=windowContainer.scrollTop),t=n[n.length-1].elementTop+e)s(n[n.length-1].list_item);else for(var o=0;o=n[o].elementTop+e&&t<=n[o+1].elementTop+e&&(n[o].list_item.classList.contains("active")||s(n[o].list_item))};window.anchorLinkClick=function(e){e.preventDefault();var t=window.innerWidth<1024?0:50;if(document.getElementById("header")&&(t=115,window.innerWidth<1024&&(t=115)),e.target.getAttribute("href")){var n=document.querySelector(e.target.getAttribute("href")).offsetTop+(document.getElementById("post").offsetTop+t);"#comments"==e.target.getAttribute("href")&&(n=function(e){for(var t=0;e;)t+=e.offsetTop,e=e.offsetParent;return t}(document.querySelector(this.getAttribute("href")))+t),window.scroll({top:n,left:0,behavior:"smooth"}),history.replaceState(void 0,void 0,this.getAttribute("href"))}},window.removeAnchorLinkListeners=function(){for(var e=0;e{"use strict";n.d(t,{Z:()=>r});var o=n(645),i=n.n(o)()((function(e){return e[1]}));i.push([e.id,".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}",""]);const r=i},95:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});var o=n(645),i=n.n(o)()((function(e){return e[1]}));i.push([e.id,'.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity;white-space:normal}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}',""]);const r=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,o){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(o)for(var r=0;r{"use strict";n.d(t,{Z:()=>o});const o=function(){var e=0
      Top Articles
      Latest Posts
      Article information

      Author: Nathanial Hackett

      Last Updated: 02/26/2023

      Views: 5788

      Rating: 4.1 / 5 (52 voted)

      Reviews: 91% of readers found this page helpful

      Author information

      Name: Nathanial Hackett

      Birthday: 1997-10-09

      Address: Apt. 935 264 Abshire Canyon, South Nerissachester, NM 01800

      Phone: +9752624861224

      Job: Forward Technology Assistant

      Hobby: Listening to music, Shopping, Vacation, Baton twirling, Flower arranging, Blacksmithing, Do it yourself

      Introduction: My name is Nathanial Hackett, I am a lovely, curious, smiling, lively, thoughtful, courageous, lively person who loves writing and wants to share my knowledge and understanding with you.