From: Jaroslav Kysela Date: Sun, 20 Sep 2015 19:33:29 +0000 (+0200) Subject: webui: optimize code for the root tab info components X-Git-Tag: v4.2.1~2088 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5335e49594e9d875f16c3260fedffa0dec05dad7;p=thirdparty%2Ftvheadend.git webui: optimize code for the root tab info components --- diff --git a/src/webui/static/app/ext.css b/src/webui/static/app/ext.css index cc3a3ae76..c1b4129ac 100644 --- a/src/webui/static/app/ext.css +++ b/src/webui/static/app/ext.css @@ -25,29 +25,24 @@ } -.x-tab-strip li.x-tab-login { +.x-tab-strip li.x-tab-extra-comp { margin-left: 16px; } -.x-tab-strip span.x-tab-strip-login { +.x-tab-strip span.x-tab-strip-extra-comp { vertical-align: middle; + cursor: default; white-space: nowrap; - padding:4px 0px; + padding: 4px 0; } -.x-tab-strip span.x-tab-strip-login-cmd { +.x-tab-strip span.x-tab-strip-extra-click-comp { vertical-align: middle; - cursor:pointer; - padding:4px 0; + cursor: pointer; + padding: 4px 0; float: right; } -.x-tab-strip span.x-tab-diskspace { - vertical-align: middle; - white-space: nowrap; - padding:4px 0px; -} - .x-tree-col { float: left; overflow: hidden; diff --git a/src/webui/static/app/tvheadend.js b/src/webui/static/app/tvheadend.js index e7a5246bc..20e3f0bf9 100644 --- a/src/webui/static/app/tvheadend.js +++ b/src/webui/static/app/tvheadend.js @@ -513,77 +513,87 @@ tvheadend.log = function(msg, style) { /** * */ -tvheadend.RootTabPanel = Ext.extend(Ext.TabPanel, { - - onRender: function(ct, position) { - tvheadend.RootTabPanel.superclass.onRender.call(this, ct, position); - - /* Create login components */ - var before = this.strip.dom.childNodes[this.strip.dom.childNodes.length-1]; - - if (!this.loginTpl) { +tvheadend.RootTabExtraComponent = Ext.extend(Ext.Component, { + + onRender1: function(tab, before) { + if (!this.componentTpl) { var tt = new Ext.Template( - '
  • ', - '
    • ' + '
  • ', + '{text}
    • ' ); tt.disableFormats = true; tt.compile(); - tvheadend.RootTabPanel.prototype.loginTpl = tt; + tvheadend.RootTabExtraComponent.prototype.componentTpl = tt; } - var item = new Ext.Component(); - var p = this.getTemplateArgs(item); - var before = this.strip.dom.childNodes[this.strip.dom.childNodes.length-1]; - item.tabEl = this.loginTpl.insertBefore(before, p); - this.loginItem = item; + var p = tab.getTemplateArgs(this); + var el = this.componentTpl.insertBefore(before, p); + this.tabEl = Ext.get(el); + } + +}); - if (!this.loginCmdTpl) { +tvheadend.RootTabExtraClickComponent = Ext.extend(Ext.Component, { + + onRender1: function(tab, before, click_cb) { + if (!this.componentTpl) { var tt = new Ext.Template( - '
  • ', - '
    • ' + '
  • ', + '{text}
    • ' ); tt.disableFormats = true; tt.compile(); - tvheadend.RootTabPanel.prototype.loginCmdTpl = tt; + tvheadend.RootTabExtraClickComponent.prototype.componentTpl = tt; } - var item = new Ext.Component(); - var p = this.getTemplateArgs(item); - var el = this.loginCmdTpl.insertBefore(before, p); - item.tabEl = Ext.get(el); - item.tabEl.select('a').on('click', this.onLoginCmdClicked, this, {preventDefault: true}); - this.loginCmdItem = item; - - if (!this.diskSpaceTpl) { - var tt = new Ext.Template( - '
  • ', - '
    • ' - ); - tt.disableFormats = true; - tt.compile(); - tvheadend.RootTabPanel.prototype.diskSpaceTpl = tt; + var p = tab.getTemplateArgs(this); + var el = this.componentTpl.insertBefore(before, p); + this.tabEl = Ext.get(el); + this.tabEl.select('a').on('click', click_cb, tab, {preventDefault: true}); + } + +}); + +tvheadend.RootTabPanel = Ext.extend(Ext.TabPanel, { + + extra: {}, + + onRender: function(ct, position) { + tvheadend.RootTabPanel.superclass.onRender.call(this, ct, position); + + var before = this.strip.dom.childNodes[this.strip.dom.childNodes.length-1]; + + /* Create login components */ + if (!this.extra.login) { + this.extra.login = new tvheadend.RootTabExtraComponent(); + this.extra.login.onRender1(this, before); + } + if (!this.extra.loginCmd) { + this.extra.loginCmd = new tvheadend.RootTabExtraClickComponent(); + this.extra.loginCmd.onRender1(this, before, this.onLoginCmdClicked); + } + if (!this.extra.storage) { + this.extra.storage = new tvheadend.RootTabExtraComponent(); + this.extra.storage.onRender1(this, before); } - var item = new Ext.Component(); - var p = this.getTemplateArgs(item); - var el = this.diskSpaceTpl.insertBefore(before, p); - item.tabEl = Ext.get(el); - this.diskSpaceItem = item; this.on('beforetabchange', function(tp, p) { - if (p == this.loginItem || p == this.loginCmdItem || p == this.diskSpaceItem) - return false; + for (var k in this.extra) + if (p == this.extra[k]) + return false; }); }, getComponent: function(comp) { - if (comp === this.loginItem.id || comp == this.loginItem) - return this.loginItem; - if (comp === this.loginCmdItem.id || comp == this.loginCmdItem) - return this.loginCmdItem; - if (comp === this.diskSpaceItem.id || comp == this.diskSpaceItem) - return this.diskSpaceItem; + for (var k in this.extra) { + var comp2 = this.extra[k]; + if (comp === comp2.id || comp == comp2) + return comp2; + } return tvheadend.RootTabPanel.superclass.getComponent.call(this, comp); }, setLogin: function(login) { + if (!'login' in this.extra) + return; this.login = login; if (login) { text = _('Logged in as') + ' ' + login + ''; @@ -592,18 +602,17 @@ tvheadend.RootTabPanel = Ext.extend(Ext.TabPanel, { text = _('No verified access'); cmd = '(' + _('login') + ')'; } - var el = this.loginItem.tabEl; - var fly = Ext.fly(this.loginItem.tabEl); - var t = fly.child('span.x-tab-strip-login', true); - Ext.fly(this.loginItem.tabEl).child('span.x-tab-strip-login', true).innerHTML = text; - Ext.fly(this.loginCmdItem.tabEl).child('span.x-tab-strip-login-cmd', true).innerHTML = cmd; + Ext.get(this.extra.login.tabEl).child('span.x-tab-strip-extra-comp', true).innerHTML = text; + Ext.get(this.extra.loginCmd.tabEl).child('span.x-tab-strip-extra-click-comp', true).innerHTML = cmd; }, setAddress: function(addr) { - Ext.get(this.loginItem.tabEl).child('span.x-tab-strip-login', true).qtip = addr; + if ('login' in this.extra) + Ext.get(this.extra.login.tabEl).child('span.x-tab-strip-extra-comp', true).qtip = addr; }, setDiskSpace: function(bfree, btotal) { + if (!'storage' in this.extra) return; human = function(val) { if (val > 1000000000) val = parseInt(val / 1000000000) + _('GB'); @@ -613,8 +622,8 @@ tvheadend.RootTabPanel = Ext.extend(Ext.TabPanel, { val = parseInt(val / 1000) + _('KB'); return val; }; - text = _('Disc space') + ': ' + human(bfree) + '/' + human(btotal) + ''; - var el = Ext.get(this.diskSpaceItem.tabEl).child('span.x-tab-diskspace', true); + text = _('Storage space') + ': ' + human(bfree) + '/' + human(btotal) + ''; + var el = Ext.get(this.extra.storage.tabEl).child('span.x-tab-strip-extra-comp', true); el.innerHTML = text; el.qtip = _('Free') + ': ' + human(bfree) + ' ' + _('Total') + ': ' + human(btotal); },