Reusable Accessible Mapping Platform

API Docs for: 5.0.0
Show:

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

  1. /*global define, $, TimelineLite, require, tmpl, console, RAMP */
  2.  
  3. /**
  4. * Tools module. Contains tools accessible through Advanced Toolbar.
  5. *
  6. * Contains the advanced tools as a popup.
  7. *
  8. * @module Tools
  9. * @main Tools
  10. */
  11.  
  12. /**
  13. * AdvancedToolbar class.
  14. *
  15. * @class AdvancedToolbar
  16. * @static
  17. * @uses dojo/_base/lang
  18. * @uses dojo/_base/array
  19. * @uses dojo/topic
  20. * @uses dojo/Deferred
  21. * @uses ramp/eventManager
  22. * @uses ramp/map
  23. * @uses ramp/globalStorage
  24. * @uses PopupManager
  25. */
  26.  
  27. define([
  28. // Dojo
  29. "dojo/_base/lang", "dojo/_base/array", "dojo/topic", "dojo/Deferred",
  30. // Ramp
  31. "ramp/eventManager", "ramp/map", "ramp/globalStorage",
  32. // Util
  33. "utils/util", "utils/dictionary", "utils/popupManager",
  34. "utils/tmplHelper",
  35. // Text
  36. "dojo/text!./templates/advanced_toolbar_template.json"
  37. ],
  38.  
  39. function (
  40. // Dojo
  41. dojoLang, dojoArray, topic, Deferred,
  42. // Ramp
  43. EventManager, RampMap, globalStorage,
  44. // Util
  45. UtilMisc, UtilDict, PopupManager, TmplHelper,
  46. // Text
  47. advanced_toolbar_template_json) {
  48. "use strict";
  49.  
  50. var map,
  51.  
  52. tools = [
  53. // name,
  54. // selector,
  55. // enabled,
  56. // module
  57. ],
  58.  
  59. ui = (function () {
  60.  
  61. var advancedToggle,
  62. advancedSectionContainer,
  63. advancedToolbarList,
  64.  
  65. cssButtonPressedClass = "button-pressed",
  66.  
  67. transitionDuration = 0.4,
  68. subPanelMarginDelta = 32,
  69.  
  70. viewport = $(".viewport"),
  71. panelToggle = viewport.find("#panel-toggle"),
  72.  
  73. advancedToolbarTimeline = new TimelineLite({ paused: true }),
  74. subpanelTimeLine = new TimelineLite();
  75.  
  76. /**
  77. * 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.
  78. *
  79. * @method toggleToolbar
  80. * @param {Deferred} d a deferred to be resolved upon completion of the animation
  81. * @param {Boolean} doOpen if true - the toolbar show open; if false - the toolbar should close
  82. * @private
  83. */
  84. function toggleToolbar(d, doOpen) {
  85. var subPanelContainer = viewport.find(".sub-panel-container");
  86.  
  87. // clear and recreate tween to capture newly created subpanels
  88. subpanelTimeLine
  89. .clear()
  90. .fromTo(subPanelContainer, transitionDuration,
  91. { "margin-top": 0, paused: true },
  92. { "margin-top": subPanelMarginDelta, ease: "easeOutCirc" }, 0)
  93. .seek(advancedToolbarTimeline.time());
  94.  
  95. if (!doOpen) {
  96. advancedToolbarTimeline.eventCallback("onReverseComplete", function () {
  97. d.resolve();
  98. viewport.removeClass("advanced-toolbar-mode");
  99. });
  100. advancedToolbarTimeline.reverse();
  101. } else {
  102. viewport.addClass("advanced-toolbar-mode");
  103. advancedToolbarTimeline.eventCallback("onComplete", function () {
  104. d.resolve();
  105. });
  106. advancedToolbarTimeline.play();
  107. }
  108. }
  109.  
  110. return {
  111. /**
  112. * Initiates additional UI components of the widget, setting listeners and other stuff.
  113. *
  114. * @method ui.init
  115. * @private
  116. */
  117. init: function () {
  118. advancedToggle = viewport.find("#advanced-toggle");
  119. advancedSectionContainer = viewport.find("#advanced-toolbar");
  120.  
  121. // create html code for advancedToolbar
  122. tmpl.cache = {};
  123. tmpl.templates = JSON.parse(TmplHelper.stringifyTemplate(advanced_toolbar_template_json));
  124. advancedSectionContainer.append(tmpl("at_main"));
  125. advancedToolbarList = advancedSectionContainer.find("#advanced-toolbar-list");
  126.  
  127. // create a timeline to animate toggling of the advanced toolbar
  128. advancedToolbarTimeline
  129. .set(advancedSectionContainer, { display: "block" })
  130. .fromTo(advancedToolbarList, transitionDuration, { top: -subPanelMarginDelta }, { top: 0, ease: "easeOutCirc" }, 0)
  131. .to(panelToggle, transitionDuration, { top: "+=" + subPanelMarginDelta, ease: "easeOutCirc" }, 0)
  132.  
  133. .add(subpanelTimeLine, 0);
  134.  
  135. // register the popup for the advanced toolbar
  136. PopupManager.registerPopup(advancedToggle, "click",
  137. function (d) {
  138. topic.publish(EventManager.GUI.TOOLBAR_SECTION_OPEN, { id: "advanced-toolbar" });
  139.  
  140. // close this panel if any other panel is opened
  141. UtilMisc.subscribeOnce(EventManager.GUI.TOOLBAR_SECTION_OPEN, dojoLang.hitch(this,
  142. function (evt) {
  143. if (evt.id !== "advanced-toolbar" && this.isOpen()) {
  144. this.close();
  145. }
  146. })
  147. );
  148.  
  149. toggleToolbar(d, true);
  150. },
  151. {
  152. activeClass: cssButtonPressedClass,
  153. setClassBefore: true,
  154. target: advancedSectionContainer,
  155. closeHandler: function (d) {
  156. topic.publish(EventManager.GUI.TOOLBAR_SECTION_CLOSE, { id: "advanced-toolbar" });
  157.  
  158. deactivateAll(); // deactivate all the tools
  159. toggleToolbar(d, false);
  160. }
  161. }
  162. );
  163.  
  164. map = RampMap.getMap();
  165. },
  166.  
  167. addTool: function (tool) {
  168. advancedToolbarList.append(tool.module.node);
  169. }
  170. };
  171. }());
  172.  
  173. /**
  174. * Deactivates all the tools. Used when closing the Advanced toolbar or when another tool is being activated.
  175. *
  176. * @method deactivateAll
  177. * @param {Tool} except A tool module that should not be deactivated.
  178. * @private
  179. */
  180. function deactivateAll(except) {
  181. // deactivate all the tools except "except" tool
  182. tools.forEach(function (tool) {
  183. if ((!except || except.name !== tool.name) && tool.module) {
  184. tool.module.deactivate();
  185. }
  186. });
  187. }
  188.  
  189. return {
  190. init: function () {
  191. var toolsRequire;
  192.  
  193. ui.init();
  194.  
  195. tools = RAMP.config.advancedToolbar.tools;
  196. toolsRequire = tools
  197. .filter(function (tool) { return tool.enabled; })
  198. .map(function (tool) {
  199. return "tools/" + tool.name;
  200. });
  201.  
  202. // load all the tools in one go
  203. console.log("toolbar : loading tools", toolsRequire);
  204. require(toolsRequire, function () {
  205. var deferredList = [],
  206. deferred,
  207. args = Array.prototype.slice.call(arguments);
  208.  
  209. args.forEach(function () {
  210. deferredList.push(new Deferred());
  211. });
  212.  
  213. UtilMisc.afterAll(deferredList, function () {
  214. // insert tool buttons into the toolbar
  215. tools.forEach(ui.addTool);
  216. });
  217.  
  218. args.forEach(function (arg, index) {
  219. deferred = new Deferred();
  220.  
  221. deferred.then(function (module) {
  222. tools[index].module = module;
  223. deferredList[index].resolve();
  224. });
  225.  
  226. arg
  227. .init(tools[index].selector, deferred)
  228. .on(arg.event.ACTIVATE, function () {
  229. console.log(arg.name, ": is activated");
  230. deactivateAll(arg);
  231. });
  232. });
  233.  
  234. console.log(args);
  235. });
  236. }
  237. };
  238. });