undefined

API Docs for: 5.4.0
Show:

File: src/js/RAMP/Modules/advancedToolbar.js

/*global define, $, TimelineLite, require, tmpl, console, RAMP */

/**
* Tools module. Contains tools accessible through Advanced Toolbar.
*
* Contains the advanced tools as a popup.
*
* @module Tools
* @main Tools
*/

/**
* AdvancedToolbar class.
*
* ####Imports RAMP Modules:
* {{#crossLink "EventManager"}}{{/crossLink}}  
* {{#crossLink "Map"}}{{/crossLink}}  
* {{#crossLink "GlobalStorage"}}{{/crossLink}}  
* {{#crossLink "Util"}}{{/crossLink}}  
* {{#crossLink "Dictionary"}}{{/crossLink}}  
* {{#crossLink "TmplHelper"}}{{/crossLink}}  
* {{#crossLink "PopupManager"}}{{/crossLink}}  
* 
* ####Uses RAMP Templates:
* {{#crossLink "templates/advanced_toolbar_template.json"}}{{/crossLink}}
* 
* @class AdvancedToolbar
* @static
* @uses dojo/_base/lang
* @uses dojo/topic
* @uses dojo/Deferred
*/

define([
    // Dojo
            'dojo/_base/lang', 'dojo/topic', 'dojo/Deferred',
    // Ramp
            'ramp/eventManager', 'ramp/map', 'ramp/globalStorage',
    // Util
            'utils/util', 'utils/dictionary', 'utils/popupManager',
            'utils/tmplHelper',
    // Text
            'dojo/text!./templates/advanced_toolbar_template.json'
],
    function (
    // Dojo
        dojoLang, topic, Deferred,
    // Ramp
        EventManager, RampMap, globalStorage,
    // Util
        UtilMisc, UtilDict, PopupManager, TmplHelper,
    // Text
        advanced_toolbar_template_json
    ) {
        'use strict';

        var map,

            tools = [
                // name,
                // selector,
                // enabled,
                // module
            ],

            ui = (function () {

                var advancedToggle,
                    advancedSectionContainer,
                    advancedToolbarList,

                    cssButtonPressedClass = 'button-pressed',

                    transitionDuration = 0.4,
                    subPanelMarginDelta = 32,

                    viewport = $('.viewport'),
                    panelToggle = viewport.find('#panel-toggle'),

                    advancedToolbarTimeline = new TimelineLite({ paused: true }),
                    subpanelTimeLine = new TimelineLite();

                /**
                 * Runs the open/close animation of the toolbar additionally managing the animation of adjusting the height of the details panel to accommodate the expanded toolbar.
                 * 
                 * @method toggleToolbar
                 * @param {Deferred} d a deferred to be resolved upon completion of the animation
                 * @param {Boolean} doOpen if true - the toolbar show open; if false - the toolbar should close
                 * @private
                 */
                function toggleToolbar(d, doOpen) {
                    var subPanelContainer = viewport.find('.sub-panel-container');

                    // clear and recreate tween to capture newly created subpanels
                    subpanelTimeLine
                        .clear()
                        .fromTo(subPanelContainer, transitionDuration,
                                { 'margin-top': 0, paused: true },
                                { 'margin-top': subPanelMarginDelta, ease: 'easeOutCirc' }, 0)
                        .seek(advancedToolbarTimeline.time());

                    if (!doOpen) {
                        advancedToolbarTimeline.eventCallback('onReverseComplete', function () {
                            d.resolve();
                            viewport.removeClass('advanced-toolbar-mode');
                        });
                        advancedToolbarTimeline.reverse();
                    } else {
                        viewport.addClass('advanced-toolbar-mode');
                        advancedToolbarTimeline.eventCallback('onComplete', function () {
                            d.resolve();
                        });
                        advancedToolbarTimeline.play();
                    }
                }

                return {
                    /**
                    * Initiates additional UI components of the widget, setting listeners and other stuff.
                    *
                    * @method ui.init
                    * @private
                    */
                    init: function () {
                        advancedToggle = viewport.find('#advanced-toggle');
                        advancedSectionContainer = viewport.find('#advanced-toolbar');

                        // create html code for advancedToolbar
                        tmpl.cache = {};
                        tmpl.templates = JSON.parse(TmplHelper.stringifyTemplate(advanced_toolbar_template_json));
                        advancedSectionContainer.append(tmpl('at_main'));
                        advancedToolbarList = advancedSectionContainer.find('#advanced-toolbar-list');

                        // create a timeline to animate toggling of the advanced toolbar
                        advancedToolbarTimeline
                            .set(advancedSectionContainer, { display: 'block' })
                            .fromTo(advancedToolbarList, transitionDuration, { top: -subPanelMarginDelta }, { top: 0, ease: 'easeOutCirc' }, 0)
                            .to(panelToggle, transitionDuration, { top: '+=' + subPanelMarginDelta, ease: 'easeOutCirc' }, 0)

                            .add(subpanelTimeLine, 0);

                        // register the popup for the advanced toolbar
                        PopupManager.registerPopup(advancedToggle, 'click',
                            function (d) {
                                topic.publish(EventManager.GUI.TOOLBAR_SECTION_OPEN, { id: 'advanced-toolbar' });

                                // close this panel if any other panel is opened
                                var that = this;
                                UtilMisc.subscribeOnce(EventManager.GUI.TOOLBAR_SECTION_OPEN, 
                                    function (evt) {
                                        if (evt.id !== 'advanced-toolbar' && that.isOpen()) {
                                            that.close();
                                        }
                                    });

                                toggleToolbar(d, true);
                            },
                            {
                                activeClass: cssButtonPressedClass,
                                setClassBefore: true,
                                target: advancedSectionContainer,
                                closeHandler: function (d) {
                                    topic.publish(EventManager.GUI.TOOLBAR_SECTION_CLOSE, { id: 'advanced-toolbar' });

                                    deactivateAll(); // deactivate all the tools
                                    toggleToolbar(d, false);
                                }
                            }
                        );

                        map = RampMap.getMap();
                    },

                    addTool: function (tool) {
                        advancedToolbarList.append(tool.module.node);
                    }
                };
            }());

        /**
        * Deactivates all the tools. Used when closing the Advanced toolbar or when another tool is being activated.
        *
        * @method deactivateAll
        * @param {Tool} except A tool module that should not be deactivated.
        * @private
        */
        function deactivateAll(except) {
            // deactivate all the tools except "except" tool
            tools.forEach(function (tool) {
                if ((!except || except.name !== tool.name) && tool.module) {
                    tool.module.deactivate();
                }
            });
        }

        return {
            init: function () {
                var toolsRequire;

                ui.init();

                tools = RAMP.config.advancedToolbar.tools;
                toolsRequire = tools
                    .filter(function (tool) { return tool.enabled; })
                    .map(function (tool) {
                        return 'tools/' + tool.name;
                    });

                // load all the tools in one go
                console.log('toolbar : loading tools', toolsRequire);
                require(toolsRequire, function () {
                    var deferredList = [],
                        deferred,
                        args = Array.prototype.slice.call(arguments);

                    args.forEach(function () {
                        deferredList.push(new Deferred());
                    });

                    UtilMisc.afterAll(deferredList, function () {
                        // insert tool buttons into the toolbar
                        tools.forEach(ui.addTool);
                    });

                    args.forEach(function (arg, index) {
                        deferred = new Deferred();

                        deferred.then(function (module) {
                            tools[index].module = module;
                            deferredList[index].resolve();
                        });

                        arg
                            .init(tools[index].selector, deferred)
                            .on(arg.event.ACTIVATE, function () {
                                console.log(arg.name, ': is activated');
                                deactivateAll(arg);
                            });
                    });

                    console.log(args);
                });
            }
        };
    });