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

// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.IconList <f:Ox.Element> IconList Object
    () ->              <f> IconList Object
    (options) ->       <f> IconList Object
    (options, self) -> <f> IconList Object
    options <o> Options object
        centerSelection <b|false> scroll list so selection is always centered
        draggable <b|true> can be dragged
        id <s|''> element id
        item <f|null> called with data, sort, size,
                      extends data with information needed for constructor
        itemConstructor <f|Ox.IconItem> contructor used to create item
        items <f|null> items array or callback function
        keys <a|[]> available item keys
        max <n|-1> maximum selected selected items
        min <n|0> minimum of selcted items
        orientation <s|both> list orientation
        selected <a|[]> array of selected items
        size <n|128> list size
        sort <a|[]> sort keys
    self    <o> shared private variable
@*/

Ox.IconList = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                centerSelection: false,
                draggable: true,
                id: '',
                item: null,
                itemConstructor: Ox.IconItem,
                items: null,
                keys: [],
                max: -1,
                min: 0,
                orientation: 'both',
                selected: [],
                size: 128,
                sort: [],
            })
            .options(options || {});

    $.extend(self, {
        itemHeight: self.options.size * 1.5,
        itemWidth: self.options.size
    });

    that.$element = Ox.List({
            centered: self.options.centered,
            construct: constructItem,
            draggable: self.options.draggable,
            id: self.options.id,
            itemHeight: self.itemHeight,
            items: self.options.items,
            itemWidth: self.itemWidth,
            keys: self.options.keys,
            max: self.options.max,
            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);

    updateKeys();

    function click() {
        
    }

    function constructItem(data) {
        var data = !$.isEmptyObject(data) ? 
                self.options.item(data, self.options.sort, self.options.size) :
                {height: 8, width: 5},
            ratio = data.width / data.height;
        return self.options.itemConstructor($.extend(data, {
            height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
            size: self.options.size,
            width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
        }));
    }

    function dblclick() {
        
    }

    function scroll() {
        
    }

    function updateKeys() {
        self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
        that.$element.options({
            keys: self.options.keys
        });
    }

    /*@
    setOption <f> set key/value
        (key, value) -> <u> set eky 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);
        }
    };

    /*@
    closePreview <f> close preview
        () -> <u> close
    @*/
    that.closePreview = function() {
        that.$element.closePreview();
    };

    /*@
    paste <f> paste to list
        (data) -> <f> paste data, returns IconList
    @*/
    that.paste = function(data) {
        that.$element.paste(data);
        return that;
    };

    /*@
    reloadList <f> reload list
        () -> <u> reload iconlist
    @*/
    that.reloadList = function() {
        that.$element.reloadList();
        return that;
    };

    /*@
    scrollToSelection <f> set key/value
        () -> <u> scroll list ot selection
    @*/
    that.scrollToSelection = function() {
        that.$element.scrollToSelection();
    };

    /*@
    size <f> set key/value
        () -> <n> get size of list
    @*/
    that.size = function() {
        that.$element.size();
    };

    /*@
    sortList <f> sort list
        (key, operator) -> <u> sort list by key with operator
        operator <s> can be + / -
    @*/
    that.sortList = function(key, operator) {
        self.options.sort = [{
            key: key,
            operator: operator
        }];
        updateKeys();
        that.$element.sortList(key, operator);
    };

    /*@
    value <f> get/set value of item in list
        (id) -> <o> get all data for item
        (id, key) -> <s> get value of key of item with id
        (id, key, value) -> <f> set value, returns IconList
    @*/
    that.value = function(id, key, value) {
        // fixme: make this accept id, {k: v, ...}
        if (arguments.length == 1) {
            return that.$element.value(id);
        } else if (arguments.length == 2) {
            return that.$element.value(id, key);
        } else {
            that.$element.value(id, key, value);
            return that;
        }
    };

    return that;

};