From 54791f76282e883451d665cfeeb7d8bfbbdbca7c Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Thu, 18 Apr 2013 11:42:36 +0530 Subject: [PATCH] [form layouts] [new] added new responsive form layout --- public/build.json | 1 + public/js/legacy/widgets/form/fields.js | 17 +--- public/js/legacy/widgets/form/form.js | 61 +------------ public/js/legacy/widgets/form/form_fields.js | 96 +------------------- public/js/wn/form/layout.js | 69 ++++++++++++++ 5 files changed, 78 insertions(+), 166 deletions(-) create mode 100644 public/js/wn/form/layout.js diff --git a/public/build.json b/public/build.json index 0b0aa6be10..fe0b353f67 100644 --- a/public/build.json +++ b/public/build.json @@ -157,6 +157,7 @@ "lib/public/js/legacy/wn/widgets/form/sidebar.js", "lib/public/js/legacy/wn/widgets/form/comments.js", "lib/public/js/wn/form/toolbar.js", + "lib/public/js/wn/form/layout.js", "lib/public/js/wn/form/editors.js", "lib/public/js/wn/form/attachments.js", "lib/public/js/wn/form/linked_with.js", diff --git a/public/js/legacy/widgets/form/fields.js b/public/js/legacy/widgets/form/fields.js index 2443487ecd..0c19ab98ae 100644 --- a/public/js/legacy/widgets/form/fields.js +++ b/public/js/legacy/widgets/form/fields.js @@ -42,10 +42,7 @@ Field.prototype.make_body = function() { var ischk = (this.df.fieldtype=='Check' ? 1 : 0); // parent element - if(this.parent) - this.wrapper = $a(this.parent, (this.with_label || this.df.fieldtype=="HTML" ? 'div' : 'span')); - else - this.wrapper = document.createElement((this.with_label || this.df.fieldtype=="HTML" ? 'div' : 'span')); + this.wrapper = this.parent; $(this.wrapper).addClass("field-wrapper"); @@ -117,15 +114,7 @@ Field.prototype.set_label = function(label) { } Field.prototype.set_description = function(txt) { - if(this.df.description || txt) { - // parent - if(!this.desc_area) { - var p = in_list(['Text Editor', 'Code', 'Check'], this.df.fieldtype) - ? this.label_area : this.wrapper; - this.desc_area = $a(p, 'div', 'help small'); - } - $(this.desc_area).html(wn._(this.df.description || txt)); - } + $(this.wrapper).attr("title", txt).tooltip(); } Field.prototype.get_status = function(explain) { @@ -1334,8 +1323,6 @@ function make_field(docfield, doctype, parent, frm, in_grid, hide_label) { // Fa case 'code':var f = new _f.CodeField(); break; case 'text editor':var f = new _f.CodeField(); break; case 'table':var f = new _f.TableField(); break; - case 'section break':var f= new _f.SectionBreak(); break; - case 'column break':var f= new _f.ColumnBreak(); break; case 'image':var f= new _f.ImageField(); break; } diff --git a/public/js/legacy/widgets/form/form.js b/public/js/legacy/widgets/form/form.js index 2d93ed2f13..f81db0f5e9 100644 --- a/public/js/legacy/widgets/form/form.js +++ b/public/js/legacy/widgets/form/form.js @@ -182,8 +182,11 @@ _f.Frm.prototype.setup_std_layout = function() { this.meta.section_style='Simple'; // always simple! // layout - this.layout = new Layout(this.body, '100%'); - + this.layout = new wn.ui.form.Layout({ + parent: this.body, + doctype: this.doctype, + frm: this, + }) // state this.states = new wn.ui.form.States({ @@ -192,10 +195,6 @@ _f.Frm.prototype.setup_std_layout = function() { // footer this.setup_footer(); - - // create fields - this.setup_fields_std(); - } _f.Frm.prototype.setup_header = function() { @@ -316,53 +315,6 @@ _f.Frm.prototype.set_footnote = function(txt) { } -_f.Frm.prototype.setup_fields_std = function() { - var fl = wn.meta.docfield_list[this.doctype]; - - fl.sort(function(a,b) { return a.idx - b.idx}); - - if(fl[0]&&fl[0].fieldtype!="Section Break" || get_url_arg('embed')) { - this.layout.addrow(); // default section break - if(fl[0].fieldtype!="Column Break") {// without column too - var c = this.layout.addcell(); - $y(c.wrapper, {padding: '8px'}); - } - } - - var sec; - for(var i=0;i' - +wn._(this.df.description)+'') - .appendTo(this.cell.wrapper) - - } -} - -_f.ColumnBreak.prototype.refresh = function(layout) { - //if(!this.cell)return; // no perm - - var hidden = 0; - // we generate column breaks, but hide it based on perms/hidden value - if((!this.perm[this.df.permlevel]) || (!this.perm[this.df.permlevel][READ]) || - this.df.hidden) { - // do not display, as no permission - hidden = 1; - } - - // hidden - if(this.set_hidden!=hidden) { - if(hidden) - this.cell.hide(); - else - this.cell.show(); - this.set_hidden = hidden; - } -} - -// ====================================================================================== - -_f.SectionBreak = function() { - this.fields = []; - this.set_input = function() { }; - this.make_row = function() { - this.row = this.df.label ? this.frm.layout.addrow() : this.frm.layout.addsubrow(); - } -} - -_f.SectionBreak.prototype.make_body = function() { - var me = this; - this.make_row(); - - if(this.df.label) { - if(!this.df.description) - this.df.description = ''; - - this.df._label = wn._(this.df.label); - this.df._description = wn._(this.df.description); - - $(this.row.main_head).html(repl('
\ -

%(_label)s

\ -
%(_description)s
\ -
', this.df)); - } else { - // simple - $(this.wrapper).html('
'); - } -} - -_f.SectionBreak.prototype.refresh = function(from_form) { - var hidden = 0; - // we generate section breaks, but hide it based on perms/hidden value - if((!this.perm[this.df.permlevel]) || (!this.perm[this.df.permlevel][READ]) || this.df.hidden) { - // no display - hidden = 1; - } - - if(hidden) { - if(this.row)this.row.hide(); - } else { - if(this.row)this.row.show(); - } -} - // Image field definition // ====================================================================================== @@ -148,8 +55,7 @@ _f.TableField.prototype.make_body = function() { // description if(this.df.description) { - this.desc_area = $a(this.wrapper, 'div', 'help small', - {marginBottom:'9px', marginTop:'0px'}, this.df.description) + $('

' + this.df.description + '

'); } } } diff --git a/public/js/wn/form/layout.js b/public/js/wn/form/layout.js new file mode 100644 index 0000000000..fc5c603d83 --- /dev/null +++ b/public/js/wn/form/layout.js @@ -0,0 +1,69 @@ +wn.ui.form.Layout = Class.extend({ + init: function(opts) { + this.ignore_types = ["Section Break", "Column Break"]; + $.extend(this, opts); + this.make(); + }, + make: function() { + this.wrapper = $('
').appendTo(this.parent); + this.fields = wn.meta.docfield_list[this.doctype]; + this.fields.sort(function(a,b) { return a.idx - b.idx}); + this.render(); + }, + render: function() { + var me = this; + this.section = null; + if(this.fields[0] && this.fields[0].fieldtype!="Section Break") { + this.make_section(); + } + $.each(this.fields, function(i, df) { + switch(df.fieldtype) { + case "Section Break": + me.make_section(df); + break; + case "Column Break": + break; + case "Table": + case "Text Editor": + case "Code": + var fieldwrapper = $('
').appendTo(me.section); + me.make_field(df, fieldwrapper); + break; + case "Text": + var fieldwrapper = $('
').appendTo(me.section); + me.make_field(df, fieldwrapper); + break; + default: + var fieldwrapper = $('
') + .appendTo(me.section); + me.make_field(df, fieldwrapper); + } + }); + }, + make_field: function(df, parent) { + var fieldobj = make_field(df, this.doctype, parent.get(0), this.frm); + this.frm.fields.push(fieldobj); + this.frm.fields_dict[df.fieldname] = fieldobj; + }, + make_section: function(df) { + if(this.section) { + $("
").appendTo(this.wrapper); + } + this.section = $('
').appendTo(this.wrapper); + this.frm.sections.push(this.section); + if(df) { + if(df.label) { + $('

' + df.label + "

").appendTo(this.section); + } + if(df.description) { + $('
' + df.description + '
').appendTo(this.section); + } + this.frm.fields_dict[df.fieldname] = this.section; + } + return this.section; + }, + refresh: function() { + + } +}) \ No newline at end of file