Show draggers only for editable events.

diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js
index d213da1..83d9c18 100644 (file)
--- a/kronolith/js/src/kronolith.js
+++ b/kronolith/js/src/kronolith.js
@@ -698,7 +698,9 @@ KronolithCore = {
             var midnight = Date.parseExact(date, 'yyyyMMdd'),
                 start = Date.parse(event.value.s),
                 end = Date.parse(event.value.e),
-                innerDiv = new Element('DIV', { 'class': 'kronolithEventInfo' });
+                innerDiv = new Element('DIV', { 'class': 'kronolithEventInfo' }),
+                draggerTop = new Element('DIV', { 'id': event.value.nodeId + 'top', 'class': 'kronolithDragger kronolithDraggerTop' }).setStyle(style),
+                draggerBottom = new Element('DIV', { 'id': event.value.nodeId + 'bottom', 'class': 'kronolithDragger kronolithDraggerBottom' }).setStyle(style);
 
             div.setStyle({
                 'top': ((midnight.getElapsed(start) / 60000 | 0) * this.daySizes.height / 60 + this.daySizes.offset | 0) + 'px',
@@ -706,10 +708,15 @@ KronolithCore = {
                 'width': '100%'
             })
                 .insert(innerDiv.setStyle(style))
-                .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerTop' }).setStyle(style))
-                .insert(new Element('DIV', { 'class': 'kronolithDragger kronolithDraggerBottom' }).setStyle(style));
+                .insert(draggerTop)
+                .insert(draggerBottom);
             $(view == 'day' ? 'kronolithEventsDay' : 'kronolithEventsWeek' + date).insert(div);
 
+            if (event.value.pe) {
+                div.addClassName('kronolithEditable');
+                new Drag(event.value.nodeId + 'bottom', { 'threshold': 5, 'constraint': 'vertical', 'scroll': 'kronolithBody', 'parentElement': function() { return $('kronolithBody'); }, 'snapToParent': true });
+            }
+
             var column = 1, columns, width, left, conflict = false,
                 pos = this.dayGroups.length, placeFound = false;
 
@@ -770,7 +777,7 @@ KronolithCore = {
             $('kronolithMonthDay' + date).insert(div);
             if (event.value.pe) {
                 div.setStyle({ 'cursor': 'move' });
-                new Drag('kronolithEventmonth' +  event.value.calendar + date + event.key, { threshold: 5, parentElement: function() { return $('kronolithViewMonthBody'); }, snapToParent: true });
+                new Drag('kronolithEventmonth' + event.value.calendar + date + event.key, { threshold: 5, parentElement: function() { return $('kronolithViewMonthBody'); }, snapToParent: true });
             }
             break;
         }

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 4b3e661..f396643 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -1194,23 +1194,34 @@ div.kronolithViewWeek .kronolithEvents .kronolithEvent {
     left: 0;
     right: 3px;
     height: 12px;
+}
+.kronolithEvent.kronolithEditable .kronolithDragger {
     background: transparent url("graphics/drag-handle.png") center center no-repeat;
 }
-.kronolithEvent:hover .kronolithDragger, .kronolithEvent.kronolithSelected .kronolithDragger {
+.kronolithDragger.drag {
+    background: transparent url("graphics/drag-handle.png") center center no-repeat;
+    opacity: .8;
+    filter: alpha(opacity=80);
+ }
+.kronolithEvent.kronolithEditable:hover .kronolithDragger, .kronolithEvent.kronolithEditable.kronolithSelected .kronolithDragger, .kronolithDragger.drag {
     background-color: #202020 !important;
 }
-.kronolithEvent .kronolithDragger.kronolithDraggerTop {
+.kronolithEvent .kronolithDragger.kronolithDraggerTop, .kronolithDraggerTop.drag {
     top: 0;
     -moz-border-radius: 5px 5px 0 0;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-top-right-radius: 5px;
-    cursor: n-resize;
 }
-.kronolithEvent .kronolithDragger.kronolithDraggerBottom {
+.kronolithEvent .kronolithDragger.kronolithDraggerBottom, .kronolithDraggerBottom.drag {
     bottom: 0;
     -moz-border-radius: 0 0 5px 5px;
     -webkit-border-bottom-left-radius: 5px;
     -webkit-border-bottom-right-radius: 5px;
+}
+.kronolithEvent.kronolithEditable .kronolithDragger.kronolithDraggerTop {
+    cursor: n-resize;
+}
+.kronolithEvent.kronolithEditable .kronolithDragger.kronolithDraggerBottom {
     cursor: s-resize;
 }
 .kronolithEvent .kronolithEventInfo {