/web/public/js/app/app.js

/*! Drop&Share - v0.1.0
* 
* Copyright (c) 2013 Karmarama; Licensed MIT */

ShareApp = new Backbone.Marionette.Application();

ShareApp.Models = {};
ShareApp.Collections = {};
ShareApp.Views = {
    User: {},
    Session: {},
    Comment: {},
    Wish: {}
};
ShareApp.Routers = {};

ShareApp.baseUrl = 'http://localhost:2403';

$(function() {
    // jQuery
    ShareApp.addInitializer(function(options) {
        $.ajaxSetup({
            xhrFields: {
               withCredentials: true
            },
            crossDomain: true
        });
    });


    // Initialize regions
    ShareApp.addInitializer(function(options) {
        ShareApp.addRegions({
            mainRegion: '#wish-list-region',
            menuRegion: '#nav-region',
            headerRegion: '#header-region',
            previewRegion: '#preview-region',
            profileRegion: '#profile-region'
        });
    });


    // Router
    ShareApp.addInitializer(function(options) {
        ShareApp.router = new ShareApp.Routers.Default();
    });


    // History
    ShareApp.on('initialize:after', function(options) {
        Backbone.history.start({ pushState: false });
    });

    var options = {
        baseUrl: 'http://cwapi.dev.kdigital.net'
    };

    ShareApp.start(options);
});

ShareApp.Models.Item = Backbone.Model.extend({
    defaults: {
        id: '',
        title: '',
        type: '',
        description: '',
        thumbnailUrl: '',
        link: '',
        html: '',
        createDate: '',
        userId: '',
        tags: [],
        notes: ''
    },
    urlRoot: ShareApp.baseUrl + '/items'
});

ShareApp.Collections.Items = Backbone.Collection.extend({
    model: ShareApp.Models.Item,
    url: ShareApp.baseUrl + '/items'
});

ShareApp.Views.Header = Backbone.Marionette.ItemView.extend({
    template: '#header-template',
    tagName: 'div',

    events: {
        'submit #form-header': 'lookup',
        'drop #url': 'handleData'
    },

    handleData: function(event) {
        event.stopPropagation();
        event.preventDefault();

        var data = event.originalEvent.dataTransfer.getData('Text');

        this.$el.find('#url').val(data);
        this.$el.find('#form-header').trigger('submit');
    },

    lookup: function(event) {
        var self = this,
            url = this.$el.find('#url').val();

        $.embedly.extract(url, {
            key: '2315415251b04317a1eed7f12b166f4d'
        }).progress(function(data){
            // self.createItem(data);
            self.$el.find('#url').val('');

            // var previewModel = new Backbone.Model(data);
            var previewModel = new Backbone.Model({
                title: data.title,
                type: data.type,
                description: data.description,
                // thumbnailUrl: data.images[0].url,
                link: data.url,
                html: data.media.html,
                userId: data.userId,
                tags: ''
            });

            var previewView = new ShareApp.Views.Preview({
                model: previewModel,
                data: data
            });

            // ShareApp.headerRegion.close();
            self.$el.slideUp(300, function() {
                ShareApp.headerRegion.close();
            });

            ShareApp.previewRegion.show(previewView);
        });

        event.preventDefault();
    },

    createItem: function(data) {
        var self = this;

        var item = {
            title: data.title,
            type: data.type,
            description: data.description,
            thumbnailUrl: data.thumbnailUrl,
            link: data.url,
            userId: data.userId,
            tags: ''
        };

        var promise = this.collection.create(item);

        // promise.done(function(response){
        //     self.$el.find('#url').val('');
        //     console.log(self);
        // });

        // promise.fail(function(){

        // });
    }
});

ShareApp.Views.Item = Backbone.Marionette.ItemView.extend({
    template: '#popular-wish-template',
    tagName: 'div',
    className: 'item'
});

ShareApp.Views.Items = Backbone.Marionette.CollectionView.extend({
    id: 'most-popular-wrapper',
    itemView: ShareApp.Views.Item
});

