* All app/links: features and fixes

- Feature: Open supported media links in all applications, e.g. images,videos, etc. in expose view
- Add save option to expose view
- Fix styling of expose controls buttons (for better experience in mobile theme)
- Fix tooltip of expose controls buttons

etemplate/js/et2_widget_description.js

@@ -218,6 +218,7 @@ var et2_description = expose(et2_baseWidget.extend([et2_IDetachedDOM],
 				type: this.options.type + "/*",
 				thumbnail: base_url + _value
 			}];
+			if (_value.match(/\/webdav.php/,'ig')) mediaContent[0]["download_href"] = base_url + _value + '?download';
 		}
 		return mediaContent;
 	},

etemplate/js/et2_widget_link.js

@@ -1237,7 +1237,7 @@ et2_register_widget(et2_link, ["link", "link-entry_ro"]);
  *
  * @augments et2_valueWidget
  */
-var et2_link_string = et2_valueWidget.extend([et2_IDetachedDOM],
+var et2_link_string = expose(et2_valueWidget.extend([et2_IDetachedDOM],
 {
 	attributes: {
 		"application": {
@@ -1261,7 +1261,13 @@ var et2_link_string = et2_valueWidget.extend([et2_IDetachedDOM],
 			"type": "string",
 			"default":"",
 			"description": "Sub-type key to list only entries of that type"
-		}
+		},
+		"expose_view":{
+			name: "Expose view",
+			type: "boolean",
+			default: true,
+			description: "Clicking on description with href value would popup an expose view, and will show content referenced by href."
+		},
 	},
 
 	/**
@@ -1339,14 +1345,52 @@ var et2_link_string = et2_valueWidget.extend([et2_IDetachedDOM],
 		this.egw().jsonq(this.egw().getAppName()+'.etemplate_widget_link.ajax_link_list', [_value], this.set_value, this);
 		return;
 	},
-
+	/**
+	 * Function to get media content to feed the expose
+	 * @param {type} _value
+	 * @returns {Array|Array.getMedia.mediaContent}
+	 */
+	getMedia: function (_value)
+	{
+		var base_url = egw.webserverUrl.match(/^\//,'ig')?egw(window).window.location.origin + egw.webserverUrl : egw.webserverUrl;
+		var mediaContent = [];
+		if (_value && typeof _value.type !='undefined' && _value.type.match(/video\/|audio\//,'ig'))
+		{
+			mediaContent = [{
+					title: _value.id,
+					type: _value.type,
+					poster:'', // TODO: Should be changed by correct video thumbnail later
+					href: base_url + egw().mime_open(_value),
+					download_href: base_url + egw().mime_open(_value) + '?download',
+				}];
+		}
+		else if(_value)
+		{
+			mediaContent = [{
+				title: _value.id,
+				href: base_url + egw().mime_open(_value).url,
+				download_href: base_url + egw().mime_open(_value).url + '?download',
+				type: _value.type,
+			}];
+		}
+		if (mediaContent[0].href && mediaContent[0].href.match(/\/webdav.php/,'ig')) mediaContent[0]["download_href"] = mediaContent[0].href + '?download';
+		return mediaContent;
+	},
 	_add_link: function(_link_data) {
 		var self = this;
 		var link = $j(document.createElement("li"))
 			.appendTo(this.list)
 			.addClass("et2_link loading")
 			.click( function(e){
-				self.egw().open(_link_data, "", "view",null,_link_data.app,_link_data.app);
+				if (self.options.expose_view && typeof _link_data.type !='undefined' 
+					&& _link_data.type.match(self.mime_regexp,'ig'))
+				{
+					self._init_blueimp_gallery(e, _link_data);
+				}
+				else
+				{
+					self.egw().open(_link_data, "", "view",null,_link_data.app,_link_data.app);
+				}
 				e.stopImmediatePropagation();
 			});
 
@@ -1423,7 +1467,7 @@ var et2_link_string = et2_valueWidget.extend([et2_IDetachedDOM],
 			this._labelContainer.contents().not(this.list).remove();
 		}
 	}
-});
+}));
 et2_register_widget(et2_link_string, ["link-string"]);
 
 /**
@@ -1704,7 +1748,18 @@ var et2_link_list = et2_link_string.extend(
 			$j(document.createElement("td"))
 				.appendTo(row)
 				.addClass(columns[i])
-				.click( function(){self.egw().open(_link_data, "", "view",null,_link_data.target ? _link_data.target : _link_data.app,_link_data.app);})
+				.click( function(){
+					// Check if the link entry is mime with media type, in order to open it in expose view
+					if (typeof _link_data.type != 'undefined' && _link_data.type.match(self.mime_regexp,'ig'))
+					{
+						var $vfs_img_node = jQuery(this).parent().find('.vfsMimeIcon');
+						if ($vfs_img_node.length > 0) $vfs_img_node.click();
+					}
+					else
+					{
+						self.egw().open(_link_data, "", "view",null,_link_data.target ? _link_data.target : _link_data.app,_link_data.app);
+					}
+				})
 				.text(_link_data[columns[i]] ? _link_data[columns[i]]+"" : "");
 		}
 

etemplate/js/et2_widget_vfs.js

@@ -346,6 +346,7 @@ var et2_vfsMime = expose(et2_valueWidget.extend([et2_IDetachedDOM],
 				thumbnail: _value.path && _value.mime ? this.egw().mime_icon(_value['mime'], _value['path']) : this.image.attr('src')+ '&thheight=128'
 			}];
 		}
+		if (mediaContent[0].href && mediaContent[0].href.match(/\/webdav.php/,'ig')) mediaContent[0]["download_href"] = mediaContent[0].href + '?download';
 		return mediaContent;
 	},
 

etemplate/js/expose.js

@@ -364,7 +364,7 @@ function expose (widget)
 					// Gallery Main DIV container
 					var $expose_node = jQuery(document.createElement('div')).attr({id:"blueimp-gallery", class:"blueimp-gallery"});
 					// Create Gallery DOM NODE
-					$expose_node.append('<div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a class="close">×</a><a class="play-pause"></a><a class="fullscreen"></a><ol class="indicator"></ol>');
+					$expose_node.append('<div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a title="'+ egw().lang('Close') + '" class="close">×</a><a title="'+ egw().lang('Play/Pause') + '"  class="play-pause"></a><a title="'+ egw().lang('Fullscreen') + '" class="fullscreen"></a><a title="'+ egw().lang('Save') +'" class="download"></a><ol class="indicator"></ol>');
 					// Append the gallery Node to DOM
 					$body.append($expose_node);
 				}

etemplate/templates/default/etemplate2.css

@@ -1885,14 +1885,33 @@ span.et2_egw_action_ddHelper_itemsCnt {
 	background: transparent;
 }
 /*Slideshow Play/Pause button*/
-.blueimp-gallery>.play-pause{
-	right: 42px;
-	top: 23px;
+body:last-child .blueimp-gallery>.play-pause, .blueimp-gallery>.play-pause{
+	right: 50px;
+	top: 20px;
+	background-size: 44px 24px;
+	width:24px;
+	height:24px;
 }
 /*fullScreen button*/
 .blueimp-gallery>.fullscreen{
-	right: 75px;
-	top: 25px;
+	right: 85px;
+	top: 20px;
+	background-size: 24px;
+	width:24px;
+	height:24px;
+}
+/* download button*/
+.blueimp-gallery>.download{
+	right: 120px;
+	top: 20px;
+	background: url(images/download.png) 0 0 no-repeat;
+	background-size: 24px;
+	height:24px;
+	width:24px;
+}
+/*close button*/
+.blueimp-gallery>.close{
+	font-size: 40px;
 }
 /*Give room to Carousel indicator when the gallery controls is on*/
 .blueimp-gallery-controls>.slides {

phpgwapi/inc/class.egw_link.inc.php

@@ -152,6 +152,10 @@ class egw_link extends solink
 					'mime_popup' => '640x480',
 					'mime_target' => '_blank',
 				),
+				'/^image\\//' => array(	// image
+					'mime_popup' => '640x480',
+					'mime_target' => '_blank',
+				),
 			),
 		),
 	);

