0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update infolist

Browse source
This commit is contained in:
rlx 2011-10-17 10:23:16 +00:00
parent 57ed9f9680
commit 5d669f42e3
4 changed files with 60 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
source/Ox.UI/js/List/Ox.InfoList.js
View file

@ -19,8 +19,7 @@ Ox.InfoList = function(options, self) {
}) })
.options(options || {}) .options(options || {})
self.iconHeight = Math.round(self.options.size * 2/3); self.iconSize = Math.round(self.options.size * 2/3);
self.iconWidth = self.iconHeight;
self.itemHeight = self.options.size; self.itemHeight = self.options.size;
that.$element = Ox.List({ that.$element = Ox.List({
@ -55,10 +54,10 @@ Ox.InfoList = function(options, self) {
? self.options.item(data, self.options.sort, self.options.size) ? self.options.item(data, self.options.sort, self.options.size)
: { : {
icon: { icon: {
width: Math.round(self.options.size * ( width: Math.round(self.iconSize * (
self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio 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 self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
)) ))
}, },
@ -77,13 +76,13 @@ Ox.InfoList = function(options, self) {
.append( .append(
Ox.IconItem(Ox.extend(data.icon, { Ox.IconItem(Ox.extend(data.icon, {
borderRadius: self.options.borderRadius, borderRadius: self.options.borderRadius,
iconHeight: 128, //self.iconHeight, iconHeight: self.iconSize,
iconWidth: 128, //self.iconWidth, iconWidth: self.iconSize,
imageHeight: data.height, imageHeight: data.icon.height,
imageWidth: data.width, imageWidth: data.icon.width,
isInfoList: true, isInfoList: true,
itemHeight: self.itemHeight, itemHeight: self.itemHeight,
itemWidth: 128, itemWidth: 128
})) }))
.addClass('OxInfoIcon') .addClass('OxInfoIcon')
.css({ .css({
@ -93,16 +92,15 @@ Ox.InfoList = function(options, self) {
$info = Ox.Element() $info = Ox.Element()
.css({ .css({
float: 'left', float: 'left',
width: getItemWidth() - 152 + 'px', width: getItemWidth() - 144 + 'px',
height: '192px', height: 196 + 'px',
margin: '4px',
//background: 'green' //background: 'green'
}), }),
$infobox = Ox.Element() $infobox = Ox.Element()
.css({ .css({
position: 'absolute', position: 'absolute',
width: getItemWidth() - 152 + 'px', width: getItemWidth() - 144 + 'px',
height: '192px', height: 196 + 'px',
overflow: 'hidden' overflow: 'hidden'
}) })
.appendTo($info); .appendTo($info);
@ -119,9 +117,10 @@ Ox.InfoList = function(options, self) {
var $element = data.info.element(Ox.extend(data.info.options, { var $element = data.info.element(Ox.extend(data.info.options, {
width: getItemWidth() - 152 width: getItemWidth() - 152
})) }))
.addClass('OxInfoElement') .addClass('OxInfoElement');
.css(data.info.css); data.info.css && $element.css(data.info.css);
$element.addClass('OxId' + $element.id); data.info.events && $element.bindEvent(data.info.events);
$element.addClass('OxId' + $element.id); // fixme: needed?
$infobox.append($element); $infobox.append($element);
} }
return $item; return $item;
@ -149,6 +148,7 @@ Ox.InfoList = function(options, self) {
if (key == 'items') { if (key == 'items') {
that.$element.options(key, value); that.$element.options(key, value);
} else if (key == 'selected') { } else if (key == 'selected') {
Ox.print('SELECTED', value)
that.$element.options(key, value); that.$element.options(key, value);
} else if (key == 'sort') { } else if (key == 'sort') {
that.$element.options(key, value); that.$element.options(key, value);
@ -157,8 +157,8 @@ Ox.InfoList = function(options, self) {
$('.OxInfoElement').each(function() { $('.OxInfoElement').each(function() {
var $parent = $(this).parent(), var $parent = $(this).parent(),
id = parseInt(/OxId(.*?)$/.exec(this.className)[1]); id = parseInt(/OxId(.*?)$/.exec(this.className)[1]);
$parent.css({width: width - 152}); $parent.css({width: width - 144});
$parent.parent().css({width: width - 152}); $parent.parent().css({width: width - 144});
$parent.parent().parent().css({width: width - 8}); $parent.parent().parent().css({width: width - 8});
Ox.print('@@@', this.className, id) Ox.print('@@@', this.className, id)
Ox.UI.elements[id].options({width: width - 152}); Ox.UI.elements[id].options({width: width - 152});

21
source/Ox.UI/js/List/Ox.List.js
View file

@ -686,6 +686,18 @@ Ox.List = function(options, self) {
return self.selected.indexOf(pos) > -1; 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() { function loadItems() {
self.$pages[0].empty(); self.$pages[0].empty();
self.$items = []; self.$items = [];
@ -885,9 +897,10 @@ Ox.List = function(options, self) {
} }
function doubleclick(data) { function doubleclick(data) {
open(); open(isSpecialTarget(data));
} }
/*
function _mousedown(e) { // fixme: no longer used, remove function _mousedown(e) { // fixme: no longer used, remove
var pos = findItemPosition(e), var pos = findItemPosition(e),
clickable, editable, clickable, editable,
@ -970,6 +983,7 @@ Ox.List = function(options, self) {
selectNone(); selectNone();
} }
} }
*/
function moveItem(startPos, stopPos) { function moveItem(startPos, stopPos) {
var $item = self.$items[startPos], var $item = self.$items[startPos],
@ -984,9 +998,10 @@ Ox.List = function(options, self) {
self.selected = [stopPos]; self.selected = [stopPos];
} }
function open() { function open(isSpecialTarget) {
self.options.selected.length && that.triggerEvent('open', { self.options.selected.length && that.triggerEvent('open', {
ids: self.options.selected ids: self.options.selected,
isSpecialTarget: isSpecialTarget == true
}); });
} }

38
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -11,6 +11,7 @@ Ox.BlockVideoTimeline = function(options, self) {
out: 0, out: 0,
position: 0, position: 0,
results: [], results: [],
showPointMarkers: false,
subtitles: [], subtitles: [],
width: 0 width: 0
}) })
@ -18,7 +19,6 @@ Ox.BlockVideoTimeline = function(options, self) {
.addClass('OxBlockVideoTimeline') .addClass('OxBlockVideoTimeline')
.css({ .css({
position: 'absolute', position: 'absolute',
//background: 'rgba(192, 192, 192, 0.1)'
}) })
.bind({ .bind({
mousedown: mousedown, mousedown: mousedown,
@ -69,17 +69,19 @@ Ox.BlockVideoTimeline = function(options, self) {
.appendTo(that.$element); .appendTo(that.$element);
setPositionMarker(); setPositionMarker();
self.$pointMarker = {}; if (self.options.showPointMarkers) {
['in', 'out'].forEach(function(point) { self.$pointMarker = {};
var titlecase = Ox.toTitleCase(point); ['in', 'out'].forEach(function(point) {
self.$pointMarker[point] = $('<img>') var titlecase = Ox.toTitleCase(point);
.addClass('OxMarkerPoint' + titlecase) self.$pointMarker[point] = $('<img>')
.attr({ .addClass('OxMarkerPoint' + titlecase)
src: Ox.UI.getImageURL('marker' + titlecase) .attr({
}) src: Ox.UI.getImageURL('marker' + titlecase)
.appendTo(that.$element); })
setPointMarker(point); .appendTo(that.$element);
}); setPointMarker(point);
});
}
function addLine(i) { function addLine(i) {
self.$lines[i] = $('<div>') self.$lines[i] = $('<div>')
@ -99,7 +101,8 @@ Ox.BlockVideoTimeline = function(options, self) {
}) })
.appendTo(self.$lines[i]); .appendTo(self.$lines[i]);
self.$interfaces[i] = $('<div>') self.$interfaces[i] = $('<div>')
.addClass('OxInterface') // OxTarget and OxSpecialTarget are needed for InfoList
.addClass('OxInterface OxTarget OxSpecialTarget')
.css({ .css({
position: 'absolute', position: 'absolute',
top: '2px', top: '2px',
@ -139,6 +142,7 @@ Ox.BlockVideoTimeline = function(options, self) {
// fixme: check if this pattern is better // fixme: check if this pattern is better
// than the one used for list selection // than the one used for list selection
if (!self.triggered) { if (!self.triggered) {
Ox.print('trigger............')
that.triggerEvent('position', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
}); });
@ -236,8 +240,10 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$images.pop(); self.$images.pop();
} }
setPositionMarker(); setPositionMarker();
setPointMarker('in'); if (self.options.showPointMarkers) {
setPointMarker('out'); setPointMarker('in');
setPointMarker('out');
}
} }
function updateTimelines() { function updateTimelines() {
@ -254,7 +260,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'in' || key == 'out') { if (key == 'in' || key == 'out') {
setPoint(key); self.options.showPointMarkers && setPoint(key);
} else if (key == 'position') { } else if (key == 'position') {
setPositionMarker(); setPositionMarker();
} else if (key == 'results') { } else if (key == 'results') {

1
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -241,6 +241,7 @@ Ox.VideoEditor = function(options, self) {
'in': self.options['in'], 'in': self.options['in'],
out: self.options.out, out: self.options.out,
position: self.options.position, position: self.options.position,
showPointMarkers: true,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
videoId: self.options.videoId, videoId: self.options.videoId,
width: self.sizes.timeline[1].width width: self.sizes.timeline[1].width