From 564ce69a78bbdce6aea4a59af15c1cc6902b7197 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 19 Jul 2013 08:42:25 +0000 Subject: [PATCH] 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 | 39 ++++++--------------- source/Ox.UI/js/Bar/Resizebar.js | 2 ++ source/Ox.UI/js/Calendar/Calendar.js | 4 +++ source/Ox.UI/js/Code/DocPage.js | 2 +- source/Ox.UI/js/Code/SourceViewer.js | 2 +- source/Ox.UI/js/Code/SyntaxHighlighter.js | 2 +- source/Ox.UI/js/Form/Editable.js | 2 +- source/Ox.UI/js/Form/EditableContent.js | 2 +- source/Ox.UI/js/List/List.js | 4 +++ source/Ox.UI/js/List/TableList.js | 4 +++ source/Ox.UI/js/List/TreeList.js | 2 +- source/Ox.UI/js/Map/MapMarker.js | 3 +- source/Ox.UI/js/Map/MapRectangleMarker.js | 2 ++ source/Ox.UI/js/Video/AnnotationFolder.js | 2 ++ source/Ox.UI/js/Video/LargeVideoTimeline.js | 8 ++++- source/Ox.UI/js/Video/VideoPlayer.js | 2 ++ source/Ox.UI/js/Window/Dialog.js | 10 ++++-- 17 files changed, 53 insertions(+), 39 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 10f9dfbc..a5b1ce13 100644 --- 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; } diff --git a/source/Ox.UI/js/Bar/Resizebar.js b/source/Ox.UI/js/Bar/Resizebar.js index ad7a5950..74448401 100644 --- 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'); } } diff --git a/source/Ox.UI/js/Calendar/Calendar.js b/source/Ox.UI/js/Calendar/Calendar.js index 45b4ac82..35113b00 100644 --- 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; } diff --git a/source/Ox.UI/js/Code/DocPage.js b/source/Ox.UI/js/Code/DocPage.js index a35cc5ea..862b2f30 100644 --- 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({ diff --git a/source/Ox.UI/js/Code/SourceViewer.js b/source/Ox.UI/js/Code/SourceViewer.js index 35a203b2..bfadabc9 100644 --- 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 = $('') .appendTo(self.$table), $comment = $('') - .addClass('OxComment OxSerif') + .addClass('OxComment OxSerif OxSelectable') .html(Ox.addLinks(section.comment, true)) .appendTo($section), $code = $('') diff --git a/source/Ox.UI/js/Code/SyntaxHighlighter.js b/source/Ox.UI/js/Code/SyntaxHighlighter.js index be541f76..787ecb18 100644 --- 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) { diff --git a/source/Ox.UI/js/Form/Editable.js b/source/Ox.UI/js/Form/Editable.js index 1781a174..44972493 100644 --- 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' ? '' : '
') - .addClass('OxValue') + .addClass('OxValue OxSelectable') .html(formatValue()) .appendTo(that); diff --git a/source/Ox.UI/js/Form/EditableContent.js b/source/Ox.UI/js/Form/EditableContent.js index 6d94c1da..57d0f72f 100644 --- 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) { diff --git a/source/Ox.UI/js/List/List.js b/source/Ox.UI/js/List/List.js index db066148..092702d2 100644 --- 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]); diff --git a/source/Ox.UI/js/List/TableList.js b/source/Ox.UI/js/List/TableList.js index 8460de4a..3c46f4fc 100644 --- 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] diff --git a/source/Ox.UI/js/List/TreeList.js b/source/Ox.UI/js/List/TreeList.js index f2bf5ea1..bd16c6e2 100644 --- 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); $('
') - .addClass('OxCell OxTarget' + (!data.items ? ' OxSelectable' : '')) + .addClass('OxCell OxTarget') .css({ width: self.options.width - padding - 32 - Ox.UI.SCROLLBAR_SIZE + 'px' }) diff --git a/source/Ox.UI/js/Map/MapMarker.js b/source/Ox.UI/js/Map/MapMarker.js index 5b936f59..4ea6bafe 100644 --- 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); } diff --git a/source/Ox.UI/js/Map/MapRectangleMarker.js b/source/Ox.UI/js/Map/MapRectangleMarker.js index c7edf94b..7b7f252d 100644 --- 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; diff --git a/source/Ox.UI/js/Video/AnnotationFolder.js b/source/Ox.UI/js/Video/AnnotationFolder.js index 468f0136..ee6509d5 100644 --- 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(); diff --git a/source/Ox.UI/js/Video/LargeVideoTimeline.js b/source/Ox.UI/js/Video/LargeVideoTimeline.js index b2aa1723..3be01b48 100644 --- 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)); diff --git a/source/Ox.UI/js/Video/VideoPlayer.js b/source/Ox.UI/js/Video/VideoPlayer.js index 81bf4024..81a5da1b 100644 --- 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(); } diff --git a/source/Ox.UI/js/Window/Dialog.js b/source/Ox.UI/js/Window/Dialog.js index a4df6255..c131481e 100644 --- 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,8 +263,11 @@ Ox.Dialog = function(options, self) { } } - function dragend() { - that.unwrap(); + function dragend(event) { + 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,