Simple automatic iconlist

CometVisu · Jun 5, 2016 · 6eea4f4 · 6eea4f4
1 parent 557dae6
commit 6eea4f4
Showing 1 changed file with 100 additions and 0 deletions.
diff --git a/src/icon/iconlist.html b/src/icon/iconlist.html
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+  <head>
+    <title>CometVisu Icon List</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script src="../dependencies/jquery.js" type="text/javascript"></script>
+    <script>
+      "use strict";
+
+      var
+        documentReady = false,
+        hideInfobox   = true,
+        iconlist      = [],
+        pageContent   = '';
+
+      // fake the AMD define function fot the iconconfig.js
+      function define( foo, content )
+      {
+        content();
+        main();
+      }
+      // our version of the SVG loader
+      function svgKUF( name )
+      {
+        iconlist.push( name );
+        pageContent 
+          += '<div class="symbol">'
+          +  '<svg><use xlink:href="knx-uf-iconset.svg#kuf-' + name + '"></use></svg>'
+          +  name
+          +  '</div>';
+      }
+      // the main function for this file
+      function main()
+      {
+        if( !documentReady || pageContent === '' )
+          return;
+
+        $('#all').html( pageContent );
+        $('.symbol').click( function( event ){
+          var svg = $( 'svg', this );
+          $('#detail').html( //$('') 
+            svg.clone().css({width:'auto',height:'inherit'})
+            .add( svg.clone().css({width:'44px',height:'44px'}) )
+            .add( svg.clone().css({color:'black'}) )
+            .add( svg.clone().css({color:'red'}) )
+            .add( svg.clone().css({color:'green'}) )
+            .add( svg.clone().css({color:'blue'}) )
+            .add( svg.clone().css({color:'white', 'background-color':'black'}) )
+            .add( svg.clone().css({color:'red', 'background-color':'black'}) )
+            .add( svg.clone().css({color:'green', 'background-color':'black'}) )
+            .add( svg.clone().css({color:'blue', 'background-color':'black'}) )
+          );
+          if( hideInfobox )
+          {
+            $('#all').css( 'margin-top', ($('#detail').outerHeight() + 10) + 'px' );
+          }
+          hideInfobox = false;
+        });
+      }
+      $(document).ready( function(){ documentReady = true; main(); } );
+    </script>
+    <script src="iconconfig.js" type="text/javascript"></script>
+    <style type="text/css">
+      #detail:empty {
+        display: none;
+      }
+      #detail {
+        position: fixed;
+        top: 0px;
+        left: 5px;
+        width: calc(100% - 15px);
+        background-color: white;
+        border: 1px solid black;
+        box-shadow: 5px 5px 5px;
+      }
+      #detail svg {
+        vertical-align: middle;
+        padding: 5px;
+      }
+
+      .symbol {
+        display: inline-block;
+        font-family: sans-serif;
+        width: 25%;
+        min-width: 20em;
+      }
+
+      svg {
+        width: 2em;
+        height: 2em;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="detail"></div>
+    <div id="all"></div>
+  </body>
+</html>