tooltips and better cursors for splitpanels
This commit is contained in:
rlx
parent
2aa828c308
commit
1333a3ecec
7 changed files with 105 additions and 73 deletions
|
|
@ -131,7 +131,6 @@ Bars
|
|||
width: 100%;
|
||||
height: 5px;
|
||||
margin: -2px 0 -2px 0;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.OxResizebar.OxHorizontal > .OxLine {
|
||||
width: 100%;
|
||||
|
|
@ -146,7 +145,6 @@ Bars
|
|||
width: 5px;
|
||||
height: 100%;
|
||||
margin: 0 -2px 0 -2px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.OxResizebar.OxVertical > .OxLine {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ Ox.Resizebar <f:Ox.Element> Resizebar
|
|||
resizeable <b|true> can bar be resized
|
||||
resize <a|[]> array with possible sizes
|
||||
size <n|0> default size
|
||||
tooltop <b|s|false> tooltip or not
|
||||
self <o> Shared private variable
|
||||
@*/
|
||||
/**
|
||||
|
|
@ -35,17 +36,6 @@ Ox.Resizebar = function(options, self) {
|
|||
})
|
||||
.options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
|
||||
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
|
||||
/*
|
||||
.attr({
|
||||
draggable: 'true'
|
||||
})
|
||||
.bind('dragstart', function(e) {
|
||||
// e.originalEvent.dataTransfer.setDragImage($('<div>')[0], 0, 0);
|
||||
})
|
||||
.bind('drag', function(e) {
|
||||
Ox.print('dragging', e)
|
||||
})
|
||||
*/
|
||||
.bindEvent({
|
||||
anyclick: toggle,
|
||||
dragstart: dragstart,
|
||||
|
|
@ -56,13 +46,23 @@ Ox.Resizebar = function(options, self) {
|
|||
.append($('<div>').addClass('OxLine'))
|
||||
.append($('<div>').addClass('OxSpace'));
|
||||
|
||||
if (self.options.tooltip) {
|
||||
self.$tooltip = Ox.Tooltip({title: getTitle()});
|
||||
that.bind({
|
||||
mouseenter: self.$tooltip.show,
|
||||
mouseleave: self.$tooltip.hide
|
||||
});
|
||||
}
|
||||
|
||||
$.extend(self, {
|
||||
clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
|
||||
dimensions: Ox.UI.DIMENSIONS[self.options.orientation], // fixme: should orientation be the opposite orientation here?
|
||||
edges: Ox.UI.EDGES[self.options.orientation],
|
||||
leftOrTop: self.options.edge == 'left' || self.options.edge == 'top'
|
||||
isLeftOrTop: self.options.edge == 'left' || self.options.edge == 'top'
|
||||
});
|
||||
|
||||
that.css({cursor: getCursor()});
|
||||
|
||||
function dragstart(event, e) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.print('DRAGSTART')
|
||||
|
|
@ -78,7 +78,7 @@ Ox.Resizebar = function(options, self) {
|
|||
var d = e[self.clientXY] - self.drag.startPos,
|
||||
size = self.options.size;
|
||||
self.options.size = Ox.limit(
|
||||
self.drag.startSize + d * (self.leftOrTop ? 1 : -1),
|
||||
self.drag.startSize + d * (self.isLeftOrTop ? 1 : -1),
|
||||
self.options.resize[0],
|
||||
self.options.resize[self.options.resize.length - 1]
|
||||
);
|
||||
|
|
@ -89,9 +89,9 @@ Ox.Resizebar = function(options, self) {
|
|||
}
|
||||
});
|
||||
if (self.options.size != size) {
|
||||
that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
|
||||
that.css(self.edges[self.isLeftOrTop ? 2 : 3], self.options.size + 'px');
|
||||
// fixme: send {size: x}, not x
|
||||
if (self.leftOrTop) {
|
||||
if (self.isLeftOrTop) {
|
||||
self.options.elements[0]
|
||||
.css(self.dimensions[1], self.options.size + 'px')
|
||||
self.options.elements[1]
|
||||
|
|
@ -103,7 +103,7 @@ Ox.Resizebar = function(options, self) {
|
|||
.css(self.dimensions[1], self.options.size + 'px')
|
||||
}
|
||||
triggerEvents('resize');
|
||||
self.options.parent.updateSize(self.leftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
|
||||
self.options.parent.updateSize(self.isLeftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -114,14 +114,54 @@ Ox.Resizebar = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function getCursor() {
|
||||
var cursor = '';
|
||||
if (self.options.collapsed) {
|
||||
cursor = self.options.orientation == 'horizontal'
|
||||
? (self.isLeftOrTop ? 's' : 'n')
|
||||
: (self.isLeftOrTop ? 'e' : 'w');
|
||||
} else {
|
||||
if (self.options.resizable) {
|
||||
cursor = self.options.orientation == 'horizontal'
|
||||
? 'ns' : 'ew';
|
||||
} else if (self.options.collapsible) {
|
||||
cursor = self.options.orientation == 'horizontal'
|
||||
? (self.isLeftOrTop ? 'n' : 's')
|
||||
: (self.isLeftOrTop ? 'w' : 'e');
|
||||
}
|
||||
|
||||
}
|
||||
return cursor + '-resize';
|
||||
}
|
||||
|
||||
function getTitle() {
|
||||
var title = '';
|
||||
if (self.options.collapsed) {
|
||||
title = 'Click to show';
|
||||
} else {
|
||||
if (self.options.resizable) {
|
||||
title = 'Drag to resize'
|
||||
}
|
||||
if (self.options.collapsible) {
|
||||
title = (title ? title + ' or c' : 'C') + 'lick to hide'
|
||||
}
|
||||
}
|
||||
if (title && Ox.isString(self.options.tooltip)) {
|
||||
title += ' ' + self.options.tooltip;
|
||||
}
|
||||
return title;
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (self.options.collapsible) {
|
||||
// fixme: silly, pass a parameter
|
||||
self.options.parent.toggle(
|
||||
self.leftOrTop ? 0 :
|
||||
self.options.parent.options('elements').length - 1
|
||||
self.isLeftOrTop ? 0
|
||||
: self.options.parent.options('elements').length - 1
|
||||
);
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
that.css({cursor: getCursor()});
|
||||
self.$tooltip.options({title: getTitle()});
|
||||
}
|
||||
/*
|
||||
//Ox.print('toggle');
|
||||
|
|
@ -145,12 +185,12 @@ Ox.Resizebar = function(options, self) {
|
|||
|
||||
function triggerEvents(event) {
|
||||
self.options.elements[0].triggerEvent(event,
|
||||
self.leftOrTop ?
|
||||
self.isLeftOrTop ?
|
||||
self.options.size :
|
||||
self.options.elements[0][self.dimensions[1]]()
|
||||
);
|
||||
self.options.elements[1].triggerEvent(event,
|
||||
self.leftOrTop ?
|
||||
self.isLeftOrTop ?
|
||||
self.options.elements[1][self.dimensions[1]]() :
|
||||
self.options.size
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1658,7 +1658,7 @@ Ox.List = function(options, self) {
|
|||
value <s> value, can be whatever that property is
|
||||
@*/
|
||||
that.value = function(id, key, value) {
|
||||
Ox.print('that.value', id, getPositionById(id))
|
||||
//Ox.print('that.value', id, getPositionById(id))
|
||||
var pos = getPositionById(id),
|
||||
$item = self.$items[pos],
|
||||
data = $item.options('data'),
|
||||
|
|
|
|||
|
|
@ -5,33 +5,28 @@ Ox.SplitPanel <f:Ox.Element> SpliPanel Object
|
|||
(options) -> <f> SpliPanel Object
|
||||
(options, self) -> <f> SpliPanel Object
|
||||
options <o> Options object
|
||||
elements <[o]|[]> Array of two or three element objects
|
||||
collapsible <b|false> If true, can be collapsed (if outer element)
|
||||
collapsed <b|false> If true, is collapsed (if collapsible)
|
||||
element <o> Any Ox.Element
|
||||
If any element is collapsible or resizable, all elements must
|
||||
have an id.
|
||||
resizable <b|false> If true, can be resized (if outer element)
|
||||
resize <[n]|[]> Min size, optional snappy points, and max size
|
||||
size <n|s|"auto"> Size in px (one element must be "auto")
|
||||
tooltip <b|s|false> If true, show tooltip, if string, append it
|
||||
orientation <s|"horizontal"> orientation ("horizontal" or "vertical")
|
||||
self <o> shared private variable
|
||||
resize <!> resize
|
||||
Fires on resize, on both elements being resized
|
||||
toggle <!> toggle
|
||||
Fires on collapse or expand, on the element being toggled
|
||||
@*/
|
||||
|
||||
/**
|
||||
options:
|
||||
elements: [{ array of one, two or three elements
|
||||
collapsible: false, collapsible or not (only for outer elements)
|
||||
collapsed: false, collapsed or not (only for collapsible elements)
|
||||
element: {}, OxElement (if any element is resizable or
|
||||
collapsible, all OxElements must have an id)
|
||||
resizable: false, resizable or not (only for outer elements)
|
||||
resize: [], array of sizes (only for resizable elements,
|
||||
first value is min, last value is max,
|
||||
other values are 'snappy' points in between)
|
||||
size: 0 size in px (one element must have no size)
|
||||
}],
|
||||
orientation: '' 'horizontal' or 'vertical'
|
||||
events:
|
||||
resize
|
||||
toggle
|
||||
*/
|
||||
Ox.SplitPanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self) // fixme: Container
|
||||
var that = Ox.Element({}, self) // fixme: Container?
|
||||
.defaults({
|
||||
elements: [],
|
||||
orientation: 'horizontal'
|
||||
|
|
@ -64,34 +59,36 @@ Ox.SplitPanel = function(options, self) {
|
|||
});
|
||||
|
||||
// create resizebars
|
||||
self.options.elements.forEach(function(v, i) {
|
||||
self.options.elements.forEach(function(element, i) {
|
||||
//that.append(element)
|
||||
//Ox.print('V: ', v, that.$elements[i])
|
||||
var index = i == 0 ? 0 : 1;
|
||||
that.$elements[i].appendTo(that.$element); // fixme: that.$content
|
||||
if (v.collapsible || v.resizable) {
|
||||
if (element.collapsible || element.resizable) {
|
||||
//Ox.print('v.size', v.size)
|
||||
self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
|
||||
self.$resizebars[index] = Ox.Resizebar({
|
||||
collapsible: v.collapsible,
|
||||
collapsed: element.collapsed,
|
||||
collapsible: element.collapsible,
|
||||
edge: self.edges[index],
|
||||
elements: [
|
||||
that.$elements[self.resizebarElements[index][0]],
|
||||
that.$elements[self.resizebarElements[index][1]]
|
||||
],
|
||||
id: v.element.options('id'),
|
||||
id: element.element.options('id'),
|
||||
orientation: self.options.orientation == 'horizontal' ? 'vertical' : 'horizontal',
|
||||
parent: that, // fixme: that.$content
|
||||
resizable: v.resizable,
|
||||
resize: v.resize,
|
||||
size: v.size
|
||||
resizable: element.resizable,
|
||||
resize: element.resize,
|
||||
size: element.size,
|
||||
tooltip: element.tooltip
|
||||
});
|
||||
self.$resizebars[index][i == 0 ? 'insertAfter' : 'insertBefore'](that.$elements[i]);
|
||||
}
|
||||
});
|
||||
|
||||
self.options.elements.forEach(function(v, i) {
|
||||
v.collapsed && that.css(
|
||||
self.options.elements.forEach(function(element, i) {
|
||||
element.collapsed && that.css(
|
||||
self.edges[i == 0 ? 0 : 1], -self.options.elements[i].size + 'px'
|
||||
);
|
||||
});
|
||||
|
|
@ -120,14 +117,14 @@ Ox.SplitPanel = function(options, self) {
|
|||
}
|
||||
|
||||
function setSizes(init) {
|
||||
self.options.elements.forEach(function(v, i) {
|
||||
self.options.elements.forEach(function(element, i) {
|
||||
// fixme: maybe we can add a conditional here, since init
|
||||
// is about elements that are collapsed splitpanels
|
||||
var edges = [
|
||||
(init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
|
||||
(init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
|
||||
];
|
||||
v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
|
||||
element.size != 'auto' && that.$elements[i].css(self.dimensions[0], element.size + 'px');
|
||||
if (i == 0) {
|
||||
that.$elements[i].css(
|
||||
self.edges[0], edges[0] + 'px'
|
||||
|
|
@ -140,20 +137,20 @@ Ox.SplitPanel = function(options, self) {
|
|||
self.edges[0], self.options.elements[0].size == 'auto' ? 'auto' :
|
||||
edges[0] + getSize(self.options.elements[0]) + 'px'
|
||||
);
|
||||
(self.options.elements[0].size != 'auto' || v.size != 'auto') && that.$elements[i].css(
|
||||
(self.options.elements[0].size != 'auto' || element.size != 'auto') && that.$elements[i].css(
|
||||
self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px'
|
||||
);
|
||||
} else {
|
||||
that.$elements[i].css(
|
||||
self.edges[0], (self.options.elements[1].size == 'auto' || v.size == 'auto') ? 'auto' :
|
||||
self.edges[0], (self.options.elements[1].size == 'auto' || element.size == 'auto') ? 'auto' :
|
||||
(getVisibleSize(self.options.elements[0]) + getVisibleSize(self.options.elements[1])) + 'px'
|
||||
);
|
||||
that.$elements[i].css(
|
||||
self.edges[1], edges[1] + 'px'
|
||||
);
|
||||
}
|
||||
if (v.collapsible || v.resizable) {
|
||||
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], v.size);
|
||||
if (element.collapsible || element.resizable) {
|
||||
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], element.size);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -166,12 +163,9 @@ Ox.SplitPanel = function(options, self) {
|
|||
that.replaceElement = function(id, element) {
|
||||
// one can pass pos instead of id
|
||||
var pos = Ox.isNumber(id) ? id : getPositionById(id);
|
||||
//Ox.print('replace', pos, element);
|
||||
//Ox.print('element', self.options.elements[pos].element, element)
|
||||
that.$elements[pos] = element
|
||||
.css(self.edges[2], (parseInt(element.css(self.edges[2])) || 0) + 'px')
|
||||
.css(self.edges[3], (parseInt(element.css(self.edges[3])) || 0) + 'px');
|
||||
//alert(element.css(self.edges[3]))
|
||||
self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element);
|
||||
self.options.elements[pos].element = element;
|
||||
setSizes();
|
||||
|
|
@ -183,7 +177,6 @@ Ox.SplitPanel = function(options, self) {
|
|||
]
|
||||
});
|
||||
});
|
||||
//Ox.print(self.options.elements[pos])
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -263,6 +256,7 @@ Ox.SplitPanel = function(options, self) {
|
|||
|
||||
};
|
||||
|
||||
// fixme: remove!
|
||||
Ox.SplitPanel_ = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
showAnnotations: false,
|
||||
showLargeTimeline: true,
|
||||
subtitles: [],
|
||||
tooltips: false,
|
||||
videoRatio: 16/9,
|
||||
videoSize: 'small',
|
||||
video: '',
|
||||
|
|
@ -641,7 +642,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
}),
|
||||
resizable: true,
|
||||
resize: [192, 256, 320, 384],
|
||||
size: self.options.annotationsSize
|
||||
size: self.options.annotationsSize,
|
||||
tooltip: self.options.tooltips ? 'annotations' : false
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
|||
showAnnotations: true,
|
||||
showControls: true,
|
||||
subtitles: [],
|
||||
tooltips: false,
|
||||
video: '',
|
||||
volume: 1,
|
||||
width: 0
|
||||
|
|
@ -121,7 +122,8 @@ Ox.VideoPanelPlayer = function(options, self) {
|
|||
collapsed: !self.options.showControls,
|
||||
collapsible: true,
|
||||
element: self.$controls,
|
||||
size: 80
|
||||
size: 80,
|
||||
tooltip: self.options.tooltips ? 'timeline' : false
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
|
|
@ -148,7 +150,8 @@ Ox.VideoPanelPlayer = function(options, self) {
|
|||
element: self.$annotations,
|
||||
resizable: true,
|
||||
resize: [192, 256, 320, 384],
|
||||
size: self.options.annotationsSize
|
||||
size: self.options.annotationsSize,
|
||||
tooltip: self.options.tooltips ? 'annotations' : false
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
|
|
|
|||
13
source/Ox.js
13
source/Ox.js
|
|
@ -2311,21 +2311,16 @@ Ox.formatColor = function(val, type) {
|
|||
return Math.round(val);
|
||||
});
|
||||
});
|
||||
color = [255, 255, 255];
|
||||
/*
|
||||
background = Ox.rgb(0, val, 0.25).map(function(val) {
|
||||
return Math.round(val);
|
||||
color = Ox.range(3).map(function() {
|
||||
return Math.round(128 + val * 127);
|
||||
});
|
||||
color = Ox.rgb(0, val, 0.75).map(function(val) {
|
||||
return Math.round(val);
|
||||
});
|
||||
*/
|
||||
} else if (type == 'lightness') {
|
||||
background = Ox.range(3).map(function() {
|
||||
return Math.round(val * 255);
|
||||
});
|
||||
color = Ox.range(3).map(function() {
|
||||
return val < 0.5 ? 255 : 0;
|
||||
var v = val * 255;
|
||||
return val < 0.5 ? 128 + v : 255 - v;
|
||||
});
|
||||
}
|
||||
return Ox.element('<div>')
|
||||
|
|
|
|||
Loading…
Reference in a new issue