extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-08-18 04:20:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

- Use a queue to buffer property updates

Browse Source 
- Better support for dropping application entries on Home portlet area
- Add a portlet that shows a list of entries, supports dropping into the list
This commit is contained in:
Nathan Gray
2013-05-29 19:25:12 +00:00
parent fdfae8dd92
commit 5fea4ed9a5
6 changed files with 391 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
home/js/app.js
View File

@@ -1,10 +1,10 @@
/**
* EGroupware - Filemanager - Javascript UI
* EGroupware - Home - Javascript UI
*
* @link http://www.egroupware.org
* @package filemanager
* @author Ralf Becker <RalfBecker-AT-outdoor-training.de>
* @copyright (c) 2008-13 by Ralf Becker <RalfBecker-AT-outdoor-training.de>
* @package home
* @author Nathan Gray
* @copyright (c) 2013 Nathan Gray
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @version $Id$
*/
@@ -14,7 +14,6 @@
/*egw:uses
jquery.jquery;
jquery.jquery-ui;
/phpgwapi/js/jquery/shapeshift/core/jquery.shapeshift.js;
/phpgwapi/js/jquery/gridster/jquery.gridster.js;
*/
@@ -25,7 +24,7 @@
*
*
* Uses Gridster for the grid layout
* @see https://github.com/dustmoo/gridster.js
* @see http://gridster.net
* @augments AppJS
*/
app.home = AppJS.extend(
@@ -35,6 +34,19 @@ app.home = AppJS.extend(
*/
appname: "home",
/**
* Grid resolution. Must match et2_portlet GRID
*/
GRID: 50,
/**
* Default size for new portlets
*/
DEFAULT: {
WIDTH: 2,
HEIGHT: 1
},
/**
* Constructor
*
@@ -93,12 +105,12 @@ app.home = AppJS.extend(
* Add a new portlet from the context menu
*/
add: function(action) {
var attrs = {id: this._create_id(), class: action.id};
var attrs = {id: this._create_id()};
var portlet = et2_createWidget('portlet',attrs, this.portlet_container);
portlet.loadingFinished();
// Get actual attributes & settings, since they're not available client side yet
portlet._process_edit(et2_dialog.OK_BUTTON, {});
portlet._process_edit(et2_dialog.OK_BUTTON, {class: action.id});
// Set up sorting/grid of new portlet
var $portlet_container = $j(this.portlet_container.getDOMNode());
@@ -111,7 +123,25 @@ app.home = AppJS.extend(
* User dropped something on home. Add a new portlet
*/
add_from_drop: function(action,source,target_action) {
var attrs = {id: this._create_id(), class: action.id};
// Actions got confused drop vs popup
if(source[0].id == 'portlets')
{
return this.add(action);
}
var $portlet_container = $j(this.portlet_container.getDOMNode());
// Basic portlet attributes
var attrs = {id: this._create_id()};
// Try to find where the drop was
if(action != null && action.ui && action.ui.position)
{
attrs.row = Math.round((action.ui.offset.top - $portlet_container.offset().top )/ this.GRID);
attrs.col = Math.max(0,Math.round((action.ui.offset.left - $portlet_container.offset().left) / this.GRID)-1);
}
var portlet = et2_createWidget('portlet',attrs, this.portlet_container);
portlet.loadingFinished();
@@ -121,14 +151,14 @@ app.home = AppJS.extend(
{
if(source[i].id) drop_data.push(source[i].id);
}
portlet._process_edit(et2_dialog.OK_BUTTON, {dropped_data: drop_data});
portlet._process_edit(et2_dialog.OK_BUTTON, {dropped_data: drop_data, class: action.id.substr(5)});
// Set up sorting/grid of new portlet
var $portlet_container = $j(this.portlet_container.getDOMNode());
$portlet_container.data("gridster").add_widget(
portlet.getDOMNode()
portlet.getDOMNode(),
this.DEFAULT.WIDTH, this.DEFAULT.HEIGHT,
attrs.col, attrs.row
);
console.log(this,arguments);
},
/**
@@ -156,6 +186,14 @@ app.home = AppJS.extend(
egw().open(widget.options.settings.entry, "", 'edit');
},
/**
* For list_portlet - adds a new link
* This is needed here so action system can find it
*/
add_link: function(action,source,target_action) {
this.List.add_link(action, source, target_action);
},
/**
* Set up the drag / drop / re-order of portlets
*/
@@ -164,13 +202,11 @@ app.home = AppJS.extend(
$portlet_container
.addClass("home ui-helper-clearfix")
.disableSelection()
/* Shapeshift
.shapeshift();
*/
/* Gridster */
.gridster({
widget_selector: 'div.et2_portlet',
widget_base_dimensions: [45, 45],
// Dimensions + margins = grid spacing
widget_base_dimensions: [this.GRID-5, this.GRID-5],
widget_margins: [5,5],
extra_rows: 1,
extra_cols: 1,
@@ -205,13 +241,13 @@ app.home = AppJS.extend(
var widget = window.app.home.portlet_container.getWidgetById(changed[key].id);
if(!widget || widget == window.app.home.portlet_container) continue;
egw().json("home.home_ui.ajax_set_properties",[widget.id, widget.options.settings,{
egw().jsonq("home.home_ui.ajax_set_properties",[widget.id, widget.options.settings,{
row: changed[key].row,
col: changed[key].col
}],
null,
widget, true, widget
).sendRequest();
);
}
}
}
@@ -224,8 +260,8 @@ app.home = AppJS.extend(
.on("resizestop", function(event, ui) {
$portlet_container.data("gridster").resize_widget(
ui.element,
Math.round(ui.size.width / 50),
Math.round(ui.size.height / 50)
Math.round(ui.size.width / this.GRID),
Math.round(ui.size.height / this.GRID)
);
});
},
@@ -243,5 +279,109 @@ app.home = AppJS.extend(
}
while(this.portlet_container.getWidgetById(id));
return id;
},
/**
* Functions for the list portlet
*/
List:
{
/**
* List uses mostly JS to generate its content, so we just do it on the JS side by
* returning a call to this function as the HTML content.
*
* @param id String The ID of the portlet
* @param list_values Array List of information passed to the link widget
*/
set_content: function(id, list_values)
{
var portlet = app.home.portlet_container.getWidgetById(id);
if(portlet != null)
{
var list = portlet.getWidgetById(id+'-list');
if(list)
{
// List was just rudely pulled from DOM by the call to HTML, put it back
portlet.content.append(list.getDOMNode());
}
else
{
// Create widget
list = et2_createWidget('link-list', {id: id+'-list'}, portlet);
list.doLoadingFinished();
// Abuse link list by overwriting delete handler
list._delete_link = app.home.List.delete_link;
}
list.set_value(list_values);
// Disable link list context menu
$j('tr',list.list).unbind('contextmenu');
// Allow scroll bars
portlet.content.css('overflow', 'auto');
}
},
/**
* For list_portlet - opens a dialog to add a new entry to the list
*/
add_link: function(action, source, target_action) {
// Actions got confused drop vs popup
if(source[0].id == 'portlets')
{
return this.add_link(action);
}
// Get widget
var widget = null;
while(action.parent != null)
{
if(action.data && action.data.widget)
{
widget = action.data.widget;
break;
}
action = action.parent;
}
if(typeof source == undefined)
{
var link = et2_createWidget('link-entry', {label: egw.lang('Add')}, this.portlet_container);
var dialog = et2_dialog.show_dialog(
function(button_id) {
widget._process_edit(button_id,{list: widget.options.settings.list || {}, add: link.getValue()});
link.destroy();
},
'Add',
egw.lang('Add'), {},
et2_dialog.BUTTONS_OK_CANCEL
);
dialog.set_message(link.getDOMNode());
}
else
{
// Drag'n'dropped something on the list - just send action IDs
var drop_data = [];
for(var i = 0; i < source.length; i++)
{
if(source[i].id) drop_data.push(source[i].id);
}
widget._process_edit(et2_dialog.BUTTONS_OK_CANCEL,{
list: widget.options.settings.list || {},
dropped_data: drop_data
});
}
},
/**
* Remove a link from the list
*/
delete_link: function(undef, row) {
// Quick response
row.slideUp(row.remove);
// Actual removal
this._parent.options.settings.list.splice(row.index(), 1);
this._parent._process_edit(et2_dialog.OK_BUTTON,{list: this._parent.options.settings.list || {}});
}
}
});