Changeset 06b76b in indico

Timestamp:

01/24/12 11:15:33 (17 months ago)

Author:

Pedro Ferreira <jose.pedro.ferreira@…>

Branches:

master, hello-world-walkthrough, ipv6, v0.98-series, v0.98.2, v0.98.3, v0.99, b8c30da8ebdbdcbd675a873997cc3e95f567de49, 4287315ec967a3da168d83963c14001db8487d53

Children:

44e7c3

Parents:

c82c67

git-author:

Pedro Ferreira <jose.pedro.ferreira@…> (10/28/11 14:28:22)

git-committer:

Pedro Ferreira <jose.pedro.ferreira@…> (01/24/12 11:15:33)

Message:

[IMP] Full undo support

• Deferred-based events;

Files:

• etc/js/indico.cfg (modified) (1 diff)
• indico/MaKaC/common/Configuration.py (modified) (1 diff)
• indico/MaKaC/services/implementation/base.py (modified) (1 diff)
• indico/MaKaC/services/implementation/schedule.py (modified) (2 diffs)
• indico/MaKaC/webinterface/tpls/ConfModifScheduleGraphic.tpl (modified) (1 diff)
• indico/MaKaC/webinterface/tpls/ConferenceTimeTable.tpl (modified) (1 diff)
• indico/MaKaC/webinterface/tpls/js/vars.js.tpl (modified) (1 diff)
• indico/htdocs/css/Default.css (modified) (5 diffs)
• indico/htdocs/images/pointer_tip.png (added)
• indico/htdocs/images/src/tt_time.svg (added)
• indico/htdocs/images/tt_time.png (added)
• indico/htdocs/js/indico/Core/Data.js (modified) (1 diff)
• indico/htdocs/js/indico/Core/Dialogs/Util.js (modified) (1 diff)
• indico/htdocs/js/indico/Management/Timetable.js (modified) (6 diffs)
• indico/htdocs/js/indico/Timetable/Base.js (modified) (20 diffs)
• indico/htdocs/js/indico/Timetable/DragAndDrop.js (added)
• indico/htdocs/js/indico/Timetable/Draw.js (modified) (27 diffs)
• indico/htdocs/js/indico/Timetable/Layout.js (modified) (8 diffs)
• indico/htdocs/js/indico/Timetable/Loader.js (modified) (1 diff)
• indico/htdocs/js/indico/Timetable/Management.js (modified) (4 diffs)
• indico/htdocs/js/indico/Timetable/Undo.js (added)

etc/js/indico.cfg

@@ -61 +61 @@
     Layout.js
     Base.js
+    DragAndDrop.js
+    Undo.js
     Draw.js
     Management.js

indico/MaKaC/common/Configuration.py

@@ -115 +115 @@
                  "indico_co": "indico_co.png",
                  "login": "pict_login.png",
+                 "tt_time": "tt_time.png",
                  "table": "img_table.png",
                  "lectureMenu": "pict_event_negb.png",

indico/MaKaC/services/implementation/base.py

@@ -96 +96 @@
         value = self._paramList.get(paramName)
 
-
         if (not allowEmpty) and (value == None):
             raise EmptyParameterException(paramName)

indico/MaKaC/services/implementation/schedule.py

@@ -1074 +1074 @@
         self._sessionId = pManager.extract("sessionId", pType=str, allowEmpty=True, defaultValue=None)
         self._sessionSlotId = pManager.extract("sessionSlotId", pType=str, allowEmpty=True, defaultValue=None)
-
-    def _performOperation(self):
-
+        self._keepTime = pManager.extract("keepTime", pType=bool, allowEmpty=True, defaultValue=False)
+
+    def _performOperation(self):
         if (self._sessionId != None and self._sessionSlotId != None):
             self._schEntry = self._conf.getSessionById(self._sessionId).getSlotById(self._sessionSlotId).getSchedule().getEntryById(self._schEntryId)
@@ -1113 +1113 @@
                             self._schEntry.setDuration(dur=slot.getDuration())
                         else:
-                            self._schEntry.setStartDate(slot.getSchedule().calculateEndDate())
+                            if self._keepTime:
+                                self._schEntry.setStartDate(oldDate)
+                            else:
+                                self._schEntry.setStartDate(slot.getSchedule().calculateEndDate())
                             #self._schEntry.setDuration(dur=session.getContribDuration())
                         # add it to new container

indico/MaKaC/webinterface/tpls/ConfModifScheduleGraphic.tpl

@@ -1 +1 @@
 <div class="groupTitleNoBorder">${ _("Timetable")} <em>(${ _("from") } ${ start_date } ${ _("to") } ${ end_date } <a href=${ editURL }>[${_("edit")}]</a> ${_("Timezone")}: ${ timezone })</em></div>
+
 <div id="timetableDiv" style="position: relative;">
 

indico/MaKaC/webinterface/tpls/ConferenceTimeTable.tpl

@@ -1 @@
-
 <div id="timetable" style="position: relative;">
 

indico/MaKaC/webinterface/tpls/js/vars.js.tpl

@@ -85 +85 @@
         indico_small: "${ iconFileName("indico_small")}",
         protected: "${ iconFileName("protected")}",
-        calendarWidget: "${ iconFileName("calendarWidget") }"
+        calendarWidget: "${ iconFileName("calendarWidget") }",
+        tt_time: "${ iconFileName("tt_time") }"
     },
     FileTypeIcons:

indico/htdocs/css/Default.css

@@ -5013 +5013 @@
 }
 
-/* Timetable drag n drop,
-   droppable styles starts here. */
+.timetableBlock {
+    box-shadow: 0px 0px 5px #DDD;
+}
+
+/* Timetable drag n drop */
+
+#tt_hour_tip {
+    cursor: pointer;
+    overflow: auto;
+    background: white;
+    position: absolute;
+    z-index: 1;
+}
+
+#tt_hour_tip:hover {
+    opacity: 0.7;
+}
+
+.hourLine {
+    position: absolute;
+    border-top: 1px solid #E8E8E8;
+    font-size: 11px;
+}
+
+.ui-state-disabled.hourLine {
+    opacity: 1.0 !important;
+}
+
+.ui-droppable-disabled {
+    opacity: 0.7 !important;
+}
 
 /* For when the  Shift is held down */
@@ -5048 +5077 @@
 
 div.ui-draggable-dragging {
-    border: 3px solid gold;
-    /*background-color: gold;*/
-    /*To make the current dragged element
-      on top of everything*/
     z-index: 9000;
-}
-
-div.dragTip {
-    /* Just over 9000! (To be "above" the draggable, which has z-index 9000) */
-    z-index: 9001;
-    position: absolute;
-    width: 100%;
-    top: 350;
-    border-top: 1px dotted red;
-    font-weight: bold;
+    opacity: 0.5;
 }
 
@@ -5793 +5809 @@
 }
 
-div.blockMoveProgressText {
-/*
-    position: fixed;
-    bottom: 0px;*/
+#tt_status_info .text {
     padding: 3px 8px 3px;
     text-align: center;
-    color: #DDD;
-}
-
-div.blockMoveProgressImage {
-    background: transparent url("../images/load_lightblue.gif") no-repeat center center;
-    padding-bottom: 49px;
-}
-
-div.blockMoveProgress {
-    width: 100px;
-    background-color: #424242;
+    color: #aaa;
+    float: right;
+}
+
+#tt_status_info img {
+    margin-top: 2px;
+}
+
+#tt_status_info {
+    background: #fefefe;
+    border: 1px solid #eee;
+    padding: 5px;
     position: fixed;
-    bottom: 1px;
-    left: 91.8%;
+    bottom: 5px;
+    right: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
+    opacity: 0.9;
+    box-shadow: 0px 0px 2px rgba(220, 220, 200, 0.4);
 }
 
@@ -7388 +7404 @@
     background: white url("../images/drag.png") left top no-repeat;
 }
+
 .arrow {
     background: #ECECEC;
@@ -7576 +7593 @@
 }
 
+#dragTip {
+    position: absolute;
+    background: #f0f0f0;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    font-size: 10px;
+    padding: 4px;
+    opacity: 0.7;
+    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
+}
+
+#dragTip .pointer {
+    position: absolute;
+    background: url('../images/pointer_tip.png');
+    height: 7px;
+    width: 5px;
+    top: 6px;
+    right: -5px;
+}
+
+.ui-resizable-resizing {
+    opacity: 0.9;
+    z-index: 1000;
+}

indico/htdocs/js/indico/Core/Data.js

