Merge pull request #423 from martincaron/sort-by-aspect-ratio-399

Sorting option for aspect ratio (#399)

Author: whyboris

i18n/en.json

@@ -148,6 +148,8 @@
     "sortOptionTimesPlayedMoreInfo": "Show the times played order option in the sorting dropdown",
     "sortOptionYearDescription": "Year",
     "sortOptionYearMoreInfo": "Show the year order option in the sorting dropdown. Only affected by the year you manually set in the details view",
+    "sortOptionAspectRatioDescription":  "Aspect Ratio",
+    "sortOptionAspectRatioMoreInfo":  "Show the aspect ratio order option in the sorting dropdown",
     "sortOrderDescription": "Sort order",
     "sortOrderHint": "Sort order",
     "sortOrderMoreInfo": "Show the sort order filter",
@@ -294,6 +296,7 @@
     "sortTime": "Duration",
     "sortTimesPlayed": "Times played",
     "sortYear": "Year",
+    "sortAspectRatio": "Aspect ratio",
     "tagExclusion": "tags do not have",
     "tagIntersection": "tags include",
     "tagUnion": "tags include any",

i18n/fr.json

@@ -135,6 +135,8 @@
     "sortOptionTimesPlayedMoreInfo": "Afficher l'option de commande des temps joués dans le menu déroulant de tri",
     "sortOptionYearDescription": "Année",
     "sortOptionYearMoreInfo": "Afficher l’option de l’année dans le menu déroulant de tri. Uniquement affecté par l'année que vous avez définie manuellement dans la vue Détails",
+    "sortOptionAspectRatioDescription":  "Ratio d'aspect",
+    "sortOptionAspectRatioMoreInfo":  "Afficher l'option de ratio d'aspect dans la liste déroulante de tri",
     "sortOrderDescription": "Ordre de tri",
     "sortOrderHint": "Ordre de tri",
     "sortOrderMoreInfo": "Afficher le filtre d'ordre de tri",
@@ -271,6 +273,7 @@
     "sortTime": "Durée",
     "sortTimesPlayed": "Fois joué",
     "sortYear": "Année",
+    "sortAspectRatio": "Ratio d'aspect",
     "tagExclusion": "les balises n'ont pas",
     "tagIntersection": "les tags incluent",
     "tagUnion": "les tags incluent",

src/app/common/settings-buttons.ts

@@ -30,7 +30,8 @@ export const SettingsButtonsGroups: string[][] = [
     'sortOptionStar',
     'sortOptionYear',
     'sortOptionModified',
-    'sortOptionTags'
+    'sortOptionTags',
+    'sortOptionAspectRatio'
   ],
   [
     'duplicateLength',
@@ -629,6 +630,14 @@ export const SettingsButtons: { [s: string]: SettingsButton } = {
     title: '',
     toggled: false,
   },
+  'sortOptionAspectRatio': {
+    description: 'BUTTONS.sortOptionAspectRatioDescription',
+    hidden: false,
+    iconName: 'icon-checkmark', // this specific icon makes the button only appear in the Settings menu (not in ribbon)
+    moreInfo: 'BUTTONS.sortOptionAspectRatioMoreInfo',
+    title: '',
+    toggled: false,
+  },
   'sortOrder': {
     description: 'BUTTONS.sortOrderDescription',
     hidden: false,

src/app/components/sort-order/sort-order.component.html

@@ -65,6 +65,12 @@
     <option *ngIf="settingsButtons['sortOptionTags'].toggled" value="tagsDesc">
       &#x25BC; {{ 'SIDEBAR.sortTags' | translate }}
     </option>
+    <option *ngIf="settingsButtons['sortOptionAspectRatio'].toggled" value="aspectRatioAsc">
+      &#x25B2; {{ 'SIDEBAR.sortAspectRatio' | translate }}
+    </option>
+    <option *ngIf="settingsButtons['sortOptionAspectRatio'].toggled" value="aspectRatioDesc">
+      &#x25BC; {{ 'SIDEBAR.sortAspectRatio' | translate }}
+    </option>
     <option value="random">
       {{ 'SIDEBAR.sortRandom' | translate }}
     </option>

src/app/pipes/sorting.pipe.ts

@@ -5,6 +5,8 @@ import { randomizeArray } from '../../../utility';
 export type SortType = 'default'
                      | 'alphabetAsc'
                      | 'alphabetDesc'
+                     | 'aspectRatioAsc'
+                     | 'aspectRatioDesc'
                      | 'hash' // only used by the duplicateFinderPipe
                      | 'modifiedAsc'
                      | 'modifiedDesc'
@@ -99,6 +101,19 @@ export class SortingPipe implements PipeTransform {
       }
     }
 
+    if (property === 'aspectRatio') {
+      var xAspectRatio = x.width / x.height;
+      var yAspectRatio = y.width / y.height;
+
+      if (xAspectRatio < yAspectRatio) {
+        if (decreasing) { return 1 } else { return -1;}
+      } if (xAspectRatio > yAspectRatio) {
+        if (decreasing) { return -1 } else { return 1;}
+      } else {
+        return 0;
+      }
+    }
+
     if (decreasing) {
       return (x[property]) - (y[property]);
     } else {
@@ -205,6 +220,14 @@ export class SortingPipe implements PipeTransform {
       return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
         return this.sortFunctionLol(x, y, 'tags', false);
       });
+    } else if (sortingType === 'aspectRatioAsc') {
+      return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
+        return this.sortFunctionLol(x, y, 'aspectRatio', false);
+      });
+    } else if (sortingType === 'aspectRatioDesc') {
+      return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
+        return this.sortFunctionLol(x, y, 'aspectRatio', true);
+      });
     } else {
       return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
         return this.sortFunctionLol(x, y, 'index', true);