Reusable Accessible Mapping Platform

API Docs for: 5.0.0
Show:

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

  1. /*global define, TimelineLite, TweenLite, $ */
  2.  
  3. /**
  4. * This submodule contains theme-specific classes with animation sequences such as Full Screen transition or tooltip setter helper method.
  5. *
  6. * @module RAMP
  7. * @submodule Theme
  8. *
  9. */
  10.  
  11. /**
  12. * Base theme for RAMP.
  13. *
  14. * @class Theme
  15. */
  16.  
  17. define(["dojo/_base/lang", "utils/util"],
  18. function (lang, UtilMisc) {
  19. "use strict";
  20.  
  21. var body = $("body"),
  22. wbCore = $("main"),
  23. wbFoot = $("footer"),
  24.  
  25. megaMenuDiv = $("#wb-sm"),
  26. navigation = $("#wb-bar"),
  27.  
  28. header = $("header"),
  29.  
  30. transitionDuration = 0.5,
  31.  
  32. layout = {
  33. headerHeight: 155,
  34. headerHeightCollapsed: 64,
  35.  
  36. footerHeight: 30,
  37. footerHeightCollapsed: 5,
  38.  
  39. subtitleHeight: 35,
  40.  
  41. toolbarHeight: 32
  42. },
  43.  
  44. // height gain from the fullscreening the template
  45. heightGain = layout.headerHeight - layout.headerHeightCollapsed + layout.footerHeight - layout.footerHeightCollapsed,
  46.  
  47. isFullScreen = false,
  48.  
  49. fullScreenTimeLine = new TimelineLite({ paused: true }),
  50. subpanelTimeline = new TimelineLite();
  51.  
  52. // tweening wet template parts
  53. fullScreenTimeLine
  54. .to(header, transitionDuration, { top: navigation.outerHeight() * -1, position: "relative", ease: "easeOutCirc" }, 0)
  55. .set([navigation, megaMenuDiv], { display: "none !important" })
  56.  
  57. .to(wbCore, transitionDuration, { top: layout.headerHeightCollapsed, bottom: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0)
  58. .to(wbFoot, transitionDuration, { height: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0)
  59.  
  60. .call(function () { body.addClass("full-screen"); }) // set full-screen class here, not in the callback since callbacks can be overwritten by fullScreenCallback function
  61.  
  62. .add(subpanelTimeline, 0); // special timeline to tween subpanels
  63.  
  64. /**
  65. * Toggles full screen mode
  66. *
  67. * @method _toggleFullScreenMode
  68. * @param {Boolean} fullscreen true - full screen on; false - full screen off; undefined - toggle;
  69. */
  70. function _toggleFullScreenMode(fullscreen) {
  71. subpanelTimeline
  72. .clear() // need to recreate this timeline every time to capture newly created subpanels
  73. .fromTo(".sub-panel-container.summary-data-details", transitionDuration,
  74. { top: layout.headerHeight + layout.toolbarHeight, bottom: layout.footerHeight },
  75. { top: layout.headerHeightCollapsed + layout.toolbarHeight, bottom: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0)
  76. .fromTo(".sub-panel-container.full-data-details", transitionDuration,
  77. { top: layout.headerHeight, bottom: layout.footerHeight },
  78. { top: layout.headerHeightCollapsed, bottom: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0);
  79.  
  80. isFullScreen = UtilMisc.isUndefined(fullscreen) ? !isFullScreen : fullscreen;
  81.  
  82. if (isFullScreen) {
  83. // need to tween datatables separately since it's very cumbersome to calculate their exact height - easier just to adjust height up/down by height gained when fullscreening the template
  84. TweenLite
  85. .to(".full-data-mode .dataTables_scrollBody", transitionDuration,
  86. { height: "+=" + heightGain, ease: "easeOutCirc", delay: 0.02 }); // animate height of the datatable scrollBody since it's explicitly set ,
  87.  
  88. fullScreenTimeLine.play();
  89.  
  90. } else {
  91. TweenLite
  92. .to(".full-data-mode .dataTables_scrollBody", transitionDuration - 0.02,
  93. { height: "-=" + heightGain, ease: "easeInCirc" }); // animate height of the datatable scrollBody since it's explicitly set ,
  94.  
  95. body.removeClass("full-screen");
  96. fullScreenTimeLine.reverse();
  97. }
  98. }
  99.  
  100. return {
  101. /**
  102. * Allows to set callbacks to the full screen transition.
  103. *
  104. * @method fullScreenCallback
  105. * @param {String} event Event name to set a callback on
  106. * @param {Function} func A callback function
  107. * @return {Object} This
  108. * @chainable
  109. */
  110. fullScreenCallback: function (event, func) {
  111. fullScreenTimeLine.eventCallback(event, func);
  112.  
  113. return this;
  114. },
  115.  
  116. /**
  117. * Returns a boolean indication whether the full screen mode is on.
  118. *
  119. * @method isFullScreen
  120. * @return {Boolean} true / false
  121. */
  122. isFullScreen: function () {
  123. return isFullScreen;
  124. },
  125.  
  126. /**
  127. * Toggles the FullScreen mode of the application
  128. *
  129. * @method toggleFullScreenMode
  130. * @param {Boolean} fullscreen true - expand; false - collapse; undefined - toggle;
  131. * @return {Object} This
  132. * @chainable
  133. */
  134. toggleFullScreenMode: function (fullscreen) {
  135. _toggleFullScreenMode(fullscreen);
  136.  
  137. return this;
  138. },
  139.  
  140. /**
  141. * Tooltip setter helper method.
  142. *
  143. * @method tooltipster
  144. * @param {Jquery} target A node to looked for tooltiped children on
  145. * @param {String} type Type of the tooltips to set
  146. * @param {String} [action] Action name: "update" will update all the tooltips on target with their respective title attributes;
  147. * null will create new tooltips
  148. * @return {Object} This
  149. * @chainable
  150. */
  151. tooltipster: function (target, type, action, options) {
  152. var attr;
  153. target = target || $("body");
  154.  
  155. switch (type) {
  156. case "map":
  157. break;
  158.  
  159. default:
  160. attr = {
  161. theme: 'tooltipster-shadow',
  162. delay: 500
  163. };
  164. break;
  165. }
  166.  
  167. switch (action) {
  168. case "update":
  169.  
  170. target
  171. .find(".tooltipstered")
  172. .each(function (i, obj) {
  173. var node = $(obj);
  174. node
  175. .attr("data-tooltip", node.attr("title"))
  176. .tooltipster("content", node.attr("title"))
  177. .removeAttr("title");
  178. });
  179. break;
  180.  
  181. case "destroy":
  182. target
  183. .find(".tooltipstered")
  184. .each(function (i, obj) {
  185. var node = $(obj);
  186. node
  187. .tooltipster("destroy");
  188. });
  189. break;
  190.  
  191. default:
  192. target
  193. .find('.tooltip, ._tooltip')
  194. // preserve title value for future use
  195. .each(function (i, obj) {
  196. var node = $(obj),
  197. title = node.attr("title");
  198.  
  199. if (title) {
  200. node.attr("data-tooltip", node.attr("title"));
  201. } else {
  202. node.attr("title", node.data("tooltip"));
  203. }
  204. node.tooltipster(
  205. lang.mixin({
  206. theme: node.data("tooltip-theme") || attr.theme,
  207. delay: attr.delay
  208. },
  209. options
  210. )
  211. );
  212. })
  213. .removeAttr("title");
  214. break;
  215. }
  216.  
  217. return this;
  218. }
  219. };
  220. });