@@ -166 +166 @@
     dateTimeIndicoToJS: function(obj) {
         m1 = obj.date.match(/(\d+)[\-\/](\d+)[\-\/](\d+)/);
-        m2 = obj.time.match(/(\d+):(\d+):(\d+)/);
-
-
-        var date = new Date(m1[1],m1[2] - 1,m1[3]);
+        m2 = obj.time.match(/(\d+):(\d+)(?::(\d+))?/);
+
+
+        var date = new Date(m1[1],m1[2] - 1,m1[3]||0);
         setTime(date, [m2[1],m2[2],m2[3]]);
 

indico/htdocs/js/indico/Core/Dialogs/Util.js

@@ -20 +20 @@
     },
 
-    blockMoveProgress: function(text) {
-      var message = (text != undefined) ? $T(text) : "";
-      var loadingImage = $('<div class= "blockMoveProgressImage"></div>');
-      var loadingText = $('<div class="blockMoveProgressText"></div>').html(message);
-      var progress = $('<div class="blockMoveProgress"></div>').append(loadingImage, loadingText);
+    ttStatusInfo: function(text) {
+        var stext = $('<div class="text"></div>').text(text ? $T(text) : null);
+        var image = $('<img/>', {
+            src: "images/loading.gif",
+            alt: $T('Loading...')
+        });
 
-      $('body').append(progress);
+        var progress = $('<div id="tt_status_info"></div>').
+            append(image, stext);
+
+        if (!$('#tt_status_info').length) {
+            $('body').append(progress);
+        } else {
+            $('#tt_status_info').replaceWith(progress);
+        }
+
         return function() {
-          $(progress).remove();
+            $(progress).remove();
         };
     },

indico/htdocs/js/indico/Management/Timetable.js

@@ -1035 +1035 @@
 
                 // disable the radio button where the item already belongs to
-                if (!this.inSession && this.startDate.replaceAll('-', '') == currentDay) {
+                if (!this.inSession && Util.formatDateTime(this.eventData.startDate, IndicoDateTimeFormats.Ordinal) == currentDay) {
                     rb.dom.disabled = 'disabled';
                 }
@@ -1056 +1056 @@
                     rb.dom.value = value.sessionId + ':' + value.sessionSlotId;
 
-                    if (this.inSession && value.sessionId == this.sessionId && value.sessionSlotId == this.slotId) {
+                    if (this.inSession && value.sessionId == this.eventData.sessionId && value.sessionSlotId == this.eventData.sessionSlotId) {
                         rb.dom.disabled = 'disabled';
                     }
@@ -1108 +1108 @@
 
                         var value = self.getChosenValue();
-                        self.handleBlockMove(self, value);
-
-                        var killProgress = IndicoUI.Dialogs.Util.progress($T('Moving the entry...'));
-
-                        indicoRequest(self.managementActions.methods[self.inSession?'SessionEntry':'Event'].moveEntry, {
-                            value : value,
-                            conference : self.confId,
-                            scheduleEntryId : self.scheduleEntryId,
-                            sessionId : self.sessionId,
-                            sessionSlotId : self.slotId
-                        }, function(result, error) {
-                            if (error) {
-                                killProgress();
-                                IndicoUtil.errorReport(error);
-                            } else {
-                                // change json and repaint timetable
-                                self.managementActions.timetable._updateMovedEntry(result, result.old.id);
-                                killProgress();
-                                self.close();
-                            }
-                        });
+                        self.managementActions.moveToSession(self.eventData, value, 'drop');
                     }],
                     [$T('Cancel'), function() {
@@ -1138 +1118 @@
             draw: function() {
                 var self = this;
-                this.inSession = true;
-
-                if (self.sessionId === null && self.slotId === null) {
+
+                if (this.eventData.sessionId === null && this.eventData.slotId === null) {
                     this.inSession = false;
                 }
                 // populate the tabslist
-                var tabData = self.topLevelTimetableData;
+                var tabData = this.topLevelTimetableData;
 
                 // sort tabs according to days
@@ -1163 +1142 @@
                 var contribLocation = null;
                 if (this.inSession) {
-                    contribLocation = self.topLevelTimetableData[self.currentDay]['s' + self.sessionId + 'l' + self.slotId].title +
+                    contribLocation = self.topLevelTimetableData[this.currentDay]
+                    ['s' + this.eventData.sessionId + 'l' + this.eventData.sessionSlotId].title +
                         " (interval #" + self.slotId + ")";
                 } else {
@@ -1206 +1186 @@
                 this.tabWidget.postDraw();
                 this.ExclusivePopupWithButtons.prototype.postDraw.call(this);
-            },
-
-          /* Takes care of moving a contribution/timeblock to another session/timetable.
-           * This goes for both "drag and drop" as well as the regular "MoveEntry Dialog clicking"*/
-          handleBlockMove: function(eventData, value) {
-            var self = this;
-
-            // if nothing has been selected yet
-            if (!value) {
-              return false;
             }
-
-            //Displays a "loading ..." div at the righthand bottom side
-            var killProgress = IndicoUI.Dialogs.Util.blockMoveProgress("Moving the entry...");
-
-            self.inSession = true;
-            if (eventData.sessionId == null && eventData.sessionSlotId == null) {
-              self.inSession = false;
-            }
-
-            indicoRequest(self.managementActions.methods[self.inSession?'SessionEntry':'Event'].moveEntry, {
-                            value : value,
-                            conference : self.confId,
-                            scheduleEntryId : eventData.scheduleEntryId,
-                            sessionId : eventData.sessionId,
-                            sessionSlotId : self.slotId
-                          }, function(result, error) {
-                            if (error) {
-                              killProgress();
-                              IndicoUtil.errorReport(error);
-                            } else {
-                              // change json and repaint timetable
-                              self.managementActions.timetable._updateMovedEntry(result, result.old.id);
-                              killProgress();
-                              self.close();
-                            }});
-          }
         },
-        function(managementActions, timetable, entryType, sessionId, slotId, currentDay, scheduleEntryId, confId, startDate) {
-            this.managementActions = managementActions;
-            this.timetableData = timetable.getData();
-            this.topLevelTimetableData = timetable.parentTimetable?timetable.parentTimetable.getData():this.timetableData;
-            this.timetable = timetable ;
-            this.entryType = entryType;
-            this.sessionId = sessionId;
-            this.slotId = slotId;
-            this.currentDay = currentDay;
-            this.scheduleEntryId = scheduleEntryId;
-            this.confId = confId;
-            this.startDate = startDate;
-
-            var self = this;
-
-            this.ExclusivePopupWithButtons($T("Move Timetable Entry"),
+     function(managementActions, timetable, eventData, currentDay) {
+         this.managementActions = managementActions;
+         this.timetableData = timetable.getData();
+         this.topLevelTimetableData = timetable.parentTimetable?timetable.parentTimetable.getData():this.timetableData;
+         this.timetable = timetable;
+         this.currentDay = currentDay;
+         this.eventData = eventData;
+
+         this.inSession = (eventData.sessionId != null) && (eventData.sessionSlotId != null);
+
+         var self = this;
+
+         this.ExclusivePopupWithButtons($T("Move Timetable Entry"),
             function() {
-              self.close();
+                self.close();
             });
-        });
+     });
 
 

indico/htdocs/js/indico/Timetable/Base.js

@@ -52 +52 @@
             $('<div/>').css('display', 'block'),
             this.legend,
-            this.header.dom,
+            this.header,
             timetableDiv.dom,
             this.loadingIndicator.dom).get();
@@ -68 +68 @@
     getData: function() {
         return this.data;
+    },
+
+    get_elem: function(blkId) {
+        return $(this.getTimetableDrawer()._blockMap[blkId]);
     },
 
@@ -97 +101 @@
     },
 
+    setSelectedTab: function(val) {
+        // same as inherited, but return deferred
+        var dfr = $.Deferred();
+        $('body').one('timetable_ready', function() {
+            dfr.resolve();
+        });
+        this.LookupTabWidget.prototype.setSelectedTab.call(this, val)
+        return dfr.promise();
+    },
+
     getTimetableDrawer: function() {
         return this.timetableDrawer;
@@ -135 +149 @@
     },
 
-    _shiftKeyListener: function() {
-      var indicatorDiv = $('.shiftIndicator');
-
-      //If its not already drawn/appended
-      if(!(indicatorDiv.length > 0)) {
-        indicatorDiv = (Html.div('shiftIndicator', $T("Shifting later entries ENABLED"))).dom;
-        $('body').append(indicatorDiv);
-      }
-
-      //< Keyboard Key "Shift" held down > listener for shifting while dragging blocks
-      $(window).keydown(function(e) {
-        //if Shift is pushed down
-        if(e.keyCode == '16') {
-          $(window).data('shiftIsPressed', true);
-          $(indicatorDiv).fadeIn("fast");
-        }}).keyup(function(e){
-          if(e.keyCode == '16') {
-            $(window).data('shiftIsPressed', false);
-            $(indicatorDiv).fadeOut("fast");
-          }
-        });
-
-      $(window).data('shiftIsPressed', false); //default value is false
-    }
 },
      function(data, width, wrappingElement, detailLevel, managementMode) {
          var self = this;
-         this._shiftKeyListener();
-
          this.data = data;
 
@@ -448 +436 @@
 
     switchToInterval : function(intervalId) {
+        var dfr = $.Deferred();
         this.disable();
 
@@ -466 +455 @@
         var content = this.intervalTimeTable.draw();
         this.canvas.html(content[0]);
+        this.intervalTimeTable.postDraw();
         $(this.menu.dom).hide();
 
+        $('body').trigger('timetable_switch_interval', this.intervalTimeTable);
+
+        dfr.resolve();
+        return dfr.promise();
     },
 
@@ -474 +468 @@
     },
 
