Initial commit

Vector-IT · Jun 15, 2021 · f4db2fe · f4db2fe
1 parent 5538b8f
commit f4db2fe
Show file tree

Hide file tree

Showing 3 changed files with 222 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 # Trello JSON Reader
 
 Simple HTML with javascript libraries to read the JSON file produced when exporting a card in Trello.
+
+Simply paste the exported JSON content into the textarea and click the Read button
diff --git a/index.html b/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Trello JSON Reader</title>
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
+	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+
+	<script src="js/jquery.ns-autogrow.min.js"></script>
+
+	<script src="https://unpkg.com/[email protected]/dist/showdown.min.js" crossorigin="anonymous"></script>
+
+	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+
+	<script>
+		var converter = new showdown.Converter();
+
+		$(document).ready(function () {
+			$('#txtJSON').autogrow({ horizontal: false });
+		});
+
+		function readJSON() {
+			var $datos = $('#divDatos');
+			var jsDato = JSON.parse($('#txtJSON').val());
+
+			$datos.html('<h2>' + jsDato.name + '</h2>');
+			$datos.append('<h4>Description</h4>');
+			$datos.append(converter.makeHtml(jsDato.desc));
+
+			if (jsDato.checklists.length > 0) {
+				$datos.append('<h4>Checklists</h4>');
+				$(jsDato.checklists).each(function (index, chkList) {
+					$datos.append('<div class="mt-4">');
+					$datos.append('<strong>' + chkList.name + '</strong>');
+
+					// Items
+					$(chkList.checkItems).each(function (index, item) {
+						$datos.append('<div>');
+						if (item.state == 'complete') {
+							$datos.append('<i class="far fa-fw fa-check-square text-primary"></i> ' + item.name);
+						}
+						else {
+							$datos.append('<i class="far fa-fw fa-square text-primary"></i> ' + item.name);
+						}
+						$datos.append('</div>');
+					});
+
+					$datos.append('</div>');
+				});
+			}
+			return false;
+		}
+	</script>
+</head>
+<body>
+	<div class="container">
+		<div class="p-2 bg-light">
+			<h1>Trello JSON Reader</h1>
+		</div>
+		<form onsubmit="return readJSON()">
+			<div class="form-floating mb-3">
+				<textarea class="form-control form-control-sm" id="txtJSON" style="max-height: 20vh;" required></textarea>
+				<label for="txtJSON">JSON Code</label>
+			</div>
+			<div class="text-end">
+				<button class="btn btn-sm btn-primary">Read</button>
+			</div>
+		</form>
+
+		<hr>
+
+		<div id="divDatos" class="pb-4"></div>
+	</div>
+
+</body>
+</html>
diff --git a/js/jquery.ns-autogrow.min.js b/js/jquery.ns-autogrow.min.js
@@ -0,0 +1,139 @@
+/*!
+  Non-Sucking Autogrow 1.1.6
+  license: MIT
+  author: Roman Pushkin
+  https://github.com/ro31337/jquery.ns-autogrow
+*/
+(function() {
+  var getVerticalScrollbarWidth;
+
+  (function($, window) {
+    return $.fn.autogrow = function(options) {
+      if (options == null) {
+        options = {};
+      }
+      if (options.horizontal == null) {
+        options.horizontal = true;
+      }
+      if (options.vertical == null) {
+        options.vertical = true;
+      }
+      if (options.debugx == null) {
+        options.debugx = -10000;
+      }
+      if (options.debugy == null) {
+        options.debugy = -10000;
+      }
+      if (options.debugcolor == null) {
+        options.debugcolor = 'yellow';
+      }
+      if (options.flickering == null) {
+        options.flickering = true;
+      }
+      if (options.postGrowCallback == null) {
+        options.postGrowCallback = function() {};
+      }
+      if (options.verticalScrollbarWidth == null) {
+        options.verticalScrollbarWidth = getVerticalScrollbarWidth();
+      }
+      if (options.horizontal === false && options.vertical === false) {
+        return;
+      }
+      return this.filter('textarea').each(function() {
+        var $e, $shadow, fontSize, heightPadding, minHeight, minWidth, update;
+        $e = $(this);
+        if ($e.data('autogrow-enabled')) {
+          return;
+        }
+        $e.data('autogrow-enabled');
+        minHeight = (options.minHeight != null? options.minHeight: $e.height());
+        minWidth = $e.width();
+        heightPadding = $e.css('lineHeight') * 1 || 0;
+        $e.hasVerticalScrollBar = function() {
+          return $e[0].clientHeight < $e[0].scrollHeight;
+        };
+        $shadow = $('<div class="autogrow-shadow"></div>').css({
+          position: 'absolute',
+          display: 'inline-block',
+          'background-color': options.debugcolor,
+          top: options.debugy,
+          left: options.debugx,
+          'max-width': $e.css('max-width'),
+          'padding': $e.css('padding'),
+          fontSize: $e.css('fontSize'),
+          fontFamily: $e.css('fontFamily'),
+          fontWeight: $e.css('fontWeight'),
+          lineHeight: $e.css('lineHeight'),
+          resize: 'none',
+          'word-wrap': 'break-word'
+        }).appendTo(document.body);
+        if (options.horizontal === false) {
+          $shadow.css({
+            'width': $e.width()
+          });
+        } else {
+          fontSize = $e.css('font-size');
+          $shadow.css('padding-right', '+=' + fontSize);
+          $shadow.normalPaddingRight = $shadow.css('padding-right');
+        }
+        update = (function(_this) {
+          return function(event) {
+            var height, val, width;
+            val = _this.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n /g, '<br/>&nbsp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\n$/, '<br/>&nbsp;').replace(/\n/g, '<br/>').replace(/ {2,}/g, function(space) {
+              return Array(space.length - 1).join('&nbsp;') + ' ';
+            });
+            if (/(\n|\r)/.test(_this.value)) {
+              val += '<br />';
+              if (options.flickering === false) {
+                val += '<br />';
+              }
+            }
+            $shadow.html(val);
+            if (options.vertical === true) {
+              height = Math.max($shadow.height() + heightPadding, minHeight);
+              $e.height(height);
+            }
+            if (options.horizontal === true) {
+              $shadow.css('padding-right', $shadow.normalPaddingRight);
+              if (options.vertical === false && $e.hasVerticalScrollBar()) {
+                $shadow.css('padding-right', "+=" + options.verticalScrollbarWidth + "px");
+              }
+              width = Math.max($shadow.outerWidth(), minWidth);
+              $e.width(width);
+            }
+            return options.postGrowCallback($e);
+          };
+        })(this);
+        $e.change(update).keyup(update).keydown(update);
+        $(window).resize(update);
+        return update();
+      });
+    };
+  })(window.jQuery, window);
+
+  getVerticalScrollbarWidth = function() {
+    var inner, outer, w1, w2;
+    inner = document.createElement('p');
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+    outer = document.createElement('div');
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+    w1 = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    w2 = inner.offsetWidth;
+    if (w1 === w2) {
+      w2 = outer.clientWidth;
+    }
+    document.body.removeChild(outer);
+    return w1 - w2;
+  };
+
+}).call(this);