oxjs/source/Ox.UI/js/List/Ox.InfoList.js

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;

};