Update Sorter cursor for all

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/block_manager/view/BlocksView.js

@@ -52,10 +52,6 @@ function(Backbone, BlockView) {
      */
     onDrag: function(){
       this.em.stopDefault();
-      //this.em.get('Canvas').getBody().style.cursor = 'grabbing';
-      //document.body.style.cursor = 'grabbing';
-      this.em.get('Canvas').getBody().className += ' ' + this.grabbingCls;
-      document.body.className += ' ' + this.grabbingCls;
     },
 
     /**
@@ -64,10 +60,6 @@ function(Backbone, BlockView) {
      */
     onDrop: function(model){
       this.em.runDefault();
-      var bodyCanvas = this.em.get('Canvas').getBody();
-      var body = document.body;
-      bodyCanvas.className = bodyCanvas.className.replace(this.grabbingCls, '');
-      body.className = body.className.replace(this.grabbingCls, '');
 
       if (model && model.get && model.get('activeOnRender')) {
         model.trigger('active');

src/commands/view/OpenLayers.js

@@ -14,6 +14,7 @@ define(['Navigator'], function(Layers) {
 						lyStylePfx = config.layers.stylePrefix || 'nv-';
 
 					config.layers.stylePrefix = config.stylePrefix + lyStylePfx;
+					config.layers.pStylePrefix = config.stylePrefix;
 					config.layers.em 	= em.editor;
 					config.layers.opened = em.editor.get('opened');
 					var layers = new Layers(collection, config.layers);

src/navigator/view/ItemsView.js

@@ -9,7 +9,8 @@ define(['backbone','./ItemView'],
 			this.opt = o;
 			this.config = o.config;
 			this.preview = o.preview;
-			this.pfx = o.config.stylePrefix;
+			this.ppfx = o.config.pStylePrefix || '';
+			this.pfx = o.config.stylePrefix || '';
 			this.parent = o.parent;
 			this.listenTo(this.collection, 'add', this.addTo);
 			this.listenTo(this.collection, 'reset resetNavigator', this.render);
@@ -22,6 +23,7 @@ define(['backbone','./ItemView'],
 					container: this.el,
 					containerSel: '.' + pfx + 'items',
 					itemSel: '.' + pfx + 'item',
+					ppfx: this.ppfx,
 					pfx: pfx,
 					nested: 1
 				});

src/utils/Sorter.js

@@ -21,6 +21,7 @@ define(function(require) {
         this.draggable = o.draggable || true;
         this.nested = o.nested || 0;
         this.pfx = o.pfx || '';
+        this.ppfx = o.ppfx || '';
         this.freezeClass = o.freezeClass || this.pfx + 'freezed';
         this.onStart = o.onStart || '';
         this.onEndMove = o.onEndMove || '';
@@ -70,6 +71,29 @@ define(function(require) {
         this.dropContent = content;
       },
 
+      /**
+       * Toggle cursor while sorting
+       * @param {Boolean} active
+       */
+      toggleSortCursor: function(active) {
+        var em = this.em;
+        var body = document.body;
+        var pfx = this.ppfx || this.pfx;
+        var sortCls = pfx + 'grabbing';
+        var emBody = em ? em.get('Canvas').getBody() : '';
+        if(active) {
+          body.className += ' ' + sortCls;
+          if(em) {
+            emBody.className += ' ' + sortCls;
+          }
+        } else {
+          body.className = body.className.replace(sortCls, '').trim();
+          if(em) {
+            emBody.className = emBody.className.replace(sortCls, '').trim();
+          }
+        }
+      },
+
       /**
        * Set drag helper
        * @param {HTMLElement} el
@@ -224,6 +248,8 @@ define(function(require) {
         if(this.em) {
           this.em.clearSelection();
         }
+
+        this.toggleSortCursor(1);
       },
 
       /**
@@ -577,6 +603,7 @@ define(function(require) {
           dragHelper.remove();
           this.dragHelper = null;
         }
+        this.toggleSortCursor();
       },
 
       /**

styles/css/main.css

@@ -2672,6 +2672,9 @@ $fontColorActive: #4f8ef7;
   cursor: grabbing !important;
   cursor: -webkit-grabbing !important; }
 
+.gjs-grabbing {
+  overflow: hidden; }
+
 .gjs-off-prv {
   position: relative;
   z-index: 10;

styles/scss/main.scss

@@ -168,6 +168,10 @@ $fontV: 20;//random(1000)
   cursor: -webkit-grabbing !important;
 }
 
+.#{$app-prefix}grabbing {
+  overflow: hidden;
+}
+
 .#{$app-prefix}off-prv{
   @extend .#{$app-prefix}color-main;
   @extend .#{$app-prefix}bg-main;