1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Copyright (C) 2009 Orbeon, Inc.

    This program is free software; you can redistribute it and/or modify it under the terms of the
    GNU Lesser General Public License as published by the Free Software Foundation; either version
    2.1 of the License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
    without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
    See the GNU Lesser General Public License for more details.

    The full text of the license is available at http://www.gnu.org/copyleft/lesser.html
-->
<xbl:xbl xmlns:xhtml="http://www.w3.org/1999/xhtml"
         xmlns:xforms="http://www.w3.org/2002/xforms"
         xmlns:xs="http://www.w3.org/2001/XMLSchema"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         xmlns:xi="http://www.w3.org/2001/XInclude"
         xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
         xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
         xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
         xmlns:saxon="http://saxon.sf.net/"
         xmlns:xbl="http://www.w3.org/ns/xbl"
         xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
         xmlns:oxf="http://www.orbeon.com/oxf/processors"
         xmlns:exf="http://www.exforms.org/exf/1-0" >

    <!--
        Inplace input field.
     -->
    <xbl:binding id="fr-inplace-input-binding" element="fr|inplace-input">

        <!-- Orbeon Form Builder Component Metadata -->
        <metadata xmlns="http://orbeon.org/oxf/xml/form-builder">
            <display-name lang="en">Inplace Input</display-name>
            <display-name lang="fr">Entrée sur-place</display-name>
            <icon lang="en">
                <small-icon>/forms/orbeon/builder/images/input.png</small-icon>
                <large-icon>/forms/orbeon/builder/images/input.png</large-icon>
            </icon>
            <template>
                 <fr:inplace-input>
                     <xforms:label ref=""/>
                     <xforms:hint ref=""/>
                     <xforms:help ref=""/>
                     <xforms:alert ref=""/>
                </fr:inplace-input>
            </template>
        </metadata>

        <xbl:resources>
            <xbl:style>
                .xbl-fr-inplace-input { display: inline-block; display: -moz-inline-box; *zoom: 1 }
                .xbl-fr-inplace-input .fr-inplace-content:hover .xforms-output { background-color: #FFFF88 }
                .xbl-fr-inplace-input .xforms-input input { background-color: #FFFF88; background-image: none; border: none }
                .xbl-fr-inplace-input .fr-inplace-buttons { display: block; margin-top:0.5em }
                .xbl-fr-inplace-input .fr-inplace-buttons .xforms-control { display: inline }
            </xbl:style>
        </xbl:resources>
        <xbl:template xxbl:transform="oxf:xslt">
            <xsl:transform version="2.0">
                <!-- Matches the bound element -->
                <xsl:template match="/*">

                    <xforms:group appearance="xxforms:internal">

                        <!-- Local model -->
                        <xforms:model id="fr-inplace-model">
                            <xforms:instance id="fr-inplace-instance">
                                <value/>
                            </xforms:instance>
                        </xforms:model>

                        <!-- Place @ref/@bind and alert in order to obtain validity MIP -->
                        <xforms:switch xbl:attr="ref bind context">
                            <xsl:attribute name="class" select="string-join(('fr-component-group', @class), ' ')"/>
                            <!-- We handle validity at the switch level so we have only one alert in use for view/edit -->
                            <xbl:content includes="xforms|label, xforms|alert, xforms|help"/>

                            <xxforms:variable name="result" select="." as="node()*"/>

                            <xforms:case id="fr-inplace-view">
                                <!-- View mode -->
                                <xhtml:span class="fr-inplace-content fr-inplace-view">
                                    <xforms:output ref="." xbl:attr="navindex navindex=tabindex" id="fr-inplace-input-view-output">
                                        <!-- Handle inline hint-->
                                        <xsl:choose>
                                            <xsl:when test="xforms:hint">
                                                <!-- Show value if it is non-blank, or if the bound node is readonly, or if there is no hint -->
                                                <xsl:attribute name="value"
                                                               select="concat('for $value in .
                                                                               return if (normalize-space($value) = '''' and not(exf:readonly($result)))
                                                                                      then concat(''['', ', if (xforms:hint/@ref) then xforms:hint/@ref else concat('''', xforms:hint, ''''), ', '']'')
                                                                                      else $value')"/>
                                            </xsl:when>
                                            <xsl:otherwise>
                                                <xsl:attribute name="value" select="."/>
                                            </xsl:otherwise>
                                        </xsl:choose>
                                        <!-- React to user click on value unless the bound node is readonly -->
                                        <xforms:action ev:event="DOMActivate" if="not(exf:readonly($result))">
                                            <!-- Copy value to local instance -->
                                            <xforms:setvalue model="fr-inplace-model" ref="." value="context()"/>
                                            <!-- Toggle and set focus -->
                                            <xforms:toggle case="fr-inplace-edit"/>
                                            <xforms:setfocus control="fr-inplace-input"/>
                                        </xforms:action>
                                    </xforms:output>
                                </xhtml:span>
                            </xforms:case>
                            <xforms:case id="fr-inplace-edit">
                                <!-- Edit mode -->
                                <!-- Show edit mode unless the bound node is readonly -->
                                <xforms:group class="fr-inplace-content fr-inplace-edit" model="fr-inplace-model" ref=".[not(exf:readonly($result))]" id="fr-inplace-input-edit-group">
                                    <xforms:input id="fr-inplace-input" xbl:attr="navindex navindex=tabindex incremental" ref=".">
                                        <xforms:action ev:event="DOMActivate">
                                            <!-- Write value back -->
                                            <xforms:setvalue ref="$result" value="context()"/>
                                        </xforms:action>
                                    </xforms:input>
                                    <xhtml:span class="fr-inplace-buttons">
                                        <xforms:trigger class="fr-inplace-rename">
                                            <!-- TODO: i18n -->
                                            <xforms:label>Apply</xforms:label>
                                            <xforms:action ev:event="DOMActivate">
                                                <!-- Write value back -->
                                                <xforms:setvalue ref="$result" value="context()"/>
                                            </xforms:action>
                                        </xforms:trigger>
                                        or
                                        <xforms:trigger appearance="minimal" class="fr-inplace-cancel">
                                            <!-- TODO: i18n -->
                                            <xforms:label>Cancel</xforms:label>
                                            <!-- No action here, handled below -->
                                        </xforms:trigger>
                                    </xhtml:span>

                                    <xforms:action ev:event="DOMActivate">
                                        <!-- Clear local value -->
                                        <xforms:setvalue ref="."/>
                                        <!-- Toggle back -->
                                        <xforms:toggle case="fr-inplace-view"/>
                                    </xforms:action>
                                </xforms:group>
                            </xforms:case>
                        </xforms:switch>
                    </xforms:group>
                </xsl:template>
            </xsl:transform>
        </xbl:template>
    </xbl:binding>
</xbl:xbl>