metamaps--metamaps/app/assets/javascripts/src/Metamaps.GlobalUI.js

var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
/*

* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps
* object will be these
GlobalUI
Active
Maps
Mappers
Backbone

* all these get added when you are on a page with the Javascript Infovis Toolkit
Settings
Touch
Mouse
Selected
Metacodes
Topics
Synapses
Mappings
Create
TopicCard
SynapseCard
Visualize
Util
Realtime
Control
Filter
Listeners
Organize
Map
Mapper
Topic
Synapse
JIT
*/

Metamaps.Active = {
    Map: null,
    Topic: null,
    Mapper: null
};
Metamaps.Maps = {};

$(document).ready(function () {
  function init() {
    for (var prop in Metamaps) {

        // this runs the init function within each sub-object on the Metamaps one
        if (Metamaps.hasOwnProperty(prop) &&
            Metamaps[prop] != null &&
            Metamaps[prop].hasOwnProperty('init') &&
            typeof (Metamaps[prop].init) == 'function'
        ) {
            Metamaps[prop].init();
        }
    }
  }
  init();
});

Metamaps.GlobalUI = {
    notifyTimeout: null,
    lightbox: null,
    init: function () {
        var self = Metamaps.GlobalUI;

        self.Search.init();
        self.CreateMap.init();
        self.Account.init();

        //bind lightbox clicks
        $('.openLightbox').click(function (event) {
            self.openLightbox($(this).attr('data-open'));
            event.preventDefault();
            return false;
        });

        $('#lightbox_screen, #lightbox_close').click(self.closeLightbox);

        // initialize global backbone models and collections
        if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);

        var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
        var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : [];
        var mapperCollection = [];
        var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
        if (Metamaps.Maps.Mapper) {
            mapperCollection = Metamaps.Maps.Mapper.models;
            mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id;
        }
        var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
        var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
        Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' });
        Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, {id: 'shared', sortBy: 'updated_at' });
        // 'Mapper' refers to another mapper
        Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
        Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
        Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
    },
    openLightbox: function (which) {
        var self = Metamaps.GlobalUI;

        $('.lightboxContent').hide();
        $('#' + which).show();

        self.lightbox = which;

        $('#lightbox_overlay').show();

        var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
        // animate the content in from the bottom
        $('#lightbox_main').animate({
                'top': '50%',
                'margin-top': heightOfContent
        }, 200, 'easeOutCubic');

        // fade the black overlay in
        $('#lightbox_screen').animate({
                    'opacity': '0.42'
        }, 200);

        if (which == "switchMetacodes") {
            Metamaps.Create.isSwitchingSet = true;
        }
    },

    closeLightbox: function (event) {
        var self = Metamaps.GlobalUI;

        if (event) event.preventDefault();

        // animate the lightbox content offscreen
        $('#lightbox_main').animate({
                'top': '100%',
                'margin-top': '0'
        }, 200, 'easeInCubic');

        // fade the black overlay out
        $('#lightbox_screen').animate({
                    'opacity': '0.0'
        }, 200, function () {
            $('#lightbox_overlay').hide();
        });

        if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
        if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
        if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
            Metamaps.Create.cancelMetacodeSetSwitch();
        }
        self.lightbox = null;
    },
    notifyUser: function (message, leaveOpen) {
        var self = Metamaps.GlobalUI;

        function famousReady() {
          Metamaps.Famous.toast.surf.setContent(message);
          Metamaps.Famous.toast.show();
          clearTimeout(self.notifyTimeOut);
          if (!leaveOpen) {
              self.notifyTimeOut = setTimeout(function () {
                  Metamaps.Famous.toast.hide();
              }, 8000);
          }
        }

        // initialize the famous ui
        var callFamous = function(){
            if (Metamaps.Famous && Metamaps.Famous.toast) {
                famousReady();
            }
            else {
                setTimeout(callFamous, 100);
            }
        }
        callFamous();
    },
    clearNotify: function() {
        var self = Metamaps.GlobalUI;

        clearTimeout(self.notifyTimeOut);
        Metamaps.Famous.toast.hide();
    },
    shareInvite: function(inviteLink) {
        window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
    }
};

