SHARE
TWEET

Untitled

a guest Jul 21st, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Import the core angular services.
  2. import { Component } from "@angular/core";
  3.  
  4. // ----------------------------------------------------------------------------------- //
  5. // ----------------------------------------------------------------------------------- //
  6.  
  7. // These are the "normal" sort methods that I might code if I was implementing the
  8. // comparison operator manually. These are the "control" operators in this experiment.
  9.  
  10. function normal( a: string, b: string ) : number {
  11.  
  12.     if ( a === b ) {
  13.  
  14.         return( 0 );
  15.  
  16.     }
  17.  
  18.     return( ( a < b ) ? -1 : 1 );
  19.  
  20. }
  21.  
  22. function normalNoCase( a: string, b: string ) : number {
  23.  
  24.     return( normal( a.toUpperCase(), b.toUpperCase() ) );
  25.  
  26. }
  27.  
  28. function invertedNormal( a: string, b: string ) : number {
  29.  
  30.     return( -normal( a, b ) );
  31.  
  32. }
  33.  
  34. function invertedNormalNoCase( a: string, b: string ) : number {
  35.  
  36.     return( -normalNoCase( a, b ) );
  37.  
  38. }
  39.  
  40. // ----------------------------------------------------------------------------------- //
  41. // ----------------------------------------------------------------------------------- //
  42.  
  43. // These are the sort methods that are powered by String.prototype.localeCompare(). The
  44. // .localeCompare() method is generally supported, but has extended options that are less
  45. // generally supported. These are the "experimental" operators in this experiment.
  46.  
  47. function compare( a: string, b: string ) : number {
  48.  
  49.     // Not all browsers support the extended options for localeCompare(). As such, let's
  50.     // wrap the extended version in a try/catch and just fall-back to using the simple
  51.     // version. In this case, we're going to use the "numeric" option, which gets the
  52.     // browser to treat embedded numbers AS NUMBERS, which allows for a more "natural
  53.     // sort" behavior.
  54.     try {
  55.  
  56.         return( a.localeCompare( b, undefined, { numeric: true } ) );
  57.  
  58.     } catch ( error ) {
  59.  
  60.         console.warn( "Extended localeCompare() not supported in this browser." );
  61.         return( a.localeCompare( b ) );
  62.  
  63.     }
  64.  
  65. }
  66.  
  67. function compareNoCase( a: string, b: string ) : number {
  68.  
  69.     return( compare( a.toUpperCase(), b.toUpperCase() ) );
  70.  
  71. }
  72.  
  73. function invertedCompare( a: string, b: string ) : number {
  74.  
  75.     return( -compare( a, b ) );
  76.  
  77. }
  78.  
  79. function invertedCompareNoCase( a: string, b: string ) : number {
  80.  
  81.     return( -compareNoCase( a, b ) );
  82.  
  83. }
  84.  
  85. // ----------------------------------------------------------------------------------- //
  86. // ----------------------------------------------------------------------------------- //
  87.  
  88. @Component({
  89.     selector: "app-root",
  90.     styleUrls: [ "./app.component.less" ],
  91.     template:
  92.     `
  93.         <p class="options">
  94.             <strong>Normal Sort:</strong>
  95.             <a (click)="handleNormalSort( 'asc', false )">ASC</a>
  96.             <a (click)="handleNormalSort( 'asc', true )">ASC No Case</a>
  97.             <a (click)="handleNormalSort( 'desc', false )">DESC</a>
  98.             <a (click)="handleNormalSort( 'desc', true )">DESC No Case</a>
  99.         </p>
  100.  
  101.         <p class="options">
  102.             <strong>LocaleCompare Sort:</strong>
  103.             <a (click)="handleLocaleCompareSort( 'asc', false )">ASC</a>
  104.             <a (click)="handleLocaleCompareSort( 'asc', true )">ASC No Case</a>
  105.             <a (click)="handleLocaleCompareSort( 'desc', false )">DESC</a>
  106.             <a (click)="handleLocaleCompareSort( 'desc', true )">DESC No Case</a>
  107.         </p>
  108.  
  109.         <ul>
  110.             <li *ngFor="let value of values">
  111.                 {{ value }}
  112.             </li>
  113.         </ul>
  114.     `
  115. })
  116. export class AppComponent {
  117.  
  118.     public values: string[];
  119.  
  120.     // I initialize the app component.
  121.     constructor() {
  122.  
  123.         // NOTE: Part of the value-add of the localeCompare() method is that it can
  124.         // handle non-English ASCII values more naturally. However, since I don't know
  125.         // any of the rules around non-English ASCII, I am only testing English ASCII.
  126.         // This way, I'll be able to interpret the results more easily.
  127.         this.values = [
  128.             // Test case-based sorting for English ASCII.
  129.             "a", "A", "z", "Z",
  130.  
  131.             // Test embedded number sorting for English ASCII.
  132.             "0", "9", "30", "30.5", "30.30", "500",
  133.             "Item 0", "Item 9", "Item 30 a", "Item 30.5 a", "Item 30.30 a", "Item 500"
  134.         ];
  135.  
  136.     }
  137.  
  138.     // ---
  139.     // PUBLIC METHODS.
  140.     // ---
  141.  
  142.     // I apply one of the localeCompare() sort operators.
  143.     public handleLocaleCompareSort( direction: "asc" | "desc", caseInsensitive: boolean ) : void {
  144.  
  145.         if ( direction === "asc" ) {
  146.  
  147.             var operator = caseInsensitive
  148.                 ? compareNoCase
  149.                 : compare
  150.             ;
  151.  
  152.         } else {
  153.  
  154.             var operator = caseInsensitive
  155.                 ? invertedCompareNoCase
  156.                 : invertedCompare
  157.             ;
  158.  
  159.         }
  160.  
  161.         this.values.sort( operator );
  162.  
  163.     }
  164.  
  165.  
  166.     // I apply one of the "control case" sort operators.
  167.     public handleNormalSort( direction: "asc" | "desc", caseInsensitive: boolean ) : void {
  168.  
  169.         if ( direction === "asc" ) {
  170.  
  171.             var operator = caseInsensitive
  172.                 ? normalNoCase
  173.                 : normal
  174.             ;
  175.  
  176.         } else {
  177.  
  178.             var operator = caseInsensitive
  179.                 ? invertedNormalNoCase
  180.                 : invertedNormal
  181.             ;
  182.  
  183.         }
  184.  
  185.         this.values.sort( operator );
  186.  
  187.     }
  188.  
  189. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top