From 59b3b901b54f0d21fef683e0b402a1ba81c90c19 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 20 Dec 2017 11:34:13 +0200 Subject: [PATCH 1/5] Build --- README.md | 30 ++++++++++++++++++++++++++++++ docs/index.html | 22 ++++++++++++++++++++++ tag_database | 1 + 3 files changed, 53 insertions(+) diff --git a/README.md b/README.md index 8602666f2..76c1ece00 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,7 @@ * [`cleanObj`](#cleanobj) * [`objectFromPairs`](#objectfrompairs) * [`objectToPairs`](#objecttopairs) +* [`orderBy`](#orderby) * [`select`](#select) * [`shallowClone`](#shallowclone) * [`truthCheckCollection`](#truthcheckcollection) @@ -1534,6 +1535,35 @@ const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]); // objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]]) ``` +[⬆ back to top](#table-of-contents) + +### orderBy + +Returns a sorted array of objects ordered by properties and orders. + +Uses a custom implementation of sort, that reduces the props array argument with a default value of 0, it uses destructuring to swap the properties position depending on the order passed. +If no orders array is passed it sort by 'asc' by default. + +```js +const orderBy = (arr, props, orders) => + arr.sort((a, b) => + props.reduce((acc, prop, i) => { + if (acc === 0) { + const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]]; + acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0; + } + return acc; + }, 0) + ); +/* +const users = [{ 'name': 'fred', 'age': 48 },{ 'name': 'barney', 'age': 36 }, + { 'name': 'fred', 'age': 40 },{ 'name': 'barney', 'age': 34 }]; +orderby(users, ['name', 'age'], ['asc', 'desc']) -> [{name: 'barney', age: 36}, {name: 'barney', age: 34}, {name: 'fred', age: 48}, {name: 'fred', age: 40}] +orderby(users, ['name', 'age']) -> [{name: 'barney', age: 34}, {name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}] +*/ +``` + + [⬆ back to top](#table-of-contents) ### select diff --git a/docs/index.html b/docs/index.html index f54dbf473..0e946aa88 100644 --- a/docs/index.html +++ b/docs/index.html @@ -154,6 +154,7 @@ cleanObj objectFromPairs objectToPairs +orderBy select shallowClone truthCheckCollection @@ -964,6 +965,27 @@ Also if you give it a special key (childIndicator) it will search d 
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
 // objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])
+

orderBy

+

Returns a sorted array of objects ordered by properties and orders.

+

Uses a custom implementation of sort, that reduces the props array argument with a default value of 0, it uses destructuring to swap the properties position depending on the order passed. +If no orders array is passed it sort by 'asc' by default.

+
const orderBy = (arr, props, orders) =>
+  arr.sort((a, b) =>
+    props.reduce((acc, prop, i) => {
+      if (acc === 0) {
+        const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
+        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
+      }
+      return acc;
+    }, 0)
+  );
+/*
+const users = [{ 'name': 'fred',   'age': 48 },{ 'name': 'barney', 'age': 36 },
+  { 'name': 'fred',   'age': 40 },{ 'name': 'barney', 'age': 34 }];
+orderby(users, ['name', 'age'], ['asc', 'desc']) -> [{name: 'barney', age: 36}, {name: 'barney', age: 34}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]
+orderby(users, ['name', 'age']) -> [{name: 'barney', age: 34}, {name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]
+*/
+

select

Retrieve a property that indicated by the selector from object.

If property not exists returns undefined.

diff --git a/tag_database b/tag_database index 3a78d941c..a6657b911 100644 --- a/tag_database +++ b/tag_database @@ -71,6 +71,7 @@ median:math nthElement:array objectFromPairs:object objectToPairs:object +orderBy:object palindrome:math percentile:math pick:array From 08ebac0341a1cebe6e223a02c6147e9f48c9cf1e Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 20 Dec 2017 11:42:08 +0200 Subject: [PATCH 2/5] Fix search bar --- docs/index.html | 2 +- static-parts/index-start.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index 0e946aa88..ea36c0091 100644 --- a/docs/index.html +++ b/docs/index.html @@ -20,7 +20,7 @@ code { transform: scale(1); } /* Deals with the issue described in #243 */ pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);} .group{position:relative;margin-top:2em;margin-bottom:-1em} - .search{font-size:14px;margin-top:-.1em;display:block;width:320px;border:none;border-bottom:1px solid var(--nav-link-color)} + .search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)} .search:focus{outline:none} label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px} .search:focus ~ label,.search:valid ~ label{top:-20px;font-size:14px;color:var(--nav-link-color)} diff --git a/static-parts/index-start.html b/static-parts/index-start.html index 210d8357a..c58e6248a 100644 --- a/static-parts/index-start.html +++ b/static-parts/index-start.html @@ -20,7 +20,7 @@ code { transform: scale(1); } /* Deals with the issue described in #243 */ pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);} .group{position:relative;margin-top:2em;margin-bottom:-1em} - .search{font-size:14px;margin-top:-.1em;display:block;width:320px;border:none;border-bottom:1px solid var(--nav-link-color)} + .search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)} .search:focus{outline:none} label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px} .search:focus ~ label,.search:valid ~ label{top:-20px;font-size:14px;color:var(--nav-link-color)} From d26d4b30e9e5b3cfbe92bba1931061c57beb1524 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 20 Dec 2017 11:59:41 +0200 Subject: [PATCH 3/5] Build --- README.md | 2 +- docs/index.html | 2 +- snippets/arrayToHtmlList.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 76c1ece00..e30f1b5e1 100644 --- a/README.md +++ b/README.md @@ -769,7 +769,7 @@ const zip = (...arrays) => { ### arrayToHtmlList -Converts the given array elements into '
  • ' tags and appends them to the list of the given id. +Converts the given array elements into `
  • ` tags and appends them to the list of the given id. Use `Array.map()` and `document.querySelector()` to create a list of html tags. diff --git a/docs/index.html b/docs/index.html index ea36c0091..d82208699 100644 --- a/docs/index.html +++ b/docs/index.html @@ -527,7 +527,7 @@ If lengths of the argument-arrays vary, undefined is used where no

    • Browser

    arrayToHtmlList

    -

    Converts the given array elements into '<li>' tags and appends them to the list of the given id.

    +

    Converts the given array elements into <li> tags and appends them to the list of the given id.

    Use Array.map() and document.querySelector() to create a list of html tags.

    const arrayToHtmlList = (arr, listID) => arr.map(item => document.querySelector("#"+listID).innerHTML+=`<li>${item}</li>`);
 // arrayToHtmlList(['item 1', 'item 2'],'myListID')
diff --git a/snippets/arrayToHtmlList.md b/snippets/arrayToHtmlList.md
index 1dab3c778..bf5ba5721 100644
--- a/snippets/arrayToHtmlList.md
+++ b/snippets/arrayToHtmlList.md
@@ -1,6 +1,6 @@
 ### arrayToHtmlList
 
-Converts the given array elements into '
  • ' tags and appends them to the list of the given id.
+Converts the given array elements into `
  • ` tags and appends them to the list of the given id.
 
 Use `Array.map()` and `document.querySelector()` to create a list of html tags.
 

From 6a64724da0455cc753a69c66f3602a3879eb9603 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris 
Date: Wed, 20 Dec 2017 13:01:51 +0200
Subject: [PATCH 4/5] Build

---
 docs/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 13b65503d..c103d8310 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -331,7 +331,7 @@ Use Array.reduce() to create an object, where the keys are produced
 
    Initializes an array containing the numbers in the specified range where start and end are inclusive.
    
 
    Use Array((end + 1) - start) to create an array of the desired length, Array.map() to fill with the desired values in a range.
 You can omit start to use a default value of 0.
    
-
    const initializeArrayWithRange = (end, start = 0) =>
+
    const initializeArrayWithRange = (end, start = 0) => 
   Array.from({ length: (end + 1) - start }).map((v, i) => i + start);
 // initializeArrayWithRange(5) -> [0,1,2,3,4,5]
 // initializeArrayWithRange(7, 3) -> [3,4,5,6,7]
@@ -358,7 +358,7 @@ You can omit value to use a default value of 0.

    • mapObject

    Maps the values of an array to an object using a function, where the key-value pairs consist of the original value as the key and the mapped value.

    Use an anonymous inner function scope to declare an undefined memory space, using closures to store a return value. Use a new Array to stor the array with a map of the function over its data set and a comma operator to return a second step, without needing to move from one context to another (due to closures and order of operations).

    -
    const mapObject = (arr, fn) =>
+
    const mapObject = (arr, fn) => 
   (a => (a = [arr, arr.map(fn)], a[0].reduce( (acc,val,ind) => (acc[val] = a[1][ind], acc), {}) )) ( );
 /*
 const squareIt = arr => mapObject(arr, a => a*a)
@@ -408,7 +408,7 @@ Use Array.push() to keep track of pulled values
    
   let removed = [];
   let pulled = arr.map((v, i) => pullArr.includes(i) ? removed.push(v) : v)
                   .filter((v, i) => !pullArr.includes(i))
-  arr.length = 0;
+  arr.length = 0; 
   pulled.forEach(v => arr.push(v));
   return removed;
 }
@@ -425,7 +425,7 @@ Use Array.push() to keep track of pulled values
    
 Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values.
 Use Array.push() to keep track of pulled values
    
 
    const pullAtValue = (arr, pullArr) => {
-  let removed = [],
+  let removed = [], 
     pushToRemove = arr.forEach((v, i) => pullArr.includes(v) ? removed.push(v) : v),
     mutateTo = arr.filter((v, i) => !pullArr.includes(v));
   arr.length = 0;
@@ -787,7 +787,7 @@ Count and return the number of 1s in the string, using match(

    isArmstrongNumber

    Checks if the given number is an armstrong number or not.

    Convert the given number into array of digits. Use Math.pow() to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return true otherwise false.

    -
    const isArmstrongNumber = digits =>
+
    const isArmstrongNumber = digits => 
   ( arr => arr.reduce( ( a, d ) => a + Math.pow( parseInt( d ), arr.length ), 0 ) == digits ? true : false )( ( digits+'' ).split( '' ) );
 // isArmstrongNumber(1634) -> true
 // isArmstrongNumber(371) -> true

From 8906dbbd23c96610b115c23802060d2700c71a41 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris 
Date: Wed, 20 Dec 2017 13:29:59 +0200
Subject: [PATCH 5/5] Fix website navigation and styling discrepancies

---
 docs/index.html               | 11 ++++++-----
 static-parts/index-start.html | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index c103d8310..ad4060efb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,8 +22,9 @@
       .group{position:relative;margin-top:2em;margin-bottom:-1em}
       .search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
       .search:focus{outline:none}
-      label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px}
-      .search:focus ~ label,.search:valid ~ label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+      label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
+      .search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+      label#menu-toggle { width: 3.4375rem;}
     
     
   
@@ -38,9 +39,9 @@
     
     
    
       
     30 seconds of code
-        Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
+        Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
       
    
-      
+      
     
    
     
    
       
@@ -49,7 +50,7 @@
           
           
           
-          
+          
           
    
           
 
diff --git a/static-parts/index-start.html b/static-parts/index-start.html
index 0c828f195..5f1f3ff1a 100644
--- a/static-parts/index-start.html
+++ b/static-parts/index-start.html
@@ -22,8 +22,9 @@
       .group{position:relative;margin-top:2em;margin-bottom:-1em}
       .search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
       .search:focus{outline:none}
-      label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px}
-      .search:focus ~ label,.search:valid ~ label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+      label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
+      .search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+      label#menu-toggle { width: 3.4375rem;}
     
     
   
@@ -38,9 +39,9 @@
     
     
    
       
     30 seconds of code
-        Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
+        Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
       
    
-      
+      
     
    
     
    
       
@@ -49,6 +50,6 @@
           
           
           
-          
+