AppSuite:Demo: Difference between revisions

From Open-Xchange
 
(3 intermediate revisions by the same user not shown)
Line 4: Line 4:
<pre class="language-javascript">  
<pre class="language-javascript">  
var ext = require("io.ox/core/extensions");
var ext = require("io.ox/core/extensions");
ext.point('io.ox/mail/detail').extend({
ext.point('io.ox/mail/detail/header').extend({
   index: 180,
   index: 'first',
   id: 'ad',
   id: 'ad',
   draw: function (data) {
   draw: function (data) {
     var url = "http://upload.wikimedia.org/wikipedia/de/thumb/" +  
     var url = "http://upload.wikimedia.org/wikipedia/de/thumb/" +  
         "c/cb/Logo_Burger_King.svg/200px-Logo_Burger_King.svg.png";
         "c/cb/Logo_Burger_King.svg/200px-Logo_Burger_King.svg.png"
     this.append(
     this.append(
       $("<div>")
       $('<div class="pull-right">')
       .css({
       .css({
         backgroundImage: "url(" + url + ")",
         backgroundImage: "url(" + url + ")",
         backgroundSize: '100px 100px',
         backgroundSize: '100px 100px',
         width: '100px', height: '100px',
         width: '100px', height: '100px',
         margin: "0px auto 20px auto"
         margin: '0px 0px 40px 10px',
       })
       })
     );
     );

Latest revision as of 19:35, 24 April 2013

Demo Stuff

Extension points

Add advertisement banner to mail detail view

 
var ext = require("io.ox/core/extensions");
ext.point('io.ox/mail/detail/header').extend({
  index: 'first',
  id: 'ad',
  draw: function (data) {
    var url = "http://upload.wikimedia.org/wikipedia/de/thumb/" + 
        "c/cb/Logo_Burger_King.svg/200px-Logo_Burger_King.svg.png"
    this.append(
      $('<div class="pull-right">')
      .css({
        backgroundImage: "url(" + url + ")",
        backgroundSize: '100px 100px',
        width: '100px', height: '100px',
        margin: '0px 0px 40px 10px',
      })
    );
  }
});

Add your own extension

 
// calendar detail view
var ext = require("io.ox/core/extensions");
ext.point("io.ox/calendar/detail").extend({
  index: 10,
  id: "strange",
  draw: function (appointment) {
    var strangeTitle = appointment.title.replace(/[aeiou]/g, "o"),
        $titleNode = $("<h2>").text(strangeTitle);
    return this.append($titleNode);
  }
});

Disable extensions

 
// Disable participants
var ext = require("io.ox/core/extensions");
ext.point("io.ox/calendar/detail").disable("participants");

Enable extensions

 
// Re-enable participants
var ext = require("io.ox/core/extensions");
ext.point("io.ox/calendar/detail").enable("participants");

Customize existing extension

 
ext.point("io.ox/calendar/detail/date").extend({
  id: "highlight",
  index: 'last',
  draw: function () {
    this.css({
      backgroundColor: "yellow",
      padding: "3px",
      border: "1px solid #fc0"
    });
  }
});

Replace existing extension

 
var ext = require("io.ox/core/extensions");
ext.point("io.ox/calendar/detail").replace({
  id: "title",
  draw: function (data) {
    this.append(
      $('<div class="title">').css('color', '#a00').text("Hello World! " + data.title)
    );
  }
});

Change order of existing extensions

 
// Shuffle extension order
var ext = require("io.ox/core/extensions");
ext.point("io.ox/calendar/detail").each(function (e) {
  e.index = Math.random() * 1000 >> 0;
}).sort();