-    switchToTopLevel : function() {
+    switchToTopLevel : function(day) {
+        var dfr = $.Deferred();
         this.enable();
-        this.setSelectedTab(this.currentDay);
+        this.setSelectedTab(day || this.currentDay);
         $(this.menu.dom).show();
         this._generateContent(this.getSelectedPanel());
         this.timetableDrawer.redraw();
+        $('body').trigger('timetable_switch_toplevel', this);
+
+        dfr.resolve();
+        return dfr.promise();
     }
 },
@@ -592 +591 @@
     },
 
+    postDraw: function() {
+        this.timetableDrawer.postDraw();
+    },
+
     setData: function(data) {
         var day = IndicoUtil.formatDate2(IndicoUtil.parseJsonDate(data.startDate));
@@ -622 +625 @@
 
 },
-     function(parent, width, wrappingElement, managementActions) {
+     function(parent, width, wrappingElement, managementActions, layout) {
 
          this.managementActions = managementActions;
@@ -632 +635 @@
                                                             this.loadingIndicator,
                                                             !!managementActions,
-                                                            managementActions);
+                                                            managementActions,
+                                                            layout || 'compact');
      });
 
@@ -694 +698 @@
     },
 
+
+    _updateMovedEntry: function(result, oldEntryId) {
+        return this._updateEntry(result, oldEntryId, function(data){
+
+            var oldDay = Util.formatDateTime(Util.parseDateTime(result.old.startDate, IndicoDateTimeFormats.Default),
+                                          IndicoDateTimeFormats.Ordinal);
+
+            if (result.old.sessionId) {
+                // block was inside session slot
+                delete data[oldDay]['s' + result.old.sessionId + 'l' + result.old.sessionSlotId].entries[result.old.id];
+            } else {
+                // block was in top level
+                delete data[oldDay][result.old.id];
+            }
+
+            if(result.slotEntry){
+                // block moves inside session slot
+                data[result.day][result.slotEntry.id].entries[result.id] = result.entry;
+                // updates the time of the session if it has to be extended
+                data[result.day][result.slotEntry.id].startDate.time = result.slotEntry.startDate.time;
+                data[result.day][result.slotEntry.id].endDate.time = result.slotEntry.endDate.time;
+            } else {
+                // block moves to top level
+                data[result.day][result.id]=result.entry;
+            }
+        });
+    },
+
     /*
      *
@@ -846 +878 @@
                              this.contextInfo.isPoster?null:this.fitInnerTimetableLink,
                              customLinks);
-        return Html.div({}, this.warningArea, Html.div('clearfix', this.menu, this.infoBox));
+
+        var tt_hour_tip = $('<div id="tt_hour_tip"/>').hide().append($('<img/>', {src: imageSrc(Indico.SystemIcons.tt_time),
+                                                                                  title:"Add one hour"}))
+
+        return $('<div/>').append(this.warningArea.dom, $('<div class="clearfix"/>').
+                                  append(this.menu.dom, this.infoBox.dom, tt_hour_tip));
         },
 
@@ -1101 +1138 @@
     _updateEntry: function(result, oldEntryId, updateCycle) {
 
+        var self = this;
         var data = this.getData();
 
@@ -1140 +1178 @@
         }
 
+        var dfr = $.Deferred();
+        $('body').one('timetable_redraw', function() {
+            $('body').trigger('timetable_update', self);
+            dfr.resolve();
+        });
         this.timetableDrawer.redraw();
+        return dfr.promise();
     },
 
@@ -1182 +1226 @@
 
         this.timetableDrawer.redraw();
-    },
-
-    _updateMovedEntry: function(result, oldEntryId) {
-        this._updateEntry(result, oldEntryId, function(data){
-            if (exists(result.slotEntry)) {
-                // move into a session slot
-                data[result.day][result.slotEntry.id].entries[result.id] = result.entry;
-                // updates the time of the session if it has to be extended
-                data[result.day][result.slotEntry.id].startDate.time = result.slotEntry.startDate.time;
-                data[result.day][result.slotEntry.id].endDate.time = result.slotEntry.endDate.time;
-            } else {
-                data[result.day][result.id] = result.entry;
-            }
-        });
+        $('body').trigger('timetable_update', this);
+
     },
 
@@ -1270 +1302 @@
     _updateEntry: function(result, oldEntryId, updateCycle) {
 
+        var self = this;
         var slot = this.contextInfo;
         var data = this.getData();
@@ -1307 +1340 @@
         }
 
+        var dfr = $.Deferred();
+        $('body').one('timetable_redraw', function() {
+            $('body').trigger('timetable_update', self);
+            dfr.resolve();
+        });
         this.timetableDrawer.redraw();
-
-    },
-
-    _updateMovedEntry: function(result, oldEntryId) {
-        this._updateEntry(result, oldEntryId, function(data){
-            if(exists(result.slotEntry)){
-                // from slot to slot
-                data[result.day][result.slotEntry.id].entries[result.id] = result.entry;
-                // updates the time of the session if it has to be extended
-                data[result.day][result.slotEntry.id].startDate.time = result.slotEntry.startDate.time;
-                data[result.day][result.slotEntry.id].endDate.time = result.slotEntry.endDate.time;
-            } else {
-                // from slot to top level
-                data[result.day][result.id]=result.entry;
-            }
-        });
+        return dfr.promise();
     },
 
@@ -1364 +1387 @@
         }
 
+        var dfr = $.Deferred();
+        $('body').bind('timetable_redraw', function() {
+            dfr.resolve();
+        });
         this.timetableDrawer.redraw();
+        return dfr.promise();
     },
 
@@ -1398 +1426 @@
          this.ManagementTimeTable(data, contextInfo, eventInfo, width, wrappingElement, detailLevel, customLinks);
          var managementActions = new IntervalTimeTableManagementActions(this, eventInfo, contextInfo, isSessionTimetable);
-         this.IntervalTimeTableMixin(parent, width, wrappingElement, managementActions);
+         this.IntervalTimeTableMixin(parent, width, wrappingElement, managementActions, 'proportional');
 
          this.canvas = Html.div({});
@@ -1405 +1433 @@
          this.setData = IntervalTimeTableMixin.prototype.setData;
          this.getById = IntervalTimeTableMixin.prototype.getById;
+         this.postDraw = IntervalTimeTableMixin.prototype.postDraw;
 
      });

indico/htdocs/js/indico/Timetable/Draw.js

@@ -27 +27 @@
          openPopup: function(event) {
              var self = this;
-
-             //All elements currently being dragged
-             /* We don't want to trigger the popup
-              if something is being dragged by the mouse */
-             var draggingElements = $('.ui-draggable-dragging');
-
-              // If popup alredy shown do nothing
-             if (self.popupActive || self.materialMenuOpen ||
-                 (draggingElements.length > 0)) {
-
-                 return;
-             }
-
              self.popupActive = true;
              self.div.dom.style.cursor = 'default';
@@ -81 +68 @@
              var self = this;
 
-             this.materialMenuOpen = false;
+            this.materialMenuOpen = false;
 
              var button = Html.div('timetableBlockMaterial');
@@ -230 +217 @@
              };
 
