Permalink
Browse files

Use onSuccess events so that the control can be used with no url set.

  • Loading branch information...
1 parent 29a4d2e commit 8d31204f582abe8c532b7ed0487ca9f5e6cff2e5 @reednj committed Sep 6, 2010
Showing with 79 additions and 9 deletions.
  1. +2 −0 Source/InlineEditor.Combo.js
  2. +5 −2 Source/InlineEditor.js
  3. +47 −7 Test/demo.html
  4. +25 −0 Test/simpletest.html
@@ -93,5 +93,7 @@ InlineEditor.Combo = new Class({
this.selectedIndex = this.edit_input.selectedIndex;
this.current_text = this.edit_input.options[this.selectedIndex].text;;
this.edit_link.innerHTML = this.current_text;
+
+ this.options.onSuccess(this.current_text, this.edit_input.value);
}
});
View
@@ -34,6 +34,7 @@ var InlineEditor = new Class({
this.options.url = this.options.url || this.element.get('data-url');
this.options.data = this.options.data || {};
this.options.empty_msg = this.options.empty_msg || this._empty_msg;
+ this.options.onSuccess = this.options.onSuccess || $empty;
if(this.element.getFirst() == null) {
// only set the current text if there are no children
@@ -119,7 +120,9 @@ var InlineEditor = new Class({
save_edit: function() {
if(!$defined(this.options.url)) {
- alert('cannot save: no url defined');
+ // no url? we just want to call the save complete method and
+ // trigger the onSucess event.
+ this.save_complete();
return;
}
@@ -150,7 +153,6 @@ var InlineEditor = new Class({
save_complete: function() {
this.edit_form.hide();
this.edit_link.show();
-
this._set_link();
},
@@ -176,6 +178,7 @@ var InlineEditor = new Class({
this.edit_link.innerHTML = this.current_text;
}
+ this.options.onSuccess(this.current_text);
}
});
View
@@ -31,10 +31,26 @@
width: 32px;
}
- .edit a, .editable a, .dropdown a {
+ .edit a, .editable a, .dropdown a, .cs-c a {
background-color: #cef;
padding: 1px 3px;
}
+
+ .dropdown {
+ margin: 3px;
+ }
+
+ #color-target {
+ margin-top: 8px;
+ width: 48px;
+ height: 48px;
+ background-color: white;
+ border: 2px solid gray;
+ }
+
+ div.desc {
+ font-weight: bold;
+ }
</style>
@@ -54,8 +70,11 @@
new InlineEditor.Combo(item, {'url':'api/edittest.php'});
});
- new InlineEditor('will-fail', {'url':'api/edittest.php', 'data':{'f':'y', 'id':1}});
-
+ new InlineEditor.Combo('color-select', {
+ onSuccess: function(new_text, new_value) {
+ $('color-target').setStyle('background-color', new_value);
+ }
+ });
}
}
@@ -68,7 +87,7 @@
<div id='t-body'>
-<div>click on something to edit it (I've made everything editable blue, but this doesn't happen by default)</div>
+<div class='desc'>click on something to edit it (I've made everything editable blue, but this doesn't happen by default)</div>
<div class='box'>
@@ -81,14 +100,17 @@
</div>
-<div>You could use css to set the width of the textbox</div>
+<div class='desc'>You could use css to set the width of the textbox</div>
<div class='box'>
- <div>Set Minimum: <span class='editable small-edit'>10</span> Set Maximum: <span class='editable small-edit'></span></div>
+ <div>
+ Set Minimum: <span class='editable small-edit' data-url='api/edittest.php'>10</span>
+ Set Maximum: <span class='editable small-edit' data-url='api/edittest.php'></span>
+ </div>
</div>
-<div>Drop down examples:</div>
+<div class='desc'>You can use a dropdown instead of a Text input with InlineEditor.Combo:</div>
<div class='box'>
@@ -111,6 +133,24 @@
</div>
+
+<div class='desc'>You don't have to set a url. You can use the onSuccess event to do things after the submit purely in js</div>
+
+<div class='box'>
+
+<div id='color-select' class='cs-c'>
+ <div data-value='#FFF'>White</div>
+ <div data-value='#F00'>Red</div>
+ <div data-value='#0F0'>Green</div>
+ <div data-value='#00F'>Blue</div>
+ <div data-value='#000'>Black</div>
+</div>
+
+<div id='color-target'></div>
+
+</div>
+
+
</div>
</body>
View
@@ -53,6 +53,18 @@
});
new InlineEditor('empty-msg', {'empty_msg':'empty'});
+
+ new InlineEditor('no-url', {
+ onSuccess: function(new_text) {
+ alert(new_text);
+ }
+ });
+
+ new InlineEditor.Combo('color-select', {
+ onSuccess: function(new_text, new_value) {
+ $('color-target').setStyle('background-color', new_value);
+ }
+ });
}
}
@@ -87,6 +99,19 @@
<div id='edit-combo' data-url='api/edittest.php'></div>
<div id='extra-data' data-url='api/edittest.php' data-id='2'>this sends extra data</div>
+
+<div id='no-url'>no url</div>
+
+<div id='color-select'>
+ <div data-value='#F00'>Red</div>
+ <div data-value='#0F0'>Green</div>
+ <div data-value='#00F'>Blue</div>
+ <div data-value='#000'>Black</div>
+ <div data-value='#FFF'>White</div>
+</div>
+
+<div id='color-target' style='width: 48px; height: 48px; background-color: gray; border: 2px solid gray;'></div>
+
</div>
</body>

0 comments on commit 8d31204

Please sign in to comment.