tcode -->

[av_one_full first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' padding='0px' highlight='' highlight_size='' border='' border_color='' radius='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid=''] [av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' av_uid='av-k7w9yp5x'] /* ! * tingle.js * @author robin_parisi * @version 0.15.2 * @url */ /* global define,module */ (function (root, factory) { if (typeof define === 'function' && define.amd) { define(factory) } else if (typeof exports === 'object') { module.exports = factory() } else { root.tingle = factory() } }(this, function () { /* ----------------------------------------------------------- */ /* == modal */ /* ----------------------------------------------------------- */ var isBusy = false function Modal (options) { var defaults = { onClose: null, onOpen: null, beforeOpen: null, beforeClose: null, stickyFooter: false, footer: false, cssClass: [], closeLabel: 'Close', closeMethods: ['overlay', 'button', 'escape'] } // extends config this.opts = extend({}, defaults, options) // init modal this.init() } Modal.prototype.init = function () { if (this.modal) { return } _build.call(this) _bindEvents.call(this) // insert modal in dom document.body.insertBefore(this.modal, document.body.firstChild) if (this.opts.footer) { this.addFooter() } return this } Modal.prototype._busy = function (state) { isBusy = state } Modal.prototype._isBusy = function () { return isBusy } Modal.prototype.destroy = function () { if (this.modal === null) { return } // restore scrolling if (this.isOpen()) { this.close(true) } // unbind all events _unbindEvents.call(this) // remove modal from dom this.modal.parentNode.removeChild(this.modal) this.modal = null } Modal.prototype.isOpen = function () { return !!this.modal.classList.contains('tingle-modal--visible') } Modal.prototype.open = function () { if (this._isBusy()) return this._busy(true) var self = this // before open callback if (typeof self.opts.beforeOpen === 'function') { self.opts.beforeOpen() } if (this.modal.style.removeProperty) { this.modal.style.removeProperty('display') } else { this.modal.style.removeAttribute('display') } // prevent double scroll this._scrollPosition = window.pageYOffset document.body.classList.add('tingle-enabled') document.body.style.top = -this._scrollPosition + 'px' // sticky footer this.setStickyFooter(this.opts.stickyFooter) // show modal this.modal.classList.add('tingle-modal--visible') // onOpen callback if (typeof self.opts.onOpen === 'function') { self.opts.onOpen.call(self) } self._busy(false) // check if modal is bigger than screen height this.checkOverflow() return this } Modal.prototype.close = function (force) { if (this._isBusy()) return this._busy(true) force = force || false // before close if (typeof this.opts.beforeClose === 'function') { var close = this.opts.beforeClose.call(this) if (!close) { this._busy(false) return } } document.body.classList.remove('tingle-enabled') window.scrollTo({ top: this._scrollPosition, behavior: 'instant' }) document.body.style.top = null this.modal.classList.remove('tingle-modal--visible') // using similar setup as onOpen var self = this self.modal.style.display = 'none' // onClose callback if (typeof self.opts.onClose === 'function') { self.opts.onClose.call(this) } // release modal self._busy(false) } Modal.prototype.setContent = function (content) { // check type of content : String or Node if (typeof content === 'string') { this.modalBoxContent.innerHTML = content } else { this.modalBoxContent.innerHTML = '' this.modalBoxContent.appendChild(content) } if (this.isOpen()) { // check if modal is bigger than screen height this.checkOverflow() } return this } Modal.prototype.getContent = function () { return this.modalBoxContent } Modal.prototype.addFooter = function () { // add footer to modal _buildFooter.call(this) return this } Modal.prototype.setFooterContent = function (content) { // set footer content this.modalBoxFooter.innerHTML = content return this } Modal.prototype.getFooterContent = function () { return this.modalBoxFooter } Modal.prototype.setStickyFooter = function (isSticky) { // if the modal is smaller than the viewport height, we don't need sticky if (!this.isOverflow()) { isSticky = false } if (isSticky) { if (this.modalBox.contains(this.modalBoxFooter)) { this.modalBox.removeChild(this.modalBoxFooter) this.modal.appendChild(this.modalBoxFooter) this.modalBoxFooter.classList.add('tingle-modal-box__footer--sticky') _recalculateFooterPosition.call(this) this.modalBoxContent.style['padding-bottom'] = this.modalBoxFooter.clientHeight + 20 + 'px' } } else if (this.modalBoxFooter) { if (!this.modalBox.contains(this.modalBoxFooter)) { this.modal.removeChild(this.modalBoxFooter) this.modalBox.appendChild(this.modalBoxFooter) this.modalBoxFooter.style.width = 'auto' this.modalBoxFooter.style.left = '' this.modalBoxContent.style['padding-bottom'] = '' this.modalBoxFooter.classList.remove('tingle-modal-box__footer--sticky') } } return this } Modal.prototype.addFooterBtn = function (label, cssClass, callback) { var btn = document.createElement('button') // set label btn.innerHTML = label // bind callback btn.addEventListener('click', callback) if (typeof cssClass === 'string' && cssClass.length) { // add classes to btn cssClass.split(' ').forEach(function (item) { btn.classList.add(item) }) } this.modalBoxFooter.appendChild(btn) return btn } Modal.prototype.resize = function () { // eslint-disable-next-line no-console console.warn('Resize is deprecated and will be removed in version 1.0') } Modal.prototype.isOverflow = function () { var viewportHeight = window.innerHeight var modalHeight = this.modalBox.clientHeight return modalHeight >= viewportHeight } Modal.prototype.checkOverflow = function () { // only if the modal is currently shown if (this.modal.classList.contains('tingle-modal--visible')) { if (this.isOverflow()) { this.modal.classList.add('tingle-modal--overflow') } else { this.modal.classList.remove('tingle-modal--overflow') } // tODO: remove offset // _offset.call(this); if (!this.isOverflow() && this.opts.stickyFooter) { this.setStickyFooter(false) } else if (this.isOverflow() && this.opts.stickyFooter) { _recalculateFooterPosition.call(this) this.setStickyFooter(true) } } } /* ----------------------------------------------------------- */ /* == private methods */ /* ----------------------------------------------------------- */ function closeIcon () { return '' } function _recalculateFooterPosition () { if (!this.modalBoxFooter) { return } this.modalBoxFooter.style.width = this.modalBox.clientWidth + 'px' this.modalBoxFooter.style.left = this.modalBox.offsetLeft + 'px' } function _build () { // wrapper this.modal = document.createElement('div') this.modal.classList.add('tingle-modal') // remove cusor if no overlay close method if (this.opts.closeMethods.length === 0 || this.opts.closeMethods.indexOf('overlay') === -1) { this.modal.classList.add('tingle-modal--noOverlayClose') } this.modal.style.display = 'none' // custom class this.opts.cssClass.forEach(function (item) { if (typeof item === 'string') { this.modal.classList.add(item) } }, this) // close btn if (this.opts.closeMethods.indexOf('button') !== -1) { this.modalCloseBtn = document.createElement('button') this.modalCloseBtn.type = 'button' this.modalCloseBtn.classList.add('tingle-modal__close') this.modalCloseBtnIcon = document.createElement('span') this.modalCloseBtnIcon.classList.add('tingle-modal__closeIcon') this.modalCloseBtnIcon.innerHTML = closeIcon() this.modalCloseBtnLabel = document.createElement('span') this.modalCloseBtnLabel.classList.add('tingle-modal__closeLabel') this.modalCloseBtnLabel.innerHTML = this.opts.closeLabel this.modalCloseBtn.appendChild(this.modalCloseBtnIcon) this.modalCloseBtn.appendChild(this.modalCloseBtnLabel) } // modal this.modalBox = document.createElement('div') this.modalBox.classList.add('tingle-modal-box') // modal box content this.modalBoxContent = document.createElement('div') this.modalBoxContent.classList.add('tingle-modal-box__content') this.modalBox.appendChild(this.modalBoxContent) if (this.opts.closeMethods.indexOf('button') !== -1) { this.modal.appendChild(this.modalCloseBtn) } this.modal.appendChild(this.modalBox) } function _buildFooter () { this.modalBoxFooter = document.createElement('div') this.modalBoxFooter.classList.add('tingle-modal-box__footer') this.modalBox.appendChild(this.modalBoxFooter) } function _bindEvents () { this._events = { clickCloseBtn: this.close.bind(this), clickOverlay: _handleClickOutside.bind(this), resize: this.checkOverflow.bind(this), keyboardNav: _handleKeyboardNav.bind(this) } if (this.opts.closeMethods.indexOf('button') !== -1) { this.modalCloseBtn.addEventListener('click', this._events.clickCloseBtn) } this.modal.addEventListener('mousedown', this._events.clickOverlay) window.addEventListener('resize', this._events.resize) document.addEventListener('keydown', this._events.keyboardNav) } function _handleKeyboardNav (event) { // escape key if (this.opts.closeMethods.indexOf('escape') !== -1 && event.which === 27 && this.isOpen()) { this.close() } } function _handleClickOutside (event) { // if click is outside the modal if (this.opts.closeMethods.indexOf('overlay') !== -1 && !_findAncestor(event.target, 'tingle-modal') && event.clientX < this.modal.clientWidth) { this.close() } } function _findAncestor (el, cls) { while ((el = el.parentElement) && !el.classList.contains(cls)); return el } function _unbindEvents () { if (this.opts.closeMethods.indexOf('button') !== -1) { this.modalCloseBtn.removeEventListener('click', this._events.clickCloseBtn) } this.modal.removeEventListener('mousedown', this._events.clickOverlay) window.removeEventListener('resize', this._events.resize) document.removeEventListener('keydown', this._events.keyboardNav) } /* ----------------------------------------------------------- */ /* == helpers */ /* ----------------------------------------------------------- */ function extend () { for (var i = 1; i < arguments.length; i++) { for (var key in arguments[i]) { if (arguments[i].hasOwnProperty(key)) { arguments[0][key] = arguments[i][key] } } } return arguments[0] } /* ----------------------------------------------------------- */ /* == return */ /* ----------------------------------------------------------- */ return { modal: Modal } })) [/av_codeblock] [av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' av_uid='av-k7w9xp9y'] // instanciate new modal var modal = new tingle.modal({ footer: true, stickyFooter: true, closeMethods: ['overlay', 'button', 'escape'], closeLabel: "Close", cssClass: ['asucd-jive'], onOpen: function() { }, onClose: function() { }, beforeClose: function() { // here's goes some logic // e.g. save content before closing the modal return true; // close the modal return false; // nothing happens } }); function getNameFromURL(url) { if (url.includes("127.0.0.1")) return "Unitrans"; if (url.includes("aggiereuse.ucdavis.edu")) return "Aggie Reuse"; if (url.includes("aggiestudios.ucdavis.edu")) return "Aggie Studios"; if (url.includes("ec.ucdavis.edu")) return "Entertainment Council"; if (url.includes("bikebarn.ucdavis.edu")) return "Bike Barn"; if (url.includes("bikebuy.ucdavis.edu")) return "Bike Buy"; if (url.includes("cce.ucdavis.edu")) return "Campus Center for the Environment"; if (url.includes("chl.ucdavis.edu")) return "CHL"; if (url.includes("coffeehouse.ucdavis.edu")) return "The CoHo"; if (url.includes("cohosouth.ucdavis.edu")) return "CoHo South"; if (url.includes("dot2dot.ucdavis.edu")) return "Dot 2 Dot"; if (url.includes("endhunger.ucdavis.edu")) return "End Campus Hunger"; if (url.includes("fridgerental.ucdavis.edu")) return "Fridge Rental"; if (url.includes("gardens.ucdavis.edu")) return "Gardens"; if (url.includes("housingday.ucdavis.edu")) return "Housing Day"; if (url.includes("kdvs.org")) return "KDVS"; if (url.includes("picnicday.ucdavis.edu")) return "Picnic Day"; if (url.includes("projectcompost.ucdavis.edu")) return "Project Compost"; if (url.includes("resources.ucdavis.edu")) return "Resources"; if (url.includes("sunsetfest.ucdavis.edu")) return "Sunset Festival"; if (url.includes("theaggie.org")) return "The Aggie"; if (url.includes("thepantry.ucdavis.edu")) return "The Pantry"; if (url.includes("unitrans.ucdavis.edu")) return "Unitrans"; if (url.includes("vacancy.ucdavis.edu")) return "Vacancy"; if (url.includes("wef.ucdavis.edu")) return "Whole Earth"; return "This site"; } function getVerbFromName(name) { if (name.includes("Unitrans")) return "operated"; if (name.includes("Whole Earth")) return "This event has been cancelled."; return "brought to you"; } function getSiteSettings() { url = window.location.href.toString() site_name = getNameFromURL(url); site_verb = getVerbFromName(site_name); var site_settings = { name: site_name, verb: site_verb }; return site_settings; } site_settings = getSiteSettings() var content = '' + site_settings.name + '' + site_settings.verb; content = content.concat(''); // set content modal.setContent(content); // add a button modal.addFooterBtn('COVID-19 Info', 'tingle-btn tingle-btn--primary', function(site_settings) { // ADD YOUR GOOGLE ANALYTICS SOURCE URL BELOW: (Questions? Check the README) var site_settings = getSiteSettings(); var source = encodeURI(site_settings.name); var TRACKER_URL = "https://www.ucdavis.edu/coronavirus/news/updates?utm_source=" + source + "&utm_medium=banner&utm_campaign=asucd-fee-ref"; window.open(TRACKER_URL, "_blank"); modal.close(); }); // add another button var buttonlabel = "Continue to " + site_settings.name + " --->"; modal.addFooterBtn(buttonlabel, 'tingle-btn tingle-btn--danger', function() { // here goes some logic modal.close(); }); function writeCookie (key, value, minutes) { var date = new Date(); // Get milliseconds at current time plus number of minutes*60 seconds* 1000 milliseconds date.setTime(+ date + (minutes * 60000)); //60 * 1000 window.document.cookie = key + "=" + value + "; expires=" + date.toGMTString() + "; path=/"; return value; }; function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } // number of minutes to sleep this modal. var MINUTES_TO_SLEEP = "2"; var modalCookie = getCookie("12345drive"); if (modalCookie == "") { modal.open(); writeCookie("12345drive", "54321Jive", MINUTES_TO_SLEEP); } [/av_codeblock] [/av_one_full]