jekyll-theme-recipe 0.2.2 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c9178f7e12bcfd1c2b50c6f1d7bafa8cf1125652284bb0a6e444af0d4ba913d
-  data.tar.gz: 54fa94c51ce22a956ac3ab0ea1e0aa4a49b3bc54476847edb2ad12fb0af20a01
+  metadata.gz: 6415f1dd68e7846527bdc5801317eef3952cf0859e1f41c50feb8124bdf2225e
+  data.tar.gz: c41ac1b25dbaff9593c47422529fcf5d328b984d0302395f40806b1fef52081f
 SHA512:
-  metadata.gz: af516cb7a8d32d6e49af0322185dd336b035b3c721f946a6e2708f795a1bd5c52a1284aa25a8a2d5144b1a42e9b294739ae343d70a6f17f9983b844cdb53e18b
-  data.tar.gz: 16470ae2adb286bfafce2a4a86fb41dad5fc955d74c03744fcb88a88a3279ebd94cd803ece55a45fce91e67742065ccaaa55e373155d31c393ba815b3e6a7a5d
+  metadata.gz: 30442ecc573dd4f02edb776ff21fa5602bedede639579ec2ca8e8e9e6f4dcc87b63dfb9b65b3b73a627c9b423832c1832d2404887c34d9c778f210aa45a0dfc3
+  data.tar.gz: ad899846b9563972b3bc747ce47ffabaec2748f1bdab148e5967d59447c24ae1a5490ac902b81070e638387c0c0bb6b4e9966505e3afb034cb3d8b9dafd5bc13

data/_layouts/post.html

@@ -12,7 +12,10 @@ layout: default
 	</div>
 
 	<ul id="recipe" class="recipe-overview">
-		<li title="Servings">{% include recipe-icon.html icon="quantity" %}<span>{{ page.recipe.servings }}</span></li>
+		<li title="Servings">{% include recipe-icon.html icon="quantity" %}<span>
+			<input id="servings_number" type="number" min="1" value="{{ page.recipe.servings }}"> 
+			<label for="servings_number">{{ page.recipe.servings_name }}</label>
+		</span></li>
 		<li title="Prep Time">{% include recipe-icon.html icon="time" %}<span>{{ page.recipe.prep }}</span></li>
 		<li title="Cook Time">{% include recipe-icon.html icon="cook" %}<span>{{ page.recipe.cook }}</span></li>
 	</ul>
@@ -66,8 +69,7 @@ layout: default
 	{% endif %}
 </article>
 
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script type="text/javascript" src="{{ site.baseurl }}/assets/js/jquery.imgPin.min.js"></script>
+<script type="text/javascript" src="{{ site.baseurl }}/assets/js/servings.js"></script>
 <script>
 	$(function() {
 		$('.post img').imgPin();

data/_sass/blog.scss

@@ -34,6 +34,29 @@
 				display: inline-block;
 			}
 		}
+
+		input[type="number"] {
+			max-width: 50px;
+
+			background-color: black;
+			color: white;
+			border: none;
+			padding: 4px;
+
+			box-sizing: border-box;
+
+			&:hover, &:active, &:focus {
+				background-color: initial;
+				color: initial;
+
+				border: 1px solid black;
+			}
+		}
+
+		label {
+			display: initial;
+			cursor: pointer;
+		}
 	}
 
 	.recipe-contents {
@@ -41,6 +64,10 @@
 			display: flex;
 		}
 
+		p {
+			margin-bottom: 0;	
+		}
+
 		// ingredients
 		tr {
 			vertical-align: top;

data/assets/js/servings.js

@@ -0,0 +1,62 @@
+const portionElements = document.querySelectorAll('tr > td:first-child');
+
+const portionInput = document.querySelector('input#servings_number');
+var currentPortion = portionInput.value;
+portionInput.addEventListener("change", calculateServings);
+
+function calculateServings(){
+    const newPortion = portionInput.value;
+
+    for (var i = 0; i  < portionElements.length; i++) {
+        if(portionElements[i].innerHTML == "&nbsp;"){ // "&nbsp;" == empty space
+            continue;   // no portion specified
+        }
+    
+        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;
+}
+
+// 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;
+    
+    var divisor = gcd(numerator, denominator);    
+    
+    numerator /= divisor;
+    denominator /= divisor; 
+
+    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);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-recipe
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.1
 platform: ruby
 authors:
 - Hanno Witzleb
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-12 00:00:00.000000000 Z
+date: 2023-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -164,6 +164,7 @@ files:
 - assets/images/favicon.png
 - assets/images/logo.svg
 - assets/js/jquery.imgPin.min.js
+- assets/js/servings.js
 homepage: https://github.com/Xipit/jekyll-theme-recipe
 licenses:
 - CC0-1.0