Started to modularize the javascript.

The idea is to seperate each functional part into its own file and rely
more heavily on event to communicate between the module.

This is work in progress.

TODO

@@ -119,3 +119,7 @@ Meeting Skyope long-court 27/04/2012
 ====================================
 
 - Scroll personalisé
+
+$(window).bind('hashchange', function() {
+  .. work ..
+});

aawiki/static/aawiki/css/aa.annotations.css

+/* annotations {{{ */
+section.section1 {
+    background-color: white;
+    border: 1px solid #ddd;
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 400px;
+    overflow: hidden;
+    padding-bottom: 23px; /* equals the size of h1 */
+    cursor: auto;
+}
+
+section.section1 > div.wrapper {
+    overflow-x: hidden;
+    height: 100%;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    padding: 5px;
+}
+
+section.section1 h1 {
+    font-family: 'News Cycle';
+    letter-spacing: 1px;
+    font-size: 13px;
+    line-height: 13px;
+    margin: 0;
+    top: 0;
+    text-transform: uppercase;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 5px;
+    cursor: move;
+}
+section.section1 h1:hover {
+    background-color: whitesmoke;
+}
+section.section1 span.about {
+    display: none;
+}
+section.section1[about] span.about {
+    display: inline;
+}
+
+section.section1 h2 {
+    font-size: 13px;
+    line-height: 18px;
+    /*font-weight: bold;*/
+    /*font-family: 'News Cycle'; */
+    /*letter-spacing: 1px;*/
+}
+
+section.section1 h2, 
+section.section1 p {
+    margin-bottom: 18px;
+}
+section.section1 h2:last-child, 
+section.section1 p:last-child {
+    margin-bottom: 0;
+}
+/* SECTION 2 ---------- */
+section.section2 {
+    border-top: 1px solid darkgray;
+    margin-top: -1px;
+    padding-bottom: 18px;
+}
+/* }}} */
+
+
+/* section editing {{{*/
+section.editing div.wrapper { 
+    display: none; 
+}
+section.editing textarea {
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    border: 1px solid black;
+    outline: 0px none transparent;
+    padding: 5px;
+    resize: none;
+    font-size: 11px;
+    line-height: 15px;
+}
+/* }}} */
+
+
+/* BUTTONS --------- {{{ */
+section span.edit,
+section span.save,
+section span.cancel {
+    display: none;
+    cursor: pointer;
+    color: gray;
+    float: right;
+    position: relative;
+    font-size: 13px;
+}
+section:hover span.edit {
+    display: block;
+}
+body.locked section:hover span.edit {
+    display: none;  /* hides the section edit link if user isn't logged in */
+}
+section span.edit:hover,
+section span.save:hover,
+section span.cancel:hover {
+    color: blue;
+}
+section.editing span.edit {
+    display: none;
+}
+section.editing span.save,
+section.editing span.cancel {
+    display: block;
+}
+/* }}} */
+
+
+/* collapsing {{{ */
+section.collapsed {
+    height: auto !important;
+    padding-bottom: 0;
+}
+section.section2.collapsed {
+    border: none;
+    border-top: 1px solid darkgray;
+}
+section.collapsed > div.wrapper {
+    display: none;
+}
+section.section1 h2 {
+    cursor: n-resize;
+}
+section.collapsed h2 {
+    color: lightgray;
+    cursor: s-resize;
+}
+section.collapsed h1:before,
+section.collapsed h2:before {
+    content: "\25B8";
+    margin-right: 0.25em;
+}
+section.collapsed span.edit {
+    display: none;
+}
+/* }}} */
+
+.grid {
+  background-size: 20px 20px, 20px 20px;
+  background-position: 0 0,0 0;
+  background-image: -webkit-linear-gradient(top, transparent, transparent 19px, cyan 20px), -webkit-linear-gradient(left, transparent, transparent 19px, cyan 20px); 
+}
+
+.active {
+    background-color: yellow;
+}

