Author: Alex.Kolonitsky Date: 2010-07-07 07:20:44 -0400 (Wed, 07 Jul 2010) New Revision: 17753 Added: root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/ root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/ root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanel.js root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanelItem.js Log: RF-8745 TogglePanel component Added: root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanel.js =================================================================== --- root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanel.js (rev 0) +++ root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanel.js 2010-07-07 11:20:44 UTC (rev 17753) @@ -0,0 +1,377 @@ +/* + * JBoss, Home of Professional Open Source + * Copyright ${year}, Red Hat, Inc. and individual contributors + * by the @authors tag. See the copyright.txt in the distribution for a + * full listing of individual contributors. + * + * This is free software; you can redistribute it and/or modify it + * under the terms of the GNU Lesser General Public License as + * published by the Free Software Foundation; either version 2.1 of + * the License, or (at your option) any later version. + * + * This software 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 + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this software; if not, write to the Free + * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA + * 02110-1301 USA, or see the FSF site: http://www.fsf.org. + */ + +(function ($, rf) { + + /***************************** Stuff ******************************************************************************/ + rf.ui = rf.ui || {}; + + /***************************** Constructor definition *************************************************************/ + var DEFAULT_OPTIONS = { + }; + + /** + * @class TogglePanel + * @name TogglePanel + * + * @constructor + * @param {String} componentId - component id + * @param {Hash} options - params + * */ + rf.ui.TogglePanel = function(componentId, options) { + // call constructor of parent class + $super.constructor.call(this, componentId); + $p.attachToDom.call(this, componentId); + this.options = $.extend({}, DEFAULT_OPTIONS, options); + + this.selectedItem = this.options.selectedItem; + this.switchMode = this.options.switchMode; + this.items = this.options.items; + }; + + var $p = {}; + + // Extend component class and add protected methods from parent class to our container + $p = rf.BaseComponent.extend(rf.BaseComponent, rf.ui.TogglePanel, $p); + + var $super = rf.ui.TogglePanel.$super; + + /***************************** Private Static Methods *************************************************************/ + + /** + * Fire Concealable Event + * */ + function fireBeforeItemChange ($this, oldItem, newItem) { + return rf.Event.fireById($this.id, "beforeitemchange", { + id: $this.id, + oldItem : oldItem, + newItem : newItem + }); + } + + function fireItemChange ($this, oldItem, newItem) { + return new rf.Event.fireById($this.id, "itemchange", { + id: $this.id, + oldItem : oldItem, + newItem : newItem + }); + } + + + function getEventHandler() {} + + /***************************** Public Methods ********************************************************************/ + $.extend(rf.ui.TogglePanel.prototype, (function () { + return { + // class name + name:"TogglePanel", + + // public api + /** + * @methodOf + * @name TogglePanel#getSelectItem + * + * @return {String} name of current selected panel item + */ + getSelectItem: function () { + return this.selectedItem; + }, + + getValueInputId: function () { + return this.id + "-value" + }, + + /** + * @methodOf + * @name TogglePanel#switchToItem + * + * @param {String} name - panel item name to switch + * @return {Boolean} - always false + */ + switchToItem: function (name) { + var oldPanel = this.getItemByName(this.getSelectItem()); + var newPanel = name ? this.getItemByName(name) + : this.getItem(this.nextItem()); + + var continueProcess = fireBeforeItemChange(this, oldPanel, newPanel); + if (!continueProcess) { + return false + } + + this.switchItems(oldPanel, newPanel); + + return false; + }, + + setSelectedItem : function (name) { + rf.getDomElement(this.getValueInputId()).value = name; + this.selectedItem = name; + }, + + /** + * @param {TogglePanelItem} oldPanel + * @param {TogglePanelItem} newPanel + * + * @return {void} + * */ + switchItems : function (oldPanel, newPanel) { + if (this.switchMode == "server") { + return this.switchItems_server(oldPanel, newPanel); + } else if (this.switchMode == "ajax") { + return this.switchItems_ajax(oldPanel, newPanel); + } else if (this.switchMode == "client") { + return this.switchItems_client(oldPanel, newPanel); + } else { + rf.log.error("TogglePanel.switchItems : unknown switchMode (" + this.switchMode + ")"); + } + }, + + /** + * @param {TogglePanelItem} oldPanel + * @param {TogglePanelItem} newPanel + * + * @return {void} + * */ + switchItems_server : function (oldPanel, newPanel) { + var continueProcess = oldPanel.leave(); + if (!continueProcess) { + return false; + } + + this.setSelectedItem(newPanel.getName()); + + rf.submitForm(this.getParentForm(), null, this.getParameters(newPanel)); + + return false; + }, + + getParentForm : function () { + return $(RichFaces.getDomElement(this.id)).parent('form'); + }, + + getParameters : function (newPanel) { + return {"parameters" : this.getServerParams(newPanel)}; + }, + + getServerParams : function (newPanel) { + var params = {}; +// params[this.getValueInputId()] = newPanel.getName(); + + return params; + }, + + /** + * @param {TogglePanelItem} oldPanel + * @param {TogglePanelItem} newPanel + * + * @return {undefined} + * */ + switchItems_ajax : function (oldPanel, newPanel) { + var options = $.extend({}, this.options["ajax"], {}/*this.getParameters(newPanel)*/); + + this.setSelectedItem(newPanel.getName()); + rf.ajax(this.id, null, options); + this.setSelectedItem(oldPanel.getName()); + + return false; + }, + + /** + * please, remove this method when client side ajax events will be added + * + * */ + onCompleteHandler : function (oldItemName, newItemName) { + var oldItem = this.getItemByName(oldItemName); + var newItem = this.getItemByName(newItemName); + + this.switchItems_client(oldItem, newItem); + }, + + /** + * @param {TogglePanelItem} oldPanel + * @param {TogglePanelItem} newPanel + * + * @return {undefined} false - if process has been terminated + * */ + switchItems_client : function (oldPanel, newPanel) { + var continueProcess = oldPanel.leave(); + if (!continueProcess) { + return false; + } + + this.setSelectedItem(newPanel.getName()); + + newPanel.enter(); + fireItemChange(this, oldPanel, newPanel); + }, + + + + /** + * @methodOf + * @name TogglePanel#getItems + * + * @return {TogglePanelItem[]} all defined panel items + */ + getItems : function () { + return this.items; + }, + + /** + * @methodOf + * @name TogglePanel#getItemsNames + * + * @return {String[]} names of all defined items + */ + getItemsNames: function () { + var res = []; + for (var item in this.items) { + res.push(this.items[item].getName()); + } + + return res; + }, + + /** + * @methodOf + * @name TogglePanel#nextItem + * + * @param {String} [itemName = selectedItem] + * @return {String} name of next panel item + */ + nextItem: function (itemName) { + return this.getItemName(this.getItemIndex(itemName) + 1); + }, + + /** + * @methodOf + * @name TogglePanel#firstItem + * + * @return {String} name of first panel item + */ + firstItem: function () { + return this.getItemName(0); + }, + + /** + * @methodOf + * @name TogglePanel#lastItem + * + * @return {String} name of last panel item + */ + lastItem: function () { + return this.getItemName(this.items.length - 1); + }, + + /** + * @methodOf + * @name TogglePanel#prevItem + * + * @param {String} [itemName = selectedItem] + * @return {String} name of prev panel item + */ + prevItem: function (itemName) { + var itemIndex = this.getItemIndex(itemName); + if (itemIndex == -1) { + return this.firstItem(); + } + return this.getItemName((this.items.length + itemIndex - 1) % this.items.length); + }, + + + + // event handlers + /** + * @methodOf + * @name TogglePanel#oncomplete + */ + oncomplete: function () { + // TODO implement + }, + + /** + * @methodOf + * @name TogglePanel#onbeforedomupdate + */ + onbeforedomupdate: function () { + // TODO implement + }, + + /** + * @methodOf + * @name TogglePanel#onitemchange + */ + onitemchange: function () { + // TODO implement + }, + + /** + * @methodOf + * @name TogglePanel#onitemchanged + */ + onitemchanged: function () { + // TODO implement + }, + + // private methods + getItemName : function (index) { + return this.getItem(index).getName(); + }, + + getItemByName : function (name) { + return this.getItem(this.getItemIndex(name)); + }, + + getItemIndex : function (itemName) { + var name = itemName || this.selectedItem; + for (var i = 0; i < this.items.length; i++) { + if (this.items[i].getName() === name) { + return i; + } + } + + rf.log.warn("TogglePanel.getItemIndex: item with name '" + itemName + "' not found"); + return -1; + }, + + /** + * @param {Number} index - array index + * + * @return {TogglePanelItem} + * */ + getItem : function (index) { + if (index >= this.items.length || index < 0) { + return this.items[0]; + } else { + return this.items[index] + } + }, + + // class stuff + destroy: function () { + // rf.Event.unbindById(this.options.buttonId, "."+this.namespace); + // rf.Event.unbindById(this.componentId, "."+this.namespace); + // $super.destroy.call(this); + } + }; + })()); +})(jQuery, RichFaces); Added: root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanelItem.js =================================================================== --- root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanelItem.js (rev 0) +++ root/ui-sandbox/panels/trunk/ui/src/main/resources/META-INF/resources/script/TogglePanelItem.js 2010-07-07 11:20:44 UTC (rev 17753) @@ -0,0 +1,99 @@ +/* + * JBoss, Home of Professional Open Source + * Copyright ${year}, Red Hat, Inc. and individual contributors + * by the @authors tag. See the copyright.txt in the distribution for a + * full listing of individual contributors. + * + * This is free software; you can redistribute it and/or modify it + * under the terms of the GNU Lesser General Public License as + * published by the Free Software Foundation; either version 2.1 of + * the License, or (at your option) any later version. + * + * This software 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 + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this software; if not, write to the Free + * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA + * 02110-1301 USA, or see the FSF site: http://www.fsf.org. + */ + +(function ($, rf) { + + /***************************** Stuff ******************************************************************************/ + rf.ui = rf.ui || {}; + + /***************************** Constructor definition *************************************************************/ + var DEFAULT_OPTIONS = { + }; + + rf.ui.TogglePanelItem = function(componentId, options) { + // call constructor of parent class + $super.constructor.call(this, componentId); + $p.attachToDom.call(this, componentId); + this.options = $.extend({}, DEFAULT_OPTIONS, options); + + this.name = this.options.name; + this.switchMode = this.options.switchMode; + }; + + // Extend component class and add protected methods from parent class to our container + var $p = rf.BaseComponent.extend(rf.BaseComponent, rf.ui.TogglePanelItem, {}); + + // define super class link + var $super = rf.ui.TogglePanelItem.$super; + + /***************************** Private Static Methods *************************************************************/ + + function fireLeave ($this) { + return rf.Event.fireById($this.id, "leave"); + } + + function fireEnter ($this) { + return rf.Event.fireById($this.id, "enter"); + } + + /***************************** Public Methods ********************************************************************/ + $.extend(rf.ui.TogglePanelItem.prototype, (function () { + return { + // class name + name:"TogglePanelItem", + + // public api + /** + * @methodOf + * @name TogglePanelItem#getName + * + * @return {String} panel item name + */ + getName: function () { + return this.options.name; + }, + + enter : function () { + rf.getDomElement(this.id).style.display = "block"; + + return fireEnter(this); + }, + + leave : function () { + var continueProcess = fireLeave(this); + if (!continueProcess) { + return false; + } + + rf.getDomElement(this.id).style.display = "none"; + return true; + }, + + // class stuff + destroy: function () { +// rf.Event.unbindById(this.options.buttonId, "."+this.namespace); +// rf.Event.unbindById(this.componentId, "."+this.namespace); + $super.destroy.call(this); + } + }; + })()); +})(jQuery, RichFaces);