jquery.fancytree
Version:
jQuery tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading
321 lines (299 loc) • 9.02 kB
JavaScript
/*************************************************************************
(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));