-                this.block = Html.div({style:
-                        {
-                            position: 'absolute',
-                            top: pixels(this.topPos),
-                            height: pixels(this.height),
-                            backgroundColor: this.printableVersion ? 'white' : this.eventData.color,
-                            color: this.printableVersion ? 'black' : this.eventData.textColor,
-                            borderColor: this.printableVersion ? 'black' : '',
-                            left: pixels(this.leftPos),
-                            width: pixels(this.width-3),
-                            borderBottomStyle: this.blockData.unfinished?'dashed':''
-                        },
-                                       className: 'timetableBlock ' + classTable[this.eventData.entryType]
-                                      }, this._blockDescription()
-               );
-
-              self.makeDraggable(self.block, self.eventData);
-              self.makeResizable(self.block, self.eventData);
-
-              //When you drop something on a session timeBlock.
-              if(this.eventData.entryType == 'Session') {
-                self.makeMoveDroppable(self.block, self.eventData);
-              }
+                $(this.block.dom).css({
+                    position: 'absolute',
+                    top: pixels(this.topPos),
+                    height: pixels(this.height),
+                    'background-color': this.printableVersion ? 'white' : this.eventData.color,
+                    color: this.printableVersion ? 'black' : this.eventData.textColor,
+                    'border-color': this.printableVersion ? 'black' : '',
+                    left: pixels(this.leftPos),
+                    width: pixels(this.width-3),
+                    'border-bottom-style': this.blockData.unfinished?'dashed':''
+                });
+
+                $(this.block.dom).addClass('timetableBlock ' +
+                                           classTable[this.eventData.entryType]);
+
+                this.block.set(this._blockDescription());
 
                // This is a special case, when users shows contribution details it doesn't
@@ -279 +259 @@
                if (!self.printableVersion) {
                    $(this.block.dom).click(function(e) {
-                     self.openPopup(e);
+                       if (!self.timetable.getTimetableDrawer().eventsDisabled) {
+                           $(this).trigger('tt_block.balloon', e);
+                       }
                    });
                    highlightWithMouse(this.div, this.block);
@@ -287 +269 @@
             },
 
-          makeResizable: function(block, eventData) {
-            var self = this;
-            var originalHeight = $(block.dom).height();
-            $(block.dom).data('originalheight', originalHeight);
-            var currentEndHour = null;
-            var currentStartHour = null;
-
-            var resizable = $(block.dom).resizable({
-              containment: $('#timetableDiv'),
-              maxWidth: $(block.dom).width(),
-              minWidth: $(block.dom).width(),
-
-              resize: function(event, ui) {
-                //Array of the form [hour] = '..position().top' (relative to timetable)
-                var hourLines = self.timetable.timetableDrawer.hourLinesArray;
-                var mouseTop = event.pageY;
-
-                var curBestDiff = Number.MAX_VALUE;
-                var curHour = null;
-                var diff = null;
-
-                //This loop extracts the hour you're resizing on.
-                //"The older for loop" is much faster than jQuery by the way
-                for(i in hourLines) {
-                  if(hourLines[i] != undefined) {
-
-                    // If you pull the resize "edge" where there is
-                    // no hourLine div
-                    if(!($("#hourLine_"+i).length > 0)) {
-                      return;
-                    }
-
-                    diff = (mouseTop - $("#hourLine_"+i).offset().top);
-                    if((diff > 0) && (diff < curBestDiff)) {
-                      curBestDiff = diff;
-                      curHour = i;
-                    }
-                  }
-                }
-
-                //returns array, with array[0] = ending hour, array[1] = ending minute (rounded to closest 5-divisible)
-                var gridTime = self.timetable.getTimetableDrawer().fetchTimeDragOnHour($(block.dom), $("#hourLine_"+curHour), curHour, "end");
-                if(gridTime != null) {
-                  currentStartHour = gridTime[0];
-                  currentEndHour = gridTime[1];
-                }
-                return;
-              },
-              stop: function(event, ui) {
-                $('.dragTip').hide();
-                self.timetable.getTimetableDrawer().releaseResizeOnHour(currentStartHour, currentEndHour, eventData, block);
-              }
-            });
-          },
-
-          makeDraggable: function(block, eventData) {
-            var self = this;
-
-            var originalWidth = $(block.dom).width();
-            var originalHeight = $(block.dom).height();
-
-            /* Resize timeblock if nedeed */
-            var maxCol = self.timetable.getTimetableDrawer().maxCol;
-            var newWidth = (Math.round($('#timetableDiv').width()/(maxCol)));
-
-            var heightThreshold = 450;
-            var heightChange = (originalHeight > heightThreshold);
-            var newHeight =  (heightChange) ? heightThreshold : originalHeight;
-
-            var widthChange = (!(newWidth == originalWidth));
-
-            var draggable = $(block.dom).draggable({
-              //Center the mouse in the middle of the block while dragging
-              cursorAt: {
-                left: ((newWidth == undefined) ? 0 : Math.round(newWidth/2)),
-                top: Math.round(newHeight/2) },
-              containment: $('#timetableDiv'),
-              revert: 'invalid',
-              start: function() {
-                /* Resize timeblock if nedeed */
-                maxCol = self.timetable.getTimetableDrawer().maxCol;
-                newWidth = (maxCol > 1) ? Math.round($('#timetableDiv').width()/(maxCol)) : originalWidth;
-
-                $(block.dom).width(newWidth);
-                $(block.dom).height(newHeight);
-
-                //(fulhack) Ugly hack [Begin] on jQuery to make the changed width come in to effect while dragging
-                $(this).data('draggable').helperProportions.width = newWidth;
-                $(this).data('draggable').helperProportions.height = newHeight;
-                $(this).data('draggable')._setContainment();
-                //Ugly hack [End]
-
-                self.timetable.getTimetableDrawer().createDragToolTip();
-
-                var pos = $(block.dom).position();
-                draggable.data('initialPosition', pos);
-              },
-              stop: function() {
-                //reset original width
-                if(widthChange || heightChange) {
-                  $(block.dom).animate({
-                    width: originalWidth,
-                    height: originalHeight
-                  });
-                }
-                $('.dragTip').remove();
-              },
-              drag: function(event) {
-              }});
-
-            draggable.data('blockInfo', block);
-            draggable.data('eventData', eventData);
-          },
-
-          /* This is the function that take care of time block drops
-            ON a session */
-          makeMoveDroppable: function(block, eventData) {
-            var self = this;
-
-            function isSession(ui) {
-              return ($(ui.draggable).hasClass("timetableSession"));
-            }
-
-            function isTouchingWall(ui) {
-             var ret = (($(ui.draggable).position().left == 0)
-                        || ($(ui.draggable).position().left ==
-                         ($('#timetableDiv').width()-$(ui.draggable).width())));
-              return ret;
-            };
-
-            $(block.dom).droppable({
-              drop: function( event, ui ) {
-                $('.dragTip').remove();
-
-                //If a session is dropped on top do nothing.
-                if(isSession(ui)) {
-                  return;
-                }
-
-                /* If the dragged block dropped to the left most side,
-                 * or the right most side (touches left/right wall)
-                 * AND..
-                 * the drop is handled by the drop-on-session-handler (since we're inside here now...)
-                 * THEN
-                 * handle it as a normal "HourLine drop". */
-
-                if(isTouchingWall(ui)) {
-                    $('.ui-droppable').droppable('enable');
-                    var ttDrawer = self.timetable.getTimetableDrawer();
-                    ttDrawer.releaseDragOnHour(ui, ttDrawer.curStartHour, ttDrawer.curStartMinute);
-                    return;
-                }
-
-                var blockInfo = $(ui.draggable).data('blockInfo');
-                var blockEventData = $(ui.draggable).data('eventData');
-
-                var moveEntryDialog = new MoveEntryDialog(
-                  self.managementActions,
-                  self.timetable,
-                  eventData.entryType,
-                  eventData.sessionId,
-                  eventData.sessionSlotId,
-                  timetable.currentDay,
-                  eventData.scheduleEntryId,
-                  eventData.conferenceId,
-                  eventData.startDate.date);
-
-                var chosenValue = eventData.sessionId + ':' + eventData.sessionSlotId;
-
-                var initialPosition = $(ui.draggable).data('initialPosition');
-
-                //Store Undo data
-                // TODO - not functioning at the moment
-                //self.timetable.getTimetableDrawer().enableUndo("drop", blockEventData);
-
-                moveEntryDialog.handleBlockMove(blockEventData, chosenValue);
-
-                // Non-instanced call, which fails on self.slotId inside the indicoRequest, inside moveEntryDialog(...)
-                /* MoveEntryDialog.prototype.handleBlockMove.call(self, blockEventData,
-                  chosenValue, self.managementActions); */
-
-                return;
-              },
-              greedy: true,
-              tolerance: 'intersect',
-              activate: function() {
-                $(block.dom).css('border', '2px solid green');
-              },
-              deactivate: function() {
-                $(block.dom).css('border', '');
-              },
-              over: function(event, ui) {
-                /* If you touch the wall while also
-                 * over a session - show that session with the style of
-                 * "not current drop target"
-                 *
-                 */
-                  function(event) {
-                    if(isTouchingWall(ui)) {
-                      $('.ui-droppable').droppable('enable');
-                    }
-                  };
-
-                if(isSession(ui) || isTouchingWall(ui)) {
-                  return;
-                }
-
-                $('.dragTip').hide();
-                $('.ui-droppable').not(this).droppable('disable');
-              },
-              out: function(event, ui) {
-                if(isSession(ui)) {
-                  return;
-                }
-                $('.dragTip').show();
-                $('.ui-droppable').not(this).droppable('enable');
-              },
-           });
-          },
+            _postDraw: function() {
+            },
 
             postDraw: function(hook) {
@@ -585 +350 @@
 
                 // If content height <= div height then nothing needs to be done
-                if (contentHeight() <= parentDivHeight) {
-                    return;
+                if (contentHeight() > parentDivHeight) {
+                    // Try to remove the location info, and set title font weight to non bold,
+                    // if this works, then we're done. Otherwise, start to truncate the title as well.
+                    if (this.timeDiv.dom.style.display == 'none') {
+                        this.locationDiv.dom.style.display = 'none';
+                    }
+
+                    if (contentHeight() > parentDivHeight) {
+                        // Calculates the the width of title, presenters and possible arrows
+                        var topContentWidth = function() {
+                            var width = 2 * self.margin;
+                            if(self.titleDiv)
+                                width += self.titleDiv.dom.offsetWidth;
+                            if(self.presentersDiv)
+                                width += self.presentersDiv.dom.offsetWidth;
+
+                            self._postDraw()
+                            return width;
+                        }
+
+                        // Truncate title based on a ratio: div height / content height
+                        title = this.truncateTitle(Math.ceil(title.length * ((parentDivHeight) / contentHeight())), title);
+                        this.titleDiv.set(title);
+                        //String will be shorten by the value of 'step'
+                        var step = 2;
+                        //Truncating the title since it can be displayed in a single line
+                        // title !== "..." avoids the endless loop
+                        while (title !== "..." && contentHeight() > parentDivHeight && topContentWidth() > parentDivWidth * 0.8) {
+                            title = this.truncateTitle(-step, title);
+                            this.titleDiv.set(title);
+                        }
+                    }
                 }
 
-                // Try to remove the location info, and set title font weight to non bold,
-                // if this works, then we're done. Otherwise, start to truncate the title as well.
-                if (this.timeDiv.dom.style.display == 'none') {
-                    this.locationDiv.dom.style.display = 'none';
-                }
-
-                if (contentHeight() <= parentDivHeight) {
-                    return;
-                }
-
-                //Calculates the the width of title, presenters and possible arrows
-                var topContentWidth = function() {
-                    var width = 2 * self.margin;
-                    if(self.titleDiv)
-                        width += self.titleDiv.dom.offsetWidth;
-                    if(self.presentersDiv)
-                        width += self.presentersDiv.dom.offsetWidth;
-
-                    return width;
-                }
-
-                // Truncate title based on a ratio: div height / content height
-                title = this.truncateTitle(Math.ceil(title.length * ((parentDivHeight) / contentHeight())), title);
-                this.titleDiv.set(title);
-                //String will be shorten by the value of 'step'
-                var step = 2;
-                //Truncating the title since it can be displayed in a single line
-                // title !== "..." avoids the endless loop
-                while (title !== "..." && contentHeight() > parentDivHeight && topContentWidth() > parentDivWidth * 0.8) {
-                    title = this.truncateTitle(-step, title);
-                    this.titleDiv.set(title);
-                }
-
+                this._postDraw();
+                return null;
             },
             createPileEffect: function() {
@@ -643 +407 @@
                 this.block.dom.style.color = textColor;
             }
+
         },
      function(timetable, eventData, blockData, compactMode, printableVersion, detailLevel){
-
          this.TimetableBlockBase(timetable);
          this.compactMode = compactMode;
@@ -654 +418 @@
          this.detailLevel = detailLevel;
          this.arrows = Html.span({});
+         this.block = Html.div({});
+
+         var self = this;
+         $(this.block.dom).bind('tt_block.balloon', function(event, originalEvent){
+             if (!self.popupActive) {
+                 self.openPopup(originalEvent);
+             }
+         })
         }
    );
