From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 demo/index.js | 84 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 demo/index.js

(limited to 'demo/index.js')

diff --git a/demo/index.js b/demo/index.js
new file mode 100644
index 0000000..1c9a4bb
--- /dev/null
+++ b/demo/index.js
@@ -0,0 +1,84 @@
+$( document ).ready(function() {
+    
+    initNavigation();
+    registerEvents();
+    doAfterComponentHtmlLoaded();
+
+});
+
+var initNavigation = function() {
+
+    // Set default page
+    var page = window.location.hash;
+    if (page === '') {
+        page = "button";
+        window.location.hash = page;
+    }
+
+    // Remove # at the begining
+    if (page.indexOf('#')!==-1){
+        page = page.substr(1);
+    }
+    console.log("page: " + page);
+
+    // Upload the content
+    $("#main-content").load( "./components/" + page + ".html" );
+    
+    // Set selected in navigation
+    $('#main-navigation #' + page).addClass('selected');
+
+};
+
+/**
+ * Simple router to load components HTML based on id.
+ */
+var registerEvents = function() {
+    $("#main-navigation li").click(function(e){
+        page = e.target.id;
+        $("#main-content").load( "./components/" + page + ".html", function() {
+            doAfterComponentHtmlLoaded();        
+        });
+        window.location.hash = page;
+        $('#main-navigation li').removeClass('selected');
+        $('#main-navigation #' + page).addClass('selected');
+    });
+};
+
+/**
+ * Wait for component to load before applying javascript actions on it.
+ */
+var doAfterComponentHtmlLoaded = function() {
+    window.setTimeout(function() {
+        // Build code text to show to user
+        buildCode();
+
+        // highlight the code
+        hljs.initHighlightingOnLoad();
+    },1000);
+};
+
+/**
+ * Build HTML code automaticly when attribute data-code exists
+ * For example:
+ * <button class='sdc-button' data-code>This is button</button>
+ * Will add the HTML of this (highlighted) button below the button.
+ */
+var buildCode = function() {
+    $('[data-code]').each(function(index, element){
+        var result = $(element).removeAttr('data-code')[0].outerHTML;
+        var resultEncoded = $('<div/>').text(result).html();
+        var newElement = $('<pre><code>' + resultEncoded + '</code></pre>')[0];  
+        $(element).after(newElement);
+        hljs.highlightBlock(newElement);
+    });
+	
+	$('[data-code-id]').each(function(index, element){
+        var attVlue = $(element).attr('data-code-id');
+        var codeHere = $('[data-code-ref='+attVlue+']');
+        var result = $(element).removeAttr('data-code-id')[0].outerHTML;
+        var resultEncoded = $('<div/>').text(result).html();
+        var newElement = $('<pre><code>' + resultEncoded + '</code></pre>')[0];  
+        codeHere.replaceWith(newElement);
+        hljs.highlightBlock(newElement);
+    });
+};
-- 
cgit 1.2.3-korg