[new feature]: Fonts

client/css/tilemill.css

@@ -664,6 +664,29 @@ a.inspect-unique.active     { background-color:#222; }
   -webkit-border-radius:3px 0px 0px 0px;
   }
 
+/**
+ * Font pallette
+ */
+#fonts {
+  padding-left:70px;
+  position:relative;
+  float:left;
+  }
+
+#fonts label {
+  text-shadow:#000 0px -1px 0px;
+  position:absolute;
+  left:300px;
+  font-size:11px;
+  font-weight:bold;
+  text-transform:uppercase;
+  }
+
+  #fonts-list {
+    position:absolute;
+    left:350px;
+    }
+
 /**
  * Popup editor.
  */

client/index.html

@@ -183,6 +183,10 @@ <h4 id='zoom-display'>Zoom level ?</h4>
         <input size='7' maxlength='7' id='color' type='text' class='text' />
         <div class='pane' id='farbtastic'></div>
       </div>
+      <div id='fonts'>
+        <label>Fonts</label>
+        <select id='fonts-list'></select>
+      </div>
       <div id='colors'>
         <label>Colors</label>
         <div></div>
@@ -322,6 +326,9 @@ <h2><%= title %></h2>
       </form>
     </div>
     </script>
+    <script type="text/html" name="font">
+        <option><%= font %>
+    </script>
     <script type="text/html" name="popup-message">
     <div id='popup-message' class='clearfix pane <%= type %>'>
       <%= content %>

client/js/includes/backend.js

@@ -91,6 +91,17 @@ TileMill.backend.rasterizers.tilelive.datasource = function(datab64, callback) {
   }
 };
 
+/**
+ * Retrieve available fonts on a map server.
+ */
+TileMill.backend.rasterizers.tilelive.fonts = function(callback) {
+  TileMill.backend.runtime.get({
+    url: TileMill.settings.tileliveServer.split(',')[0] +
+      'abilities.json',
+    success: callback
+  });
+};
+
 /**
  * Retrieve fields for a given b64 encoded MML url.
  */
@@ -245,7 +256,7 @@ $.each(['list', 'get', 'post', 'del', 'url', 'mtime'], function(i, func) {
     TileMill.backend.servers[TileMill.settings.server][func];
 });
 
-$.each(['datasource', 'fields', 'values', 'servers', 'status'], function(i, func) {
+$.each(['datasource', 'fields', 'values', 'servers', 'status', 'fonts'], function(i, func) {
   TileMill.backend[func] =
     TileMill.backend.rasterizers[TileMill.settings.rasterizer][func];
 });

client/js/includes/stylesheet.js

@@ -9,6 +9,8 @@ TileMill.stylesheet.init = function() {
   // Add stylesheets in order.
   var queue = new TileMill.queue();
 
+  TileMill.stylesheet.initFonts();
+
   var s = TileMill.mml.parseMML(TileMill.data.mml).stylesheets;
   for (var i in s) {
     var src = s[i];
@@ -53,6 +55,22 @@ TileMill.stylesheet.init = function() {
   return stylesheets;
 };
 
+TileMill.stylesheet.initFonts = function() {
+  TileMill.backend.fonts(function(abilities) {
+    _.map(abilities.fonts, function(font) {
+      $('#fonts-list').append(TileMill.template('font', {
+        font: font
+      }));
+    });
+    $('#fonts-list').change(function() {
+      var position = TileMill.mirror.cursorPosition();
+      TileMill.mirror.insertIntoLine(
+        position.line,
+        position.character, '"' + $(this).val() + '"');
+    });
+  });
+};
+
 /**
  * Add a stylesheet to the page
  */