jekyll-theme-recipe 0.3.3 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11713bc86ca101f2228b407fd592975fa5926e766dbb9be19fc63a2b3a46c7e6
-  data.tar.gz: f1ea38779d1b54ceeb6d27dd78c12dd5488e78a79a5c3dee1bea2bee083e19cb
+  metadata.gz: f78ad054876a97b80c8da595795addc7e0263a422af1ca1daec4913d5d2ef85e
+  data.tar.gz: 48c9f6440e2f408d0149b16101e8fae26d0f5361fc2e4ce1c0e2fa1d6fd4e27d
 SHA512:
-  metadata.gz: 99c66e784a0d85c680800e0132a588a581d212ff9d26a01014e2ec101af9052c9ea439e78479a076c0a6717c4476f08065442bfebfef3b3de60a9c17f75f38da
-  data.tar.gz: 8707fca4b4b6af2cfa972ed7f69a949a55dcfbf8d3d2c125efe85e06344149846777169854b544e9d2a46720b3cb2b8cb15cc57ece7be36dc8d1e7c00ec386ed
+  metadata.gz: 66d7985a79821429163542003537e7971bfc694875d3ffec7fd701c0c9e8c4eb0f5da1eaa9ed84f5ee5c7efa12887e3597b75e6302508c67e5b5e9a8d4df241f
+  data.tar.gz: b0103ce7f6562fa89496bb12bececd4e90d8eba21bdaa693da1c541493cf66b8850f9151a36ef9333183c305f06024a01d9822ef490fd1d521902f90c8a34373

data/_layouts/post.html

@@ -69,4 +69,4 @@ layout: default
 	{% endif %}
 </article>
 
-<script type="text/javascript" src="{{ site.baseurl }}/assets/js/servings.js"></script>
+<script type="text/javascript" src="{{ site.baseurl }}/assets/js/servings.js" defer></script>

data/assets/js/servings.js

