diff options
Diffstat (limited to 'demo/index.js')
-rw-r--r-- | demo/index.js | 84 |
1 files changed, 0 insertions, 84 deletions
diff --git a/demo/index.js b/demo/index.js deleted file mode 100644 index 1c9a4bb..0000000 --- a/demo/index.js +++ /dev/null @@ -1,84 +0,0 @@ -$( 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); - }); -}; |