Skip to content

E
erp5
Commit 3ec2efcb authored by Ivan Tyagov's avatar Ivan Tyagov
Browse files
Options

Move non generic ERP5 Form rendering to a dedicated bt5. 

Use scope and closures to make all gadget module alike.
parent 55bee865
Show whitespace changes
Inline Side-by-side
Showing with 360 additions and 643 deletions
bt5/erp5_jquery_plugin_renderjs/PathTemplateItem/portal_skins/erp5_jquery/jquery/plugin/renderjs/renderjs.js.xml
View file @ 3ec2efcb
......@@ -12,7 +12,7 @@
</item>
<item>
<key> <string>_EtagSupport__etag</string> </key>
<value> <string>ts37244071.21</string> </value>
<value> <string>ts37252665.34</string> </value>
</item>
<item>
<key> <string>__name__</string> </key>
......@@ -32,38 +32,37 @@ if (typeof console === "undefined" || typeof console.log === "undefined") {\n
console.log = function() {};\n
}\n
\n
/*\n
* Generic cache implementation that can fall back to local namespace storage\n
* if no "modern" storage like localStorage is available\n
*/\n
var is_ready;\n
is_ready = false; // dirty flag to be removed (indicates if ready event has been handled)\n
\n
var NameSpaceStorageCachePlugin = {\n
/*\n
\n
/*\n
* This plugin saves within current page namespace.\n
*/\n
var NameSpaceStorageCachePlugin = function() {\n
\n
namespace: {},\n
var namespace = {};\n
\n
return {\n
get: function (cache_id, default_value) {\n
/* Get cache key value */\n
return this.namespace[cache_id];\n
return namespace[cache_id];\n
},\n
\n
set: function (cache_id, data) {\n
/* Set cache key value */\n
this.namespace[cache_id] = data;\n
namespace[cache_id] = data;\n
}\n
\n
};\n
}}();\n
\n
\n
var LocalStorageCachePlugin = {\n
/*\n
/*\n
* This plugin saves using HTML5 localStorage.\n
*/\n
var LocalStorageCachePlugin = function() {\n
\n
return {\n
get: function (cache_id, default_value) {\n
/* Get cache key value */\n
return $.jStorage.get(cache_id, default_value);\n
......@@ -73,10 +72,16 @@ var LocalStorageCachePlugin = {\n
/* Set cache key value */\n
$.jStorage.set(cache_id, data);\n
}\n
}}();\n
\n
};\n
\n
var Cache = {\n
\n
/*\n
* Generic cache implementation that can fall back to local namespace storage\n
* if no "modern" storage like localStorage is available\n
*/ \n
var Cache = function() {\n
\n
return {\n
\n
ROOT_CACHE_ID: \'APP_CACHE\',\n
\n
......@@ -86,7 +91,7 @@ var Cache = {\n
*/\n
return this.ROOT_CACHE_ID + cache_id;\n
},\n
\n
\n
hasLocalStorage: function() {\n
/*\n
* Feature test if localStorage is supported\n
......@@ -102,7 +107,7 @@ var Cache = {\n
return false;\n
}\n
},\n
\n
\n
get: function (cache_id, default_value) {\n
/* Get cache key value */\n
cache_id = this.getCacheId(cache_id);\n
......@@ -122,12 +127,14 @@ var Cache = {\n
NameSpaceStorageCachePlugin.set(cache_id, data);}\n
}\n
\n
};\n
}}();\n
\n
/*\n
* Generic tabular gadget\n
*/\n
var TabbularGadget = {\n
var TabbularGadget = function () {\n
\n
return {\n
\n
toggleVisibility: function(visible_dom) {\n
/*\n
......@@ -137,7 +144,7 @@ var TabbularGadget = {\n
visible_dom.addClass("selected");\n
visible_dom.removeClass("not_selected");\n
},\n
\n
\n
addNewTabGadget: function(dom_id, gadget, gadget_data_handler, gadget_data_source) {\n
/*\n
* add new gadget and render it\n
......@@ -149,10 +156,10 @@ var TabbularGadget = {\n
\'gadget="\' + gadget + \'"\',\n
\'gadget:data-handler="\' + gadget_data_handler + \'" \',\n
\'gadget:data-source="\' + gadget_data_source +\'"></div>\'].join(\'\\n\');\n
\n
\n
tab_container.append(html_string);\n
tab_gadget = tab_container.find(".gadget");\n
\n
\n
// render new gadget\n
is_ready = false;\n
RenderJs.loadGadgetFromUrl(tab_gadget);\n
......@@ -165,305 +172,8 @@ var TabbularGadget = {\n
});\n
}\n
\n
};\n
\n
/*\n
Form field renderer.\n
Note: This is an ERP5 form implementation for the moment.\n
*/\n
var Form = {\n
}}();\n
\n
// elements marked with this class can be serizlized to server\n
SERIALIZE_ABLE_CLASS_NAME: "serialize-able",\n
\n
CURRENT_FORM_ID: "",\n
\n
getCurrentFormId: function () {\n
/* Get current form ID (return hard coded one for now) */\n
return this.CURRENT_FORM_ID;\n
},\n
\n
setCurrentFormId: function (form_id) {\n
/* Set current form ID (return hard coded one for now) */\n
this.CURRENT_FORM_ID = form_id;\n
},\n
\n
getFieldId: function(field_id) {\n
/* Generate local form field id */\n
return "field_" + field_id;\n
},\n
\n
updateField: function (dom, field_dict) {\n
/* General purpose field updater */\n
var editable;\n
editable = Boolean(field_dict.editable);\n
if (editable){\n
dom.val(field_dict.value);}\n
else{\n
// if field is not editable just show its value\n
dom.replaceWith(field_dict.value);\n
}\n
},\n
\n
addOptionTagList: function (select_dom, item_list, field_value) {\n
/*\n
* Update select like dom element\n
*/\n
$.each(item_list, function (index, value){\n
if(value[1]===field_value) {\n
select_dom.append(\'<option selected value="\' + value[1] + \'">\' + value[0] + \'</option>\');\n
}\n
else {\n
select_dom.append(\'<option value="\' + value[1] + \'">\' + value[0] + \'</option>\');\n
}\n
});\n
},\n
\n
BaseInputField: function (field_id, field_dict) {\n
/* HTML based input field */\n
var dom, display_width;\n
dom = $("[name=" + this.getFieldId(field_id) + "]");\n
this.updateField(dom, field_dict);\n
display_width = field_dict.display_width;\n
if (display_width){\n
dom.attr("size", display_width);}\n
return dom;\n
},\n
\n
EditorField: function (field_id, field_dict) {\n
/* HTML based input field */\n
var dom;\n
dom = $("#" + this.getFieldId(field_id));\n
this.updateField(dom, field_dict);\n
return dom;\n
},\n
\n
ListField: function (field_id, field_dict) {\n
/* Select field */\n
var field_value, select_dom;\n
field_value = field_dict.value;\n
select_dom = $("select[name=" + this.getFieldId(field_id) + "]");\n
this.addOptionTagList(select_dom, field_dict.items, field_value);\n
return select_dom; \n
},\n
\n
ParallelListField: function (field_id, field_dict) {\n
/* mutiple select fields */\n
var field_value, select_dom; \n
// XXX: we render only first value but it can be many how to get them ?\n
field_value = field_dict.value[0];\n
select_dom = $("select[name=subfield_field_" + field_id + "]");\n
this.addOptionTagList(select_dom, field_dict.items, field_value);\n
return select_dom;\n
},\n
\n
CheckBoxField: function (field_id, field_dict) {\n
/* CheckBoxField field */\n
var checked, checkbox_dom;\n
checked = Boolean(field_dict.value);\n
checkbox_dom = $("input[name=" + this.getFieldId(field_id) + "]");\n
if (checked) {\n
checkbox_dom.attr(\'checked\', true);\n
}\n
return checkbox_dom;\n
},\n
\n
TextAreaField: function (field_id, field_dict) {\n
/* TextArea field */\n
return this.BaseInputField(field_id, field_dict);\n
},\n
\n
StringField: function (field_id, field_dict) {\n
/* String field */\n
return this.BaseInputField(field_id, field_dict);\n
},\n
\n
IntegerField: function (field_id, field_dict) {\n
/* Int field */\n
return this.BaseInputField(field_id, field_dict);\n
},\n
\n
PasswordField: function (field_id, field_dict) {\n
/* PasswordField field */\n
return this.BaseInputField(field_id, field_dict);\n
},\n
\n
DateTimeField: function (field_id, field_dict) {\n
/* DateTimeField field */\n
var date, dom;\n
dom = $("[name=" + this.getFieldId(field_id) + "]");\n
date = field_dict.value;\n
date = new Date(date);\n
dom.datepicker({ dateFormat: \'dd/mm/yy\' }); // XXX: get format from server!\n
dom.datepicker(\'setDate\', date);\n
return dom;\n
},\n
\n
EmailField: function (field_id, field_dict) {\n
/* Email field */\n
return this.BaseInputField(field_id, field_dict);\n
},\n
\n
FormBox: function (field_id, field_dict) {\n
/* Email field */\n
return this.BaseInputField(field_id, field_dict);\n
},\n
\n
RelationStringField: function (field_id, field_dict) {\n
/* Relation field */\n
return this.BaseInputField(field_id, field_dict);\n
},\n
\n
ImageField: function (field_id, field_dict) {\n
/* Image field */\n
var dom;\n
dom = $("img[name=" + this.getFieldId(field_id) + "]");\n
// XXX: image field should return details like quality, etc ...\n
dom.attr("src", field_dict.value + "?quality=75.0&display=thumbnail&format=png");\n
},\n
\n
ListBox: function (field_id, field_dict) {\n
/* Listbox field */\n
var listbox_id, navigation_id, listbox_table, current_form_id, listbox_dict, listbox_data_url, colModel, column_title_list;\n
listbox_id = "field_" + field_id;\n
navigation_id = listbox_id + "_pager"; \n
listbox_table = $("#"+listbox_id);\n
current_form_id = this.getCurrentFormId();\n
\n
listbox_dict = field_dict.listbox;\n
listbox_data_url = listbox_dict.listbox_data_url;\n
colModel = [];\n
column_title_list = [];\n
$.each(listbox_dict.columns,\n
function(i, value){\n
var index, title, column;\n
index = value[0];\n
title = value[1];\n
column_title_list.push(title);\n
column = {\'name\': index,\n
\'index\': index,\n
\'width\': 185,\n
\'align\': \'left\'};\n
colModel.push(column);\n
});\n
\n
listbox_table.jqGrid({url:listbox_data_url + \'?form_id=\' + current_form_id + \'&amps;listbox_id=\' + field_id,\n
datatype: "json",\n
colNames: column_title_list,\n
colModel: colModel,\n
rowNum: listbox_dict.lines,\n
pager: \'#\'+navigation_id,\n
sortname: \'id\',\n
viewrecords: true,\n
sortorder: "desc",\n
loadError : function(xhr, textStatus, errorThrown) {\n
// XXX: handle better than just alert.\n
alert("Error occurred during getting data from server.");\n
},\n
cmTemplate: {sortable:false}, // XXX: until we get list of sortable columns from server\n
caption: field_dict.title});\n
listbox_table.jqGrid(\'navGrid\', \'#\'+navigation_id, {edit:false,add:false,del:false});\n
return listbox_table;\n
}\n
\n
};\n
\n
/* Generic form updater */\n
var FormUpdater = {\n
\n
\n
update: function(data) {\n
/* Update form values */\n
$.each(data.form_data,\n
function(field_id, field_dict){\n
var type, dom;\n
type = field_dict.type;\n
dom = undefined;\n
if(Form.hasOwnProperty(type)){\n
dom = Form[type](field_id, field_dict);\n
}\n
\n
// add a class that these fields are editable so asJSON\n
// can serialize for for sending to server\n
if (dom!==undefined && dom!==null && field_dict.editable){\n
dom.addClass(Form.SERIALIZE_ABLE_CLASS_NAME);\n
}\n
\n
// mark required fields visually\n
if (field_dict.required){\n
dom.parent().parent().children("label").css("font-weight", "bold");}\n
\n
});\n
},\n
\n
save: function(){\n
/* save form to server*/\n
var form_value_dict, converted_value;\n
form_value_dict = {};\n
$("." + Form.SERIALIZE_ABLE_CLASS_NAME).each(function(index){\n
// DOM can change values, i.e. alter checkbox (on / off)\n
var element,name, value, type; \n
element = $(this); \n
name = element.attr("name");\n
value = element.val();\n
type = element.attr("type");\n
if (type==="checkbox") {\n
value = element.is(":checked");\n
if (value===true) {\n
converted_value=1;\n
}\n
if(value===false) {\n
converted_value=0;\n
}\n
value = converted_value; \n
}\n
// XXX: how to handle file uploads ?\n
form_value_dict[name] = value;\n
});\n
//console.log(form_value_dict);\n
\n
// add form_id as we need to know structure we\'re saving at server side\n
form_value_dict.form_id = Form.getCurrentFormId();\n
\n
// validation happens at server side\n
$.ajax({url:\'Form_save\',\n
data: form_value_dict,\n
dataType: "json",\n
success: function (data) {\n
var field_errors;\n
field_errors = data.field_errors;\n
if (field_errors!==undefined){\n
//console.log(field_errors);\n
$.each(field_errors, function(index, value){\n
var dom, field;\n
dom = $("[name=" + Form.getFieldId(index) + "]");\n
dom.css("border", "1px solid red"); // XXX: use class / css\n
field = dom.parent().parent();\n
if (field.children("span.error").length > 0){\n
// just update message\n
field.children("span.error").html(value);}\n
else{\n
// no validation error message exists\n
field.append(\'<span class="error">\' + value + \'</span>\');}\n
}\n
);}\n
else{\n
// validation OK at server side\n
$("span.error").each(function(index) {\n
// delete validation messages\n
var element;\n
element = $(this);\n
element.parent().children("div.input").children("." +Form.SERIALIZE_ABLE_CLASS_NAME).css("border", "none");\n
element.remove();\n
});\n
// show a fading portal_status_message\n
$("#portal_status_message").toggle();\n
$("#portal_status_message p").html("Saved");\n
window.setTimeout( \'$("#portal_status_message").toggle()\', 4000);\n
}\n
}});\n
}\n
};\n
\n
\n
/*\n
......@@ -509,41 +219,43 @@ Gadget.prototype.getParent = function() {\n
/*\n
* Generic gadget index placeholder\n
*/\n
var GadgetIndex = {\n
\n
gadget_list: [],\n
var GadgetIndex = function () {\n
\n
var gadget_list = [];\n
\n
return {\n
\n
getGadgetList: function() {\n
/*\n
* Return list of registered gadgets\n
*/\n
return this.gadget_list;\n
return gadget_list;\n
},\n
\n
\n
registerGadget: function(gadget) {\n
/*\n
* Register gadget\n
*/\n
this.gadget_list.push(gadget);\n
gadget_list.push(gadget);\n
},\n
\n
unregisterGadget: function(gadget) {\n
/*\n
* Unregister gadget\n
*/\n
index = jQuery.inArray(gadget, this.gadget_list);\n
index = jQuery.inArray(gadget, gadget_list);\n
if (index!=-1) {\n
this.gadget_list.splice(index, 1);\n
} \n
gadget_list.splice(index, 1);\n
}\n
},\n
\n
getGadgetById: function (gadget_id){\n
getGadgetById: function (gadget_id) {\n
/*\n
* Get gadget javascript representation by its Id\n
*/\n
var gadget;\n
gadget = undefined;\n
$(this.getGadgetList()).each(\n
$(GadgetIndex.getGadgetList()).each(\n
function (index, value) {\n
if (value.getId()===gadget_id) {\n
gadget = value;\n
......@@ -557,7 +269,7 @@ var GadgetIndex = {\n
*/\n
return this.getGadgetList()[0];\n
},\n
\n
\n
isGadgetListLoaded: function () {\n
/*\n
* Return True if all gadgets were loaded from network or cache\n
......@@ -572,20 +284,23 @@ var GadgetIndex = {\n
});\n
return result;\n
},\n
\n
\n
getSelf: function (){\n
/*\n
* Return Gadget\'s Javascript representation\n
*/\n
// XXX:\n
}\n
};\n
\n
}}();\n
\n
\n
/*\n
* Basic gadget interaction gadget implementation.\n
*/\n
var InteractionGadget = {\n
var InteractionGadget = function () {\n
\n
return {\n
\n
bind: function (gadget_dom){\n
/*\n
......@@ -621,21 +336,23 @@ var InteractionGadget = {\n
}\n
);\n
}\n
}\n
}}();\n
\n
\n
/*\n
* Generic Gadget library renderer\n
*/\n
\n
var RenderJs = {\n
var RenderJs = function () {\n
\n
return {\n
\n
bootstrap: function (root){\n
/* initial load application gadget */\n
RenderJs.loadGadgetFromUrl(root);\n
RenderJs.load(root);\n
},\n
\n
\n
load: function (root) {\n
/* Load gadget layout by traversing DOM */\n
var gadget_list;\n
......@@ -652,17 +369,17 @@ var RenderJs = {\n
// a gadget may contain sub gadgets\n
this.load(gadget);\n
},\n
\n
\n
loadGadgetFromUrl: function(gadget) {\n
/* Load gadget\'s SPECs from URL */\n
var url, gadget_id, gadget_property, cacheable, cache_id, app_cache, data, gadget_js;\n
url = gadget.attr("gadget");\n
gadget_id = gadget.attr("id");\n
\n
\n
// register gadget in javascript namespace\n
gadget_js = new Gadget(gadget_id, gadget);\n
GadgetIndex.registerGadget(gadget_js);\n
\n
\n
if (url!==undefined && url!==""){\n
gadget_property = gadget.attr("gadget:property");\n
cacheable = false;\n
......@@ -746,7 +463,7 @@ var RenderJs = {\n
eval(data_handler+ "(result)");\n
}\n
},\n
\n
\n
updateGadgetData: function(gadget) {\n
/* Do real gagdet update here */\n
var data_source, data_handler;\n
......@@ -760,7 +477,7 @@ var RenderJs = {\n
success: RenderJs.updateGadgetWithDataHandler});}\n
}\n
\n
};
}}();
]]></string> </value>
</item>
......@@ -770,7 +487,7 @@ var RenderJs = {\n
</item>
<item>
<key> <string>size</string> </key>
<value> <int>25334</int> </value>
<value> <int>15221</int> </value>
</item>
<item>
<key> <string>title</string> </key>
......
bt5/erp5_jquery_plugin_renderjs/bt/revision
View file @ 3ec2efcb
14
\ No newline at end of file
15
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7