FELIX-1171 Refactor display of configuration status using tabbed
view. This includes the tabworld JQuery plugin with a preliminary
(yet completely open) license (still have to confirm whether this
can be licensed under a better known license such as BSD or MIT).
git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@815280 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole/src/main/resources/res/ui/configurationrender.css b/webconsole/src/main/resources/res/ui/configurationrender.css
new file mode 100644
index 0000000..9bcba5a
--- /dev/null
+++ b/webconsole/src/main/resources/res/ui/configurationrender.css
@@ -0,0 +1,70 @@
+/* tabbed view */
+
+#divcfgprttabs {
+}
+
+#divcfgprttabs ul {
+ list-style: none;
+}
+
+#divcfgprttabs ul li {
+ display: inline;
+ background: #fff;
+ height: 21px;
+ margin: 0 2px 0 0 ;
+ border: 1px solid #999;
+ float: left;
+ padding: 1px 1px 0 1px
+}
+
+#divcfgprttabs ul li.tabactive {
+ border-bottom-color: white;
+}
+
+#divcfgprttabs ul li a {
+ color: #6181A9;
+ background-color: white;
+ display: block;
+ float: left;
+ height: 100%;
+ line-height: 2;
+ padding: 0 10px 0 10px;
+ cursor: pointer;
+}
+
+#divcfgprttabs ul li a.tabactive {
+}
+
+#divcfgprttabs ul li a:hover {
+ color: white;
+ background-color: #6181A9;
+}
+
+.menu {
+ background: none;
+ height: 23px;
+ margin-bottom: 0;
+ padding-left: 0;
+}
+.area {
+ background: #fff;
+ border: 1px solid #999;
+ padding: 1px;
+}
+
+/* Contents container of the tabs */
+.tabcont {
+ background: #fff;
+ border: 1px solid #999;
+ border-right: none;
+ padding: 1px;
+}
+
+/* The actual content of the tabs */
+.space {
+ padding: 10px;
+
+ /* don't let this area make the display wider */
+ width: 100px;
+ overflow: visible;
+}
diff --git a/webconsole/src/main/resources/res/ui/tw-1.1.js b/webconsole/src/main/resources/res/ui/tw-1.1.js
new file mode 100644
index 0000000..7a313ab
--- /dev/null
+++ b/webconsole/src/main/resources/res/ui/tw-1.1.js
@@ -0,0 +1,130 @@
+// JavaScript Document
+// Tab World From BenchSketch.com
+// Benchsketch.com/bquery/tab.html for documentation
+// You can use it FREE!!! Yay.
+// Let me know how it works, or send suggestions, comments, requests to benchsketch@gmail.com
+// Thanks
+
+(function($){
+ $.fn.extend({
+
+ // tabworld function
+ tabworld: function(options){
+
+ // Get the user extensions and defaults
+ var opts = $.extend({}, $.fn.tabworld.defaults, options);
+
+ // Content location
+ if(opts.contloc=="none"){
+ contloc=$(this).parent();
+ }else{
+ contloc=opts.contloc;
+ }
+ // Content location
+ if(opts.tabloc=="none"){
+ tabloc=$(this).parent();
+ }else{
+ tabloc=opts.tabloc;
+ }
+
+ // better define some stuff for safety
+ var newli="",newdiv="";
+
+ // Start Building Tabs
+ return this.each(function(i){
+
+
+ //start developing basis
+ now=$(this);
+ nowid=now.attr("id");
+ now.addClass(opts.color);
+
+ // tab maker function
+ // $("#"+nowid+" li").each(function(i){ // lets hide that for now
+ $("#"+nowid+" > li").each(function(i){
+
+ tabli = $(this);
+ // taba = $('#'+nowid+" > li q");
+ taba = tabli.children("q");
+ $(this).addClass("removeme");
+ tabcont = taba.html();
+ $(".removeme q").remove();
+ licont = tabli.html();
+ $(this).remove();
+
+ newli += "<li rel='"+nowid+"-"+i+"'><a>"+licont+"</a></li>";
+ newdiv += "<div id='"+nowid+"-"+i+"'>"+tabcont+"</div>";
+
+ });
+
+ // Something weird to gain the location
+ now.remove();
+ $(tabloc).append("<ul id='"+nowid+"-tabworld' class='"+opts.color+"'>"+newli+"</ul>");
+ // Fix the ul
+ // $("#"+nowid).append(newli);
+ // Find the Parent then append the divs
+ // var parent = $("#"+nowid).parent();
+ newdiv = "<div id='"+nowid+"content' class='tabcont'><div class='"+opts.area+"'>"+newdiv+"</div></div>";
+ newdiv = newdiv.replace(/\/>/,">");
+ $(contloc).append(newdiv);
+
+
+ // Find the default
+ ndef = nowid+"-"+opts.dopen;
+ ncon = nowid+"content ."+opts.area+" > div";
+ $('#'+ncon).hide();
+ $('#'+ndef).show();
+ //$('#'+ndef+" > div").show();
+
+ deftab = $('li[rel='+ndef+"]");
+ deftab.addClass(opts.tabactive);
+ deftab.children("a").addClass(opts.tabactive);
+ // Seperate function to start the tabbing
+ $("#"+nowid+"-tabworld >li").click(function(){
+ here=$(this);
+ nbound=here.attr("rel");
+
+ // Make the active class / remove it from others
+ $("#"+nowid+"-tabworld > li").removeClass(opts.tabactive);
+ $("#"+nowid+"-tabworld > li a").removeClass(opts.tabactive);
+ here.addClass(opts.tabactive);
+ $("."+opts.tabactive+">a").addClass(opts.tabactive);
+
+ // The real action! Also detirmine transition
+ if(opts.transition=="slide"){
+ $('#'+ncon+':visible').slideUp(opts.speed, function(){
+ $('#'+nbound).find("div").show();
+ $('#'+nbound).slideDown(opts.speed);
+ });
+ }else if (opts.transition=="fade"){
+ $('#'+ncon+':visible').fadeOut(opts.speed, function(){
+ $('#'+nbound).find("div").show();
+ $('#'+nbound).fadeIn(opts.speed);
+ });
+ }else{
+ $('#'+ncon+':visible').hide(opts.speed, function(){
+ $('#'+nbound).find("div").show();
+ $('#'+nbound).show(opts.speed);
+ });
+ }
+
+ });
+
+ });// end return each (i)
+ }// end tabworld
+ })// end $.fn.extend
+
+// Defaults
+$.fn.tabworld.defaults = {
+ mislpace:'none',
+ speed:'fast',
+ color:'menu',
+ area:'space',
+ tabloc:'none',
+ contloc:'none',
+ dopen:0,
+ transition:'fade',
+ tabactive:'tabactive'
+}; // end defaults
+
+})(jQuery);// end function($)
\ No newline at end of file