add InfoList (draft)
This commit is contained in:
parent
f464e82541
commit
676cb72101
5 changed files with 202 additions and 32 deletions
|
@ -995,21 +995,27 @@ Lists
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > div {
|
||||
.OxIconList .OxItem > div,
|
||||
.OxInfoList .OxIcon > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxIcon,
|
||||
.OxIconList .OxItem > .OxText {
|
||||
.OxIconList .OxItem > .OxText,
|
||||
.OxInfoList .OxItem > .OxIcon,
|
||||
.OxInfoList .OxItem > .OxText {
|
||||
//left: -2px;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxIcon {
|
||||
.OxIconList .OxItem > .OxIcon,
|
||||
.OxInfoList .OxItem > .OxIcon {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxIcon > img,
|
||||
.OxIconList .OxItem > .OxIcon > .OxVideoPlayer {
|
||||
.OxIconList .OxItem > .OxIcon > .OxVideoPlayer,
|
||||
.OxInfoList .OxItem > .OxIcon > img,
|
||||
.OxInfoList .OxItem > .OxIcon > .OxVideoPlayer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
@ -1020,11 +1026,13 @@ Lists
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxReflection {
|
||||
.OxIconList .OxItem > .OxReflection,
|
||||
.OxInfoList .OxItem > .OxReflection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxReflection > div {
|
||||
.OxIconList .OxItem > .OxReflection > div,
|
||||
.OxInfoList .OxItem > .OxReflection > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
@ -1032,7 +1040,8 @@ Lists
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxReflection > img {
|
||||
.OxIconList .OxItem > .OxReflection > img,
|
||||
.OxInfoList .OxItem > .OxReflection > img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
@ -1040,10 +1049,12 @@ Lists
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.OxIconList .OxItem > .OxText {
|
||||
.OxIconList .OxItem > .OxText,
|
||||
.OxInfoList .OxItem > .OxText {
|
||||
text-align: center;
|
||||
}
|
||||
.OxIconList .OxItem > .OxText > div {
|
||||
.OxIconList .OxItem > .OxText > div,
|
||||
.OxInfoList .OxItem > .OxText > div {
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
|
|
|
@ -46,6 +46,7 @@ Ox.IconList = function(options, self) {
|
|||
selected: [],
|
||||
size: 128,
|
||||
sort: [],
|
||||
unique: ''
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
|
@ -60,6 +61,7 @@ Ox.IconList = function(options, self) {
|
|||
|
||||
that.$element = Ox.List({
|
||||
centered: self.options.centered,
|
||||
// fixme: change all occurences of construct to render
|
||||
construct: constructItem,
|
||||
draggable: self.options.draggable,
|
||||
id: self.options.id,
|
||||
|
@ -71,24 +73,16 @@ Ox.IconList = function(options, self) {
|
|||
min: self.options.min,
|
||||
orientation: self.options.orientation,
|
||||
selected: self.options.selected,
|
||||
size: self.options.size,
|
||||
sort: self.options.sort,
|
||||
type: 'icon',
|
||||
unique: self.options.unique
|
||||
}, $.extend({}, self)) // pass event handler
|
||||
.addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
|
||||
.click(click)
|
||||
.dblclick(dblclick)
|
||||
.scroll(scroll);
|
||||
.addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation));
|
||||
|
||||
updateKeys();
|
||||
|
||||
function click() {
|
||||
|
||||
}
|
||||
|
||||
function constructItem(data) {
|
||||
var isEmpty = Ox.isEmpty(data);
|
||||
var isEmpty = Ox.isEmpty(data),
|
||||
data = !isEmpty
|
||||
? self.options.item(data, self.options.sort, self.options.size)
|
||||
: {
|
||||
|
@ -99,7 +93,7 @@ Ox.IconList = function(options, self) {
|
|||
self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
|
||||
))
|
||||
};
|
||||
return self.options.itemConstructor($.extend(data, {
|
||||
return self.options.itemConstructor(Ox.extend(data, {
|
||||
borderRadius: self.options.borderRadius,
|
||||
iconHeight: self.iconHeight,
|
||||
iconWidth: self.iconWidth,
|
||||
|
@ -113,14 +107,6 @@ Ox.IconList = function(options, self) {
|
|||
}));
|
||||
}
|
||||
|
||||
function dblclick() {
|
||||
|
||||
}
|
||||
|
||||
function scroll() {
|
||||
|
||||
}
|
||||
|
||||
function updateKeys() {
|
||||
self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
|
||||
that.$element.options({
|
||||
|
@ -130,13 +116,11 @@ Ox.IconList = function(options, self) {
|
|||
|
||||
/*@
|
||||
setOption <f> set key/value
|
||||
(key, value) -> <u> set eky in options to value
|
||||
(key, value) -> <u> set key in options to value
|
||||
@*/
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'items') {
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'paste') {
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'selected') {
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'sort') {
|
||||
|
@ -177,6 +161,7 @@ Ox.IconList = function(options, self) {
|
|||
@*/
|
||||
that.scrollToSelection = function() {
|
||||
that.$element.scrollToSelection();
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
172
source/Ox.UI/js/List/Ox.InfoList.js
Normal file
172
source/Ox.UI/js/List/Ox.InfoList.js
Normal file
|
@ -0,0 +1,172 @@
|
|||
Ox.InfoList = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
borderRadius: 0,
|
||||
defaultRatio: 1,
|
||||
draggable: false,
|
||||
id: '',
|
||||
item: null,
|
||||
items: null,
|
||||
keys: [],
|
||||
max: -1,
|
||||
min: 0,
|
||||
selected: [],
|
||||
size: 192,
|
||||
sort: [],
|
||||
unique: ''
|
||||
})
|
||||
.options(options || {})
|
||||
|
||||
self.iconHeight = Math.round(self.options.size * 2/3);
|
||||
self.iconWidth = self.iconHeight;
|
||||
self.itemHeight = self.options.size;
|
||||
|
||||
that.$element = Ox.List({
|
||||
construct: constructItem,
|
||||
draggable: self.options.draggable,
|
||||
id: self.options.id,
|
||||
itemHeight: self.itemHeight,
|
||||
items: self.options.items,
|
||||
itemWidth: getItemWidth(),
|
||||
keys: self.options.keys,
|
||||
max: self.options.max,
|
||||
min: self.options.min,
|
||||
orientation: 'vertical',
|
||||
pageLength: 10,
|
||||
selected: self.options.selected,
|
||||
sort: self.options.sort,
|
||||
type: 'info',
|
||||
unique: self.options.unique
|
||||
})
|
||||
.addClass('OxInfoList');
|
||||
|
||||
updateKeys();
|
||||
|
||||
function constructItem(data) {
|
||||
var isEmpty = Ox.isEmpty(data),
|
||||
data = !isEmpty
|
||||
? self.options.item(data, self.options.sort, self.options.size)
|
||||
: {
|
||||
icon: {
|
||||
width: Math.round(self.options.size * (
|
||||
self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio
|
||||
)),
|
||||
height: Math.round(self.options.size / (
|
||||
self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
|
||||
))
|
||||
},
|
||||
info: {}
|
||||
};
|
||||
Ox.print('DATA -=-------', data)
|
||||
|
||||
var $icon = Ox.Element()
|
||||
.css({
|
||||
float: 'left',
|
||||
width: '128px',
|
||||
height: '192px',
|
||||
margin: '4px',
|
||||
background: 'rgba(255, 255, 255, 0.1)'
|
||||
})
|
||||
.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,
|
||||
itemHeight: self.itemHeight,
|
||||
itemWidth: 128,
|
||||
}))
|
||||
.addClass('OxIcon')
|
||||
.css({
|
||||
position: 'absolute'
|
||||
})
|
||||
),
|
||||
$info = Ox.Element()
|
||||
.css({
|
||||
float: 'left',
|
||||
width: getItemWidth() - 152 + 'px',
|
||||
height: '192px',
|
||||
margin: '4px'
|
||||
}),
|
||||
$infobox = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
width: getItemWidth() - 152 + 'px',
|
||||
height: '192px',
|
||||
overflow: 'hidden'
|
||||
})
|
||||
.appendTo($info);
|
||||
$item = Ox.Element()
|
||||
.css({
|
||||
width: getItemWidth() - 8 + 'px',
|
||||
height: 192 + 'px',
|
||||
margin: '4px'
|
||||
})
|
||||
.append($icon)
|
||||
.append($info);
|
||||
if (!isEmpty) {
|
||||
var $element = data.info.element(Ox.extend(data.info.options, {
|
||||
width: getItemWidth() - 152
|
||||
}))
|
||||
.addClass('OxInfoElement')
|
||||
.css(data.info.css);
|
||||
$element.addClass('OxId' + $element.id);
|
||||
$infobox.append($element);
|
||||
}
|
||||
return $item;
|
||||
}
|
||||
|
||||
|
||||
function getItemWidth(cached) {
|
||||
if (!cached) {
|
||||
self.cachedWidth = that.$element.width() - Ox.UI.SCROLLBAR_SIZE;
|
||||
} else if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) {
|
||||
self.cachedWidth = that.$element.width() - Ox.UI.SCROLLBAR_SIZE;
|
||||
self.cachedWidthTime = +new Date();
|
||||
}
|
||||
return self.cachedWidth;
|
||||
}
|
||||
|
||||
function updateKeys() {
|
||||
self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
|
||||
that.$element.options({
|
||||
keys: self.options.keys
|
||||
});
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'items') {
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'selected') {
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'sort') {
|
||||
that.$element.options(key, value);
|
||||
} else if (key == 'width') {
|
||||
var width = getItemWidth();
|
||||
$('.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.parent().parent().css({width: width - 8});
|
||||
Ox.print('@@@', this.className, id)
|
||||
Ox.print('@@@', this.className, id)
|
||||
Ox.print('@@@', this.className, id)
|
||||
Ox.print('@@@', this.className, id)
|
||||
Ox.print('@@@', this.className, id)
|
||||
Ox.UI.elements[id].options({width: width - 152});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
that.closePreview = function() {
|
||||
that.$element.closePreview();
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
|
@ -182,6 +182,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
posterFrame: self.options.posterFrame,
|
||||
showMarkers: true,
|
||||
showMilliseconds: 3,
|
||||
sizeIsLarge: self.options.videoSize == 'large',
|
||||
subtitles: self.options.subtitles,
|
||||
type: type,
|
||||
video: type == 'play' ? self.options.video : self.options.getFrameURL,
|
||||
|
|
|
@ -233,7 +233,8 @@ Lists
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxThemeModern .OxIconList .OxItem > img.OxLoading {
|
||||
.OxThemeModern .OxIconList .OxItem > img.OxLoading,
|
||||
.OxThemeModern .OxInfoList .OxIcon > img.OxLoading {
|
||||
border-color: rgb(48, 48, 48);
|
||||
background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
|
||||
background: -webkit-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
|
||||
|
|
Loading…
Reference in a new issue