Metamaps.GlobalUI.CreateMap = {
    newMap: null,
    emptyMapForm: "",
    emptyForkMapForm: "",
    topicsToMap: [],
    synapsesToMap: [],
    init: function () {
        var self = Metamaps.GlobalUI.CreateMap;

        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });

        self.bindFormEvents();

        self.emptyMapForm = $('#new_map').html();

    },
    bindFormEvents: function () {
        var self = Metamaps.GlobalUI.CreateMap;

        $('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
          if (event.keyCode === 13) self.submit()
        })

        $('.new_map button.cancel').unbind().bind('click', function (event) {
            event.preventDefault();
            Metamaps.GlobalUI.closeLightbox();
        });
        $('.new_map button.submitMap').unbind().bind('click', self.submit);

        // bind permission changer events on the createMap form
        $('.permIcon').unbind().bind('click', self.switchPermission);
    },
    closeSuccess: function () {
        $('#mapCreatedSuccess').fadeOut(300, function(){
            $(this).remove();
        });
    },
    generateSuccessMessage: function (id) {
        var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/";
        stringStart += id;
        stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>";
        stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this ";
        var page = Metamaps.Active.Map ? 'map' : 'page';
        var stringEnd = "</a></div>";
        return stringStart + page + stringEnd;
    },
    switchPermission: function () {
        var self = Metamaps.GlobalUI.CreateMap;

        self.newMap.set('permission', $(this).attr('data-permission'));
        $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
        $(this).find('.mapPermIcon').addClass('selected');

        var permText = $(this).find('.tip').html();
        $(this).parents('.new_map').find('.permText').html(permText);
    },
    submit: function (event) {
        if (event) event.preventDefault();

        var self = Metamaps.GlobalUI.CreateMap;

        if (Metamaps.GlobalUI.lightbox === 'forkmap') {
            self.newMap.set('topicsToMap', self.topicsToMap);
            self.newMap.set('synapsesToMap', self.synapsesToMap);
        }

        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
        var $form = $(formId);

        self.newMap.set('name', $form.find('#map_name').val());
        self.newMap.set('desc', $form.find('#map_desc').val());

        if (self.newMap.get('name').length===0){
            self.throwMapNameError();
            return;
        }

        self.newMap.save(null, {
            success: self.success
            // TODO add error message
        });

        Metamaps.GlobalUI.closeLightbox();
        Metamaps.GlobalUI.notifyUser('Working...');
    },
    throwMapNameError: function () {
        var self = Metamaps.GlobalUI.CreateMap;

        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
        var $form = $(formId);

        var message = $("<div class='feedback_message'>Please enter a map name...</div>");

        $form.find('#map_name').after(message);
        setTimeout(function(){
            message.fadeOut('fast', function(){
                message.remove();
            });
        }, 5000);
    },
    success: function (model) {
        var self = Metamaps.GlobalUI.CreateMap;

        //push the new map onto the collection of 'my maps'
        Metamaps.Maps.Mine.add(model);

        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
        var form = $(formId);

        Metamaps.GlobalUI.clearNotify();
        $('#wrapper').append(self.generateSuccessMessage(model.id));

    },
    reset: function (id) {
        var self = Metamaps.GlobalUI.CreateMap;

        var form = $('#' + id);

        if (id === "fork_map") {
            self.topicsToMap = [];
            self.synapsesToMap = [];
            form.html(self.emptyForkMapForm);
        }
        else {
            form.html(self.emptyMapForm);
        }

        self.bindFormEvents();
        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });

        return false;
    },
};


Metamaps.GlobalUI.Account = {
    isOpen: false,
    changing: false,
    init: function () {
        var self = Metamaps.GlobalUI.Account;

        $('.sidebarAccountIcon').click(self.toggleBox);
        $('.sidebarAccountBox').click(function(event){
            event.stopPropagation();
        });
        $('body').click(self.close);
    },
    toggleBox: function (event) {
        var self = Metamaps.GlobalUI.Account;

        if (self.isOpen) self.close();
        else self.open();

        event.stopPropagation();
    },
    open: function () {
        var self = Metamaps.GlobalUI.Account;

        Metamaps.Filter.close();
        $('.sidebarAccountIcon .tooltipsUnder').addClass('hide');


        if (!self.isOpen && !self.changing) {
            self.changing = true;
            $('.sidebarAccountBox').fadeIn(200, function () {
                self.changing = false;
                self.isOpen = true;
                $('.sidebarAccountBox #user_email').focus();
            });
        }
    },
    close: function () {
        var self = Metamaps.GlobalUI.Account;

        $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
        if (!self.changing) {
            self.changing = true;
            $('.sidebarAccountBox #user_email').blur();
            $('.sidebarAccountBox').fadeOut(200, function () {
                self.changing = false;
                self.isOpen = false;
            });
        }
    }
};



