Author: nbelaevski
Date: 2010-11-26 09:26:49 -0500 (Fri, 26 Nov 2010)
New Revision: 20176
Modified:
trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/ProgressBarBaseRenderer.java
trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/progressBar.js
trunk/ui/output/ui/src/main/templates/progressBar.template.xml
Log:
https://jira.jboss.org/browse/RFPL-934
Modified:
trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/ProgressBarBaseRenderer.java
===================================================================
---
trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/ProgressBarBaseRenderer.java 2010-11-26
14:04:44 UTC (rev 20175)
+++
trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/ProgressBarBaseRenderer.java 2010-11-26
14:26:49 UTC (rev 20176)
@@ -176,12 +176,12 @@
* @param state
* @throws IOException
*/
- public String getRenderStateScript(FacesContext context,
+ public String getShowStateScript(FacesContext context,
UIComponent component, String state) throws IOException {
StringBuffer script = new StringBuffer("\n");
script.append(
"RichFaces.$('" + component.getClientId(context)
- + "').renderState('").append(state).append(
+ + "').showState('").append(state).append(
"');");
return script.toString();
}
@@ -240,7 +240,7 @@
* @return
*/
public String getPollScript(FacesContext context, UIComponent component) {
- return "RichFaces.$('" + component.getClientId() +
"').poll()";
+ return "RichFaces.$('" + component.getClientId() +
"').__poll()";
}
@@ -305,7 +305,7 @@
private void renderFacet(FacesContext context, UIComponent component, String facet)
throws IOException {
UIComponent headerFacet = component.getFacet(facet);
- if(headerFacet != null) {
+ if (headerFacet != null) {
headerFacet.encodeAll(context);
}
}
Modified:
trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/progressBar.js
===================================================================
---
trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/progressBar.js 2010-11-26
14:04:44 UTC (rev 20175)
+++
trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/progressBar.js 2010-11-26
14:26:49 UTC (rev 20176)
@@ -4,6 +4,13 @@
rf.ui = rf.ui || {};
+ var defaultOptions = {
+ mode: "ajax",
+ minValue: 0,
+ maxValue: 100,
+ state: "initialState"
+ };
+
// Constructor definition
rf.ui.ProgressBar = function(componentId, options) {
// call constructor of parent class
@@ -11,16 +18,14 @@
this.id = componentId;
this.attachToDom(this.id);
this.options = $.extend({}, defaultOptions, options);
- var f = this.getForm();
- this.formId = (f) ? f.id : null;
- this.disabled = false;
+ this.enabled = this.options.enabled;
this.state = this.options.state;
this.value = this.options.value;
this.minValue = this.options.minValue;
this.maxValue = this.options.maxValue;
var component = this;
this.options.beforedomupdate = function(event) {
- component.onComplete(event.data);
+ component.__onComplete(event.data);
}
};
@@ -31,58 +36,183 @@
// define super class link
var $super = rf.ui.ProgressBar.$super;
- var defaultOptions = {
- mode: "ajax",
- minValue: 0,
- maxValue: 100,
- state : "initialState"
- };
-
- var getForm = function () {
- var parentForm = rf.getDomElement(this.id);
- while (parentForm.tagName && parentForm.tagName.toLowerCase() !=
'form') {
- parentForm = parentForm.parentNode;
+ $.extend(rf.ui.ProgressBar.prototype, (function() {
+ return {
+ name:"ProgressBar",
+
+ __updateComponent: function (data) {
+ this.setValue(this.value);
+ if (!data['enabled']) {
+ this.disable();
+ }
+ $(rf.getDomElement(this.id +
":complete")).addClass(data['completeClass']);
+ $(rf.getDomElement(this.id +
":remain")).addClass(data['remainClass']);
+ $(rf.getDomElement(this.id)).addClass(data['styleClass']);
+
+ if (this.options.pollinterval != data['interval']) {
+ this.options.pollinterval = data['interval'];
+ }
+ },
+
+ __forceState: function (state, oncomplete) {
+ var params = {};
+ params['forcePercent'] = state;
+ params[this.id] = this.id;
+
+ var options = {
+ parameters: params,
+ oncomplete: oncomplete
+ };
+
+ var form = $(rf.getDomElement(this.id)).closest('form');
+ rf.ajax(form.attr('id'), null, options);
+ },
+
+ __getContext: function () {
+ var context = this.context || {};
+ context['minValue'] = (this.minValue == 0 ? "0" : this.minValue);
+ context['maxValue'] = (this.maxValue == 0 ? "0" : this.maxValue);
+ context['value'] = (this.value == 0 ? "0" : this.value);
+ if (this.progressVar) {
+ context[this.progressVar] = context['value'];
+ }
+ return context;
+ },
+
+ __renderLabel: function (markup, context) {
+ if (!markup || this.state != "progressState") {
+ return;
+ }
+ var html = rf.interpolate(markup, context || this.__getContext());
+ var remain = rf.getDomElement(this.id + ":remain");
+ var complete = rf.getDomElement(this.id + ":complete");
+ if (remain && complete){
+ remain.innerHTML = complete.innerHTML = html;
+ }
+ },
+
+ __calculatePercent: function(v) {
+ var min = parseFloat(this.getMinValue());
+ var max = parseFloat(this.getMaxValue());
+ var value = parseFloat(v);
+ if (min < value && value < max) {
+ return (100 * (value - min)) / (max - min);
+ } else if (value <= min) {
+ return 0;
+ } else if (value >= max) {
+ return 100;
+ }
+ },
+
+ __getPropertyOrObject: function(obj, propName) {
+ if ($.isPlainObject(obj) && obj.propName) {
+ return obj.propName;
+ }
+
+ return obj;
+ },
+
+ getValue: function() {
+ return this.value;
+ },
+
+ showState: function (state) {
+ this.state = state;
+
+ var stateElt = $(rf.getDomElement(this.id + ":" + state));
+ stateElt.show().siblings().hide();
+ },
+
+ setValue: function(val) {
+ this.value = this.__getPropertyOrObject(val, "value");
+
+ if (!this.isAjaxMode()) {
+ if (parseFloat(this.getValue()) <= parseFloat(this.getMinValue())) {
+ this.showState("initialState");
+ } else if (parseFloat(this.getValue()) > parseFloat(this.getMaxValue())) {
+ this.showState("completeState");
+ } else {
+ this.showState("progressState");
+ }
+ }
+
+ if (this.isAjaxMode() || this.state == "progressState") {
+ if (this.markup) {
+ this.__renderLabel(this.markup, this.__getContext());
+ }
+
+ var p = this.__calculatePercent(this.getValue());
+ $(rf.getDomElement(this.id + ":upload")).css('width', p +
"%");
+ }
+ },
+
+ getMaxValue: function() {
+ return this.maxValue;
+ },
+
+ getMinValue: function() {
+ return this.minValue;
+ },
+
+ getMode: function () {
+ return this.options.mode;
+ },
+
+ isAjaxMode: function () {
+ return (this.getMode() == "ajax");
+ },
+
+ disable: function () {
+ this.enabled = false;
+ },
+
+ enable: function () {
+ if (this.isEnabled()) {
+ return;
+ }
+
+ this.enabled = true;
+
+ if (!this.isAjaxMode()) {
+ this.showState("progressState");
+ this.setValue(this.getMinValue() + 1);
+ } else if (this.value <= this.getMaxValue()) {
+ this.__poll();
+ }
+
+ },
+
+ isEnabled: function() {
+ return this.enabled;
+ }
}
- return parentForm;
- };
+ } ()));
- var getValue = function () {
- return this.value;
- };
-
- var getParameter = function (ev, params, paramName) {
- if (!params) {
- params = ev;
- }
- if (params && params[paramName]) {
- return params[paramName];
- }
- return params;
- };
-
var onComplete = function (data) {
- if (!rf.getDomElement(this.id) || this.disabled) { return; }
+ if (!rf.getDomElement(this.id) || !this.isEnabled()) {
+ return;
+ }
if (data) {
this.value = data['value'];
if (this.state == "progressState") {
if (this.value > this.getMaxValue()) {
- this.options.enabled=false;
- this.forceState("completeState",null);
+ this.disable();
+ this.__forceState("completeState");
return;
}
- this.updateComponent(data);
- this.renderLabel(data['markup'], data['context']);
+ this.__updateComponent(data);
+ this.__renderLabel(data['markup'], data['context']);
} else if (this.state == "initialState" && this.value >
this.getMinValue()) {
this.state = "progressState";
- this.forceState("progressState");
+ this.__forceState("progressState");
return;
}
- this.poll();
+ this.__poll();
}
};
var poll = function () {
- if(this.options.enabled){
+ if (this.isEnabled()){
this.options.parameters = this.options.parameters || {};
this.options.parameters['percent'] = "percent";
this.options.parameters[this.id] = this.id;
@@ -105,189 +235,13 @@
}
};
- var updateComponent = function (data) {
- this.setValue(this.value);
- if (!data['enabled']) { this.disable(); }
- this.updateClassName(rf.getDomElement(this.id + ":complete"),
data['completeClass']);
- this.updateClassName(rf.getDomElement(this.id + ":remain"),
data['remainClass']);
- this.updateClassName(rf.getDomElement(this.id), data['styleClass']);
-
- if (this.options.pollinterval != data['interval']) {
- this.options.pollinterval = data['interval'];
- }
- };
-
- var updateClassName = function (o, newName) {
- if (!newName) return;
- if (o && o.className) {
- if (o.className.indexOf(newName) < 0){
- o.className = o.className + " " + newName;
- }
- }
- };
- var getContext = function () {
- var context = this.context;
- if (!context) { context = {}; }
- context['minValue'] = (this.minValue == 0 ? "0" : this.minValue);
- context['maxValue'] = (this.maxValue == 0 ? "0" : this.maxValue);
- context['value'] = (this.value == 0 ? "0" : this.value);
- if (this.progressVar) {
- context[this.progressVar] = context['value'];
- }
- return context;
- };
-
- var getMode = function () {
- return this.mode;
- };
- var getMaxValue = function () {
- return this.maxValue;
- };
- var getMinValue = function () {
- return this.minValue;
- };
- var isAjaxMode = function () {
- return (this.getMode() == "ajax");
- };
- var calculatePercent = function(v) {
- var min = parseFloat(this.getMinValue());
- var max = parseFloat(this.getMaxValue());
- var value = parseFloat(v);
- if (value > min && value < max) {
- return (100*(value - min))/(max - min);
- } else if (value <= min) {
- return 0;
- } else if (value >= max) {
- return 100;
- }
- };
- var setValue = function (ev, val) {
- val = this.getParameter(ev, val, "value");
- this.value = val;
- if (!this.isAjaxMode()) {
- if (parseFloat(val) <= parseFloat(this.getMinValue())) {
- this.switchState("initialState");
- }else if (parseFloat(val) > parseFloat(this.getMaxValue())) {
- this.switchState("completeState");
- }else {
- this.switchState("progressState");
- }
- }
- if (!this.isAjaxMode() && this.state != "progressState") return;
-
- if (this.markup) {
- this.renderLabel(this.markup, this.getContext());
- }
- var p = this.calculatePercent(val);
- var d = $(rf.getDomElement(this.id + ":upload"));
- if (d != null) d.css('width', p + "%");
-
- };
-
- var renderLabel = function (markup, context) {
- if (!markup || this.state != "progressState") {
- return;
- }
- if (!context) {
- context = this.getContext();
- }
- var html = this.interpolate(markup, context);
- var remain = rf.getDomElement(this.id + ":remain");
- var complete = rf.getDomElement(this.id + ":complete");
- if(remain && complete){
- remain.innerHTML = complete.innerHTML = html;
- }
-
- };
- var interpolate = function (placeholders, context) {
- for(var k in context) {
- var v = context[k];
- var regexp = new RegExp("\\{" + k + "\\}", "g");
- placeholders = placeholders.replace(regexp, v);
- }
- return placeholders;
- };
-
- var enable = function (ev) {
- if (!this.isAjaxMode()) {
- this.switchState("progressState");
- this.setValue(this.getMinValue() + 1);
- }else if (!(this.value > this.getMaxValue())) {
- this.disable();
- this.poll();
- }
- this.disabled = false;
- };
- var disable = function () {
- this.disabled = true;
- };
- var finish = function () {
- if (!this.isAjaxMode()) {
- this.switchState("completeState");
- }else {
- this.disable();
- this.forceState("complete");
- }
- };
- var hideAll = function () {
- $(rf.getDomElement(this.id + ":progressState")).hide();
- $(rf.getDomElement(this.id + ":completeState")).hide();
- $(rf.getDomElement(this.id + ":initialState")).hide();
- };
- var switchState = function (state) {
- this.state = state;
- this.hideAll();
- $(rf.getDomElement(this.id + ":" + state)).show();
- };
- var renderState = function (state) {
- this.state = state;
- this.hideAll();
- $(rf.getDomElement(this.id + ":" + state)).show();
- };
- var forceState = function (state, oncomplete) {
- var options = {};
- options['parameters'] = options['parameters'] || {};
- options['parameters']['forcePercent'] = state;
- options['parameters'][this.id] = this.id;
- if (oncomplete) {
- options['oncomplete'] = oncomplete;
- }
- rf.ajax(this.formId, null, options);
- };
-
/*
* Prototype definition
*/
$.extend(rf.ui.ProgressBar.prototype, (function () {
return {
- /*
- * public API functions
- */
- name:"ProgressBar",
- getForm: getForm,
- getValue: getValue,
- getParameter: getParameter,
- onComplete: onComplete,
- poll: poll,
- updateComponent: updateComponent,
- updateClassName: updateClassName,
- getContext: getContext,
- getMode: getMode,
- getMaxValue: getMaxValue,
- getMinValue: getMinValue,
- isAjaxMode: isAjaxMode,
- calculatePercent: calculatePercent,
- setValue: setValue,
- enable: enable,
- disable: disable,
- finish: finish,
- hideAll: hideAll,
- interpolate: interpolate,
- renderLabel: renderLabel,
- switchState: switchState,
- renderState: renderState,
- forceState: forceState
-
- };
+ __onComplete: onComplete,
+ __poll: poll
+ };
})());
})(jQuery, RichFaces);
Modified: trunk/ui/output/ui/src/main/templates/progressBar.template.xml
===================================================================
--- trunk/ui/output/ui/src/main/templates/progressBar.template.xml 2010-11-26 14:04:44 UTC
(rev 20175)
+++ trunk/ui/output/ui/src/main/templates/progressBar.template.xml 2010-11-26 14:26:49 UTC
(rev 20176)
@@ -71,7 +71,7 @@
<cdk:object type="java.lang.String" name="state"
value="#{getCurrentState(facesContext, component)}" />
<script type="text/javascript">
#{getInitialScript(facesContext, component, state)}
- #{getRenderStateScript(facesContext, component, state)}
+ #{getShowStateScript(facesContext, component, state)}
</script>
</div>