aawiki/static/aawiki/css/aa.swatch.css

+/* swatches {{{ */
+span.swatch { 
+    display: block; 
+    float: left; 
+    margin-right: 8px; 
+    margin-bottom: 8px; 
+    border: 1px solid lightgray; 
+    padding: 2px 4px; 
+    background-color: white; 
+    cursor: move;
+}
+span.swatch label {
+    cursor: inherit;
+    top: 0;
+}
+span.swatch label,
+span.swatch select {
+    display: inline;
+    font-size: smaller;
+}
+/* }}} */
+
+.drophover {
+    background: yellow;
+    border: 1px solid black !important;
+    -moz-box-shadow: 0px 0px 4px yellow;
+    -webkit-box-shadow: 0px 0px 4px yellow;
+    box-shadow: 0px 0px 4px yellow;
+    /* For IE 8 */
+    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='yellow')";
+    /* For IE 5.5 - 7 */
+    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='yellow');
+}

aawiki/static/aawiki/js/aa.annotations.js

+if (typeof (AA) === 'undefined') AA = {};
+
+
+AA.annotations = (function ($) {
+
+  // *-* public methods *-*
+
+  var init = function () {
+      decorate("section");
+      $("section").on("edit", editSection);
+  };
+
+  // *-* utility methods *-*
+
+  var wrapSectionContent = function () {
+        var content = $(this).children(":not(:header)");
+        var wrapped = createWrapper().append(content);
+        $(this).append(wrapped);
+  }
+
+  var createWrapper = function () {
+      return $("<div>").addClass("wrapper");
+  }
+
+  var createAboutButton = function () {
+      return $("<span>").text("@").addClass('about').attr('title', 'Edit this annotation in place');
+  }
+
+  var createEditButton = function () {
+      return $("<span>").text("✎").addClass('edit').attr('title', 'Edit this annotation in place').on("click", function () {
+        $(this).closest("section").trigger("edit");
+      });
+  }
+
+  var editSection = function () {
+      console.log(this);
+  }
+
+  var decorate = function (selector) {
+      $(selector).find("h1")
+      .append(createEditButton())
+      .prepend(createAboutButton());
+  }
+
+  // *-* event methods *-*
+
+  //var eventHeaderClicked = function () {
+    //doThing(this.attr('id'));
+  //};
+
+  // expose public methods
+  return {
+    init: init
+  };
+})(jQuery);
+
+
+jQuery(document).ready(AA.annotations.init());

aawiki/static/aawiki/js/aa.canvas.js