@@ -747 +519 @@
      });
 
-type("TimetableBlockManagementMixin",[],
+type("TimetableBlockManagementMixin", ["DragAndDropBlockMixin"],
      {
          _drawPopup: function() {
@@ -803 +575 @@
                              Html.div({className: "ttentryArrowsBackground"}),
                              Html.div({className: "ttentryArrows"}, arrowUp, arrowDown));
+         this.DragAndDropBlockMixin();
      });
 
@@ -821 +594 @@
 
          this._getRightSideDecorators = TimetableBlockManagementMixin.prototype._getRightSideDecorators;
-
+         this._postDraw = TimetableBlockManagementMixin.prototype._postDraw;
      });
 
@@ -854 +627 @@
 
          this._getRightSideDecorators = TimetableBlockManagementMixin.prototype._getRightSideDecorators;
-
+         this._postDraw = TimetableBlockManagementMixin.prototype._postDraw;
      });
 
@@ -1586 +1359 @@
     );
 
-type("TimetableDrawer", ["IWidget"],
+type("TimetableDrawer", ["IWidget", "DroppableTimetableMixin"],
      {
 
@@ -1597 +1370 @@
 
          _drawGrid: function(scale) {
-           var scaleDiv = Html.div({style: {
-             position:'relative',
-             top: pixels(TimetableDefaults.topMargin)
-           }});
+
+           var scaleDiv = Html.div({
+               id: 'timetable_grid',
+               style: {
+                   position:'relative',
+                   top: pixels(TimetableDefaults.topMargin),
+               }});
 
              last = scale[scale.length-1][0];
@@ -1614 +1390 @@
                          top: pixels(px),
                          width: pixels(this.width),
-                         height: hour==last?'20px':scale[n+1][1]-px,
+                         height: hour==last?'0px':scale[n+1][1]-px,
                          borderTop: '1px dotted red',
                          fontSize: '11px'}}));
@@ -1620 +1396 @@
                  }
 
-               var hourLineDiv = Html.div({id: 'hourLine_'+parseInt(hour), className: 'hourLine', style:
-                                           { position: 'absolute',
-                                           top: pixels(px),
-                                           width: pixels(this.width),
-                                           height: hour==last?'20px':scale[n+1][1]-px,
-                                           borderTop: '1px solid #E8E8E8',
-                                           fontSize: '11px'}}, zeropad(hour)+':00');
-               this._makeHourLineDroppable(hourLineDiv, parseInt(hour));
-
-               this.hourLinesArray[hour] = px;
-
-               scaleDiv.append(hourLineDiv);
+                 var hourLineDiv = Html.div({id: 'hourLine_' + parseInt(hour), className: 'hourLine', style:
+                                             { top: pixels(px),
+                                               width: pixels(this.width),
+                                               height: hour == last ? '20px' : scale[n + 1][1] - px}
+                                            }, zeropad(hour) + ':00');
+
+                 this.make_droppable($(hourLineDiv.dom), parseInt(hour));
+
+                 scaleDiv.append(hourLineDiv);
              }
              return Html.div({}, this.layoutChooser.get().getHeader(this.width), scaleDiv);
          },
