From cc7b4ad0b69a35238b3811f00ad3e4412fa2f1b7 Mon Sep 17 00:00:00 2001
From: vitalets <noginsk@rambler.ru>
Date: Thu, 29 Nov 2012 18:59:04 +0400
Subject: [PATCH] inputs-ext directory with sample address input
---
grunt.js | 30 +++-----
src/inputs-ext/address/address.css | 9 +++
src/inputs-ext/address/address.js | 107 +++++++++++++++++++++++++++++
3 files changed, 127 insertions(+), 19 deletions(-)
create mode 100644 src/inputs-ext/address/address.css
create mode 100644 src/inputs-ext/address/address.js
diff --git a/grunt.js b/grunt.js
index 3b66d5b..4282da2 100644
--- a/grunt.js
+++ b/grunt.js
@@ -151,7 +151,8 @@ module.exports = function(grunt) {
'src/element/*.js',
'src/inputs/*.js',
'src/inputs/date/date.js',
- 'src/inputs/dateui/dateui.js'
+ 'src/inputs/dateui/dateui.js',
+ 'src/inputs-ext/**/*.js'
]
},
/*
@@ -192,29 +193,20 @@ module.exports = function(grunt) {
flatten: true
}
},
+ inputs_ext: {
+ files: {
+ '<%= dist %>/inputs-ext/': 'src/inputs-ext/**'
+ },
+ options: {
+ basePath: 'inputs-ext'
+ }
+ },
ui_datepicker: {
files: {
//copy jquery ui datepicker
'<%= dist %>/jquery-editable/jquery-ui-datepicker/' : 'src/inputs/dateui/jquery-ui-datepicker/**'
}
- }
- },
- yuidoc: {
- compile: {
- name: '<%= pkg.title || pkg.name %>',
- description: '<%= pkg.description %>',
- version: '<%= pkg.version %>',
- url: "<%= pkg.homepage %>",
- // logo: 'src/editable-form/img/loading.gif',
- options: {
- paths: "src/",
- ignorePaths: ['src/inputs/date/locales'],
- outdir: "../docs/",
-// theme: "simple",
- themedir: "../yuidoc-theme"
- //themedir: "../yuidoc-bootstrap-theme-master"
- }
- }
+ }
},
//compress does not work properly for MAC OS (see https://github.com/vitalets/bootstrap-editable/issues/19)
diff --git a/src/inputs-ext/address/address.css b/src/inputs-ext/address/address.css
new file mode 100644
index 0000000..f37a43b
--- /dev/null
+++ b/src/inputs-ext/address/address.css
@@ -0,0 +1,9 @@
+.editable-address {
+ display: block;
+ margin-bottom: 5px;
+}
+
+.editable-address span {
+ width: 70px;
+ display: inline-block;
+}
\ No newline at end of file
diff --git a/src/inputs-ext/address/address.js b/src/inputs-ext/address/address.js
new file mode 100644
index 0000000..7cc562e
--- /dev/null
+++ b/src/inputs-ext/address/address.js
@@ -0,0 +1,107 @@
+/**
+Address editable input.
+Internally value stored as {city: "Moscow", street: "Lenina", building: "15"}
+
+@class address
+@extends abstract
+@final
+@example
+<a href="#" id="address" data-type="address" data-pk="1">awesome</a>
+<script>
+$(function(){
+ $('#address').editable({
+ url: '/post',
+ title: 'Enter city, street and building #',
+ value: {
+ city: "Moscow",
+ street: "Lenina",
+ building: "15"
+ }
+ });
+});
+</script>
+**/
+(function ($) {
+ var Address = function (options) {
+ this.init('address', options, Address.defaults);
+ };
+
+ $.fn.editableform.utils.inherit(Address, $.fn.editableform.types.abstract);
+
+ $.extend(Address.prototype, {
+ render: function() {
+ Address.superclass.render.call(this);
+
+ // this.$input.
+ },
+
+
+ value2html: function(value, element) {
+ var html = value.city + ', st. ' + value.street + ', bld. ' + value.building;
+ $(element).text(html);
+ },
+
+ html2value: function(html) {
+ /*
+ you may write parsing method to get value by element's html
+ e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
+ but for complex structures I do not recommend do that.
+ Better always set value directly via javascript, e.g.
+ editable({
+ value: {
+ city: "Moscow",
+ street: "Lenina",
+ building: "15"
+ }
+ });
+ */
+ return null;
+ },
+
+ /*
+ method for converting data before sent on server.
+ As jQuery correctly sends objects via ajax, you can just return value
+ */
+ value2str: function(value) {
+ return value;
+ },
+
+ /*
+ this is mainly for parsing value defined in data-value attribute.
+ If you will always set value by javascript, no need to overwrite it
+ */
+ str2value: function(str) {
+ return str;
+ },
+
+ value2input: function(value) {
+ this.$input.find('input[name="city"]').val(value.city);
+ this.$input.find('input[name="street"]').val(value.street);
+ this.$input.find('input[name="building"]').val(value.building);
+ },
+
+ input2value: function() {
+ return {
+ city: this.$input.find('input[name="city"]').val(),
+ street: this.$input.find('input[name="street"]').val(),
+ building: this.$input.find('input[name="building"]').val()
+ };
+ },
+
+ activate: function() {
+ //set focus on city
+ this.$input.find('input[name="city"]').focus();
+ }
+ });
+
+ Address.defaults = $.extend({}, $.fn.editableform.types.abstract.defaults, {
+ tpl: '<div><label><span>City: </span><input type="text" name="city" class="span2"></label></div>'+
+ '<div><label><span>Street: </span><input type="text" name="street" class="span2"></label></div>'+
+ '<div><label><span>Building: </span><input type="text" name="building" class="span1"></label></div>',
+
+ inputclass: 'editable-address'
+ });
+
+ $.fn.editableform.types.address = Address;
+
+}(window.jQuery));
\ No newline at end of file