+var AA = AA || {};
+
+AA.canvas = (function () {
+    function getButtonSetValues(elt) {
+        var classes = [];
+
+    }
+
+
+    /**
+    * Applies a class to the body
+    *
+    * @this HTMLDomElement
+    */
+    function switchMode () {
+        var classes = [],
+            mode = $(this).val();
+
+        $(this).parent().find('input').each(function(i, selected) {
+            classes[i] = $(selected).val();
+        });
+
+        classes = classes.join(' ').replace(mode, '');
+
+        $canvas.removeClass(classes).addClass(mode);
+
+        if (mode == "cinematic") {
+            $("body").layout().close("west");
+        } else {
+            $("body").layout().open("west");
+        }
+    }
+
+    function createSection () {
+        $('#section-tpl').html()
+        .prependTo('article')
+        .trigger('refresh')
+        .trigger('edit');
+    };
+
+    function tagRevision () {
+        var message = window.prompt("Summary", "A nice configuration");
+
+        if (message) {
+            $.get("flag/", {
+                message: "[LAYOUT] " + message
+            });
+        }
+
+        return false;
+    }
+
+    //$.fn.addEditLink = function() {  
+        //return this.each(function() {
+        //});
+    //};
+
+    function decorateSection () {
+        var $h1 = $("h1", this);
+
+        $("<span>✎</span>")
+        .addClass("edit")
+        .attr('title', 'Edit this annotation in place')
+        .click(function () {
+            $(this).closest("section").trigger("edit");
+        }).prependTo($(":header:first", this));
+        
+        var about = $(this).closest("section.section1").attr('about');
+
+        $("<span>@</span>")
+        .addClass("about")
+        .hover(function () {
+            $('.player[src="' + about + '"], section[about="' + about + '"]', $canvas)
+            .addClass('highlight');
+        }, function() {
+            $('.player[src="' + about + '"], section[about="' + about + '"]', $canvas)
+            .removeClass('highlight');
+        }).prependTo($h1);
+        
+        $(this).find("h1, h2")
+        .bind('dblclick', function(event) {
+            event.stopImmediatePropagation();
+            var section = $(this).closest("section");
+            if (! section.hasClass('editing')) {
+                section.toggleClass('collapsed');
+                section.trigger("geometrychange");
+            }
+        })
+        .filter('h1')
+            .attr('title', 'Drag to move. Double-click to open/close.')
+        .end()
+        .filter('h2')
+            .attr('title', 'Double-click to open/close.');
+
+        var nonhead = $(this).children(":not(:header)");
+        var wrapped = $('<div class="wrapper"></div>').append(nonhead);
+        
+        $(this).append(wrapped);
+    }
+
+    /**
+     * Makes sure an annotation doesn't get a negative offset
+     */
+    function constraintAnnotation (elt) {
+        var pos = $(elt).position();
+
+        if (pos.top < 0) {
+            $(elt).css('top', 0);
+        }
+        if (pos.left < 0) {
+            $(elt).css('left', 0);
+        }
+    }
+
+    function renumberSections () {
+        $('section', AA.$.canvas)
+        .not('[data-section="-1"]')
+            .each(function(i) {
+                $(this).attr("data-section", (i + 1));
+            });
+    }
+
+    function editSection (event) {
+        function edit (data) {
+            var position = $(that).css("position");
+            var section_height = Math.min($(window).height() - 28, $(that).height());
+            var use_height = (position == "absolute") ? section_height : section_height;
+            var f = $("<div>").addClass("section_edit").appendTo(that);
+            var textarea = $("<textarea>").css({height: use_height + "px"}).text(data).appendTo(f);
+            $(that).addClass("editing");
+            var ok = $("<span>✔</span>").addClass("save").attr('title', 'Save').click(function () {
+                $.ajax("edit/", {
+                    type: 'post',
+                    data: {
+                        section: $(that).data("section"),
+                        content: textarea.val()
+                    },
+                    success: function (data) {
+                        var new_content = $(data);
+                        $(that).replaceWith(new_content);
+                        new_content.trigger("refresh");
+                    }
+                });
+            }).prependTo($(that).find(':header:first'));
+            $("<span>✘</span>").addClass("cancel").attr('title', 'Cancel').click(function () {
+                if (new_section) {
+                    // removes the annotation
+                    $(that).remove(); 
+                    $(this).remove(); 
+                    ok.remove(); 
+                } else {
+                    f.remove();
+                    $(this).remove(); 
+                    ok.remove(); 
+                    $(that).removeClass("editing");
+                }
+            }).prependTo($(that).find(':header:first'));
+        }
+
+        evt.stopPropagation();
+
+        var that = this;
+        var new_section = false;
+
+        if ($(this).data('section') == -1) {
+            // Directly enter edit mode
+            new_section = true;
+            edit("# New");
+        } else {
+            // Initiate the edit by GETting the markdown source
+            $.ajax("edit/", {
+                data: {
+                    section: $(this).data("section")
+                },
+                success: edit
+            });
+        }
+    }
+
+    AA.$.addSection.click(AA.fn.createSection);
+    AA.$.saveRevision.click(AA.fn.tagRevision);
+
+    $("#mode").buttonset();
+    $("#mode input").change(AA.utils.switchMode);
+
+    return {
+        "createSection": createSection,
+        "tagRevision": tagRevision,
+        "decorateSection": decorateSection,
+        "constraintAnnotation": constraintAnnotation,
+        "renumberSections": renumberSections
+    };
+}());

