JSFiddle - React, Tailwind, and code Playground

by obry

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.bootstrap.min.css">
<a href="javascript: openWindow('http://www.example.com', 'Example Window', 400, 600, { modal: true })" class="k-button k-buttontext">
    Open Window
</a>

JavaScript

function openWindow(url, title, height, width, additionalOptions) {
	var container,
		content,
		options,
		wnd,
		name;   

    // Replace non-alphanumeric characters
	name = title.replace(/[a-zA-Z0-9_]/, '');

	// Default options
	options = {		
		title: title,
		name: name,		
		height: height,
		width: width,
        content: url
	};
	
	// Merge options structures
	options = mergeObjects(options, additionalOptions);

	console.log('Options:')
	console.log(options);
	
	// Add the div to initialize to the DOM
    container = $('<div />').appendTo(document.body);

	console.log('\nDefault Container:');
	console.log(container);
	
	console.log('\nInitializing Kendo Window...');
    
    try {
        // Initialize Kendo Window object
	    wnd = container.kendoWindow(options).data('kendoWindow');
        
         console.log('done');
	
        console.log('\nInitialized Container:');
        console.log(container);
    
        console.log('\nKendo Window object:');
        console.log(wnd);
    } catch (e) {
        console.log('Failed!\nError:');
        console.log(e);        
    }
}

//
// Source: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
function mergeObjects(obj1, obj2)
{
	var obj3 = {};

	for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
	for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }

	return obj3;
}