You are viewing a plain text version of this content. The canonical link for it is here.
Posted to cvs@cocoon.apache.org by br...@apache.org on 2007/01/18 23:05:51 UTC
svn commit: r497594 - in
/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources:
./ css/ img/ js/ js/templates/ js/templates/images/
Author: bruno
Date: Thu Jan 18 14:05:50 2007
New Revision: 497594
URL: http://svn.apache.org/viewvc?view=rev&rev=497594
Log:
CForms: replace forms help popup and validation error message display with a dojo-based widget.
Compared to before, this widget is backed by a background iframe preventing show-through of input fields on Internet Explorer.
Added:
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/InfoPopup.js (with props)
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.css (with props)
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.html
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/close.gif (with props)
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/help.gif (with props)
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/validation-message.gif (with props)
Removed:
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/img/help.gif
Modified:
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/css/forms.css
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-advanced-field-styling.xsl
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-field-styling.xsl
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/__package__.js
cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/manifest.js
Modified: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/css/forms.css
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/css/forms.css?view=diff&rev=497594&r1=497593&r2=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/css/forms.css (original)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/css/forms.css Thu Jan 18 14:05:50 2007
@@ -42,11 +42,6 @@
z-index: 2;
}
-.forms-validation-message, a.forms-validation-message:link {
- color: red;
- font-weight: bold;
-}
-
.forms-validation-errors {
}
@@ -56,15 +51,6 @@
.forms-field-required {
color:blue;
font-weight: bold;
-}
-
-.forms-help {
- border-style: dotted;
- border-width: 1px;
- padding: 5px;
- background-color:#FFFFC0; /* light yellow */
- width: 200px; /* otherwise IE does a weird layout */
- z-index:1000; /* must be higher than forms-tabContent */
}
.forms-doubleList select {
Modified: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-advanced-field-styling.xsl
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-advanced-field-styling.xsl?view=diff&rev=497594&r1=497593&r2=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-advanced-field-styling.xsl (original)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-advanced-field-styling.xsl Thu Jan 18 14:05:50 2007
@@ -67,14 +67,9 @@
+-->
<xsl:template match="fi:help">
<xsl:variable name="id" select="concat(../@id, ':help')"/>
- <div class="forms-help forms help" id="{$id}" style="visibility:hidden; position:absolute;">
- <span style="float:right"><a href="#" onClick="document.getElementById('{$id}').style.visibility = 'hidden';return false;"><img align="top" alt="close" src="{$resources-uri}/forms/img/close.gif" height="6" width="6"/></a></span>
- <xsl:apply-templates select="node()"/>
- </div>
- <a id="{$id}:a" href="#" onclick="forms_createPopupWindow('{$id}').showPopup('{$id}:a');return false;">
- <!-- TODO: i18n key for helppopup -->
- <img src="{$resources-uri}/forms/img/help.gif" alt="helppopup"/>
- </a>
+ <span id="{$id}" dojoType="forms:infopopup" style="display:none" class="forms-help-popup" icon="help.gif">
+ <xsl:copy-of select="node()"/>
+ </span>
</xsl:template>
<!--+
Modified: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-field-styling.xsl
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-field-styling.xsl?view=diff&rev=497594&r1=497593&r2=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-field-styling.xsl (original)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-field-styling.xsl Thu Jan 18 14:05:50 2007
@@ -227,16 +227,10 @@
|
+-->
<xsl:template match="fi:validation-message">
- <a href="#" class="forms-validation-message forms validation-message" id="forms-validation-message-{../@id}">
- <xsl:attribute name="onclick">
- <xsl:text>alert('</xsl:text>
- <xsl:call-template name="apos-replace">
- <xsl:with-param name="text" select="normalize-space(.)"/>
- </xsl:call-template>
- <xsl:text>'); return false;</xsl:text>
- </xsl:attribute>
- <xsl:text> ! </xsl:text>
- </a>
+ <span dojoType="forms:infopopup" style="display:none" class="forms-validation-message-popup"
+ id="forms-validation-message-{../@id}" icon="validation-message.gif">
+ <xsl:copy-of select="node()"/>
+ </span>
</xsl:template>
<!--+
Added: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/InfoPopup.js
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/InfoPopup.js?view=auto&rev=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/InfoPopup.js (added)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/InfoPopup.js Thu Jan 18 14:05:50 2007
@@ -0,0 +1,102 @@
+dojo.provide("cocoon.forms.InfoPopup");
+//dojo.require("dojo.lfx.rounded");
+
+/*
+ * A widget displaying an icon which when pressed shows a popup.
+ * The content of the popup is the content of the original element declaring the widget.
+ */
+dojo.widget.defineWidget(
+ // widget name and class
+ "cocoon.forms.InfoPopup",
+
+ // superclass
+ dojo.widget.HtmlWidget,
+
+ function() {
+
+ },
+
+ // properties and methods
+ {
+ isContainer: true,
+ icon: "",
+
+ templatePath: cocoon.resourcesUri + "/forms/js/templates/InfoPopup.html",
+ templateCssPath: cocoon.resourcesUri + "/forms/js/templates/InfoPopup.css",
+
+ closeIconURL: cocoon.resourcesUri + "/forms/js/templates/images/close.gif",
+
+ containerToggle: "show",
+
+ containerToggleDuration: 150,
+
+ postMixInProperties: function(args, frag, parent) {
+ cocoon.forms.InfoPopup.superclass.postMixInProperties(this, args, frag, parent);
+
+ this.iconURL = cocoon.resourcesUri + "/forms/js/templates/images/" + this.icon;
+ },
+
+ attachTemplateNodes: function(){
+ // summary: use attachTemplateNodes to specify containerNode, as fillInTemplate is too late for this
+ cocoon.forms.InfoPopup.superclass.attachTemplateNodes.apply(this, arguments);
+
+ this.infoPopup = dojo.widget.createWidget("PopupContainer", {toggle: this.containerToggle, toggleDuration: this.containerToggleDuration});
+
+ this.infoPopupContainerNode = this.infoPopup.domNode;
+ },
+
+ fillInTemplate: function(args, frag) {
+ cocoon.forms.InfoPopup.superclass.fillInTemplate(this, args, frag);
+
+ this.domNode.appendChild(this.infoPopup.domNode);
+
+ // take over class from original node
+ var source = this.getFragNodeRef(frag);
+ dojo.html.setClass(this.popupNode, dojo.html.getClass(source));
+
+ // move popupNode (defined in the template) to the actual PopupContainer widget
+ this.domNode.removeChild(this.popupNode);
+ this.infoPopupContainerNode.appendChild(this.popupNode);
+
+ // copy content from original element to the popup
+ this.contentNode.innerHTML = this.getFragNodeRef(frag).innerHTML;
+// var origContent = this.getFragNodeRef(frag).childNodes;
+// for (var i = 0; i < origContent.length; i++) {
+// this.contentNode.appendChild(origContent.item(i));
+// }
+
+ // make sure popup can be visible
+ this.popupNode.style.display = "";
+ },
+
+ _onIconClick: function() {
+ if(!this.infoPopup.isShowingNow) {
+
+ /* rounded corners experiment -- didn't look really nice IMO
+ if (!this.rounded) {
+ var options = {
+ tl:{ radius: 10 },
+ tr:{ radius: 10 },
+ bl:{ radius: 10 },
+ br:{ radius: 10 }
+ };
+
+ // rounded corners can only be applied when the thing is visible
+ this.infoPopupContainerNode.style.display = "";
+ dojo.lfx.rounded(options, [ this.popupNode ]);
+ this.infoPopupContainerNode.style.display = "none";
+ this.rounded = true;
+ } */
+
+ this.infoPopup.open(this.buttonNode, this, this.buttonNode);
+ } else {
+ this.infoPopup.close();
+ }
+ },
+
+ hidePopup: function() {
+ this.infoPopup.close();
+ }
+
+ }
+);
\ No newline at end of file
Propchange: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/InfoPopup.js
------------------------------------------------------------------------------
svn:eol-style = native
Modified: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/__package__.js
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/__package__.js?view=diff&rev=497594&r1=497593&r2=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/__package__.js (original)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/__package__.js Thu Jan 18 14:05:50 2007
@@ -27,6 +27,7 @@
"cocoon.forms.CFormsDragAndDropRepeater",
"cocoon.forms.CFormsSuggest",
"cocoon.forms.DropdownDateTimePicker",
+ "cocoon.forms.InfoPopup",
"dojo.widget.InlineEditBox" // also needed by advanced-field-styling
]
});
Added: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.css
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.css?view=auto&rev=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.css (added)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.css Thu Jan 18 14:05:50 2007
@@ -0,0 +1,19 @@
+.forms-default-popup {
+ background: lightgray;
+ border: 1px solid black;
+ width: 22em;
+}
+
+.forms-help-popup {
+ background: #ffff7a;
+ border: 1px solid #baba24;
+ padding: 10px;
+ width: 22em;
+}
+
+.forms-validation-message-popup {
+ background: #ffe4cc;
+ border: 1px solid #ff7e00;
+ padding: 10px;
+ width: 22em;
+}
Propchange: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.css
------------------------------------------------------------------------------
svn:eol-style = native
Added: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.html
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.html?view=auto&rev=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.html (added)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/InfoPopup.html Thu Jan 18 14:05:50 2007
@@ -0,0 +1,19 @@
+<span style='white-space: nowrap'>
+ <img src='${this.iconURL}' dojoAttachEvent='onclick:_onIconClick' dojoAttachPoint='buttonNode'
+ style='vertical-align: middle; cursor: pointer; cursor: hand'/>
+
+ <div dojoAttachPoint="popupNode" style="display: none" class="forms-default-popup">
+ <table style="width: 100%; margin: 0px; border: 0px">
+ <tr>
+ <td>
+ <div dojoAttachPoint="contentNode"/>
+ </td>
+ <td style="vertical-align: top; width: 15px">
+ <!-- Image on which to click to hide the help box -->
+ <img src="${this.closeIconURL}" alt="x" dojoAttachEvent="onClick:hidePopup"
+ style="vertical-align: top; cursor: pointer;"/>
+ </td>
+ </tr>
+ </table>
+ </div>
+</span>
\ No newline at end of file
Added: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/close.gif
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/close.gif?view=auto&rev=497594
==============================================================================
Binary file - no diff available.
Propchange: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/close.gif
------------------------------------------------------------------------------
svn:mime-type = image/gif
Added: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/help.gif
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/help.gif?view=auto&rev=497594
==============================================================================
Binary file - no diff available.
Propchange: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/help.gif
------------------------------------------------------------------------------
svn:mime-type = image/gif
Added: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/validation-message.gif
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/validation-message.gif?view=auto&rev=497594
==============================================================================
Binary file - no diff available.
Propchange: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/templates/images/validation-message.gif
------------------------------------------------------------------------------
svn:mime-type = image/gif
Modified: cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/manifest.js
URL: http://svn.apache.org/viewvc/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/manifest.js?view=diff&rev=497594&r1=497593&r2=497594
==============================================================================
--- cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/manifest.js (original)
+++ cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/manifest.js Thu Jan 18 14:05:50 2007
@@ -40,7 +40,8 @@
"ajaxform" : "cocoon.forms.AjaxForm",
"cformsrepeater" : "cocoon.forms.CFormsRepeater",
"cformssuggest" : "cocoon.forms.CFormsSuggest",
- "dropdowndatetimepicker" : "cocoon.forms.DropdownDateTimePicker"
+ "dropdowndatetimepicker" : "cocoon.forms.DropdownDateTimePicker",
+ "infopopup" : "cocoon.forms.InfoPopup"
// register new Widgets in the cocoon.forms namespace here
},
svg: {