SONAR-5052 Rework widgets drag'n'drop

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb
index 40e31dbd718a2aa6cf2f28d52d33b1a01ba4b3ea..c90aeae3a097f923fea8dd46d990029c33444ea6 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb
@@ -45,20 +45,16 @@
 <script type="text/javascript">
   <!--
   var options = {
-    editorEnabled:true,
-    portal:'dashboard',
-    column:'dashboard-column',
-    columnhandle:'column-handle',
-    block:'block',
-    hoverclass:'block-hover',
-    handleClass:'widget-handle',
-    dashboardstate:'dashboardstate',
-    toggle:'block-toggle',
-    blocklist:'widget_defs',
-    highlight_duration:2,
-    highlight_startcolor:'#cae3f2',
-    highlight_endcolor:'#ffffff',
-    saveurl:'<%= url_for dashboard_action(:set_dashboard) -%>'
+    editorEnabled: true,
+    column: 'dashboard-column',
+    columnHandle: 'column-handle',
+    block: 'block',
+    hoverClass: 'block-hover',
+    dashboardState: 'dashboardstate',
+    highlightDuration: 2000,
+    highlightStartColor: '#cae3f2',
+    highlightEndColor: '#ffffff',
+    saveUrl: '<%= url_for dashboard_action(:set_dashboard) -%>'
   };
   var portal;
   function init_dashboard() {

diff --git a/sonar-server/src/main/webapp/javascripts/dashboard.js b/sonar-server/src/main/webapp/javascripts/dashboard.js
index 9aa52e28cd02c008047ca74841d07970eced4be0..626e6398fd35f46fdd910cba32a3abb183a13ecb 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/dashboard.js
+++ b/sonar-server/src/main/webapp/javascripts/dashboard.js
@@ -1,132 +1,112 @@
-var Portal = Class.create();
-Portal.prototype = {
-    initialize: function (options) {
-      this.setOptions(options);
+(function($) {
+
+  window.Portal = function(options) {
+    this.initialize(options);
+  };
+
+  window.Portal.prototype = {
+
+    initialize: function(options) {
+      this.options = options;
       if (!this.options.editorEnabled) {
         return;
       }
+      this.createAllSortables();
+      this.lastSaveString = '';
+      this.saveDashboardsState();
+    },
 
-      Droppables.add(this.options.blocklist, {
-        containment: $A($$("." + this.options.column)),
-        hoverclass: this.options.hoverclass,
-        overlap: 'horizontal',
-        onDrop: function (dragged, dropped) {
-          $(dragged).remove();
-        }
-      });
 
-      this.createAllSortables();
+    createAllSortables: function() {
+      var that = this,
+          blocks = $('.' + this.options.block),
+          columnHandle = $('.' + this.options.columnHandle),
+          draggable,
 
-      this.lastSaveString = "";
+          onDragLeave = function(e) {
+            $(e.currentTarget).removeClass(that.options.hoverClass);
+          },
 
-      this.saveDashboardsState();
-    },
-    /****************************************************/
-
-    createAllSortables: function () {
-        var sortables = $$("."+this.options.column);
-        $A(sortables).each(function (sortable) {
-            Sortable.create(sortable, {
-                containment: $A(sortables),
-                constraint: false,
-                tag: 'div',
-                handle: this.options.handleClass,
-                only: this.options.block,
-                dropOnEmpty: true,
-                hoverclass: this.options.hoverclass,
-                starteffect: function(widget) {
-                    $(widget).addClassName("shadow-block");
-                }.bind(this),
-                endeffect: function(widget) {
-                    $(widget).removeClassName("shadow-block");
-                }.bind(this),
-                onUpdate: function () {
-                    this.saveDashboardsState();
-                }.bind(this)
-            });
-        }.bind(this));
+          onDrop = function(e) {
+            e.preventDefault();
+            draggable.detach().insertBefore($(e.currentTarget));
+            onDragLeave(e);
+            that.saveDashboardsState();
+          };
+
+      blocks
+          .prop('draggable', true)
+          .on('dragstart', function() {
+            draggable = $(this);
+          })
+          .on('dragover', function(e) {
+            if (draggable.prop('id') !== $(this).prop('id')) {
+              e.preventDefault();
+              $(e.currentTarget).addClass(that.options.hoverClass);
+            }
+          })
+          .on('drop', onDrop)
+          .on('dragleave', onDragLeave);
+
+      columnHandle
+          .on('dragover', function(e) {
+            e.preventDefault();
+            $(e.currentTarget).addClass(that.options.hoverClass);
+          })
+          .on('drop', onDrop)
+          .on('dragleave', onDragLeave);
     },
 
+
     highlightWidget: function(widgetId) {
-      new Effect.Highlight($('block_' + widgetId), {duration: this.options.highlight_duration,
-                                          startcolor: this.options.highlight_startcolor,
-                                          endcolor: this.options.highlight_endcolor});
+      var block = $('#block_' + widgetId),
+          options = this.options;
+      block.css('background-color', options.highlightStartColor);
+      setTimeout(function() {
+        block.css('background-color', options.highlightEndColor);
+      }, this.options.highlightDuration);
     },
 
-    /****************************************************/
-    saveDashboardsState: function () {
-        var result = "";
-        var index = 1;
-        $$("."+this.options.column).each(function (sortable) {
-            if ($(sortable).select("."+this.options.block).length === 0) {
-                $(sortable).select("."+this.options.columnhandle)[0].show();
-            } else {
-                $(sortable).select("."+this.options.columnhandle)[0].hide();
-            }
-            if (index > 1) {
-              result += ";";
-            }
-            result += Sortable.sequence($(sortable).identify());
-            index++;
-        });
-        if (result==this.lastSaveString) {
-            return;
-        }
-        var firstTime=this.lastSaveString=="";
-        this.lastSaveString=result;
-
-        if (firstTime) {
-          return;
-        }
-
-        try {
-            if ($(this.options.dashboardstate)) {
-                $(this.options.dashboardstate).value = result;
-            }
-            if (this.options.saveurl) {
-                var url = this.options.saveurl;
-                var postBody = this.options.dashboardstate + '=' +escape(result);
-
-                new Ajax.Request(url,
-                {
-                    evalscripts:false,
-                    method: 'post',
-                    postBody: postBody
-                });
-            }
-        } catch(e) {
-        }
-    },
 
-    setOptions: function (options) {
-        this.options = {};
-        Object.extend(this.options, options || {});
-    },
+    saveDashboardsState: function() {
+      var options = this.options,
+          result = $('.' + this.options.column).map(function () {
+            var blocks = $(this).find('.' + options.block);
+            $(this).find('.' + options.columnHandle).toggle(blocks.length === 0);
 
-    editWidget: function(id) {
-      $('widget_title_' + id) && $('widget_title_' + id).hide();
-      $('widget_' + id).hide();
-      $('widget_props_' + id).show();
-    },
-    cancelEditWidget: function(id) {
-      $('widget_title_' + id) && $('widget_title_' + id).show();
-      $('widget_' + id).show();
-      $('widget_props_' + id).hide();
-    },
-    deleteWidget: function(elt) {
-      $(elt).up('.' + this.options.block).remove();
-      this.saveDashboardsState();
-    }
-};
-
-autoResize = function(everyMs, callback) {
-  var resizeTimer = null;
-  Event.observe(window, 'resize', function() {
-    if (resizeTimer == null) {
-      resizeTimer = window.setTimeout(function() {
-        resizeTimer = null;
-        callback();
-      }, everyMs);
+            return blocks.map(function () {
+              return $(this).prop('id').substring(options.block.length + 1);
+            }).get().join(',');
+          }).get().join(';');
+
+      if (result === this.lastSaveString) {
+        return;
+      }
+
+      var firstTime = this.lastSaveString === '';
+      this.lastSaveString = result;
+
+      if (firstTime) {
+        return;
+      }
+
+      if (this.options.saveUrl) {
+        var postBody = this.options.dashboardState + '=' + escape(result);
+
+        $.ajax({
+          url: this.options.saveUrl,
+          type: 'POST',
+          data: postBody
+        });
+      }
     }
-  });
-};
+  };
+
+
+
+  window.autoResize = function(everyMs, callback) {
+    var debounce = _.debounce(callback, everyMs);
+    $(window).on('resize', debounce);
+  };
+
+})(jQuery);

diff --git a/sonar-server/src/main/webapp/stylesheets/dashboard.css b/sonar-server/src/main/webapp/stylesheets/dashboard.css
index 544784961a781aaad02cd780efc59af5fc6f4967..2b996e164e7aef579f47cbbc84246205ac010bdf 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/dashboard.css
+++ b/sonar-server/src/main/webapp/stylesheets/dashboard.css
@@ -211,7 +211,7 @@
 #dashboard .column-handle {
   height: 100px;
   width: 100%;
-  margin: 10px 0 10px 0;
+  margin: 0;
   padding: 0;
   display: inline-block;
   line-height: 100px;
@@ -254,7 +254,7 @@
 }
 
 #dashboard .block-hover {
-  border: 2px dashed #ddd;
+  outline: 2px dashed #ddd;
 }
 
 #dashboard .shadow-block {