Implemented first basic version of layout option for switching display of skin edit controls, ie. a button that appears next to every editable skin and directly leads to the skin editor when clicked.

code/Layout/$Layout.skin

@@ -25,9 +25,14 @@ $(function() {
 ... 
 <% layout.link images <% gettext Images %> %>
 <% layout.link skins <% gettext Skins %> prefix=" | " %>
+<% //layout.link sandbox <% gettext Sandbox %> prefix=" | " %>
 <br /><br />
 <form id="prefs" method="post" action="<% response.action %>">
 <table border="0" cellspacing="0" cellpadding="2">
+<tr>
+<td class='small'>Show Controls:</td>
+<td><input name='sandbox' type='checkbox' <% if <% layout.sandbox %> is true then checked %>></td>
+</tr>
 <% layout.values %>
 <tr id="addValueFields">
 <td id="newKey" class="small"></td>

code/Layout/Layout.js

@@ -93,6 +93,22 @@ Layout.remove = function(options) {
    return;
 }
 
+Layout.sandbox = function(value) {
+   var cookie = User.COOKIE + 'LayoutSandbox';
+   var id = res.handlers.site._id;
+   if (typeof value === 'undefined') {
+      return req.cookies[cookie] === id;
+   } 
+   if (value === true) {
+      res.setCookie(cookie, id);
+      //session.data.layout = new Layout;
+   } else if (value === false) {
+      res.unsetCookie(cookie);
+      //delete session.data.layout;
+   }
+   return value;
+}
+
 /** 
  * @function
  * @returns {String[]}
@@ -140,6 +156,7 @@ Layout.prototype.getPermission = function(action) {
       case "import":
       case "reset":
       case "skins":
+      case "sandbox":
       return res.handlers.site.getPermission("main") &&
             Membership.require(Membership.OWNER) ||
             User.require(User.PRIVILEGED);
@@ -216,6 +233,9 @@ Layout.prototype.update = function(data) {
    }
    res.write("\n");
    skin.setSource(res.pop());
+
+   Layout.sandbox(!!data.sandbox);
+   
    this.description = data.description;
    this.mode = data.mode;
    this.touch();
@@ -297,6 +317,17 @@ Layout.prototype.import_action = function() {
    return;
 }
 
+Layout.prototype.sandbox_action = function() {
+   Layout.sandbox(!Layout.sandbox());
+   res.redirect(req.data.http_referer);
+   return;
+}
+
+Layout.prototype.sandbox_macro = function() {
+   res.write(Layout.sandbox());
+   return;
+}
+
 /**
  * 
  * @param {String} name

code/Root/$Root.skin

@@ -274,6 +274,22 @@ div.skin div.title {
    border: 1px solid #cc0000;
 }
 
+.layout-sandbox {
+   height: 22px;
+}
+
+.layout-sandbox div {
+   position: fixed;
+   top: 0;
+   left: 0;
+   right: 0;
+   height: 22px;
+   padding: 0 20px;
+   background: url('<% root.static sandbox.png %>');
+   background-position: 0 23px;
+   text-align: left;
+}
+
 <% #FIXME %>
 <div class="boxline"> </div>
 <div class="box">

code/Root/Root.js

@@ -191,6 +191,7 @@ Root.prototype.sites_action = function() {
 }
 
 Root.prototype.updates_xml_action = function() {
+   res.contentType = "text/xml"; 
    var now = new Date;
    var feed = new rome.SyndFeedImpl();   
    feed.setFeedType("rss_2.0");
@@ -219,7 +220,6 @@ Root.prototype.updates_xml_action = function() {
    var output = new rome.SyndFeedOutput();
    //output.output(feed, res.servletResponse.writer); return;
    var xml = output.outputString(feed);
-   res.contentType = "text/xml";
    res.write(xml); //injectXslDeclaration(xml));
    return;
 }

code/Site/Site.js

@@ -407,8 +407,9 @@ Site.prototype.main_js_action = function() {
    res.dependsOn(String(Root.VERSION));
    res.digest();
    this.renderSkin("$Site#include", 
-         {href:"http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"});
-   this.renderSkin("$Site#include", {href: root.getStaticUrl("antville.js?v=1.3")});
+         {href:"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"});
+   this.renderSkin("$Site#include", {href: root.getStaticUrl("jquery.cookie.js")});
+   this.renderSkin("$Site#include", {href: root.getStaticUrl("antville.js?v=" + Root.VERSION)});
    this.renderSkin("$Site#include", {href: this.href("user.js")});
    return;
 }
@@ -437,25 +438,25 @@ Site.prototype.backup_js_action = function() {
 }
 
 Site.prototype.rss_xml_action = function() {
+   res.contentType = "text/xml";
    res.dependsOn(this.modified);
    res.digest();
-   res.contentType = "text/xml";
    res.write(this.getXml(this.stories.union));
    return;
 }
 
 Site.prototype.stories_xml_action = function() {
+   res.contentType = "text/xml";
    res.dependsOn(this.modified);
    res.digest();
-   res.contentType = "text/xml";
    res.write(this.getXml(this.stories.recent));
    return;
 }
 
 Site.prototype.comments_xml_action = function() {
+   res.contentType = "text/xml";
    res.dependsOn(this.modified);
    res.digest();
-   res.contentType = "text/xml";
    res.write(this.getXml(this.stories.comments));
    return;
 }

code/Skin/Skin.js

@@ -187,10 +187,7 @@ Skin.prototype.update = function(data) {
       var macro = "response.body";
       if (!createSkin(data.source).containsMacro(macro)) {
          var macro = ["<code><%", macro, "%></code>"].join(String.EMPTY);
-         throw Error(gettext("The {0} macro is missing. It is essential for accessing the site and must be present in this skin.", 
-               macro));
-         //data.source = ["<% // ", gettext("The following macro was automatically added to prevent the site from becoming inacessible."), 
-         //      " %>\n<% ", macro, " %>\n\n", data.source].join(String.EMPTY);
+         throw Error(gettext("The {0} macro is missing. It is essential for accessing the site and must be present in this skin.", macro));
       }
    }
    this.setSource(data.source);   
@@ -221,7 +218,7 @@ Skin.prototype.reset_action = function() {
 
 Skin.prototype.compare_action = function() {
    var originalSkin = this.source || String.EMPTY;
-   var diff = originalSkin.diff(this.getSource());
+   var diff = this.getSource().diff(originalSkin);
    if (!diff) {
       res.message = gettext("No differences were found.");
    } else {
@@ -230,7 +227,7 @@ Skin.prototype.compare_action = function() {
       for each (let line in diff) {
          if (line.deleted) {
             param.right = encode(line.value);
-            param.leftStatus = "removed";
+            param.leftStatus = "added";
             param.rightStatus = '';
             for (let i=0; i<line.deleted.length; i++) {
                leftLineNumber += 1;
@@ -244,7 +241,7 @@ Skin.prototype.compare_action = function() {
          if (line.inserted) {
             param.left = encode(line.value);
             param.leftStatus = '';
-            param.rightStatus = 'added';
+            param.rightStatus = 'removed';
             for (let i=0; i<line.inserted.length; i++) {
                rightLineNumber += 1;
                param.leftLineNumber = '';

code/User/User.js

@@ -268,8 +268,9 @@ User.login = function(data) {
  */
 User.logout = function() {
   session.logout();
-  res.setCookie(User.COOKIE, String.EMPTY);
-  res.setCookie(User.HASHCOOKIE, String.EMPTY);
+  res.unsetCookie(User.COOKIE);
+  res.unsetCookie(User.HASHCOOKIE);
+  Layout.sandbox(false);
   User.getLocation();
   return;
 }

static/www/antville.js

@@ -1,4 +1,8 @@
 $(function() {
+   
+   if ($.cookie('antvilleUserLayoutSandbox')) {
+      toggleLayoutMode();
+   }
 
    // Extend jQuery with selectText() method.
    $.fn.selectText = function() {
@@ -51,6 +55,43 @@ $(function() {
 
 });
 
+function toggleLayoutMode() {
+   if ($('.skin-control').length > 0) {
+      $('.skin-control').remove();
+      return;
+   }
+   /*$('body').prepend($('<div>').attr('class', 'layout-sandbox')
+         .append($('<div>')
+            .append($('<button>')
+               .html('Exit Sandbox')
+               .click(function() {
+                  location.replace($('a[href$="sandbox"]').attr('href'));
+               }))));*/
+   $('.skin').each(function() {
+      var skinButton = $('<div><a>');
+      skinButton.css({
+         'margin-top': '5px',
+         font: 'bold 9px arial',
+         'line-height': '15px',
+         'letter-spacing': '1px'
+      }).find('a').attr({
+         'class': 'skin-control',
+         href: $(this).data('href'),
+         title: 'Click to edit ' + $(this).data('name') + ' skin'
+      }).css({
+         padding: '2px', 
+         background: '#ccc',
+         color: '#fff', 
+         'text-decoration': 'none'
+      }).mouseover(function() {
+         $(this).parents('.skin').eq(0).css('background-color', '#ccc');
+      }).mouseout(function() {
+         $(this).parents('.skin').eq(0).css('background-color', '');
+      }).html('Edit');
+      $(this).append(skinButton);
+   });
+}
+
 /**
  * MD5 (Message-Digest Algorithm)
  * http://www.webtoolkit.info/

static/www/jquery.cookie.js

@@ -0,0 +1,47 @@
+/*!
+ * jQuery Cookie Plugin
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2011, Klaus Hartl
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.opensource.org/licenses/GPL-2.0
+ */
+(function($) {
+    $.cookie = function(key, value, options) {
+
+        // key and at least value given, set cookie...
+        if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
+            options = $.extend({}, options);
+
+            if (value === null || value === undefined) {
+                options.expires = -1;
+            }
+
+            if (typeof options.expires === 'number') {
+                var days = options.expires, t = options.expires = new Date();
+                t.setDate(t.getDate() + days);
+            }
+
+            value = String(value);
+
+            return (document.cookie = [
+                encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
+                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+                options.path    ? '; path=' + options.path : '',
+                options.domain  ? '; domain=' + options.domain : '',
+                options.secure  ? '; secure' : ''
+            ].join(''));
+        }
+
+        // key and possibly options given, get cookie...
+        options = value || {};
+        var decode = options.raw ? function(s) { return s; } : decodeURIComponent;
+
+        var pairs = document.cookie.split('; ');
+        for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
+            if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
+        }
+        return null;
+    };
+})(jQuery);