nilla-js/dist/nilla.js

A library of JS modules for creating page components on University of North Texas websites.

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.nillaJS=e():t.nillaJS=e()}(self,(function(){return function(){"use strict";var t={};(function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})})(t);var e=class{constructor(t="a",e="",i="self",s="Text",l="Title",r="_url",n="",a="#333"){this._tag=t,this._class=""!==e?`class="${e}"`:"",this._target=i,this._text=s,this._title="blank"===i?`${l}. This link opens in new window.`:l,this._url=encodeURI(r),this._icon=n,this._icon_color=a}render(){let t=function(t,e){if(""===t)return"";switch(t){case"arrow":return'<svg aria-hidden="true" viewBox="0 0 512 512" class="text-unt-yellow"style="color:'+e+';"><path fill="currentColor" d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"></path></svg>';case"chevron_right":return'<svg aria-hidden="true" viewBox="0 0 320 512" class="svg-inline--fa fa-chevron-right fa-w-10"style="color:'+e+';"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>'}}(this._icon,this._icon_color),e=`<a ${this._class} href="${this._url}" title="${this._title}" target="${this._target}">${this._text} ${t}</a>`;switch(this._tag){case"h2":case"h3":return`<${this._tag}>${e}</${this._tag}>`;case"button":return`<a href="${this._url}" title="${this._title}" target="${this._target}"><button ${this._class}>${this._text}</button></a>`;default:return e}}};const i=" | ";class s{constructor(t="",e,s=null){this._tag=t||"ul",this._class=e||"",this._listItems=s?s.split(i):[]}render(){let t="";this._listItems.forEach((e=>{t+=`<li>${e}</li>`}));let e="";return this._class.length>0&&(e=`class="${this._class}"`),`<${this._tag} ${e}>${t}</${this._tag}>`}}var l=class extends s{constructor(t,e,s,l,r,n,a){super(t,e,s),this._urls=l?l.split(i):[],this._targets=r?r.split(i):[],this._classes=n?n.split(i):[],this._icons=a?a.split(i):[]}render(){if(!this._urls.length>0)return"";let t="";return this._urls.map(((i,s)=>{let l=this._listItems[s],r=this._targets.length>0?this._targets[s]:"",n=this._classes.length>0?this._classes[s]:"",a=this._icons.length>0?this._icons[s]:"",h=new e("a",n,r,l,l,i,a);t+=`<li>${h.render()}</li>`})),`<${this._tag} class="${this._class}-list">${t}</${this._tag}>\x3c!-- /.${this._class}-list --\x3e`}},r=class{constructor(t,i=null,r=null,n=null,a="",h=null,o=null,c="",d="ul",_=null,u=null,g=null,m=null,p=null){var $;this._title=r?function(t,i,s,l="",r=null){if(""===s)return"";let n=/\*fw(\w+)\s/,a=(s=s.replace(/\*\/\*/,"<br />")).match(n);a&&(s=s.replace(n,'<span class="first-word">'+a[1]+"</span> "));let h=""!==l?`style="color:${l};text-shadow:0 0 5px ${"white"===l?"black":"white"};"`:"";return r?`<${i} ${h}>${new e("a","","self",s,s,r).render()}</${i}>`:`<${i} ${h}>${s}</${i}>`}(0,i,r,a,n):"",this._leader=h?""===($=h)?"":`<p class="leader">${$}</p>`:"",this._leaderList=o?new s(d,c,o):null,this._links=new l("ul","btn",u,_,g,m,p),this._type=t}render(){let t="";return this._leaderList&&(t=this._leaderList.render()),`<header>\n                ${this._title}\n                <hr />\n                ${this._leader}\n                ${t}\n                ${this._links.render()}\n        </header>`}};class n{constructor(t,e){this._type=t.blockContent&&t.blockContent.length>0?t.blockType:"",this._layout=t.blockLayout&&t.blockLayout.length>0?t.blockLayout:"",this._list=t.leaderListItems?t.leaderListItems:null,this._listClass=t.leaderListClass?t.leaderListClass:"",this._header=new r(this._type,"h2",t.headline,t.headlineUrl,t.headlineColor,t.leader,t.leaderListItems,t.leaderListClass,t.leaderListTag,t.linkUrls,t.linkTitles,t.linkTargets,t.linkClasses,t.linkIcons),this._img=t.imgUrl?new class{constructor(t,e,i,s,l,r,n,a,h){switch(this._url=encodeURI(t),this._alt=e||"This is a nice image.",this._format=i||"landscape",this._caption=s?this._alt:"",this._imgX=l||50,this._imgY=r||50,this._imgBorder=n||0,this._imgBorWidth=a||0,this._imgShadow=h||0,i){case"portrait":this.ratio_multiplier=4/3;break;case"square":case"circle":this.ratio_multiplier=1;break;case"wide":this.ratio_multiplier=9/16;break;default:this.ratio_multiplier=3/4}}style(t){switch(t){case"div-frame":return this._imgBorder?`padding: ${this._imgBorWidth}px;`:"";case"div-crop":return`${"circle"===this._format?"border-radius: 50%; overflow: hidden;":""} width:100%; height:0; padding-top:calc(100% * ${this.ratio_multiplier}); position:relative;`;case"img":return`width:100%; height:100%; top:0; object-fit:cover; object-position:${this._imgX}% ${this._imgY}%; position:absolute;`}}render(){let t=this._url.match(/([\w_\-\/\d%\s]+).[jpegsvn]+/);return t=decodeURI(t[1]),`\n      <figure>\n        <div class="media-frame" style="${this.style("div-frame")}">\n          <div class="crop-box ${this._format}">\n            <img srcset=".${t}_600w.jpg 600w,\n                         .${t}_1200w.jpg 1200w,\n                         .${t}_1600w.jpg 1600w" \n                sizes="(max-width: 600px) 600px, (max-width: 1200px) 1200px, 1600px" \n                src="${this._url}" \n                alt="${this._alt}" \n                style="${this.style("img")}" \n                loading="lazy" />\n          </div>\x3c!-- /.crop-box --\x3e\n        </div>\x3c!-- /.media-frame --\x3e\n        <figcaption>${this._caption}</figcaption>\n      </figure>\n    `}}(t.imgUrl,t.imgAlt,t.imgFormat,t.imgCaption,t.imgX,t.imgY,t.imgBorder,t.imgBorderWidth,t.imgShadow):null,this._bg=new class{constructor(t="",e="",i="",s=""){this._uri=t,this._gradient=e,this._color=i,this._attachment=s}render(){let t="";for(const e in this)if(t+=this[e],""===t)return"";let e=this._gradient?`url(${this._uri}), ${this._gradient}`:`url(${this._uri})`;return`background-attachment: ${this._attachment}; background-color: ${this._color};background-image: ${e};`}}(t.bgImg,t.bgGrad,t.bgColr,t.bgAttach),this._children=e||[],this._mobileCompact=t.mobileCompact?t.mobileCompact:"false"}get_cards(){let t=[];if(this._children.length>0){let e;for(e=0;e<this._children.length;e++)t[e]=this._children[e]}return t}background(){return this._bg.render()}render(){let t="",e="",i="";"Image_block"===this._type&&this._img&&("iblB"!==this._layout||"iblD"!==this._layout?i=this._img.render():e=this._img.render());let s=this.get_cards(),l="";return s.length>0&&(l="true"===this._mobileCompact?'<div class="cards mobile-swipe">':'<div class="cards">',s.forEach((t=>{l+=new a(t.dataset,this._mobileCompact).render()})),l+="</div>\x3c!-- /.cards --\x3e"),t+=`\n            <div class="block-content">\n                ${e}\n                ${this._header.render()}\n                ${i}\n                ${l}\n            </div>\x3c!-- /.block-content --\x3e\n            `,t}}class a extends n{constructor(t,e){super(t),this._type=t.blockContent&&t.blockContent.length>0?t.blockContent:"",this._header=new r(this._type,"h3",t.headline,t.headlineUrl,t.headlineColor,t.leader,t.leaderListItems,t.leaderListClass,t.leaderListTag,t.linkUrls,t.linkTitles),this._mobileCompact=e}render(){let t="",e="";"Image_card"===this._type&&this._img&&(e+=this._img.render());let i="true"===this._mobileCompact?"mobile-swipe":"";return t=`\n            <article class="card ${this._type} ${this._layout} ${i}">\n                ${e}\n                ${this._header.render()}\n            </article>\n        `,t}}return window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=function(t,e){e=e||window;for(var i=0;i<this.length;i++)t.call(e,this[i],i,this)}),document.querySelectorAll("section.u-block").forEach((t=>{const e=new n(t.dataset,t.children);[t.dataset.blockContent,t.dataset.blockLayout,t.dataset.headerVariant].forEach((e=>{e&&t.classList.add(e)})),""!==e.background()&&t.setAttribute("style",e.background()),t.innerHTML=e.render()})),t}()}));
//# sourceMappingURL=nilla.js.map