phpgwapi/js/jquery/blueimp/css/blueimp-gallery.css

@@ -166,7 +166,7 @@
 .blueimp-gallery > .fullscreen {
   position: absolute;
   right: 15px;
-  bottom: 30px;
+  bottom: 15px;
   width: 15px;
   height: 15px;
   background: url(../img/fullscreen.png) 0 0 no-repeat;
@@ -174,12 +174,24 @@
   opacity: 0.5;
   display:none;
 }
+.blueimp-gallery > .download {
+  position: absolute;
+  right: 45px;
+  bottom: 15px;
+  width: 15px;
+  height: 15px;
+  background: url(../img/download.png) 0 0 no-repeat;
+  cursor: pointer;
+  opacity: 0.5;
+  display:none;
+}
 .blueimp-gallery > .prev:hover,
 .blueimp-gallery > .next:hover,
 .blueimp-gallery > .close:hover,
 .blueimp-gallery > .title:hover,
 .blueimp-gallery > .play-pause:hover,
-.blueimp-gallery > .fullscreen:hover{
+.blueimp-gallery > .fullscreen:hover,
+.blueimp-gallery > .download:hover{
   color: #fff;
   opacity: 1;
 }
@@ -188,7 +200,8 @@
 .blueimp-gallery-controls > .close,
 .blueimp-gallery-controls > .title,
 .blueimp-gallery-controls > .play-pause,
-.blueimp-gallery-controls > .fullscreen{
+.blueimp-gallery-controls > .fullscreen,
+.blueimp-gallery-controls > .download{
   display: block;
   /* Fix z-index issues (controls behind slide element) on Android: */
   -webkit-transform: translateZ(0);
@@ -209,7 +222,8 @@
 .blueimp-gallery > .next,
 .blueimp-gallery > .close,
 .blueimp-gallery > .play-pause,
-.blueimp-gallery > .fullscreen{
+.blueimp-gallery > .fullscreen,
+.blueimp-gallery > .download{
   -webkit-user-select: none;
    -khtml-user-select: none;
      -moz-user-select: none;

phpgwapi/js/jquery/blueimp/js/blueimp-gallery.js

@@ -93,6 +93,8 @@
             playPauseClass: 'play-pause',
 			// The class fullscreen button control
 			fullscreenClass:'fullscreen',
+			// The class download button control
+			downloadClass:'download',
             // The list object property (or data attribute) with the object type:
             typeProperty: 'type',
             // The list object property (or data attribute) with the object title:
@@ -876,7 +878,21 @@
                 // Click on "fullscreen" control
                 this.preventDefault(event);
                 this.toggleFullscreen();
-            } else if (parent === this.slidesContainer[0]) {
+            }
+			else if (isTarget(options.downloadClass)) {
+				// Click on "download" control
+				if (this.list[this.getIndex()] && typeof this.list[this.getIndex()].download_href != 'undefined')
+				{
+					event.target.href = this.list[this.getIndex()].download_href;
+				}
+				else
+				{
+					event.target.href = this.list[this.getIndex()].href;
+				}
+				
+				if (typeof event.target.download != 'undefined') event.target.download = this.list[this.getIndex()].title;
+			}
+			else if (parent === this.slidesContainer[0]) {
                 // Click on slide background
                 this.preventDefault(event);
                 if (options.closeOnSlideClick) {