aawiki/static/aawiki/js/aa.config.js

+var AA = AA || {};
+
+AA.$ = (function () {
+    return {
+        "help": $("#help"),
+        "accordion": $("#accordion"),
+        "body": $("body"),
+        "center": $("#center"),
+        "canvas": $("#canvas"),
+        "addSection": $("#add"),
+        "saveRevision": $("#save"),
+        "sidebar": $("#sidebar")
+    };
+}());
+
+AA.url = (function () {
+    return {
+        "embed": $("link[rel='aa-embed']").attr("href")
+    };
+}());

aawiki/static/aawiki/js/aa.embeds.js

+/**
+ * This file is part of Active Archives.
+ * Copyright 2006-2012 the Active Archives contributors (see AUTHORS)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * Also add information on how to contact you by electronic and paper mail.
+ */
+
+
+$(function() {
+    ////////////////////////////////////////////////////////////////////////
+    /* REFRESH */
+    // The refresh event gets fired on #canvas initially
+    // then on any <section> or other dynamically loaded/created element to "activate" it
+    $canvas.bind("refresh", function (evt) {
+        $(context).add('#sidebar').find("[rel='aa:embed']").each(function () {
+            var that = this;
+            function poll () {
+                $.ajax(embedUrl, {
+                    data: {
+                        url: $(that).attr("href"),
+                        filter: $(that).data("filter")
+                    },
+                    success: function (data) {
+                        if (data.ok) {
+                            // NEW: december 16 (Alex)
+                            // In addition to content there are three new keys:
+                            // - extra_css: loads extra link rel="stylesheet"
+                            // - extra_js: load extra script
+                            // - script: extra javascript code to execute
+                            var toGo = data.extra_css.length + data.extra_js.length;
+                            var html = $(data.content);
+
+                            $(that).replaceWith(html);
+                            html.trigger("refresh");
+
+                            $.each(data.extra_css, function(index, value) { 
+                                $.getCSS(value, function() {
+                                    //console.log('loaded css: ' + value);   
+                                    toGo -= 0;
+                                    doit();
+                                });
+                            });
+
+                            $.each(data.extra_js, function(index, value) { 
+                                $.getScript(value, function() {
+                                    //console.log('loaded js: ' + value);   
+                                    toGo -= 0;
+                                    doit();
+                                });
+                            });
+
+                            function doit () {
+                                if (toGo == 0) {
+                                    $.globalEval(data.script);
+                                } else {
+                                    toGo -= 1;
+                                }
+                            }
+
+                            doit();
+                        } else {
+                            if (data.content) {
+                                $(that).html(data.content);
+                            }
+                            window.setTimeout(poll, 2500);
+                        }
+                    },
+                    error: function (a, b, c) {
+                        // console.log("error", a, b, c);
+                    }
+                });
+            }
+            poll();
+        });
+
+        // Embed Links show/hide on rollover 
+        $(context).ffind("div.aa_embed").each(function () {
+            $(this).mouseover(function () {
+                $(".links", this).show();
+            }).mouseout(function () {
+                $(".links", this).hide();
+            });
+        });
+
+        // DIRECTLINKs
+        // Make directlinks draggable
+        $("a.directlink", context).each(function () {
+            $(this).draggable({
+                helper: function () {
+                    return $(this).clone().appendTo("body");
+                }
+            });
+        });
+
+        // h1's are droppable to set about
+        $(context).ffind(".section1").find("h1").droppable({
+            accept: ".directlink",
+            hoverClass: "drophover",
+            drop: function (evt, ui) {
+                var href = $(ui.helper).attr("href");
+                var s1 = $(this).closest(".section1");
+                s1.attr("about", href);
+                commit_attributes(s1);
+                resetTimelines();