1
+ /**
2
+ * @file
3
+ * Drupal behavior to pass form elements status changes to the form wrapper
4
+ * for styling purposes.
5
+ */
6
+ ( function ( $ , Drupal ) {
7
+ /**
8
+ * Add classes for form element status to its wrapper div for styling
9
+ * purposes.
10
+ *
11
+ * - formawesome-focused
12
+ * - formawesome-filled
13
+ */
14
+ Drupal . behaviors . formawesome_status = {
15
+ attach : function ( context , settings ) {
16
+ $ ( 'input, textarea, select' , context ) . once ( function ( ) {
17
+ var $input = $ ( this ) ;
18
+ var type = $input . attr ( 'type' ) ;
19
+ var hovered = false ;
20
+ var focused = false ;
21
+
22
+ // Early abort if element is without status.
23
+ if ( $ . inArray ( type , [ 'submit' , 'reset' , 'button' , 'image' , 'hidden' ] ) > - 1 ) {
24
+ return ;
25
+ }
26
+
27
+ // Search the according wrapper element.
28
+ var $wrapper = $input . parents ( '.form-item' ) . first ( ) ;
29
+ if ( $wrapper . length === 0 ) {
30
+ return ;
31
+ }
32
+
33
+ /**
34
+ * Get change events and set filled-status on $wrapper.
35
+ */
36
+ var change = function ( ) {
37
+ if ( type === 'radio' || type == 'checkbox' ) {
38
+ if ( $input . is ( ':checked' ) ) {
39
+ if ( type === 'radio' ) {
40
+ $input . parents ( '.form-type-radios' ) . find ( '.form-type-radio' ) . removeClass ( 'form-filled' ) ;
41
+ }
42
+ $wrapper . addClass ( 'form-filled' ) ;
43
+ }
44
+ else {
45
+ $wrapper . removeClass ( 'form-filled' ) ;
46
+ }
47
+ }
48
+ else {
49
+ if ( $input . val ( ) !== '' ) {
50
+ $wrapper . addClass ( 'form-filled' ) ;
51
+ }
52
+ else {
53
+ $wrapper . removeClass ( 'form-filled' ) ;
54
+ }
55
+ }
56
+ } ;
57
+
58
+ // Attach change event handler.
59
+ $input . change ( change ) ;
60
+ $input . keyup ( change ) ;
61
+
62
+ // Trigger an initial change for prefilled elements.
63
+ change ( ) ;
64
+
65
+ /**
66
+ * Simple callback to refresh current focused state.
67
+ */
68
+ var refreshFocus = function ( ) {
69
+ if ( focused || hovered ) {
70
+ $wrapper . addClass ( 'form-focused' ) ;
71
+ }
72
+ else {
73
+ $wrapper . removeClass ( 'form-focused' ) ;
74
+ }
75
+ } ;
76
+
77
+ // Act appropriatly on focus, hover and blur events.
78
+ $input . focusin ( function ( ) {
79
+ focused = true ;
80
+ refreshFocus ( ) ;
81
+ } ) ;
82
+ $input . focusout ( function ( ) {
83
+ focused = false ;
84
+ refreshFocus ( ) ;
85
+ } ) ;
86
+
87
+ $wrapper . hover ( function ( ) {
88
+ hovered = true ;
89
+ refreshFocus ( ) ;
90
+ } , function ( ) {
91
+ hovered = false ;
92
+ refreshFocus ( ) ;
93
+ } ) ;
94
+
95
+ var checkEnabled = function ( ) {
96
+ // sync enabled state
97
+ var disabled = $input . attr ( "disabled" ) ;
98
+ if ( disabled === undefined ) disabled = false ;
99
+ if ( disabled ) {
100
+ $wrapper . addClass ( 'form-disabled' ) ;
101
+ }
102
+ else {
103
+ $wrapper . removeClass ( 'form-disabled' ) ;
104
+ }
105
+
106
+ var readonly = $input . attr ( "readonly" ) ;
107
+ if ( readonly === undefined ) readonly = false ;
108
+ if ( readonly ) {
109
+ $wrapper . addClass ( 'form-readonly' ) ;
110
+ }
111
+ else {
112
+ $wrapper . removeClass ( 'form-readonly' ) ;
113
+ }
114
+ } ;
115
+
116
+ // mozilla and IE
117
+ $ ( this ) . bind ( "propertychange DOMAttrModified" , checkEnabled ) ;
118
+
119
+ // hold onto a reference of the callback to work around a chromium bug
120
+ if ( this . mutationCallback === undefined ) {
121
+ this . mutationCallback = function ( mutations ) {
122
+ mutations . forEach ( checkEnabled ) ;
123
+ }
124
+ }
125
+
126
+ // safari and chrome
127
+ if ( typeof WebKitMutationObserver !== "undefined" ) {
128
+ if ( this . propertyObserver ) { delete this . propertyObserver ; this . propertyObserver = null ; }
129
+ this . propertyObserver = new WebKitMutationObserver ( this . mutationCallback ) ;
130
+ this . propertyObserver . observe ( this , { attributes :true , subtree :false } ) ;
131
+ }
132
+ } ) ;
133
+ }
134
+ } ;
135
+ } ( jQuery , Drupal ) ) ;
0 commit comments