Fixed bug that ignored inputs with a value of 0

cferdinandi · May 14, 2020 · 4b1aad9 · 4b1aad9
1 parent 5527fe0
commit 4b1aad9
Show file tree

Hide file tree

Showing 29 changed files with 66 additions and 76 deletions.
diff --git a/debug/index.html b/debug/index.html
@@ -1,35 +1,34 @@
 <!DOCTYPE html>
 <html lang="en" >
 <head>
-	<meta charset="UTF-8">
-	<title>CodePen - Reef.js Reduced Test Case</title>
-
-	<style type="text/css">
-		.image {
-			width: 500px;
-			height: 250px;
-			background-size: contain;
-			background-repeat: no-repeat;
-		}
-	</style>
+  <meta charset="UTF-8">
+  <title>CodePen - Reef.js Reduced Test Case</title>
+
+
 </head>
 <body>
 
-	<div id="app">Loading...</div>
+	<div id="app"></div>
 
-	<script src="../dist/reef.js"></script>
+	<script src='../dist/reef.js'></script>
 	<script>
-		var app = new Reef('#app', {
-			data: {
-				images: ['https://i.some-random-api.ml/ZiSHA1RvNg.jpg', 'https://i.some-random-api.ml/IC9sssLQyP.jpg', 'https://i.some-random-api.ml/4DVKzxANVK.jpg']
-			},
-			template: function(props) {
-				return `
-					<div style="background-image: url(https://i.some-random-api.ml/eIlcplhzXI.jpg);" class="image"></div>
-					${props.images.map(function (img) {
-						console.log(img);
-						return `<div style="background-image: url(${img})" class="image"></div>`;
-					}).join('')}`;
+		// If props.percentage is falsy, the value attribute doesn't get added to the progress element.
+
+		// Using the property doesn't work:
+
+		// var app = new Reef("#app", {
+		//   data: { percentage: 0 },
+		//   template: function (props) {
+		//     return `<progress max="100" value="${props.percentage}">${props.percentage}&percnt;</progress>`;
+		//   }
+		// });
+
+		// Nor does a hard-coded attribute:
+
+		var app = new Reef("#app", {
+			data: { percentage: 0 },
+			template: function (props) {
+				return `<progress max="100" value="0">${props.percentage}&percnt;</progress>`;
 			}
 		});
 

diff --git a/debug/script.js b/debug/script.js
diff --git a/dist/reef.amd.js b/dist/reef.amd.js
@@ -1,4 +1,4 @@
-/*! Reef v7.1.3 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/reef */
+/*! Reef v7.1.4 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/reef */
 define(function () { 'use strict';
 
 	//
@@ -420,9 +420,8 @@ define(function () { 'use strict';
 	 * @param  {Boolean} isTemplate If true, these are for the template
 	 */
 	var getDynamicAttributes = function (node, atts, isTemplate) {
-		// if (isTemplate) return;
 		dynamicAttributes.forEach(function (prop) {
-			if (!node[prop] || (isTemplate && node.tagName.toLowerCase() === 'option' && prop === 'selected') || (isTemplate && node.tagName.toLowerCase() === 'select' && prop === 'value')) return;
+			if (node[prop] === undefined || (isTemplate && node.tagName.toLowerCase() === 'option' && prop === 'selected') || (isTemplate && node.tagName.toLowerCase() === 'select' && prop === 'value')) return;
 			atts.push(getAttribute(prop, node[prop]));
 		});
 	};

diff --git a/dist/reef.amd.min.js b/dist/reef.amd.min.js
diff --git a/dist/reef.cjs.js b/dist/reef.cjs.js
@@ -1,4 +1,4 @@
-/*! Reef v7.1.3 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/reef */
+/*! Reef v7.1.4 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/reef */
 'use strict';
 
 //
@@ -420,9 +420,8 @@ var getAttribute = function (name, value) {
  * @param  {Boolean} isTemplate If true, these are for the template
  */
 var getDynamicAttributes = function (node, atts, isTemplate) {
-	// if (isTemplate) return;
 	dynamicAttributes.forEach(function (prop) {
-		if (!node[prop] || (isTemplate && node.tagName.toLowerCase() === 'option' && prop === 'selected') || (isTemplate && node.tagName.toLowerCase() === 'select' && prop === 'value')) return;
+		if (node[prop] === undefined || (isTemplate && node.tagName.toLowerCase() === 'option' && prop === 'selected') || (isTemplate && node.tagName.toLowerCase() === 'select' && prop === 'value')) return;
 		atts.push(getAttribute(prop, node[prop]));
 	});
 };