Merge pull request #1767 from mbauskar/image-view

[Feature] Image view

frappe/core/doctype/doctype/doctype.json

@@ -3,6 +3,7 @@
  "allow_import": 0, 
  "allow_rename": 1, 
  "autoname": "Prompt", 
+ "beta": 0, 
  "creation": "2013-02-18 13:36:19", 
  "custom": 0, 
  "description": "DocType is a Table / Form in the application.", 
@@ -239,6 +240,32 @@
    "set_only_once": 0, 
    "unique": 0
   }, 
+  {
+   "allow_on_submit": 0, 
+   "bold": 0, 
+   "collapsible": 0, 
+   "depends_on": "eval: doc.image_field", 
+   "fieldname": "image_view", 
+   "fieldtype": "Check", 
+   "hidden": 0, 
+   "ignore_user_permissions": 0, 
+   "ignore_xss_filter": 0, 
+   "in_filter": 0, 
+   "in_list_view": 0, 
+   "label": "Image View", 
+   "length": 0, 
+   "no_copy": 0, 
+   "permlevel": 0, 
+   "precision": "", 
+   "print_hide": 0, 
+   "print_hide_if_no_value": 0, 
+   "read_only": 0, 
+   "report_hide": 0, 
+   "reqd": 0, 
+   "search_index": 0, 
+   "set_only_once": 0, 
+   "unique": 0
+  }, 
   {
    "allow_on_submit": 0, 
    "bold": 0, 
@@ -1097,7 +1124,7 @@
  "issingle": 0, 
  "istable": 0, 
  "max_attachments": 0, 
- "modified": "2016-05-02 18:02:03.227684", 
+ "modified": "2016-06-01 12:28:01.048158", 
  "modified_by": "Administrator", 
  "module": "Core", 
  "name": "DocType", 

frappe/custom/doctype/customize_form/customize_form.json

@@ -3,6 +3,7 @@
  "allow_import": 0, 
  "allow_rename": 0, 
  "autoname": "DL.####", 
+ "beta": 0, 
  "creation": "2013-01-29 17:55:08", 
  "custom": 0, 
  "docstatus": 0, 
@@ -159,6 +160,32 @@
    "set_only_once": 0, 
    "unique": 0
   }, 
+  {
+   "allow_on_submit": 0, 
+   "bold": 0, 
+   "collapsible": 0, 
+   "depends_on": "eval: doc.image_field", 
+   "fieldname": "image_view", 
+   "fieldtype": "Check", 
+   "hidden": 0, 
+   "ignore_user_permissions": 0, 
+   "ignore_xss_filter": 0, 
+   "in_filter": 0, 
+   "in_list_view": 0, 
+   "label": "Image View", 
+   "length": 0, 
+   "no_copy": 0, 
+   "permlevel": 0, 
+   "precision": "", 
+   "print_hide": 0, 
+   "print_hide_if_no_value": 0, 
+   "read_only": 0, 
+   "report_hide": 0, 
+   "reqd": 0, 
+   "search_index": 0, 
+   "set_only_once": 0, 
+   "unique": 0
+  }, 
   {
    "allow_on_submit": 0, 
    "bold": 0, 
@@ -414,13 +441,14 @@
  "hide_toolbar": 1, 
  "icon": "icon-glass", 
  "idx": 1, 
+ "image_view": 0, 
  "in_create": 0, 
  "in_dialog": 0, 
  "is_submittable": 0, 
  "issingle": 1, 
  "istable": 0, 
  "max_attachments": 0, 
- "modified": "2016-04-14 13:18:35.095815", 
+ "modified": "2016-06-01 12:29:28.272410", 
  "modified_by": "Administrator", 
  "module": "Custom", 
  "name": "Customize Form", 

frappe/custom/doctype/customize_form/customize_form.py

@@ -23,7 +23,8 @@ doctype_properties = {
 	'read_only_onload': 'Check',
 	'allow_copy': 'Check',
 	'quick_entry': 'Check',
-	'max_attachments': 'Int'
+	'max_attachments': 'Int',
+	'image_view': 'Check'
 }
 
 docfield_properties = {

frappe/public/build.json

@@ -218,7 +218,13 @@
 		"public/js/frappe/list/listview.js",
 		"public/js/frappe/views/calendar_base.js",
 		"public/js/frappe/views/calendar.js",
-		"public/js/frappe/views/ganttview.js"
+		"public/js/frappe/views/ganttview.js",
+
+		"public/js/frappe/list/blueimp-gallery.html",
+		"public/js/frappe/list/image_view_item_row.html",
+		"public/js/frappe/list/image_view_item_main_head.html",
+		"public/js/frappe/list/header_select_all_like_filter.html",
+		"public/js/frappe/list/item_assigned_to_comment_count.html"
 	],
 	"css/report.min.css": [
 		"public/css/report.css",
@@ -248,4 +254,4 @@
 		"public/js/legacy/print_table.js",
 		"public/js/legacy/print_format.js"
 	]
-}
+}

