update infolist
This commit is contained in:
rlx
parent
57ed9f9680
commit
5d669f42e3
4 changed files with 60 additions and 38 deletions
|
|
@ -19,8 +19,7 @@ Ox.InfoList = function(options, self) {
|
|||
})
|
||||
.options(options || {})
|
||||
|
||||
self.iconHeight = Math.round(self.options.size * 2/3);
|
||||
self.iconWidth = self.iconHeight;
|
||||
self.iconSize = Math.round(self.options.size * 2/3);
|
||||
self.itemHeight = self.options.size;
|
||||
|
||||
that.$element = Ox.List({
|
||||
|
|
@ -55,10 +54,10 @@ Ox.InfoList = function(options, self) {
|
|||
? self.options.item(data, self.options.sort, self.options.size)
|
||||
: {
|
||||
icon: {
|
||||
width: Math.round(self.options.size * (
|
||||
width: Math.round(self.iconSize * (
|
||||
self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio
|
||||
)),
|
||||
height: Math.round(self.options.size / (
|
||||
height: Math.round(self.iconSize / (
|
||||
self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
|
||||
))
|
||||
},
|
||||
|
|
@ -77,13 +76,13 @@ Ox.InfoList = function(options, self) {
|
|||
.append(
|
||||
Ox.IconItem(Ox.extend(data.icon, {
|
||||
borderRadius: self.options.borderRadius,
|
||||
iconHeight: 128, //self.iconHeight,
|
||||
iconWidth: 128, //self.iconWidth,
|
||||
imageHeight: data.height,
|
||||
imageWidth: data.width,
|
||||
iconHeight: self.iconSize,
|
||||
iconWidth: self.iconSize,
|
||||
imageHeight: data.icon.height,
|
||||
imageWidth: data.icon.width,
|
||||
isInfoList: true,
|
||||
itemHeight: self.itemHeight,
|
||||
itemWidth: 128,
|
||||
itemWidth: 128
|
||||
}))
|
||||
.addClass('OxInfoIcon')
|
||||
.css({
|
||||
|
|
@ -93,16 +92,15 @@ Ox.InfoList = function(options, self) {
|
|||
$info = Ox.Element()
|
||||
.css({
|
||||
float: 'left',
|
||||
width: getItemWidth() - 152 + 'px',
|
||||
height: '192px',
|
||||
margin: '4px',
|
||||
width: getItemWidth() - 144 + 'px',
|
||||
height: 196 + 'px',
|
||||
//background: 'green'
|
||||
}),
|
||||
$infobox = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
width: getItemWidth() - 152 + 'px',
|
||||
height: '192px',
|
||||
width: getItemWidth() - 144 + 'px',
|
||||
height: 196 + 'px',
|
||||
overflow: 'hidden'
|
||||
})
|
||||
.appendTo($info);
|
||||
|
|
@ -119,9 +117,10 @@ Ox.InfoList = function(options, self) {
|
|||
var $element = data.info.element(Ox.extend(data.info.options, {
|
||||
width: getItemWidth() - 152
|
||||
}))
|
||||
.addClass('OxInfoElement')
|
||||
.css(data.info.css);
|
||||
$element.addClass('OxId' + $element.id);
|
||||
.addClass('OxInfoElement');
|
||||
data.info.css && $element.css(data.info.css);
|
||||
data.info.events && $element.bindEvent(data.info.events);
|
||||
$element.addClass('OxId' + $element.id); // fixme: needed?
|
||||
$infobox.append($element);
|
||||
}
|
||||
return $item;
|
||||
|
|
@ -149,6 +148,7 @@ Ox.InfoList = function(options, self) {
|
|||
if (key == 'items') {
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'selected') {
|
||||
Ox.print('SELECTED', value)
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'sort') {
|
||||
that.$element.options(key, value);
|
||||
|
|
@ -157,8 +157,8 @@ Ox.InfoList = function(options, self) {
|
|||
$('.OxInfoElement').each(function() {
|
||||
var $parent = $(this).parent(),
|
||||
id = parseInt(/OxId(.*?)$/.exec(this.className)[1]);
|
||||
$parent.css({width: width - 152});
|
||||
$parent.parent().css({width: width - 152});
|
||||
$parent.css({width: width - 144});
|
||||
$parent.parent().css({width: width - 144});
|
||||
$parent.parent().parent().css({width: width - 8});
|
||||
Ox.print('@@@', this.className, id)
|
||||
Ox.UI.elements[id].options({width: width - 152});
|
||||
|
|
|
|||
|
|
@ -686,6 +686,18 @@ Ox.List = function(options, self) {
|
|||
return self.selected.indexOf(pos) > -1;
|
||||
}
|
||||
|
||||
function isSpecialTarget(e) {
|
||||
var $element = $(e.target),
|
||||
$parent;
|
||||
while (
|
||||
!$element.is('.OxSpecialTarget') && !$element.is('.OxPage')
|
||||
&& ($parent = $element.parent()).length
|
||||
) {
|
||||
$element = $parent;
|
||||
}
|
||||
return $element.is('.OxSpecialTarget');
|
||||
}
|
||||
|
||||
function loadItems() {
|
||||
self.$pages[0].empty();
|
||||
self.$items = [];
|
||||
|
|
@ -885,9 +897,10 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function doubleclick(data) {
|
||||
open();
|
||||
open(isSpecialTarget(data));
|
||||
}
|
||||
|
||||
/*
|
||||
function _mousedown(e) { // fixme: no longer used, remove
|
||||
var pos = findItemPosition(e),
|
||||
clickable, editable,
|
||||
|
|
@ -970,6 +983,7 @@ Ox.List = function(options, self) {
|
|||
selectNone();
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
function moveItem(startPos, stopPos) {
|
||||
var $item = self.$items[startPos],
|
||||
|
|
@ -984,9 +998,10 @@ Ox.List = function(options, self) {
|
|||
self.selected = [stopPos];
|
||||
}
|
||||
|
||||
function open() {
|
||||
function open(isSpecialTarget) {
|
||||
self.options.selected.length && that.triggerEvent('open', {
|
||||
ids: self.options.selected
|
||||
ids: self.options.selected,
|
||||
isSpecialTarget: isSpecialTarget == true
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
out: 0,
|
||||
position: 0,
|
||||
results: [],
|
||||
showPointMarkers: false,
|
||||
subtitles: [],
|
||||
width: 0
|
||||
})
|
||||
|
|
@ -18,7 +19,6 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
.addClass('OxBlockVideoTimeline')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
//background: 'rgba(192, 192, 192, 0.1)'
|
||||
})
|
||||
.bind({
|
||||
mousedown: mousedown,
|
||||
|
|
@ -69,6 +69,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
.appendTo(that.$element);
|
||||
setPositionMarker();
|
||||
|
||||
if (self.options.showPointMarkers) {
|
||||
self.$pointMarker = {};
|
||||
['in', 'out'].forEach(function(point) {
|
||||
var titlecase = Ox.toTitleCase(point);
|
||||
|
|
@ -80,6 +81,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
.appendTo(that.$element);
|
||||
setPointMarker(point);
|
||||
});
|
||||
}
|
||||
|
||||
function addLine(i) {
|
||||
self.$lines[i] = $('<div>')
|
||||
|
|
@ -99,7 +101,8 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$lines[i]);
|
||||
self.$interfaces[i] = $('<div>')
|
||||
.addClass('OxInterface')
|
||||
// OxTarget and OxSpecialTarget are needed for InfoList
|
||||
.addClass('OxInterface OxTarget OxSpecialTarget')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: '2px',
|
||||
|
|
@ -139,6 +142,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
// fixme: check if this pattern is better
|
||||
// than the one used for list selection
|
||||
if (!self.triggered) {
|
||||
Ox.print('trigger............')
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
|
|
@ -236,9 +240,11 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
self.$images.pop();
|
||||
}
|
||||
setPositionMarker();
|
||||
if (self.options.showPointMarkers) {
|
||||
setPointMarker('in');
|
||||
setPointMarker('out');
|
||||
}
|
||||
}
|
||||
|
||||
function updateTimelines() {
|
||||
self.$lines.forEach(function($line, i) {
|
||||
|
|
@ -254,7 +260,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'in' || key == 'out') {
|
||||
setPoint(key);
|
||||
self.options.showPointMarkers && setPoint(key);
|
||||
} else if (key == 'position') {
|
||||
setPositionMarker();
|
||||
} else if (key == 'results') {
|
||||
|
|
|
|||
|
|
@ -241,6 +241,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
showPointMarkers: true,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
width: self.sizes.timeline[1].width
|
||||
|
|
|
|||
Loading…
Reference in a new issue