[IMP] Dynamically Set Header & Footer, Change page on click of header-footer.

bzr revid: bth@tinyerp.com-20110912110428-xyxc70zql0r01mty
This commit is contained in:
Bhumi Thakkar (Open ERP) 2011-09-12 16:34:28 +05:30
parent ee454617c7
commit fbd835894f
3 changed files with 102 additions and 92 deletions

View File

@ -90,8 +90,7 @@ openerp.web_mobile.Header = openerp.web.Widget.extend({
this._super(session, element_id);
},
start: function() {
var self = this;
self.$element.html(QWeb.render("Header", this));
this.$element.html(QWeb.render("Header", this));
}
});
@ -100,8 +99,7 @@ openerp.web_mobile.Footer = openerp.web.Widget.extend({
this._super(session, element_id);
},
start: function() {
var self = this;
self.$element.html(QWeb.render("Footer", this));
this.$element.html(QWeb.render("Footer", this));
}
});
@ -113,14 +111,19 @@ openerp.web_mobile.Shortcuts = openerp.web.Widget.extend({
var self = this;
this.rpc('/web/session/sc_list',{} ,function(res){
self.$element.html(QWeb.render("Shortcuts", {'sc' : res}))
self.$element.find("[data-role=header]").find('h1').html('Favourite');
self.$element.find("[data-role=header]").find('#home').click(function(){
$.mobile.changePage($("#oe_menu"), "slide", true, true);
});
self.$element.find('#content').find("a").click(self.on_clicked);
self.$element.find("#footer").find('#preference').click(function(){
self.$element.find("[data-role=footer]").find('#preference').click(function(){
if(!$('#oe_options').html().length){
this.options = new openerp.web_mobile.Options(self, "oe_options");
this.options.start();
}
else{
self.$element.find("#footer").find('#preference').attr('href','#oe_options');
$.mobile.changePage($("#oe_options"), "slide", true, true);
}
});
$.mobile.changePage($("#oe_shortcuts"), "slide", true, true);
@ -130,9 +133,7 @@ openerp.web_mobile.Shortcuts = openerp.web.Widget.extend({
$shortcut = $(ev.currentTarget);
id = $shortcut.data('menu');
res_id = $shortcut.data('res');
// this.header = new openerp.web_mobile.Header(this, "oe_header");
this.listview = new openerp.web_mobile.ListView(this, "oe_list", res_id);
// this.header.start();
this.listview.start();
jQuery("#oe_header").find("h1").html($shortcut.data('name'));
}
@ -151,24 +152,30 @@ openerp.web_mobile.Menu = openerp.web.Widget.extend({
on_loaded: function(data) {
var self = this;
this.data = data;
this.$element.html(QWeb.render("Menu", this.data));
this.$element.find("#footer").find('#shrotcuts').click(function(){
this.header = new openerp.web_mobile.Header(this, "oe_header");
this.header.start();
this.footer = new openerp.web_mobile.Footer(this, "oe_footer");
this.footer.start();
this.$element.html(QWeb.render("Menu", this.data));
this.$element.find("[data-role=header]").find('h1').html('Application');
this.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
if(!$('#oe_shortcuts').html().length){
this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
this.shortcuts.start();
}
else{
self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
$.mobile.changePage($("#oe_shortcuts"), "slide", true, true);
}
});
this.$element.find("#footer").find('#preference').click(function(){
this.$element.find("[data-role=footer]").find('#preference').click(function(){
if(!$('#oe_options').html().length){
this.options = new openerp.web_mobile.Options(self, "oe_options");
this.options.start();
}
else{
self.$element.find("#footer").find('#preference').attr('href','#oe_options');
$.mobile.changePage($("#oe_options"), "slide", true, true);
}
});
this.$element.add(this.$secondary_menu).find("#content").find('a').click(this.on_menu_click);
@ -186,20 +193,37 @@ openerp.web_mobile.Menu = openerp.web.Widget.extend({
.removeClass("login_valid")
.addClass("secondary_menu");
//.hide();
if(!$('#oe_sec_menu').html().length){
/*if(!$('#oe_sec_menu').html().length){
this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
this.secondary.start();
}else{
this.$element.find("#content").find('a').attr('href','#oe_sec_menu');
}
/*if(!$('#oe_sec_menu').html().length){
//console.log('heree>>>>>>>>>>>>>>>>>>',$('#'+$('.ui-page-active').attr('id')));
var id=$('.ui-page-active').attr('id');
//console.log('heree>>>>>>>>>>>>>>>>>>',$('#'+id).removeClass('ui-page-active'));
this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
this.secondary.start();
$('#'+id).removeClass('ui-page-active');
$('#oe_sec_menu').addClass('ui-page-active');
//console.log();
$.mobile.changePage($("#oe_menu"), "slide", true, true);
//if($('.ui-page-active').attr('id').live())
//$.mobile.changePage($("#oe_sec_menu"), "slide", true, true);
// this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
// this.secondary.start();
//$.mobile.loadPage();
//$.mobile.changePage($("#oe_sec_menu"), "slide", true, true);
//this.$element.find("#content").find('a').attr('href','#oe_sec_menu');
}*/
if(!$('#oe_sec_menu').html().length){
this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
this.secondary.start();
}else{
// self.$element.find("#content").find('a').attr('href','#oe_sec_menu');
this.$element.add(this.$secondary_menu).find("#content").find('a').attr('href','#oe_sec_menu');
}*/
$.mobile.changePage($("#oe_sec_menu"), "slide", true, true);
}
}
});
openerp.web_mobile.Secondary = openerp.web.Widget.extend({
@ -209,7 +233,6 @@ openerp.web_mobile.Secondary = openerp.web.Widget.extend({
},
start: function(ev, id) {
var self = this;
// console.log(this.data,this.$element.html().length);
/* if(this.$element.html().length){
self.$element.find('[data-role="listview"]').remove();
@ -225,27 +248,33 @@ openerp.web_mobile.Secondary = openerp.web.Widget.extend({
}else{*/
var v = { menu : this.data };
this.$element.html(QWeb.render("Menu.secondary", v));
this.$element.find("#header").find("h1").html(this.data.name);
this.$element.find("[data-role=header]").find("h1").html(this.data.name);
this.$element.add(this.$secondary_menu).find('#content').find("a").click(this.on_menu_click);
this.$element.find("#footer").find('#shrotcuts').click(function(){
this.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
if(!$('#oe_shortcuts').html().length){
this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
this.shortcuts.start();
}
else{
self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
$.mobile.changePage($("#oe_shortcuts"), "slide", true, true);
}
});
this.$element.find("#footer").find('#preference').click(function(){
this.$element.find("[data-role=footer]").find('#preference').click(function(){
if(!$('#oe_options').html().length){
this.options = new openerp.web_mobile.Options(self, "oe_options");
this.options.start();
}
else{
self.$element.find("#footer").find('#preference').attr('href','#oe_options');
$.mobile.changePage($("#oe_options"), "slide", true, true);
}
});
this.$element.find("[data-role=header]").find('#home').click(function(){
$.mobile.changePage($("#oe_menu"), "slide", true, true);
});
$.mobile.changePage($("#oe_sec_menu"), "slide", true, true);
},
on_menu_click: function(ev, id) {
@ -262,16 +291,22 @@ openerp.web_mobile.Secondary = openerp.web.Widget.extend({
openerp.web_mobile.Options = openerp.web.Widget.extend({
start: function() {
var self = this;
this.$element.html(QWeb.render("Options", this));
this.$element.find("#footer").find('#shrotcuts').click(function(){
this.$element.find("[data-role=header]").find('h1').html('Preference');
this.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
if(!$('#oe_shortcuts').html().length){
this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
this.shortcuts.start();
}
else{
self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
$.mobile.changePage($("#oe_shortcuts"), "slide", true, true);
//self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
}
});
this.$element.find("[data-role=header]").find('#home').click(function(){
$.mobile.changePage($("#oe_menu"), "slide", true, true);
});
$.mobile.changePage($("#oe_options"), "slide", true, true);
}
});

View File

@ -32,26 +32,29 @@ openerp.web_mobile.ListView = openerp.web.Widget.extend({
}
self.$element.find('[data-role="listview"]').listview('refresh');
}else{
self.$element.html(QWeb.render("ListView", {'records' : result}));
self.$element.find("#header").find('h1').html(self.action.name);
self.$element.find("#footer").find('#shortcuts').click(function(){
if(!$('#oe_shortcuts').html().length){
this.shortcut = new openerp.web_mobile.Options(self, "oe_shortcuts");
this.options.start();
}
else{
self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
}
});
self.$element.find("#footer").find('#preference').click(function(){
if(!$('#oe_options').html().length){
this.options = new openerp.web_mobile.Options(self, "oe_options");
this.options.start();
}
else{
self.$element.find("#footer").find('#preference').attr('href','#oe_options');
}
});
self.$element.html(QWeb.render("ListView", {'records' : result}));
self.$element.find("[data-role=header]").find('h1').html(self.action.name);
self.$element.find("[data-role=header]").find('#home').click(function(){
$.mobile.changePage($("#oe_menu"), "slide", true, true);
});
self.$element.find("[data-role=footer]").find('#shortcuts').click(function(){
if(!$('#oe_shortcuts').html().length){
this.shortcut = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
this.shortcut.start();
}
else{
$.mobile.changePage($("#oe_shortcuts"), "slide", true, true);
}
});
self.$element.find("[data-role=footer]").find('#preference').click(function(){
if(!$('#oe_options').html().length){
this.options = new openerp.web_mobile.Options(self, "oe_options");
this.options.start();
}
else{
$.mobile.changePage($("#oe_options"), "slide", true, true);
}
});
}
self.$element.find("a#list-id").click(self.on_list_click);
$.mobile.changePage($("#oe_list"), "slide", true, true);
@ -61,9 +64,7 @@ openerp.web_mobile.ListView = openerp.web.Widget.extend({
var $record = $(ev.currentTarget);
var self = this;
id = $record.data('id');
// this.header = new openerp.web_mobile.Header(this, "oe_header");
this.formview = new openerp.web_mobile.FormView(this, "oe_form", id, this.action);
// this.header.start();
this.formview.start();
}
});

View File

@ -5,6 +5,8 @@
<t t-name="WebClient">
<div data-role="page" id="oe_login"></div>
<div id="oe_header" />
<div id="oe_footer" />
<div data-role="page" id="oe_sec_menu"></div>
<div data-role="page" id="oe_sec_menu_new"></div>
<div data-role="page" id="oe_list"></div>
@ -44,22 +46,20 @@
<t t-name="Header">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>OpenERP</h1>
<h1></h1>
<a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#" title="Home" data-theme="b"></a>
</div>
</t>
<t t-name="Footer">
<div data-role="footer" data-theme="b" data-position="fixed">
<h1></h1>
<a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
<a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
</div>
</t>
<t t-name="Shortcuts">
<div id="header" data-role="header" data-theme="b" data-position="fixed">
<h1>Favourite</h1>
<a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
</div>
<t t-call="Header" />
<div id="content" data-role="content">
<ul data-role="listview" data-inset="true">
<li data-theme="c" t-foreach="sc" t-as="opt">
@ -69,15 +69,10 @@
</li>
</ul>
</div>
<div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
<a id="preference" class="ui-btn-right" href="#" title="Preference" data-theme="b">Preference</a>
</div>
<t t-call="Footer" />
</t>
<t t-name="Menu">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Applications</h1>
</div>
<t t-call="Header" />
<div id="content" data-role="content">
<ul data-role="listview" data-inset="true">
<li data-theme="c" t-foreach="data.children" t-as="menu">
@ -87,17 +82,11 @@
</li>
</ul>
</div>
<div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
<a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
</div>
<t t-call="Footer" />
</t>
<t t-name="Menu.secondary">
<div id="header" data-role="header" data-theme="b" data-position="fixed">
<h1></h1>
<a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
</div>
<t t-call="Header" />
<div id="content" data-role="content">
<t t-foreach="menu.children" t-as="menu1" >
<ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview">
@ -114,16 +103,10 @@
</ul>
</t>
</div>
<div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
<a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
</div>
<t t-call="Footer" />
</t>
<t t-name="Options">
<div id="header" data-role="header" data-theme="b" data-position="fixed">
<h1>Options</h1>
<a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
</div>
<t t-call="Header" />
<div data-role="content">
<ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview">
<li data-theme="c">
@ -131,17 +114,11 @@
</li>
</ul>
</div>
<div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
<a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
</div>
<t t-call="Footer" />
</t>
<t t-name="ListView">
<div id="header" data-role="header" data-theme="b" data-position="fixed">
<h1></h1>
<a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
</div>
<t t-call="Header" />
<div id="content" data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
<li data-theme="c" t-foreach="records" t-as="record">
@ -151,10 +128,7 @@
</li>
</ul>
</div>
<div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
<a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
</div>
<t t-call="Footer" />
</t>
<t t-name="FormView">