Project stub

bjornd · Oct 25, 2012 · dd78171 · dd78171
1 parent ffe2546
commit dd78171
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "jvectormap"]
+	path = jvectormap
+	url = git@github.com:bjornd/jvectormap.git
diff --git a/app.js b/app.js
@@ -0,0 +1,84 @@
+var app = function(){
+  var convertSvgToMap = function(svg) {
+    var map = {};
+
+    map.width = parseInt($(svg).find('svg').attr('width'), 10);
+    map.height = parseInt($(svg).find('svg').attr('height'), 10);
+    map.paths = {};
+    $(svg).find('path').each(function(i){
+      map.paths['id'+i] = {
+        path: $(this).attr('d'),
+        name: 'name'+i
+      };
+    });
+    return map;
+  };
+
+  var createMap = function(){
+    $.fn.vectorMap('addMap', 'map', mapData);
+    return new jvm.WorldMap({
+      container: $('#settings-map'),
+      map: 'map',
+      backgroundColor: 'white',
+      regionStyle: {
+        initial: {
+          fill: '#E9AB38'
+        }
+      }
+    });
+  };
+
+  var renderTable = function(){
+    var table = '<table><tr><th>id</th><th>name</th></tr>',
+        id;
+
+    for (id in mapData.paths) {
+      table += '<tr>'+
+                 '<td>'+id+'</td>'+
+                 '<td>'+mapData.paths[id].name+'</td>'+
+               '</tr>';
+    }
+    table += '</table>'
+    $('#settings-table').html(table);
+  };
+
+  var CardLayout = function(cards){
+    var self = this;
+
+    this.cards = {};
+
+    cards.each(function(index){
+      var card = $(this);
+
+      if (index) {
+        card.hide();
+      } else {
+        self.currentCard = card;
+      }
+      self.cards[card.attr('id').split('-').slice(1).join('-')] = card;
+    });
+  };
+
+  CardLayout.prototype.show = function(cardName){
+    this.currentCard.hide();
+    this.cards[cardName].show();
+    this.currentCard = this.cards[cardName];
+  };
+
+  var layout = new CardLayout($('.card')),
+      mapData;
+
+  $('#input-convert').click(function(){
+    mapData = convertSvgToMap( $.parseXML($('#input-source').val()) );
+
+    layout.show('settings');
+
+    renderTable();
+    createMap();
+  });
+
+  $('#setting-save').click(function(){
+    layout.show('save');
+    $('#save-source').val( "jQuery.fn.vectorMap('addMap'," + JSON.stringify(mapData) + ");" );
+  });
+};
diff --git a/index.html b/index.html
@@ -3,7 +3,114 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>SVG to jVectorMap converter</title>
+  <link href="jvectormap/jquery-jvectormap.css" rel="stylesheet" media="all"/>
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      font-family: Helvetica, sans-serif;
+    }
+
+    .card {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+      .card-header {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        height: 20px;
+        padding: 10px;
+      }
+
+      .card-content {
+        height: 100%;
+      }
+
+      .card-footer {
+        position: absolute;
+        bottom: -40px;
+        left: 0;
+        height: 20px;
+        padding: 10px;
+      }
+
+    #input-source {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      margin: 5px;
+    }
+
+    #save-source {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      margin: 5px;
+    }
+
+    #settings-table {
+      width: 30%;
+      height: 100%;
+      float: left;
+    }
+
+    #settings-map {
+      width: 70%;
+      height: 100%;
+      float: left;
+    }
+  </style>
+  <script src="jquery-1.8.2.min.js"></script>
+  <script src="jvectormap/jquery.jvectormap.min.js"></script>
+  <script src="app.js"></script>
+  <script>
+    $(function(){
+      $.get('map-sample.svg', function(response){
+        $('#input-source').val(response);
+      }, 'text');
+      app();
+    });
+  </script>
 </head>
 <body>
+  <div id="card-input" class="card">
+    <div class="card-header">Paste SVG code</div>
+    <div class="card-content">
+      <textarea id="input-source"></textarea>
+    </div>
+    <div class="card-footer">
+      <button id="input-convert">Convert to map</button>
+    </div>
+  </div>
+  <div id="card-settings" class="card">
+    <div class="card-header">Settings</div>
+    <div class="card-content">
+      <div id="settings-table"></div>
+      <div id="settings-map"></div>
+    </div>
+    <div class="card-footer">
+      <button id="setting-save">Save</button>
+    </div>
+  </div>
+  <div id="card-save" class="card">
+    <div class="card-header">Copy map source</div>
+    <div class="card-content">
+      <textarea id="save-source"></textarea>
+    </div>
+    <div class="card-footer"></div>
+  </div>
 </body>
 </html>
diff --git a/jquery-1.8.2.min.js b/jquery-1.8.2.min.js
diff --git a/jvectormap b/jvectormap
diff --git a/map-sample.svg b/map-sample.svg