Metamaps.GlobalUI.Search = {
    locked: false,
    isOpen: false,
    limitTopicsToMe: false,
    limitMapsToMe: false,
    timeOut: null,
    changing: false,
    optionsInitialized: false,
    init: function () {
        var self = Metamaps.GlobalUI.Search;

        var loader = new CanvasLoader('searchLoading');
        loader.setColor('#4fb5c0'); // default is '#000000'
        loader.setDiameter(24); // default is 40
        loader.setDensity(41); // default is 40
        loader.setRange(0.9); // default is 1.3
        loader.show(); // Hidden by default

        // bind the hover events
        $(".sidebarSearch").hover(function () {
            self.open()
        }, function () {
            self.close(800, false)
        });

        $('.sidebarSearchIcon').click(function (e) {
            $('.sidebarSearchField').focus();
        });
        $('.sidebarSearch').click(function (e) {
            e.stopPropagation();
        });
        $('body').click(function (e) {
            self.close(0, false);
        });

        // open if the search is closed and user hits ctrl+/
        // close if they hit ESC
        $('body').bind('keyup', function (e) {
            switch (e.which) {
            case 191:
                if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
                    self.open(true); // true for focus
                }
                break;
            case 27:
                if (self.isOpen) {
                    self.close(0, true);
                }
                break;

            default:
                break; //console.log(e.which);
            }
        });

        self.startTypeahead();
    },
    lock: function() {
        var self = Metamaps.GlobalUI.Search;
        self.locked = true;
    },
    unlock: function() {
        var self = Metamaps.GlobalUI.Search;
        self.locked = false;
    },
    open: function (focus) {
        var self = Metamaps.GlobalUI.Search;

        clearTimeout(self.timeOut);
        if (!self.isOpen && !self.changing && !self.locked) {
            self.changing = true;
            $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
                width: '400px'
            }, 300, function () {
                if (focus) $('.sidebarSearchField').focus();
                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
                    padding: '7px 10px 3px 10px',
                    width: '380px'
                });
                self.changing = false;
                self.isOpen = true;
            });
        }
    },
    close: function (closeAfter, bypass) {
        var self = Metamaps.GlobalUI.Search;

        self.timeOut = setTimeout(function () {
            if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) {
                self.changing = true;
                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
                    padding: '7px 0 3px 0',
                    width: '400px'
                });
                $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
                    width: '0'
                }, 300, function () {
                    $('.sidebarSearchField').typeahead('val', '');
                    $('.sidebarSearchField').blur();
                    self.changing = false;
                    self.isOpen = false;
                });
            }
        }, closeAfter);
    },
    startTypeahead: function () {
        var self = Metamaps.GlobalUI.Search;

        var mapheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
        var topicheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
        var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';

        var topics = {
            name: 'topics',
            limit: 9999,

            display: function(s) { return s.label; },
            templates: {
                notFound: function(s) {
                    return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
                        value: "No results",
                        label: "No results",
                        typeImageURL: Metamaps.Erb['icons/wildcard.png'],
                        rtype: "noresult"
                    });
                },
                header: topicheader,
                suggestion: function(s) {
                    return Hogan.compile($('#topicSearchTemplate').html()).render(s);
                },
            },
            source: new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/search/topics',
                    prepare: function(query, settings) {
                        settings.url += '?term=' + query;
                        if (Metamaps.Active.Mapper && self.limitTopicsToMe) {
                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
                        }
                        return settings;
                    },
                },
            }),
        };

        var maps = {
            name: 'maps',
            limit: 9999,
            display: function(s) { return s.label; },
            templates: {
                notFound: function(s) {
                    return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
                        value: "No results",
                        label: "No results",
                        rtype: "noresult"
                    });
                },
                header: mapheader,
                suggestion: function(s) {
                    return Hogan.compile($('#mapSearchTemplate').html()).render(s);
                },
            },
            source: new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/search/maps',
                    prepare: function(query, settings) {
                        settings.url += '?term=' + query;
                        if (Metamaps.Active.Mapper && self.limitMapsToMe) {
                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
                        }
                        return settings;
                    },
                },
            }),
        };

        var mappers = {
            name: 'mappers',
            limit: 9999,
            display: function(s) { return s.label; },
            templates: {
                notFound: function(s) {
                    return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
                        value: "No results",
                        label: "No results",
                        rtype: "noresult",
                        profile: Metamaps.Erb['user.png']
                    });
                },
                header: mapperheader,
                suggestion: function(s) {
                    return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
                },
            },
            source: new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/search/mappers?term=%QUERY',
                    wildcard: '%QUERY',
                },
            }),
        };

        // Take all that crazy setup data and put it together into one beautiful typeahead call!
        $('.sidebarSearchField').typeahead(
            {
                highlight: true,
            },
            [topics, maps, mappers]
        );

        //Set max height of the search results box to prevent it from covering bottom left footer
        $('.sidebarSearchField').bind('typeahead:render', function (event) {
            self.initSearchOptions();
            self.hideLoader();
            var h = $(window).height();
            $(".tt-dropdown-menu").css('max-height', h - 100);
            if (self.limitTopicsToMe) {
              $('#limitTopicsToMe').prop('checked', true);
            }
            if (self.limitMapsToMe) {
              $('#limitMapsToMe').prop('checked', true);
            }
        });
        $(window).resize(function () {
            var h = $(window).height();
            $(".tt-dropdown-menu").css('max-height', h - 100);
        });

        // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
        $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);

        // don't do it, if they clicked on a 'addToMap' button
        $('.sidebarSearch button.addToMap').click(function (event) {
            event.stopPropagation();
        });

        // make sure that when you click on 'limit to me' or 'toggle section' it works
        $('.sidebarSearchField.tt-input').keyup(function(){
            if ($('.sidebarSearchField.tt-input').val() === '') {
                self.hideLoader();
            } else {
                self.showLoader();
            }
        });

    },
    handleResultClick: function (event, datum, dataset) {
        var self = Metamaps.GlobalUI.Search;

        self.hideLoader();

        if (["topic", "map", "mapper"].indexOf(datum.rtype) !== -1) {
            self.close(0, true);
            var win;
            if (datum.rtype == "topic") {
                Metamaps.Router.topics(datum.id);
            } else if (datum.rtype == "map") {
                Metamaps.Router.maps(datum.id);
            } else if (datum.rtype == "mapper") {
                Metamaps.Router.explore("mapper", datum.id);
            }
        }
    },
    initSearchOptions: function () {
        var self = Metamaps.GlobalUI.Search;

        function toggleResultSet(set) {
            var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult');
            if (s.is(':visible')) {
                s.hide();
                $(this).removeClass('minimizeResults').addClass('maximizeResults');
            } else {
                s.show();
                $(this).removeClass('maximizeResults').addClass('minimizeResults');
            }
        }

        $('.limitToMe').unbind().bind("change", function (e) {
            if ($(this).attr('id') == 'limitTopicsToMe') {
              self.limitTopicsToMe = !self.limitTopicsToMe;
            }
            if ($(this).attr('id') == 'limitMapsToMe') {
              self.limitMapsToMe = !self.limitMapsToMe;
            }

            // set the value of the search equal to itself to retrigger the
            // autocomplete event
            var searchQuery = $('.sidebarSearchField.tt-input').val();
            $(".sidebarSearchField").typeahead('val', '')
                                    .typeahead('val', searchQuery);
        });

        // when the user clicks minimize section, hide the results for that section
        $('.minimizeMapperResults').unbind().click(function (e) {
            toggleResultSet.call(this, 'mappers');
        });
        $('.minimizeTopicResults').unbind().click(function (e) {
            toggleResultSet.call(this, 'topics');
        });
        $('.minimizeMapResults').unbind().click(function (e) {
            toggleResultSet.call(this, 'maps');
        });
    },
    hideLoader: function () {
        $('#searchLoading').hide();
    },
    showLoader: function () {
        $('#searchLoading').show();
    }
};