From 838c2a112dab809a080b6540345b9fe8b73a1d96 Mon Sep 17 00:00:00 2001 From: Nick Alexander Date: Wed, 23 Jun 2010 23:28:16 +0100 Subject: [PATCH] Renamed my tab plugin to the more appropriate "tabpanel". It now recursively prepares all related objects of a detail view into an outer-tabset/inner treeview, and renders them asynchronously on demand. Looks pretty bad, but seems to function consistently... --- share/ic/js/manage.js | 17 +- share/ic/js/manage/plugins/tab_io.js | 227 ------------ share/ic/js/manage/plugins/tabpanel.js | 332 ++++++++++++++++++ share/ic/js/manage/plugins/treeview.js | 32 +- .../ic/js/manage/widgets/functions/detail.js | 143 +++----- share/ic/js/manage/widgets/tabview.js | 34 +- share/ic/js/manage/window.js | 2 +- share/ic/styles/manage.css | 12 +- share/ic/styles/manage/plugins/tabpanel.css | 32 ++ views/manage/index.tst | 4 +- 10 files changed, 486 insertions(+), 349 deletions(-) delete mode 100644 share/ic/js/manage/plugins/tab_io.js create mode 100644 share/ic/js/manage/plugins/tabpanel.js create mode 100644 share/ic/styles/manage/plugins/tabpanel.css diff --git a/share/ic/js/manage.js b/share/ic/js/manage.js index edb59dd..a921157 100644 --- a/share/ic/js/manage.js +++ b/share/ic/js/manage.js @@ -52,10 +52,12 @@ YUI( "ic-manage-plugin-treeview-css" ] }, - "ic-manage-plugin-tabio": { - path: "manage/plugins/tab_io.js", + "ic-manage-plugin-tabpanel": { + path: "manage/plugins/tabpanel.js", requires: [ + "ic-manage-plugin-tabpanel-css", "gallery-widget-io", + "widget-stdmod", "ic-manage-plugin-treeview" ] }, @@ -110,7 +112,7 @@ YUI( "ic-manage-widget-function", "gallery-form", "ic-manage-widget-tabview", - "ic-manage-plugin-tabio" + "ic-manage-plugin-tabpanel" ] }, "ic-manage-widget-container": { @@ -179,6 +181,10 @@ YUI( path: "manage/widgets/menu.css", type: "css" }, + "ic-manage-plugin-tabpanel-css": { + path: "manage/plugins/tabpanel.css", + type: "css" + }, "ic-manage-plugin-treeview-css": { path: "manage/plugins/treeview.css", type: "css" @@ -237,6 +243,11 @@ YUI( Y.log("setting up manage window"); var mw = new Y.IC.ManageWindow({prefix: '_mw'}); + + // hide our loading screen + Y.on('contentready', function () { + Y.one('#application-loading').addClass('hide'); + }, '#manage_menu'); } ); } diff --git a/share/ic/js/manage/plugins/tab_io.js b/share/ic/js/manage/plugins/tab_io.js deleted file mode 100644 index ba5622a..0000000 --- a/share/ic/js/manage/plugins/tab_io.js +++ /dev/null @@ -1,227 +0,0 @@ -/* - Copyright (C) 2008-2010 End Point Corporation, http://www.endpoint.com/ - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 2 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with this program. If not, see: http://www.gnu.org/licenses/ -*/ - -YUI.add( - "ic-manage-plugin-tabio", - function(Y) { - - var ManageTabIO = function(config) { - ManageTabIO.superclass.constructor.apply(this, arguments); - }; - - ManageTabIO.ATTRS = { - content_node_template: { - value: '
' - }, - src_node_template: { - value: '
' - }, - related_node_template: { - value: '
' - }, - related: { - value: null - }, - content: { - value: null - }, - parent_node: { - value: null - } - }, - - Y.extend(ManageTabIO, Y.Plugin.WidgetIO, { - - initializer: function() { - Y.log('tab_io::initializer'); - var tab = this.get('host'); - tab.on('selectedChange', this.afterSelectedChange); - }, - - afterSelectedChange: function(e) { // this === tab - Y.log('tab_io::afterSelectedChange'); - this.get('panelNode').setContent(''); // clean slate - if (e.newVal) { // tab has been selected - if (this.io.get('content')) { - Y.log('has content!'); - this.io.addContent( - this.io.get('content'), - this.get('panelNode') - ); - } - if (this.io.get('uri')) { - Y.log('has src!'); - this.io.refresh(); - } - if (this.io.get('related')) { - Y.log('has related! related: ' + this.io.get('related')); - this.io.addRelated( - this.io.get('related'), - this.get('panelNode') - ); - } - } - }, - - addContent: function (content, parent) { - var content_node = this._buildEmptyContentNode(); - if (Y.Lang.isString(content)) { - content_node.setContent(content); - } - else if (Y.Lang.isObject(content)) { - content_node.setContent( - this._buildContentString(content) - ); - } - parent.prepend(content_node); - }, - - addSrc: function(response, parent) { - Y.log('tab_io::addSrc'); - var tab = this.get('host'); - Y.log(this.get('uri')); - Y.log(response); - if (response) { - var data = this._parseJSON(response); - var content_str = this._buildContentString(data); - var src_node = this._buildEmptySrcNode(); - src_node.setContent(content_str); - if (Y.Lang.isValue(response.related)) { - this.addRelated(response.related, src_node); - } - parent.append(src_node); - } - }, - - addRelated: function (related_ary, parent) { - Y.log('tab_io::addRelated'); - Y.log(related_ary); - var related_node = this._buildEmptyRelatedNode(); - Y.log('related node text: ' + related_node.get('text')); - var tree = this._buildRelatedTreeview(related_ary); - tree.plug(Y.IC.ManageTreeview); - related_node.append(tree); - parent.append(related_node); - }, - - _defStartHandler: function (id, o) { - this._activeIO = o; - // this.setContent(''); - // this._toggleLoadingClass(true); - }, - - _defSuccessHandler: function (id, o) { - Y.log('tab_io::_defSuccessHandler'); - Y.log(this); - parent = this.get('parent_node') || null; - if (!parent) { - parent = this.get('host').get('panelNode'); - } - this.addSrc(o.responseText, parent); - }, - - _parseJSON: function (json_str) { - var json = {}; - try { - json = Y.JSON.parse(json_str); - } - catch (e) { - Y.log("Can't parse JSON: " + e, "error"); - Y.log(json_str); - } - return json; - }, - - _buildContentString: function (data) { - Y.log('tab_io::_buildContentString'); - var content = []; - if (Y.Lang.isValue(data.object_name)) { - content.push('

' + data.object_name + '

'); - } - if (Y.Lang.isValue(data.pk_settings)) { - content.push( - data.pk_settings[0].field + - ": " + data.pk_settings[0].value) - ; - } - if (Y.Lang.isValue(data.other_settings)) { - content.push("

"); - for (i = 0; i < data.other_settings.length; i += 1) { - row = data.other_settings[i]; - content.push(row.field + ": " + row.value + "
"); - } - } - return content.join(''); - }, - - _buildRelatedTreeview: function (related_ary) { - Y.log('tab_io::_buildRelatedTreeview'); - if (related_ary.length) { - var ul = Y.Node.create(''); - var items = []; - Y.each(related_ary, function (v, i) { - items[v.order] = Y.Node.create('
  • ' + v.label + '
    • '); - // add content and/or src - if (Y.Lang.isValue(v.related)) { - items[v.order].append(this._buildRelatedTreeview(v.related)); - } - }, this); - Y.each(items, function (v) { - ul.append(v); - }); - return ul; - } - else { - return Y.Node.create( - "
    There seem to be related nodes - but I can't find them...
    " - ); - } - }, - - _buildEmptyContentNode: function () { - return Y.Node.create(this.get('content_node_template')); - }, - - _buildEmptySrcNode: function () { - return Y.Node.create(this.get('src_node_template')); - }, - - _buildEmptyRelatedNode: function (data) { - return Y.Node.create(this.get('related_node_template')); - }, - - _toggleLoadingClass: function(add) { - // noop - } - - }, { - NAME: 'ic_manage_tabio', - NS: 'io' - }); - - Y.namespace("IC"); - Y.IC.ManageTabIO = ManageTabIO; - - }, - "@VERSION@", - { - requires: [ - "gallery-widget-io", - "gallery-treeviewlite" - ] - } -); diff --git a/share/ic/js/manage/plugins/tabpanel.js b/share/ic/js/manage/plugins/tabpanel.js new file mode 100644 index 0000000..de9133d --- /dev/null +++ b/share/ic/js/manage/plugins/tabpanel.js @@ -0,0 +1,332 @@ +/* + Copyright (C) 2008-2010 End Point Corporation, http://www.endpoint.com/ + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 2 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see: http://www.gnu.org/licenses/ +*/ + +YUI.add( + "ic-manage-plugin-tabpanel", + function(Y) { + + var ManageTabPanel = Y.Base.create ( + "ic_manage_tabpanel", // module identifier + Y.Plugin.WidgetIO, // what to extend + [ // classes to mix in + Y.WidgetStdMod + ], + { // prototype overrides/additions + + initializer: function() { + // Y.log('tabpanel::initializer'); + + var tab = this.get('host'); + tab.on('selectedChange', Y.bind(this.afterSelectedChange, this)); + }, + + initStdMod: function(panel) { + // Y.log('tabpanel::initStdMod'); + panel = panel ? panel : this.get('host').get('panelNode'); + panel.setContent(''); // clean slate + /* + Y.log('panel -> contentBox'); + Y.log(panel); + Y.log(this.get('contentBox')); + */ + this.set('contentBox', panel); + this._stdModNode = panel; + this.set('headerContent', 1); + this.set('bodyContent', 1); + this.set('footerContent', 1); + this._renderUIStdMod(); + this._bindUIStdMod(); + this.populateTab(this); + }, + + populateTab: function (tab) { + // Y.log('tabpanel::populateTab'); + + // first, deal with recursion + if (tab.get('related')) { + tab.addRelated(tab.get('related')); + } + + // if there's nothing left to recurse, add the rest + else { + if (tab.get('content')) { + tab.addContent(tab.get('content')); + } + if (tab.get('uri')) { + tab.prepareSrc(); + } + } + }, + + afterSelectedChange: function (e) { + // Y.log('tabpanel::afterSelectedChange'); + + // expand the 'src' if there is no treeview + if (e.newVal) { + var cb = this.get('contentBox'); + if (cb && !cb.one('.yui3-treeviewlite')) { + // tab has been selected, and there is no treeview + if (this.get('uri')) { + this.refresh(); + } + } + } + }, + + setContent: function (content) { + // Y.log('tabpanel::setContent'); + try { + this.get('host').get('contentBox').setContent(content); + } + catch (err) { + Y.log('setContent error! No contentBox?'); + // does this need to be fixed? it works anyway... + } + }, + + addContent: function (content) { + // Y.log('tabpanel::addContent'); + var content_node = this._buildEmptyContentNode(); + if (Y.Lang.isString(content)) { + content_node.setContent(content); + } + else if (Y.Lang.isObject(content)) { + content_node.setContent( + this._buildContentString(content) + ); + } + this.set('headerContent', content_node); + }, + + prepareSrc: function() { + // Y.log('tabpanel::prepareSrc'); + var src_node = this._buildEmptySrcNode(); + src_node.setContent(''); + this.set('bodyContent', src_node); + }, + + addSrc: function(response) { + // Y.log('tabpanel::addSrc'); + if (response) { + var data = this._parseJSON(response); + // Y.log(data); + var content_str = this._buildContentString(data); + var src_node = this._buildEmptySrcNode(); + src_node.setContent(content_str); + if (Y.Lang.isValue(response.related)) { + this.addRelated(response.related, src_node); + } + this.set('bodyContent', src_node); + } + }, + + addRelated: function (related_ary) { + // Y.log('tabpanel::addRelated'); + var related_node = this._buildEmptyRelatedNode(); + var tree = this._buildRelatedTreeview(related_ary); + tree.plug(Y.IC.ManageTreeview); + related_node.append(tree); + this.set('footerContent', related_node); + tree.treeviewLite.on('open', this._onOpen, this); + tree.treeviewLite.on('collapse', this._onCollapse, this); + }, + + _defStartHandler: function (id, o) { + // Y.log('tabpanel::_defStartHandler'); + this._activeIO = o; + // this.setContent(''); + // this._toggleLoadingClass(true); + }, + + _defSuccessHandler: function (id, o) { + // Y.log('tabpanel::_defSuccessHandler'); + this.addSrc(o.responseText); + }, + + _parseJSON: function (json_str) { + // Y.log('tabpanel::_parseJSON'); + var json = {}; + try { + json = Y.JSON.parse(json_str); + } + catch (e) { + Y.log("Can't parse JSON: " + e, "error"); + Y.log(json_str); + } + return json; + }, + + _buildContentString: function (data) { + // Y.log('tabpanel::_buildContentString'); + var content = ['
    ']; + Y.each(data, function (v, k) { + if (Y.Lang.isString(v) || Y.Lang.isNumber(v)) { + content.push('
    ' + k + ':
    ' + v + '
    '); + } + else if (k === 'action_log') { + // build the action log, but don't render it here. + } + else if (Y.Lang.isArray(v) && Y.Lang.isObject(v[0]) && Y.Lang.isValue(v[0].field)) { + Y.each(v, function (o) { + content.push('
    ' + o.field + '
    ' + o.value + '
    '); + }); + } + else if (Y.Lang.isObject(v)) { + content.push(this._buildContentString(v)); + } + }, this); + content.push('
    '); + return content.join(''); + }, + + _buildRelatedTreeview: function (related_ary) { + // Y.log('tabpanel::_buildRelatedTreeview'); + if (related_ary.length) { + var ul = Y.Node.create(''); + var items = []; + Y.each(related_ary, function (v, i) { + var li_class = 'yui3-treeviewlite-dependent'; + if (Y.Lang.isValue(v.related)) { + li_class = 'yui3-treeviewlite-collapsed'; + } + items[v.order] = Y.Node.create('\ +
  • ' + v.label + '
    • '); + var mtp_node = Y.Node.create('\ +
    Loading...
    '); + + /* + Y.log('----------------------------'); + Y.log('label -> src -> content -> related'); + Y.log(v.label); + Y.log(v.src || null); + Y.log(v.content || null); + Y.log(v.related || null); + Y.log('----------------------------'); + */ + + mtp_node.plug(Y.IC.ManageTabPanel, { + label: v.label || null, + uri: v.src || null, + content: v.content || null, + related: v.related || null + }); + // the following line recursively preps every related item + mtp_node.mtp.initStdMod(mtp_node); + items[v.order].append(mtp_node); + }, this); + Y.each(items, function (v) { + ul.append(v); + }); + return ul; + } + else { + return Y.Node.create( + "
    There seem to be related nodes - but I can't find them...
    " + ); + } + }, + + _onOpen: function (e) { + // Y.log('tabpanel::_onOpen'); + var div = e.details[0].target.next(); + + // build an array of things that need opened + var opens = [div.mtp]; + var dependents = div.all('li.yui3-treeviewlite-dependent'); + Y.each(dependents, function (v, k) { + var dep_stdmod = v.one('div.yui3-widget-stdmod'); + opens.push(dep_stdmod.mtp); + }); + + Y.each(opens, function (v) { + // add any static content + var content = v.get('content'); + if (content) { + v.addContent(content); + } + + // start loading any dynamic content + var uri = v.get('uri'); + if (uri) { + v.set('bodyContent', 'Loading...'); + v.refresh(); + } + }); + }, + + _onCollapse: function (e) { + // Y.log('tabpanel::_onCollapse'); + var div = e.details[0].target.next(); + div.mtp.set('headerContent', ''); + div.mtp.set('bodyContent', ''); + }, + + _buildEmptyContentNode: function () { + return Y.Node.create(this.get('content_node_template')); + }, + + _buildEmptySrcNode: function () { + return Y.Node.create(this.get('src_node_template')); + }, + + _buildEmptyRelatedNode: function (data) { + return Y.Node.create(this.get('related_node_template')); + }, + + _toggleLoadingClass: function(add) { + // noop + } + + }, { + ATTRS: { + content_node_template: { + value: '
    ' + }, + src_node_template: { + value: '
    ' + }, + related_node_template: { + value: '
    ' + }, + related: { + value: null + }, + content: { + value: null + }, + label: { + value: null + } + }, + NAME: 'ic_manage_tab', + NS: 'mtp' + } + ); + + Y.namespace("IC"); + Y.IC.ManageTabPanel = ManageTabPanel; + + }, + "@VERSION@", + { + requires: [ + "gallery-widget-io", + "widget-stdmod", + "gallery-treeviewlite" + ] + } +); diff --git a/share/ic/js/manage/plugins/treeview.js b/share/ic/js/manage/plugins/treeview.js index 69e9d37..c7fd11d 100644 --- a/share/ic/js/manage/plugins/treeview.js +++ b/share/ic/js/manage/plugins/treeview.js @@ -134,14 +134,30 @@ YUI.add( * @method bindUI */ bindUI : function() { - - // add a delegated listener to expand collapsed sub trees - this._delegates.push( this.get(HOST).delegate( "click" , - this._toggleCollapse , - "li." + CSS_HAS_CHILD + " span" , - this, - true) - ); + // Y.log('treeview::bindUI'); + /* + * Because treeview is plugged in multiple times, + * I need to be careful not to bind the same event + * more than once. + */ + var toggles = this.get(HOST).all('span.treeview-toggle'); + this._delegates.push( + toggles.on('click', this._toggleCollapse, this) + ); + toggles.removeClass('treeview-toggle'); + + /* this fails - see above work-around + // add a delegated listener to expand collapsed sub trees + this._delegates.push( + this.get(HOST).delegate( + "click", + this._toggleCollapse, + 'span.treeview-toggle', + this, + true + ) + ); + */ }, /** diff --git a/share/ic/js/manage/widgets/functions/detail.js b/share/ic/js/manage/widgets/functions/detail.js index 38b4ada..156576a 100644 --- a/share/ic/js/manage/widgets/functions/detail.js +++ b/share/ic/js/manage/widgets/functions/detail.js @@ -126,21 +126,21 @@ YUI.add( tabs: [ { order: 0, - label: 'Details', + label: '0 - Details', src: '/manage/function/Orders_orderDetailView/0?_mode=config&_format=json&_pk_id=6' }, { order: 1, - label: 'Goods', + label: '1 - Goods', related: [ { order: 0, - label: 'Line', + label: '2 - Line', src: '/manage/function/Variants_variantDetailView/0?_mode=config&_format=json&_pk_id=1', related: [ { order: 0, - label: 'Inventory Map', + label: '3 - Inventory Map', content: { Description: 10, Status: 'Pending Return', @@ -154,14 +154,14 @@ YUI.add( related: [ { order: 0, - label: 'Inventory Record', + label: '4 - Inventory Record', src: '/manage/function/Inventories_recordDetailView/0?_mode=config&_format=json&_pk_id=13' } ] }, { order: 1, - label: 'Inventory Map', + label: '4 - Inventory Map', content: { Description: 22, Status: 'Dynamic Sold', @@ -173,7 +173,7 @@ YUI.add( related: [ { order: 0, - label: 'Inventory Record', + label: '5 - Inventory Record', src: '/manage/function/Inventories_recordDetailView/0?_mode=config&_format=json&_pk_id=26' } ] @@ -185,21 +185,21 @@ YUI.add( { order: 2, object_name: "History", - label: 'History', + label: '6 - History', related: [ { order: 0, - label: 'Revision', + label: '7 - Revision', src: '/manage/function/Orders__Revisions_revisionDetailView/0?_mode=config&_format=json&_pk_id=2', related: [ { order: 0, - label: 'Line', + label: '8 - Line', src: '/manage/function/Orders__Revisions__Lines_lineDetailView/0?_mode=config&_format=json&_pk_id=2', related: [ { order: 0, - label: 'Element', + label: '9 - Element', content: { Description: 2, Variant: 'Test Variant 1 (TEST01-SIL)', @@ -213,7 +213,7 @@ YUI.add( related: [ { order: 0, - label: 'Parcel', + label: '10 - Parcel', src: '/manage/function/Parcels_parcelDetailView/0?_mode=config&_format=json&_pk_id=6' } ] @@ -224,17 +224,17 @@ YUI.add( }, { order: 1, - label: 'Revision', + label: '11 - Revision', src: '/manage/function/Orders__Revisions_revisionDetailView/0?_mode=config&_format=json&_pk_id=8', related: [ { order: 0, - label: 'Line', + label: '12 - Line', src: '/manage/function/Orders__Revisions__Lines_lineDetailView/0?_mode=config&_format=json&_pk_id=14', related: [ { order: 0, - label: 'Element', + label: '13 - Element', content: { Description: 14, Variant: 'Test Variant 1 (TEST01-SIL)', @@ -249,14 +249,14 @@ YUI.add( related: [ { order: 0, - label: 'Parcel', + label: '14 - Parcel', src: '/manage/function/Parcels_parcelDetailView/0?_mode=config&_format=json&_pk_id=18' } ] }, { order: 1, - label: 'Element', + label: '15 - Element', content: { Description: 15, Variant: 'Test Variant 1 (TEST01-SIL)', @@ -271,7 +271,7 @@ YUI.add( related: [ { order: 1, - label: 'Parcel', + label: '16 - Parcel', src: '/manage/function/Parcels_parcelDetailView/0?_mode=config&_format=json&_pk_id=18' } ] @@ -284,11 +284,11 @@ YUI.add( }, { order: 3, - label: 'Payments', + label: '17 - Payments', related: [ { order: 0, - label: 'Transaction', + label: '18 - Transaction', src: '/manage/function/Transactions_txnDetailView/0?_mode=config&_format=json&_pk_id=122', content: { Description: 5, @@ -297,12 +297,12 @@ YUI.add( related: [ { order: 0, - label: 'Line', + label: '19 - Line', src: '/manage/function/TransactionAllocations__Lines_talDetailView/0?_mode=config&_format=json&_pk_id=1' }, { order: 1, - label: 'Line', + label: '20 - Line', src: '/manage/function/TransactionAllocations__Lines_talDetailView/0?_mode=config&_format=json&_pk_id=2' } ] @@ -311,7 +311,7 @@ YUI.add( }, { order: 4, - label: 'Notes', + label: '21 - Notes', content: 'No notes recorded for this order yet.' } ] @@ -324,17 +324,25 @@ YUI.add( this.on('visibleChange', Y.bind(this._onVisibleChange, this)); }, - /* - * This should be broken up into a bunch of addTab() - * method calls. And the forms should update the - * metadata, so listen for form successes and update - * the metadata, then redraw the tabs. Also, make it - * state driven with eh HistoryManger - simply which - * tab is selected. - */ + getHeaderText: function () { + if (this._meta_data) { + var pks = this._meta_data.pk_settings[0]; + var value = pks.value; + var header = this._meta_data.object_name + ' Detail ' + value; + // Y.log('detail::getHeaderText - header: ' + header); + return header; + } + else { + // Y.log('detail::getHeaderText - header is null - no meta_data'); + return null; + } + }, + _buildUI: function () { Y.log('detail::_buildUI'); + if (! this.get('visible') ) return; + // the meta_data is already available, so build the outer tabs from it this._meta_data = this._dummy_data; // testing... var prefix = this.get('prefix') + '_ot'; @@ -347,7 +355,6 @@ YUI.add( // Y.log('_meta_data.tab: ' + i); if (!Y.Lang.isValue(v.src)) v['src'] = null; if (!Y.Lang.isValue(v.related)) v['related'] = null; - // var content = this._buildContent(v.content); /* Y.log('v -> src -> related -> content'); Y.log(v); @@ -360,8 +367,9 @@ YUI.add( content: 'Loading...', index: v.order, plugins: [{ - fn: Y.IC.ManageTabIO, + fn: Y.IC.ManageTabPanel, cfg: { + label: v.label || null, uri: v.src || null, content: v.content || null, related: v.related || null @@ -370,45 +378,17 @@ YUI.add( }, v.order); }, this)); this._tabs.after('render', Y.bind(this._afterOuterTabsRender, this)); - this._tabs.after('selectionChange', Y.bind(this._onSelectOuterTab, this)); this._content_node.setContent(''); this._tabs.render(this._content_node); this.fire('manageFunction:loaded'); }, _updateOuterTabPanel: function (tab_index) { - Y.log('detail::_updateOuterTabPanel'); - Y.log('...does nothing'); - }, - - _buildContent: function (data) { - Y.log('detail::_buildContent'); - Y.log(data); - if (Y.Lang.isString(data)) { - return data; - } - else if (Y.Lang.isObject(data)) { - var content = []; - if (Y.Lang.isValue(data.object_name)) { - content.push('

    ' + data.object_name + '

    '); - } - if (Y.Lang.isValue(data.pk_settings)) { - content.push(data.pk_settings[0].field + ": " + data.pk_settings[0].value); - } - if (Y.Lang.isValue(data.other_settings)) { - content.push("

    "); - for (i = 0; i < data.other_settings.length; i += 1) { - row = data.other_settings[i]; - content.push(row.field + ": " + row.value + "
    "); - } - } - return content.join(''); - } - else if (Y.Lang.isUndefined(data)) { - return 'empty'; - } + // Y.log('detail::_updateOuterTabPanel'); + // ...does nothing }, + // belongs in the ManageTab class... _buildActionLog: function (data, actions) { if (Y.Lang.isValue(data.action_log)) { var content = []; @@ -441,20 +421,8 @@ YUI.add( } }, - _onSelectOuterTab: function (e) { - Y.log('detail::_onSelectOuterTab'); - Y.log('panel text: ' + e.newVal.get('panelNode').get('text')); - // Y.log(e.newVal.get('index')); - // this._updateOuterTabPanel(e.newVal.get('index')); - }, - - _afterOuterTabsRender: function (e) { - Y.log('detail::_afterOuterTabsRender'); - // Y.log(e.target); // tabview - e.target.selectChild(Number(e.target.get('state.st'))); - }, - - renderForm: function (e) { + // belongs in the ManageTab class... + _buildForm: function (e) { // Y.log('detail::onTabviewRender'); // var tab = e.target._items[this._tab_indices['edit']]; var panel = this._tabs.getPanel('Edit'); @@ -474,7 +442,6 @@ YUI.add( fields[++i] = {type : 'reset', label : 'Reset'}; } - var f = new Y.Form({ action : '/manage/index', // should be a nice long load... method : 'post', @@ -491,18 +458,10 @@ YUI.add( f.render(panel); }, - getHeaderText: function () { - if (this._meta_data) { - var pks = this._meta_data.pk_settings[0]; - var value = pks.value; - var header = this._meta_data.object_name + ' Detail ' + value; - // Y.log('detail::getHeaderText - header: ' + header); - return header; - } - else { - // Y.log('detail::getHeaderText - header is null - no meta_data'); - return null; - } + _afterOuterTabsRender: function (e) { + // Y.log('detail::_afterOuterTabsRender'); + var tab_index = e.target.get('state.st') || 0; + e.target.selectChild(Number(tab_index)); }, /* @@ -537,7 +496,7 @@ YUI.add( "ic-manage-widget-function", "gallery-form", "ic-manage-widget-tabview", - "ic-manage-plugin-tabio" + "ic-manage-plugin-tabpanel" ] } ); diff --git a/share/ic/js/manage/widgets/tabview.js b/share/ic/js/manage/widgets/tabview.js index 99a87e5..4166bf2 100644 --- a/share/ic/js/manage/widgets/tabview.js +++ b/share/ic/js/manage/widgets/tabview.js @@ -32,6 +32,7 @@ YUI.add( initializer: function (config) { ManageTabView.superclass.initializer.apply(this, arguments); this.after('addChild', Y.bind(this._afterAddChild, this)); + this.after('render', Y.bind(this._afterRender, this)); this.after('selectionChange', Y.bind(this._myAfterSelectionChange, this)); this.after('stateChange', Y.bind(this._afterStateChange, this)); if (!this._on_history_change) { @@ -58,7 +59,7 @@ YUI.add( }, getTabByLabel: function (label) { - Y.log('tabview::getTabByLabel'); + // Y.log('tabview::getTabByLabel'); var tab = null; Y.each(this._tab_refs, function (v, k, obj) { if (v.label === label) tab = v.tab; @@ -67,13 +68,13 @@ YUI.add( }, getPanelByLabel: function (label) { - Y.log('tabview::getPanelByLabel'); + // Y.log('tabview::getPanelByLabel'); var tab = this.getTabByLabel(label); if (tab) return tab.get('panelNode'); }, getTabByIndex: function (index) { - Y.log('tabview::getTabByIndex'); + // Y.log('tabview::getTabByIndex'); var tab = null; Y.each(this._tab_refs, function (v, k, obj) { if (v.index === index) tab = v.tab; @@ -82,7 +83,7 @@ YUI.add( }, getPanelByIndex: function (index) { - Y.log('tabview::getPanelByIndex'); + // Y.log('tabview::getPanelByIndex'); var tab = this.getTabByIndex(index); if (tab) { return tab.get('panelNode'); @@ -90,7 +91,7 @@ YUI.add( }, selectTabByLabel: function (label) { - Y.log('tabview::selectTabByLabel'); + // Y.log('tabview::selectTabByLabel'); if (this.get('selection')) { if (this.get('selection').get('label') !== label) { Y.each(this._tab_refs, function (v, k, obj) { @@ -101,7 +102,7 @@ YUI.add( }, selectTabByIndex: function (index) { - Y.log('tabview::selectTabByIndex - index: ' + index); + // Y.log('tabview::selectTabByIndex - index: ' + index); if (this.get('selection')) { index = Number(index); if (this.get('selection').get('index') !== index) { @@ -111,7 +112,7 @@ YUI.add( }, getTab: function (key) { - Y.log('tabview::getTab'); + // Y.log('tabview::getTab'); if (Y.Lang.isString(key)) { return this.getTabByLabel(key); } @@ -124,7 +125,7 @@ YUI.add( }, getPanel: function (key) { - Y.log('tabview::getPanel'); + // Y.log('tabview::getPanel'); if (Y.Lang.isString(key)) { return this.getPanelByLabel(key); } @@ -137,7 +138,7 @@ YUI.add( }, selectTab: function (key) { - Y.log('tabview::selectTab'); + // Y.log('tabview::selectTab'); if (Y.Lang.isString(key)) { return this.selectTabByLabel(key); } @@ -150,7 +151,7 @@ YUI.add( }, _setDefSelection: function(contentBox) { - Y.log('tabview::_setDefSelection'); + // Y.log('tabview::_setDefSelection'); var st = this.get('state.st') || 0; // If no tab is selected, select by state. @@ -168,8 +169,15 @@ YUI.add( } }, + _afterRender: function (e) { + // Y.log('tabview::_afterRender'); + Y.each(this._tab_refs, function (v) { + v.tab.mtp.initStdMod(); + }, this); + }, + _afterAddChild: function (e) { - Y.log('tabview::_afterAddChild'); + // Y.log('tabview::_afterAddChild'); // keep an object with references to each child // e.child e.index e.child.get('label') this._tab_refs[e.index] = { @@ -180,7 +188,7 @@ YUI.add( }, _afterStateChange: function (e) { - Y.log('tabview::_afterStateChange - prefix: ' + this.get('prefix')); + // Y.log('tabview::_afterStateChange - prefix: ' + this.get('prefix')); var state = this.get('state.st'); // Y.log('state.st: ' + state); if (state) { @@ -189,7 +197,7 @@ YUI.add( }, _myAfterSelectionChange: function (e) { - Y.log('tabview::_myAfterSelectionChange - st: ' + e.newVal.get('index')); + // Y.log('tabview::_myAfterSelectionChange - st: ' + e.newVal.get('index')); // only update the history if i have state var state = {st: e.newVal.get('index')}; Y.HistoryLite.add(this._addMyHistoryPrefix(state)); diff --git a/share/ic/js/manage/window.js b/share/ic/js/manage/window.js index fff1e1c..4780cee 100644 --- a/share/ic/js/manage/window.js +++ b/share/ic/js/manage/window.js @@ -172,7 +172,7 @@ YUI.add( position: "top", body: "manage_menu", header: "Main Menu", - height: 212, + height: 214, zIndex: 2, scroll: null }, diff --git a/share/ic/styles/manage.css b/share/ic/styles/manage.css index a9db2a8..a43f1a3 100644 --- a/share/ic/styles/manage.css +++ b/share/ic/styles/manage.css @@ -6,12 +6,18 @@ display: none; } -.please-wait { +.hide { display: none; } -.yui3-js-enabled .display-while-loading { - display: block; +#application-loading { + border: 1px dashed #d7d7d7; + width: 400px; + height: 100px; + line-height: 100px; + text-align: center; + vertical-align: middle; + margin: 4em auto; } .allow-overflow { diff --git a/share/ic/styles/manage/plugins/tabpanel.css b/share/ic/styles/manage/plugins/tabpanel.css new file mode 100644 index 0000000..a07c22d --- /dev/null +++ b/share/ic/styles/manage/plugins/tabpanel.css @@ -0,0 +1,32 @@ +div.yui3-tab-panel dl { + margin: 2px 0 0 0; + padding-left: 2px; + border: 1px solid #d7d7d7; +} + +div.yui3-tab-panel dl:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} + +div.yui3-tab-panel dt { + clear: left; + width: 13em; + float: left; +} + +div.yui3-tab-panel dd { + clear: right; + float: left; + margin: 0 0 0 0; +} + +div.yui3-tab-panel div.yui3-widget-hd, +div.yui3-tab-panel div.yui3-widget-bd, +div.yui3-tab-panel div.yui3-widget-ft { + clear: both; +} diff --git a/views/manage/index.tst b/views/manage/index.tst index d1c6383..aecda6e 100644 --- a/views/manage/index.tst +++ b/views/manage/index.tst @@ -39,8 +39,8 @@ -
    - Application loading... +
    + Loading Site Management...