-
-
-       createDragToolTip: function() {
-         /*A dragging "tooltip" line that follows wherever a timeblock
-          * is being dragged and displays the current start time
-          * at that current dragging position.  */
-           $('#timetableDiv').append($('<div class="dragTip"></div>'));
-       },
-
-
-         _calculateRelativeMinuteOffset: function(position, hour) {
-             //If the current hour does not have an hourLine div
-             if(($("#hourLine_"+hour).position() == null)) {
-                 return null;
-             }
-
-             var hourTop = $("#hourLine_"+hour).position().top;
-             var hourHeight = $("#hourLine_"+hour).height();
-
-             var offsetHeight = (position - hourTop);
-
-             var minute = Math.floor((offsetHeight/hourHeight) * 59);
-             return ((minute > 60) || (minute < 0))? null : minute;
-         },
-
-       _makeHourLineDroppable: function(hourDiv, hour) {
-         var self = this;
-
-         var checkpoints = self.layoutChooser.get().checkpoints;
-
-         ///* Just a small function to pick out smallest + largest value...
-         var maxMinExtract = function(operator, list) {
-
-           var significantValue = (operator == "min") ? (Number.MAX_VALUE) : null;
-           _(keys(list)).each(function(x) {
-             //We're actually only interested in the value x for these checkpoints
-             if(operator == "max") {
-               significantValue = (x > significantValue) ? x : significantValue;
-             } else if(operator == "min") {
-               significantValue = (x < significantValue) ? x : significantValue;
-             }
-             });
-           return significantValue;
-         };
-
-         //Extract the hours from the strings of the form: HHMMSS
-         var dayStartHour = parseInt(new String(maxMinExtract("min", checkpoints)).substring(0,2));
-         var dayEndHour = parseInt(new String(maxMinExtract("max", checkpoints)).substring(0,2));
-
-         self.dayEndHour = (dayEndHour == 24) ? 00 : dayEndHour;
-         self.dayStartHour = dayStartHour;
-
-         var isDisallowedTime = function(ui, hourCompare) {
-           /* IF its outside the timetable div topside OR before day-start-hour OR
-            * past midnight, when the day ends prior to 00:00 */
-           return ($(ui.draggable).offset().top < $(hourDiv.dom).offset().top)
-             || (hourCompare < dayStartHour) || ((dayEndHour == 0) && (hourCompare > 0));
-         };
-
-         //"unique" name for each drag-handler per hourLine
-         var thisDragSpaceName = ("drag."+hour);
-
-         //These variables are used below
-         var startHour = null;
-         var startMinute = null;
-
-         $(hourDiv.dom).droppable({
-           drop: function(event, ui) {
-             if(isDisallowedTime(ui, startHour)) {
-               self.revertBlockPos(ui.draggable);
-               return;
-             }
-
-             self.releaseDragOnHour(ui, startHour, startMinute);
-           },
-           tolerance: 'touch',
-           over: function(event, ui) {
-             $(ui.draggable).bind(thisDragSpaceName, function(newEvent, newUi) {
-               if(isDisallowedTime(ui, hour)) {
-                 return;
-               }
-
-               var gridTime = self.fetchTimeDragOnHour(ui.draggable, hourDiv.dom, hour, "start");
-
-               //null means that the drag is not allowed
-               if((gridTime == null)) {
-                 return;
-               }
-               startHour = gridTime[0];
-               startMinute = gridTime[1];
-               self.curStartHour = startHour;
-               self.curStartMinute = startMinute;
-
-               });
-           },
-           out: function(event, ui) {
-             if(thisDragSpaceName != null) {
-               $(ui.draggable).unbind(thisDragSpaceName);
-             }
-             $('.dragTip').hide();
-           }
-           });
-       },
-
-       /* This function determines what hour + minute the time block
-        * should start at for the current dragging pixel position in the timetable.
-        * This function is used by over:, in _makeHourLineDroppable
-        * Args:
-        * ui is the same one that drop(ui,events) is using.
-        * hour = the current "hourLineDiv" being dragged upon
-        *
-        * significantEdge = start or end, whichever is being used to measure with
-        * (start = dragging, end = resizing..)
-        *
-        * Returns an array, where array[0] = startHour, array[1] = startMinute
-        * */
-       fetchTimeDragOnHour: function(draggingBlock, hourDiv, hour, significantEdge) {
-         var self = this;
-
-         var setToolTipPos = function(newTop) {
-           //Sets the drag-tooltip at the current dragging/resizing position
-           $('.dragTip').offset({
-             left: $('.dragTip').offset().left,
-             top: newTop
-           });
-         };
-
-         var dragTipTop = null;
-         try {
-           //If we're DRAGGING, and the dragTip is already created...
-           dragTipTop = $(draggingBlock).offset().top;
-         } catch (Exception) {
-           dragTipTop = 0;
-           dragTipTop = $(draggingBlock).offset().top;
-           setToolTipPos(dragTipTop);
-         }
-
-         //Top left Position of the current hourLine div
-         var hourPos = $(hourDiv).position();
-
-         var blockPosTop = $(draggingBlock).position().top;
-         var blockHeight = $(draggingBlock).height();
-         var hourLowerLeftCorner = (hourPos.top+$(hourDiv).height());
-         var hourTopLeftCorner = (hourPos.top);
-
-         //Difference of time block and hour block in height
-         var diffBlockTopLine = blockPosTop - hourTopLeftCorner;
-
-         var startHour = hour;
-         var startMinute = self._calculateRelativeMinuteOffset(blockPosTop, startHour);
-
-         var endHour = hour;
-
-         var blockEnd = (blockPosTop+blockHeight);
-         endMinute = self._calculateRelativeMinuteOffset(blockEnd, endHour);
-
-         if(!($('.dragTip').length > 0)) {
-           self.timetable.getTimetableDrawer().createDragToolTip();
-         }
-
-         var gridTime = null;
-         //significantEdge is set by the caller of this whole function
-         // It represents the significant edge to measure with of a time block
-         //That is, if youre resizing, then it will be "end"
-         //Dragging --> "start"
-         if(significantEdge == "start") {
-           setToolTipPos($(draggingBlock).offset().top);
-           //Returns closest 5-minute-divisible, hour and minute in an array
-           gridTime = self.round5(startHour, startMinute);
-         } else if(significantEdge == "end") {
-           setToolTipPos($(draggingBlock).offset().top+blockHeight);
-           gridTime = self.round5(startHour, endMinute);
-         }
-
-         if(gridTime == null) {
-           return null;
-         }
-
-         if($('.dragTip').length > 0) {
-           $('.dragTip').show();
-           $('.dragTip').html(gridTime[0]+":"+gridTime[1]);
-         }
-
-         return gridTime;
-       },
-
-       enableUndo: function(undoLabel, currentEventData, shifted) {
-         var undoArrayInfo = new Array();
-         undoArrayInfo[0] = undoLabel;
-
-         //Copying original values before they get modified
-         undoArrayInfo[1] = currentEventData.startDate.date;
-         undoArrayInfo[2] = currentEventData.startDate.time;
-         undoArrayInfo[3] = currentEventData.endDate.date;
-         undoArrayInfo[4] = currentEventData.endDate.time;
-         undoArrayInfo[5] = currentEventData.duration;
-         undoArrayInfo[6] = currentEventData.entryType;
-         undoArrayInfo[7] = currentEventData.conferenceId;
-
-         //If shifting entries was enabled
-         undoArrayInfo[8] = shifted;
-         //Also keep a reference to the soon-to-be modified eventData
-         undoArrayInfo[9] = currentEventData;
-         $(window).data('undo', undoArrayInfo);
-         this.drawUndoDiv();
-       },
-
-       undoLastAction: function() {
-         var self = this;
-         var undoArrayInfo = $(window).data('undo');
-         var undoLabel = undoArrayInfo[0];
-
-         //[**] Fetch stored values for undo
-
-         //String of the form "HH:MM:SS"
-         var startDate = new Object();
-         startDate.date = undoArrayInfo[1];
-         startDate.time = undoArrayInfo[2];
-
-         var endDate = new Object();
-         endDate.date = undoArrayInfo[3];
-         endDate.time = undoArrayInfo[4];
-
-         var duration = undoArrayInfo[5];
-         var entryType = undoArrayInfo[6];
-         var conferenceId = undoArrayInfo[7];
-
-         var shifted = undoArrayInfo[8];
-
-         var currentEventData = undoArrayInfo[9];
-
-         //[**] end
-
-         /* conferenceId and entryType is cleared it seems at some point when
-          * running editEntryStartEndDate on the original... hmm...
-          *  - so here the values are just re-assigned from the original (stored PRIOR to calling editEntrySt...) */
-         currentEventData.entryType = entryType;
-         currentEventData.conferenceId = conferenceId;
-
-         var startDT = new Date((Util.dateTimeIndicoToJS(startDate)).getTime());
-         var endDT = new Date((Util.dateTimeIndicoToJS(endDate)).getTime());
-
-         if((undoLabel == "placementChange") || (undoLabel == "resize")) {
-           self.managementActions.editEntryStartEndDate(Util.formatDateTime(startDT, IndicoDateTimeFormats.Server),
-             Util.formatDateTime(endDT, IndicoDateTimeFormats.Server), currentEventData, $(window).data('shiftIsPressed'));
-         } else if(undoLabel == "drop") {
-           // Here goes code to handle drop undo
-           // However I didnt have time to find a reasonable way
-
-             // Something in the right direction below (debug/test)
-           /*
-           var moveEntryDiag = new MoveEntryDialog(
-             self.managementActions,
-             self.timetable,
-             currentEventData.entryType,
-             currentEventData.sessionId,
-             currentEventData.sessionSlotId,
-             self.timetable.currentDay,
-             currentEventData.scheduleEntryId,
-             currentEventData.conferenceId,
-             currentEventData.startDate.date);
-
-           var chosenValue = currentEventData.sessionId;
-           moveEntryDiag.handleBlockMove(currentEventData, chosenValue+":0", self.managementActions);
-            */
-         }
-
-         $(window).data('undo', undefined);
-         $('#undoDiv').remove();
-         return;
-       },
-
-       /* A "button" that appears after an action is performed */
-       drawUndoDiv: function() {
-         //If it isnt drawn already
-         if(!($('#undoDiv').length > 0)) {
-           var self = this;
-           var undoLink = Html.a({}, "Undo last action");
-           undoLink.observeClick(
-             function(e) {
-               self.undoLastAction();
-             });
-
-           var undoDiv =
-             Html.div({
-             id: 'undoDiv',
-             className: 'undoDiv',
-               style: {
-                 padding: '5px',
-                 background: '#FFF',
-                 border: '3px solid black',
-                 position: 'fixed',
-                 bottom: '0px',
-                 left: '50%'
-               }}, undoLink);
-           $('#timetableDiv').append(undoDiv.dom);
-         }
-       },
-
-       /* The function to execute when a drop occurs ON an hour.
-        * The argument ui is the same one that drop(ui,events) is using.
-        *
-        * startHour is the hour where it is being dropped (0 to 23)
-        * startMinute is the minute where it is being dropped, a 5-divisible in the range 0-55
-        * startHour and startMinute is determined by fetchTimeDragOnHour(..)
-        *
-        * This function is used by drop:, in _makeHourLineDroppable
-        */
-       releaseDragOnHour: function(ui, startHour, startMinute) {
-         var self = this;
-         $('.dragTip').remove();
-
-         if((startMinute == null) || (startHour == 00)) {
-           self.revertBlockPos(ui.draggable);
-           return false;
-         }
-
-           //originalEventData is used for the undo functionality
-           var eventData = $(ui.draggable).data('eventData');
-
-           //Store Undo data
-           self.enableUndo("placementChange", eventData, $(window).data('shiftIsPressed'));
-
-           eventData.startDate.time = startHour+":"+startMinute+":00";
-
-           var startDT = Util.dateTimeIndicoToJS(eventData.startDate);
-           var endDT = new Date(startDT.getTime() + eventData.duration*60000);
-
-           //If it doesnt end on the same day, revert drag
-           if(endDT.getDay() > startDT.getDay()) {
-             self.revertBlockPos(ui.draggable);
-             return false;
-           }
-
-         self.managementActions.editEntryStartEndDate(Util.formatDateTime(eventData.startDate, IndicoDateTimeFormats.Server),
-                                                      Util.formatDateTime(endDT, IndicoDateTimeFormats.Server), eventData, $(window).data('shiftIsPressed'));
-
-         return true;
-       },
-
-       releaseResizeOnHour: function(endHour, endMinute, eventData, block) {
-         var self = this;
-         self.enableUndo("resize", eventData);
-
-         eventData.endDate.time = endHour+":"+endMinute+":00";
-         var endDT = Util.dateTimeIndicoToJS(eventData.endDate);
-         var startDT = Util.dateTimeIndicoToJS(eventData.startDate);
-
-         // HERE GOES CODE TO LIMIT RESIZE FOR THE CURRENT DAY ONLY
-         //If it doesnt end on the same day, revert drag
-         /*
-         if((self.dayEndHour == 0) && (false))  {
-           self.revertBlockHeight(block);
-           return false;
-         }
-          */
-
-         self.managementActions.editEntryStartEndDate(Util.formatDateTime(eventData.startDate, IndicoDateTimeFormats.Server),
-           Util.formatDateTime(endDT, IndicoDateTimeFormats.Server),
-           eventData, false);
-
-         //Store Undo-data
-         return true;
-       },
-
-       revertBlockHeight: function(block) {
-         $(block.dom).animate({
-         height: $(block.dom).data('originalheight')
-           });
-       },
-
-       /* Returns a draggable to its initial position */
-       revertBlockPos: function(draggable) {
-         var initPos = $(draggable).data('initialPosition');
-
-         $(draggable).animate({
-           left: initPos.left,
-           top: initPos.top
-         });
-         $('.dragTip').remove();
-       },
-
-       round5: function (hour, minute) {
-
-         //Rounds the number to the closest 5-divisible,..
-         //Also appends padding to the number, such that 0 = 00, 1 = 01...
-         closestFive = (minute % 5) >= 2.5 ? parseInt(minute / 5) * 5 + 5 : parseInt(minute / 5) * 5;
-         var newHour = ((minute > 55) && (closestFive == 60)) ? (hour+1) : hour;
-         var timeArray = new Array();
-         if(newHour > 23) {
-           return null;
-         }
-         timeArray[0] = zeropad(newHour);
-         timeArray[1] = zeropad((closestFive == 60) ? 00 : closestFive);
-         return timeArray;
-       },
-
-       /* Since javascripts mod (%) function/operator can't
-        * properly handle negative numbers here's a real one */
-       properModulus: function(num, modn) {
-         return ((num%modn)+modn)%modn;
-       },
 
          _drawWholeDayBlocks: function(data, blocks) {
@@ -2081 +1452 @@
                                       }
                                      });
