From 676cb721014724bae6c7c91c34fc06c416a2b988 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 19 Aug 2011 06:41:48 +0000 Subject: [PATCH] add InfoList (draft) --- source/Ox.UI/css/Ox.UI.css | 29 ++-- source/Ox.UI/js/List/Ox.IconList.js | 29 +--- source/Ox.UI/js/List/Ox.InfoList.js | 172 ++++++++++++++++++++++ source/Ox.UI/js/Video/Ox.VideoEditor.js | 1 + source/Ox.UI/themes/modern/css/modern.css | 3 +- 5 files changed, 202 insertions(+), 32 deletions(-) create mode 100644 source/Ox.UI/js/List/Ox.InfoList.js diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 34393fa9..5a0eb7aa 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -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; diff --git a/source/Ox.UI/js/List/Ox.IconList.js b/source/Ox.UI/js/List/Ox.IconList.js index 6d990604..c2393d61 100644 --- a/source/Ox.UI/js/List/Ox.IconList.js +++ b/source/Ox.UI/js/List/Ox.IconList.js @@ -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 set key/value - (key, value) -> set eky in options to value + (key, value) -> 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; }; /*@ diff --git a/source/Ox.UI/js/List/Ox.InfoList.js b/source/Ox.UI/js/List/Ox.InfoList.js new file mode 100644 index 00000000..34261173 --- /dev/null +++ b/source/Ox.UI/js/List/Ox.InfoList.js @@ -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; + +}; \ No newline at end of file diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 39c85fd6..fa1d9794 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -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, diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 05689b77..1dc5ac08 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -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));