forked from extern/egroupware
Link widget with async file upload + linking
This commit is contained in:
Nathan Gray
parent
312fcf2e0b
commit
89991ffb60
@ -91,6 +91,31 @@ error_log("$app, $pattern, $options");
|
||||
$response->data($links);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create links
|
||||
*/
|
||||
public static function ajax_link($app, $id, Array $links) {
|
||||
// Files need to know full path in tmp directory
|
||||
foreach($links as &$link) {
|
||||
if($link['app'] == egw_link::VFS_APPNAME) {
|
||||
if (is_dir($GLOBALS['egw_info']['server']['temp_dir']) && is_writable($GLOBALS['egw_info']['server']['temp_dir']))
|
||||
{
|
||||
$path = $GLOBALS['egw_info']['server']['temp_dir'] . '/' . $link['id'];
|
||||
}
|
||||
else
|
||||
{
|
||||
$path = $link['id'].'+';
|
||||
}
|
||||
$link['tmp_name'] = $path;
|
||||
$link['id'] = $link;
|
||||
}
|
||||
}
|
||||
$result = egw_link::link($app, $id, $links);
|
||||
|
||||
$response = egw_json_response::get();
|
||||
$response->data($result !== false);
|
||||
}
|
||||
|
||||
public function get_links($value) {
|
||||
|
||||
$app = $value['to_app'];
|
||||
|
||||
@ -48,6 +48,10 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
this.div = null;
|
||||
this.search = null;
|
||||
this.app_select = null;
|
||||
this.link_button = null;
|
||||
this.status_span = null;
|
||||
this.comment = null;
|
||||
this.file_upload = null;
|
||||
|
||||
this.cache = {};
|
||||
|
||||
@ -61,20 +65,35 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
this.search.autocomplete("destroy");
|
||||
this.search = null;
|
||||
this.app_select = null;
|
||||
this.link_button = null;
|
||||
this.status_span = null;
|
||||
this.comment = null;
|
||||
this.file_upload.destroy();
|
||||
this.file_upload = null;
|
||||
},
|
||||
|
||||
this.createInputWidget();
|
||||
/**
|
||||
* Override to provide proper node for file widget to go in
|
||||
*/
|
||||
getDOMNode: function(_sender) {
|
||||
if(_sender == this) {
|
||||
return this.div[0];
|
||||
} else {
|
||||
return this.file_div[0];
|
||||
}
|
||||
},
|
||||
|
||||
createInputWidget: function() {
|
||||
var self = this;
|
||||
this.div = $j(document.createElement("div"));
|
||||
this.div = $j(document.createElement("div")).addClass("et2_link_to");
|
||||
|
||||
// Application selection
|
||||
this.app_select = $j(document.createElement("select")).appendTo(this.div)
|
||||
.change(function(e) {
|
||||
self.cache = {}; // Clear cache when app changes
|
||||
self.options.value.app = this.val();
|
||||
});
|
||||
self.options.value.app = self.app_select.val();
|
||||
})
|
||||
.css("width","39%");
|
||||
for(var key in this.options.select_options) {
|
||||
var option = $j(document.createElement("option"))
|
||||
.attr("value", key)
|
||||
@ -84,7 +103,9 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
self.options.value.app = this.app_select.val();
|
||||
|
||||
// Search input
|
||||
this.search = $j(document.createElement("input")).attr("type", "search").appendTo(this.div);
|
||||
this.search = $j(document.createElement("input")).attr("type", "search")
|
||||
.css("width","50%")
|
||||
.appendTo(this.div);
|
||||
|
||||
// Link button
|
||||
this.link_button = $j(document.createElement("button"))
|
||||
@ -92,8 +113,19 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
.appendTo(this.div).hide()
|
||||
.click(this, this.createLink);
|
||||
|
||||
this.set_blur(this.blur ? this.blur : egw.lang("search"));
|
||||
this.set_blur(this.options.blur ? this.options.blur : egw.lang("search"), this.search);
|
||||
|
||||
// Span for indicating status
|
||||
this.status_span = $j(document.createElement("span"))
|
||||
.appendTo(this.div).addClass("status").hide();
|
||||
|
||||
// Link comment field
|
||||
this.comment = $j(document.createElement("input"))
|
||||
.css("display", "block").css("width","89%")
|
||||
.appendTo(this.div).hide();
|
||||
this.set_blur(egw.lang("Comment..."),this.comment);
|
||||
|
||||
// Autocomplete
|
||||
this.search.autocomplete({
|
||||
source: function(request, response) { return self.query(request, response);},
|
||||
select: function(event, item) { event.data = self; self.select(event,item); return false;},
|
||||
@ -105,9 +137,31 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
minLength: self.minimum_characters,
|
||||
disabled: self.options.disabled
|
||||
});
|
||||
|
||||
// Need a div for file upload widget
|
||||
this.file_div = $j(document.createElement("div")).appendTo(this.div);
|
||||
|
||||
this.setDOMNode(this.div[0]);
|
||||
},
|
||||
|
||||
doLoadingFinished: function() {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
var self = this;
|
||||
|
||||
// File upload
|
||||
var file_attrs = {
|
||||
multiple: true,
|
||||
id: this.id + '_file',
|
||||
onFinish: function(event, file_count) {
|
||||
self.filesUploaded(event);
|
||||
}
|
||||
};
|
||||
this.file_upload = et2_createWidget("file", file_attrs,this);
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
transformAttributes: function(_attrs) {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
@ -132,17 +186,22 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
return this.options.value;
|
||||
},
|
||||
|
||||
set_blur: function(_value) {
|
||||
set_blur: function(_value, input) {
|
||||
if(typeof input == 'undefined') input = this.search;
|
||||
|
||||
if(_value) {
|
||||
this.search.attr("placeholder", _value); // HTML5
|
||||
if(!this.search[0].placeholder) {
|
||||
input.attr("placeholder", _value); // HTML5
|
||||
if(!input[0].placeholder) {
|
||||
// Not HTML5
|
||||
if(this.search.val() == "") this.search.val(this.options.blur);
|
||||
this.search.focus(this,function(e) {
|
||||
if(e.data.search.val() == e.data.options.blur) e.data.search.val("");
|
||||
}).blur(this, function(e) {
|
||||
if(e.data.search.val() == "") e.data.search.val(e.data.options.blur);
|
||||
if(input.val() == "") input.val(this.options.blur);
|
||||
input.focus(input,function(e) {
|
||||
var placeholder = _value;
|
||||
if(e.data.val() == placeholder) e.data.val("");
|
||||
}).blur(input, function(e) {
|
||||
var placeholder = _value;
|
||||
if(e.data.val() == "") e.data.val(placeholder);
|
||||
});
|
||||
if(input.val() == "") input.val(_value);
|
||||
}
|
||||
} else {
|
||||
this.search.removeAttr("placeholder");
|
||||
@ -173,6 +232,7 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
event.data.options.value.id = selected.item.value;
|
||||
event.data.search.val(selected.item.label);
|
||||
event.data.link_button.show();
|
||||
event.data.comment.show();
|
||||
},
|
||||
|
||||
/**
|
||||
@ -188,12 +248,86 @@ var et2_link_to = et2_inputWidget.extend({
|
||||
this.response(result);
|
||||
},
|
||||
|
||||
/**
|
||||
* User uploaded some files, and they're done
|
||||
*/
|
||||
filesUploaded: function(event) {
|
||||
var self = this;
|
||||
|
||||
this.link_button.show();
|
||||
this.comment.hide();
|
||||
|
||||
// Add some comment fields
|
||||
this.file_upload.progress.children().each(function() {
|
||||
var comment = jQuery(document.createElement("input"))
|
||||
.appendTo(this).hide();
|
||||
self.set_blur(egw.lang("Comment..."),comment);
|
||||
|
||||
var comment_icon = jQuery(document.createElement("span"))
|
||||
.appendTo(this)
|
||||
.addClass("ui-icon ui-icon-comment")
|
||||
.click(function() {comment_icon.hide(); comment.toggle();})
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a link using the current internal values
|
||||
*/
|
||||
createLink: function(event) {
|
||||
console.info("Link: ",event.data.options.value);
|
||||
event.data.link_button.hide();
|
||||
// Hide extra controls
|
||||
event.data.link_button.attr("disabled", true);
|
||||
|
||||
var values = event.data.options.value;
|
||||
var self = event.data;
|
||||
|
||||
var links = [];
|
||||
|
||||
// Links to other entries
|
||||
if(values.id) {
|
||||
links.push({
|
||||
app: values.app,
|
||||
id: values.id,
|
||||
remark: self.comment.val()
|
||||
});
|
||||
self.comment.val("");
|
||||
self.search.val("");
|
||||
}
|
||||
|
||||
// Files
|
||||
for(var file in self.file_upload.options.value) {
|
||||
|
||||
links.push({
|
||||
app: 'file',
|
||||
id: file,
|
||||
name: self.file_upload.options.value[file].name,
|
||||
type: self.file_upload.options.value[file].type,
|
||||
remark: jQuery("li[file='"+self.file_upload.options.value[file].name+"'] > input", self.file_upload.progress)
|
||||
.filter(function() { return jQuery(this).attr("placeholder") != jQuery(this).val();}).val()
|
||||
});
|
||||
}
|
||||
|
||||
var request = new egw_json_request("etemplate_widget_link::ajax_link::etemplate",
|
||||
[values.to_app, values.to_id, links],
|
||||
this
|
||||
);
|
||||
request.sendRequest(true, self._link_result, self);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sent some links, server has a result
|
||||
*/
|
||||
_link_result: function(success) {
|
||||
if(success) {
|
||||
this.comment.hide();
|
||||
this.link_button.hide().attr("disabled", false);
|
||||
this.status_span.fadeIn().delay(1000).fadeOut();
|
||||
delete this.options.value.app;
|
||||
delete this.options.value.id;
|
||||
for(var file in this.file_upload.options.value) {
|
||||
delete this.file_upload.options.value[file];
|
||||
}
|
||||
this.file_upload.progress.empty();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -217,6 +217,7 @@ span.et2_date span {
|
||||
/* Remove icon displayed when hovering */
|
||||
.et2_file .progress li div.remove {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.et2_file .progress li:hover div.remove {
|
||||
@ -238,7 +239,6 @@ span.et2_date span {
|
||||
.et2_file .progress li {
|
||||
color: blue;
|
||||
margin: .5ex;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Hide progress bar when completed */
|
||||
.et2_file .progress li.success > span.progressBar {
|
||||
@ -257,6 +257,46 @@ span.et2_date span {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Link wiget(s)
|
||||
*/
|
||||
|
||||
/* Link to */
|
||||
.et2_link_to {
|
||||
width: 350px;
|
||||
overflow-x: show;
|
||||
}
|
||||
.et2_link_to button {
|
||||
display: inline;
|
||||
float: right;
|
||||
height: 5ex;
|
||||
}
|
||||
.et2_link_to span.status {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 3px center;
|
||||
background-image:url(gfx/tick.png);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
.et2_link_to .progress {
|
||||
max-height: 12em;
|
||||
}
|
||||
.et2_link_to .progress > .success input {
|
||||
width: 100%;
|
||||
margin-right: -20px; /* Leave room for remove icon */
|
||||
}
|
||||
.et2_link_to .progress li.success span.ui-icon-comment {
|
||||
display: none;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.et2_link_to .progress li:hover.success span.ui-icon-comment {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.egw_tooltip
|
||||
{
|
||||
position: fixed;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user