-
-             self.blocks = []
+             this.blocks = []
+             this._blockMap = {}
 
              each(blocks, function(blockData) {
@@ -2119 +1490 @@
 
                  if (self.managementMode) {
-
                      block = new TimetableBlockNormalManagement(self.timetable, eventData, blockData, compactMode, self.printableVersion, self.detail.get(), self.managementActions);
+
                  } else {
                      block = new TimetableBlockNormalDisplay(self.timetable, eventData, blockData, compactMode, self.printableVersion, self.detail.get());
                  }
                  blockDiv.append(block.draw(leftPos, width));
+                 self._blockMap[blockData.id] = block.block.dom;
                  self.blocks.push(block);
              });
@@ -2132 +1504 @@
 
          setLayout: function(layout) {
+             this.layout.set(layout);
              this.layoutChooser.set(layout);
          },
 
          redraw: function(day) {
+
              if (this.preventRedraw) {
                  return;
@@ -2158 +1532 @@
              this.wrappingElement.setStyle('height', pixels(height + (this.printableVersion ? 0 : 100))); // +100 to have margin for the tabs
 
-             var grid = this._drawGrid(dayData[1]);
+             this.grid.length = 0;
+             $.merge(this.grid, dayData[1])
+
+             var gridElems = this._drawGrid(this.grid);
              var blocks = this._drawBlocks(dayFiltered, dayData[2], dayData[3]);
              var wholeDayBlocks = this._drawWholeDayBlocks(dayFiltered, dayData[4]);
 
              // Only do if not all days are drawn
-             this.canvas.set([wholeDayBlocks, Html.div({style: {position: 'relative'}}, grid, blocks)]);
+             this.canvas.set([wholeDayBlocks, Html.div({style: {position: 'relative'}}, gridElems, blocks)]);
              var totalHeight = height + wholeDayBlocks.dom.offsetHeight;
 
@@ -2169 +1546 @@
 
              this.postDraw();
+
+             $('body').trigger('timetable_redraw', this);
 
              return totalHeight;
@@ -2349 +1728 @@
                  this.loadingIndicator.dom.style.visibility = 'visible';
                  setTimeout(function() {
+                     // call redraw function
                      funcToCall.call(self, arg);
+                     $('body').trigger('timetable_ready', self.timetable);
                      self.setLoading(false);
                  }, 100);
@@ -2362 +1743 @@
              this.data = data;
              this.redraw();
+         },
+         toggleEvents: function(value) {
+             if (value === undefined) {
+                 this.eventsDisabled = !this.eventsDisabled;
+             } else {
+                 this.eventsDisabled = !value;
+             }
          }
+
      },
      function(timetable, width, wrappingElement, detailLevel, extraButtons, loadingIndicator, managementMode, managementActions, defaultLayout) {
 
-
          var self = this;
 
-         this.hourLinesArray = new Array();
-
+         this.grid = [];
          this.wrappingElement = wrappingElement;
-         this.canvas = Html.div({});
+         this.canvas = Html.div({'id': 'timetable_canvas'});
          this.filterList = new WatchList();
          this.data = timetable.data;
@@ -2404 +1791 @@
          // default detail level is 'session'
          this.detail.set(any(detailLevel, 'session'));
-
+         this.eventsDisabled = false;
 
          var filterState = map(TimetableDefaults.filters,
@@ -2428 +1815 @@
              }
          });
