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

This commit is contained in:
rlx 2013-07-19 08:42:25 +00:00
parent f8816e7522
commit 564ce69a78
17 changed files with 53 additions and 39 deletions

View file

@ -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;
}

View file

@ -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');
}
}

View file

@ -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;
}

View file

@ -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({

View file

@ -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>')

View file

@ -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) {

View file

@ -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);

View file

@ -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) {

View file

@ -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]);

View file

@ -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]

View file

@ -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'
})

View file

@ -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);
}

View file

@ -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;

View file

@ -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();

View file

@ -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));

View file

@ -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();
}

View file

@ -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,