@@ -1,62 +1,106 @@
-const portionElements = document.querySelectorAll('tr > td:first-child');
+class Ingredient {
+    constructor(referenceValue, reference){
+        this.referenceValue = this.getDecimalValue(referenceValue);
+        this.reference = reference;
+    }
 
-const portionInput = document.querySelector('input#servings_number');
-var currentPortion = portionInput.value;
-portionInput.addEventListener("change", calculateServings);
+    getServingsValue(newServing, oldServing){
+        if(isNaN(this.referenceValue)){
+            return null;
+        }
 
-function calculateServings(){
-    const newPortion = portionInput.value;
+        return this.referenceValue * newServing / oldServing;
+    }
 
-    for (var i = 0; i  < portionElements.length; i++) {
-        if(portionElements[i].innerHTML == "&nbsp;"){ // "&nbsp;" == empty space
-            continue;   // no portion specified
+    calcAndRenderNewServingsValue(newServing, oldServing){
+        const newServingsValue = this.trimValue(this.getServingsValue(newServing, oldServing));
+
+        if(newServingsValue != null){
+            this.reference.innerHTML = newServingsValue.toString().includes(".")
+                ? this.decimalToFraction(newServingsValue)
+                : newServingsValue;
         }
-    
-        const portionElementValue = portionElements[i].innerHTML.search('/') >=0 
-            ? fractionToDecimal(portionElements[i].innerHTML)
-            : Number.parseFloat(portionElements[i].innerHTML);
-    
-        const newPortionValue = trimNumberAfterDecimalPoint(portionElementValue * newPortion / currentPortion, 3);
-    
-        const newPortionString = newPortionValue.toString();
-        portionElements[i].innerHTML = newPortionString.includes('.')
-            ? decimalToFraction(newPortionString)
-            : newPortionString;
     }
 
-    currentPortion = newPortion;
-}
+    // "45 1/3" -> "45" (level of precision hinders understanding)
+    trimValue(servingsValue){
+        if(this.referenceValue >= 10){
+            return servingsValue.toFixed(0);
+        }
+        return servingsValue;
+    }
 
-// from: http://jsfiddle.net/5QrhQ/5/ or https://stackoverflow.com/a/23575406
-function decimalToFraction(decimal){
-    var len = decimal.toString().length - 2;
-    
-    var denominator = Math.pow(10, len);
-    var numerator = decimal * denominator;
+    toString(){
+        return "value: " + this.referenceValue + ", reference html: " + this.reference.innerHTML;
+    }
+
+    // from: http://jsfiddle.net/5QrhQ/5/ or https://stackoverflow.com/a/23575406
+    decimalToFraction(decimal){
+        var len = decimal.toString().length - 2;
+        
+        var denominator = Math.pow(10, len);
+        var numerator = decimal * denominator;
+        
+        var divisor = this.gcd(numerator, denominator);    
+        
+        numerator /= divisor;
+        denominator /= divisor; 
+
+        return numerator > denominator 
+            ? Math.floor(numerator / denominator) + " " + numerator % denominator + '/' + Math.floor(denominator)
+            : Math.floor(numerator) + '/' + Math.floor(denominator);
+    }
+    gcd(a, b) {
+        if (b < 0.0000001) return a;                // Since there is a limited precision we need to limit the value.
     
-    var divisor = gcd(numerator, denominator);    
+        return this.gcd(b, Math.floor(a % b));           // Discard any fractions due to limitations in precision.
+    };
+    getDecimalValue(value){
+        return value.includes("/")
+            ? this.fractionToDecimal(value)
+            : Number.parseFloat(value);
+    } 
+    // from https://stackoverflow.com/a/49246271 
+    fractionToDecimal(fraction) {
+        const actualFraction = this.expandedFractionToSimple(fraction);    
     
-    numerator /= divisor;
-    denominator /= divisor; 
+        return actualFraction
+          .split('/')
+          .reduce((numerator, denominator, i) =>
+            numerator / (i ? denominator : 1)
+          );
+    }
+    expandedFractionToSimple(fraction){
+        if(fraction.includes(" ")){
+            factorSplit = fraction.split(" ");
+            factor = factorSplit[0];
+            
+            fractionSplit = factorSplit[1].split("/");
+            numerator = fractionSplit[0];
+            denominator = fractionSplit[1];
+            
+            return ((Number.parseInt(factor) * Number.parseInt(denominator)) + Number.parseInt(numerator)) + "/" + Number.parseInt(denominator);
+        }    
+        return fraction;
+    }
 
-    return Math.floor(numerator) + '/' + Math.floor(denominator);
-}
-function gcd(a, b) {
-    if (b < 0.0000001) return a;                // Since there is a limited precision we need to limit the value.
-  
-    return gcd(b, Math.floor(a % b));           // Discard any fractions due to limitations in precision.
-};
-
-
-// from https://stackoverflow.com/a/49246271 
-function fractionToDecimal(fraction) {
-    return fraction
-      .split('/')
-      .reduce((numerator, denominator, i) =>
-        numerator / (i ? denominator : 1)
-      );
 }
 
-function trimNumberAfterDecimalPoint(number, decimals){
-    return Math.round(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
+let ingredients = [];
+// create a Ingredient Element for every HTML ELement
+const ingredientHTMLElements = document.querySelectorAll('tr > td:first-child');
+ingredientHTMLElements.forEach((ingredient) => ingredients.push(new Ingredient(ingredient.innerHTML, ingredient)));
+
+
+const servingsInput = document.querySelector('input#servings_number');
+var referenceServings = servingsInput.value;
+
+/// react to servings input
+servingsInput.addEventListener("change", calculateServings);
+function calculateServings(){
+    const newPortion = servingsInput.value;
+
+    for (var i = 0; i  < ingredients.length; i++) {
+        ingredients[i].calcAndRenderNewServingsValue(newPortion, referenceServings);
+    }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-recipe
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.4.0
 platform: ruby
 authors:
 - Hanno Witzleb
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-23 00:00:00.000000000 Z
+date: 2023-03-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -184,7 +184,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.26
+rubygems_version: 3.4.6
 signing_key:
 specification_version: 4
 summary: Recipe is a Jekyll theme for recipe websites, and adapted from CloudCannons