+
+         this.DroppableTimetableMixin();
      });
 
@@ -2497 +1886 @@
         },
 
-        postDraw: function() {
-
-        },
-
         setData: function(data, day, isPoster) {
             this.isPoster = isPoster;
@@ -2507 +1892 @@
                 this.setLayout('poster');
             } else {
-                this.setLayout('compact');
+                this.setLayout(this.layout.get());
             }
             this.TimetableDrawer.prototype.setData.call(this, data);
         }
     },
-    function(data, canvas, width, wrappingElement, extraButtons, loadingIndicator, managementMode, managementActions) {
-        this.TimetableDrawer(data, canvas, width, wrappingElement, 'session', extraButtons, loadingIndicator, managementMode, managementActions, data.isPoster?'poster':null);
+     function(data, width, wrappingElement, extraButtons, loadingIndicator, managementMode, managementActions, layout) {
+         this.TimetableDrawer(data, width, wrappingElement, 'session', extraButtons, loadingIndicator, managementMode, managementActions, data.isPoster?'poster':'proportional');
         this.wrappingElement = data.parentTimetable.timetableDrawer.wrappingElement;
 

indico/htdocs/js/indico/Timetable/Layout.js

@@ -216 +216 @@
 type("IncrementalLayoutManager", ["TimetableLayoutManager"],
      {
+         name: 'incremental',
          drawDay: function(data, detailLevel, startTime, endTime) {
              var self = this;
@@ -265 +266 @@
              var hEnd;
 
+             // add hour before start
+             if (startingHour > 0) {
+                 for (var min = 0; min < 60 ; min += TimetableDefaults.resolution) {
+                     self.processTimeBlock(startingHour - 1, startingHour, (startingHour - 1) * 60, min, algData);
+                 }
+             }
+
              for (var minutes = 0; minutes < ((endingHour + 1 - startingHour) * 60); minutes += TimetableDefaults.resolution) {
-
                  // current block is [minutes, minutes + 5]
                  var startMin = (startingHour * 60 + minutes);
@@ -274 +281 @@
 
                  self.processTimeBlock(hStart, hEnd, startMin, minutes, algData);
-
              }
 
              if ($L(ks).indexOf('nextday') !== null) {
                  self.processTimeBlock('nextday', 'nextday', (startingHour * 60 + minutes), minutes, algData);
-             } else {
+             } else if (endMin/60 < 25){
                  // add last hour + 1 to the grid
+                 // (only if the next hour is not after midnight)
                  algData.grid.push([(endMin/60) % 24, algData.topPx]);
              }
@@ -292 +299 @@
                  counter++;
              });
-
              return [algData.topPx, algData.grid, algData.blocks, algData.groups, algData.wholeDayBlocks];
 
@@ -302 +308 @@
      {
 
+         name: 'compact',
          processTimeBlock: function(hStart, hEnd, startMin, minutes, algData) {
              var self = this;
@@ -411 +418 @@
 type("ProportionalLayoutManager", ["IncrementalLayoutManager"],
      {
-
+         name: 'proportional',
          processTimeBlock: function(hStart, hEnd, startMin, minutes, algData) {
              var self = this;
@@ -458 +465 @@
              });
 
-             if (minutes % 60 === 0) {
-                 algData.grid.push([startMin/60%24, algData.topPx]);
+             var hour = startMin / 60;
+             if (minutes % 60 === 0 && hour <= 24) {
+                 algData.grid.push([hour % 24, algData.topPx]);
              }
 
@@ -581 +589 @@
         }
     });
-

indico/htdocs/js/indico/Timetable/Loader.js

@@ -1 +1 @@
 include(ScriptRoot + "indico/Timetable/Layout.js");
+include(ScriptRoot + "indico/Timetable/DragAndDrop.js");
+include(ScriptRoot + "indico/Timetable/Undo.js");
 include(ScriptRoot + "indico/Timetable/Draw.js");
 include(ScriptRoot + "indico/Timetable/Management.js");

indico/htdocs/js/indico/Timetable/Management.js

@@ -1 @@
-type("TimetableManagementActions", [], {
+type("TimetableManagementActions", ["UndoMixin"], {
     methods: {
         'SessionSlot': {
@@ -144 +144 @@
      * Edit start and end date. date format has to be dd/mm/yy mm:hh
      */
-    editEntryStartEndDate: function(startDate, endDate, eventData, reschedule) {
+    editEntryStartEndDate: function(startDate, endDate, eventData, reschedule, undo) {
         var self = this;
         var info = new WatchObject();
@@ -171 +171 @@
         }
 
-      //Displays a "loading ..." div at the righthand bottom side
-      var killProgress = IndicoUI.Dialogs.Util.blockMoveProgress();
+        var dfr = $.Deferred();
+
+        //Displays a "loading ..." div at the righthand bottom side
+        var killProgress = IndicoUI.Dialogs.Util.ttStatusInfo($T('saving...'));
 
         indicoRequest(this.methods[type].modifyStartEndDate, info, function(result, error){
-            killProgress();
+            if (!undo) {
+                killProgress();
+            }
+
             if (error) {
                 IndicoUtil.errorReport(error);
-            }
-            else {
+                dfr.reject(error);
+                if (undo) {
+                    killProgress();
+                }
+            } else {
                 // Depending on whether 'reschedule' was selected or not,
                 // update the whole day or just one entry
 
+                if(undo) {
+                    self.enableUndo(undo, {eventData: eventData,
+                                           shifted: reschedule});
+                }
+
                 if (reschedule) {
-                    self.timetable._updateDay(result);
+                    self.timetable._updateDay(result).done(function() {
+                        dfr.resolve();
+                    });
                 } else {
-                    self.timetable._updateEntry(result, result.id);
+                    self.timetable._updateEntry(result, result.id).done(function() {
+                        dfr.resolve();
+                    });
                 }
             }
         });
+
+        return dfr.promise();
+    },
+
+    /* Takes care of moving a contribution/timeblock to another session/timetable.
+     * This goes for both "drag and drop" as well as the regular "MoveEntry Dialog clicking"*/
+    moveToSession: function(eventData, value, undo, keep_time) {
+        var self = this;
+
+        // if nothing has been selected yet
+        if (value === null || value === undefined) {
+            return false;
+        }
+
+        // Displays a "loading ..." div at the righthand bottom side
+        var killProgress = IndicoUI.Dialogs.Util.ttStatusInfo($T("saving..."));
+        var dfr = $.Deferred();
+
+        indicoRequest(this.methods[this.isSessionTimetable ? 'SessionEntry' : 'Event'].moveEntry, {
+            value : value,
+            conference : eventData.conferenceId,
+            scheduleEntryId : eventData.scheduleEntryId,
+            sessionId : eventData.sessionId,
+            sessionSlotId : eventData.sessionSlotId,
+            keepTime: keep_time || false
+        }, function(result, error) {
+
+            if (!undo) {
+                killProgress();
+            }
+
+            if (error) {
+                IndicoUtil.errorReport(error);
+                dfr.reject(error);
+            } else {
+                if (undo) {
+                    self.enableUndo(undo, {'eventData': eventData,
+                                           'entry': result.entry}, null);
+                    self.drawUndoDiv();
+                }
+                // change json and repaint timetable
+                self.timetable._updateMovedEntry(result, result.old.id).done(function() {
+                    dfr.resolve()
+                });
+            }});
+        return dfr.promise();
     },
 
@@ -587 +650 @@
             this,
             this.timetable,
-            eventData.entryType,
-            eventData.sessionId,
-            eventData.sessionSlotId,
-            timetable.currentDay,
-            eventData.scheduleEntryId,
-            eventData.conferenceId,
-            eventData.startDate.date );
+            eventData,
+            timetable.currentDay);
         moveEntryDiag.open();
     },