Sort by EXIF 'taken' date

CHANGELOG.md

@@ -1,3 +1,6 @@
+gallery (15.0.1)
+* Sort files by EXIF 'taken' date (@denim2x)
+
 gallery (15.0.0)
 * Drag and drop files and folders owncloud/gallery#405 (@oparoz)
 * Upload straight from the app owncloud/gallery#25 (@oparoz)

css/gallerybutton.css

@@ -1,6 +1,9 @@
 /* Gallery buttons design  */
 #controls .left {
 	float: left;
+	padding-top: 1px;
+	padding-left: 4px;
+	margin-right: 4px;
 }
 
 #controls .button.view-switcher {
@@ -24,27 +27,46 @@
 	-webkit-perspective: 1000px;
 	-moz-perspective: 1000px;
 	perspective: 1000px;
+	float: left;
+	position: relative;
+	z-index: 0;
+	border: none;
+	box-shadow: 0 0 0 1px #dbdbdb;
+	width: 38px;
+	height: 34px;
+	border-radius: 0;
+	margin-right: 1px;
 }
 
-#controls .button.left-switch-button,
-#controls .button.left-switch-button:hover {
-	float: right;
-	display: inline;
+#controls .button.sorting:first-child {
+	/* margin-left: 3px; */
 	border-radius: 3px 0 0 3px;
-	margin-left: 3px;
-	margin-right: 0;
 }
 
-#controls .button.right-switch-button {
-	float: right;
-	display: inline;
+#controls .button.sorting:last-child {
 	border-radius: 0 3px 3px 0;
-	margin-left: -1px;
+	margin-right: 0;
+}
+
+#controls .button.sorting:hover,
+#controls .button.sorting.active {
+	border: none;
+	box-shadow: 0 0 0 1px #0082c9;
+	z-index: 1;
+}
+
+#controls #sort-date-taken-button {
+	padding: 8px 5px;
+}
+
+#controls #shared-button,
+#controls #album-info-button {
+	top: -3px;
+	position: relative;
 }
 
 #shared-button img,
-.button.left-switch-button img,
-.button.right-switch-button img {
+#controls .button.sorting img {
 	vertical-align: -3px;
 	opacity: 0.6;
 }

js/gallery.js

@@ -128,10 +128,14 @@
 			var sortOrder = 'asc';
 			var albumSortType = 'name';
 			var albumSortOrder = 'asc';
