exclusively handle selectability of text via .OxSelectable and body.OxDragging (to be set/unset in dragstart/dragend handlers)

source/Ox.UI/css/Ox.UI.css

@@ -19,18 +19,13 @@ blockquote {
 body {
     margin: 0;
     overflow: hidden;
-    -moz-user-select: -moz-none;
+    -moz-user-select: none;
     -o-user-select: none;
     -webkit-user-select: none;
 }
 code, pre {
     font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace;
 }
-div {
-    -moz-user-select: -moz-none;
-    -o-user-select: none;
-    -webkit-user-select: none;
-}
 div, input, textarea {
     font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
     font-size: 11px;
@@ -81,6 +76,11 @@ td {
     -o-user-select: text;
     -webkit-user-select: text;
 }
+body.OxDragging .OxSelectable {
+    -moz-user-select: none;
+    -o-user-select: none;
+    -webkit-user-select: none;
+}
 
 /*
 ================================================================================
@@ -523,9 +523,6 @@ Document
 
 .OxDocument {
     padding: 8px;
-    -moz-user-select: text;
-    -o-user-select: text;
-    -webkit-user-select: text;
 }
 .OxDocument div {
     border-width: 0;
@@ -533,9 +530,6 @@ Document
     //font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif;
     font-size: 12px;
     line-height: 18px;
-    -moz-user-select: text;
-    -o-user-select: text;
-    -webkit-user-select: text;
 }
 .OxDocument h1 {
     font-weight: bold;
@@ -916,9 +910,6 @@ OxEditableContent
 .OxEditableContent {
     outline: none;
     word-wrap: break-word;
-    -moz-user-select: text;
-    -o-user-select: text;
-    -webkit-user-select: text;
 }
 .OxEditableContent.OxEditing {
     white-space: pre;
@@ -934,9 +925,6 @@ OxEditableElement
     //cursor: pointer;
     padding: 0 0 0 1px;
     word-wrap: break-word;
-    -moz-user-select: text;
-    -o-user-select: text;
-    -webkit-user-select: text;
 }
 .OxEditableElement div.OxInput {
     padding: 0 1px 0 0;
@@ -1071,6 +1059,8 @@ OxRange
     float: left;
     height: 14px;
     -webkit-user-select: none;
+    -o-user-select: none;
+    -moz-user-select: none;
 }
 .OxRange > .OxTrack > div > img.OxFirstChild {
     border-top-left-radius: 7px;
@@ -1371,6 +1361,7 @@ Lists
     cursor: pointer;
     border-radius: 4px;
     //-moz-user-select: text;
+    //-o-user-select: text;
     //-webkit-user-select: text;
 }
 .OxIconList .OxItem > .OxText > div > div,
@@ -1686,9 +1677,6 @@ Menus
 .OxMainMenu > .OxTitle {
     float: left;
     cursor: default;
-    -moz-user-select: none;
-    -o-user-select: none;
-    -webkit-user-select: none;
 }
 .OxMainMenu.OxLarge > .OxTitle {
     height: 21px;
@@ -1733,9 +1721,6 @@ Menus
     z-index: 12;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
-    -moz-user-select: none;
-    -o-user-select: none;
-    -webkit-user-select: none;
 }
 .OxMenu.OxRight {
     border-top-right-radius: 4px;
@@ -2100,8 +2085,6 @@ SourceViewer
     border-right-style: solid;
     font-size: 14px;
     line-height: 20px;
-    -moz-user-select: text;
-    -webkit-user-select: text;
 }
 .OxSourceViewer td.OxComment > code {
     padding: 1px 3px 1px 3px;
@@ -2140,12 +2123,10 @@ SyntaxHightlighter
 }
 .OxSyntaxHighlighter > .OxSourceCode {
     white-space: nowrap;
-    -moz-user-select: text;
-    -o-user-select: text;
-    -webkit-user-select: text;
 }
 .OxSyntaxHighlighter > .OxSourceCode .OxLinebreak {
     //-moz-user-select: none;
+    //-o-user-select: none;
     //-webkit-user-select: none;
 }
 

source/Ox.UI/js/Bar/Resizebar.js

@@ -77,6 +77,7 @@ Ox.Resizebar = function(options, self) {
 
     function dragstart(data) {
         if (self.options.resizable && !self.options.collapsed) {
+            Ox.$body.addClass('OxDragging');
             self.drag = {
                 startPos: data[self.clientXY],
                 startSize: self.options.size
@@ -121,6 +122,7 @@ Ox.Resizebar = function(options, self) {
 
     function dragend() {
         if (self.options.resizable && !self.options.collapsed) {
+            Ox.$body.removeClass('OxDragging');
             self.options.size != self.drag.startSize && triggerEvents('resizeend');
         }
     }

source/Ox.UI/js/Calendar/Calendar.js

@@ -606,6 +606,7 @@ Ox.Calendar = function(options, self) {
 
     function dragstart(data) {
         //if ($(e.target).is(':not(.OxLine > .OxEvent)')) {
+            Ox.$body.addClass('OxDragging');
             self.drag = {
                 top: self.$container[0].scrollTop,
                 x: data.clientX
@@ -642,6 +643,7 @@ Ox.Calendar = function(options, self) {
 
     function dragend(data) {
         if (self.drag) {
+            Ox.$body.removeClass('OxDragging');
             dragafter(data);
             self.drag = null;
         }
@@ -659,6 +661,7 @@ Ox.Calendar = function(options, self) {
     }
 
     function dragstartScrollbar(data) {
+        Ox.$body.addClass('OxDragging');
         self.drag = {x: data.clientX};
     }
 
@@ -682,6 +685,7 @@ Ox.Calendar = function(options, self) {
     }
 
     function dragendScrollbar(data) {
+        Ox.$body.removeClass('OxDragging');
         dragafterScrollbar(data);
         self.drag = null;
     }

source/Ox.UI/js/Code/DocPage.js

@@ -67,7 +67,7 @@ Ox.DocPage = function(options, self) {
             .appendTo(self.$toolbar);
     }
 
-    self.$page = Ox.Container().addClass('OxDocPage OxDocument');
+    self.$page = Ox.Container().addClass('OxDocPage OxDocument OxSelectable');
 
     that.setElement(
         Ox.SplitPanel({

source/Ox.UI/js/Code/SourceViewer.js

@@ -64,7 +64,7 @@ Ox.SourceViewer = function(options, self) {
             var $section = $('<tr>')
                     .appendTo(self.$table),
                 $comment = $('<td>')
-                    .addClass('OxComment OxSerif')
+                    .addClass('OxComment OxSerif OxSelectable')
                     .html(Ox.addLinks(section.comment, true))
                     .appendTo($section),
                 $code = $('<td>')

source/Ox.UI/js/Code/SyntaxHighlighter.js

@@ -118,7 +118,7 @@ Ox.SyntaxHighlighter = function(options, self) {
         });
         
         $source = Ox.Element()
-            .addClass('OxSourceCode')
+            .addClass('OxSourceCode OxSelectable')
             .html(source)
             .appendTo(that);
         if (self.options.lineLength) {

source/Ox.UI/js/Form/Editable.js

@@ -93,7 +93,7 @@ Ox.Editable = function(options, self) {
 
     self.css = {};
     self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
-        .addClass('OxValue')
+        .addClass('OxValue OxSelectable')
         .html(formatValue())
         .appendTo(that);
 

source/Ox.UI/js/Form/EditableContent.js

@@ -42,7 +42,7 @@ Ox.EditableContent = function(options, self) {
                 !self.options.editing && self.$value.html(formatValue());
             }
         })
-        .addClass('OxEditableContent')
+        .addClass('OxEditableContent OxSelectable')
         .on({
             blur: self.options.submitOnBlur ? submit : blur,
             click: function(e) {

source/Ox.UI/js/List/List.js

@@ -424,6 +424,7 @@ Ox.List = function(options, self) {
             || $parent.is('.OxTarget') // table lists
             || $parent.parent().is('.OxTarget') // table lists with div inside cell
         ) && !$target.is('.OxSpecialTarget')) {
+            Ox.$body.addClass('OxDragging');
             self.drag = {
                 ids: self.options.selected
             };
@@ -466,6 +467,7 @@ Ox.List = function(options, self) {
 
     function dragend(data) {
         if (self.drag) {
+            Ox.$body.removeClass('OxDragging');
             that.triggerEvent('draganddropend', {
                 event: data,
                 ids: self.drag.ids
@@ -933,6 +935,7 @@ Ox.List = function(options, self) {
     }
 
     function movestart(data) {
+        Ox.$body.addClass('OxDragging');
         var pos = findItemPosition(data),
             $items = self.$items.filter(function($item, i) {
                 if ($item.is('.OxSelected')) {
@@ -973,6 +976,7 @@ Ox.List = function(options, self) {
 
     function moveend(data) {
         var ids = [];
+        Ox.$body.removeClass('OxDragging');
         self.$items.forEach(function($item) {
             $item.removeClass('OxDrag');
             ids.push($item.options('data')[self.options.unique]);

source/Ox.UI/js/List/TableList.js

@@ -568,6 +568,7 @@ Ox.TableList = function(options, self) {
     }
 
     function dragstartColumn(id, e) {
+        Ox.$body.addClass('OxDragging');
         self.drag = {
             columnOffsets: getColumnOffsets(),
             listOffset: that.$element.offset().left - that.$body.scrollLeft(),
@@ -631,6 +632,7 @@ Ox.TableList = function(options, self) {
     function dragendColumn(id, e) {
         var column = self.visibleColumns.splice(self.drag.stopPos, 1)[0],
             width = self.columnWidths.splice(self.drag.stopPos, 1)[0];
+        Ox.$body.removeClass('OxDragging');
         self.visibleColumns.splice(self.drag.stopPos, 0, column);
         self.columnWidths.splice(self.drag.stopPos, 0, width);
         that.$head.$content.empty();
@@ -645,6 +647,7 @@ Ox.TableList = function(options, self) {
 
     function dragstartResize(id, e) {
         var pos = getColumnPositionById(id);
+        Ox.$body.addClass('OxDragging');
         self.drag = {
             startWidth: self.columnWidths[pos]
         };
@@ -662,6 +665,7 @@ Ox.TableList = function(options, self) {
     function dragendResize(id, e) {
         var pos = getColumnPositionById(id);
         // fixme: shouldn't this be resizecolumn?
+        Ox.$body.removeClass('OxDragging');
         that.triggerEvent('columnresize', {
             id: id,
             width: self.columnWidths[pos]

source/Ox.UI/js/List/TreeList.js

@@ -111,7 +111,7 @@ Ox.TreeList = function(options, self) {
         $cell.appendTo($item);
         $icon && $icon.addClass(data.items ? 'OxToggle' : 'OxTarget').appendTo($cell);
         $('<div>')
-            .addClass('OxCell OxTarget' + (!data.items ? ' OxSelectable' : ''))
+            .addClass('OxCell OxTarget')
             .css({
                 width: self.options.width - padding - 32 - Ox.UI.SCROLLBAR_SIZE + 'px'
             })

source/Ox.UI/js/Map/MapMarker.js

@@ -101,7 +101,7 @@ Ox.MapMarker = function(options) {
     }
 
     function dragstart(e) {
-
+        Ox.$body.addClass('OxDragging');
     }
 
     function drag(e) {
@@ -134,6 +134,7 @@ Ox.MapMarker = function(options) {
     }
 
     function dragend(e) {
+        Ox.$body.removeClass('OxDragging');
         that.map.triggerEvent('changeplaceend', that.place);
     }
 

source/Ox.UI/js/Map/MapRectangleMarker.js

@@ -37,6 +37,7 @@ Ox.MapRectangleMarker = function(options) {
     });
 
     function dragstart(e) {
+        Ox.$body.addClass('OxDragging');
         that.drag = {
             lat: e.latLng.lat(),
             lng: e.latLng.lng()
@@ -73,6 +74,7 @@ Ox.MapRectangleMarker = function(options) {
 
     function dragend(e) {
         var south;
+        Ox.$body.removeClass('OxDragging');
         if (that.place.south > that.place.north) {
             south = that.place.south;
             that.place.south = that.place.north;

source/Ox.UI/js/Video/AnnotationFolder.js

@@ -362,6 +362,7 @@ Ox.AnnotationFolder = function(options, self) {
 
     function dragstart() {
         if (self.options.showWidget) {
+            Ox.$body.addClass('OxDragging');
             self.drag = {
                 startSize: self.options.widgetSize
             };
@@ -384,6 +385,7 @@ Ox.AnnotationFolder = function(options, self) {
 
     function dragend(e) {
         if (self.options.showWidget) {
+            Ox.$body.removeClass('OxDragging');
             self.options.type == 'event'
                 ? self.$calendar.resizeCalendar()
                 : self.$map.resizeMap();

source/Ox.UI/js/Video/LargeVideoTimeline.js

@@ -49,7 +49,8 @@ Ox.LargeVideoTimeline = function(options, self) {
         that.bindEvent({
             anyclick: click,
             dragstart: dragstart,
-            drag: drag
+            drag: drag,
+            dragend: dragend
         });
     }
 
@@ -127,6 +128,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     function dragstart(data) {
+        Ox.$body.addClass('OxDragging');
         self.drag = {x: data.clientX};
     }
 
@@ -140,6 +142,10 @@ Ox.LargeVideoTimeline = function(options, self) {
         triggerPositionEvent();
     }
 
+    function dragend() {
+        Ox.$body.removeClass('OxDragging');
+    }
+
     function getImageURL(i, callback) {
         if (!self.isAsync) {
             callback(self.options.getImageURL(self.options.type, i));

source/Ox.UI/js/Video/VideoPlayer.js

@@ -1250,6 +1250,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function dragstart() {
+        Ox.$body.addClass('OxDragging');
         self.drag = {
             position: self.options.position,
             paused: self.options.paused
@@ -1265,6 +1266,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function dragend() {
+        Ox.$body.removeClass('OxDragging');
         !self.drag.paused && togglePaused();
     }
     

source/Ox.UI/js/Window/Dialog.js

@@ -234,6 +234,7 @@ Ox.Dialog = function(options, self) {
     function dragstart(event) {
         var offset;
         if (!$(event.target).is('.OxButton')) {
+            Ox.$body.addClass('OxDragging');
             offset = that.offset();
             self.drag = {
                 left: offset.left,
@@ -262,8 +263,11 @@ Ox.Dialog = function(options, self) {
         }
     }
 
-    function dragend() {
+    function dragend(event) {
-        that.unwrap();
+        if (!$(event.target).is('.OxButton')) {
+            Ox.$body.removeClass('OxDragging');
+            that.unwrap();
+        }
     }
 
     function getButtonById(id) {
@@ -329,6 +333,7 @@ Ox.Dialog = function(options, self) {
     }
 
     function resizestart(event) {
+        Ox.$body.addClass('OxDragging');
         var edge = event.target.className.slice(17).toLowerCase(),
             offset = that.offset();
         self.drag = {
@@ -506,6 +511,7 @@ Ox.Dialog = function(options, self) {
     }
 
     function resizeend() {
+        Ox.$body.removeClass('OxDragging');
         that.unwrap();
         that.triggerEvent('resizeend', {
             width: self.options.width,