Merge branch 'develop' into feature/layout-rerefactoring

* develop:
  Added control for copying the value macro to the clipboard
  Enabled built-in colorpicker for any value which name ends with “color”. (Fixes issue 39.) Added remove link for any value form element. Fixed issue where no value could be added after the last remaining one was removed.

code/Layout/$Layout.skin

@@ -19,14 +19,14 @@
       </div>
    </div>
    <div class='uk-form-row uk-margin-top'>
-      <fieldset>
+      <fieldset class='av-values'>
          <legend>
             <% gettext 'Variables' %>
          </legend>
          <div class='uk-grid'>
             <% layout.values %>
          </div>
-         <div id='av-add-variable' class='uk-margin-bottom uk-hidden'>
+         <div id='av-add-value' class='uk-margin-bottom uk-hidden'>
             <div class='uk-form-label'>&#160;</div>
             <a href='javascript:' class='uk-icon-button uk-icon-plus uk-text-middle'></a>
          </div>
@@ -41,27 +41,57 @@
    </div>
 </form>
 <script type='text/javascript'>
-   $('#av-add-variable').removeClass('uk-hidden').find('a').on('click', function (event) {
+   $('.av-values').on('mouseover', '.av-value-row', function () {
+      $(this).find('.av-value-controls').removeClass('uk-hidden');
+   }).on('mouseout', '.av-value-row', function () {
+      $(this).find('.av-value-controls').addClass('uk-hidden');
+   }).on('click', '.av-value-remove', function () {
+      $(this).parents('.av-value-row').remove();
+   });
+
+   $('#av-add-value').removeClass('uk-hidden')
+      .find('a')
+      .on('click', function (event) {
       event.preventDefault();
-      var name = prompt('<% gettext "Please enter the name of the new variable:" %>');
+      var name = prompt('<% gettext "Please enter the name of the new value:" %>');
       if (name) {
-         var key = 'value_' + name;
-         var variableRow = $('.av-variable-row').eq(0).clone();
-         variableRow.find('.uk-form-label').html(name);
-         variableRow.find('.uk-form-controls input').attr({name: key, 'id': key, value: ''});
-         $('.av-variable-row:last').after(variableRow);
-         $(variableRow).find('input').focus();
+         var key = 'av-value ' + name;
+         var valueRow = $('.av-value-row').eq(0).clone()
+            .removeClass('uk-hidden')
+         valueRow.find('.av-value-title').html(name);
+         valueRow.find('.uk-form-controls input').attr({
+            id: key.replace(new RegExp(' ', 'g'), '-'),
+            name: key,
+            value: '',
+            type: getType(key)
+         });
+         $('.av-value-row:last').after(valueRow);
+         $(valueRow).find('.av-clipboard-copy').remove();
+         $(valueRow).find('input').focus();
       }
    });
+
+   function getType(name) {
+      var parts = name.split(' ');
+      var typePart = parts.pop();
+      var types = {
+         color: 'color'
+      };
+      return types[typePart] || 'text';
+   }
 </script>
 
 <% #value %>
-<div class='uk-width-1-2 uk-margin-bottom av-variable-row'>
+<div class='uk-width-1-2 uk-margin-bottom av-value-row <% param.class %>'>
    <div class='uk-form-label'>
-      <% param.key %>
+      <span class='av-value-title'><% param.title %></span>
+      <span class='av-value-controls uk-hidden'>
+         <a href='javascript:' class='av-value-remove'><i class='uk-icon-trash-o'></i></a>
+         <a href='javascript:' class='av-clipboard-copy' data-text='<% gettext 'Press CTRL & C to copy to clipboard.' %>' data-value="<% param.macro %>"><i class='uk-icon-clipboard'></i></a>
+      </span>
    </div>
    <div class='uk-form-controls'>
-      <input class='uk-width-1-1' type='text' name='value_<% param.key %>' value='<% param.value %>'>
+      <input class='uk-width-1-1' type='<% param.type %>' name='<% param.name %>' value='<% param.value %>'>
    </div>
 </div>
 

code/Layout/Layout.js

@@ -213,12 +213,13 @@ Layout.prototype.update = function(data) {
   }
   res.push();
   for (var key in data) {
-    if (key.startsWith('value_')) {
+    var prefix = 'av-value ';
+    if (key.startsWith(prefix)) {
       var value = data[key];
-      key = key.substr(6);
+      key = key.substr(prefix.length);
       res.write('<% value ');
       res.write(quote(key, '\\s'));
-      res.write(' ');
+      res.write(String.SPACE);
       res.write(quote(value, '\\s'));
       res.write(' %>\n');
     }
@@ -492,15 +493,53 @@ Layout.prototype.image_macro = function(param, name, mode) {
 Layout.prototype.values_macro = function() {
   var values = [];
   for (var key in res.meta.values) {
-    values.push({key: key, value: res.meta.values[key]});
+    values.push({
+      key: key,
+      value: res.meta.values[key]
+    });
   }
+
+  this.renderSkin('$Layout#value', {'class': 'uk-hidden'});
+
   values.sort(new String.Sorter('key'));
   for each (var pair in values) {
+    var type = getType(pair.key);
     this.renderSkin('$Layout#value', {
-      key: pair.key.capitalize(),
-      value: pair.value
+      title: pair.key.capitalize(),
+      name: 'av-value ' + pair.key,
+      value: getValue(pair.value, type),
+      type: type,
+      macro: '<% value ' + quote(pair.key, '\\s') + ' %>'
     });
   }
+
+  function getValue(value, type) {
+    return {
+      color: getColor(value)
+    }[type] || value;
+  }
+
+  function getType(name) {
+    var parts = name.split(String.SPACE);
+    var typePart = parts.pop();
+    var types = {
+      color: 'color'
+    };
+    return types[typePart] || 'text';
+  }
+
+  function getColor(value) {
+    value = String(value).trim();
+    if (value.startsWith('#') && value.length === 4) {
+      var color = ['#'];
+      for (var i = 1, char; i < value.length; i += 1) {
+        char = value[i];
+        color.push(char, char);
+      }
+      return color.join(String.EMPTY);
+    }
+    return value;
+  }
   return;
 }