frappe/public/css/list.css

@@ -189,3 +189,34 @@
   width: 37px;
   text-align: left;
 }
+
+.image-view {
+  float: left;
+}
+
+.image-view-subject {
+  padding: inherit;
+}
+
+.image-view-col {
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+table.field-info {
+  opacity: 0;
+  bottom: -20px;
+  font-size: 8pt;
+  color: white;
+  background-color: #000000;
+  position: absolute;
+  padding-bottom: 0px !important;
+}
+
+.image-field {
+  position: relative;
+}
+
+.image-field:hover .field-info {
+  opacity: 0.9;
+}

frappe/public/js/frappe/list/blueimp-gallery.html

@@ -0,0 +1,9 @@
+<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
+    <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>
+    <ol class="indicator"></ol>
+</div>

frappe/public/js/frappe/list/doclistview.js

@@ -133,7 +133,8 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 	},
 
 	init_headers: function() {
-		var main = frappe.render_template("list_item_main_head", {
+		this.header = this.meta.image_view == 0? "list_item_main_head": "image_view_item_main_head";
+		var main = frappe.render_template(this.header, {
 			columns: this.listview.columns,
 			right_column: this.listview.settings.right_column,
 			_checkbox: ((frappe.model.can_delete(this.doctype) || this.listview.settings.selectable)
@@ -445,6 +446,12 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 		data.doctype = this.doctype;
 		this.listview.render(row, data, this);
 	},
+	render_image_view_row: function(row, data) {
+		for (var i = 0; i < data.length; i++) {
+			data[i].doctype = this.doctype;
+			this.listview.render(row, data[i], this)
+		}
+	},
 	get_args: function() {
 		var args = {
 			doctype: this.doctype,
@@ -707,8 +714,14 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 	},
 
 	get_checked_items: function() {
+		var me = this;
 		return $.map(this.$page.find('.list-delete:checked'), function(e) {
-			return $(e).parents(".list-row:first").data('data');
+			if(me.meta.image_view == 0){
+				return $(e).parents(".list-row:first").data('data');
+			}
+			else{
+				return $(e).parents(".image-view:first").data('data');
+			}
 		});
 	},
 

frappe/public/js/frappe/list/header_select_all_like_filter.html

@@ -0,0 +1,7 @@
+{% if (_checkbox) { %}
+<input class="list-select-all" type="checkbox" style="margin-right: 7px; margin-top: 2px;"
+	title="{%= __("Select All") %}">
+{% } %}
+
+<i class="icon-fixed-width octicon octicon-heart text-extra-muted not-liked like-action list-liked-by-me"
+	title="{%= __("Likes") %}"></i>

frappe/public/js/frappe/list/image_view_item_main_head.html

@@ -0,0 +1,5 @@
+<div class="row">
+	<div class="col-xs-12">
+		{%= frappe.render_template("header_select_all_like_filter", { _checkbox: _checkbox }) %}
+	</div>
+</div>

frappe/public/js/frappe/list/image_view_item_row.html

@@ -0,0 +1,39 @@
+<div class="col-xs-12 col-sm-3 doclist-row has-checkbox image-view text-ellipsis">
+	<div class="row">
+		<div class="col-xs-12 image-view-col">
+			{%= subject %}
+		</div>
+	</div>
+	<!-- Image -->
+	<div class="row">
+		<div class="col-xs-12 image-view-col" align="center">
+			<div class="pos-item-image image-field" data-name="{{ data.name }}" style="{% if (item_image) { %} background-image: {%= item_image %} {% }
+			 	else { %} background-color: {{ color }} {% } %}">
+				{% if (!item_image) { %}{%= frappe.get_abbr(data.name) %}{% } %}
+				<table class="table table-condensed field-info">
+					{% for (var i=0, l=columns.length; i < l; i++ ) {
+					var col = columns[i], value=data[col.fieldname]; %}
+					{% if(in_list(allowed_type, col.fieldtype)) { %}
+					<tr>
+						<td align="right" width="40%">{%= col.title %}</td>
+						<td align="left" width="60%">{%= value %}</td>
+					</tr>
+					{% } %}
+					{% } %}
+				</table>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		<!-- comment -->
+		<div class="col-xs-12 image-view-col">
+			<div class="row">
+				<div class="col-xs-4">{%= list.get_indicator(data) %}</div>
+				<div class="col-xs-8 text-right">
+					<!-- comments count and assigned to section -->
+					{%= frappe.render_template("item_assigned_to_comment_count", { data: data }) %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

frappe/public/js/frappe/list/imageview.js

@@ -0,0 +1,61 @@
+frappe.views.ImageView = Class.extend({
+	init: function(opts){
+		this.doctype = opts.doctype;
+		this.docname = opts.docname;
+		this.container = opts.container;
+
+		this.get_images(this.doctype, this.docname);
+	},
+
+	get_images: function(doctype, docname){
+		/*	get the list of all the Images associated with doc */
+		var me = this;
+
+		frappe.call({
+			method: "frappe.client.get_list",
+			args: {
+				doctype: "File",
+				fields: [
+					"file_name as title", "file_url as href",
+					"'image/*' as type", "ifnull(thumbnail_url, file_url) as thumbnail"
+				],
+				filters: [
+					["File", "attached_to_doctype", "=", this.doctype],
+					["File", "attached_to_name", "=", this.docname],
+					["File", "is_folder", "!=", 1]
+				]
+			},
+			freeze: true,
+			freeze_message: "Fetching Images ..",
+			callback: function(r){
+				if(!r.message){
+					msgprint("No Images found")
+				} else{
+					// filter image files from other
+					images = r.message.filter(function(image){
+						return frappe.utils.is_image_file(image.title);
+					});
+
+					if(images){
+						me.render(images);
+					}
+				}
+			}
+		});
+	},
+
+	render: function(image_list){
+		var gallery = blueimp.Gallery(image_list, this.get_options());
+	},
+
+	get_options: function(){
+		/* options for the gallery plugin */
+		return {
+			indicatorContainer: 'ol',
+			thumbnailIndicators: true,
+			thumbnailProperty: 'thumbnail',
+			activeIndicatorClass: 'active',
+			container: this.container.find(".blueimp-gallery")
+		}
+	}
+});

frappe/public/js/frappe/list/item_assigned_to_comment_count.html

@@ -0,0 +1,17 @@
+<div class="hidden-xs">
+	<span class="list-row-modified text-muted">
+          {%= comment_when(data.modified, true) %}
+	</span>
+        {% if (data._assign_list.length) { %}
+    		<span class="filterable"
+                data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
+    			{%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %}</span>
+        {% } else { %}
+            <span class="avatar avatar-small avatar-empty"></span>
+        {% } %}
+    	<span class="list-comment-count small
+			{% if(!data._comment_count) { %} text-extra-muted {% } else { %} text-muted {% } %}">
+    		<i class="octicon octicon-comment-discussion"></i>
+                {%= (data._comment_count > 99 ? "99+" : data._comment_count) || 0 %}
+        </span>
+</div>

frappe/public/js/frappe/list/list_item_main_head.html

@@ -17,15 +17,7 @@
 			{% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}">
 
 			{% if (col.type==="Subject") { %}
-
-			{% if (_checkbox) { %}
-			<input class="list-select-all" type="checkbox" style="margin-right: 7px; margin-top: 2px;"
-				title="{%= __("Select All") %}">
-			{% } %}
-
-			<i class="icon-fixed-width octicon octicon-heart text-extra-muted not-liked like-action list-liked-by-me"
-				title="{%= __("Likes") %}"></i>
-
+				{%= frappe.render_template("header_select_all_like_filter", { _checkbox: _checkbox }) %}
 			{% } %}
 
             <span class="list-value">{%= __(col.title) || __(col.label) || "" %}</span>

frappe/public/js/frappe/list/list_item_row.html

@@ -25,22 +25,7 @@
     <div class="list-col col-sm-2 col-xs-2
 		text-right list-row-right" style="padding-left:0px">
 		<div class="visible-xs list-row-indicator">{%= list.get_indicator_dot(data) %}</div>
-		<div class="hidden-xs">
-    		<span class="list-row-modified text-muted">
-                {%= comment_when(data.modified, true) %}
-    		</span>
-	        {% if (data._assign_list.length) { %}
-	    		<span class="filterable"
-	                data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
-	    			{%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %}</span>
-	        {% } else { %}
-	            <span class="avatar avatar-small avatar-empty"></span>
-	        {% } %}
-	    	<span class="list-comment-count small
-				{% if(!data._comment_count) { %} text-extra-muted {% } else { %} text-muted {% } %}">
-	    		<i class="octicon octicon-comment-discussion"></i>
-	                {%= (data._comment_count > 99 ? "99+" : data._comment_count) || 0 %}
-	        </span>
-		</div>
+		<!-- comments count and assigned to section -->
+		{%= frappe.render_template("item_assigned_to_comment_count", { data: data }) %}
     </div>
 </div>

frappe/public/js/frappe/list/listview.js

@@ -124,7 +124,6 @@ frappe.views.ListView = Class.extend({
 			this.total_colspans += this.columns[1].colspan;
 		}
 
-
 		// overridden
 		var overridden = $.map(this.settings.add_columns || [], function(d) {
 			return d.content;
@@ -203,7 +202,21 @@ frappe.views.ListView = Class.extend({
 			this.id_list.push(data.name);
 		}
 
+		if(this.meta.image_view == 0){
+			this.render_list_row(row, data);
+		}
+		else{
+			this.render_list_image(row, data);
+		}
+
+		if(this.settings.post_render_item) {
+			this.settings.post_render_item(this, row, data);
+		}
+
+		this.render_tags(row, data);
 
+	},
+	render_list_row: function(row, data) {
 		var main = frappe.render_template("list_item_main", {
 			data: data,
 			columns: this.columns,
@@ -218,15 +231,26 @@ frappe.views.ListView = Class.extend({
 			list: this,
 			right_column: this.settings.right_column
 		})).appendTo(row);
-
-		if(this.settings.post_render_item) {
-			this.settings.post_render_item(this, row, data);
-		}
-
-		this.render_tags(row, data);
-
 	},
-
+	render_list_image: function(row, data) {
+		this.allowed_type = [
+			"Check", "Currency", "Data", "Date",
+			"Datetime", "Float", "Int", "Link",
+			"Percent", "Select", "Read Only", "Time"
+		];
+		img_col = $(frappe.render_template("image_view_item_row", {
+			data: data,
+			list: this,
+			columns: this.columns,
+			allowed_type: this.allowed_type,
+			item_image: data.image ? "url('" + data.image + "')" : null,
+			color: frappe.get_palette(data.item_name),
+			subject: this.get_avatar_and_id(data, true),
+			right_column: this.settings.right_column
+		}))
+		.data("data", data)
+		.appendTo($(row).find(".image-view-marker"));
+	},
 	render_tags: function(row, data) {
 		var me = this;
 		var row2 = $('<div class="tag-row">\
@@ -366,4 +390,4 @@ frappe.views.ListView = Class.extend({
 		var icon_html = "<i class='%(icon_class)s' title='%(label)s'></i>";
 		$(parent).append(repl(icon_html, {icon_class: icon_class, label: __(label) || ''}));
 	}
-});
+});

frappe/public/js/frappe/ui/listing.js

@@ -302,17 +302,58 @@ frappe.ui.Listing = Class.extend({
 	},
 
 	render_list: function(values) {
-		var m = Math.min(values.length, this.page_length);
 		this.last_page = values;
 		if(this.filter_list) {
 			this.filter_values = this.filter_list.get_filters();
 		}
 
+		this.render_rows(values);
+	},
+	render_rows: function(values) {
 		// render the rows
-		for(var i=0; i < m; i++) {
-			this.render_row(this.add_row(values[i]), values[i], this, i);
+		if(this.meta.image_view == 0){
+			var m = Math.min(values.length, this.page_length);
+			for(var i=0; i < m; i++) {
+				this.render_row(this.add_row(values[i]), values[i], this, i);
+			}
+		}
+		else {
+			var cols = values.slice();
+			while (cols.length) {
+				row = this.add_row(cols[0]);
+				$("<div class='row image-view-marker'></div>").appendTo(row);
+				this.render_image_view_row(row, cols.splice(0, 4), this, i);
+			}
+
+			this.render_image_gallery();
 		}
 	},
+	render_image_gallery: function(){
+		var me = this;
+		frappe.require(
+			[
+				"assets/frappe/js/frappe/list/imageview.js",
+				"assets/frappe/js/lib/gallery/js/blueimp-gallery.js",
+				"assets/frappe/js/lib/gallery/css/blueimp-gallery.css",
+				"assets/frappe/js/lib/gallery/js/blueimp-gallery-indicator.js",
+				"assets/frappe/js/lib/gallery/css/blueimp-gallery-indicator.css"
+			], function(){
+				// remove previous gallery container
+				me.$w.find(".blueimp-gallery").remove();
+				// append gallery div
+				var gallery = frappe.render_template("blueimp-gallery", {});
+				$(gallery).appendTo(me.$w);
+
+				me.$w.find(".image-field").click(function(event){
+					opts = {
+						doctype: me.doctype,
+						docname: $(event.target).attr('data-name'),
+						container: me.$w
+					};
+					new frappe.views.ImageView(opts);
+			});
+		});
+	},
 	update_paging: function(values) {
 		if(values.length >= this.page_length) {
 			this.$w.find('.list-paging-area').toggle(true);
@@ -321,7 +362,7 @@ frappe.ui.Listing = Class.extend({
 	},
 	add_row: function(row) {
 		return $('<div class="list-row">')
-			.data("data", row)
+			.data("data", this.meta.image_view == 0?row:null)
 			.appendTo(this.$w.find('.result-list'))
 			.get(0);
 	},

frappe/public/js/lib/gallery/css/blueimp-gallery-indicator.css

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+/*
+ * blueimp Gallery Indicator CSS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.blueimp-gallery > .indicator {
+  position: absolute;
+  top: auto;
+  right: 15px;
+  bottom: 15px;
+  left: 15px;
+  margin: 0 40px;
+  padding: 0;
+  list-style: none;
+  text-align: center;
+  line-height: 10px;
+  display: none;
+}
+.blueimp-gallery > .indicator > li {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin: 6px 3px 0 3px;
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 1px solid transparent;
+  background: #ccc;
+  background: rgba(255, 255, 255, 0.25) center no-repeat;
+  border-radius: 5px;
+  box-shadow: 0 0 2px #000;
+  opacity: 0.5;
+  cursor: pointer;
+  background-size: 40px 40px;
+}
+.blueimp-gallery > .indicator > li:hover,
+.blueimp-gallery > .indicator > .active {
+  background-color: #fff;
+  border-color: #fff;
+  opacity: 1;
+}
+.blueimp-gallery-controls > .indicator {
+  display: block;
+  /* Fix z-index issues (controls behind slide element) on Android: */
+  -webkit-transform: translateZ(0);
+     -moz-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+       -o-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.blueimp-gallery-single > .indicator {
+  display: none;
+}
+.blueimp-gallery > .indicator {
+  -webkit-user-select: none;
+   -khtml-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+/* IE7 fixes */
+*+html .blueimp-gallery > .indicator > li {
+  display: inline;
+}

frappe/public/js/lib/gallery/css/blueimp-gallery.css

@@ -0,0 +1,226 @@
+@charset "UTF-8";
+/*
+ * blueimp Gallery CSS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.blueimp-gallery,
+.blueimp-gallery > .slides > .slide > .slide-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /* Prevent artifacts in Mozilla Firefox: */
+  -moz-backface-visibility: hidden;
+}
+.blueimp-gallery > .slides > .slide > .slide-content {
+  margin: auto;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  opacity: 1;
+}
+.blueimp-gallery {
+  position: fixed;
+  z-index: 999999;
+  overflow: hidden;
+  background: #000;
+  background: rgba(0, 0, 0, 0.9);
+  opacity: 0;
+  display: none;
+  direction: ltr;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+.blueimp-gallery-carousel {
+  position: relative;
+  z-index: auto;
+  margin: 1em auto;
+  /* Set the carousel width/height ratio to 16/9: */
+  padding-bottom: 56.25%;
+  box-shadow: 0 0 10px #000;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+}
+.blueimp-gallery-display {
+  display: block;
+  opacity: 1;
+}
+.blueimp-gallery > .slides {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+.blueimp-gallery-carousel > .slides {
+  position: absolute;
+}
+.blueimp-gallery > .slides > .slide {
+  position: relative;
+  float: left;
+  height: 100%;
+  text-align: center;
+  -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+     -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      -ms-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+       -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+          transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+}
+.blueimp-gallery,
+.blueimp-gallery > .slides > .slide > .slide-content {
+  -webkit-transition: opacity 0.2s linear;
+     -moz-transition: opacity 0.2s linear;
+      -ms-transition: opacity 0.2s linear;
+       -o-transition: opacity 0.2s linear;
+          transition: opacity 0.2s linear;
+}
+.blueimp-gallery > .slides > .slide-loading {
+  background: url(../img/loading.gif) center no-repeat;
+  background-size: 64px 64px;
+}
+.blueimp-gallery > .slides > .slide-loading > .slide-content {
+  opacity: 0;
+}
+.blueimp-gallery > .slides > .slide-error {
+  background: url(../img/error.png) center no-repeat;
+}
+.blueimp-gallery > .slides > .slide-error > .slide-content {
+  display: none;
+}
+.blueimp-gallery > .prev,
+.blueimp-gallery > .next {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  width: 40px;
+  height: 40px;
+  margin-top: -23px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 60px;
+  font-weight: 100;
+  line-height: 30px;
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 0 2px #000;
+  text-align: center;
+  background: #222;
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 3px solid #fff;
+  -webkit-border-radius: 23px;
+     -moz-border-radius: 23px;
+          border-radius: 23px;
+  opacity: 0.5;
+  cursor: pointer;
+  display: none;
+}
+.blueimp-gallery > .next {
+  left: auto;
+  right: 15px;
+}
+.blueimp-gallery > .close,
+.blueimp-gallery > .title {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  margin: 0 40px 0 0;
+  font-size: 20px;
+  line-height: 30px;
+  color: #fff;
+  text-shadow: 0 0 2px #000;
+  opacity: 0.8;
+  display: none;
+}
+.blueimp-gallery > .close {
+  padding: 15px;
+  right: 15px;
+  left: auto;
+  margin: -15px;
+  font-size: 30px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.blueimp-gallery > .play-pause {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  width: 15px;
+  height: 15px;
+  background: url(../img/play-pause.png) 0 0 no-repeat;
+  cursor: pointer;
+  opacity: 0.5;
+  display: none;
+}
+.blueimp-gallery-playing > .play-pause {
+  background-position: -15px 0;
+}
+.blueimp-gallery > .prev:hover,
+.blueimp-gallery > .next:hover,
+.blueimp-gallery > .close:hover,
+.blueimp-gallery > .title:hover,
+.blueimp-gallery > .play-pause:hover {
+  color: #fff;
+  opacity: 1;
+}
+.blueimp-gallery-controls > .prev,
+.blueimp-gallery-controls > .next,
+.blueimp-gallery-controls > .close,
+.blueimp-gallery-controls > .title,
+.blueimp-gallery-controls > .play-pause {
+  display: block;
+  /* Fix z-index issues (controls behind slide element) on Android: */
+  -webkit-transform: translateZ(0);
+     -moz-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+       -o-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.blueimp-gallery-single > .prev,
+.blueimp-gallery-left > .prev,
+.blueimp-gallery-single > .next,
+.blueimp-gallery-right > .next,
+.blueimp-gallery-single > .play-pause {
+  display: none;
+}
+.blueimp-gallery > .slides > .slide > .slide-content,
+.blueimp-gallery > .prev,
+.blueimp-gallery > .next,
+.blueimp-gallery > .close,
+.blueimp-gallery > .play-pause {
+  -webkit-user-select: none;
+   -khtml-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+/* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
+body:last-child .blueimp-gallery > .slides > .slide-error {
+  background-image: url(../img/error.svg);
+}
+body:last-child .blueimp-gallery > .play-pause {
+  width: 20px;
+  height: 20px;
+  background-size: 40px 20px;
+  background-image: url(../img/play-pause.svg);
+}
+body:last-child .blueimp-gallery-playing > .play-pause {
+  background-position: -20px 0;
+}
+
+/* IE7 fixes */
+*+html .blueimp-gallery > .slides > .slide {
+  min-height: 300px;
+}
+*+html .blueimp-gallery > .slides > .slide > .slide-content {
+  position: relative;
+}

frappe/public/js/lib/gallery/js/blueimp-gallery-indicator.js

@@ -0,0 +1,155 @@
+/*
+ * blueimp Gallery Indicator JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    // Register as an anonymous AMD module:
+    define([
+      './blueimp-helper',
+      './blueimp-gallery'
+    ], factory)
+  } else {
+    // Browser globals:
+    factory(
+      window.blueimp.helper || window.jQuery,
+      window.blueimp.Gallery
+    )
+  }
+}(function ($, Gallery) {
+  'use strict'
+
+  $.extend(Gallery.prototype.options, {
+    // The tag name, Id, element or querySelector of the indicator container:
+    indicatorContainer: 'ol',
+    // The class for the active indicator:
+    activeIndicatorClass: 'active',
+    // The list object property (or data attribute) with the thumbnail URL,
+    // used as alternative to a thumbnail child element:
+    thumbnailProperty: 'thumbnail',
+    // Defines if the gallery indicators should display a thumbnail:
+    thumbnailIndicators: true
+  })
+
+  var initSlides = Gallery.prototype.initSlides
+  var addSlide = Gallery.prototype.addSlide
+  var resetSlides = Gallery.prototype.resetSlides
+  var handleClick = Gallery.prototype.handleClick
+  var handleSlide = Gallery.prototype.handleSlide
+  var handleClose = Gallery.prototype.handleClose
+
+  $.extend(Gallery.prototype, {
+    createIndicator: function (obj) {
+      var indicator = this.indicatorPrototype.cloneNode(false)
+      var title = this.getItemProperty(obj, this.options.titleProperty)
+      var thumbnailProperty = this.options.thumbnailProperty
+      var thumbnailUrl
+      var thumbnail
+      if (this.options.thumbnailIndicators) {
+        if (thumbnailProperty) {
+          thumbnailUrl = this.getItemProperty(obj, thumbnailProperty)
+        }
+        if (thumbnailUrl === undefined) {
+          thumbnail = obj.getElementsByTagName && $(obj).find('img')[0]
+          if (thumbnail) {
+            thumbnailUrl = thumbnail.src
+          }
+        }
+        if (thumbnailUrl) {
+          indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")'
+        }
+      }
+      if (title) {
+        indicator.title = title
+      }
+      return indicator
+    },
+
+    addIndicator: function (index) {
+      if (this.indicatorContainer.length) {
+        var indicator = this.createIndicator(this.list[index])
+        indicator.setAttribute('data-index', index)
+        this.indicatorContainer[0].appendChild(indicator)
+        this.indicators.push(indicator)
+      }
+    },
+
+    setActiveIndicator: function (index) {
+      if (this.indicators) {
+        if (this.activeIndicator) {
+          this.activeIndicator
+            .removeClass(this.options.activeIndicatorClass)
+        }
+        this.activeIndicator = $(this.indicators[index])
+        this.activeIndicator
+          .addClass(this.options.activeIndicatorClass)
+      }
+    },
+
+    initSlides: function (reload) {
+      if (!reload) {
+        this.indicatorContainer = this.container.find(
+          this.options.indicatorContainer
+        )
+        if (this.indicatorContainer.length) {
+          this.indicatorPrototype = document.createElement('li')
+          this.indicators = this.indicatorContainer[0].children
+        }
+      }
+      initSlides.call(this, reload)
+    },
+
+    addSlide: function (index) {
+      addSlide.call(this, index)
+      this.addIndicator(index)
+    },
+
+    resetSlides: function () {
+      resetSlides.call(this)
+      this.indicatorContainer.empty()
+      this.indicators = []
+    },
+
+    handleClick: function (event) {
+      var target = event.target || event.srcElement
+      var parent = target.parentNode
+      if (parent === this.indicatorContainer[0]) {
+        // Click on indicator element
+        this.preventDefault(event)
+        this.slide(this.getNodeIndex(target))
+      } else if (parent.parentNode === this.indicatorContainer[0]) {
+        // Click on indicator child element
+        this.preventDefault(event)
+        this.slide(this.getNodeIndex(parent))
+      } else {
+        return handleClick.call(this, event)
+      }
+    },
+
+    handleSlide: function (index) {
+      handleSlide.call(this, index)
+      this.setActiveIndicator(index)
+    },
+
+    handleClose: function () {
+      if (this.activeIndicator) {
+        this.activeIndicator
+          .removeClass(this.options.activeIndicatorClass)
+      }
+      handleClose.call(this)
+    }
+
+  })
+
+  return Gallery
+}))