sample.js

/*************************************************************************
	(c) 2008-2012 Martin Wendt
 *************************************************************************/

/*******************************************************************************
 * jQuery.skinswitcher plugin.
 *
 * Change CSS include when combobox selection changes.
 * Copyright (c) 2012 Martin Wendt
 *
 * Usage:
	$("select#skinswitcher").skinswitcher({
		base: "../src/",
		choices: [{name: "XP", value: "xp", href: "skin/ui.fancytree.css"},
				  {name: "Vista", value: "vista", href: "skin-vista/ui.fancytree.css"},
				  {name: "Lion", value: "lion", href: "skin-lion/ui.fancytree.css"}
				  ],
		init: "lion"
	});
 */
/*globals alert, prettyPrint */

(function( $ ) {
	var PLUGIN_NAME = "skinswitcher",
		defaultOptions = {
			/**RegEx that returns prefix, tag, and suffix of the CSS href.*/
			// skinPattern: "^(\W/skin-)().css$",
			// mode: "combo", // {String} mode 'combo' or 'radio'
			base: "",
			choices: [],
			// extraChoices: [],
			// Events:
			change: $.noop
		},
		methods = {
			init: function(options) {
				var i,
					opts = $.extend({}, defaultOptions, options),
					hrefs = [],
					$link = null,
					initialChoice;
				// $('').skinswitcher did not match a selector
				if( !this.length ){
					return this;
				}
				// Attach options to skinswitcher combobox for later access
				this.data("options", opts);
				// Find the <link> tag that is used to includes our skin CSS.
				// Add a class for later access.
				$.each(opts.choices, function(){
					hrefs.push(this.href.toLowerCase());
				});
				$("head link").each(function(){
					for(i=0; i<hrefs.length; i++){
						if(this.href.toLowerCase().indexOf(hrefs[i]) >= 0){
							$link = $(this);
							$link.addClass(PLUGIN_NAME);
							initialChoice = opts.choices[i];
						}
					}
				});
				if( !$link ){
					$link = $("link." + PLUGIN_NAME);
				}
				if( !$link.length ){
					$.error("Unable to find <link> tag for skinswitcher. Either set `href` to a known skin url or add a `skinswitcher` class.");
				}
				//
				return this.each(function() {
					// Add options to dropdown list
					var $combo = $(this);
					$combo
						.empty()
						.skinswitcher("addChoices", opts.choices)
						.change(function(event){
							var choice = $(":selected", this).data("choice");
							$("link." + PLUGIN_NAME).attr("href", opts.base + choice.href);
							opts.change(choice);
						});
					// Find out initial selection
					if(opts.init){
						$combo.val(opts.init).change();
					}else if (initialChoice){
						// select combobox value to match current <link> tag
						// decouple this call to prevent IE6 exception
						setTimeout(function(){
							$combo.val(initialChoice.value);
							opts.change(initialChoice);
						}, 100);
					}
				});
			},
			option: function(name, value) {
				var opts = this.data("options");
				if(typeof value !== "undefined"){
					opts[name] = value;
					return this;
				}else{
					return opts[name];
				}
			},
			addChoices: function(choices) {
				var $combo = $(this);
				if( $.isPlainObject(choices) ){
					choices = [ choices ];
				}
				$.each(choices, function(i, choice){
					var $opt = $("<option>", {
							text: choice.name,
							value: choice.value
						}).data("choice", choice);
					$combo.append($opt);
				});
				return this;
			},
			change: function(value) {
				$(this).val(value).change();
				return this;
			},
			reset: function() {
				$(this).val("").change();
				return this;
			}
		};

	$.fn[PLUGIN_NAME] = function(method) {
		// Method calling logic
		if ( methods[method] ) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if ( typeof method === "object" || ! method ) {
			return methods.init.apply(this, arguments);
		} else {
			$.error("Method " +  method + " does not exist on jQuery." + PLUGIN_NAME);
		}
	};
})( jQuery );


/**
 * Replacement for $().toggle(func1, func2), which was deprecated with jQuery 1.8
 * and removed in 1.9.;
 * Taken from http://stackoverflow.com/a/4911660/19166
 * By Felix Kling
 */
