modoboa/extensions/webmail/templates/index.html

{% extends "common/email_listing.html" %}
{% load i18n %}
{% block css %}
#leftcol {
  float: left;
  width: 150px;
}

.box h3 {
  font-size: small;
  margin: 2px 0px 2px 0px;
  text-align: center;
}

.box ul {
  list-style: none;
  padding: 5px 5px;
  margin: 0;
}

.box li {
  clear: both;
  margin-bottom: 4px;
}

.box li.selected {
  background: #ffffcc;
}

.box a:link, .box a:visited {
  background: transparent;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.box a:hover { 
  color: #6AB0C5;
  text-decoration: none;
}

.box img {
  float: left;
  margin-right: 2px;
  border: 0;
}

td {
  position: relative;
}

.draggable {
  cursor: move;
}

.dragging {
  background: #6AB0C5;
}

tr {
 cursor: pointer;
}
{% endblock %}
{% block js %}
  updatelisting = function(resp, overflow) {
    if (!$defined(overflow)) {
      overflow = "auto";
    }
    if ($defined(resp.menu)) {
      $("menubar").set("html", resp.menu);
    }
    $("listing").set("html", resp.listing);
    $("listing").setStyle("overflow", overflow);
    if ($defined(resp.navbar)) {
      $("navbar").set("html", resp.navbar);
      $("navbar").getChildren("a").addEvent("click", navbarcallback);
    }
    $$("a[name=compose]").addEvent("click", loadCompose);
    $$("a[name=empty]").addEvent("click", empty);
  }
  empty = function(event) {
    event.stop();
    new Request.JSON({url : event.target.get("href"), onSuccess : function(resp) {
      updatelisting(resp);
    }}).get();
  }

  select = function(obj) {
    $$("a[name=loadfolder]").each(function(item) {
      item.getParent().removeClass("selected");
      item.getParent().addClass("droppable");
    });
    obj.getParent().removeClass("droppable");
    obj.getParent().addClass("selected");
  }

  {% url extensions.webmail.main.folder as view_url %}
  viewmail = function(event) {
    event.stop();
    if (event.target.parentNode.id) {
      var url = event.target.parentNode.id + "/";
      event.target.parentNode.setStyle("background", "#ffffcc");
      location.hash = url;
    }
  }
  register_callback("viewmail", function(resp) {
    updatelisting(resp, "hidden");
    $$("a[name=back]").addEvent("click", loadFolder);
    setDivHeight("mailcontent", $("table-container").getSize().y, 0);
  });

  loadCompose = function(event) {
    event.stop();
    location.hash = "compose/";
  }
  register_callback("compose", function(resp) {
    updatelisting(resp, "hidden");
    $$("a[name=back]").addEvent("click", loadFolder);
    $$("a[name=sendmail]").addEvent("click", function(evt) {
      evt.stop();
      $("composemail").set("send", {
        onSuccess: function(res) {
          updatelisting(JSON.decode(res));
          $$("tr").addEvent("click", viewmail);
        }
      });
      $("composemail").send();
    });
    setDivHeight("id_body", $("mailheader").getSize().y + 20, 0);
  });

  loadFolder = function(event, obj) {
    if (!$defined(obj)) {
      obj = event.target;
    }
    event.stop();
    location.hash = obj.get("href");
  }
  register_callback("folder", function(resp) {
    updatelisting(resp, "auto");
    /*var drag_group = new Drag.Group({
      filter: function(item) { return item.hasClass("active"); },
      drag: {
        onComplete: function(item) {
          item.dispose();
          delete(item);
        },
        onEnter: function(item, droppable) {
          alert(droppable);
        }
      }
    });*/
    $$("td[class*=draggable]").each(function(item) {
      item.makeDraggable({
        droppables: ".droppable",
      }).addEvents({
        "enter" : function(item, droppable) {
          droppable.addClass("dragging");
        },
        "leave" : function(item, droppable) {
          droppable.removeClass("dragging");
        },
        "drop" : function(item, droppable, event) {
          item.dispose();
          delete(item);
          if (!droppable) {
            this.element = this.oldelement;
            return;
          }
          droppable.removeClass("dragging");
          this.oldelement.getParent().dispose();
          to = droppable.getFirst("a").get("href");
          {% url extensions.webmail.main.move as moveurl %}
          new Request.JSON({url: "{{ moveurl }}", onSuccess: function(resp) {
            
          }}).get({msgset : this.oldelement.getParent().get("id"),
                   to : to});
        },
        "beforeStart": function(item) {
          var clone = item.clone()
            .setStyles({"position" : "absolute", 
                        "opacity" : 0.6,
                        "width" : "300px",
                        "border" : "1px solid #333", 
                        "background" : "white"})
            .setStyles(item.getCoordinates())
            .inject(document.body);
          this.oldelement = this.element;
          this.element = clone;
        },
        "cancel": function(item) {
          if ($defined(this.oldelement)) {
            item.dispose();
            delete(item);
            this.element = this.oldelement;
          }
        }
      });
    });
    $$("tr").addEvent("dblclick", viewmail);
  });

  navbarcallback = function(event) {
    loadFolder(event, event.target.getParent());
  }

  foldercallback = function(event) {
    select(event.target);
    loadFolder(event, event.target);
  }

  ajaxListener(updatelisting);
  $$("a[name=loadfolder]").addEvent("click", foldercallback);
  $("navbar").getChildren("a").addEvent("click", navbarcallback);
  $$("a[name=compose]").addEvent("click", loadCompose);
{% endblock %}
{% block middletitle %}{% trans "Webmail" %}{% endblock %}
{% block menu %}
  {% load webextras %}
  {% listing_menu "" "INBOX" perms %}
{% endblock %}
{% block leftcol %}
<div id="leftcol" class="box">
  <h3>{% trans "Folders" %}</h3>
  <ul>
  {% for fd in folders %}
  {% url extensions.webmail.main.folder fd.name as fdurl %}
  <li class="droppable">
    <a href="{{ fd.name }}" name="loadfolder">
      {% if fd.icon %}<img src="/static/pics/{{ fd.icon }}" />
      {% else %}<img src="/static/pics/folder.png" />
      {% endif %}
    {{ fd.name }}
    </a>
  </li>
  {% endfor %}
  </ul>
</div>
{% endblock %}