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

2013-07-19 08:42:25 +00:00 · 2013-07-19 08:42:25 +00:00 · 564ce69a78
commit 564ce69a78
parent f8816e7522
17 changed files with 53 additions and 39 deletions
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/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;
 }

--- a/source/Ox.UI/js/Bar/Resizebar.js
+++ b/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');
        }
    }
--- a/source/Ox.UI/js/Calendar/Calendar.js
+++ b/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;
    }
--- a/source/Ox.UI/js/Code/DocPage.js
+++ b/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({
--- a/source/Ox.UI/js/Code/SourceViewer.js
+++ b/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>')
--- a/source/Ox.UI/js/Code/SyntaxHighlighter.js
+++ b/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) {
--- a/source/Ox.UI/js/Form/Editable.js
+++ b/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);

--- a/source/Ox.UI/js/Form/EditableContent.js
+++ b/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) {
--- a/source/Ox.UI/js/List/List.js
+++ b/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]);
--- a/source/Ox.UI/js/List/TableList.js
+++ b/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]
--- a/source/Ox.UI/js/List/TreeList.js
+++ b/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'
            })
--- a/source/Ox.UI/js/Map/MapMarker.js
+++ b/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);
    }

--- a/source/Ox.UI/js/Map/MapRectangleMarker.js
+++ b/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;
--- a/source/Ox.UI/js/Video/AnnotationFolder.js
+++ b/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();
--- a/source/Ox.UI/js/Video/LargeVideoTimeline.js
+++ b/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));
--- a/source/Ox.UI/js/Video/VideoPlayer.js
+++ b/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();
    }
    
--- a/source/Ox.UI/js/Window/Dialog.js
+++ b/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,9 +263,12 @@ Ox.Dialog = function(options, self) {
        }
    }

-    function dragend() {
+    function dragend(event) {
+        if (!$(event.target).is('.OxButton')) {
+            Ox.$body.removeClass('OxDragging');
            that.unwrap();
        }
+    }

    function getButtonById(id) {
        var ret = null;
@ -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,