(function($) {

var _gaq = _gaq || [],
	SAMPLE_BUTTON_DEFAULTS = {
		id: undefined,
		label: "Sample",
		newline: true,
		code: function(){ alert("not implemented"); }
	};

$.fn.clickToggle = function(func1, func2) {
	var funcs = [func1, func2];
	this.data("toggleclicked", 0);
	this.click(function() {
		var data = $(this).data(),
			tc = data.toggleclicked;
		$.proxy(funcs[tc], this)();
		data.toggleclicked = (tc + 1) % 2;
	});
	return this;
};


window.addSampleButton = function(options) {
	var sourceCode,
		opts = $.extend({}, SAMPLE_BUTTON_DEFAULTS, options),
		$buttonBar = $("#sampleButtons"),
		$container = $("<span />", {
			"class": "sampleButtonContainer"
		});

	$("<button />", {
		id: opts.id,
		title: opts.tooltip,
		text: opts.label
	}).click(function(e){
		e.preventDefault();
		opts.code();
	}).appendTo($container);

	$("<a />", {
		text: "Source code",
		href: "#",
		"class": "showCode"
	}).appendTo($container)
	.click(function(e){
		try {
			prettyPrint();
		} catch (e2) {
			alert(e2);
		}
		var $pre = $container.find("pre");
		if($pre.is(":visible")){
			$(this).text("Source code");
		}else{
			$(this).text("Hide source");
		}
		$pre.toggle("slow");
		return false;
	});
	sourceCode = "" + opts.code;
	// Remove outer function(){ CODE }
//    sourceCode = sourceCode.match(/[]\{(.*)\}/);
	sourceCode = sourceCode.substring(
		sourceCode.indexOf("{") + 1,
		sourceCode.lastIndexOf("}"));
//    sourceCode = $.trim(sourceCode);
	// Reduce tabs from 8 to 2 characters
	sourceCode = sourceCode.replace(/\t/g, "  ");
	// Format code samples

	$("<pre />", {
		text: sourceCode,
		"class": "prettyprint"
	}).hide().appendTo($container);
	if(opts.newline){
		$container.append($("<br />"));
	}
	if(opts.header){
		$("<h5 />", {text: opts.header}).appendTo($("p#sampleButtons"));
	}
	if( !$("#sampleButtons").length ){
		$.error("addSampleButton() needs a container with id #sampleButtons");
	}
	$container.appendTo($buttonBar);
};


function initCodeSamples() {
	var info,
		$source = $("#sourceCode");

	$("#codeExample").clickToggle(
		function(){
			$source.show("fast");
			if( !this.old ){
				this.old = $(this).html();
				$.get(this.href, function(code){
					// Remove <!-- Start_Exclude [...] End_Exclude --> blocks:
					code = code.replace(/<!-- Start_Exclude(.|\n|\r)*?End_Exclude -->/gi, "<!-- (Irrelevant source removed.) -->");
					// Reduce tabs from 8 to 2 characters
					code = code.replace(/\t/g, "  ");
					$source.text(code);
					// Format code samples
					try {
						prettyPrint();
					} catch (e) {
						alert(e);
					}
				}, "html");
			}
			$(this).html("Hide source code");
		},
		function(){
			$(this).html(this.old);
			$source.hide("fast");
		}
	);
	if(jQuery.ui){
		info = "Fancytree " + jQuery.ui.fancytree.version +
			", jQuery UI " + jQuery.ui.version +
			", jQuery " + jQuery.fn.jquery;
/*
		info += "\n<br>";
		info += "document.compatMode: " + document.compatMode + "\n";
		for(e in jQuery.support){
			info += "<br>\n" + e + ": " + jQuery.support[e];
		}
*/
		$("p.sample-links").after("<p class='version-info'>" + info + "</p>");
	}
}

$(function(){
	// Log to Google Analytics, when not running locally
	if ( document.URL.toLowerCase().indexOf("wwwendt.de/") >= 0 ) {
		_gaq.push(["_setAccount", "UA-316028-1"]);
		_gaq.push(["_trackPageview"]);

		(function() {
			var s, ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
			ga.src = ("https:" === document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
			s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
		})();
	}

	// Show some elements only, if (not) inside the Example Browser
	if (top.location === window.location){
		$(".hideOutsideFS").hide();
	}else{
		$(".hideInsideFS").hide();
	}
	initCodeSamples();

	$("select#skinswitcher").skinswitcher({
		base: "../src/",
		choices: [{name: "XP", value: "xp", href: "skin-xp/ui.fancytree.css"},
				  {name: "Vista (classic Dynatree)", value: "vista", href: "skin-vista/ui.fancytree.css"},
				  {name: "Win7", value: "win7", href: "skin-win7/ui.fancytree.css"},
				  {name: "Win8", value: "win8", href: "skin-win8/ui.fancytree.css"},
				  {name: "Win8-N", value: "win8n", href: "skin-win8-n/ui.fancytree.css"},
				  {name: "Win8 xxl", value: "win8xxl", href: "skin-win8-xxl/ui.fancytree.css"},
				  {name: "Lion", value: "lion", href: "skin-lion/ui.fancytree.css"}
				  ],
		change: function(choice) {
			// console.log("choice: " + choice.value)
			$("#connectorsSwitch").toggle(choice.value !== "xp");
		}
	}).after($("<label id='connectorsSwitch'><input name='cbConnectors' type='checkbox'>Connectors</label>"));

	$("input[name=cbConnectors]").on("change", function(e){
		$(".fancytree-container").toggleClass("fancytree-connectors", $(this).is(":checked"));
	});
});

}(jQuery));