exclusively handle selectability of text via .OxSelectable and body.OxDragging (to be set/unset in dragstart/dragend handlers)
This commit is contained in:
parent
f8816e7522
commit
564ce69a78
17 changed files with 53 additions and 39 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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>')
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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]);
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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'
|
||||
})
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue