From b8ea570a8a660d9a7d2d3231030d66adc47ce516 Mon Sep 17 00:00:00 2001
From: Roy Roth <roykroth@gmail.com>
Date: Thu, 7 Feb 2019 20:02:14 -0800
Subject: [PATCH 1/2] Adds dropdown menu to scale ingredients

---
 _layouts/recipe.html |  12 +++-
 css/bass.css         |  11 +++-
 js/scale_recipes.js  | 148 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 js/scale_recipes.js

diff --git a/_layouts/recipe.html b/_layouts/recipe.html
index 15822c5d9..e7586fee4 100644
--- a/_layouts/recipe.html
+++ b/_layouts/recipe.html
@@ -45,6 +45,15 @@ <h4 class="blue mt0 mb2 xs-center">Components</h4>
 
       {% if page.ingredients %}
       <h4 class="blue mt0 mb2 xs-center">Ingredients</h4>
+      <div id='scaleSelect' , align="left" , class="select-scale">
+        <select name="selectRecipeScale" , onchange="liveScaleRecipe.call(this, event)">
+          <option value=0.5>&frac12;</option>
+          <option selected value=1>1</option>
+          <option value=1.5>1 &frac12;</option>
+          <option value=2>2</option>
+          <option value=3>3</option>
+        </select>
+      </div>
       <ul itemprop="ingredients">
         <!-- list ingredients that make up recipe -->
         {% for ingredient in page.ingredients %}
@@ -149,4 +158,5 @@ <h4 class="blue regular xs-center">Steps</h4>
 
   });
   