ShareApp.Views.Menu = Backbone.Marionette.ItemView.extend({
    template: "#menu-template",

    initialize: function() {
        if ( this.collection ) {
            this.listenTo(this.collection, 'add', this.render);
            this.listenTo(this.collection, 'remove', this.render);
            this.listenTo(this.collection, 'reset', this.render);
            // this.collection.fetch({
            //     reset: true
            // });
        }


        this.listenTo(ShareApp.router, 'route', function(route){
            this.setActive(
                this._normalizeRoute(route)
            );
        });
    },


    setActive: function(url) {
        var $li = this.$el.find('a[href=#' + url + ']').closest('li');

        // TODO: fix this
        if ( $li.parents('.subtabs').length ) {
            this.$el.find('ul.tabs li').eq(0).addClass('active');
        }

        $li.addClass('active');
        $li.siblings().removeClass('active');
    },


    hideSubmenu: function() {
        this.submenu = false;
        this.$el.find('.subtabs').hide();
    },


    showSubmenu: function() {
        this.submenu = true;
        this.$el.find('.subtabs').show();
    },


    onRender: function() {
        this.setActive(
            this._normalizeRoute(Backbone.history.getFragment())
        );

        if (this.submenu === true) {
            this.$el.find('.subtabs').show();
        } else {
            this.$el.find('.subtabs').hide();
        }
    },



    serializeData: function(){
        var data = {};

        if (this.model) {
            data = this.model.toJSON();
        } else if (this.collection) {
            data = { items: this.collection };
        }

        return data;
    },



    _normalizeRoute: function(route) {
        return route.replace(/([a-z])([A-Z])/, function(match, lower, upper) {
            return lower + '-' + upper.toLowerCase();
        });
    }
});

ShareApp.Views.Preview = Backbone.Marionette.ItemView.extend({
    template: '#preview-template',
    tagName: 'div',
    className: 'preview',

    events: {
        'submit #form-preview': 'saveData'
    },

    onRender: function() {
        this.$el.find('#tags').selectize({
            delimiter: ',',
            persist: false,
            create: function(input) {
                return {
                    value: input,
                    text: input
                };
            }
        });
    },

    saveData: function(event) {
        // console.log(this.options.data);
        var form = this.$el.find('#form-preview'),
            // tags = form.find('#tags').val().split(/\s*,\s*/),
            tags = [],
            tagsInput = this.$el.find('.selectize-control .item'),
            notes = form.find('#notes').val(),
            data = this.options.data,
            date = moment().format();

        for (var i = 0; i < tagsInput.length; i++) {
            tags.push($(tagsInput[i]).data('value'));
        }

        var item = new ShareApp.Models.Item({
            title: data.title,
            type: data.type,
            description: data.description,
            thumbnailUrl: data.images[0].url,
            link: data.url,
            createDate: date,
            userId: data.userId,
            tags: tags,
            notes: notes
        });

        var promise = item.save();

        promise.done(function() {
            console.log('saved');
        });

        promise.fail(function() {
            console.log('failed');
        });

        event.preventDefault();
    }
});

ShareApp.Routers.Default = Backbone.Marionette.AppRouter.extend({
    routes : {
        '': 'mostPopular',
        'board': 'mostPopular',
        'tag/:tag': 'filterTag',
        'user/:userId': 'filterUser'
    },

    mostPopular: function() {
        var itemsCollection = new ShareApp.Collections.Items();

        itemsCollection.fetch();

        var headerView = new ShareApp.Views.Header({
            collection: itemsCollection
        });

        var itemsView = new ShareApp.Views.Items({
            collection: itemsCollection
        });

        this.show({
            header: headerView,
            main: itemsView
        });
    },

    filterTag: function(tag) {
        var itemsCollection = new ShareApp.Collections.Items();

        itemsCollection.fetch({
            data: {
                tags: tag
            }
        });

        var headerView = new ShareApp.Views.Header({
            collection: itemsCollection
        });

        var itemsView = new ShareApp.Views.Items({
            collection: itemsCollection
        });

        this.show({
            header: headerView,
            main: itemsView
        });
    },

    filterUser: function(userId) {
        var itemsCollection = new ShareApp.Collections.Items();

        itemsCollection.fetch({
            data: {
                user: userId
            }
        });

        var headerView = new ShareApp.Views.Header({
            collection: itemsCollection
        });

        var itemsView = new ShareApp.Views.Items({
            collection: itemsCollection
        });

        this.show({
            header: headerView,
            main: itemsView
        });
    },

    // Batch show
    show: function(regions) {
        _.each(regions, function(view, region){
            ShareApp[region + 'Region'].show(view);
        });
    },


    // Batch close
    close: function(regions) {
        _.each(regions, function(region){
            ShareApp[region + 'Region'].close();
        });
    }
});