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

// vim: et:ts=4:sw=4:sts=4:ft=js

/*@
Ox.IconItem <f:Ox.Element> IconItem Object
    () ->              <f> IconItem Object
    (options) ->       <f> IconItem Object
    (options, self) -> <f> IconItem Object
    options <o> Options object
        borderRadius <n|0> border radius for icon images
        iconHeight <n|128> icon height
        iconWidth <n|128> icon width
        imageHeight <n|128> icon image height
        imageWidth <n|128> icon image width
        id <s> element id
        info <s> icon info
        size <n|128> icon size
        title <s> title
        url <s> icon url
    self    <o> shared private variable
@*/

Ox.IconItem = function(options, self) {

    //Ox.print('IconItem', options, self)

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                borderRadius: 0,
                iconHeight: 128,
                iconWidth: 128,
                imageHeight: 128,
                imageWidth: 128,
                isInfoList: false,
                itemHeight: 192,
                itemWidth: 128,
                id: '',
                info: '',
                title: '',
                url: ''
            })
            .options(options || {});

    Ox.extend(self, {
        fontSize: self.options.itemWidth == 64 ? 6 : 9,
        infoIsObject: Ox.isObject(self.options.info),
        lineLength: self.options.itemWidth == 64 ? 15 : 23,
        lines: self.options.itemWidth == 64 ? 4 : 5,
        url: Ox.UI.PATH + 'png/transparent.png',
    });

    self.title = formatText(self.options.title, self.lines - 1 - self.infoIsObject, self.lineLength);
    if (!self.infoIsObject) {
        self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
    } else {
        self.title = $('<div>').css({fontSize: self.fontSize + 'px'}).html(self.title);
        self.info = $('<div>').append(
            self.options.info.css({
                width: Math.round(self.options.itemWidth / 2) + 'px',
                padding: 0,
                margin: '1px auto 1px auto',
                fontSize: self.fontSize + 'px',
                textShadow: 'none'
            })
        );
    }

    that.css({
        // 2 * 2 px margin (.css), 2 * 2 px border (here)
        width: self.options.itemWidth + 4 + 'px',
        height: self.options.itemHeight + + 4 + 'px'
    });
    that.$icon = $('<div>')
        .addClass('OxIcon')
        .css({
            top: self.options._isInfoList
                ? 0 : self.options.iconWidth == 64 ? -64 : -124,
            width: (self.options.iconWidth + 4) + 'px',
            height: (self.options.iconHeight + 4) + 'px'
        });
    that.$iconImage = $('<img>')
        .addClass('OxLoading OxTarget')
        .attr({
            src: self.url
        })
        .css({
            width: self.options.imageWidth + 'px',
            height: self.options.imageHeight + 'px',
            borderRadius: self.options.borderRadius + 4 + 'px'
        })
        .mousedown(mousedown)
        .mouseenter(mouseenter)
        .mouseleave(mouseleave);
    self.options.url && that.$iconImage.one('load', load);
    that.$textBox = $('<div>')
        .addClass('OxText')
        .css({
            top: self.options._isInfoList
                ? self.options.iconHeight
                : self.options.iconHeight - self.options.itemWidth / 2 + 'px',
            width: self.options.itemWidth + 4 + 'px',
            height: (self.options.itemWidth == 64 ? 30 : 58) + 'px'
        });
    that.$text = $('<div>')
        .addClass('OxTarget')
        .css({
            fontSize: self.fontSize + 'px'
        })
        .mouseenter(mouseenter)
        .mouseleave(mouseleave);
    if (!self.infoIsObject) {
        that.$text.html(self.title + '<br/><span class="OxInfo">' + self.info + '</span>')
    } else {
        that.$text.append(self.title).append(self.info);
    }
    that.$reflection = $('<div>')
        .addClass('OxReflection')
        .css({
            top: self.options.iconHeight + 'px',
            width: self.options.itemWidth + 4 + 'px',
            height: self.options.itemHeight - self.options.iconHeight + 'px'
        });
    that.$reflectionImage = $('<img>')
        .addClass('OxLoading')
        .attr({
            src: self.url
        })
        .css({
            width: self.options.imageWidth + 'px',
            height: self.options.imageHeight + 'px',
            // firefox is 1px off when centering images with odd width and scaleY(-1)
            paddingLeft: ($.browser.mozilla && self.options.imageWidth % 2 ? 1 : 0) + 'px',
            borderRadius: self.options.borderRadius + 'px'
        });
    that.$gradient = $('<div>')
        .css({
            //top: (-self.options.size / 2) + 'px',
            width: self.options.itemWidth + 'px',
            height: self.options.itemWidth / 2 + 'px'
        });

    that.append(
        that.$reflection.append(
            that.$reflectionImage
        ).append(
            that.$gradient
        )
    ).append(
        that.$textBox.append(
            that.$text
        )
    ).append(
        that.$icon.append(
            that.$iconImage
        )
    );

    function formatText(text, maxLines, maxLength) {
        text = Ox.isArray(text) ? text.join(', ') : text;
        var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>');
        return Ox.map(lines, function(line, i) {
            if (i < maxLines - 1) {
                return line;
            } else if (i == maxLines - 1) {
                return lines.length == maxLines ? line : Ox.truncate(lines.map(function(line, i) {
                    return i < maxLines - 1 ? null : line;
                }).join(' '), maxLength, '...', 'center');
            } else {
                return null;
            }
        }).join('<br/>');
    }

    function load() {
        that.$iconImage.attr({
                src: self.options.url
            })
            .one('load', function() {
                that.$iconImage.removeClass('OxLoading');
                that.$reflectionImage
                    .attr({
                        src: self.options.url
                    })
                    .removeClass('OxLoading');
            });
    }

    function mousedown(e) {
        // fixme: preventDefault keeps image from being draggable in safari - but also keeps the list from getting focus
        // e.preventDefault();
    }

    function mouseenter() {
        that.addClass('OxHover');
    }

    function mouseleave() {
        that.removeClass('OxHover');
    }

    return that;

};