Skip to content

Commit bbf8009

Browse files
rxaviersrxaviers
committed
Inlineedit: parameterizing class-strings, jsfying html, and organizing methods. Hardcoded strings all over the code was confusing and methods could simply be made more clear.
1 parent b04b4c0 commit bbf8009

File tree

1 file changed

+76
-43
lines changed

1 file changed

+76
-43
lines changed

‎ui/jquery.ui.inlineedit.js

Lines changed: 76 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,21 @@
1414
(function( $, undefined ) {
1515

1616
var uiInlineEditClasses = 'ui-inlineedit-content ui-widget ui-widget-content ui-corner-all',
17-
highlight = 'ui-state-highlight';
17+
buttonClass = 'ui-inlineedit-button',
18+
cancelClass = 'ui-inlineedit-cancel',
19+
inputClass = 'ui-inlineedit-input',
20+
placeholderClass = 'ui-inlineedit-placeholder',
21+
saveClass = 'ui-inlineedit-save',
22+
cancelIconClass = 'ui-icon ui-icon-cancel',
23+
saveIconClass = 'ui-icon ui-icon-disk',
24+
defaultStateClass = 'ui-state-default',
25+
highlightStateClass = 'ui-state-highlight',
26+
hoverStateClass = 'ui-state-hover';
1827

1928
$.widget( "ui.inlineedit", {
2029
version: "@VERSION",
2130
widgetEventPrefix: "edit",
31+
2232
options: {
2333
value: '',
2434
saveButton: 'Save',
@@ -28,7 +38,7 @@ $.widget( "ui.inlineedit", {
2838

2939
_init: function() {
3040
if (!this.value($.trim(this.element.text()) || this.options.value)) {
31-
this.element.html($(this._placeholderHtml()));
41+
this._show();
3242
}
3343
this._delegate();
3444
},
@@ -40,93 +50,116 @@ $.widget( "ui.inlineedit", {
4050
.bind('click', function(event) {
4151
var $this = $(event.target);
4252

43-
if ($this.hasClass('ui-inlineedit-save') || $this.parent().hasClass('ui-inlineedit-save')) {
44-
self._save(event, self.element.find('.ui-inlineedit-input').val());
53+
if ($this.hasClass(saveClass) || $this.parent().hasClass(saveClass)) {
54+
self._save(event, self.element.find('.' + inputClass).val());
4555
return;
4656
}
4757

48-
if ($this.hasClass('ui-inlineedit-cancel') || $this.parent().hasClass('ui-inlineedit-cancel')) {
49-
self._cancel(event, self.element.find('.ui-inlineedit-input').val());
58+
if ($this.hasClass(cancelClass) || $this.parent().hasClass(cancelClass)) {
59+
self._cancel(event);
5060
return;
5161
}
5262

53-
if ($this.hasClass('ui-inlineedit') || $this.hasClass('ui-inlineedit-placeholder')) {
54-
self._render();
63+
if ($this.hasClass('ui-inlineedit') || $this.hasClass(placeholderClass)) {
64+
self._edit();
5565
return;
5666
}
5767
})
5868
.bind('mouseover', function(event) {
5969
var $this = $(event.target);
6070

61-
self.element.removeClass(highlight);
62-
self.element.find('.ui-inlineedit-button').removeClass('ui-state-hover');
71+
self.element.removeClass(highlightStateClass);
72+
self.element.find('.' + buttonClass).removeClass(hoverStateClass);
6373

64-
if ($this.hasClass('ui-inlineedit-save') || $this.parent().hasClass('ui-inlineedit-save')) {
65-
self.element.find('.ui-inlineedit-save').addClass('ui-state-hover');
74+
if ($this.hasClass(saveClass) || $this.parent().hasClass(saveClass)) {
75+
self.element.find('.' + saveClass).addClass(hoverStateClass);
6676
return;
6777
}
6878

69-
if ($this.hasClass('ui-inlineedit') || $this.hasClass('ui-inlineedit-placeholder')) {
70-
self.element.addClass(highlight);
79+
if ($this.hasClass('ui-inlineedit') || $this.hasClass(placeholderClass)) {
80+
self.element.addClass(highlightStateClass);
7181
return;
7282
}
7383
})
7484
.bind('mouseout', function(event) {
7585
var $this = $(event.target);
7686

77-
if ($this.hasClass('ui-inlineedit-save') || $this.parent().hasClass('ui-inlineedit-save')) {
78-
self.element.find('.ui-inlineedit-save').removeClass('ui-state-hover');
87+
if ($this.hasClass(saveClass) || $this.parent().hasClass(saveClass)) {
88+
self.element.find('.' + saveClass).removeClass(hoverStateClass);
7989
return;
8090
}
8191

82-
if ($this.hasClass('ui-inlineedit') || $this.hasClass('ui-inlineedit-placeholder')) {
83-
self.element.removeClass(highlight);
92+
if ($this.hasClass('ui-inlineedit') || $this.hasClass(placeholderClass)) {
93+
self.element.removeClass(highlightStateClass);
8494
return;
8595
}
8696
})
87-
.addClass('ui-inlineedit');
97+
.addClass( 'ui-inlineedit' );
8898
},
8999

90-
_uiInlineEditHtml: function() {
91-
return '<form class="'+ uiInlineEditClasses +'">' +
92-
'<input class="ui-inlineedit-input" type="text" value="'+ this.value() +'">'+
93-
'<a href="#" class="ui-inlineedit-save ui-inlineedit-button ui-state-default" title="'+ this.options.saveButton +'"><span class="ui-icon ui-icon-disk">'+ this.options.saveButton +'</span></a>' +
94-
'<a href="#" class="ui-inlineedit-cancel ui-inlineedit-button ui-state-default" title="'+ this.options.cancelButton +'"><span class="ui-icon ui-icon-cancel">'+ this.options.cancelButton +'</span></a>' +
95-
'</form>';
96-
},
100+
_show: function() {
101+
this.element.html( this.value() || this._placeholder() );
102+
},
97103

98-
_placeholderHtml: function() {
99-
return '<span class="ui-inlineedit-placeholder">'+ this.options.placeholder +'</span>';
104+
_edit: function() {
105+
this.element
106+
.html( this._form() );
107+
this._formDelegate();
100108
},
101109

102-
_render: function() {
103-
this.element
104-
.html(this._uiInlineEditHtml());
105-
this._complete();
106-
this._formSubmit();
110+
_placeholder: function() {
111+
return $( "<span></span>" )
112+
.addClass( placeholderClass )
113+
.html(this.options.placeholder);
114+
},
115+
116+
_form: function() {
117+
return $( "<form></form>" )
118+
.addClass( uiInlineEditClasses )
119+
.append( $( "<input/>" )
120+
.attr( "type", "text" )
121+
.attr( "value", this.value() )
122+
.addClass( inputClass ))
123+
.append( this._saveButton() )
124+
.append( this._cancelButton() );
107125
},
108126

109-
_formSubmit: function() {
127+
_saveButton: function() {
128+
return $( "<a></a>" )
129+
.attr( "href", "#" )
130+
.attr( "title", this.options.saveButton )
131+
.addClass( saveClass + " " + buttonClass + " " + defaultStateClass )
132+
.append( $("<span></span>")
133+
.addClass( saveIconClass )
134+
.html( this.options.saveButton ));
135+
},
136+
137+
_cancelButton: function() {
138+
return $( "<a></a>" )
139+
.attr( "href", "#" )
140+
.attr( "title", this.options.cancelButton )
141+
.addClass( cancelClass + " " + buttonClass + " " + defaultStateClass )
142+
.append( $("<span></span>")
143+
.addClass( cancelIconClass )
144+
.html( this.options.cancelButton ));
145+
},
146+
147+
_formDelegate: function() {
110148
var self = this;
111149
this.element.find('form')
112150
.submit(function(event) {
113151
self._save(event, $('input', this).val());
114152
$('input', this).blur();
115153
return false;
116154
});
117-
},
118-
119-
_complete: function() {
120-
var self = this;
121-
self.element
122-
.find('input')
155+
this.element.find('input')
123156
.bind('blur', function() {
124157
if (self.timer) {
125158
window.clearTimeout(self.timer);
126159
}
127160
self.timer = window.setTimeout(function() {
128-
self.element.html(self.value() || self._placeholderHtml());
129-
self.element.removeClass(highlight);
161+
self._show.call(self);
162+
self.element.removeClass(highlightStateClass);
130163
}, 200);
131164
})
132165
.focus();
@@ -148,7 +181,7 @@ $.widget( "ui.inlineedit", {
148181

149182
value: function(newValue) {
150183
if (arguments.length) {
151-
this.options.value = $(newValue).hasClass('ui-inline-edit-placeholder') ? '' : newValue;
184+
this.options.value = $(newValue).hasClass(placeholderClass) ? '' : newValue;
152185
}
153186
return this.options.value;
154187
}

0 commit comments

Comments
 (0)