/* * Usage: * Place the class "kendoPopupWindow" on any link or clickable item * If using a link the window will open to the href attribute * If using something else you NEED to set data-content to what needs to open * * Options which can be set via data attributes: * data-width - Width of the window * data-height - Height of the window * data-title - Title of the window */ var GLOBAL_KendoWindowSmallScreenWidthBreakPoint = 768; function GetKendoWindowWidth(requestedWidth) { var windowWidth = $(window).width(), cleanWidth = requestedWidth.toString(); if (cleanWidth.indexOf('%') > 0) { return cleanWidth; } if (cleanWidth.indexOf('px') > 0) { cleanWidth = cleanWidth.substring(0, cleanWidth.indexOf('px')); } if (windowWidth <= GLOBAL_KendoWindowSmallScreenWidthBreakPoint || windowWidth <= parseInt(cleanWidth)) { return "100%"; } return cleanWidth + 'px'; } function GetKendoWindowHeight(requestedHeight) { var cleanHeight = requestedHeight.toString(); if (cleanHeight.indexOf('%') > 0) { return cleanHeight; } if (cleanHeight.indexOf('px') > 0) { cleanHeight = cleanHeight.substring(0, cleanHeight.indexOf('px')); } if ($(window).width() <= GLOBAL_KendoWindowSmallScreenWidthBreakPoint) { return "100%"; } return cleanHeight + 'px'; } (function ($) { $.fn.cwsKendoWindow = function (options) { $.fn.cwsKendoWindow.defaults = { width: "615px", height: "555px", title: "Untitled Window", content: "/", draggable: false, resizable: false, modal: true, visible: false, animation: false, iframe: true, open: function () { // Maximize or center depending on window width if ($(window).width() <= GLOBAL_KendoWindowSmallScreenWidthBreakPoint) { this.maximize(); } else { this.center(); } }, close: function () { // Clear window content on close this.content(''); } }; // =============== SETUP =============== // return this.each(function () { var thisRef = this; function ShowKendoPopup(evt, element) { var settings = $.extend({}, $.fn.cwsKendoWindow.defaults, options), popupWindow = $('#KendoPopupWindow'); evt.preventDefault(); // Load properties from what has clicked if (element.data('width')) { settings.width = element.data('width'); } if (element.data('height')) { settings.height = element.data("height"); } settings.width = GetKendoWindowWidth(settings.width) settings.height = GetKendoWindowHeight(settings.height) if (element.data('title')) { settings.title = element.data("title"); } // links use href, everything else use data-content if (element.attr('href')) { settings.content = element.attr('href'); } else if (element.data('content')) { settings.content = element.data('content'); } else { alert('Error: Cannot open window. Content url not set.') } if (!popupWindow.data('kendoWindow')) { // Full init popupWindow.kendoWindow(settings); } else { // Already done init, so just reset properties and reload content popupWindow.data("kendoWindow").setOptions(settings); popupWindow.data("kendoWindow").refresh({ url: settings.content }); } // Starting out without window visible and then calling open so it centered properly on first try popupWindow.data("kendoWindow").open(); } // Add window to dom if it does not exist if ($('#KendoPopupWindow').length === 0) { $('body').append('
'); $('head').append( '' ); } // Register click event $(thisRef).on('click', '.kendoPopupWindow', function (evt) { ShowKendoPopup(evt, $(this)); }); }); }; })(jQuery);