/*! * cache=true * @license Licences are viewable at this URL: https://cdn1.gaiaonline.com/src/=/e143bb5df5304ae98988a03a4dabca2e-1457-273/src/js/modal/modal_yui3.js */ /*! /src/js/modal/modal_yui3.js */ /*jslint continue: true, nomen: true, plusplus: true, sloppy: true, browser: true, indent: 4 */ /*global YUI, GAIA_config */ (function () { var settings = YUI.namespace('Env.gmodal'); settings.defaultTitle = ''; settings.loadedCSS = false; }()); YUI().add('gmodal', function (Y) { var settings = YUI.Env.gmodal, plugins = [ Y.Plugin.OverlayModal ], cache = {}, submitted = false, submit_cb = null, onHideCallbacks = [], beforeSubmit_cb = null, panelWidth = 400, setTitle, showModal, ajaxSuccess, ajaxFailure, showLoader, loadURL, clickHandler, submitForm, ajaxModal, box, panel; Y.namespace('gaia'); if (Y.UA.ios === null && Y.UA.android < 1) { plugins.push(Y.Plugin.OverlayKeepaligned); plugins.push({ "fn": Y.Plugin.OverlayAutohide, "cfg": { "clickedOutside": false, "focusedOutside": false } }); } panel = new Y.Overlay({ "headerContent": '', "bodyContent": '', "footerContent": '', "width": panelWidth + 'px', "centered": true, "zIndex": 10000, "render": false, "plugins": plugins }); panel.render(document.body); panel.hide(); panel.headerNode.addClass('gmodal-hd'); panel.bodyNode.addClass('gmodal-body'); panel.footerNode.addClass('gmodal-ftr'); panel.get('boundingBox').addClass('gaia-modal-modul gmodal-theme-default'); panel.set('footerContent', '
'); setTitle = function (title) { title = title.charAt(0).toUpperCase() + title.slice(1); panel.set('headerContent', ' Close'); }; showModal = function (content) { panel.set('bodyContent', content); panel.set('align', { "points": [ Y.WidgetPositionAlign.CC, Y.WidgetPositionAlign.CC ] }); panel.render(); panel.show(); }; ajaxSuccess = function (tid, o, args) { var fn, id, title; submitted = (args !== undefined && args.submitted); if (submitted && submit_cb !== null && submit_cb.on === 'success') { try { fn = submit_cb.fn; fn.call(submit_cb.scope, o.responseText); } catch (ignore) {} } id = args.id; title = args.title; if (!title.length) { title = settings.defaultTitle; } if (id && typeof(settings.clearCache) == 'undefined') { cache[id] = o.responseText; } setTitle(title); showModal(o.responseText); }; ajaxFailure = function (o) { showModal("Oops, we encountered a problem. Please try again."); }; showLoader = function () { showModal(''); return; }; loadURL = function (o) { var ts; showLoader(); if (!o.url) { throw new Error("URL is required."); } if (!o.id) { o.id = null; } if (!o.title) { o.title = ""; } if (o.cachebust) { ts = (new Date()).getTime(); /* there's no ? in the URL, appending it as ?timestamp */ o.url += (o.url.indexOf('?') === -1 ? '?' : '&') + ts; } Y.io(o.url, { "on": { "success": ajaxSuccess, "failure": ajaxFailure }, "arguments": { 'id': o.id, 'title': o.title } }); }; /* handles clicks inside of the modal the handlers looks for these particular classes in the clicked element: 'allow': will be left alone (lets users follow links in 'a' tags), no preventDefault() will be called 'follow' will fetch the contents (URL comes from the 'data-url' attribute), and place them in the modal 'submit': like follow, but does a POST to the form found in the modal's body, shows the results in the modal 'close': closes the modal */ clickHandler = function (e) { var formData, id, title, i; /* allow links with class 'allow' to be followed like a regular link */ if (this.hasClass('allow')) { return; } e.preventDefault(); if (this.hasClass('disabled')) { return; } if (this.hasClass('gmodal-close-btn') || this.hasClass('close')) { panel.hide(); if (onHideCallbacks) { for (i in onHideCallbacks) { if (onHideCallbacks.hasOwnProperty(i)) { onHideCallbacks[i](); } } } return; } id = e.currentTarget.get('id'); title = e.currentTarget.getAttribute('data-title'); if (this.hasClass('follow')) { loadURL({ "url": this.getAttribute('data-url') || this.get('href'), "id": id, "title": title }); } /* submit this form as an ajax call */ if (this.hasClass('submit')) { if (e.currentTarget.get('tagName').toLowerCase() === 'form') { formData = e.currentTarget; } else { formData = e.currentTarget.ancestor('form') || Y.one('.gmodal-body form'); } if (!formData) { return; } if (beforeSubmit_cb !== null) { try { beforeSubmit_cb(); } catch (ignore) {} } submitForm(formData, id, title); showLoader(); } }; submitForm = function (formData, id, title) { Y.io(formData.get('action'), { "method": 'POST', "form": { "id": formData }, "on": { "success": ajaxSuccess, "failure": ajaxFailure }, "arguments": { "submitted": true, "title": title, "id": id } }); }; setTitle('Loading'); /* listen to clicks in the modal */ box = panel.get('boundingBox'); box.delegate('click', clickHandler, 'a'); /* make: space, enter activate links */ box.delegate('key', clickHandler, 'press:enter,32', '.cta-buttons a'); /* hijack form submissions in the modal, and add the submit class in case it's not there */ box.delegate('submit', function (e) { e.preventDefault(); this.addClass('submit'); clickHandler.call(this, e); }, 'form'); ajaxModal = function (e) { var target = e.currentTarget, id = target.get('id'), title = target.getAttribute('title'), width = null, offset_y = null, url; e.preventDefault(); if (!title.length) { title = settings.defaultTitle; } width = target.getData('width'); panel.set('width', width || panelWidth); offset_y = target.getData('offsety'); if (offset_y != null) { panel.set("y", parseInt(offset_y)); } if (cache[id] !== undefined) { setTitle(title); showModal(cache[id]); return; } url = e.currentTarget.getAttribute('data-url') || e.currentTarget.get('href'); if (!url) { return; } loadURL({ "url": url, "id": id, "title": title }); }; if (settings.loadedCSS === false) { Y.Get.css(location.protocol + "//" + GAIA_config('jscompiler_server') + "/src/_/" + GAIA_config("cache_value") + "/src/css/modal/modal.css"); settings.loadedCSS = true; } /* public interface */ Y.gaia.gmodal = { "disableCache": function() { settings.clearCache = true; }, "setDefaultTitle": function (title) { settings.defaultTitle = title; setTitle(title); }, /* add a delegate to launch the modal (using ajaxModal) ex: addHandler('click', '#foo', '.clicker'); adds a 'click' handler on #foo.clicker, so what when #foo.clicker is clicked, the modal is launched the clicked element should have a minimum of data-url defined telling the modal where to load the content data-title: will set the modal's title to this value */ "addHandler": function (type, container, selector) { if (!selector) { throw new Error("selector is a required parameter"); } if (!container) { throw new Error("container is a required parameter"); } Y.delegate(type, ajaxModal, container, selector); }, "showOffer": function (obj) { var title, desc, img, cta, cta_url, offer; if (typeof obj !== "object") { return; } title = obj.title; desc = obj.description; img = obj.img; cta = obj.cta; cta_url = obj.url; offer = ['', '