bloomreach · ShaneAhern-IRE · Apr 6, 2020
diff --git a/samples/bacon ipsum/CMS_Config.png b/samples/bacon ipsum/CMS_Config.png
diff --git a/samples/bacon ipsum/README.md b/samples/bacon ipsum/README.md
@@ -0,0 +1,13 @@
+# Bloomreach OSM Location picker
+This project is a Bloomreach [OpenUI extension](https://documentation.bloomreach.com/library/concepts/open-ui/introduction.html). 
+The purpose of the extension is to allow editors to generate lorem ipsum quickly using the [Bacon Ipsum API](https://baconipsum.com/json-api/)
+
+
+![Bacon Ipsum demo](demo.gif)
+
+
+## How to setup the extension in your project?
+
+1. You will have to load the extension, either on its own server (npm/apache) or somehow inside Bloomreach (cms/site).
+2. You'll have to define the extension under `/hippo:configuration/hippo:frontend/cms/ui-extensions`. Sample configuration below:
+![screenshot](CMS_Config.png)
diff --git a/samples/bacon ipsum/demo.gif b/samples/bacon ipsum/demo.gif
diff --git a/samples/bacon ipsum/index.html b/samples/bacon ipsum/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Bacon Ipsum</title>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script type="text/javascript" src="script.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+</head>
+<body>
+
+<img src="https://baconipsum.com/wp-content/uploads/2011/06/bacon-ipsum-banner1.jpg" alt="Bacon Ipsum" />
+<br/>
+
+<form id="form">
+    <div class="form-group">
+        <label for="numberOfParagraphs">Number of Paragraphs </label>
+        <input type="number" class="form-control" max="100" id="numberOfParagraphs" placeholder="enter number of paragraphs to generate">
+    </div>
+</form>
+<p id="log"></p>
+ <button id="btn" class="btn btn-primary"> Submit</button>
+
+<div id="custom"></div>
+
+
+<br/>
+<script type="text/javascript">
+    document.getElementById('btn').addEventListener('click', generateParagraph)
+
+    function generateParagraph() {
+        const div = $('#custom');
+        div.empty();
+        var numberOfParagraphs = document.getElementById("numberOfParagraphs").value;
+        div.BaconIpsum({ paras:numberOfParagraphs});
+    }
+
+</script>
+
+</body>
+</html>
diff --git a/samples/bacon ipsum/script.js b/samples/bacon ipsum/script.js
@@ -0,0 +1,26 @@
+( function( $ ) {
+    $.fn.BaconIpsum = function( options ) {
+        const settings = $.extend( {
+            'paras' : 3
+        }, options );
+
+        return this.each( function() {
+            const $this = $(this);
+
+            //Limit number of paragraphs to 100 sent to api
+            if (settings.paras > 100) {
+                settings.paras = 100;
+            }
+
+            $.getJSON('https://baconipsum.com/api/?callback=?', {
+                'paras':settings.paras
+            }, function(paragraphs) {
+                if (paragraphs && paragraphs.length > 0) {
+                    for (var i = 0; i < paragraphs.length; i++) {
+                        $this.append('<p>' + paragraphs[i] + '</p>');
+                    }
+                }
+            });
+        });
+    };
+}) ( jQuery );