+
+			sortType = /^sort-([-\w]+?)-button$/.exec(this.id)[1];
+		/*
 			if (this.id === 'sort-date-button') {
 				sortType = 'date';
 
 			}
+		 */
 			var currentSort = Gallery.config.albumSorting;
 			if (currentSort.type === sortType && currentSort.order === sortOrder) {
 				sortOrder = 'des';
@@ -411,6 +415,7 @@
 			var sharedWithUser = null;
 			var owner = null;
 			var permissions = 0;
+			var exif = null;
 			var currentLocation = data.albumpath;
 			// This adds a new node to the map for each parent album
 			Gallery._mapStructure(currentLocation);
@@ -442,10 +447,11 @@
 					sharedWithUser = files[i].sharedwithuser;
 					owner = files[i].owner;
 					permissions = files[i].permissions;
+					exif = files[i].exif;
 
 					image =
 						new GalleryImage(
-							path, path, fileId, mimeType, mTime, etag, size, sharedWithUser, owner, permissions
+							path, path, fileId, mimeType, mTime, etag, size, sharedWithUser, owner, permissions, exif
 						);
 
 					// Determines the folder name for the image

js/galleryimage.js

@@ -39,7 +39,7 @@
  * @constructor
 	 */
 	var GalleryImage = function (src, path, fileId, mimeType, mTime, etag, size, sharedWithUser,
-								 owner, permissions) {
+								 owner, permissions, exif) {
 		this.src = src;
 		this.path = path;
 		this.fileId = fileId;
@@ -50,6 +50,7 @@
 		this.sharedWithUser = sharedWithUser;
 		this.owner = owner;
 		this.permissions = permissions;
+		this.exif = exif || {};
 		this.thumbnail = null;
 		this.domDef = null;
 		this.spinner = null;

js/galleryutility.js

@@ -229,7 +229,9 @@ window.Gallery = window.Gallery || {};
 		 * @returns {Function}
 		 */
 		sortBy: function (sortType, sortOrder) {
-			if (sortType === 'name') {
+			switch (sortType) {
+				case 'name':
+		//if (sortType === 'name') {
 				if (sortOrder === 'asc') {
 					//sortByNameAsc
 					return function (a, b) {
@@ -240,8 +242,9 @@ window.Gallery = window.Gallery || {};
 				return function (a, b) {
 					return -OC.Util.naturalSortCompare(a.path, b.path);
 				};
-			}
-			if (sortType === 'date') {
+		//}
+				case 'date':
+		//if (sortType === 'date') {
 				if (sortOrder === 'asc') {
 					//sortByDateAsc
 					return function (a, b) {
@@ -252,6 +255,15 @@ window.Gallery = window.Gallery || {};
 				return function (a, b) {
 					return a.mTime - b.mTime;
 				};
+		//}
+				case 'date-taken':     // EXIF 'DateTimeOriginal' field
+					return sortOrder === 'asc' ?
+						function (a, b) {
+							return b.exif.taken_date - a.exif.taken_date;
+						} :
+						function (a, b) {
+							return a.exif.taken_date - b.exif.taken_date;
+						};
 			}
 		},
 

js/galleryview.js

@@ -144,12 +144,15 @@
 		 * @param {string} sortOrder asc or des
 		 */
 		sortControlsSetup: function (sortType, sortOrder) {
+		/*
 			var reverseSortType = 'date';
 			if (sortType === 'date') {
 				reverseSortType = 'name';
 			}
+		 */
+			this._setSortButton(null, 'asc', false); // default icon
+		//this._setSortButton(reverseSortType, 'asc', false); // default icon
 			this._setSortButton(sortType, sortOrder, true);
-			this._setSortButton(reverseSortType, 'asc', false); // default icon
 		},
 
 		/**
@@ -373,8 +376,12 @@
 			$('#shared-button').click(Gallery.share);
 			Gallery.infoBox = new Gallery.InfoBox();
 			$('#album-info-button').click(Gallery.showInfo);
+
+			$('#controls .button.sorting').click(Gallery.sorter);
+		/*
 			$('#sort-name-button').click(Gallery.sorter);
 			$('#sort-date-button').click(Gallery.sorter);
+		 */
 			$('#save #save-button').click(Gallery.showSaveForm);
 			$('.save-form').submit(Gallery.saveForm);
 			this._renderNewButton();
@@ -401,7 +408,13 @@
 
 			var sum = album.images.length + album.subAlbums.length;
 			//If sum of the number of images and subalbums exceeds 1 then show the buttons.
-			if(sum > 1)
+			var btns = $('#controls .button.sorting');
+			if (sum > 1) {
+				btns.show();
+			} else {
+				btns.hide();
+			}
+		/*
 			{
 				$('#sort-name-button').show();
 				$('#sort-date-button').show();
@@ -411,6 +424,7 @@
 				$('#sort-name-button').hide();
 				$('#sort-date-button').hide();
 			}
+		 */
 			var currentSort = Gallery.config.albumSorting;
 			this.sortControlsSetup(currentSort.type, currentSort.order);
 			Gallery.albumMap[Gallery.currentAlbum].images.sort(
@@ -432,8 +446,11 @@
 		_hideButtons: function (uploadAllowed) {
 			$('#album-info-button').hide();
 			$('#shared-button').hide();
+			$('#controls .button.sorting').hide();
+		/*
 			$('#sort-name-button').hide();
 			$('#sort-date-button').hide();
+		 */
 			$('#save-button').hide();
 			$('#download').hide();
 
@@ -509,7 +526,10 @@
 		 * @private
 		 */
 		_setSortButton: function (sortType, sortOrder, active) {
-			var button = $('#sort-' + sortType + '-button');
+			var button = sortType ?
+				$('#sort-' + sortType + '-button'):
+				$('.button.sorting.active');
+		//var button = $('#sort-' + sortType + '-button');
 			// Removing all the classes which control the image in the button
 			button.removeClass('active');
 			button.find('img').removeClass('front');

lib/Service/FilesService.php

@@ -109,14 +109,41 @@ protected function getNodeData($node) {
 		$sharedWithUser = $node->isShared();
 		$ownerData = $this->getOwnerData($node);
 		$permissions = $node->getPermissions();
+		$exif = $this->getEXIF('data'.$node->getPath());
 
 		//$this->logger->debug("Image path : {var1}", ['var1' => $imagePath]);
 
 		return $this->formatNodeData(
-			$imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions
+			$imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions, $exif
 		);
 	}
 
+	/**
+	 * Returns specific EXIF data for given path (null if directory)
+	 *
+	 * @param string $path
+	 *
+	 * @return null|array<string,int|string>
+	 */
+	protected function getEXIF($path) {
+		if (is_dir($path)) {
+			return null;
+		}
+		$taken = null;
+		$data = @exif_read_data($path, 'EXIF');
+		if ($data) {
+			$value = @$data['DateTimeOriginal'];    // -> 'date taken' field
+			if ($value) {
+				$date = date_parse_from_format('Y:m:d H:i:s', $value);
+				$taken = mktime(
+					$date['hour'],  $date['minute'], $date['second'],
+					$date['month'], $date['day'],    $date['year']
+				);
+			}
+		}
+		return ['taken_date' => ($taken ? $taken : 0)];
+	}
+
 	/**
 	 * Returns various information about a folder
 	 *
@@ -290,7 +317,7 @@ private function getOwnerData($node) {
 	 * @return array
 	 */
 	private function formatNodeData(
-		$imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions
+		$imagePath, $nodeId, $mTime, $etag, $size, $sharedWithUser, $ownerData, $permissions, $exif
 	) {
 		return [
 			'path'           => $imagePath,
@@ -300,7 +327,8 @@ private function formatNodeData(
 			'size'           => $size,
 			'sharedwithuser' => $sharedWithUser,
 			'owner'          => $ownerData,
-			'permissions'    => $permissions
+			'permissions'    => $permissions,
+			'exif'           => $exif
 		];
 	}