path: root/js/menu.js

/**
* ownCloud - News app
*
* @author Bernhard Posselt
* Copyright (c) 2012 - Bernhard Posselt <nukeawhale@gmail.com>
*
* This file is licensed under the Affero General Public License version 3 or later.
* See the COPYING-README file
*
*/

/**
 * This file includes objects for creating and accessing the feed menu
 * BEWARE: Recursion ahead!
 */

/**
 * HOWTO
 *

We create a new instance of the menu. The first argument is its class. 

    var menu = new News.Menu('feedlist');


To fill it with items we use JSON. Hint: If no icons are given, default icons 
are being used. A typical JSON array would look like this:

    var menuStructure = [
        {
            id: 1,
            title: 'New Articles',
            type: News.MenuNodeType.New,                     
            children: [],
            unreadCount: 4,
        },
        {
            id: 1,
            title: 'Starred',
            type: News.MenuNodeType.Starred,                     
            children: [],
            unreadCount: 1,
        },
        {
            id: 1,
            title: 'hi',
            type: News.MenuNodeType.Folder,        
            unreadCount: 7,
            children: [
                {
                    id: 2,
                    title: 'hi too',
                    type: News.MenuNodeType.Feed,
                    unreadCount: 4,
                    children: [], 
                    icon: '/test/test.png'
                },
                {
                    id: 2,
                    title: 'hi 3',
                    type: News.MenuNodeType.Feed,    
                    children: [],                 
                    unreadCount: 3,
                },
            ]
        }, 
        {
            id: 4,
            title: 'hi 4',
            type: News.MenuNodeType.Feed,                     
            children: [],
            unreadCount: 1,
        },
        {
            id: 114,
            title: 'hi 3',
            type: News.MenuNodeType.Folder,                     
            children: [],
            unreadCount: 1,
        },
    ];

    menu.populateFromJSON(menuStructure, menu);


Now that the menu is populated, we can render, append it into the place we'd
like to and select the current selected item

    $('#leftcontent').append(menu.render());
    var selectedType = News.MenuNodeType.Feed;
    var selectedId = 3;
    menu.setSelected(selectedType, selectedId);


Updating nodes (you dont have to set all values in data):

    var nodeData = {
        icon: 'some/icon.png',
        unreadCount: 4,
        title: 'The verge'
    }
    var nodeType = News.MenuNodeType.Feed;
    var nodeId = 2;
    menu.updateNode(nodeType, nodeId, nodeData);


Deleting nodes:

    var id = 2;
    var removeDom = true;
    var type = News.MenuNodeType.Feed;
    var removedObject = menu.removeNode(type, id, removeDom);


Creating nodes:
    
    var nodeType = News.MenuNodeType.Feed;
    var nodeId = 6;
    var nodeData = {
        icon: 'some/icon.png',
        unreadCount: 4,
        title: 'The verge'
    }
    var node = new News.MenuNode(nodeType, nodeId, nodeData);

    var parentType = News.MenuNodeType.Folder;
    var parentId = 0;
    menu.createNode(parentType, parentId, node);


If you want to show all feeds, also feeds which contain only read items, use

    menu.setShowAll(true);

If you want to hide feeds and folders with only read items, use

    menu.setShowAll(false);

The default value is false. If you want to toggle this behaviour, theres a shortcut

    menu.toggleShowAll();


To hide all articles with read feeds, the setShowAll has to be set to false. The 
hiding is only triggered after a new feed/folder was being loaded. If you wish to
trigger this manually, use:

    menu.triggerHideRead();

*/

var News = News || {};
var t = t || function(app, string){ return string; }; // mock translation for local testing

(function(){

    /*##########################################################################
     * MenuNodeType
     *#########################################################################/
    /**
     * Enumeration for menu items
     */
    MenuNodeType = {
        'Feed': 0,
        'Folder': 1,
        'Starred': 2,
        'New': 3
    }

    // TODO: set paths for icons
    MenuNodeTypeDefaultIcon = {
        'Feed': '',
        'Folder': '',
        'Starred': '',
        'New': ''
    }

    News.MenuNodeType = MenuNodeType; 


    /*##########################################################################
     * Menu
     *#########################################################################/
    /**
     * This is the basic menu used to construct and maintain the menu
     * @param cls the css class of the element
     */
    Menu = function(cls){
        this._class = cls;
        this._children = [];
        this._parent = false;
        this._id = 0;
        this._$htmlElement = $('<ul>');
        this._$htmlElement.attr('data-id', this._id);
        this._bindDroppable(this._$htmlElement);
        this._selectedNode = undefined;
        this._showAll = false;
    }

    News.Menu = Menu;

    /**
     * Attaches a MenuNode to a node and renders it in the dom
     * @param parentType the type of the parent node
     * @param parentId the id of the parent node, if 0 the top menu is used
     * @param node the MenuNode that should be created
     */
    Menu.prototype.createNode = function(parentType, parentId, node){
        var parentNode = this._findNode(parentType, parentId);
        parentNode._addChildNode(node);
        parentNode._$htmlElement.append(node.render());
    }

    /**
     * Recursively remove all occurences of the node from the dom and
     * from the datastructure
     * @param type the type of the node (MenuNodeType)
     * @param id the id of the node
     * @param removeDom if true, also remove the dom
     * @return the childelemnt or undefined if not found
     */
    Menu.prototype.removeNode = function(type, id, removeDom){
        for(var i=0; i<this._children.length; i++){
            var child = this._children[i];
            if(child._type === type && child._id === id){
                var nodeIndex = i;
                // if we have children, we need to remove their 
                // html from the dom first then we need to 
                if(removeDom){
                    child._$htmlElement.remove();
                }
                this._children.splice(nodeIndex, 1);
                return child;
            } else {
                var child = child.removeNode(type, id);
                if(child !== undefined){
                    return child;
                }
            }
        }
        return undefined;
    }

    /**
     * Updates a node in the menu
     * @param type the type of the node (MenuNodeType)
     * @param id the id of the node
     * @param data the data array like {title: 'title', unreadCount: 1, icon: 'path/icon.png'}
     */
    Menu.prototype.updateNode = function(type, id, data){
        var node = this._findNode(type, id);
        node.update(data);
    }

    /**
     * Creates the menu from a json structure
     * @param json the json looks like this
        [
            {
                id: 1,,
                title: 'hi',
                type: MenuNodeType.Folder,
                icon: 'url/to/jpg.png',        
                children: [
                    {
                        id: 1,
                        title: 'hi too',
                        type: MenuNodeType.Feed,  
                        children: []                   
                    },
                    {
                        ...
                    }
                ]
            }, 
            {
                ...
            }
        ]
     * @param attachToNode used for recursion. to set the current
     * element to the node, pass the current structure
     */
    Menu.prototype.populateFromJSON = function(json, attachToNode){
        for(var i=0; i<json.length; i++){
            var nodeInfo = json[i];
            var nodeData = {
                title: nodeInfo.title,
                icon: nodeInfo.icon,
                unreadCount: nodeInfo.unreadCount
            };
            var node = new MenuNode(nodeInfo.type, nodeInfo.id, nodeData);
            attachToNode._addChildNode(node);
            this.populateFromJSON(nodeInfo.