You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@rave.apache.org by zh...@apache.org on 2011/04/01 02:29:38 UTC
svn commit: r1087520 [24/35] - in
/incubator/rave/donations/ogce-gadget-container: ./ config/
config/shindig-1.1-BETA5/ config/shindig-2.0.0/ db-cleaner/ examples/
examples/src/ examples/src/main/ examples/src/main/java/
examples/src/main/java/cgl/ exa...
Added: incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js
URL: http://svn.apache.org/viewvc/incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js?rev=1087520&view=auto
==============================================================================
--- incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js (added)
+++ incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js Fri Apr 1 00:29:22 2011
@@ -0,0 +1,849 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+
+Ext.namespace('cgl.shindig.ui.layout.tree');
+
+cgl.shindig.ui.layout.tree.isinit = false;
+
+Ext.namespace('cgl.shindig.ui.layout.tree.leafnode');
+cgl.shindig.ui.layout.tree.leafnode.idsuffix = "_tree_node_";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.innernode');
+cgl.shindig.ui.layout.tree.innernode.idsuffix = "_tree_node_";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.rootnode');
+cgl.shindig.ui.layout.tree.rootnode.id = "dummy-tree-root";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyGadgetPanel');
+cgl.shindig.ui.layout.tree.bodyGadgetPanel.id = "bodyGadgetPanel";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyTreePanel');
+cgl.shindig.ui.layout.tree.bodyTreePanel.id = "treePanel";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyTreePanelBorder');
+cgl.shindig.ui.layout.tree.bodyTreePanelBorder.id = 'bodyPanelWest';
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyCenterPanelBorder');
+cgl.shindig.ui.layout.tree.bodyCenterPanelBorder.id = 'bodyPanelCenter';
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyGadgetPanelCard');
+cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id = 'bodyGadgetPanelCard';
+cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray = [];
+
+/**
+ * called after user data is loaded.
+ */
+function afterLoadData() {
+ var mainTreeLayoutPanel = createMainTreeLayoutPanel();
+
+ createUIFramework(mainTreeLayoutPanel, createAddTabButtonTree,
+ createRemoveTabButtonTree, gadgetAddCallback);
+
+ /* add gadgets to the layout */
+ addInitialGadgets(mainTreeLayoutPanel);
+
+ /* set text of layout combobox */
+ setLayoutUIText();
+}
+
+
+function getGadgetIdFromNodeId(nodeid) {
+ return nodeid.substr(0, nodeid.length - cgl.shindig.ui.layout.tree.leafnode.idsuffix.length);
+}
+
+function getTabIdFromNodeId(nodeid) {
+ // alert(nodeid.length - cgl.shindig.ui.layout.tree.innernode.idsuffix.length);
+ return nodeid.substr(0, nodeid.length - cgl.shindig.ui.layout.tree.innernode.idsuffix.length);
+}
+
+/**
+ * Note: this function does not check whether duplicate nodes exist already.
+ */
+function add2TreeFromLayoutObj(layoutObj, node) {
+ var nodeid = node.id;
+ for (var i = 0; i < layoutObj.getTabCount(); ++i) {
+ var tabobj = layoutObj.getTabByIndex(i);
+ if (tabobj == null) continue;
+ // add an internal node
+ var tabname = tabobj.getTabName();
+ var tabnodeid = tabobj.getTabId() //example: _tab_0
+ + cgl.shindig.ui.layout.tree.innernode.idsuffix;
+
+ // check whether the node is involved
+ if (nodeid != cgl.shindig.ui.layout.tree.rootnode.id &&
+ nodeid != tabnodeid)
+ continue;
+
+ var nodeData = {
+ text: tabname,
+ id: tabnodeid,
+ leaf: false
+ };
+
+ var tabNode = node;
+ // check whether this node has been added to the tree
+ if (nodeid == cgl.shindig.ui.layout.tree.rootnode.id)
+ tabNode = addSubNode(nodeData, node);
+ for (var j = 0 ; j < tabobj.getColumnCount(); ++j) {
+ var colobj = tabobj.getColumnByIndex(j);
+ for (var k = 0 ; k < colobj.getGadgetCount(); ++k) {
+ var gadget = colobj.getGadgetByIndex(k);
+ var gadgetName = gadget.getGadgetName();
+ //add a leaf node
+ var nodeData = {
+ text: gadgetName,
+ id: gadget.getGadgetId() //example: _tab_0_col_0_gadget_0
+ + cgl.shindig.ui.layout.tree.leafnode.idsuffix,
+ leaf: true
+ };
+ addSubNode(nodeData, tabNode);
+ }
+ }
+ }
+}
+
+
+/**
+ * add a node to a tree.
+ * @param nodeData data of the node
+ * @param node the new node would be a child node of the node specified by
+ * this parameter.
+ */
+function addSubNode(nodeData, node) {
+ var treeLoader = node.getOwnerTree().getLoader();
+ var o = nodeData;
+ if( typeof json == 'string' )
+ o = eval("("+json+")");
+ if( ! (o instanceof Object ))
+ return;
+
+ node.beginUpdate();
+ var n = treeLoader.createNode(o);
+ if(n != null){
+ node.appendChild(n);
+ }
+ node.endUpdate();
+ return n;
+}
+
+
+/**
+ * This function is invoked after the gadget is added to the main panel.
+ * In Tree layout, a new node should be inserted to the tree.
+ */
+function gadgetAddCallback(gadgetId) {
+ var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+ var layout = cgl.shindig.ui.layout.layoutobj;
+ var gadget = layout.getGadgetById(gadgetId);
+ var nodeData = {
+ text: gadget.getGadgetName(),
+ id: gadgetId + cgl.shindig.ui.layout.tree.leafnode.idsuffix,
+ leaf: true
+ };
+
+ var idobj = getIdObjFromGId(gadgetId);
+ var tabNodeId = idobj.tabid + cgl.shindig.ui.layout.tree.innernode.idsuffix;
+ var tabNode = treePanel.getNodeById(tabNodeId);
+ addSubNode(nodeData, tabNode);
+ treePanel.expandPath(tabNode.getPath());
+ // tabNode.expand();
+}
+
+
+/**
+ * Add initial gadget to gadget panel.
+ */
+function addInitialGadgets (mainTreeLayoutPanel) {
+ var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+ var gadgetPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanel.id);
+ var cardLayoutPanel = new Ext.Panel({
+ // title: "card layout",
+ layout: "card",
+ layoutConfig: {
+ deferredRender: true,
+ renderHidden: true
+ },
+ id: cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id,
+ // height: '100%',
+ autoHeight: 'auto',
+ activeItem: 0,
+ // bodyStyle: 'padding: 15px;',
+ defaults: {
+ border: false
+ }
+ });
+
+ gadgetPanel.add(cardLayoutPanel);
+ gadgetPanel.show();
+
+ var layout = cgl.shindig.ui.layout.layoutobj;
+ var initTabIdx = -1; /* which tab to display */
+ for( var i = 0 ; i < layout.getTabCount(); ++i ){
+ var tab = layout.getTabByIndex(i);
+ if (tab == null) continue;
+ if (initTabIdx == -1) {
+ initTabIdx = i; //find the first meaningful tab.
+ }
+ var tabid = layout.makeTabId(i);
+ tab.currentid = tabid;
+ var html = TrimPath.processDOMTemplate('tab_template', tab);
+ var scripthtml = TrimPath.processDOMTemplate('tab_template_script', tab);
+ var cmp = cardLayoutPanel.add({
+ title: tab.getTabName(),
+ id: tabid,
+ html: html,
+ scripthtml: scripthtml,
+ autoHeight: 'auto',
+ listeners: { }
+ });
+
+ cmp.on("afterlayout", function(){
+ alert("after render");
+ });
+
+ cmp.on("show", function(cmp){ //triggered when a tab is shown
+ var tabid = this.getId(); //should be like '_tab_0'
+ var tabindex = layout.parseTabId(tabid)[0];
+ var tabobj = cgl.shindig.ui.layout.layoutobj.getTabByIndex(tabindex);
+ for( var i = 0 ; i < tabobj.getColumnCount() ; ++i ){
+ var colid = layout.makeColId(tabindex, i);
+ if( cgl.shindig.ui.layout.droptargetrenderedlist[colid] != null )
+ // the column has been rendered before.
+ continue;
+
+ var setDropTarget = function(colid) {
+ if (Ext.get(colid) != null) {
+ var dt = new cgl.shindig.ui.dnd.DropTarget(colid, {ddGroup: 'group'});
+ cgl.shindig.ui.layout.droptargetrenderedlist[colid] = dt;
+ } else { //it may take some time to add columns to the tab
+ setTimeout(setDropTarget, 1000, colid);
+ }
+ }
+ setDropTarget(colid);
+ }
+ // cgl.shindig.ui.layout.curactivetabidx = _tabindex_;
+ if (cgl.shindig.ui.layout.tree.isinit) {
+ tabSwitchCallback(tabindex);
+ }
+
+ // If some frames in this tab are marked as max
+ // pick the first one and maximize it
+ // var tabindex = cgl.shindig.ui.layout.layoutobj.parseTabId(tabid)[0];
+ var maxGadgetsId = //tabobj.findMaxGadgetsId();
+ cgl.shindig.ui.layout.layoutobj.getTabByIndex(tabindex).findMaxGadgetsId();
+ if (maxGadgetsId != null && maxGadgetsId.length > 0) {
+ // var maxcardid = maxGadgetsId[0] + "_max_";
+ var maxcardid = cgl.shindig.ui.layout.layoutobj.makeGadgetMaxId(maxGadgetsId[0]);
+ var maxcardidx = getCardIndex(maxcardid);
+ if ( maxcardidx == -1) {
+ maximizeGadget(maxGadgetsId[0]);
+ } else {
+ var cardLayout = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+ // cardLayout.getLayout().setActiveItem(maxcardidx);
+ cardLayout.getLayout().setActiveItem(maxcardid);
+ }
+ }
+
+ function tmpfunc2() {
+ adjustCurrentTabPanel();
+ }
+ tmpfunc2.defer(100, window, []);
+
+ function tmpfunc(cmp) {
+ eval(cmp);
+ }
+ tmpfunc.defer(100, cmp, [cmp.scripthtml]);
+ });
+ addCardId(tabid);
+ }
+
+ gadgetPanel.doLayout();
+
+ if (getCardCount() > 0) {
+ var activeTabIdxInCfg = layout.getActiveTabIdx();
+ if( activeTabIdxInCfg != -1) {
+ cgl.shindig.ui.layout.tree.isinit = true;
+ tabSwitchCallback(activeTabIdxInCfg);
+ cardLayoutPanel.getLayout().setActiveItem(layout.makeTabId(activeTabIdxInCfg));
+ } else {
+ if (initTabIdx != -1) {
+ cgl.shindig.ui.layout.tree.isinit = true;
+ tabSwitchCallback(initTabIdx);
+ cardLayoutPanel.getLayout().setActiveItem(layout.makeTabId(initTabIdx));
+ }
+ }
+ // cgl.shindig.ui.layout.curactivetabidx = initTabIdx;
+ } else {
+ // cgl.shindig.ui.layout.curactivetabidx = -1;
+ tabSwitchCallback(-1);
+ }
+ cgl.shindig.ui.layout.tree.isinit = true;
+}
+
+function removeTreeNodeById(nodeid, tree) {
+ var node = tree.getNodeById(nodeid);
+ node = node.remove();
+}
+
+function createRemoveTabButtonTree(bodypanel, combobox, tabliststore) {
+ var removetabbtn = new Ext.Toolbar.Button({
+ text: 'remove',
+ tooltip: 'remove the selected tab',
+ iconCls: 'blist',
+ handler: function(){
+ var tabid = combobox.getValue();
+ if( tabid != "" ){
+ // remove from internal data structure
+ cgl.shindig.ui.layout.layoutobj.removeTabById(tabid);
+
+ // remove from tree
+ var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+ removeTreeNodeById(tabid+cgl.shindig.ui.layout.tree.innernode.idsuffix, treePanel);
+
+ // adjust top combox
+ combobox.setValue("");
+ tabliststore.loadData(cgl.shindig.ui.layout.layoutobj.getTabNameIdList());
+
+ // remove related components in card layout
+ var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+ var removedCardPanelIds = removeCardsWithPrefix(tabid);
+ for (var i = 0; i < removedCardPanelIds.length; ++i) {
+ var id = removedCardPanelIds[i];
+ var card = Ext.getCmp(id);
+ if (card != null) {
+ cardLayoutPanel.remove(card);
+ }
+ }
+
+ // switch another tab display and select corresponding node in
+ // the tree
+ if (getCardCount() > 0) {
+ cardLayoutPanel.getLayout().setActiveItem(0);
+ var cardId = getCardIdByIndex(0);
+ // this card should correspond to a tab instead of a
+ // maximized gadget.
+ if (!isTabId(cardId)) {
+ alert("something impossible happened!");
+ }
+ var node = treePanel.getNodeById(cardId + cgl.shindig.ui.layout.tree.innernode.idsuffix);
+ treePanel.selectPath(node.getPath());
+
+ // cgl.shindig.ui.layout.curactivetabidx = getTabIdxFromTabId(cardId);
+ // tabSwitchCallback(getTabIdxFromTabId(cardId));
+ } else {
+ // cgl.shindig.ui.layout.curactivetabidx = -1;
+ tabSwitchCallback(-1);
+ }
+ cgl.shindig.ui.layout.layoutobj.markDirty();
+ cgl.shindig.ops.syncLayoutData(false);
+ }
+ }
+ });
+ return removetabbtn;
+}
+
+function getTabIdxFromTabId(tabid){
+ // var tabidx = tabid.substr("_tab_".length);
+ // return parseInt(tabidx);
+ return cgl.shindig.ui.layout.layoutobj.parseTabId(tabid)[0];
+}
+
+/**
+ * Check whether the id is a tabid.
+ */
+function isTabId(tabid) {
+ var prefix = "_tab_";
+ var idxstr = tabid.substr(prefix.length);
+ var n = parseInt(idxstr);
+ if (isNaN(n))
+ return false;
+ var n2str = n + "";
+ if (n2str == idxstr)
+ return true;
+ else
+ return false;
+}
+
+/**
+ * Create the layout.
+ * On the left is a navigation tree and on the right is the gadget panel.
+ */
+function createMainTreeLayoutPanel() {
+
+ var treePanel = createGadgetTree(getLayoutDataObj);
+ var gadgetPanel = createBodyGadgetPanel();
+
+ var mainpanel = new Ext.Panel({
+ // title: "User Management",
+ layout: "border",
+ height: 800,
+ width: '100%',
+ border: false,
+ items: [{
+ title: 'tree',
+ region: 'west',
+ id: cgl.shindig.ui.layout.tree.bodyTreePanelBorder.id,
+ width: 250,
+ // height: '100%',
+ autoHeight: 'auto',
+ collapsible: true,
+ autoScroll: true,
+ items: [treePanel]
+ }, {
+ // title: 'gadgets',
+ id: cgl.shindig.ui.layout.tree.bodyCenterPanelBorder.id,
+ region:'center',
+ border: false,
+ autoHeight: 'auto',
+ margins: '0 20 0 0',
+ items: [gadgetPanel]
+ }]
+ });
+ return mainpanel;
+}
+
+function getLayoutDataObj() {
+ return cgl.shindig.ui.layout.layoutobj;
+}
+
+function maximizeGadget(gadgetid) {
+ getLayoutDataObj().getGadgetById(gadgetid).setGadgetStatus('max');
+
+ var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+
+ // var maxgadgetid = gadgetid + "_max_";
+ var layoutobj = cgl.shindig.ui.layout.layoutobj;
+ var maxgadgetid = layoutobj.makeGadgetMaxId(gadgetid);
+ var cardidx = getCardIndex(maxgadgetid);
+ if (cardidx != -1) {
+ cardLayoutPanel.getLayout().setActiveItem(maxgadgetid);
+ } else {
+ var gadget = layoutobj.getGadgetById(gadgetid);
+ // var escapedGadgetsrc = gadget.getEscapedGadgetSpecSrc();
+ var renderUrl = cgl.shindig.gadget.rendering.ops.genFullGadgetCanvasRenderingURL(gadget);
+ var frameid = layoutobj.makeGadgetMaxIFrameId(gadgetid);
+
+ cardLayoutPanel.add({
+ // title: tab.getTabName() + " > " + gadget.getGadgetName(),
+ id: maxgadgetid,
+ html: '<center><iframe id="'+frameid+
+ '" style="height:' +
+ cgl.shindig.ui.layout.maxiframe.height +
+ ';width:100%;border:none;" src="' + renderUrl+'"></iframe></center>',
+ tbar: createMaximizedGadgetToolbar(maxgadgetid, gadget)
+ });
+
+ function tmpfunc(frameid, maxgadgetid) {
+ adjustCurrentTabPanel(frameid, maxgadgetid);
+ }
+ tmpfunc.defer(100, window, [frameid, maxgadgetid]);
+
+ var cardCount = getCardCount();
+ // cardLayoutPanel.getLayout().setActiveItem(cardCount);
+ cardLayoutPanel.getLayout().setActiveItem(maxgadgetid);
+ addCardId(maxgadgetid);
+ }
+
+ // switch the selection to the corresponding node in the tree
+ treeNodeExpand(gadgetid);
+
+ var idobj = getIdObjFromGId(gadgetid);
+ tabSwitchCallback(idobj.tabidx);
+ // cgl.shindig.ui.layout.curactivetabidx = idobj.tabidx;
+}
+
+function treeNodeExpand(gadgetid) {
+ if (gadgetid == null)
+ return;
+
+ var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+ var gadgetNodeId = gadgetid + cgl.shindig.ui.layout.tree.leafnode.idsuffix;
+ var treeNode = treePanel.getNodeById(gadgetNodeId);
+ var path = treeNode.getPath();
+ treePanel.selectPath(path);
+ return;
+}
+
+function restoreGadget(maxgid) {
+ // var gid = maxgid.substr(0, maxgid.length - "_max_".length);
+ var gid = cgl.shindig.ui.layout.layoutobj.parseGadgetMaxId(maxgid);
+
+ getLayoutDataObj().getGadgetById(gid).setGadgetStatus('normal');
+
+ removeCardById(maxgid);
+ var bodyGadgetPanelCard = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+ var gadgetCmp = Ext.getCmp(maxgid);
+ bodyGadgetPanelCard.remove(gadgetCmp, true);
+
+ // switch to the tab panel
+ var idobj = getIdObjFromGId(gid);
+ var tabid = idobj.tabid;
+ var tabCardIdx = getCardIndex(tabid);
+ if (tabCardIdx != -1) {
+ // bodyGadgetPanelCard.getLayout().setActiveItem(tabCardIdx);
+ bodyGadgetPanelCard.getLayout().setActiveItem(tabid);
+ }
+
+ var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+ var gadgetNode = treePanel.getNodeById(gid+cgl.shindig.ui.layout.tree.leafnode.idsuffix);
+ var path = gadgetNode.parentNode.getPath();
+ treePanel.selectPath(path);
+
+ // cgl.shindig.ui.layout.curactivetabidx = idobj.tabidx;
+ tabSwitchCallback(idobj.tabidx);
+ adjustCurrentTabPanel();
+}
+
+function createMaximizedGadgetToolbar(maxgadgetid, gadget) {
+ var layoutobj = cgl.shindig.ui.layout.layoutobj;
+ var gadgetid = gadget.getGadgetId();
+ var idobj = getIdObjFromGId(gadgetid);
+ var tab = layoutobj.getTabByIndex(idobj.tabidx);
+
+ // var tbdivid = maxgadgetid + "_tb_";
+ var tbdivid = layoutobj.makeGadgetToolbarId(maxgadgetid);
+ var btname = new Ext.Toolbar.TextItem({
+ xtype: 'tbtext',
+ text: tab.getTabName() + " > " + gadget.getGadgetName()
+ });
+
+ var btrestore = new Ext.Toolbar.Button ({
+ xtype: 'tbbutton',
+ text:'restore',
+ tooltip: 'restore this gadget',
+ handler: function(){
+ restoreGadget(maxgadgetid);
+ }
+ });
+
+ var _tb_;
+ _tb_ = new Ext.Toolbar({ id: tbdivid, items:[btname, "->", btrestore] });
+ return _tb_;
+}
+
+function createGadgetTree(getLayoutDataObj, getMainpanel, getFormPanel){
+ var tree = new Ext.tree.TreePanel({
+ id: cgl.shindig.ui.layout.tree.bodyTreePanel.id,
+ useArrows:true,
+ autoScroll:true,
+ animate:true,
+ // height:200,
+ // width:200,
+ enableDD:true,
+ containerScroll: true,
+ rootVisible: false,
+ border: false,
+
+ root: {
+ nodeType: 'async',
+ text: 'dummy root',
+ draggable: false,
+ id: cgl.shindig.ui.layout.tree.rootnode.id
+ },
+
+ loader: new Ext.tree.TreeLoader({
+ listeners:{
+ beforeload: function(This, node, callback){
+ add2TreeFromLayoutObj( getLayoutDataObj(), node);
+ return false; //bypass sending request to remote server
+ }
+ },
+ dataUrl:'xml-tree-data.xml'//dummy, but necessary
+ }),
+
+ listeners: {
+ 'render': function(tp){
+ tp.getSelectionModel().on('selectionchange', function(tree, node){
+ if(node == null) return;
+ var nodeid = node.id;
+ if(node.leaf){
+ var gadgetid = getGadgetIdFromNodeId(nodeid);
+ maximizeGadget(gadgetid);
+ }else{
+ var tabid = getTabIdFromNodeId(nodeid);
+ var cardLayout = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+ var cardidx = getCardIndex(tabid);
+ if (cardidx != -1) {
+ // cardLayout.getLayout().setActiveItem(cardidx);
+ cardLayout.getLayout().setActiveItem(tabid);
+ // cgl.shindig.ui.layout.curactivetabidx = getTabIdxFromTabId(tabid);
+ tabSwitchCallback(getTabIdxFromTabId(tabid));
+ }
+
+ //el.update(detailsText);
+ }
+ })
+ }
+ }
+ });
+ return tree;
+}
+
+function createBodyGadgetPanel () {
+ var panel = new Ext.Panel({
+ height: '100%',
+ width: '100%',
+ id: cgl.shindig.ui.layout.tree.bodyGadgetPanel.id
+ });
+ return panel;
+}
+
+/**
+ * Create button for "add a new tab"
+ * @param tabpanel
+ * @param tabliststore
+ */
+function createAddTabButtonTree(bodypanel, tabliststore) {
+ return new Ext.Toolbar.Button({
+ text: 'Add a tab',
+ tooltip: 'add a new tab',
+ handler: function(){
+ Ext.MessageBox.prompt('tab name', 'input the name of new tab',
+ function(btn, text){
+ if( btn == 'ok' ){
+ var newtabidx = cgl.shindig.ui.layout.layoutobj.getTabCount();
+ var newtabid = cgl.shindig.ui.layout.layoutobj.makeTabId(newtabidx);
+
+ /** add this tab to the underlying data structure */
+ cgl.shindig.ui.layout.layoutobj.addNewTab(text, newtabid, newtabidx);
+
+ /** add a gadget card panel */
+ var newpanel = new Ext.Panel({
+ title: text,
+ id: newtabid,
+ height: 1000,
+ layout:'column',
+ listeners:{
+ show: function(){
+ var _id_ = this.getId(); //should be like '_tab_0'
+ var _tabindex_ = cgl.shindig.ui.layout.layoutobj.parseTabId(_id_)[0];
+ var _tabobj_ = cgl.shindig.ui.layout.layoutobj.getTabByIndex(_tabindex_);
+
+ /** setting drop target */
+ for( var i = 0 ; i < _tabobj_.getColumnCount() ; ++i ){
+ var _colid_ = _id_ + '_col_' + i;
+
+ if( cgl.shindig.ui.layout.droptargetrenderedlist[_colid_] != null )
+ continue;
+
+ var setDropTarget = function(_colid_) {
+ if (Ext.get(_colid_) != null) {
+ var dt = new cgl.shindig.ui.dnd.DropTarget(_colid_, {ddGroup: 'group'});
+ cgl.shindig.ui.layout.droptargetrenderedlist[_colid_] = dt;
+ } else {
+ setTimeout(setDropTarget, 1000, _colid_);
+ }
+ }
+ setDropTarget(_colid_);
+ }
+ // cgl.shindig.ui.layout.curactivetabidx = _tabindex_;
+ tabSwitchCallback(_tabindex_);
+ }
+ }//, items:[]
+ });
+
+ /** add column to the new panel */
+ var _tabobj2_ = cgl.shindig.ui.layout.layoutobj.getTabByIndex(newtabidx);
+ for( var i = 0 ; i < _tabobj2_.getColumnCount() ; ++i ){
+ var _colid_ = newtabid + '_col_' + i;
+ newpanel.add({
+ columnWidth: 0.33,
+ height: 1000,
+ // style: 'left:5%;',
+ html: '<div id="'+_colid_+
+ '" style="border: 1px dashed silver;height:auto;"></div>'
+ });
+ }
+
+ tabliststore.loadData(cgl.shindig.ui.layout.layoutobj.getTabNameIdList());
+
+ // change card layout display
+ addCardId(newtabid);
+ var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+ cardLayoutPanel.add(newpanel);
+ // cardLayoutPanel.getLayout().setActiveItem(getCardCount()-1);
+ cardLayoutPanel.getLayout().setActiveItem(newtabid);
+ cardLayoutPanel.doLayout();
+ // cgl.shindig.ui.layout.curactivetabidx =
+ // cgl.shindig.ui.layout.layoutobj.getTabCount() - 1;
+ tabSwitchCallback(cgl.shindig.ui.layout.layoutobj.getTabCount() - 1);
+
+ /** add a node in the tree */
+ var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+ var nodeid = newtabid+cgl.shindig.ui.layout.tree.innernode.idsuffix;
+ var nodeData = {
+ text: text,
+ id: nodeid,
+ leaf: false
+ };
+ addSubNode(nodeData, treePanel.getRootNode());
+ treePanel.selectPath(treePanel.getNodeById(nodeid).getPath());
+
+ adjustCurrentTabPanel();
+ cgl.shindig.ui.layout.layoutobj.markDirty();
+ cgl.shindig.ops.syncLayoutData(false);
+ }
+ });
+ },
+ iconCls: 'blist'
+ });
+}
+
+
+Ext.namespace("cgl.shindig.ui.layout.gadget");
+cgl.shindig.ui.layout.gadget.removecallback = function(gadgetid) {
+ var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+ // var maxGid = gadgetid + "_max_";
+ var maxGid = cgl.shindig.ui.layout.layoutobj.makeGadgetMaxId(gadgetid);
+ var maxGadgetPanel = Ext.getCmp(maxGid);
+ if (maxGadgetPanel != null) {
+ var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+ cardLayoutPanel.remove(maxGadgetPanel);
+ removeCardById(maxGid);
+ }
+ var treeNode = treePanel.getNodeById(gadgetid + cgl.shindig.ui.layout.tree.leafnode.idsuffix);
+ treeNode.remove();
+}
+
+// ****************************************************************************
+// **** Card Internal Data Structure *****
+// ****************************************************************************
+
+// Ids of all cards are stored in global variable
+// cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray.
+// For tab, the id looks like: _tab_0
+// For maximized gadget, the id looks like: _tab_0_col_0_gadget_0_max_
+
+/**
+ * Add id of a new card.
+ * Note: this function does not check whether a card with that id has already
+ * existed.
+ *
+ * @param id
+ */
+function addCardId(id) {
+ var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+ idarray.push(id);
+}
+
+/**
+ * Remove ids that start with value of the parameter *idPrefix*.
+ *
+ * @param idPrefix
+ * @return an array that contains all removed card ids.
+ */
+function removeCardsWithPrefix(idPrefix) {
+ var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+ var removedIds = [];
+ for( var i = 0 ; i < idarray.length ; ++i ) {
+ var idinarray = idarray[i];
+ if(idinarray.indexOf(idPrefix) == 0) {
+ removedIds.push(idinarray);
+ idarray.splice(i, 1);
+ --i;
+ // if(idinarray.lastIndexOf(cgl.shindig.ui.layout.tree.innernode.idsuffix)
+ // == idinarray.length - cgl.shindig.ui.layout.tree.innernode.idsuffix.length) {
+ // var cardId = idinarray.substr(0,
+ // idinarray.length-cgl.shindig.ui.layout.tree.innernode.idsuffix.length);
+ // removedIds.push(cardId);
+ // idarray.splice(i, 1);
+ // --i;
+ // } else if(idinarray.lastIndexOf(cgl.shindig.ui.layout.tree.leafnode.idsuffix)
+ // == idinarray.length - cgl.shindig.ui.layout.tree.leafnode.idsuffix.length) {
+ // var cardId = idinarray.substr(0,
+ // idinarray.length-cgl.shindig.ui.layout.tree.leafnode.idsuffix.length);
+ // cardId = cardId + "_max_";
+ // removedIds.push(cardId);
+ // idarray.splice(i, 1);
+ // --i;
+ // } else {
+ // should not go through here
+ // }
+ }
+ }
+ return removedIds;
+}
+
+/**
+ * Remove a specific id.
+ *
+ * @param id
+ */
+function removeCardById(id) {
+ var idx = getCardIndex(id);
+ if (idx != -1) {
+ var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+ idarray.splice(idx, 1);
+ }
+}
+
+function getCardIdByIndex(idx) {
+ var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+ if (idx > idarray.length -1)
+ return null;
+ return idarray[idx];
+}
+
+/**
+ * Get number of cards.
+ * @return
+ */
+function getCardCount() {
+ var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+ return idarray.length;
+}
+
+/**
+ * Get index of the card whose id is equal to value of parameter *id*.
+ * @param id
+ */
+function getCardIndex(id) {
+ var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+ for( var i = 0 ; i < idarray.length ; ++i ) {
+ var idinarray = idarray[i];
+ if (id == idinarray)
+ return i;
+ }
+ return -1;
+}
+
+/**
+ * Make tree panel and main gadget panel have equal height.
+ */
+function equalHeightAdjust() {
+ var centerid = cgl.shindig.ui.layout.tree.bodyCenterPanelBorder.id;
+ var westid = cgl.shindig.ui.layout.tree.bodyTreePanelBorder.id;
+ var height = Ext.get(centerid).getHeight();
+ var westEl = Ext.get(westid);
+ westEl.setHeight(height)
+}
+
+
+/* ugly workaround for IE which does not fire onload event for script element*/
+/**
+ * These are executed when this script is loaded. gadget-layout.js modifies ishindig.html,
+ * causing this page to be loaded.
+ */
+
+afterLoadData();
+setLayoutUIText();
+setTheme();
Added: incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js
URL: http://svn.apache.org/viewvc/incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js?rev=1087520&view=auto
==============================================================================
--- incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js (added)
+++ incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js Fri Apr 1 00:29:22 2011
@@ -0,0 +1,182 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+Ext.namespace("cgl.shindig.ui");
+
+cgl.shindig.ui.userSettingsTpl = null;
+
+// Build a right SideBar with Settings:
+// Theme
+// -------------- Separator
+// Tab Layout // Text
+// --------------
+// Tab 1 // Button
+// Tab 2
+// ....
+// ...
+
+// On the righ of each of these, build the layout options
+// Columns: 2 columns 3 Columns
+// * Equal Size * Equal Size
+// * First Smaller * First Smaller
+//
+// Save | Cancel
+//
+
+function createTabLayoutForm(tabId) {
+
+ var tab = (tabId == null) ? getLayoutDataObj().getTabByIndex(0) : getLayoutDataObj().getTabById(tabId);
+
+ var form = new Ext.form.FormPanel({
+ xtype: 'form',
+ margins:'10 10 10 10',
+ id: 'userSettingsTabLayoutForm',
+ items: [
+ {
+ margins:'10 10 10 0',
+ xtype: 'label',
+ cls : 'tableHeader',
+ text: tab.getTabName()
+ },
+ {
+ xtype: 'ux-radiogroup',
+ fieldLabel: '2 Columns',
+ name: 'tabLayout',
+ horizontal: false,
+ id: 'twoColumnsRadioGroup',
+ radios:[{
+ value:'50,50',
+ boxLabel: '<img src="images/2_50_50.gif" />',
+ checked: (tab.getRatios() == '50,50')
+ }, {
+ value:'25,75',
+ boxLabel: '<img src="images/2_25_75.gif" />',
+ checked: (tab.getRatios() == '25,75')
+ }]
+ },{
+ xtype: 'ux-radiogroup',
+ fieldLabel: '3 Columns',
+ name: 'tabLayout',
+ horizontal: false,
+ id: 'threeColumnsRadioGroup',
+ radios:[{
+ value:'33,34,33',
+ boxLabel: '<img src="images/3_33_33_33.gif" />',
+ checked: (tab.getRatios() == '33,34,33')
+ }, {
+ value:'25,50,25',
+ boxLabel: '<img src="images/3_25_50_25.gif" />',
+ checked: (tab.getRatios() == '25,50,25')
+ }]
+ },{
+ xtype: 'hidden',
+ value: tab.getTabId(),
+ name: 'userSettingsTabId'
+ },{
+ xtype: 'button',
+ text: 'Update',
+ handler: function() {
+ var cmp = Ext.getCmp("userSettingsTabLayoutForm");
+ var values = cmp.getForm().getValues();
+ getLayoutDataObj().updateTabLayout(values.userSettingsTabId, values.tabLayout.split(",").length, values.tabLayout);
+ cgl.shindig.ops.syncLayoutData(true, function() {window.location.reload()});
+ }
+ }
+ ]
+ });
+
+ return form;
+}
+
+function createUserSettingsWin() {
+ var tabLayoutForm = createTabLayoutForm(null);
+
+ // tabs for the center
+ var tabs = new Ext.Panel({
+ region: 'center',
+ margins:'3 3 3 0',
+ id: 'userSettingsWinPanelCenter',
+ items: [tabLayoutForm]
+ });
+
+
+ var layoutTabs = [];
+ var tabIds = getLayoutDataObj().getTabNameIdList();
+ for(var i = 0; i < tabIds.length; i++) {
+ var atab = getLayoutDataObj().getTabById(tabIds[i][0]);
+ layoutTabs.push({
+ text: atab.getTabName(),
+ leaf: true,
+ tabId: atab.getTabId()
+ });
+ }
+
+ // Panel for the west
+ var nav = new Ext.Panel({
+ region: 'west',
+ split: true,
+ width: 200,
+ collapsible: true,
+ margins:'3 0 3 3',
+ cmargins:'3 3 3 3',
+ id: 'userSettingsWinPanelWest',
+ items: [{
+ id: "userSettingsTabTreePanel",
+ collapsible: false,
+ title: 'Tabs',
+ xtype: 'treepanel',
+ width: 200,
+ autoScroll: true,
+ split: true,
+ loader: new Ext.tree.TreeLoader(),
+ root: new Ext.tree.AsyncTreeNode({
+ expanded: true,
+ children: layoutTabs
+ }),
+ rootVisible: false,
+ listeners: {
+ click: function(e) {
+ var panel = Ext.getCmp("userSettingsWinPanelCenter");
+ panel.remove("userSettingsTabLayoutForm");
+ panel.add(createTabLayoutForm(e.attributes.tabId));
+ panel.doLayout();
+ }
+ }
+ }]
+
+ });
+
+ var win = new Ext.Window({
+ title: 'User Settings',
+ closable:true,
+ width:600,
+ height:350,
+ //border:false,
+ plain:true,
+ layout: 'border',
+ id: 'userSettingsTabLayoutWin',
+
+ items: [nav, tabs]
+ });
+
+ return win;
+}
+
Added: incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js
URL: http://svn.apache.org/viewvc/incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js?rev=1087520&view=auto
==============================================================================
--- incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js (added)
+++ incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js Fri Apr 1 00:29:22 2011
@@ -0,0 +1,194 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+Ext.namespace("cgl.shindig.ui");
+
+cgl.shindig.ui.userinfotpl = null;
+
+function initUserInfoTpl(){
+ if( cgl.shindig.ui.userinfotpl != null )
+ return;
+ var sntpl = new Ext.Template('{screenname}');
+ sntpl.compile();
+ var dobyeartpl = new Ext.Template('{dobyear}');
+ dobyeartpl.compile();
+ var dobmonthtpl = new Ext.Template('{dobmonth}');
+ dobmonthtpl.compile();
+ var dobdaytpl = new Ext.Template('{dobday}');
+ dobdaytpl.compile();
+ var emailtpl = new Ext.Template('{email}');
+ emailtpl.compile();
+ var pwdtpl = new Ext.Template('{password}');
+ pwdtpl.compile();
+ var fntpl = new Ext.Template('{firstname}');
+ fntpl.compile();
+ var lntpl = new Ext.Template('{lastname}');
+ lntpl.compile();
+ var languagetpl = new Ext.Template('{language}');
+ languagetpl.compile();
+ var timezonetpl = new Ext.Template('{timezone}');
+ timezonetpl.compile();
+ var gendertpl = new Ext.Template('{gender}');
+ gendertpl.compile();
+ var zipcodetpl = new Ext.Template('{zipcode}');
+ zipcodetpl.compile();
+ var openidtpl = new Ext.Template('{openid}');
+ openidtpl.compile();
+ var layoutdatatpl = new Ext.Template('{layoutdata}');
+ layoutdatatpl.compile();
+
+ cgl.shindig.ui.userinfotpl = {
+ sntpl : sntpl,
+ dobdaytpl : dobdaytpl,
+ dobmonthtpl : dobmonthtpl,
+ dobyeartpl : dobyeartpl,
+ emailtpl : emailtpl,
+ pwdtpl : pwdtpl,
+ fntpl : fntpl,
+ lntpl : lntpl,
+ languagetpl : languagetpl,
+ timezonetpl : timezonetpl,
+ gendertpl : gendertpl,
+ zipcodetpl : zipcodetpl,
+ openidtpl : openidtpl,
+ layoutdatatpl : layoutdatatpl
+ };
+}
+initUserInfoTpl();
+
+// *****************************************************************
+// Create user info form panel
+// *****************************************************************
+function createUserInfoForm(){
+ return new Ext.form.FormPanel({
+ xtype: 'form',
+ bodyStyle: 'padding:5px 5px 0',
+ labelWidth: 100,
+ border: false,
+ frame: true,
+ defaults: { width: '90%' },
+ onSubmit: Ext.emptyFn,
+ items: [{
+ xtype: 'field',
+ fieldLabel: 'Screen name',
+ name: 'screenname',
+ id: 'userinfo_sn'
+ },{
+ xtype: 'field',
+ fieldLabel: 'Password',
+ name: 'password',
+ id: 'userinfo_pwd'
+ },createDOBCombos(), {
+ xtype: 'field',
+ fieldLabel: 'First Name',
+ name: 'firstname',
+ id: 'userinfo_fn'
+ },{
+ xtype: 'field',
+ fieldLabel: 'Last name',
+ name: 'lastname',
+ id: 'userinfo_ln'
+ }, createLangCombo(),
+ createTimeZoneCombo(),{
+ xtype: 'field',
+ fieldLabel: 'Email',
+ name: 'email',
+ id: 'userinfo_email'
+ },{
+ xtype: 'ux-radiogroup',
+ fieldLabel: 'Gender',
+ name: 'gender',
+ horizontal: true,
+ id: 'userinfo_gender',
+ radios:[{
+ value:'F',
+ boxLabel:'Female' //optional
+ }, {
+ value:'M',
+ boxLabel:'Male' //optional
+ }]
+ },{
+ xtype: 'field',
+ fieldLabel: 'Zip code',
+ name: 'zipcode',
+ id: 'userinfo_zipcode'
+ },{
+ xtype: 'field',
+ fieldLabel: 'Openid',
+ name: 'openid',
+ id: 'userinfo_openid'
+ },{
+ xtype: 'textarea',
+ fieldLabel: 'Layout data',
+ name: 'layoutdata',
+ grow: true,
+ id: 'userinfo_layoutdata',
+ listeners: {
+ afterrender: function(comp) {
+ comp.getEl().dom.spellcheck=false;
+ alert("ddd");
+ }
+ }
+ }
+ ]
+ });
+}
+
+/**
+ * set the various fileds in the user info panel
+ * @param tpl field value templates
+ * @param userobj an object which includes user information.
+ * @param getFormPanel function which returns user info form panel.
+ * @return none
+ */
+function setUserInfoFields(tpl, userobj, getFormPanel){
+ var formpanel = getFormPanel();
+ var el;
+ el = formpanel.findById('userinfo_sn');
+ el.setValue( tpl.sntpl.apply(userobj) );
+ el = formpanel.findById('userinfo_dob_year');
+ el.setValue( tpl.dobyeartpl.apply(userobj) );
+ el = formpanel.findById('userinfo_dob_month');
+ el.setValue( tpl.dobmonthtpl.apply(userobj) );
+ el = formpanel.findById('userinfo_dob_day');
+ el.setValue( tpl.dobdaytpl.apply(userobj) );
+ el = formpanel.findById('userinfo_email');
+ el.setValue( tpl.emailtpl.apply(userobj) );
+ el = formpanel.findById('userinfo_pwd');
+ el.setValue( tpl.pwdtpl.apply(userobj) );
+ el = formpanel.findById('userinfo_fn');
+ el.setValue( tpl.fntpl.apply(userobj) );
+ el = formpanel.findById('userinfo_ln');
+ el.setValue( tpl.lntpl.apply(userobj) );
+ el = formpanel.findById('userinfo_language');
+ el.setValue( tpl.languagetpl.apply(userobj) );
+ el = formpanel.findById('userinfo_timezone');
+ el.setValue( tpl.timezonetpl.apply(userobj) );
+ el = formpanel.findById('userinfo_zipcode');
+ el.setValue( tpl.zipcodetpl.apply(userobj) );
+ el = formpanel.findById('userinfo_gender');
+ el.setValue(tpl.gendertpl.apply(userobj) );
+ el = formpanel.findById('userinfo_openid');
+ el.setValue(tpl.openidtpl.apply(userobj) );
+ el = formpanel.findById('userinfo_layoutdata');
+ el.setValue(tpl.layoutdatatpl.apply(userobj));
+};
+