[PATCH 0/3] Create and use jQuery form extensions
Extend base classes to support form processing Extend jQuery form Make use of the new forms handling capabilities Adam King (3): Extend base classes to support form processing Extend jQuery form Make use of the new forms handling capabilities ui/js/src/kimchi.form.js | 76 +++++++++------------------- ui/js/src/kimchi.grid.js | 2 +- ui/js/src/kimchi.object.js | 85 ++++++++++++++++++++++++++++++++ ui/js/src/kimchi.repository_edit_main.js | 31 +----------- ui/js/src/kimchi.string.js | 45 +++++++++++++++++ 5 files changed, 154 insertions(+), 85 deletions(-) create mode 100644 ui/js/src/kimchi.object.js create mode 100644 ui/js/src/kimchi.string.js -- 1.8.1.4
Add methods to the base Object and String classes to facilitate jQuery form handling. Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/js/src/kimchi.object.js | 85 ++++++++++++++++++++++++++++++++++++++++++++++ ui/js/src/kimchi.string.js | 45 ++++++++++++++++++++++++ 2 files changed, 130 insertions(+) create mode 100644 ui/js/src/kimchi.object.js create mode 100644 ui/js/src/kimchi.string.js diff --git a/ui/js/src/kimchi.object.js b/ui/js/src/kimchi.object.js new file mode 100644 index 0000000..6ef284a --- /dev/null +++ b/ui/js/src/kimchi.object.js @@ -0,0 +1,85 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Object.defineProperty(Object.prototype, "getDeepValue", { + value: function(key) { + var result=undefined; + try { + if(!Array.isArray(key)) { + key=key.parseKey(); + } + if(key.length!=0) { + var tmpName=key.shift(); + if(this[tmpName]!=undefined) { + result=this[tmpName]; + } + if(key.length!=0) { + result=result.getDeepValue(key); + } + } + } + catch (err) { + //do nothing + } + return(result); + } +}); + +Object.defineProperty(Object.prototype, "setDeepValue", { + value: function(key, val) { + var keys; + if(Array.isArray(key)) { + keys=key; + } + else { + keys=key.parseKey(); + } + if(keys.length!=0) { + var key=keys.shift(); + if(keys.length==0) { + if(this[key]==undefined) { + this[key]=val; + } + else if(Array.isArray(this[key])){ + this[key].push(val); + } + else { + var tmpArray=[] + tmpArray.push(this[key]); + tmpArray.push(val); + result[key]=tmpArray; + } + } + else { + if(this[key]==undefined) { + this[key]=new Object(); + this[key].setDeepValue(keys,val); + } + else if(Array.isArray(this[key])){ + var tmpO=new Object(); + this[key].push(tmpO); + tmpO.setDeepValue(keys,val); + } + else { + this[key].setDeepValue(keys,val); + } + } + } + return(this); + } +}); diff --git a/ui/js/src/kimchi.string.js b/ui/js/src/kimchi.string.js new file mode 100644 index 0000000..252ae50 --- /dev/null +++ b/ui/js/src/kimchi.string.js @@ -0,0 +1,45 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Object.defineProperty(String.prototype, "parseKey", { + value: function(parsedKey) { + try { + if (!Array.isArray(parsedKey)) { + parsedKey=[]; + } + } + catch (err) { + parsedKey=[]; + } + var openBracket=this.indexOf("["); + if (openBracket!=-1) { + var id=this.slice(0, openBracket); + parsedKey.push(id); + var closeBracket=this.lastIndexOf("]"); + if (closeBracket==-1) { + closeBracket=this.length; + } + var tmpName=this.slice(openBracket+1,closeBracket); + tmpName.parseKey(parsedKey); + } + else { + parsedKey.push(this); + } + return(parsedKey); + } +}); -- 1.8.1.4
On 03/27/2014 11:59 PM, Adam King wrote:
Add methods to the base Object and String classes to facilitate jQuery form handling.
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/js/src/kimchi.object.js | 85 ++++++++++++++++++++++++++++++++++++++++++++++ ui/js/src/kimchi.string.js | 45 ++++++++++++++++++++++++ 2 files changed, 130 insertions(+) create mode 100644 ui/js/src/kimchi.object.js create mode 100644 ui/js/src/kimchi.string.js
diff --git a/ui/js/src/kimchi.object.js b/ui/js/src/kimchi.object.js new file mode 100644 index 0000000..6ef284a --- /dev/null +++ b/ui/js/src/kimchi.object.js @@ -0,0 +1,85 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Object.defineProperty(Object.prototype, "getDeepValue", { + value: function(key) { + var result=undefined; + try { + if(!Array.isArray(key)) { + key=key.parseKey(); + } + if(key.length!=0) { + var tmpName=key.shift(); + if(this[tmpName]!=undefined) { + result=this[tmpName]; + } + if(key.length!=0) { + result=result.getDeepValue(key); + } + } + } + catch (err) { + //do nothing + } + return(result); + } +}); + +Object.defineProperty(Object.prototype, "setDeepValue", { + value: function(key, val) { + var keys; + if(Array.isArray(key)) { + keys=key; + } + else { + keys=key.parseKey(); + } + if(keys.length!=0) { + var key=keys.shift(); + if(keys.length==0) { + if(this[key]==undefined) { + this[key]=val; + } + else if(Array.isArray(this[key])){ + this[key].push(val); + } + else { + var tmpArray=[] + tmpArray.push(this[key]); + tmpArray.push(val); + result[key]=tmpArray; + } + } + else { + if(this[key]==undefined) { + this[key]=new Object(); + this[key].setDeepValue(keys,val); + } + else if(Array.isArray(this[key])){ + var tmpO=new Object(); + this[key].push(tmpO); + tmpO.setDeepValue(keys,val); + } + else { + this[key].setDeepValue(keys,val); + } + } + } + return(this); + } +}); diff --git a/ui/js/src/kimchi.string.js b/ui/js/src/kimchi.string.js new file mode 100644 index 0000000..252ae50 --- /dev/null +++ b/ui/js/src/kimchi.string.js @@ -0,0 +1,45 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Object.defineProperty(String.prototype, "parseKey", { + value: function(parsedKey) { + try { + if (!Array.isArray(parsedKey)) { + parsedKey=[]; + } + } + catch (err) { + parsedKey=[]; + } + var openBracket=this.indexOf("[");
Does not exist an eval() function in JS to confirm it is a array or not? I think it would be safer than compare strings.
+ if (openBracket!=-1) { + var id=this.slice(0, openBracket); + parsedKey.push(id); + var closeBracket=this.lastIndexOf("]"); + if (closeBracket==-1) { + closeBracket=this.length; + } + var tmpName=this.slice(openBracket+1,closeBracket); + tmpName.parseKey(parsedKey); + } + else { + parsedKey.push(this); + } + return(parsedKey); + } +});
+ var openBracket=this.indexOf("[");
Does not exist an eval() function in JS to confirm it is a array or not? I think it would be safer than compare strings.
+ if (openBracket!=-1) { + var id=this.slice(0, open This check isn't actually to determine if this is an array, but is used to break down the accessor of the Object whether its an array or not. There IS an eval() function in Javascript that could be used when reading the values from the object, but couldn't be used when building
On 4/1/2014 2:47 PM, Aline Manera wrote: the object. The eval() function is generally discouraged for a few reasons. See http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-fu... and http://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/ Though coding my own parser is more error prone than using eval for the read, its the only option I see for the construction flow. -- Adam King <rak@linux.vnet.ibm.com> IBM C&SI
Facilitate formulating an Object from an HTML form, and populating a form from an Object. Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/js/src/kimchi.form.js | 76 ++++++++++++++---------------------------------- 1 file changed, 22 insertions(+), 54 deletions(-) diff --git a/ui/js/src/kimchi.form.js b/ui/js/src/kimchi.form.js index 7ffb5e5..0a0af99 100644 --- a/ui/js/src/kimchi.form.js +++ b/ui/js/src/kimchi.form.js @@ -15,66 +15,34 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + (function($) { $.fn.serializeObject = function() { var formDataArray = $(this).serializeArray(); - var formData = {}; + var formData = new Object(); $.each(formDataArray, function(index, data) { - var names=kimchi.form.parseFormName(data.name); - kimchi.form.assignValue(names,data.value,formData); + formData.setDeepValue(data.name, data.value); }); return formData; }; }(jQuery)); -kimchi.form = {}; -kimchi.form.assignValue = function(names, value, obj) { - var result=value; - - if(names.length!=0) { - result=obj; - var name=names.shift(); - if(!result) { - result={}; - } - if(!result[name]) { - result[name]=kimchi.form.assignValue(names,value); - } - else if(names.length==0) { - if(Array.isArray(result[name])){ - result[name].push(value); - } - else { - result[name]=[result[name],value]; - } - } - else { - result[name]=kimchi.form.assignValue(names,value,result[name]); - } - } - return(result); -} - -kimchi.form.parseFormName = function(name, parsedName) { - if (!parsedName) { - parsedName=[]; - } - if(!name || name=="") { - return(parsedName); - } - var openBracket=name.indexOf("["); - if (openBracket!=-1) { - var id=name.slice(0, openBracket); - parsedName.push(id); - var closeBracket=name.lastIndexOf("]"); - if (closeBracket==-1) { - closeBracket=name.length; - } - var tmpName=name.slice(openBracket+1,closeBracket); - kimchi.form.parseFormName(tmpName,parsedName); - } - else { - parsedName.push(name); - } - return(parsedName); -} +(function($) { + $.fn.fillWithObject = function(obj) { + $(this).find("input").each(function(){ + switch($(this).attr('type')) { + case 'text': + $(this).val(obj.getDeepValue($(this).attr("name"))); + break; + case 'radio': + case 'checkbox': + var a=String($(this).val()); + var b=String(obj.getDeepValue($(this).attr("name"))); + $(this).prop("checked",(a==b)); + break; + default: + break; + } + }); + }; +}(jQuery)); -- 1.8.1.4
Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 03/27/2014 11:59 PM, Adam King wrote:
Facilitate formulating an Object from an HTML form, and populating a form from an Object.
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/js/src/kimchi.form.js | 76 ++++++++++++++---------------------------------- 1 file changed, 22 insertions(+), 54 deletions(-)
diff --git a/ui/js/src/kimchi.form.js b/ui/js/src/kimchi.form.js index 7ffb5e5..0a0af99 100644 --- a/ui/js/src/kimchi.form.js +++ b/ui/js/src/kimchi.form.js @@ -15,66 +15,34 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + (function($) { $.fn.serializeObject = function() { var formDataArray = $(this).serializeArray(); - var formData = {}; + var formData = new Object(); $.each(formDataArray, function(index, data) { - var names=kimchi.form.parseFormName(data.name); - kimchi.form.assignValue(names,data.value,formData); + formData.setDeepValue(data.name, data.value); }); return formData; }; }(jQuery));
-kimchi.form = {}; -kimchi.form.assignValue = function(names, value, obj) { - var result=value; - - if(names.length!=0) { - result=obj; - var name=names.shift(); - if(!result) { - result={}; - } - if(!result[name]) { - result[name]=kimchi.form.assignValue(names,value); - } - else if(names.length==0) { - if(Array.isArray(result[name])){ - result[name].push(value); - } - else { - result[name]=[result[name],value]; - } - } - else { - result[name]=kimchi.form.assignValue(names,value,result[name]); - } - } - return(result); -} - -kimchi.form.parseFormName = function(name, parsedName) { - if (!parsedName) { - parsedName=[]; - } - if(!name || name=="") { - return(parsedName); - } - var openBracket=name.indexOf("["); - if (openBracket!=-1) { - var id=name.slice(0, openBracket); - parsedName.push(id); - var closeBracket=name.lastIndexOf("]"); - if (closeBracket==-1) { - closeBracket=name.length; - } - var tmpName=name.slice(openBracket+1,closeBracket); - kimchi.form.parseFormName(tmpName,parsedName); - } - else { - parsedName.push(name); - } - return(parsedName); -} +(function($) { + $.fn.fillWithObject = function(obj) { + $(this).find("input").each(function(){ + switch($(this).attr('type')) { + case 'text': + $(this).val(obj.getDeepValue($(this).attr("name"))); + break; + case 'radio': + case 'checkbox': + var a=String($(this).val()); + var b=String(obj.getDeepValue($(this).attr("name"))); + $(this).prop("checked",(a==b)); + break; + default: + break; + } + }); + }; +}(jQuery));
Update the grid and repo edit code to leverage the new form js support. Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/js/src/kimchi.grid.js | 2 +- ui/js/src/kimchi.repository_edit_main.js | 31 +------------------------------ 2 files changed, 2 insertions(+), 31 deletions(-) diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index f3c30c7..5f94e79 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -180,7 +180,7 @@ kimchi.widget.Grid = function(params) { var getValue = function(name, obj) { var result=undefined; if(!Array.isArray(name)) { - name=kimchi.form.parseFormName(name); + name=name.parseKey(); } if(name.length!=0) { var tmpName=name.shift(); diff --git a/ui/js/src/kimchi.repository_edit_main.js b/ui/js/src/kimchi.repository_edit_main.js index 7e9ab5c..26d6c66 100644 --- a/ui/js/src/kimchi.repository_edit_main.js +++ b/ui/js/src/kimchi.repository_edit_main.js @@ -15,35 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -kimchi.repository_fillForm = function(form, name, values) { - var name= (name=="" || !name) ? "%s" : name; - for(var prop in values) { - if ((typeof(values[prop])==="object") && !Array.isArray(values[prop])) { - tmpName=name.replace("%s", prop+"[%s]" ); - kimchi.repository_fillForm(form, tmpName, values[prop]); - } - else { - tmpName=name.replace("%s", prop ); - var control = $('input[name="' + tmpName + '"]', form); - switch($(control).attr('type')) { - case 'text': - $(control).val(values[prop]); - break; - case 'radio': - case 'checkbox': - $(control).each(function(i, c) { - var matched = ('' + values[prop]) == $(c).val(); - $(c).prop('checked', matched); - }); - break; - default: - break; - } - } - } -} - kimchi.repository_edit_main = function() { var editForm = $('#form-repository-edit'); @@ -58,7 +29,7 @@ kimchi.repository_edit_main = function() { } kimchi.retrieveRepository(kimchi.selectedRepository, function(repository) { - kimchi.repository_fillForm(editForm,"",repository); + editForm.fillWithObject(repository); $('input', editForm).on('input propertychange', function(event) { if($(this).val() !== '') { -- 1.8.1.4
Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 03/27/2014 11:59 PM, Adam King wrote:
Update the grid and repo edit code to leverage the new form js support.
Signed-off-by: Adam King <rak@linux.vnet.ibm.com> --- ui/js/src/kimchi.grid.js | 2 +- ui/js/src/kimchi.repository_edit_main.js | 31 +------------------------------ 2 files changed, 2 insertions(+), 31 deletions(-)
diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index f3c30c7..5f94e79 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -180,7 +180,7 @@ kimchi.widget.Grid = function(params) { var getValue = function(name, obj) { var result=undefined; if(!Array.isArray(name)) { - name=kimchi.form.parseFormName(name); + name=name.parseKey(); } if(name.length!=0) { var tmpName=name.shift(); diff --git a/ui/js/src/kimchi.repository_edit_main.js b/ui/js/src/kimchi.repository_edit_main.js index 7e9ab5c..26d6c66 100644 --- a/ui/js/src/kimchi.repository_edit_main.js +++ b/ui/js/src/kimchi.repository_edit_main.js @@ -15,35 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -kimchi.repository_fillForm = function(form, name, values) { - var name= (name=="" || !name) ? "%s" : name; - for(var prop in values) { - if ((typeof(values[prop])==="object") && !Array.isArray(values[prop])) { - tmpName=name.replace("%s", prop+"[%s]" ); - kimchi.repository_fillForm(form, tmpName, values[prop]); - } - else { - tmpName=name.replace("%s", prop ); - var control = $('input[name="' + tmpName + '"]', form); - switch($(control).attr('type')) { - case 'text': - $(control).val(values[prop]); - break; - case 'radio': - case 'checkbox': - $(control).each(function(i, c) { - var matched = ('' + values[prop]) == $(c).val(); - $(c).prop('checked', matched); - }); - break; - default: - break; - } - } - } -} - kimchi.repository_edit_main = function() {
var editForm = $('#form-repository-edit'); @@ -58,7 +29,7 @@ kimchi.repository_edit_main = function() { }
kimchi.retrieveRepository(kimchi.selectedRepository, function(repository) { - kimchi.repository_fillForm(editForm,"",repository); + editForm.fillWithObject(repository);
$('input', editForm).on('input propertychange', function(event) { if($(this).val() !== '') {
participants (2)
-
Adam King -
Aline Manera