Reusable Accessible Mapping Platform

API Docs for: 3.0.0
Show:

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

  1. /*global define, TimelineLite, $ */
  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(["utils/util"],
  18. function (util) {
  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. heightGain = layout.headerHeight - layout.headerHeightCollapsed + layout.footerHeight - layout.footerHeightCollapsed,
  45.  
  46. isFullScreen = false,
  47. fullScreenTimeLine = new TimelineLite(
  48. {
  49. paused: true
  50. });
  51.  
  52. fullScreenTimeLine
  53. .to(header, transitionDuration, { top: navigation.outerHeight() * -1, position: "relative", ease: "easeOutCirc" }, 0)
  54. .set([navigation, megaMenuDiv], { display: "none !important" })
  55.  
  56. .to(wbCore, transitionDuration, { top: layout.headerHeightCollapsed, bottom: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0)
  57. .to(wbFoot, transitionDuration, { height: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0)
  58.  
  59. .set(body, { className: "+=full-screen" });
  60.  
  61. /**
  62. * Toggles full screen mode
  63. *
  64. * @method _toggleFullScreenMode
  65. * @param {Boolean} fullscreen true - full screen on; false - full screen off; undefined - toggle;
  66. */
  67. function _toggleFullScreenMode(fullscreen) {
  68. var extraTweeen = new TimelineLite({ paused: true });
  69.  
  70. isFullScreen = util.isUndefined(fullscreen) ? !isFullScreen : fullscreen;
  71.  
  72. if (isFullScreen) {
  73. fullScreenTimeLine.play();
  74.  
  75. //TweenLite.to(".sub-panel-container", transitionDuration, { top: "96px", bottom: "5px", ease: "easeOutCirc" });
  76. extraTweeen
  77. .to(".sub-panel-container.summary-data-details", transitionDuration,
  78. { top: layout.headerHeightCollapsed + layout.toolbarHeight, bottom: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0)
  79. .to(".sub-panel-container.full-data-details", transitionDuration,
  80. { top: layout.headerHeightCollapsed, bottom: layout.footerHeightCollapsed, ease: "easeOutCirc" }, 0)
  81.  
  82. .to(".full-data-mode .dataTables_scrollBody", transitionDuration,
  83. { height: "+=" + heightGain, ease: "easeOutCirc" }, 0.01); // animate height of the datatable scrollBody since it's explicitly set
  84.  
  85. } else {
  86. fullScreenTimeLine.reverse();
  87.  
  88. /*TweenLite.fromTo(".sub-panel-container", transitionDuration,
  89. { top: "96px", bottom: "5px" },
  90. { top: "187px", bottom: "30px", ease: "easeInCirc" });*/
  91. extraTweeen
  92. .to(".sub-panel-container.summary-data-details", transitionDuration,
  93. { top: layout.headerHeight + layout.toolbarHeight, bottom: layout.footerHeight, ease: "easeInCirc" }, 0)
  94. .to(".sub-panel-container.full-data-details", transitionDuration,
  95. { top: layout.headerHeight, bottom: layout.footerHeight, ease: "easeInCirc" }, 0)
  96.  
  97. .to(".full-data-mode .dataTables_scrollBody", transitionDuration - 0.01,
  98. { height: "-=" + heightGain, ease: "easeInCirc" }, 0); // animate height of the datatable scrollBody since it's explicitly set
  99. }
  100.  
  101. extraTweeen.play();
  102. }
  103.  
  104. return {
  105. /**
  106. * Allows to set callbacks to the full screen transition.
  107. *
  108. * @method fullScreenCallback
  109. * @param {String} event Event name to set a callback on
  110. * @param {Function} func A callback function
  111. * @return {Object} This
  112. * @chainable
  113. */
  114. fullScreenCallback: function (event, func) {
  115. fullScreenTimeLine.eventCallback(event, func);
  116.  
  117. return this;
  118. },
  119.  
  120. /**
  121. * Returns a boolean indication whether the full screen mode is on.
  122. *
  123. * @method isFullScreen
  124. * @return {Boolean} true / false
  125. */
  126. isFullScreen: function () {
  127. return isFullScreen;
  128. },
  129.  
  130. /**
  131. * Toggles the FullScreen mode of the application
  132. *
  133. * @method toggleFullScreenMode
  134. * @param {Boolean} fullscreen true - expand; false - collapse; undefined - toggle;
  135. * @return {Object} This
  136. * @chainable
  137. */
  138. toggleFullScreenMode: function (fullscreen) {
  139. _toggleFullScreenMode(fullscreen);
  140.  
  141. return this;
  142. },
  143.  
  144. /**
  145. * Tooltip setter helper method.
  146. *
  147. * @method tooltipster
  148. * @param {Jquery} target A node to looked for tooltiped children on
  149. * @param {String} type Type of the tooltips to set
  150. * @param {String} [action] Action name: "update" will update all the tooltips on target with their respective title attributes;
  151. * null will create new tooltips
  152. * @return {Object} This
  153. * @chainable
  154. */
  155. tooltipster: function (target, type, action) {
  156. var attr;
  157. target = target || $("body");
  158.  
  159. switch (type) {
  160. case "map":
  161. break;
  162.  
  163. default:
  164. attr = {
  165. theme: 'tooltipster-shadow',
  166. delay: 500
  167. };
  168. break;
  169. }
  170.  
  171. switch (action) {
  172. case "update":
  173.  
  174. target
  175. .find(".tooltipstered")
  176. .each(function (i, obj) {
  177. var node = $(obj);
  178. node
  179. .tooltipster("content", node.attr("title"))
  180. .removeAttr("title");
  181. });
  182. break;
  183.  
  184. case "destroy":
  185. target
  186. .find(".tooltipstered")
  187. .each(function (i, obj) {
  188. var node = $(obj);
  189. node
  190. .tooltipster("destroy");
  191. });
  192. break;
  193.  
  194. default:
  195. target.find('.tooltip, ._tooltip')
  196. .tooltipster({
  197. theme: 'tooltipster-shadow',
  198. delay: 500
  199. });
  200. break;
  201. }
  202.  
  203. return this;
  204. }
  205. };
  206. });