FELIX-975 : Add jquery as standard javascript library to all plugins, make us of jquery for manipulating the dom to get cross-browser compatibility. Fix bundle and components plugins for IE
git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@750492 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole/src/main/resources/res/ui/bundles.js b/webconsole/src/main/resources/res/ui/bundles.js
index 41ee4ee..7a274df 100644
--- a/webconsole/src/main/resources/res/ui/bundles.js
+++ b/webconsole/src/main/resources/res/ui/bundles.js
@@ -62,19 +62,17 @@
var input = createElement( "input", null, {
type: 'image',
+ style: {"margin-left": "10px"},
title: opLabel,
alt: opLabel,
- src: imgRoot + '/bundle_' + img + '.png',
- onClick: 'changeDataEntryState(' + id + ', "' + op + '");'
+ src: imgRoot + '/bundle_' + img + '.png'
});
+ $(input).click(function() {changeDataEntryState(id, op)});
if (!enabled) {
- input.setAttribute( "disabled", true );
+ $(input).attr("disabled", true);
}
- var div = createElement("div");
- div.setAttribute("style", "float:left; margin-left:10px;");
- div.appendChild(input);
- parent.appendChild( div );
+ parent.appendChild( input );
}
function entryInternal( /* Element */ parent, /* Object */ dataEntry ) {
@@ -84,14 +82,14 @@
var inputElement = createElement("img", "rightButton", {
src: appRoot + "/res/imgs/arrow_right.png",
- border: "none",
+ style: {border: "none"},
id: 'img' + id,
title: "Details",
alt: "Details",
width: 14,
- height: 14,
- onClick: 'showDetails(' + id + ');'
+ height: 14
});
+ $(inputElement).click(function() {showDetails(id)});
var titleElement;
if ( drawDetails ) {
titleElement = text(name);
@@ -106,9 +104,13 @@
parent.appendChild( td( null, null, [ inputElement, text(" "), titleElement ] ) );
parent.appendChild( td( null, null, [ text( state ) ] ) );
var actionsTd = td( null, null );
+ var div = createElement("div", null, {
+ style: { "text-align" : "left"}
+ });
+ actionsTd.appendChild(div);
for ( var a in dataEntry.actions ) {
- actionButton( actionsTd, id, dataEntry.actions[a] );
+ actionButton( div, id, dataEntry.actions[a] );
}
parent.appendChild( actionsTd );
}
@@ -140,10 +142,10 @@
function hideDetails( id ) {
$("#img" + id).each(function() {
$("#pluginInlineDetails").remove();
- this.setAttribute("src", appRoot + "/res/imgs/arrow_right.png");
- this.setAttribute("onClick", "showDetails('" + id + "')");
- this.setAttribute("title", "Details");
- this.setAttribute("alt", "Details");
+ $(this).attr("src", appRoot + "/res/imgs/arrow_right.png");
+ $(this).attr("title", "Details");
+ $(this).attr("alt", "Details");
+ $(this).unbind('click').click(function() {showDetails(id)});
});
}
@@ -153,17 +155,17 @@
$("#entry" + data.id + " > td").eq(1).append("<div id='pluginInlineDetails'/>");
$("#img" + data.id).each(function() {
if ( drawDetails ) {
- this.setAttribute("src", appRoot + "/res/imgs/arrow_left.png");
+ $(this).attr("src", appRoot + "/res/imgs/arrow_left.png");
+ $(this).attr("title", "Back");
+ $(this).attr("alt", "Back");
var ref = window.location.pathname;
ref = ref.substring(0, ref.lastIndexOf('/'));
- this.setAttribute("onClick", "window.location = '" + ref + "';");
- this.setAttribute("title", "Back");
- this.setAttribute("alt", "Back");
+ $(this).unbind('click').click(function() {window.location = ref;});
} else {
- this.setAttribute("src", appRoot + "/res/imgs/arrow_down.png");
- this.setAttribute("onClick", "hideDetails('" + data.id + "')");
- this.setAttribute("title", "Hide Details");
- this.setAttribute("alt", "Hide Details");
+ $(this).attr("src", appRoot + "/res/imgs/arrow_down.png");
+ $(this).attr("title", "Hide Details");
+ $(this).attr("alt", "Hide Details");
+ $(this).unbind('click').click(function() {hideDetails(data.id)});
}
});
$("#pluginInlineDetails").append("<table border='0'><tbody></tbody></table>");
diff --git a/webconsole/src/main/resources/res/ui/components.js b/webconsole/src/main/resources/res/ui/components.js
index 6631cd3..6728e04 100644
--- a/webconsole/src/main/resources/res/ui/components.js
+++ b/webconsole/src/main/resources/res/ui/components.js
@@ -69,16 +69,14 @@
title: opLabel,
alt: opLabel,
src: imgRoot + '/component_' + img + '.png',
- onClick: 'changeDataEntryState("' + arg + '", "' + op + '");'
+ style: {"margin-left": "10px"}
});
+ $(input).click(function() {changeDataEntryState(arg, op)});
if (!enabled) {
- input.setAttribute( "disabled", true );
+ $(input).attr("disabled", true);
}
- var div = createElement("div");
- div.setAttribute("style", "float:left; margin-left:10px;");
- div.appendChild(input);
- parent.appendChild( div );
+ parent.appendChild( input );
}
function entryInternal( /* Element */ parent, /* Object */ dataEntry ) {
@@ -88,14 +86,14 @@
var inputElement = createElement("img", "rightButton", {
src: appRoot + "/res/imgs/arrow_right.png",
- border: "none",
+ style: {"border": "none"},
id: 'img' + id,
title: "Details",
alt: "Details",
width: 14,
- height: 14,
- onClick: 'showDetails(' + id + ');'
+ height: 14
});
+ $(inputElement).click(function() {showDetails(id)});
var titleElement;
if ( drawDetails ) {
titleElement = text(name);
@@ -110,9 +108,13 @@
parent.appendChild( td( null, null, [ inputElement, text(" "), titleElement ] ) );
parent.appendChild( td( null, null, [ text( state ) ] ) );
var actionsTd = td( null, null );
+ var div = createElement("div", null, {
+ style: { "text-align" : "left"}
+ });
+ actionsTd.appendChild(div);
for ( var a in dataEntry.actions ) {
- actionButton( actionsTd, id, dataEntry.actions[a], dataEntry.pid );
+ actionButton( div, id, dataEntry.actions[a], dataEntry.pid );
}
parent.appendChild( actionsTd );
}
@@ -142,10 +144,10 @@
function hideDetails( id ) {
$("#img" + id).each(function() {
$("#pluginInlineDetails").remove();
- this.setAttribute("src", appRoot + "/res/imgs/arrow_right.png");
- this.setAttribute("onClick", "showDetails('" + id + "')");
- this.setAttribute("title", "Details");
- this.setAttribute("alt", "Details");
+ $(this).attr("src", appRoot + "/res/imgs/arrow_right.png");
+ $(this).attr("title", "Details");
+ $(this).attr("alt", "Details");
+ $(this).unbind('click').click(function() {showDetails(id)});
});
}
@@ -155,17 +157,17 @@
$("#entry" + data.id + " > td").eq(1).append("<div id='pluginInlineDetails'/>");
$("#img" + data.id).each(function() {
if ( drawDetails ) {
- this.setAttribute("src", appRoot + "/res/imgs/arrow_left.png");
+ $(this).attr("src", appRoot + "/res/imgs/arrow_left.png");
+ $(this).attr("title", "Back");
+ $(this).attr("alt", "Back");
var ref = window.location.pathname;
ref = ref.substring(0, ref.lastIndexOf('/'));
- this.setAttribute("onClick", "window.location = '" + ref + "';");
- this.setAttribute("title", "Back");
- this.setAttribute("alt", "Back");
+ $(this).unbind('click').click(function() {window.location = ref;});
} else {
- this.setAttribute("src", appRoot + "/res/imgs/arrow_down.png");
- this.setAttribute("onClick", "hideDetails('" + data.id + "')");
- this.setAttribute("title", "Hide Details");
- this.setAttribute("alt", "Hide Details");
+ $(this).attr("src", appRoot + "/res/imgs/arrow_down.png");
+ $(this).attr("title", "Hide Details");
+ $(this).attr("alt", "Hide Details");
+ $(this).unbind('click').click(function() {hideDetails(data.id)});
}
});
$("#pluginInlineDetails").append("<table border='0'><tbody></tbody></table>");
diff --git a/webconsole/src/main/resources/res/ui/events.js b/webconsole/src/main/resources/res/ui/events.js
index 62764c1..993a112 100644
--- a/webconsole/src/main/resources/res/ui/events.js
+++ b/webconsole/src/main/resources/res/ui/events.js
@@ -83,9 +83,9 @@
for( var p in dataEntry.properties ) {
var c1 = td(null, null, [text(p)]);
- c1.setAttribute("style", "border:0px none;");
+ $(c1).css("border", "0px none");
var c2 = td(null, null, [text(dataEntry.properties[p])]);
- c2.setAttribute("style", "border:0px none;");
+ $(c2).css("border", "0px none");
bodyE.appendChild(tr(null, null, [ c1, c2 ]));
}
propE = tableE;
diff --git a/webconsole/src/main/resources/res/ui/ui.js b/webconsole/src/main/resources/res/ui/ui.js
index b022b98..ae4d6a2 100644
--- a/webconsole/src/main/resources/res/ui/ui.js
+++ b/webconsole/src/main/resources/res/ui/ui.js
@@ -93,8 +93,7 @@
if (cssClass)
{
- element.setAttribute( "class", cssClass ); // non-IE
- element.setAttribute( "className", cssClass ); // IE
+ $(element).addClass(cssClass);
}
if (attrs)
@@ -106,12 +105,12 @@
var styles = attrs[lab];
for (var styleName in styles)
{
- element.style[styleName] = styles[styleName];
+ $(element).css(styleName, styles[styleName]);
}
}
else
{
- element.setAttribute( lab, attrs[lab] );
+ $(element).attr( lab, attrs[lab] );
}
}
}