-</script>
\ No newline at end of file
+</script>
+<script src="/js/scale_recipes.js"></script>
\ No newline at end of file
diff --git a/css/bass.css b/css/bass.css
index 8daace1a7..fe21649b3 100644
--- a/css/bass.css
+++ b/css/bass.css
@@ -1254,4 +1254,13 @@ input[type=range] {
 .border-darken-2 { border-color: rgba(0,0,0,.125) }
 .border-darken-3 { border-color: rgba(0,0,0,.25) }
 .border-darken-4 { border-color: rgba(0,0,0,.5) }
-.muted { opacity: .5 }
\ No newline at end of file
+.muted { opacity: .5 }
+
+.select-scale {
+  display: inline;
+}
+
+.select-scale:before {
+  content: 'Scale';
+  color: black;
+}
\ No newline at end of file
diff --git a/js/scale_recipes.js b/js/scale_recipes.js
new file mode 100644
index 000000000..60fcc286c
--- /dev/null
+++ b/js/scale_recipes.js
@@ -0,0 +1,148 @@
+'use strict';
+const scaleFactor = 1;
+
+preprocessIngredients();
+scaleRecipe(scaleFactor);
+
+//  --- Functions needed ---
+
+function toNumber(inString){
+    let result;
+    if (inString.includes('/')){
+        let z = inString.split('/');
+        result = z[0]/z[1];
+    }
+    else {
+        result = +inString
+    }
+    return result
+}
+
+function quantityToNumber(inString){
+    let valueArray = inString.split(/\s/g);
+    valueArray = valueArray.map(item => toNumber(item));
+    let theTotal = valueArray.reduce((a, b) => a + b);
+    return theTotal
+}
+
+function numberToPretty(inNum){
+    let wholeNumber;
+    if (inNum < 1){
+        wholeNumber = "";
+    }
+    else {
+        wholeNumber = Math.trunc(inNum).toString();
+    }
+    let fraction = inNum % 1;
+    let fracRep;
+    if (Math.abs(fraction) < 0.00001){
+        fracRep = ''
+    } else if (Math.abs(fraction - 1/2) < 0.00001){
+        fracRep = " &frac12;";
+    } else if (Math.abs(fraction - 1 / 4) < 0.00001) {
+        fracRep = " &frac14;";
+    } else if (Math.abs(fraction - 3 / 4) < 0.00001) {
+        fracRep = " &frac34;";
+    } else if (Math.abs(fraction - 1 / 3) < 0.00001) {
+        fracRep = " &frac13;";
+    } else if (Math.abs(fraction - 2 / 3) < 0.00001) {
+        fracRep = " &frac23;";
+    } else if (Math.abs(fraction - 1 / 8) < 0.00001) {
+        fracRep = " &frac18;";
+    } else if (Math.abs(fraction - 3 / 8) < 0.00001) {
+        fracRep = " &frac38;";
+    } else if (Math.abs(fraction - 5 / 8) < 0.00001) {
+        fracRep = " &frac58;";
+    } else if (Math.abs(fraction - 7 / 8) < 0.00001) {
+        fracRep = " &frac78;";
+    } else if (Math.abs(fraction - 1 / 6) < 0.00001) {
+        fracRep = " &frac16;";
+    } else if (Math.abs(fraction - 5 / 6) < 0.00001) {
+        fracRep = " &frac56;";
+    } else if (Math.abs(fraction - 1 / 9) < 0.00001) {
+        fracRep = " <sup>1</sup>&frasl;<sub>9</sub>";
+    } else if (Math.abs(fraction - 2 / 9) < 0.00001) {
+        fracRep = " <sup>2</sup>&frasl;<sub>9</sub>";
+    } else if (Math.abs(fraction - 4 / 9) < 0.00001) {
+        fracRep = " <sup>4</sup>&frasl;<sub>9</sub>";
+    } else if (Math.abs(fraction - 5 / 9) < 0.00001) {
+        fracRep = " <sup>5</sup>&frasl;<sub>9</sub>";
+    } else if (Math.abs(fraction - 7 / 9) < 0.00001) {
+        fracRep = " <sup>7</sup>&frasl;<sub>9</sub>";
+    } else if (Math.abs(fraction - 8 / 9) < 0.00001) {
+        fracRep = " <sup>8</sup>&frasl;<sub>9</sub>";
+    } else {
+        fracRep = toString(fraction);
+    }
+    // Now, if it matches a nice fraction code in html give it that, otherwise leave as decimal
+    // let final = (wholeNumber + fracRep).trim() // concatenate
+    let final = wholeNumber + fracRep
+    return final;
+}
+
+function extractQuantity(ingredient){
+    let reMatch = ingredient.match(/^\d[/\d\s\.]*\s/i);
+    let quantity;
+    if (reMatch === null) {
+        quantity = "";
+    }
+    else {
+        quantity = reMatch[0];
+    }
+    return quantity
+}
+
+function scaleIngredient(bareIngredient, quantity, scale = 1){
+    let matchLength;
+    if (quantity == ""){
+        matchLength = 0
+        quantity = '1'
+    }
+    else {
+        matchLength = quantity.length
+    }
+    let newQuantity = numberToPretty(scale*quantityToNumber(quantity));
+    let result = newQuantity + ' ' + bareIngredient;
+    return result
+}
+
+function preprocessIngredients(){
+    let ingredients = document.querySelectorAll('li[itemprop=recipeIngredient]')
+    let quantityArray = [];
+    let ingredientBaseArray = [];
+    let ingredientQuantity;
+    let ingredientBase;
+    for (let i = 0; i < ingredients.length; i++) {
+        let ingredient = ingredients[i].firstElementChild;
+        // Now, run the code to modify the ingredient
+        ingredientQuantity = extractQuantity(ingredient.innerHTML);
+        quantityArray.push(ingredientQuantity);
+        ingredientBase = ingredient.innerHTML.substring(ingredientQuantity.length);
+        ingredientBaseArray.push(ingredientBase)
+    }
+    // Now I need to write this array to a file in the document tree
+    let div = document.createElement('div');
+    div.id = 'ingredient-quantities';
+    div.dataset.quantities = quantityArray.toString()
+    document.body.appendChild(div)
+    // Now for the base ingredients
+    let div2 = document.createElement('div');
+    div2.id = 'ingredient-bases';
+    div2.dataset.ingredients = ingredientBaseArray.toString()
+    document.body.appendChild(div2)
+}
+
+function scaleRecipe(scale = 1){
+    let ingredients = document.querySelectorAll('li[itemprop=recipeIngredient]')
+    let quantities = document.getElementById('ingredient-quantities').dataset.quantities.split(',');
+    let bases = document.getElementById('ingredient-bases').dataset.ingredients.split(',');
+    for (let i = 0; i < ingredients.length; i++) {
+        let ingredient = ingredients[i].firstElementChild;
+        // Now, run the code to modify the ingredient
+        ingredient.innerHTML = scaleIngredient(bases[i], quantities[i], scale);
+    }
+}
+
+function liveScaleRecipe(event){
+    scaleRecipe(this.options[this.selectedIndex].value)
+}

From 4c46cd80c364e0e135c1e4ccf951c2f84b2ecc50 Mon Sep 17 00:00:00 2001
From: Roy Roth <roykroth@gmail.com>
Date: Fri, 8 Feb 2019 11:39:12 -0800
Subject: [PATCH 2/2] replaced comma with semicolon to allow commas in
 ingredients

---
 js/scale_recipes.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/scale_recipes.js b/js/scale_recipes.js
index 60fcc286c..22e49ba7b 100644
--- a/js/scale_recipes.js
+++ b/js/scale_recipes.js
@@ -123,19 +123,19 @@ function preprocessIngredients(){
     // Now I need to write this array to a file in the document tree
     let div = document.createElement('div');
     div.id = 'ingredient-quantities';
-    div.dataset.quantities = quantityArray.toString()
+    div.dataset.quantities = quantityArray.join(';')
     document.body.appendChild(div)
     // Now for the base ingredients
     let div2 = document.createElement('div');
     div2.id = 'ingredient-bases';
-    div2.dataset.ingredients = ingredientBaseArray.toString()
+    div2.dataset.ingredients = ingredientBaseArray.join(';')
     document.body.appendChild(div2)
 }
 
 function scaleRecipe(scale = 1){
     let ingredients = document.querySelectorAll('li[itemprop=recipeIngredient]')
-    let quantities = document.getElementById('ingredient-quantities').dataset.quantities.split(',');
-    let bases = document.getElementById('ingredient-bases').dataset.ingredients.split(',');
+    let quantities = document.getElementById('ingredient-quantities').dataset.quantities.split(';');
+    let bases = document.getElementById('ingredient-bases').dataset.ingredients.split(';');
     for (let i = 0; i < ingredients.length; i++) {
         let ingredient = ingredients[i].firstElementChild;
         // Now, run the code to modify the ingredient