sort the list and add bootstrap styles

eballo · Nov 22, 2016 · c3883fe · c3883fe
1 parent 745fde1
commit c3883fe
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@ <h1 class="page-header">Interactive Map of Catalunya SVG/VML and RaphaëlJs - De
 		</div>
 
         <div class="llistaComarques col-md-12">
-            <ul class="list"></ul>
+            <ul class="list list-group"></ul>
         </div>
 
     </div>

diff --git a/js/catalunya-map-init.js b/js/catalunya-map-init.js
@@ -147,11 +147,19 @@ $(function () {
             console.log('create llista comarques ...');
         }
 
-        // clear the existing list
-        $('#llistaComarques li').remove();
-        var i = 0;
+        var llistaComarques =[];
         for (var comarca in mappaths) {
-          $("<li>"+mappaths[comarca].name+"</li>").appendTo("ul.list");
+            llistaComarques.push({ name: mappaths[comarca].name, url:mappaths[comarca].url });
+        }
+
+        // Order the list by name
+        llistaComarques = llistaComarques.sort(function (a, b) {
+            return a.name.localeCompare( b.name );
+        });
+
+        // Create list with bootstrap styles
+        for(i=0;i<llistaComarques.length;i++){
+          $("<li class='list-group-item'><a href='"+llistaComarques[i].url+"' class='list-group-item'>"+llistaComarques[i].name+"</a></li>").appendTo("ul.list");
         }
     }