/* File: jstree.themes.js Controls the looks of jstree, without this plugin you will get a functional tree, but it will look just like an ordinary UL list */ (function ($) { var themes_loaded = []; /* Group: $.jstree. Variable: $.jstree.THEMES_DIR The location of all themes, this is used when setting a theme without supplying an URL (only by name). Default is _false_. If left as _false_ the path will be autodetected when the DOM is ready. The location of _jstree.js_ is used for the autodetection. Normally you won't need to modify this (provided you leave the _themes_ folder in the same folder as _jquery.jstree.js_ and do not rename the file). If you decide to move the folder or rename the file, but still want to load themes by name, simply set this to the new location of the _themes_ folder. > > */ $.jstree.THEMES_DIR = false; $.jstree.plugin("themes", { __construct : function () { this.get_container() .bind("__construct.jstree", $.proxy(function () { var s = this.get_settings(true).themes; this.data.themes.dots = s.dots; this.data.themes.icons = s.icons; if(s.url === false && s.theme === false) { s.theme = this.data.core.rtl ? 'default-rtl' : 'default'; } this.set_theme(s.theme, s.url, s.no_load); }, this)) .bind('__construct.jstree __ready.jstree __loaded.jstree', $.proxy(function () { this[ this.data.themes.dots ? "show_dots" : "hide_dots" ](); this[ this.data.themes.icons ? "show_icons" : "hide_icons" ](); }, this)); }, /* Class: jstree */ /* Group: THEMES options Variable: config.themes.theme *string* the name of the theme you want to use. Default is _default_. Variable: config.themes.url *mixed* the URL of the stylesheet of the theme you want to use. Default is _false_. If left as _false_ the location will be autodetected using <$.jstree.THEMES_DIR>. Variable: config.themes.no_load *boolean* whether to load the theme or just apply the class. Default is _false_. If left as _false_ the theme CSS will be loaded, otherwise only the theme class will be applied, assuming the CSS is already loaded. Variable: config.themes.dots *boolean* whether to show dots or not. Default is _true_. The chosen theme should support this option. Variable: config.themes.icons *boolean* whether to show icons or not. Default is _true_. */ defaults : { theme : false, url : false, no_load : false, dots : true, icons : true }, _fn : { /* Group: THEMES functions Function: set_theme Sets the tree theme. This function is automatically called at construction with the settings specified in and . Parameters: theme_name - the name of the theme to apply theme_url - the URL of the stylesheet - leave this blank for autodetect Example: >// Set the theme and autodetect the location >$("#div1").jstree("set_theme","classic"); >// A custom theme. Please note that if you place your own theme in the _themes_ folder ot will be autodetected too. >$("#div2").jstree("set_theme","custom-theme","/some/path/theme.css"); */ set_theme : function (theme_name, theme_url, no_load) { if(!theme_name) { return false; } if(!theme_url) { theme_url = $.jstree.THEMES_DIR + theme_name + '/style.css'; } if(!no_load && $.inArray(theme_url, themes_loaded) === -1) { $.vakata.css.add_sheet({ "url" : theme_url }); themes_loaded.push(theme_url); } if(this.data.themes.theme !== theme_name) { this.get_container().removeClass('jstree-' + this.data.themes.theme); this.data.themes.theme = theme_name; } this.get_container().addClass('jstree-' + theme_name); this.__callback(theme_name); }, get_theme : function () { return this.data.themes.theme; }, show_dots : function () { this.data.themes.dots = true; this.get_container().children("ul").removeClass("jstree-no-dots"); }, hide_dots : function () { this.data.themes.dots = false; this.get_container().children("ul").addClass("jstree-no-dots"); }, toggle_dots : function () { if(this.data.themes.dots) { this.hide_dots(); } else { this.show_dots(); } }, show_icons : function () { this.data.themes.icons = true; this.get_container().children("ul").removeClass("jstree-no-icons"); }, hide_icons : function () { this.data.themes.icons = false; this.get_container().children("ul").addClass("jstree-no-icons"); }, toggle_icons : function () { if(this.data.themes.icons) { this.hide_icons(); } else { this.show_icons(); } }, set_icon : function (obj, icon) { obj = this.get_node(obj); if(!obj || obj === -1 || !obj.length) { return false; } obj = obj.find("> a > .jstree-themeicon"); if(icon === false) { this.hide_icon(obj); } else if(icon.indexOf("/") === -1) { obj.addClass(icon).attr("rel",icon); } else { obj.css("background", "url('" + icon + "') center center no-repeat").attr("rel",icon); } return true; }, get_icon : function (obj) { obj = this.get_node(obj); if(!obj || obj === -1 || !obj.length) { return null; } obj = obj.find("> a > .jstree-themeicon"); if(obj.hasClass('jstree-themeicon-hidden')) { return false; } obj = obj.attr("rel"); return (obj && obj.length) ? obj : null; }, hide_icon : function (obj) { obj = this.get_node(obj); if(!obj || obj === -1 || !obj.length) { return false; } obj.find('> a > .jstree-themeicon').addClass('jstree-themeicon-hidden'); return true; }, show_icon : function (obj) { obj = this.get_node(obj); if(!obj || obj === -1 || !obj.length) { return false; } obj.find('> a > .jstree-themeicon').removeClass('jstree-themeicon-hidden'); return true; }, clean_node : function(obj) { obj = this.__call_old(); var t = this; return obj.each(function () { var o = $(this), d = o.data("jstree"); if(!o.find("> a > ins.jstree-themeicon").length) { o.children("a").prepend(" "); } if(d && typeof d.icon !== 'undefined') { t.set_icon(o, d.icon); delete d.icon; } }); }, get_state : function () { var state = this.__call_old(); state.themes = { 'theme' : this.get_theme(), 'icons' : this.data.themes.icons, 'dots' : this.data.themes.dots }; return state; }, set_state : function (state, callback) { if(this.__call_old()) { if(state.themes) { if(state.themes.theme) { this.set_theme(state.themes.theme); } if(typeof state.themes.dots !== 'undefined') { this[ state.themes.dots ? "show_dots" : "hide_dots" ](); } if(typeof state.themes.icons !== 'undefined') { this[ state.themes.icons ? "show_icons" : "hide_icons" ](); } delete state.themes; this.set_state(state, callback); return false; } return true; } return false; }, get_json : function (obj, is_callback) { var r = this.__call_old(), i; if(is_callback) { i = this.get_icon(obj); if(typeof i !== 'undefined' && i !== null) { r.data.jstree.icon = i; } } return r; } } }); $(function () { // autodetect themes path if($.jstree.THEMES_DIR === false) { $("script").each(function () { if(this.src.toString().match(/jstree[^\/]*?\.js(\?.*)?$/)) { $.jstree.THEMES_DIR = this.src.toString().replace(/jstree[^\/]*?\.js(\?.*)?$/, "") + 'themes/'; return false; } }); } if($.jstree.THEMES_DIR === false) { $.jstree.THEMES_DIR = "themes/"; } // add themes specific CSS var css_string = '' + '.jstree a { text-decoration:none; } ' + '.jstree a > .jstree-themeicon { height:16px; width:16px; margin-right:3px; } ' + '.jstree-rtl a > .jstree-themeicon { margin-left:3px; margin-right:0; } ' + '.jstree .jstree-no-icons .jstree-themeicon, .jstree .jstree-themeicon-hidden { display:none; } '; // Correct IE 6 (does not support the > CSS selector) if($.jstree.IS_IE6) { css_string += '' + '.jstree li a .jstree-themeicon { height:16px; width:16px; margin-right:3px; } ' + '.jstree-rtl li a .jstree-themeicon { margin-right:0px; margin-left:3px; } '; } // the default stylesheet $.vakata.css.add_sheet({ str : css_string, title : "jstree" }); }); // include the themes plugin by default $.jstree.defaults.plugins.push("themes"); })(jQuery); //*/