Permalink
Browse files

Added numerical format codes.

  • Loading branch information...
1 parent 10134ba commit 7c8e58471586923b9f5ed3bb9926690178a50314 @reednj committed Sep 10, 2010
Showing with 51 additions and 14 deletions.
  1. +1 −0 Docs/InlineEditor.md
  2. +34 −4 Source/InlineEditor.js
  3. +14 −10 Test/demo.html
  4. +2 −0 Test/simpletest.html
@@ -18,6 +18,7 @@ InlineEditor Method: constructor {#InlineEditor:constructor}
* data - (*object, optional*) extra data to send along with the save request
* empty_msg - (*string, optional*) the message to show when the element is empty. You can use html.
* hide_buttons - (*bool, optional*) hides the 'save' and 'cancel' buttons, use ENTER to submit, ESC to cancel.
+* format - (*string, optional*) A format code of the type Nx where x is the number of decimal places to format with. Only use this if the data type is numerical.
### Events:
@@ -26,6 +26,8 @@ var InlineEditor = new Class({
this._default_error = 'Could Not Save';
this._error_prefix = ' Error: ';
this._empty_msg = '<i>none</i>';
+ //this._thousands_sep = ',';
+ //this._decimal_point = '.';
this.element = $(elem);
@@ -36,6 +38,7 @@ var InlineEditor = new Class({
this.options.empty_msg = this.options.empty_msg || this._empty_msg;
this.options.onSuccess = this.options.onSuccess || $empty;
this.options.hide_buttons = this.options.hide_buttons || this.element.get('data-hidebuttons') || false;
+ this.options.format = this.options.format || this.element.get('data-format');
if(this.element.getFirst() == null) {
// only set the current text if there are no children
@@ -49,9 +52,16 @@ var InlineEditor = new Class({
// apply the css class to the root element so it gets the default styles
this.element.addClass('ine-root');
+ // maybe we need to format the text before putting it into the html?
+ if(this.options.format && this.current_text != "") {
+ var html_text = this.current_text.toFloat().format(this.options.format);
+ } else {
+ var html_text = this.current_text;
+ }
+
// note the condition on 'text'. Show the empty message if it is empty.
this.edit_link = $e('a', {
- 'html': (this.current_text == "") ? this.options.empty_msg : this.current_text,
+ 'html': (this.current_text == "") ? this.options.empty_msg : html_text,
'href': 'javascript:void(0)',
'events':{'click':this.start_edit.bind(this)}
});
@@ -113,7 +123,6 @@ var InlineEditor = new Class({
this.edit_form.show();
this.edit_link.hide();
- // init the edit textbox with the correct value etc
this.edit_input.value = this.current_text;
// these buttons might be in the wrong state from last time so we reset them
@@ -128,10 +137,11 @@ var InlineEditor = new Class({
//this.edit_input.select();
// TODO this is in totally the wrong place. We should call a start
- // edit event.
+ // edit event. This code is for combo boxes only
if($defined(this.edit_input.selectedIndex)) {
this.edit_input.selectedIndex= this.selectedIndex;
}
+
},
cancel_edit: function() {
@@ -197,7 +207,12 @@ var InlineEditor = new Class({
// with nothing in it
this.edit_link.innerHTML = this.options.empty_msg;
} else {
- this.edit_link.innerHTML = this.current_text;
+ if(this.options.format) {
+ this.edit_link.innerHTML = this.current_text.toFloat().format(this.options.format);
+ } else {
+ this.edit_link.innerHTML = this.current_text;
+ }
+
}
this.options.onSuccess(this.current_text);
@@ -276,3 +291,18 @@ Element.implement({
show: function() {this.setStyle('display','');},
hide: function() {this.setStyle('display','none');}
});
+
+// add commas to long numbers
+//
+// http://snipplr.com/view/3516/mootools--numberformat/
+Number.implement({ format: function(decimals, dec_point, thousands_sep) {
+ decimals = (decimals || 'N2').replace('N', '').toInt();
+ dec_point = dec_point || '.';
+ thousands_sep = thousands_sep || ',';
+
+ var matches = /(-)?(\d+)(\.\d+)?/.exec((isNaN(this) ? 0 : this) + ''); // returns matches[1] as sign, matches[2] as numbers and matches[3] as decimals
+ var remainder = matches[2].length > 3 ? matches[2].length % 3 : 0;
+ return (matches[1] ? matches[1] : '') + (remainder ? matches[2].substr(0, remainder) + thousands_sep : '') + matches[2].substr(remainder).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep) +
+ (decimals && matches[3]? dec_point + (+ matches[3] || 0).round(decimals).toString().substr(2) : '');
+
+}});
View
@@ -121,16 +121,6 @@
</div>
-<div class='desc'>For small textboxes you can set the 'hide_buttons' option. (and use css to set the input width)</div>
-<div class='box'>
- <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 class='desc'>You can use a dropdown instead of a Text input with InlineEditor.Combo:</div>
<div class='box'>
@@ -154,6 +144,20 @@
</div>
+<div class='desc'>For small textboxes you can set the 'hide_buttons' option. (and use css to set the input width)</div>
+<div class='box'>
+ <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 class='desc'>You can set a format code on numbers, so that appear with commas etc</div>
+<div class='box'>
+ <div>
+ Tonnes/hours: <span class='editable edit' data-format='N0'>10593.1</span>
+ </div>
+</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>
@@ -113,6 +113,8 @@
<div id='color-target' style='width: 48px; height: 48px; background-color: gray; border: 2px solid gray;'></div>
+<div class='editable' data-format='N3'>123456.12345</div>
+
</div>
</body>

0 comments on commit 7c8e584

Please sign in to comment.